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 - you don't need to note down any of links or resources in this presentation as everything is already available on the Mozilla Wiki.
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 technology is always exciting. We have new toys to play with and we are very driven to now build everything in them.
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.
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.
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 walk through some technologies and see how we can promote them to make the web a better place.
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 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.
Dive into HTML5 is a free online book to learn HTML5
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".
HTML5 Readiness is a nice interactive visualisation of the caniuse.com data.
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.
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.
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 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.
The CSS3 Planetarium is a demo by Mozilla showing lots of nice transitions and rotations in CSS.
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.
The CSS3 dashboard is a great overview of all the possible things in CSS these days. The source code is available on GitHub.
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 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.
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 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.
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.
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.
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.
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.
In July 2011, the Mozilla Developer Derby had video as its topic and we got a lot of great entries.
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.
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.
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.
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.
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.
This is a simple example how to draw a rectangle in canvas - this is all you need to do.
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.
You can also rotate the coordinate system easily. Again, the coordinates of the rectangle did not have to change.
You can also scale the canvas to resize everything without having to change the coordinates or dimensions.
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.
The fractal tree demo shows how simple it is to do fractal paintings in canvas.
WebGL is the big new thing for a lot of people. It brings 3D gaming to the web.
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.
This is a demo showing real-time lightsourcing and path tracing in WebGL.
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.
This is an impressive demo of simulating skin in WebGL - check the different discolourations and hair stubbles.
Ginger is an impressive example showing how you can simulate facial expressions.
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
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 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.
SVG is Scalable Vector graphics, a W3C standard based on XML to paint in the browser. SVG images can easily be interactive.
D3 is a library to turn data in your pages (like tables) into highly interactive graphs and charts.
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.
Nike better world is a nice example showing how you can interactively respond to the user scrolling in the browser.
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.
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.
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!