diff options
Diffstat (limited to 'files/es/web/demos/index.html')
| -rw-r--r-- | files/es/web/demos/index.html | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/files/es/web/demos/index.html b/files/es/web/demos/index.html new file mode 100644 index 0000000000..a7cf5325ce --- /dev/null +++ b/files/es/web/demos/index.html @@ -0,0 +1,162 @@ +--- +title: Demostraciones de tecnologías de Web Abierta +slug: Web/Demos +tags: + - 2D + - 3D + - CSS + - Canvas + - Design + - HTML + - SVG + - Video + - transform +translation_of: Web/Demos_of_open_web_technologies +original_slug: Web/Demos_of_open_web_technologies +--- +<p>Mozilla soporta una amplia variedad de emocionantes tecnologías web abiertas, y alentamos su utilización. Esta página ofrece enlaces a interesantes demostraciones de estas tecnologías, incluyendo algunas que fueron populares en la Demo Studio, la cual <a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">ha sido retirada desde entonces</a>. Si conoces una buena demostración o aplicación de tecnología web abierta, por favor agrega el enlace a la sección apropiada aquí.</p> + +<h2 id="Gráficos_2D">Gráficos 2D</h2> + +<h3 id="APNG" name="APNG">APNG</h3> + +<ul> + <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Justin's demo</a> (funciona cuando está guardado localmente)</li> +</ul> + +<h3 id="SVG" name="SVG">Canvas</h3> + +<ul> + <li><a class="external" href="http://www.blobsallad.se/">An interactive blob using javascript and canvas (divertido)</a></li> + <li><a class="external" href="http://blobsallad.se/article/">Blob's demos</a></li> + <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Canvas Animation Kit Experiment (CAKE)</a></li> + <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/">Canvas3D & Flickr</a></li> + <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li> + <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Using the 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">MSX Emulator</a></li> + <li><a class="external" href="http://processingjs.org/exhibition/">processing.js</a></li> + <li><a class="external" href="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">FireWorks</a></li> + <li><a class="external" href="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">Canvas ash2</a></li> + <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li> + <li><a class="external" href="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">código fuente</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> No olvides hacer un zoom (funciona cuando está guardado localmente)</li> + <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">SVG photo demo</a> (efectos visuales e interacción)</li> + <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (efectos visuales e interacción)</li> + <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> usando <code>foreignObject</code> (efectos visuales y transformaciones)</li> + <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactivo)</li> + <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactivo)</li> + <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactivo)</li> + <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (o usa la <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">descarga local</a>)</li> + <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">código fuente</a>)</li> +</ul> + +<h3 id="Video" name="Video">Video</h3> + +<ul> + <li><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving" Designed by Rober Villar ,SoftwareRVG developer.</a></li> + <li><a href="https://vimeo.com/173851395">Video 3D animation "Floating Dance" . Designed by Rober Villar , developer from SoftwareRVGdesignS.</a></li> + <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li> + <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li> + <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li> + <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li> + <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (con controles incorporados)</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">Dragable and sizable videos</a></li> +</ul> + +<h2 id="Gráficos_3D">Gráficos 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">código fuente</a>)</li> + <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">código fuente</a>)</li> + <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">código fuente</a>)</li> +</ul> + +<h3 id="Realidad_VIrtual">Realidad VIrtual</h3> + +<ul> + <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">código fuente</a>)</li> + <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">código fuente</a>)</li> +</ul> + +<h2 id="CSS">CSS</h2> + +<ul> + <li><a href="http://s.codepen.io/SoftwareRVG/debug/OXkOWj">CSS floating logo " mozilla " developed by Rober Villar , from Software RVG. </a>(modo depurado)</li> + <li><a href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo " mozilla " developed by Rober Villar , from Software RVG. </a>(codigo fuente)</li> + <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Responsive Contact Form</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">código fuente</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/css3/awesome-login-form.html">Awesome Login Page</a></li> + <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html">CSS3 One Page Scroll</a></li> +</ul> + +<h3 id="Transformaciones">Transformaciones</h3> + +<ul> + <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">código fuente</a>)</li> +</ul> + +<h2 id="Juegos">Juegos</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">código fuente</a>)</li> + <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">código fuente</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">código fuente</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="Web_APIs">Web APIs</h2> + +<ul> +</ul> + +<h3 id="API_Notificaciones"> API Notificaciones</h3> + +<ul> + <li><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a> (<a href="https://github.com/elfoxero/html5notifications">código fuente</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 - JavaScript oscilloscope</a></li> + <li><a href="http://mdn.github.io/audio-buffer/">Audio Buffer demo</a> (<a href="http://mdn.github.io/audio-buffer/">código fuente</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">código fuente</a>)</li> + <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">código fuente</a>)</li> + <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">código fuente</a>)</li> +</ul> + +<h3 id="Unclassified" name="Unclassified">Funciones Web</h3> + +<ul> + <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li> + <li><a href="http://ondras.github.io/photo/">Photo editor</a></li> + <li><a href="http://ondras.github.io/coral/">Coral generator</a></li> + <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li> +</ul> |