Hot new web technologies and how to promote them

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.

Good news, everybody!

Professor Farnsworth saying good news

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.

Presentation grab bag

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.

New tech is exciting

Firefox install screen

New technology is always exciting. We have new toys to play with and we are very driven to now build everything in them.

Excitement needs insight

Question everything

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.

(x^2+y^2-1)^3 = x^2 y^3 the web!

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.

WWW is…

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.

Let's look at some technologies

Let's walk through some technologies and see how we can promote them to make the web a better place.

1

HTML5

What is HTML5?

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.

Benefits of using HTML5

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.

HTML5 Boilerplate

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.

Modernizr

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.

Dive into HTML5

Dive into HTML5 is a free online book to learn HTML5

HTML5 Doctor

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".

HTML readiness

HTML5 Readiness is a nice interactive visualisation of the caniuse.com data.

Can I use?

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.

2

CSS3

Benefits of using CSS3

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.

CSS3 Patterns

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.

CSS Animation

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.

Ben the bodyguard

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.

CSS3 Planetarium

The CSS3 Planetarium is a demo by Mozilla showing lots of nice transitions and rotations in CSS.

Madmanimation

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.

CSS3 Dashboard

The CSS3 dashboard is a great overview of all the possible things in CSS these days. The source code is available on GitHub.

3

HTML5 forms

Build-in features

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.

New form elements

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.

The state of HTML5 forms

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.

4

File APIs

File API benefits

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.

Minus.com

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.

C64 yourself

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

Motivational poster

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.

5

HTML5 Video

HTML5 video

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.

Syncing HTML5 video with page content

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.

This Shell

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.

Popcorn

Popcorn is a Mozilla sponsored JavaScript library that makes it very easy to connect video and audio content with the rest of the document.

Issues with HTML5 video

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.

MDN Developer Derby July 2011

In July 2011, the Mozilla Developer Derby had video as its topic and we got a lot of great entries.

6

HTML5 Audio

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.

Extending audio

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.

Extending audio

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.

7

Canvas

Canvas

etch-a-sketch

photo by Kevin Simpson

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.

Canvas features

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.

Cutout animation

Terry Gilliam animation

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.

Simple canvas

This is a simple example how to draw a rectangle in canvas - this is all you need to do.

Translating canvas

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.

Rotating canvas

You can also rotate the coordinate system easily. Again, the coordinates of the rectangle did not have to change.

Scaling canvas

You can also scale the canvas to resize everything without having to change the coordinates or dimensions.

Browser fountain

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.

Fractal trees

The fractal tree demo shows how simple it is to do fractal paintings in canvas.

8

WebGL

WebGL features

WebGL is the big new thing for a lot of people. It brings 3D gaming to the web.

three.js by Mr. Doob

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.

Body Browser

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.

Path tracing

This is a demo showing real-time lightsourcing and path tracing in WebGL.

WebGL Water

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.

WebGL Skin

This is an impressive demo of simulating skin in WebGL - check the different discolourations and hair stubbles.

WebGL facial expressions

Ginger is an impressive example showing how you can simulate facial expressions.

9

Local Storage / Offline

Old school storage

Cookie monster

Photo by Dan Cederholm

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.

Local Storage

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.

Local Storage issues

Offline

10

History API

History API

GitHub using the history API

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

11

Geolocation

Geolocation

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.

Owls near you

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.

12

SVG

SVG is Scalable Vector graphics, a W3C standard based on XML to paint in the browser. SVG images can easily be interactive.

d3.js

D3 is a library to turn data in your pages (like tables) into highly interactive graphs and charts.

Raphaël

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.

13

Pretty showcases

Nike better world

Nike better world is a nice example showing how you can interactively respond to the user scrolling in the browser.

Nissan Leaf

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.

Evolution of the web

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.

Go forth and talk!

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.

That's it! Now use these slides and the information in it to spread the word about the open web. Thanks for that!