blob: 862fc1bbbb052cda94afb646169e20df0d2a7b40 (
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
|
---
title: Demos of open web technologies
slug: Web/Demos
tags:
- 影片
- 網站
- 網頁
- 設計
translation_of: Web/Demos_of_open_web_technologies
original_slug: Web/Demos_of_open_web_technologies
---
<p>Mozilla 支援豐富、廣泛且扣人心弦的網路公開技術，並且我們鼓勵使用他們。這個頁面提供一些展示這些有趣技術的連結，包含那些曾經在 Demo Studio 有人氣的，但<a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">現在已經落伍了</a>的技術。如果你知道有關於新的網路公開技術，不錯的展示或是應用程式，請將連結加到下方適合的區塊中。</p>
<h2 id="2D_繪圖">2D 繪圖</h2>
<h3 id="SVG" name="SVG">Canvas</h3>
<ul>
<li><a class="external" href="http://www.blobsallad.se/">An interactive blob using javascript and canvas (fun)</a></li>
<li><a class="external" href="http://blobsallad.se/article/" title="http://blobsallad.se/article/">Blob's demos</a></li>
<li><a class="external" href="http://www.xs4all.nl/~peterned/3d/" title="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" title="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" title="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" 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://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://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (visual effects and interaction)</li>
<li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using <code>foreignObject</code> (visual effects and transforms)</li>
<li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactive)</li>
<li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactive)</li>
<li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/" title="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactive)</li>
<li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (or use the <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">local download</a>)</li>
<li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">source code</a>)</li>
<li><a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">SVG/CSS demo firefox developer edition</a> design by Rober Villar from Software RVG (<a href="https://github.com/SoftwareRVG/mde_design/blob/master/css_svg_dev">source code</a>) (<a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">debug mode</a>)</li>
</ul>
<h3 id="Video" name="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 class="external external-icon" 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> (with built in controls)</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">Dragable and sizable videos</a></li>
</ul>
<h2 id="3D_繪圖">3D 繪圖</h2>
<h3 id="WebGL">WebGL</h3>
<ul>
<li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
<li>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
<li>Escher puzzle (<a href="https://github.com/micahbolen/demoscene">source code</a>)</li>
<li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
</ul>
<h3 id="虛擬實境_(_Virtual_Reality_)">虛擬實境 ( Virtual Reality )</h3>
<ul>
<li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">source code</a>)</li>
<li>Sechelt fly-through (<a href="https://github.com/mozvr/sechelt">source code</a>)</li>
</ul>
<h2 id="CSS">CSS</h2>
<ul>
<li><a class="external external-icon" href="https://codepen.io/SoftwareRVG/full/OXkOWj">CSS floating logo " mozilla " developed by Rober Villar , from Software RVG. </a>(debug mode)</li>
<li><a class="external external-icon" href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo " mozilla " developed by Rober Villar , from Software RVG. </a>(source code)</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">source code</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">source code</a>)</li>
</ul>
<h2 id="遊戲">遊戲</h2>
<ul>
<li>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
<li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</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">source code</a>)</li>
</ul>
<h2 id="Web_APIs">Web APIs</h2>
<ul>
</ul>
<h3 id="提示工具的_API">提示工具的 API</h3>
<ul>
<li><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a> (<a href="https://github.com/elfoxero/html5notifications">source code</a>)</li>
</ul>
<ul>
</ul>
<h3 id="網路_API">網路 API</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://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">source code</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">source code</a>)</li>
<li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">source code</a>)</li>
</ul>
<h3 id="檔案的_API">檔案的 API</h3>
<ul>
<li><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - presentation from plain text files</a></li>
</ul>
<h3 id="Unclassified" name="Unclassified">Web Workers</h3>
<ul>
<li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
<li><a href="http://ondras.github.io/photo/">圖片編輯器</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" title="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
<li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
</ul>
|
