https://ex.lesmoutonssauvages.com/ fr SPIP - www.spip.net https://ex.lesmoutonssauvages.com/?Nono-le-robot https://ex.lesmoutonssauvages.com/?Nono-le-robot 2017-08-29T15:30:48Z text/html fr Charles Stephan <p>Design et développement d'un bot.<br class='autobr' /> Node - ES6 - express.js !</p> - <a href="https://ex.lesmoutonssauvages.com/?-Lab-R-D-" rel="directory">Lab/R&D</a> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L131xH150/arton25-e358a.png?1780681258' class='spip_logo spip_logo_right spip_logo_survol' width='131' height='150' alt="" data-src-hover="IMG/logo/artoff25.png?1504096238" /> <div class='rss_texte'><div class='spip_document_109 spip_document spip_documents spip_document_image spip_documents_center spip_document_center'> <figure class="spip_doc_inner"> <a href='https://ex.lesmoutonssauvages.com/IMG/png/capture_d_e_cran_2017-08-30_a_14.38.04.png' class="spip_doc_lien mediabox" type="image/png"> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH347/capture_d_e_cran_2017-08-30_a_14.38.04-93922.png?1780681258' width='500' height='347' alt='' /></a> </figure> </div><div class='spip_document_110 spip_document spip_documents spip_document_image spip_documents_center spip_document_center'> <figure class="spip_doc_inner"> <a href='https://ex.lesmoutonssauvages.com/IMG/png/capture_d_e_cran_2017-08-30_a_14.36.49.png' class="spip_doc_lien mediabox" type="image/png"> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH346/capture_d_e_cran_2017-08-30_a_14.36.49-9b8f7.png?1780681258' width='500' height='346' alt='' /></a> </figure> </div><div class='spip_document_111 spip_document spip_documents spip_document_image spip_documents_center spip_document_center'> <figure class="spip_doc_inner"> <a href='https://ex.lesmoutonssauvages.com/IMG/png/nonomiseensituation.png' class="spip_doc_lien mediabox" type="image/png"> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH906/nonomiseensituation-43d6e.png?1780681259' width='500' height='906' alt='' /></a> </figure> </div><div class='spip_document_112 spip_document spip_documents spip_document_image spip_documents_center spip_document_center'> <figure class="spip_doc_inner"> <a href='https://ex.lesmoutonssauvages.com/IMG/png/capture_d_e_cran_2017-08-30_a_14.37.20.png' class="spip_doc_lien mediabox" type="image/png"> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH343/capture_d_e_cran_2017-08-30_a_14.37.20-946d1.png?1780681259' width='500' height='343' alt='' /></a> </figure> </div></div> <div class="hyperlien">Voir en ligne : <a href="http://nono.lesmoutonssauvages.com" class="spip_out">Envie de le tester ?</a></div> https://ex.lesmoutonssauvages.com/?Carte-de-Voeux-Interactive https://ex.lesmoutonssauvages.com/?Carte-de-Voeux-Interactive 2017-03-10T16:02:08Z text/html fr Charles Stephan <p>Pour fêter l'année 2017 en beauté, nous avons décidé de créer une carte de voeux interactive pleine d'honnêteté et de malice...</p> - <a href="https://ex.lesmoutonssauvages.com/?-Lab-R-D-" rel="directory">Lab/R&D</a> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L130xH150/arton19-24183.jpg?1780681259' class='spip_logo spip_logo_right spip_logo_survol' width='130' height='150' alt="" data-src-hover="IMG/logo/artoff19.png?1503934769" /> <div class='rss_texte'><h2>Design du site</h2> <h3 class="spip"><span>Le retour des années 90<span class="barre"></span></span></h3> <p>L'inspiration du design est venue de la série des années 90 "Parker Lewis ne perd jamais". Nous avons décidé d'aborder cette époque graphiquement très riche.</p> <h3 class="spip"><span>Synchronisation des montres<span class="barre"></span></span></h3><div class='spip_document_43 spip_document spip_documents spip_document_image spip_documents_center spip_document_center'> <figure class="spip_doc_inner"> <a href='https://ex.lesmoutonssauvages.com/IMG/png/onvaetrehonnete.png' class="spip_doc_lien mediabox" type="image/png"> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH275/onvaetrehonnete-380bb.png?1780681260' width='500' height='275' alt='' /></a> </figure> </div><div class="displayer"> <span class="cale"></span> <span class="cale"></span> <span><img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH281/32a90842e5f615a64c1105e0d9a9ef-856ad.png?1780681260' width='500' height='281' alt='' /></span> <span><img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH281/16c4c0cd7da1b0ff631008575d9ac1-0c06a.png?1780681260' width='500' height='281' alt='' /></span> <span><img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH281/785ac46b13d7efd8280d321f002616-1ed7a.jpg?1780681260' width='500' height='281' alt='' /></span> <span><img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH281/400cf179912e58250df10f99caeeaf-0691d.png?1780681260' width='500' height='281' alt='' /></span> </div><h3 class="spip"><span> Les mini-jeux<span class="barre"></span></span></h3><div class='spip_document_45 spip_document spip_documents spip_document_image spip_documents_center spip_document_center'> <figure class="spip_doc_inner"> <a href='https://ex.lesmoutonssauvages.com/IMG/gif/mouillettes.gif' class="spip_doc_lien mediabox" type="image/gif"> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH293/mouillettes-018fc.png?1780681260' width='500' height='293' alt='' /></a> </figure> </div><h2> Le LOL </h2> <h3 class="spip"><span>Les blagues sonores<span class="barre"></span></span></h3><div class="fullVideo r169"> <iframe src="" frameborder="0" allowTransparency="true" allowfullscreen data-src="https://www.youtube.com/embed/ DXc7H6wbZN4?autoplay=1"></iframe> <button style="background-image:url(IMG/png/2xplusderire.png)"> <span> <svg x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve"> <path d="M82.1,74.8L69.2,63.4c-0.3-0.3-0.7-0.3-1.1-0.2c-0.4,0.2-0.6,0.5-0.6,0.9l0,22.4c0,0.4,0.2,0.7,0.6,0.9 c0.1,0.1,0.3,0.1,0.4,0.1c0.2,0,0.5-0.1,0.6-0.2l12.9-11c0.2-0.2,0.3-0.5,0.4-0.8C82.5,75.3,82.3,75,82.1,74.8z"/> </svg> </span> </button> </div></div> <div class="hyperlien">Voir en ligne : <a href="http://www.en2017.net/" class="spip_out">Découvrez ^la carte de voeux</a></div> https://ex.lesmoutonssauvages.com/?Outil-d-aide-a-la-vente https://ex.lesmoutonssauvages.com/?Outil-d-aide-a-la-vente 2015-09-30T13:40:00Z text/html fr Charles Stephan <p>Accompagnement & Création d'un outil d'aide à la vente pour la marque de vêtements Faith Connexion.<br class='autobr' /> Nous fûmes aussi chargés de la réalisation du POC</p> - <a href="https://ex.lesmoutonssauvages.com/?-Lab-R-D-" rel="directory">Lab/R&D</a> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L100xH150/arton32-559ac.jpg?1780757746' class='spip_logo spip_logo_right spip_logo_survol' width='100' height='150' alt="" data-src-hover="IMG/logo/artoff32.jpg?1504100423" /> <div class='rss_texte'><h2>Conception</h2> <div class='spip_document_115 spip_document spip_documents spip_document_image spip_documents_center spip_document_center'> <figure class="spip_doc_inner"> <a href='https://ex.lesmoutonssauvages.com/IMG/jpg/ergo1.jpg' class="spip_doc_lien mediabox" type="image/jpeg"> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH377/ergo1-2833f.jpg?1780757746' width='500' height='377' alt='' /></a> </figure> </div> <div class='spip_document_116 spip_document spip_documents spip_document_image spip_documents_center spip_document_center'> <figure class="spip_doc_inner"> <a href='https://ex.lesmoutonssauvages.com/IMG/jpg/ergo2.jpg' class="spip_doc_lien mediabox" type="image/jpeg"> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH377/ergo2-8749d.jpg?1780757746' width='500' height='377' alt='' /></a> </figure> </div> <div class='spip_document_117 spip_document spip_documents spip_document_image spip_documents_center spip_document_center'> <figure class="spip_doc_inner"> <a href='https://ex.lesmoutonssauvages.com/IMG/jpg/ergo3.jpg' class="spip_doc_lien mediabox" type="image/jpeg"> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH377/ergo3-736dd.jpg?1780757746' width='500' height='377' alt='' /></a> </figure> </div> <div class='spip_document_118 spip_document spip_documents spip_document_image spip_documents_center spip_document_center'> <figure class="spip_doc_inner"> <a href='https://ex.lesmoutonssauvages.com/IMG/jpg/ergo4.jpg' class="spip_doc_lien mediabox" type="image/jpeg"> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH377/ergo4-1d29a.jpg?1780757746' width='500' height='377' alt='' /></a> </figure> </div> <h2>Prototypage</h2> <div style="text-align:center;"><iframe width="396" height="858" src="//invis.io/PK3PM9D2J" frameborder="0" allowfullscreen></iframe></div></div> <div class="hyperlien">Voir en ligne : <a href="https://www.faithconnexion.com/" class="spip_out">Faith Connexion</a></div> https://ex.lesmoutonssauvages.com/?Animation-interactive https://ex.lesmoutonssauvages.com/?Animation-interactive 2015-09-15T11:08:00Z text/html fr Charles Stephan <p>L'agence <a href="http://www.epicea.com" class="spip_out" rel="external">Epicea</a> se renouvelle et développe un nouveau pôle : le digital. L'équipe de créativité de cette agence nous a sollicité pour réaliser, en collaboration, la création d'un stopmotion dont l'utilisateur contrôle la lecture...</p> - <a href="https://ex.lesmoutonssauvages.com/?-Lab-R-D-" rel="directory">Lab/R&D</a> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L150xH146/arton21-a33b7.jpg?1780757746' class='spip_logo spip_logo_right spip_logo_survol' width='150' height='146' alt="" data-src-hover="IMG/logo/artoff21.jpg?1504017192" /> <div class='rss_texte'><h2>Quatre valeurs à illustrer <br> un moteur de rendu 2d à créer</h2><div class='spip_document_57 spip_document spip_documents spip_document_image spip_documents_center spip_document_center'> <figure class="spip_doc_inner"> <a href='https://ex.lesmoutonssauvages.com/IMG/jpg/epice_1.jpg' class="spip_doc_lien mediabox" type="image/jpeg"> <img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH333/epice_1-9d3d9.jpg?1780757746' width='500' height='333' alt='' /></a> </figure> </div><h3 class="spip"><span>Le dessin<span class="barre"></span></span></h3> <p>Un petit coup de flash pour poser les volumes (oui on aurait pu tout faire en 3d) beaucoup de coup de cutter...</p> <div class="fullVideo r169"> <iframe src="" frameborder="0" allowTransparency="true" allowfullscreen data-src="https://www.youtube.com/embed/ LT49Q2YGdh8?autoplay=1"></iframe> <button style="background-image:url(IMG/png/stopmotionepicea.png)"> <span> <svg x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve"> <path d="M82.1,74.8L69.2,63.4c-0.3-0.3-0.7-0.3-1.1-0.2c-0.4,0.2-0.6,0.5-0.6,0.9l0,22.4c0,0.4,0.2,0.7,0.6,0.9 c0.1,0.1,0.3,0.1,0.4,0.1c0.2,0,0.5-0.1,0.6-0.2l12.9-11c0.2-0.2,0.3-0.5,0.4-0.8C82.5,75.3,82.3,75,82.1,74.8z"/> </svg> </span> </button> </div><h3 class="spip"><span>Le moteur de rendu<span class="barre"></span></span></h3> <p>Aucun outil existant ne nous allait aussi nous avons décidé de développer un moteur nous même. Full javascript.</p> <div class="displayer"> <span class="cale"></span> <span class="cale"></span> <span class="cale"></span> <span><img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH281/38248e5140baaebaf3485ec94cb06c-7ffef.png?1780757746' width='500' height='281' alt='' /></span> <span><img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH281/b53ee14445831b4af967544b73dbe1-ff793.jpg?1780757746' width='500' height='281' alt='' /></span> <span><img src='https://ex.lesmoutonssauvages.com/local/cache-vignettes/L500xH281/e43fadd8544627eee687bee5f5729d-02b45.jpg?1780757746' width='500' height='281' alt='' /></span> </div> <p>C'est en scrollant que nous contrôlons le framing des séquences.<br class='autobr' /> Un mélange de vidéo interactive et d'un bon vieux One page.</p></div> <div class="hyperlien">Voir en ligne : <a href="http://www.epicea.com/Presentation" class="spip_out">Mais découvrez ^la plutôt</a></div>