blob: a7cf5325ceff13b02943466d5a632f0e0b97391b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
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>
|
