Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: f7b1337728
Fetching contributors…

Cannot retrieve contributors at this time

824 lines (717 sloc) 38.844 kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Presentation: Hot new web technologies and how to promote them</title>
<link rel="stylesheet" href="styles/basestyles.css">
</head>
<body>
<section class="intro">
<header>
<h1>Hot new web technologies and how to promote them</h1>
</header>
<footer>
<p>Version 1.0 by Chris Heilmann - <a href="http://twitter.com/codepo8">@codepo8</a></p>
</footer>
<div class="notes">
<p>This is a presentation talking you through all the cool and new web technologies (well some of them are old). We are going to talk about their usefulness and what to point out to people that makes them cool.</p>
</div>
</section>
<section class="image">
<h1>Good news, everybody!</h1>
<img src="img/goodnews.png" alt="Professor Farnsworth saying good news">
<div class="notes">
<p>Good news - you don't need to note down any of links or resources in this presentation as everything is already available on the Mozilla Wiki.</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="https://wiki.mozilla.org/Engagement/Developer_Engagement/Grab_bag">Presentation grab bag</a></h1>
<div class="notes">
<p>The presentation grab bag on the Mozilla Wiki is a collection of screencasts, simple explanations and demos for lots of technologies that you can mix and match for your talks.</p>
</div>
</section>
<section class="image">
<h1>New tech is exciting</h1>
<img src="img/install.jpg" alt="Firefox install screen">
<div class="notes">
<p>New technology is always exciting. We have new toys to play with and we are very driven to now build everything in them.</p>
</div>
</section>
<section class="image">
<h1>Excitement needs insight</h1>
<img src="img/questioneverything.jpg" alt="Question everything">
<div class="notes">
<p>We owe it to the web to use new technology but also constantly question it. Just because something is shiny doesn't mean we should do it. If some technology only works in one browser and is not part of a standard, you should have a very good reason to rely on it. If it is an enhancement that works everywhere and makes it better in that one browser, then all is good.</p>
</div>
</section>
<section>
<h1>(x^2+y^2-1)^3 = x^2 y^3 the web!</h1>
<div class="notes">
<p>I love the web, and I think we all should understand that this is the single most successful media out there. Anyone can participate and we empower a lot of people to have a voice who wouldn't have any otherwise. When I was a kid I had to go to the library and go through a lot of books to research. Nowadays I have any kind of information one click away.</p>
</div>
</section>
<section>
<h1>WWW is&hellip;</h1>
<ul class="features">
<li>World Wide Web</li>
<li>not: <em>&hearts; We wuv WebKit &hearts;</em></li>
<li>not: <em>Windows, Windows, Windows</em></li>
<li>not: <em>Welcome Western World</em></li>
</ul>
<div class="notes">
<p>Excitement about technologies and hardware and clever marketing makes it easy for a lot of people to forget that the world wide web means that you should support everyone - regardless of browser, location or ability. This does not mean you need to give everyone the same experience - it means you should not block people out.</p>
</div>
</section>
<section>
<h1>Let's look at some technologies</h1>
<div class="notes">
<p>Let's walk through some technologies and see how we can promote them to make the web a better place.</p>
</div>
</section>
<!-- #html5 -->
<section class="counter">
<mark>1</mark>
<h1>HTML5</h1>
</section>
<section>
<h1>What is HTML5?</h1>
<ul class="features">
<li>Misnomer <em>more than markup</em></li>
<li>Two players <em><a href="http://www.whatwg.org/">WHATWG</a> and
<a href="http://www.w3.org/TR/html5/">W3C</a></em></li>
<li>Open</li>
<li>Interoperable</li>
<li>Backwards compatible</li>
</ul>
<div class="notes">
<p>HTML5 is much more than HTML. HTML is markup and it gives text semantic meaning. HTML5 as a standard has a lot of JavaScript APIs in it and is a larger "tool to build web applications" than just a markup language. Defined both by the WHATWG and the W3C HTML5 is meant to be open, interoperable across devices and browsers and backwards compatible, delivering value to any client.</p>
</div>
</section>
<section>
<h1>Benefits of using HTML5</h1>
<ul class="features">
<li>Evolution of HTML <em>(die, XML,die)</em></li>
<li>Pragmatic approach to web development</li>
<li>New and richer semantics <em>debatable</em></li>
<li>Standard that defines the browsers</li>
</ul>
<div class="notes">
<p>HTML5 takes a pragmatic approach to development instead of trying to force XML onto the web. It is based on an analysis of current development practices and making them into a standard. How a browser should work and digest HTML5 is part of the standard and that is new - in the past browsers made educated guesses.</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="http://html5boilerplate.com/">HTML5 Boilerplate</a></h1>
<div class="notes">
<p>HTML5 boilerplate is a great start to work with HTML5 - it is a zip containing the correct HTML, CSS and server settings to start using HTML5 and support old browsers and ensure predictive rendering across browsers.</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="http://www.modernizr.com/">Modernizr</a></h1>
<div class="notes">
<p>Modernizr is a JavaScript library that detects the support of the current browser for various new technologies and adds classes to the HTML element when they are supported. That way you can safely use new technology in your sites.</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="http://diveintohtml5.org">Dive into HTML5</a></h1>
<div class="notes">
<p>Dive into HTML5 is a free online book to learn HTML5</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="http://html5doctor.com">HTML5 Doctor</a></h1>
<div class="notes">
<p>HTML5 Doctor is a blog explaining HTML5 in a simple manner and taking on questions people have. A great resource to find answers like "when to use a section and when to use an article element".</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="http://html5readiness.com/">HTML readiness</a></h1>
<div class="notes">
<p>HTML5 Readiness is a nice interactive visualisation of the caniuse.com data.</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="http://caniuse.com/">Can I use?</a></h1>
<div class="notes">
<p>Can I use is a great resource to see which browser supports a certain new technology. It is kept up-to-date and helps a lot when you wonder why something doesn't work.</p>
</div>
</section>
<!-- #css -->
<section class="counter">
<mark>2</mark>
<h1>CSS3</h1>
</section>
<section>
<h1>Benefits of using CSS3</h1>
<ul class="features">
<li>No images</li>
<li>Calculation + Animation</li>
<li>All visuals in one space</li>
<li>Hardware acceleration</li>
</ul>
<div class="notes">
<p>CSS3 is a hot topic especially as it goes beyond the capabilities of CSS2 as it includes transitions and animation. This allows designers to build engaging interfaces without needing to hand over to JavaScript developers. The new gradient and rounding options also make a lot of images unneccesary.</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="http://leaverou.me/css3patterns">CSS3 Patterns</a></h1>
<div class="notes">
<p>Lea Verou showcases a lot of very complex background patterns that all are created solely with CSS3 - no images involved. The pattern code can be seen and changed live in the page.</p>
</div>
</section>
<section class="code">
<h1>CSS Animation</h1>
<iframe class="src" src="view-source:demos/cssanimation.html"></iframe>
<iframe src="demos/cssanimation.html"></iframe>
<div class="notes">
<p>This example shows how simple it is to create an animation with CSS. Notice that the main annoyance really is that there is a lot of repetition to support different browser prefixes.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="http://benthebodyguard.com/index.php#utmxid=EAAAAAND_j5k0ycZWvWQeKvXp90;utmxpreview=0;session=AK3OEUmaEvc65mjjZyYqGo7H07VyD-c-eVlJ3JBj0at0Xpq4_1_IRdljzGC_XmeCxrBR7WzaTFydmbWVnhaLzdWxJbKz39gBVrTD_ed_B0GY6NKJ9YPXQkx6Ejs1Y2yvravOovZgTYzl;utmxreload=0">Ben the bodyguard</a></h1>
<video controls preload="none"
poster="http://cf.cdn.vid.ly/1r3u4k/poster.jpg">
<source src="http://cf.cdn.vid.ly/1r3u4k/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/1r3u4k/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/1r3u4k/ogv.ogv" type="video/ogg">
<source src="videos/css3/benthebodyguard.webm" type="video/webm">
<a target='_blank' href='http://vid.ly/1r3u4k'>
<img src='http://cf.cdn.vid.ly/1r3u4k/poster.jpg' width="500"></a>
</video>
<div class="notes">
<p>Ben the bodyguard is an example how you can use CSS transitions to react to the scrolling of the page. Notice that in the end of the video you can see the source code of the page showing that the HTML is only a few empty DIV elements - this is not good in terms of progressive enhancement.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="http://mozillademos.org/demos/planetarium/demo.html">CSS3 Planetarium</a></h1>
<video controls preload="none">
<source src="http://videos-cdn.mozilla.net/serv/mozhacks/demos/screencasts/planetarium/screencast.mp4" type="video/mp4">
<source src="http://videos-cdn.mozilla.net/serv/mozhacks/demos/screencasts/planetarium/screencast.webm" type="video/webm">
<source src="http://videos-cdn.mozilla.net/serv/mozhacks/demos/screencasts/planetarium/screencast.ogv" type="video/ogg">
<source src="css3/planetarium.webm" type="videos/video/webm"></video>
<div class="notes">
<p>The CSS3 Planetarium is a demo by Mozilla showing lots of nice transitions and rotations in CSS.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="http://animatable.com/demos/madmanimation/">Madmanimation</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/5u4d7h/poster.jpg">
<source src="http://cf.cdn.vid.ly/5u4d7h/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/5u4d7h/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/5u4d7h/ogv.ogv" type="video/ogg">
<source src="videos/css3/madmanimation.webm" type="video/webm"><a target='_blank' href='http://vid.ly/5u4d7h'><img src='http://cf.cdn.vid.ly/5u4d7h/poster.jpg' width="500"></a></video>
<div class="notes">
<p>Madmanimation is a demo for the animatable CSS animation tool. It show how you can turn a list of small images with a description of the scenes into a very complex CSS3 animation. This is progressive enhancement like it should be done.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="https://mozillademos.org/demos/dashboard/demo.html">CSS3 Dashboard</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/2j2o8i/poster.jpg">
<source src="http://cf.cdn.vid.ly/2j2o8i/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/2j2o8i/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/2j2o8i/ogv.ogv" type="video/ogg">
<source src="videos/css3/dashboard.webm" type="video/webm"><a target='_blank' href='http://vid.ly/2j2o8i'><img src='http://cf.cdn.vid.ly/2j2o8i/poster.jpg' width="500"></a></video>
<div class="notes">
<p>The CSS3 dashboard is a great overview of all the possible things in CSS these days. The source code is available on GitHub.</p>
</div>
</section>
<!-- #forms -->
<section class="counter">
<mark>3</mark>
<h1>HTML5 forms</h1>
</section>
<section>
<h1>Build-in features</h1>
<ul class="features">
<li>Client side validation</li>
<li>Validation API <em>for own styling</em></li>
</ul>
<div class="notes">
<p>HTML5 forms extend the functionality of traditional forms on the web to include in-built validation of fields. Simply add a required attribute and the browser will not send forms with missing content and show an error directly at the form field in question. You also have a JavaScript API to roll your own validation.</p>
</div>
</section>
<section>
<h1>New form elements</h1>
<ul class="features">
<li>Date picker</li>
<li>Number fields</li>
<li>Email/URL/Phone</li>
<li>Range</li>
<li>Datalist</li>
</ul>
<div class="notes">
<p>HTML5 forms got a lot of new elements to use. The main benefit of these new elements is that on mobile devices they trigger different input keyboards and thus make it much easier to enter content.</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="http://wufoo.com/html5/">The state of HTML5 forms</a></h1>
<div class="notes">
<p>The annoyance about HTML5 forms is that support across different browsers is patchy at best. It is not easy to build widgets like these and we need more collaboration across browser vendors.</p>
</div>
</section>
<!-- #fileapis -->
<section class="counter">
<mark>4</mark>
<h1>File APIs</h1>
</section>
<section>
<h1>File API benefits</h1>
<ul class="features">
<li>Client side file conversion</li>
<li>Packing before uploading</li>
<li>Drag and drop from the desktop</li>
<li>&hellip;</li>
</ul>
<div class="notes">
<p>The new file APIs allow us to read and create files from the system easier than by going through a server. You can for example convert files before uploading them and allowing people to get their offline documents easier into an online system than with old-school file upload forms.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="min.us">Minus.com</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/8x6g0l/poster.jpg">
<source src="http://cf.cdn.vid.ly/8x6g0l/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/8x6g0l/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/8x6g0l/ogv.ogv" type="video/ogg">
<source src="videos/fileapi/minus.webm" type="video/webm"><a target='_blank' href='http://vid.ly/8x6g0l'><img src='http://cf.cdn.vid.ly/8x6g0l/poster.jpg' width="500"></a></video>
<div class="notes">
<p>Minus.com shows how simple file sharing on the web can be - simply drag and drop images into your browser and see them resized, converted and become shareable instantly.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="c64.superdefault.com">C64 yourself</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/1i6y3n/poster.jpg">
<source src="http://cf.cdn.vid.ly/1i6y3n/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/1i6y3n/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/1i6y3n/ogv.ogv" type="video/ogg">
<source src="videos/fileapi/c64yourself.webm" type="video/webm"><a target='_blank' href='http://vid.ly/1i6y3n'><img src='http://cf.cdn.vid.ly/1i6y3n/poster.jpg' width="500"></a></video>
<div class="notes">
<p>C64 yourself shows how you can easily upload and convert an image in the browser without having to include any server. The conversion happens in JavaScript and Canvas</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="https://demos.mozilla.org/en-US/#motivational">Motivational poster</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/5w7e3d/poster.jpg">
<source src="http://cf.cdn.vid.ly/5w7e3d/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/5w7e3d/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/5w7e3d/ogv.ogv" type="video/ogg">
<source src="videos/fileapi/motivationalposter.webm" type="video/webm"><a target='_blank' href='http://vid.ly/5w7e3d'><img src='http://cf.cdn.vid.ly/5w7e3d/poster.jpg' width="500"></a></video>
<div class="notes">
<p>This Mozilla demo shows how you can drop an image into the browser, annotate it and upload the solution as an image to different social sharing sites.</p>
</div>
</section>
<!-- #video -->
<section class="counter">
<mark>5</mark>
<h1>HTML5 Video</h1>
</section>
<section>
<h1>HTML5 video</h1>
<ul class="features">
<li>Native browser controls</li>
<li>Style-able</li>
<li>Rich API</li>
</ul>
<div class="notes">
<p>Video is one of the big break-through technologies for HTML5. As video elements are just like any other element in the page it makes it very easy to deliver engaging and interesting video solutions. The native browser controls makes it also much easier to make video more accessible for example to keyboard users.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="http://isithackday.com/syncing-video/">Syncing HTML5 video with page content</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/5e2v2g/poster.jpg">
<source src="http://cf.cdn.vid.ly/5e2v2g/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/5e2v2g/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/5e2v2g/ogv.ogv" type="video/ogg">
<source src="videos/video/syncingvideo.webm" type="video/webm"><a target='_blank' href='http://vid.ly/5e2v2g'><img src='http://cf.cdn.vid.ly/5e2v2g/poster.jpg' width="500"></a></video>
<div class="notes">
<p>This demo shows how easy it is to sync page content with video in HTML5. Notice that the JavaScript is very simple and by using data- attributes on the HTML I can maintain the syncing without any JS knowledge.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="http://thisshell.com">This Shell</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/5y4i9j/poster.jpg">
<source src="http://cf.cdn.vid.ly/5y4i9j/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/5y4i9j/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/5y4i9j/ogv.ogv" type="video/ogg">
<source src="videos/video/thisshell.webm" type="video/webm"><a target='_blank' href='http://vid.ly/5y4i9j'><img src='http://cf.cdn.vid.ly/5y4i9j/poster.jpg' width="500"></a></video>
<div class="notes">
<p>This shell is a clever use of a free video effect script. The video gets exploded into several squares and your task is to put it together as a puzzle whilst the song is playing. If you succeed, you can download the song for free, if not, you can still watch the video.</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="http://popcornjs.com">Popcorn</a></h1>
<div class="notes">
<p>Popcorn is a Mozilla sponsored JavaScript library that makes it very easy to connect video and audio content with the rest of the document.</p>
</div>
</section>
<section>
<h1>Issues with HTML5 video</h1>
<ul class="features">
<li>Different formats for different browsers</li>
<li>Video content is open <em>no DRM</em></li>
<li>Conversion: <a href="http://archive.org">Archive.org</a> or <a href="http://vid.ly">vid.ly</a></li>
</ul>
<div class="notes">
<p>The biggest issue with HTML5 video fro implementers is right now that in order to support all the capable browsers, you need to offer your videos in 3 formats. Automatic conversion services can make that really easy, though.</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="https://developer.mozilla.org/en-US/demos/devderby/2011/july/">MDN Developer Derby July 2011</a></h1>
<div class="notes">
<p>In July 2011, the Mozilla Developer Derby had video as its topic and we got a lot of great entries.</p>
</div>
</section>
<!-- #audio -->
<section class="counter">
<mark>6</mark>
<h1>HTML5 Audio</h1>
<div class="notes">
<p>Technically HTML5 audio should be as supported as HTML5 video (after all it is just video without images). In reality, however HTML5 audio has a few bugs which makes it tricky to use for example in games. The more interesting part of audio is though that both Mozilla and Webkit teams are working on real audio engines in browsers.</p>
</div>
</section>
<section>
<h1>Extending audio</h1>
<ul class="features">
<li><a href="https://wiki.mozilla.org/Audio_Data_API">Mozilla Audio Data API</a>
</li>
<li><a href="http://chromium.googlecode.com/svn/trunk/samples/audio/index.html">Chrome web Audio demos</a></li><li><a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">W3C Web Audio working draft</a></li><li><a href="http://jsmad.org/">JSMad</a>
</li>
</ul>
<div class="notes">
<p>JSMad is an incredible feat of JavaScript decoding MP3 in the browser and making it playable with the audio APIs. The issue with MP3 is that it is not a free codec so Firefox for example can not just use it. JSMad is a workaround for that.</p>
</div>
</section>
<section>
<h1>Extending audio</h1>
<ul class="features">
<li><a href="http://wheelsofsteel.net">Wheels of Steel</a></li><li><a href="http://popcornjs.org/Demo/minnesota-public-radio">Public radio programme</a></li><li><a href="http://syntensity.com/static/espeak.html">Synthesising speech</a> <em><a href="http://hacks.mozilla.org/2011/08/speak-js-text-to-speech-on-the-web/">details</a></em></li>
</ul>
<div class="notes">
<p>Wheels of steel is a fully working DJ deck written in open technologies, the public radio programme is a great example how to use popcorn.js to sync an audio file and a timed transcript and synthesising speech in the browser gives us a lot of very cool options for sound generation in the browser.</p>
</div>
</section>
<!-- #canvas -->
<section class="counter">
<mark>7</mark>
<h1>Canvas</h1>
</section>
<section class="image">
<h1>Canvas</h1>
<img src="img/etchasketch.jpg" alt="etch-a-sketch">
<p class="byline"><a href="http://www.flickr.com/photos/videocrab/37973584/">photo by Kevin Simpson</a></p>
<div class="notes">
<p>The canvas element allows you to paint in the browser. On a first glance it looks like an etch-a-sketch. You can paint lines, you can move the pen without painting and you can wipe the canvas to delete it.</p>
</div>
</section>
<section>
<h1>Canvas features</h1>
<ul class="features">
<li>Simple but powerful API</li>
<li>Dynamic coordinate system</li>
</ul>
<div class="notes">
<p>Digging deeper into canvas you find that the API - though simple - is very clever. You can paint lines, rectangles, arches and bezier curves and you can define the fill modes and line styles. Furthermore you can do gradients and drop-shadows. But the coolest feature is that the coordinate system on canvas is not fixed bug flexible. You can have a different coordinate system for each thing you paint onto the canvas.</p>
</div>
</section>
<section class="image">
<h1><a href="http://www.youtube.com?v=IrsKPKjGF_Y">Cutout animation</a></h1>
<img src="img/terry.jpg" alt="Terry Gilliam animation">
<div class="notes">
<p>Canvas is more like creating cut-out animation than an etch-a-sketch. You can create lots of independent things and size and rotate them dynamically.</p>
</div>
</section>
<section class="code">
<h1>Simple canvas</h1>
<iframe class="src" src="view-source:demos/simplecanvas.html"></iframe>
<iframe src="demos/simplecanvas.html"></iframe>
<div class="notes">
<p>This is a simple example how to draw a rectangle in canvas - this is all you need to do.</p>
</div>
</section>
<section class="code">
<h1>Translating canvas</h1>
<iframe class="src" src="view-source:demos/translatecanvas.html"></iframe>
<iframe src="demos/translatecanvas.html"></iframe>
<div class="notes">
<p>By default, the coordinate system of a canvas starts at the top left. This example shows how to shift it to the centre of the canvas. Notice that the coordinates of the rectangle did not change.</p>
</div>
</section>
<section class="code">
<h1>Rotating canvas</h1>
<iframe class="src" src="view-source:demos/rotatecanvas.html"></iframe>
<iframe src="demos/rotatecanvas.html"></iframe>
<div class="notes">
<p>You can also rotate the coordinate system easily. Again, the coordinates of the rectangle did not have to change.</p>
</div>
</section>
<section class="code">
<h1>Scaling canvas</h1>
<iframe class="src" src="view-source:demos/scalecanvas.html"></iframe>
<iframe src="demos/scalecanvas.html"></iframe>
<div class="notes">
<p>You can also scale the canvas to resize everything without having to change the coordinates or dimensions.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="https://developer.mozilla.org/en-US/demos/detail/browser-fountain">Browser fountain</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/6h7a9o/poster.jpg">
<source src="http://cf.cdn.vid.ly/6h7a9o/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/6h7a9o/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/6h7a9o/ogv.ogv" type="video/ogg">
<source src="videos/canvas/browserfountain.webm" type="video/webm"><a target='_blank' href='http://vid.ly/6h7a9o'><img src='http://cf.cdn.vid.ly/6h7a9o/poster.jpg' width="500"></a></video>
<div class="notes">
<p>The Browser Fountain is a demo that shows how simple it is to create a particle system in canvas by using the dynamic changes in the coordinate system.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="https://developer.mozilla.org/en-US/demos/detail/fractal-trees">Fractal trees</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/8q0d1q/poster.jpg">
<source src="http://cf.cdn.vid.ly/8q0d1q/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/8q0d1q/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/8q0d1q/ogv.ogv" type="video/ogg">
<source src="videos/canvas/fractaltrees.webm" type="video/webm"><a target='_blank' href='http://vid.ly/8q0d1q'><img src='http://cf.cdn.vid.ly/8q0d1q/poster.jpg' width="500"></a></video>
<div class="notes">
<p>The fractal tree demo shows how simple it is to do fractal paintings in canvas.</p>
</div>
</section>
<!-- #webgl -->
<section class="counter">
<mark>8</mark>
<h1>WebGL</h1>
<div class="notes"></div>
</section>
<section>
<h1>WebGL features</h1>
<ul class="features">
<li>3D Canvas</li>
<li>Hardware accelerated</li>
<li>Web implementation of OpenGL</li>
<li>Amazing for games!</li>
</ul>
<div class="notes">
<p>WebGL is the big new thing for a lot of people. It brings 3D gaming to the web.</p>
</div>
</section>
<section class="site">
<h1><a class="external" href="http://mrdoob.github.com/three.js/">three.js by Mr. Doob</a></h1>
<div class="notes">
<p>Three.js is a JavaScript library that makes it much easier for not-3D developers to start with WebGL. Check out the demos on the page - there are many cool examples.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="http://bodybrowser.googlelabs.com">Body Browser</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/1c5x1n/poster.jpg">
<source src="http://cf.cdn.vid.ly/1c5x1n/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/1c5x1n/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/1c5x1n/ogv.ogv" type="video/ogg">
<source src="videos/webgl/bodybrowser.webm" type="video/webm"><a target='_blank' href='http://vid.ly/1c5x1n'><img src='http://cf.cdn.vid.ly/1c5x1n/poster.jpg' width="500"></a></video>
<div class="notes">
<p>Google Labs quite some time ago released the body browser - a Google Earth/Maps like interface to the human body using a 3D model of it. You can see the outside and zoom all the way in to the artery system.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="http://madebyevan.com/webgl-path-tracing/">Path tracing</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/6x2q3v/poster.jpg">
<source src="http://cf.cdn.vid.ly/6x2q3v/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/6x2q3v/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/6x2q3v/ogv.ogv" type="video/ogg">
<source src="videos/webgl/pathtracing.webm" type="video/webm"><a target='_blank' href='http://vid.ly/6x2q3v'><img src='http://cf.cdn.vid.ly/6x2q3v/poster.jpg' width="500"></a></video>
<div class="notes">
<p>This is a demo showing real-time lightsourcing and path tracing in WebGL.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="http://madebyevan.com/webgl-water/">WebGL Water</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/7i1v8e/poster.jpg">
<source src="http://cf.cdn.vid.ly/7i1v8e/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/7i1v8e/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/7i1v8e/ogv.ogv" type="video/ogg">
<source src="videos/webgl/water.webm" type="video/webm"><a target='_blank' href='http://vid.ly/7i1v8e'><img src='http://cf.cdn.vid.ly/7i1v8e/poster.jpg' width="500"></a></video>
<div class="notes">
<p>This is one of the winners of the Mozilla Demo Scene competition. It is fully featured simulation of water - complete with reflections, ripples and proper gravity simulation.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="http://alteredqualia.com/three/examples/webgl_materials_skin.html">WebGL Skin</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/2s7y3e/poster.jpg">
<source src="http://cf.cdn.vid.ly/2s7y3e/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/2s7y3e/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/2s7y3e/ogv.ogv" type="video/ogg">
<source src="videos/webgl/skin.webm" type="video/webm"><a target='_blank' href='http://vid.ly/2s7y3e'><img src='http://cf.cdn.vid.ly/2s7y3e/poster.jpg' width="500"></a></video>
<div class="notes">
<p>This is an impressive demo of simulating skin in WebGL - check the different discolourations and hair stubbles.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="http://www.stickmanventures.com/labs/demo/webgl-threejs-morph-target/">WebGL facial expressions</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/7y3w5q/poster.jpg">
<source src="http://cf.cdn.vid.ly/7y3w5q/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/7y3w5q/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/7y3w5q/ogv.ogv" type="video/ogg">
<source src="videos/webgl/ginger.webm" type="video/webm"><a target='_blank' href='http://vid.ly/7y3w5q'><img src='http://cf.cdn.vid.ly/7y3w5q/poster.jpg' width="500"></a></video>
<div class="notes">
<p>Ginger is an impressive example showing how you can simulate facial expressions.</p>
</div>
</section>
<!-- #storage -->
<section class="counter">
<mark>9</mark>
<h1>Local Storage / Offline</h1>
</section>
<section class="image">
<h1>Old school storage</h1>
<img src="img/cookies.jpg" alt="Cookie monster">
<p class="byline"><a href="http://www.flickr.com/photos/simplebitsdan/480696708">Photo by Dan Cederholm</a></p>
<div class="notes">In the past all we could do to store content on the user's computer for re-use or for keeping the state of an application was using cookies.</div>
</section>
<section>
<h1>Local Storage</h1>
<ul class="features">
<li>Cookies are bad for you <em>HTTP overhead</em></li>
<li>Local Storage and Session Storage</li>
<li>Simple key/value store</li>
<li>5MB of data across browsers</li>
</ul>
<div class="notes">Local Storage (persistent) and Session Storage (deleted when the tab is closed) are a very simple way to store content on the user's machine without having to go through the pains of cookies.</div>
</section>
<section>
<h1>Local Storage issues</h1>
<ul class="features">
<li>No check for allowed space</li>
<li>String only <em>use JSON.decode/JSON.stringify</em></li>
<li>Needs namespacing for different app/same domain</li>
</ul>
</section>
<section>
<h1>Offline</h1>
<ul class="features">
<li>Store parts of the page offline</li>
<li>Really good for apps (store state)</li>
<li>Simple manifest implementation</li>
</ul>
</section>
<section class="counter">
<mark>10</mark>
<h1>History API</h1>
</section>
<section>
<h1>History API</h1>
<ul class="features">
<li>Fixes the "breaking the back button" issue</li>
<li>Full control over browser history without reloads</li>
<li>Simple plug-in for an age old issue</li>
</ul>
</section>
<section class="fullscreen">
<h1><a href="http://github.com">GitHub using the history API</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/6a1k0e/poster.jpg">
<source src="http://cf.cdn.vid.ly/6a1k0e/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/6a1k0e/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/6a1k0e/ogv.ogv" type="video/ogg">
<source src="videos/github/github.webm" type="video/webm"><a target='_blank' href='http://vid.ly/6a1k0e'><img src='http://cf.cdn.vid.ly/6a1k0e/poster.jpg' width="500"></a></video>
<div class="notes"><p>GitHub is a great example of using the history API - click on files and folders to see that the interface loads and changes and the URL changes accordingly. All without reloading the whole page</p></div>
</section>
<!-- #geolocation -->
<section class="counter">
<mark>11</mark>
<h1>Geolocation</h1>
<div class="notes"></div>
</section>
<section class="code">
<h1><a href="http://isithackday.com/hacks/geo/check/">Geolocation</a></h1>
<iframe class="src" src="view-source:demos/geodemo.html"></iframe>
<iframe src="demos/geodemo.html"></iframe>
<div class="notes">
<p>Geolocation is a very simple API - just call the right method and you get the user's latitude and longitude. On Firefox you even get their address. You can also make the browser constantly find your location to calculate your speed and heading.</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="http://owlsnearyou.com/">Owls near you</a></h1>
<div class="notes">
<p>Owls near you is a great example of a site using geolocation. You can enter your location directly or you can make the site find you and tell you how far away you are from the nearest owl.</p>
</div>
</section>
<!-- #svg -->
<section class="counter">
<mark>12</mark>
<h1>SVG</h1>
<div class="notes"><p>SVG is Scalable Vector graphics, a W3C standard based on XML to paint in the browser. SVG images can easily be interactive.</p></div>
</section>
<section class="site">
<h1><a class="external"
href="http://mbostock.github.com/d3/">d3.js</a></h1>
<div class="notes">
<p>D3 is a library to turn data in your pages (like tables) into highly interactive graphs and charts.</p>
</div>
</section>
<section class="site">
<h1><a class="external"
href="http://raphaeljs.com/">Raphaël</a></h1>
<div class="notes">
<p>Raphaël is a helper library that makes it very easy to use SVG and it provides fallbacks for browsers that don't understand it.</p>
</div>
</section>
<!-- #showcases -->
<section class="counter">
<mark>13</mark>
<h1>Pretty showcases</h1>
<div class="notes"></div>
</section>
<section class="fullscreen">
<h1><a href="http://www.nikebetterworld.com/">Nike better world</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/4e6t0e/poster.jpg">
<source src="http://cf.cdn.vid.ly/4e6t0e/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/4e6t0e/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/4e6t0e/ogv.ogv" type="video/ogg">
<source src="videos/lovelysites/nikebetterworld.webm" type="video/webm"><a target='_blank' href='http://vid.ly/4e6t0e'><img src='http://cf.cdn.vid.ly/4e6t0e/poster.jpg' width="500"></a></video>
<div class="notes">
<p>Nike better world is a nice example showing how you can interactively respond to the user scrolling in the browser.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="http://www.nissanusa.com/leaf-electric-car/index#/leaf-electric-car/index">Nissan Leaf</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/0f5m2s/poster.jpg">
<source src="http://cf.cdn.vid.ly/0f5m2s/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/0f5m2s/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/0f5m2s/ogv.ogv" type="video/ogg">
<source src="videos/lovelysites/nissanleaf.webm" type="video/webm"><a target='_blank' href='http://vid.ly/0f5m2s'><img src='http://cf.cdn.vid.ly/0f5m2s/poster.jpg' width="500"></a></video>
<div class="notes">
<p>Nissan's Leaf web site is a great example of using SVG in a web site to create a highly interactive interface. The inner and outer 3D view of the car is done simply by loading images.</p>
</div>
</section>
<section class="fullscreen">
<h1><a href="http://evolutionofweb.appspot.com/">Evolution of the web</a></h1>
<video controls preload="none" poster="http://cf.cdn.vid.ly/0g9h0d/poster.jpg">
<source src="http://cf.cdn.vid.ly/0g9h0d/mp4.mp4" type="video/mp4">
<source src="http://cf.cdn.vid.ly/0g9h0d/webm.webm" type="video/webm">
<source src="http://cf.cdn.vid.ly/0g9h0d/ogv.ogv" type="video/ogg">
<source src="videos/lovelysites/evolutionoftheweb.webm" type="video/webm"><a target='_blank' href='http://vid.ly/0g9h0d'><img src='http://cf.cdn.vid.ly/0g9h0d/poster.jpg' width="500"></a></video>
<div class="notes">
<p>To celebrate the birthday of Chrome, Google released this wonderful timeline animation of how the web evolved. It uses SVG and is a great example of an interactive dashboard.</p>
</div>
</section>
<section class="site">
<h1><a href="https://developer.mozilla.org/en-US/events">Go forth and talk!</a></h1>
<ul class="features">
<li>Use these slides to show and explain open technology</li>
<li>Download them from GitHub to change them if you need</li>
<li>These slides are HTML5, based on <a href="http://paulrouget.com/dzslides/">DZSlides</a> by Paul Rouget and Antony Ricaud.</li>
</ul>
<div class="notes">
<p>At the where's Mozilla page you will see where we currently are and you can request a speaker. As a Mozillian you can ask for sponsorship to attend an event.</p>
<p>That's it! Now use these slides and the information in it to spread the word about the open web. Thanks for that!</p>
</div>
</section>
<script src="js/makepresentation.js"></script>
</body></html>
Jump to Line
Something went wrong with that request. Please try again.