Engagement/Developer Engagement/Grab bag: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
Line 1: Line 1:
*Last update:* 11 July 2014 by Christian Heilmann
Do you want to give a talk and cover a certain product or technology and you are not sure how to? This is a pick'n'mix grab bag of topics, examples of explanations, links to screencasts, products and videos to help you along.  
Do you want to give a talk and cover a certain product or technology and you are not sure how to? This is a pick'n'mix grab bag of topics, examples of explanations, links to screencasts, products and videos to help you along.  


If you have some specific question, contact us either on IRC on #devrel (irc.mozilla.org) or directly via the emails listed on the Developer Engagement page (Mozilla internal).  
If you have some specific question, contact us either on IRC on #devrel (irc.mozilla.org) or directly via the emails listed on the Developer Engagement page (Mozilla internal).  


== HTML5 and other "new" technologies ==
== Presentations and presentation templates ==  
 
HTML5 was the re-boot of web development practices. The old ways of developing web sites didn't fit the need of a fast moving environment that extended past the desktop towards mobiles and tablets and we needed a way to shift more responsibility to the user agent (in most cases the browser). Therefore HTML5 broke a few of the earlier conventions but empowers web developers far beyond what we were able to do in the past.
 
=== Key messages about HTML5 ===
 
* HTML5 is partly a misnomer. The old versions of HTML did nothing else but add meaning to text content by giving it semantic value, linking and including other files like images, objects (in most cases flash movies), sound, video and style sheets. The HTML5 standard now includes a lot of information about JavaScript interfaces for web sites and most importantly a "how to build a HTML5 compliant browser".
* HTML5 is defined in a joint effort by the WHATWG working group (which includes a lot of browser vendors) and the W3C. The WHATWG runs the wild innovation part of HTML5 - not everything that is in their specification will make it into the final one. The W3C effort is more conservative and therefore more interesting for an enterprise market.
* HTML5 is open - you learn by viewing the source code of others. This also means it is up to us to write clean HTML5 to set a good example and base to work from.
* HTML5 is interoperable - products built with it are meant to run on a large variety of hardware. Therefore not all best practices we have on desktop apply to it.
* HTML5 is meant to be backwards compatible - old browsers that do for example not understand the new form elements should offer a normal text field as the means of entering the information.
 
=== HTML5 for everybody ===
 
One big request from audiences is always "how do I get started with HTML5" and there are a few things you can show/give them.
 
* [http://html5boilerplate.com/ HTML5 boilerplate] is an HTML template, demo CSS3 files and all the fixes needed to make HTML5 work for legacy browsers. Unzip the provided file, start editing index.html and we are off.
* [http://www.modernizr.com/ Modernizr] is a JavaScript library that makes it much easier to test if the current environment supports HTML5 and other new technology. It performs a few checks for you and adds classes to the root element of the document. That way you can use the class name in your CSS to conditionally append styles, f.e. .fontface .nav-item{} where the fontface was added by Modernizr after testing that the browser supports custom fonts.
* [http://diveintohtml5.org Dive into HTML5] is a great, free online book on the subject
* [http://html5doctor.com HTML5 Doctor] is a simple blog with very up-to-date HTML5 information
* [http://www.html5rocks.com/en/ HTML5 rocks] has documentation and tutorials
* [http://html5readiness.com/ HTML5 readiness] shows the support of HTML5 (and other new tech) features in browsers
* [http://caniuse.com Can I use] is a great resource that shows the support of new tech features in browsers
 
=== CSS3 ===
 
CSS3 is a vast topic to cover as it ranges from visual enhancements like rounded corners, gradients and shadows via simple transformation up to full animations and 3D transformations. In essence it enhances the capabilities of CSS2 much further and in some areas competes with JavaScript for behaviour changes in our interfaces.
 
The main selling points of CSS3:
 
* '''Independence of images''' - this means fewer HTTP requests (faster loading sites) and simpler redesigns - if the colour scheme of your site changes from green to blue, you don't need to create a lot of images, optimise them and upload them to a CDN.
* '''Mathematical access to graphics''' - you can rotate and zoom elements in the page with degrees and zoom levels. That way if you need a text that is 45 degrees turned to change to 37.5 degrees all you need to do is to alter the CSS value.
* '''All visuals are maintained in the same space''' - before CSS3, we mostly did animations with JavaScript which meant that maintainers needed to be proficient in both technologies.
* '''Hardware acceleration''' - CSS animations and transformations and hardware accelerated which is especially effective on mobile devices.
 
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://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/dashboard/demo.html HTML5 Dashboard demo] has some good examples for all "new tech" implementations. The CSS3 one is very effective when you go through it one by one.  [http://cf.cdn.vid.ly/2j2o8i/webm.webm webm] [http://cf.cdn.vid.ly/2j2o8i/mp4.mp4 mp4] [http://cf.cdn.vid.ly/2j2o8i/ogv.ogv ogv]
* [http://benthebodyguard.com Ben the body guard] is a site advertising an app that uses CSS3 animation and jQuery to do some storytelling. The thing to point out (which is also on the screencast) is that they didn't do a good job of using CSS to improve semantic HTML - the site is just empty DIVs. [http://cf.cdn.vid.ly/1r3u4k/webm.webm webm] [http://cf.cdn.vid.ly/1r3u4k/mp4.mp4 mp4] [http://cf.cdn.vid.ly/1r3u4k/ogv.ogv ogv]
* [http://animatable.com/demos/madmanimation/ Madmanimation] is a showcase of the [http://animatable.com Animatable] tool, which turns an HTML storyboard (check the site in Opera to see the fallback) into a cool animation. This is progressive enhancement as it should be done. [http://cf.cdn.vid.ly/5u4d7h/webm.webm webm] [http://cf.cdn.vid.ly/5u4d7h/mp4.mp4 mp4] [http://cf.cdn.vid.ly/5u4d7h/ogv.ogv ogv]
 
=== HTML5 forms ===
 
HTML5 forms allow us to build more interactive applications for our users and get rid of a few of the annoyances we had to deal with in the past:
 
* They offer simple client-side validation of form elements. In the past we always wrote that in JavaScript and repeated it on the server which made maintenance harder. It is important to explain though that server side validation is still very much needed as you could bypass the client-side validation with, for example, cURL. It is also worth pointing out that HTML5 forms have a validation API in JavaScript, so if you don't like the way browsers display errors you can roll your own error display.
* We have new cool elements:
** '''Date picker''' - writing a client-side calendar that localises to different markets is a pain to do - now we don't need that any longer
** '''Number fields''' - they render with up/down arrows and allow simple entry. They also come with min and max and step attributes to define the allowed range and make it easy for users to increase by, let's say 0.1 instead of 1
** '''Email/URL/Phone fields''' - they don't mean much on a desktop but are a total win on mobile devices as they switch the keyboards around and tie into your history and address books - that way you need to enter a lot less and you don't need to switch from alphanumeric to numeric keyboard.
** '''Range''' - renders a slider control - something we never had natively
** '''Datalist''' - is a combo box we had in many other GUI frameworks - it allows for open text entry but offers autocomplete for a preset of values. The really cool thing about this one is that it extends an input for backwards compatibility.
 
The great thing about HTML5 form elements is that they gracefully degrade to a text input on old browsers. The bad thing about them is that they are not well  supported across browsers as [http://wufoo.com/html5/ this comparison grid by Wufoo] shows.
 
=== HTML5 File APIs ===
 
This is a big topic and might be hard to understand for people. I like to show an example screencast of either of the following examples. The main thing to tell people about the File APIs is that they make it much easier for us to build applications without a server and that we use the end user's computer power for our needs. It is a bit like SETI@home, only for humans, not aliens.
 
* [http://min.us Min.us] - this is showing how you can drag and drop an image into the browser and then send it to image hosting sites. Explain how much easier that is than uploading them one by one. [http://cf.cdn.vid.ly/8x6g0l/webm.webm webm] [http://cf.cdn.vid.ly/8x6g0l/mp4.mp4 mp4] [http://cf.cdn.vid.ly/8x6g0l/ogv.ogv ogv]
* [http://c64.superdefault.com/ 64 yourself] - this shows how you can drag a file into the browser, convert it and save it back without any server interaction. It also has a cool geek feeling to it :)  [http://cf.cdn.vid.ly/1i6y3n/webm.webm webm] [http://cf.cdn.vid.ly/1i6y3n/mp4.mp4 mp4] [http://cf.cdn.vid.ly/1i6y3n/ogv.ogv ogv]
* [https://mozillademos.org/demos/motivational/demo.html Motivational poster] - our own demo, this shows again how to manipulate an image in the browser before uploading it. [http://cf.cdn.vid.ly/5w7e3d/webm.webm webm] [http://cf.cdn.vid.ly/5w7e3d/mp4.mp4 mp4] [http://cf.cdn.vid.ly/5w7e3d/ogv.ogv ogv]
 
=== HTML5 Video ===
 
HTML5 video was probably the main breakthrough for the new technology. We realised pretty early that the media internet will not stay interesting enough for mass market end users if we keep it strictly text and image based. The benefit of HTML5 video over plugin-based solutions is that the video is just another element in the document. This solved a few issues we had with Flash or Silverlight based video solutions:
 
* Videos have a native browser control, which means they are keyboard accessible and assistive technology can interact with them
* Videos can be styled with CSS much like any other element in the document, you can zoom them, rotate them, add borders, make them transparent and many more things that weren't possible with a Flash embed
* Videos have a built-in API that allows you to write your own controls, react to the time of the movie, test what video formats are supported and get all kind of information about them that you couldn't get with Flash videos.
* Videos can easily interact with other parts of the page and can even get generated dynamically. A plugin always was a black box of unknown in your document
 
* [http://isithackday.com/syncing-video/ Syncing HTML5 video with page content] is a demo that shows how to use data- attributes to show and hide content in a page at a certain time [http://cf.cdn.vid.ly/5e2v2g/webm.webm webm] [http://cf.cdn.vid.ly/5e2v2g/mp4.mp4 mp4]  [http://cf.cdn.vid.ly/5e2v2g/ogv.ogv ogv] — I normally follow this up by explaining and showing [http://popcornjs.org/ Popcorn.js]
* [http://www.thisshell.com/ This Shell] is a clever way of re-using a Canvas+video demo to promote a song. You need to put the video together as a puzzle and when you manage to do it on time you can download the song [http://cf.cdn.vid.ly/5y4i9j/webm.webm webm] [http://cf.cdn.vid.ly/5y4i9j/mp4.mp4 mp4] [http://cf.cdn.vid.ly/5y4i9j/ogv.ogv ogv]
* There was a [https://developer.mozilla.org/en-US/demos/devderby/2011/july/ Mozilla Dev Derby on HTML5 video] with great examples of what can be done with open video.
 
====Issues with HTML5 video====
 
Of course not everything is rosy about HTML5 video at the moment and the following things are constantly brought up in Q&A sessions with audiences. It is important to make the message clear that there are some issues with it and that sometimes Flash video is the better option (less and less though).
 
* '''Different codecs for different browsers''' —  there is a discord among browser vendors when it comes to defining what constitutes HTML5 video. Whilst Microsoft and Apple favour mp4 files with [http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC H.264] encoding (which is also the format for Blue Ray discs), Google, Opera and Mozilla went for fully open codec formats like [http://en.wikipedia.org/wiki/Theora Ogg Video] and [http://en.wikipedia.org/wiki/Webm Web-M]. This means a few annoying things:
** If you want to support all HTML5 browsers with your videos, you have to convert them into three formats.
** If you also want to support different mobiles and tablets you will also have to create the video in different resolutions and sizes.
** One simple way to do this is to use online services. [http://archive.org Archive.org] for example automatically converts hosted videos (which have to be licensed with Creative Commons or Public Domain) you upload to OGG and MP4, so all you need to do is create a WebM version.
** [http://vid.ly Vid.ly] converts videos to 20 formats and provides you with a URL that redirects different browsers, mobiles and consoles to the right format automatically.
* '''HTML5 video is open, and so is the source file''' — if people want to offer video in HTML5, then the files will be possible to download. YouTube's HTML5 player goes through a proxy server to prevent this but it can be easily fooled. If people want DRM in their files and prevent users from downloading them they need to use Silverlight or Flash (or host the files on a login-protected server).
 
=== HTML5 Audio ===
 
Technically HTML5 audio should not be much harder than video but the implementations in browsers right now are not as good as they could be. There are issues with looping sounds for example. One of the issues is that the most used audio format on the web - MP3 - is not an open format.
 
The benefits of audio are the same as for HTML5 video:
 
* Native player controls allow for keyboard access
* Simple communication with the rest of the page allows for great experiences of audio with other open technologies
 
The issues with HTML5 have been discussed in detail by Scott Schiller in his 24 ways article [http://24ways.org/2010/the-state-of-html5-audio "Probably, Maybe, No": The State of HTML5 Audio].
 
There are however browser specific APIs to work with audio both by Chrome and Firefox which allows for byte-level access to music and you can do great things with those. Having access on such a granular level means you can do all kind of interesting experiments, from syncing animations with the beats per minute of a song up to generating music and voices programatically.
 
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
* [http://chromium.googlecode.com/svn/trunk/samples/audio/index.html Chrome web Audio demos]
* [https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html W3C Web Audio working draft]
* [http://jsmad.org/ JSMad] - a MP3 decoder in JavaScript
* [http://wheelsofsteel.net Wheels of Steel] - a fully working DJ mixing deck in CSS and HTML5 (this one uses Flash for audio - if you want scratching)
* A [http://popcornjs.org/Demo/minnesota-public-radio public radio programme] that links the transcript with the correct part in the audio recording much like TED does with videos
* [http://syntensity.com/static/espeak.html Generating speech in JavaScript in the browser] is another step into the direction of where audio can go. Also check the [http://hacks.mozilla.org/2011/08/speak-js-text-to-speech-on-the-web/ longer blog post explaining it in detail]
 
=== Canvas ===
 
Canvas is a technology that makes it easy to paint in the browser. You define an area and it literarily becomes your canvas. Instead of being a simple drawing board, HTML5 canvas has a few good things up its sleeve:
 
* You can move and draw the pencil. By default you can draw points, arcs, bezier curves and rectangles. You start paths and end them and you can fill or stroke them in different styles
* You can generate gradients and different colour fills with named colours, RGB, RGBA, HSLA and hex colours.
* You can transform the canvas coordinate matrix while you draw your elements. This means you can scale and rotate things you paint without having to recalculate your points. Imagine your painting as a transparent sheet over a piece of paper, you can rotate the transparent sheet without affecting the space the paper uses up on the desk.
* You can define the blending mode of elements you plot on the screen. that way elements can overlay, intersect and lighten or darken each other.
* You can export the canvas easily as an image and allow users to save them
* You can easily import images into a canvas and scale and transform them
* You can automatically import frames from videos into a canvas
* If you import video and images (or other canvasses) into a canvas you have byte-level access to the final image. That way you can do colour manipulation, find edges, detect faces and all the other things a good drawing program can do for you.
 
Of course there are some issues with canvas:
 
* Not all browsers have hardware acceleration for canvas. The performance of canvas is however very impressive
* The canvas is a drawing board in your document - much like and etch-a-sketch you can paint on it and wipe it. You do not have access to the painting you did though and every path once rendered is gone. If you want vector-based painting in a browser, use SVG instead
* There is no accessibility in canvas solutions. To assistive technology it looks like a big black box
 
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]
* 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.
* [http://canvasrider.com/tracks/451111 Canvas Rider] is a neat little game using Canvas - you can build your own tracks
* [https://developer.mozilla.org/en-US/demos/detail/fractal-trees Fractal Trees] is a simple implementation of a fractal generator in canvas [http://cf.cdn.vid.ly/8q0d1q/webm.webm webm] [http://cf.cdn.vid.ly/8q0d1q/mp4.mp4 mp4] [http://cf.cdn.vid.ly/8q0d1q/ogv.ogv ogv]
 
=== WebGL ===
 
WebGL is the 3D equivalent of canvas. It is hardware accelerated and allows you to create 3D animations and games in the browser. WebGL is the web version of OpenGL which is used to create desktop games. This means a lot of talent from the games industry can now come to the web without having to learn a new skill. The introduction of WebGL to the browser gave us a few new tricks like indexed arrays which allow for heavy computation in JavaScript using the GPU instead of the main CPU.
 
Issues with WebGL
 
* Microsoft do not support WebGL and instead have their own ActiveX based rendering system. This might change but to date, IE does not play well with WebGL.
* 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]
* 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://mozillalabs.com/blog/2011/09/we-got-the-winners winners of the Mozilla Demoparty Competition] are great examples of what can be done with WebGL
* 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.
* [http://bodybrowser.googlelabs.com/ Body Browser] - Google took a 3D model of the human body and built a maps-style interface to it in WebGL [http://cf.cdn.vid.ly/1c5x1n/webm.webm webm] [http://cf.cdn.vid.ly/1c5x1n/mp4.mp4 mp4] [http://cf.cdn.vid.ly/1c5x1n/ogv.ogv ogv]
* Evan Wallace has some very cool WebGL demos. One of them is a [http://madebyevan.com/webgl-water/ Water simulation] [http://cf.cdn.vid.ly/7i1v8e/webm.webm webm] [http://cf.cdn.vid.ly/7i1v8e/mp4.mp4 mp4] [http://cf.cdn.vid.ly/7i1v8e/ogv.ogv ogv] and another is a [http://madebyevan.com/webgl-path-tracing/ path tracing demo] [http://cf.cdn.vid.ly/6x2q3v/webm.webm webm] [http://cf.cdn.vid.ly/6x2q3v/mp4.mp4 mp4] [http://cf.cdn.vid.ly/6x2q3v/ogv.ogv ogv]
 
=== Local Storage ===
 
Local Storage and Session Storage are two new features in HTML5 that (together with [http://www.w3.org/TR/offline-webapps/ offline applications]) help us build web apps that can retain their state without a server.
 
In the past the only thing we could do as developers is to store cookies on the end users' computer. Cookies had a lot of drawbacks:
 
* Creating them in JavaScript connected with a domain was always a pain
* Cookies can store 4k of data tops
* The data is stored in a weird string format
* All the cookies of a certain domain are sent with each HTTP request, regardless of what was requested from the server
* As cookies are used for user tracking they got a bad reputation and a lot of companies have a "no cookies" policy.
 
So cookies were out. Local Storage is in. The main differences are:
 
* Local Storage data is not sent with each HTTP request - it is JavaScript only so you have to request it on demand
* Local Storage can take up to 5MB of data per domain
* The format is a simple key/value store - you set for example with localStorage.setItem( 'browser', 'Firefox' ) and you retrieve with localStorage.getItem( 'browser' ). You can also do a localStorage[ 'browser' ] = 'Firefox' notation.
 
The sessionStorage interface does the same, but clears the data when you close the tab.
 
Issues with Local Storage:
 
* Local Storage takes only text values, so if you want to store JSON you need to use JSON.stringify to store and JSON.parse to read
* There is no clean interface to find out how much local storage you used up - if you exceed the limit, you just get an error
* There is no interface to have expiring storage - the data stays in storage until it gets overwritten. [https://github.com/codepo8/yql-localcache YQL Localcache] is a simulation for that though.
 
Further reading:
 
* [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]
 
=== 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 ===
 
Right now we are not building web products like we used to. Not every click means the page gets reloaded and not every button submits a form. This increases usability in many cases but breaks other browser functionality - especially bookmarking and the back and forward buttons.
 
In the past we hacked around this issue by using the fragment identifier of URLs and hidden iframes to seed the browser history but that solution had all kind of problems.
 
Now we have the [http://dev.w3.org/html5/spec/Overview.html#the-history-interface HTML5 history API] which allows us in a clean fashion to not reload pages and still offer all the browser functionality.
 
* [http://github.com GitHub] has a great implementation of the History API - simply click through a repository and you see that the page does not reload but the URL bar reflects your changes [http://cf.cdn.vid.ly/6a1k0e/webm.webm webm] [http://cf.cdn.vid.ly/6a1k0e/mp4.mp4 mp4] [http://cf.cdn.vid.ly/6a1k0e/ogv.ogv ogv]
* The [https://developer.mozilla.org/en-US/demos/devderby/2011/august/ August 2011 Dev Derby] had the History API as its topic and some cool demos
 
=== Pretty sites using new web standards (HTML5/CSS/JS) ===
 
These are a few sites I like to show when it comes to new technology and how it can be used for pretty sites as nice as Flash/Silverlight:
 
* [http://evolutionofweb.appspot.com/ Evolution of the web] is a showcase celebrating the third birthday of Chrome using SVG to build a beautiful timeline of how the web evolved [http://cf.cdn.vid.ly/0g9h0d/mp4.mp4 mp4] [http://cf.cdn.vid.ly/0g9h0d/ogv.ogv ogv] [http://cf.cdn.vid.ly/0g9h0d/webm.webm webm]
* [http://nikebetterworld.com Nike better world] - vertically scrolling page with parallax - check the source code to see that it is HTML5 [http://cf.cdn.vid.ly/4e6t0e/webm.webm webm] [http://cf.cdn.vid.ly/4e6t0e/mp4.mp4 mp4] [http://cf.cdn.vid.ly/4e6t0e/ogv.ogv ogv]
* [http://www.nissanusa.com/leaf-electric-car/index Nissan Leaf] - site with a 3D interface to the car interior and exterior [http://cf.cdn.vid.ly/0f5m2s/webm.webm webm] [http://cf.cdn.vid.ly/0f5m2s/mp4.mp4 mp4] [http://cf.cdn.vid.ly/0f5m2s/ogv.ogv ogv]
* [http://disneydigitalbooks.go.com/tron TRON] - interactive graphic novel (originally to promote IE9) - the cool story to tell here is that someone like Disney is betting on HTML5.
* [http://www.20thingsilearned.com 20 things I learned] - an e-book in HTML5 by Google - really nicely done
* [http://chrome.angrybirds.com Angry Birds web] - Notice the use of Flash for music. That is a good opportunity to explain that music in HTML5 is still badly supported (no looping)
 
== Open Web Initiatives ==
 
Other than web technologies, I like to mention the open web initiatives Mozilla is involved in. Here are some of them.
 
=== Mozilla Persona/BrowserID ===
 
Many of our interactions on the web involve sharing and exchanging personal data. As we do so, we enable the companies that provide web services to collect, correlate, and sell information about us in ways we can't control.
 
[https://www.mozilla.org/en-US/persona/ Mozilla Persona] is an initiative aimed at putting users in control of how their personal data is shared and used on the web.
 
The foundation of Persona is an identity system in which users can sign into web sites using their email address. The protocol underlying this system, [https://developer.mozilla.org/en/BrowserID BrowserID]:
 
* is easy for web sites to integrate, and automatically gives web sites a verified email address for their users
* provides a superior user experience: users don't have to create a separate user name and password for different sites, and don't have to enter and confirm an email address for each site
 
By design Persona is a decentralized system: anyone can become an identity provider, so users are not dependent on any particular authority to verify identities. Unlike other single sign on systems such as Facebook Connect or OpenID, Persona does not enable identity providers to track which web sites a user signs into.
 
In its initial stages, [https://developer.mozilla.org/en/BrowserID/Bootstrapping_BrowserID Persona uses a central server] (https://login.persona.org) to verify identities, but as email providers add support for the underlying BrowserID protocol this will become less relevant and will eventually be retired.
 
You can read more about the philosophy behind Mozilla Persona in Mitchell Baker's blog post on [http://blog.lizardwrangler.com/2012/01/13/user-sovereignty-for-our-data/ user sovereignty for data].
 
==== Demo sites ====
* http://123done.org/
* https://developer.mozilla.org/
* https://affiliates.mozilla.org/
* https://mozillians.org/
* https://marketplace.mozilla.org/
* https://builder.addons.mozilla.org/
* https://www.voo.st/
 
==== Screencast ====
* [https://www.dropbox.com/s/cg7ukwj1vbna1dv/persona.mp4 Persona login (MP4)] - showing [http://123done.org 123done]
 
=== WebFWD Innovation Accelerator  ===
 
[http://webfwd.org WebFWD] ("Web Forward") is Mozilla's Innovation Accelerator and Incubator. We support open web startups which disrupt closed markets, providing participants with mentorship from industry experts, access to the Mozilla global network, infrastructure and other world-class resources. Our teams engage with us for 3 months and are eligible for funding from Mozilla upon successful completion of the program. Our first graduation is September 19, 2012 and our next class starts in October, 2012 > apply now!<br>
 
=== Universal Subtitles ===
 
[http://universalsubtitles.org Universal Subtitles] is a product on top of the Mozilla sponsored [http://popcornjs.org Popcorn.js] library. By including a JavaScript into your HTML documents it allows your visitors to write and subsequently translate subtitles for the videos embedded in your product. A simple interface allows both the writing an the display of the subtitles. The process is crowdsourced and chunked, which means I can only write the subtitles for minute 1 to minute 7 and someone else can write the rest.
 
== Mozilla Products ==
 
Here is some info about Mozilla products that you can use in your talks:
 
=== Firefox OS ===
 
As there was a lot of demand, we put together a "pick and mix" HTML5 Slide deck about this:
 
You can see the deck at: http://codepo8.github.io/mozilla-presentation-templates/html5/firefox-os-pick-and-mix.html
 
You can get the deck at: https://github.com/codepo8/mozilla-presentation-templates
 
Zip is here: https://github.com/codepo8/mozilla-presentation-templates/archive/master.zip
 
=== Firefox ===
 
[TO BE FILLED]
 
=== Add-ons ===
 
[https://developer.mozilla.org/en-US/addons Add-ons] is an all-encompasing term that includes:
* Extensions (like [https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/ AdBlock Plus] and [https://addons.mozilla.org/en-US/firefox/addon/noscript/ NoScript])
* Themes
* Plugins (like Adobe Flash Player)
* Personas
* Dictionaries and Language Packs (see [https://addons.mozilla.org/en-US/firefox/language-tools/ Language Tools])
* Search Engine Providers (like [https://addons.mozilla.org/en-US/firefox/addon/duckduckgo-ssl/ DuckDuckGo])
 
Add-ons can usually work on all platforms, and can even work on multiple applications (Firefox, Mobile Firefox, Thunderbird, etc.).
 
You can learn about add-on development and the Add-ons SDK in the [https://addons.mozilla.org/en-US/developers Mozilla Add-ons Developer Hub].
 
=== Web APIs ===
 
The goal with WebAPI is to provide a basic HTML5 phone experience and bridge the gap between the Open Web and native apps, and offer consistent APIs that will work in all web browsers, no matter the operating system.
 
Examples of APIs are:
 
* Dialer: Telephony & Messaging API, Contacts API
* Address Book: Contacts API
* SMS: Telephony & Messaging API, Contacts API
* Clock
* Camera: Camera API, Filesystem API
* Gallery: Filesystem API (could possibly be FileReader & FileWriter in conjunction)
* Calculator
* Settings: Device Status API, Settings API
* Games: Accelerometer API, Mouse Lock API
* Maps: Geolocation API, Contacts API
 
A lot of people ask about the WebAPI effort and how it stands in relation to the W3C DAP and WAC, and the answer is that WebAPI offers a way for Mozilla to experiment and prototype ideas and suggestions, and then create a proposal and bring it to working groups like W3C DAP, WAC and WHATWG.
 
More details and good questions and discussions can be found in the posts at Mozilla Hacks:
 
* [http://hacks.mozilla.org/2011/08/introducing-webapi/ Introducing WebAPI]
* [http://hacks.mozilla.org/2011/08/more-details-about-the-webapi-effort/ More details about the WebAPI effort]
* [http://arewemobileyet.com Are We Mobile Yet?] Detailing the status of each WebAPI effort
 
=== Developer Tools ===
 
In today's development world, browsers have evolved from being simple tools to display web content to being fully-fledged read and write development tools. Modern in-built tools allow developers to not only see the source code, but also modify it live in the browser, measure what is being shown and seeing the impact their work has in the browser in terms of performance.
 
Debugging our web code has evolved from trial and error to live code editing, measuring the impact we have and being able to inject code to try out changes without having to re-build the site and risk breaking the experience of our end users during development.
 
Mozilla was the pioneer in this area, with Firebug being the extension to Firefox that made it a developer browser rather than just a way to display the web. All other browsers copied that model and created in-build developer tools that allow all kind of interaction and measuring.
 
The [https://developer.mozilla.org/en-US/docs/Tools Firefox Developer Tools] differ slightly from the tools shipped with Safari, Chrome or Internet Explorer as they are not a single "debugging suite" but consist of several components that each do one job and one job well, to be turned on and off on demand by developers depending what they are currently trying to achieve.
 
The different parts of the developer tools are explained in detail with screencasts and usage examples on their [https://developer.mozilla.org/en-US/docs/Tools Wiki page], but here is a quick reminder what each of them mean:
 
==== Basic Tools ====
 
* [https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Page Inspector] is the main tool to inspect what is on the screen, you can see the HTML, which CSS has been applied and what the browser did to render the element. You also get insight into all the available properties and can edit all of them live in the browser. If you don't know why something does not display correctly, this will give you the information you need.
* [https://developer.mozilla.org/en-US/docs/Tools/Web_Console Web Console] is your JavaScript command console into the current document. You can write short JavaScript commands and execute them directly in the scope of the current window. If you want to run larger chunks of JavaScript against the document and run it only in part rather than a whole, semi-colon separated command group, you can use the [https://developer.mozilla.org/en-US/docs/Tools/Scratchpad Scratchpad] instead.
* [https://developer.mozilla.org/en-US/docs/Tools/Style_Editor Style Editor] - is the main tool to manipulate the style sheets loaded into the document. You can turn them on or off and modify them without a page rebuild or reload.
* [https://developer.mozilla.org/en-US/docs/Tools/Debugger Debugger] - allows you to debug JavaScript in the page using breakpoints and step-by-step debugging. No need for alert() and console.log() in your scripts any longer.
* [https://developer.mozilla.org/en-US/docs/Tools/Profiler Profiler] allows you to measure the JavaScript performance of interactions and get granular insight into what happened, which methods got called and where your memory went.
* [https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor Network Monitor] gives you insight into everything that happened during loading of the current document and what subsequently goes in and out. A great insight to find out why the page isn't coming in as snappy as it should.
* [https://developer.mozilla.org/en-US/docs/Tools/Shader_Editor Shader Editor] allows you to debug WebGL shaders live in the browser
 
==== Mobile Tools ====
* [https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging Remote Debugging] allows you to debug sessions on a mobile device and taking advantage of the more convenient interfaces on your desktop. Tap on things on the phone, measure what happened on the desktop.
* [https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator Firefox OS Simulator] is a fully-fledged simulation of a FirefoxOS device on your desktop. Not all WebAPIs are available in the simulator but it should get you going quickly.
* [https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View Responsive Design View] is a great way to see your product in different screen resolutions without having to resize the browser. You still have the whole screen size to see the debugging tools whilst seeing what end users would see on a smaller device.
 
==== Standalone Tools ====
* [https://developer.mozilla.org/en-US/docs/Tools/Scratchpad Scratchpad] is a great way to run larger JavaScript chunks in the context of the current page. This allows you to debug functionality of your scripts without having to re-build your page/app.
* [https://developer.mozilla.org/en-US/docs/Tools/Browser_Console Browser Console] - is similar to the Web Console but also gives you insight into the inner workings of Firefox. This is useful for Firefox debugging.
* [https://developer.mozilla.org/en-US/docs/Tools/GCLI Developer Toolbar] is a command line interface to all the other development tools. You can interact with them on a code level which is great for plain keyboard users and automated scripting.
* [https://developer.mozilla.org/en-US/docs/Tools/3D_View 3D View] is a three dimensional representation of the depth of the DOM of the current document. Great to detect if your HTML is too complex.
* [https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool Paint Flashing Tool] shows you when the browser is re-painting an element. As repaints are a big performance hit, this tool helps you to un-jank your code.
* [https://developer.mozilla.org/en-US/docs/Tools/Debugging_Firefox_JS_Code Debugging Firefox JS Code] allows you to debug the code of the browser itself.
 
Up-to-date information about Developer Tools can always be found in the [https://developer.mozilla.org//en-US/docs/Tools/New Release notes]


==== Devtools Screencasts ====
We made a conscious decision not to give out fixed presentations to deliver, but we have a few presentations out there that help you get started. Remember though that this is Mozilla: *we do not want you to deliver a preset talk, we want you to be yourself and share what gets you excited about the topic you are talking about*. We are not a company of slides, we're a company of people and individuals. Slides are wallpaper for presentations - they are not the talk. You are.


* Jason Weathersby: [https://wiki.mozilla.org/Engagement/Developer_Engagement/Grab_bag/Screencast_Canvas_Jason Debugging and optimising Canvas performance with Firefox Devtools]
That said, here are some resources where to find presentations used before by other Mozillians:


=== Boot to Gecko ===
* [https://www.dropbox.com/sh/jsp7jdb6mxnbpsf/AACCaAKNdA6_nSFUWWnjb79Ga Dropbox folder] with presentations delivered by the [https://wiki.mozilla.org/Engagement/Developer_Engagement/Technical_Evangelism Technical Evangelism team]. These are mostly in Keynote, PPT and PDF format
* [https://github.com/codepo8/mozilla-presentation-templates the Mozilla presentation templates on GitHub] including a pick-and-mix FirefoxOS slide deck. These are in keynote, ppt and HTML5. Information how to use the HTML5 slide deck is [https://www.youtube.com/watch?v=M_9hf9joTcQ available on YouTube]
[ List of presentations given by Mozillians] (don't be shy, make sure the add yours, but please give it a date as that also indicates a "use by" date)


[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.
== Talking points about different technologies and products ==


=== Web Components/X-Tag ===
* [ HTML5]
* [ Web Components]
* [ Service Workers]
* [ WebRTC]
* [ WebGL]
* [ Web APIs]


* [https://www.dropbox.com/s/eiww07je0z9y7d5/xtag.mp4 Web Components/X-tag screencast] showing the [http://mozilla.github.com/x-tag/ X-Tag page]
== Mozilla technology products == 
* [ Firefox OS]
* [ Developer Tools]
* [ Web Runtime]

Revision as of 08:53, 14 July 2014

  • Last update:* 11 July 2014 by Christian Heilmann

Do you want to give a talk and cover a certain product or technology and you are not sure how to? This is a pick'n'mix grab bag of topics, examples of explanations, links to screencasts, products and videos to help you along.

If you have some specific question, contact us either on IRC on #devrel (irc.mozilla.org) or directly via the emails listed on the Developer Engagement page (Mozilla internal).

Presentations and presentation templates

We made a conscious decision not to give out fixed presentations to deliver, but we have a few presentations out there that help you get started. Remember though that this is Mozilla: *we do not want you to deliver a preset talk, we want you to be yourself and share what gets you excited about the topic you are talking about*. We are not a company of slides, we're a company of people and individuals. Slides are wallpaper for presentations - they are not the talk. You are.

That said, here are some resources where to find presentations used before by other Mozillians:

[ List of presentations given by Mozillians] (don't be shy, make sure the add yours, but please give it a date as that also indicates a "use by" date)

Talking points about different technologies and products

  • [ HTML5]
  • [ Web Components]
  • [ Service Workers]
  • [ WebRTC]
  • [ WebGL]
  • [ Web APIs]

Mozilla technology products

  • [ Firefox OS]
  • [ Developer Tools]
  • [ Web Runtime]
Retrieved from "https://wiki.mozilla.org/index.php?title=Engagement/Developer_Engagement/Grab_bag&oldid=996550"