Engagement/Developer Engagement/Grab bag: Difference between revisions

Jump to navigation Jump to search

Engagement/Developer Engagement/Grab bag (view source)

Revision as of 17:18, 13 July 2012

1,649 bytes added ,  13 July 2012
no edit summary
No edit summary
Line 40: Line 40:
Showcases:  
Showcases:  


* [https://www.dropbox.com/s/dd4zi9ru2gilasp/responsive.mp4 Responsive design] - showing responsive mode in Firefox on [http://shinydemos Opera's shiny demos], [http://starbucks.com Starbucks]
* [https://www.dropbox.com/s/thag3xzwz5p9nd8/rollovers.mp4 CSS transform, animation and transition (MP4)] showing [http://thewebrocks.com/demos/cubes/ CSS Cubes], [http://thewebrocks.com/demos/3D-photo-rollover/ 3D photo rollover] and [http://codepo8.github.com/3drollovers.css/ 3Drollover.css]
* The [https://developer.mozilla.org/en-US/demos/devderby/2011/june/ Mozilla Dev Derby for June] had CSS animation as its main topic - there were some really cool entries as videos, too.
* The [https://developer.mozilla.org/en-US/demos/devderby/2011/june/ Mozilla Dev Derby for June] had CSS animation as its main topic - there were some really cool entries as videos, too.
* The [https://mozillademos.org/demos/planetarium/demo.html Planetarium demo] shows how animation can be used to showcase different planets [http://videos-cdn.mozilla.net/serv/mozhacks/demos/screencasts/planetarium/screencast.webm webm] [http://videos-cdn.mozilla.net/serv/mozhacks/demos/screencasts/planetarium/screencast.ogv ogv] [http://videos-cdn.mozilla.net/serv/mozhacks/demos/screencasts/planetarium/screencast.mp4 mp4]
* The [https://mozillademos.org/demos/planetarium/demo.html Planetarium demo] shows how animation can be used to showcase different planets [http://videos-cdn.mozilla.net/serv/mozhacks/demos/screencasts/planetarium/screencast.webm webm] [http://videos-cdn.mozilla.net/serv/mozhacks/demos/screencasts/planetarium/screencast.ogv ogv] [http://videos-cdn.mozilla.net/serv/mozhacks/demos/screencasts/planetarium/screencast.mp4 mp4]
Line 107: Line 109:
Showcases
Showcases


* [https://www.dropbox.com/s/lcziybzk2ezdr8v/music.mp4 Web Audio API] - showing [http://cubicvr.org/CubicVR.js/bd3/BeatDetektor3HD.html Beatdetektor3HD]
* [https://wiki.mozilla.org/Audio_Data_API Mozilla Audio Data API] with lots of demos
* [https://wiki.mozilla.org/Audio_Data_API Mozilla Audio Data API] with lots of demos
* [http://chromium.googlecode.com/svn/trunk/samples/audio/index.html Chrome web Audio demos]
* [http://chromium.googlecode.com/svn/trunk/samples/audio/index.html Chrome web Audio demos]
Line 136: Line 139:
Showcases:  
Showcases:  


* [https://www.dropbox.com/s/lnbcyg8h4f28mkb/canvas.mp4 Canvas screencast (MP4)] - showing [https://developer.mozilla.org/en-US/demosdetail/browser-fountain Browser fountain], [http://thewebrocks.com/demos/pigs/ Pig particles], [http://thewebrocks.com/demos/crop/ Canvas cropper], [http://thewebrocks.com/demos/canvasthumber/ Canvas Thumbnail generator]
* [https://developer.mozilla.org/en-US/demos/detail/browser-fountain The browser fountain] is a particle system in Canvas using browser logos as the particles. [http://cf.cdn.vid.ly/0w0n6e/webm.webm webm] [http://cf.cdn.vid.ly/0w0n6e/mp4.mp4 mp4] [http://cf.cdn.vid.ly/0w0n6e/ogv.ogv ogv]  
* [https://developer.mozilla.org/en-US/demos/detail/browser-fountain The browser fountain] is a particle system in Canvas using browser logos as the particles. [http://cf.cdn.vid.ly/0w0n6e/webm.webm webm] [http://cf.cdn.vid.ly/0w0n6e/mp4.mp4 mp4] [http://cf.cdn.vid.ly/0w0n6e/ogv.ogv ogv]  
* The [https://github.com/mrdoob/three.js/#readme three.js demo site] has a lot of great demos of both 2D and 3D examples using the library.
* The [https://github.com/mrdoob/three.js/#readme three.js demo site] has a lot of great demos of both 2D and 3D examples using the library.
Line 150: Line 154:
* Programming WebGL is a different skill set from web development and the learning kerb might be a bit high for people. Libraries like [https://github.com/mrdoob/three.js/ three.js] make things much easier but it still is a switch from a 2D to a 3D world.  
* Programming WebGL is a different skill set from web development and the learning kerb might be a bit high for people. Libraries like [https://github.com/mrdoob/three.js/ three.js] make things much easier but it still is a switch from a 2D to a 3D world.  


* [https://www.dropbox.com/s/6asiwy65c9mfryp/webgl.mp4 WebGL screencast(MP4)] showing various demos from [http://alteredqualia.com/ Alteredqualia]
* [http://www.stickmanventures.com/labs/demo/webgl-threejs-morph-target/ Ginger] is a great example for facial expressions in WebGL [http://cf.cdn.vid.ly/7y3w5q/webm.webm webm] [http://cf.cdn.vid.ly/7y3w5q/mp4.mp4 mp4] [http://cf.cdn.vid.ly/7y3w5q/ogv.ogv ogv]
* [http://www.stickmanventures.com/labs/demo/webgl-threejs-morph-target/ Ginger] is a great example for facial expressions in WebGL [http://cf.cdn.vid.ly/7y3w5q/webm.webm webm] [http://cf.cdn.vid.ly/7y3w5q/mp4.mp4 mp4] [http://cf.cdn.vid.ly/7y3w5q/ogv.ogv ogv]
* The [http://alteredqualia.com/three/examples/webgl_materials_skin.html Skin renderer in WebGL] looks pretty creepy but also very impressive. [http://cf.cdn.vid.ly/2s7y3e/webm.webm webm] [http://cf.cdn.vid.ly/2s7y3e/mp4.mp4 mp4] [http://cf.cdn.vid.ly/2s7y3e/ogv.ogv ogv]
* The [http://alteredqualia.com/three/examples/webgl_materials_skin.html Skin renderer in WebGL] looks pretty creepy but also very impressive. [http://cf.cdn.vid.ly/2s7y3e/webm.webm webm] [http://cf.cdn.vid.ly/2s7y3e/mp4.mp4 mp4] [http://cf.cdn.vid.ly/2s7y3e/ogv.ogv ogv]
Line 187: Line 192:
* [http://diveintohtml5.org/storage.html Storage on Dive into HTML5]
* [http://diveintohtml5.org/storage.html Storage on Dive into HTML5]
* [http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html 5 obscure facts about local storage]
* [http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html 5 obscure facts about local storage]
=== WebRTC ===
* [https://www.dropbox.com/s/nadqpz8n9jpse7z/camshow.mp4 Camshow (mp4)] - showing the [http://neave.com/webcam/html5/ WebRTC/WebGL toycam] in action (uses WebRTC with WebGL)


=== History API ===
=== History API ===
Line 240: Line 249:
* https://marketplace.mozilla.org/
* https://marketplace.mozilla.org/
* https://builder.addons.mozilla.org/
* https://builder.addons.mozilla.org/
==== Screencast ====
* [https://www.dropbox.com/s/cg7ukwj1vbna1dv/persona.mp4 Persona login (MP4)] - showing [http://123done.org 123done]


=== WebFWD Innovation Accelerator  ===
=== WebFWD Innovation Accelerator  ===
Line 301: Line 313:


[https://wiki.mozilla.org/B2G Boot to Gecko] is a new initiative of Mozilla that is very much in its first steps. It is a direct competitor to closed platforms for development of mobile and desktop applications with the goal to make building applications with open web technology as easy if not much more appealing to developers.
[https://wiki.mozilla.org/B2G Boot to Gecko] is a new initiative of Mozilla that is very much in its first steps. It is a direct competitor to closed platforms for development of mobile and desktop applications with the goal to make building applications with open web technology as easy if not much more appealing to developers.
=== Web Components/X-Tag ===
* [https://www.dropbox.com/s/eiww07je0z9y7d5/xtag.mp4 Web Components/X-tag screencast] showing the [http://mozilla.github.com/x-tag/ X-Tag page]
Cheilmann
Confirmed users
376

edits

Retrieved from "https://wiki.allizom.org/Special:MobileDiff/450528"

Navigation menu