---
title: Démos de technologies open web
slug: Web/Demos_of_open_web_technologies
translation_of: Web/Demos_of_open_web_technologies
original_slug: Web/Démos_de_technologies_open_web
---
<p>Mozilla supporte une large gamme de technologies open web vraiment intéressantes, et nous encourageons leur utilisation. Cette page offre des liens vers d'intéressantes démonstrations de ces technologies. Si vous avez entendu parler d'une bonne démonstration ou d'une application de technologie open web, veuillez ajouter un lien vers la section appropriée ici.</p>

<h2 id="Graphiques_2D">Graphiques 2D</h2>

<h3 id="APNG" name="APNG">APNG</h3>

<ul>
 <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Démo de Justin</a> (marche quand il est sauvegardé en local)</li>
</ul>

<h3 id="SVG" name="SVG">Canvas</h3>

<ul>
 <li><a class="external" href="http://www.blobsallad.se/">Un blob interactif utilisant javascript et canvas (fun)</a></li>
 <li><a class="external" href="http://blobsallad.se/article/" title="http://blobsallad.se/article/">Démos de Blob</a></li>
 <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Kit d'Expérimentation d'Animation Canvas (KEAC)</a></li>
 <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/" title="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
 <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html" title="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Jouer avec Canvas</a></li>
 <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html" title="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Utilisation de Canvas Html element5</a></li>
 <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
 <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html" title="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
 <li><a class="external" href="http://processingjs.org/exhibition/" title="http://dev.jquery.com/~john/processing.js/examples/basic/">processing.js</a></li>
 <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html" title="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li>
 <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html" title="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li>
 <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li>
 <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li>
 <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li>
 <li><a class="external" href="http://gyu.que.jp/jscloth/" title="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
 <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">source code</a>)</li>
</ul>

<h3 id="SVG" name="SVG">SVG</h3>

<ul>
 <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> Ne pas oublier de zoomer (marche quand il est sauvegardé en local)</li>
 <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">démo photo SVG</a> (effets visuels et interaction)</li>
 <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (effets visuels et interaction)</li>
 <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">transformations HTML</a> using <code>foreignObject</code> (effets visuels et transformations)</li>
 <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Guide Phonétiques</a> (interactif)</li>
 <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">démo objets 3D</a> (interactif)</li>
 <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/" title="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactif)</li>
 <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Vidéo embarquées dans SVG</a> (ou utiliser le <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">téléchargement local</a>)</li>
 <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">code source</a>)</li>
 <li><a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">démo firefox developer édition SVG/CSS </a>conçu par Rober Villar de chez Software RVG (<a href="https://github.com/SoftwareRVG/mde_design/blob/master/css_svg_dev">code source</a>) (<a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">mode debug</a>)</li>
</ul>

<h3 id="Video" name="Video">Vidéos</h3>

<ul>
 <li><a href="https://vimeo.com/172328210">Vidéo Animation 3D "mozilla en constante évolution" Conçue par Rober Villar ,dévéloppeur chez SoftwareRVG.</a></li>
 <li><a class="external external-icon" href="https://vimeo.com/173851395">Video animation 3D "Dance Flottante" . Conçue par Rober Villar , développeur chez SoftwareRVGdesignS.</a></li>
 <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Diffusion anime, Bande annonce de Film et Interview</a></li>
 <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Navigateur Firefox Flick de Billy</a></li>
 <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Salon de coiffure virtuelle</a></li>
 <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Bande annonce du Film Transformers</a></li>
 <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">Bande annonce du Film A Scanner Darkly</a> (avec commandes intégrées)</li>
 <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
 <li><a class="external" href="http://www.double.co.nz/video_test/video.svg" title="http://www.double.co.nz/video_test/video.svg">Vidéos traînable et rédimensionnable</a></li>
</ul>

<h2 id="Graphiques_3D">Graphiques 3D</h2>

<h3 id="WebGL">WebGL</h3>

<ul>
 <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
 <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">code source</a>)</li>
 <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">code source</a>)</li>
 <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">code source</a>)</li>
</ul>

<h3 id="Réalité_Virtuelle">Réalité Virtuelle</h3>

<ul>
 <li><a href="http://mozvr.com/demos/polarsea/">La Mer Polaire</a> (<a href="https://github.com/MozVR/polarsea">code source</a>)</li>
 <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">code source</a>)</li>
</ul>

<h3 id="Réalité_augmentée">Réalité augmentée</h3>

<ul>
 <li>
  <p><a href="https://jeeliz.com/rayban">essayage virtuel de lunettes (webcam recquise)</a></p>
 </li>
</ul>

<h2 id="CSS">CSS</h2>

<ul>
 <li><a class="external external-icon" href="http://s.codepen.io/SoftwareRVG/debug/OXkOWj">logo flottant " mozilla " CSS  développé par Rober Villar , de chez Software RVG. </a>(mode debug)</li>
 <li><a class="external external-icon" href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">logo flottant " mozilla " CSS développé par Rober Villar , from Software RVG. </a>(code source)</li>
 <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Conception de Formulaire de Contact Bootstrap</a></li>
 <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
 <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
 <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
 <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
 <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">code source</a>)</li>
 <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
 <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Conception de Page A Propos dans Bootstrap</a></li>
 <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html" rel="bookmark" title="One Page Scroll Website Template Theme Free Download">Modèle de Site Web "One Page Scroll"</a></li>
</ul>

<h3 id="Transformations">Transformations</h3>

<ul>
 <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">code source</a>)</li>
</ul>

<h2 id="Jeux">Jeux</h2>

<ul>
 <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">code source</a>)</li>
 <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">code source</a>)</li>
</ul>

<h2 id="HTML">HTML</h2>

<ul>
 <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">code source</a>)</li>
 <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTMl Meta Tags For SMO</a></li>
</ul>

<h2 id="APIs_Web">APIs Web</h2>

<ul>
</ul>

<h3 id="API_de_Notifications">API de Notifications</h3>

<ul>
 <li><a href="http://elfoxero.github.io/html5notifications/">Notifications HTML5</a> (<a href="https://github.com/elfoxero/html5notifications">code source</a>)</li>
</ul>

<ul>
</ul>

<h3 id="API_Web_Audio">API Web Audio</h3>

<ul>
 <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
 <li><a href="http://ondras.github.io/oscope/">oscope.js - Oscilloscope en JavaScript</a></li>
 <li><a href="http://mdn.github.io/audio-buffer/">Démo Tampon Audio</a> (<a href="http://mdn.github.io/audio-buffer/">code source</a>)</li>
 <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">code source</a>)</li>
 <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">Visualiseur Audio HTML5</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">code source</a>)</li>
 <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Editeur et Visualiseur de Filtre Graphique et Visualiseur</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">code source</a>)</li>
</ul>

<h3 id="API_de_Fichier">API de Fichier</h3>

<ul>
 <li><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - Présentation à partir de fichiers texte</a></li>
</ul>

<h3 id="Unclassified" name="Unclassified">Ouvriers du Web</h3>

<ul>
 <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
 <li><a href="http://ondras.github.io/photo/">Editeur Photo</a></li>
 <li><a href="http://ondras.github.io/coral/">Générateur de Corail</a></li>
 <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html" title="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
 <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
 <li><a href="http://webdeveloperbareilly.in/blog/seo/leverage-browser-caching.html">Activer la mise en cache du navigateur</a></li>
</ul>