HTML5 in the wildCSS3 javacsript & co

10 interesting uses of modern web technologies

I hear HTML5 is the future. In this talk I want to show you that HTML5 is already present in our day to day life on the the internet.

By HTML5 I mean "HTML5 and friends: modern APIs, CSS3 and SVG"

Here are 10 examples of HTML5/CSS3 app around here

Image Uploader

Think about Flickr' image uploader. It's pretty boring and not really powerful. If you want something better, you have to install an app or use a plugin.

drag'n dropfrom Desktop
XHR level 2upload progress
File APIpreview before upload

But the web is ready for powerful uploader. Here is an example

Drag from desktop (multiple upload possible)
We see the upload progress
Preview
Thx modern APIs
Can be easily degraded to a simple "input type=file"

WebGLJS API for 3D

WebGL is the glue between your graphic card and Javascript.

Perfect example of progressive enhancement.
Not a feature "absolutely vital" for the website, but add value if WebGL is supported

Games!

Games are everywhere on the web, and are NOT built with web technologies :(

CanvasDraw pixels
JavaScriptfast

And the technologies are here, and are powerful enough.

3 ways:

JavaScriptpixel per pixel
SVG SMILNot well supported
CSS3 Animations

These are the only 3 ways to animations something on a web page. JavaScript (via DOM or Canvas), SVG SMIL (works in Firefox, not sure how good are the other browsers), CSS3 Animations: something new, first implemented in Webkit: create animation in CSS.

Based on CSS3 animations (in Firefox Aurora)
Supported by webkit
Can be degradated in a graceful way (see the demo in Fx4)
The layout engine take care of the animation (you just set some key frames)
It's CSS!!!

Data visualisation

"Intelligence client side". Let's stop building charts on the server side. Let's have the data client side, rendered to nice infographics in SVG or Canvas.

Download the data (not its visualisation)
Build dynamic charts (live and interactive)
"intelligence client side"

Geolocation

Your web app includes, somehow, geographical data? A map? Allow the user to locate himself on this map. Even Google do it :) Also, think about the Social impact of such a valuable information.

Can give you a very accurate answer
Privacy respect (warning + button)
Can also come with address (street + city)
Could be very useful for Mobile Apps

History API

This is not the most exciting thing ever, but it's an important new API, that fixes a problem that appeared because of AJAX: broken page history.

Github is full of AJAX
One action will change a part of the page, which is "supposed" to break the History (if we click somewhere, we stay on the same page, but the content change)
With the history API, we can change the URL and be notified when the user press back/forward: smoother and better experience.

Adaptative layout

A layout that works for any window size doesn't exist. So your layout has to change depending on the size of the screen. It's getting more and more important that now we have mobile devices everywhere.

This website works perfectly and looks very good on a PC, a tablet or a phone. Exactly the same markup. Not a different website (not m.jasonweaver.name).
The mediaQuery let's you define different layouts for different conditions (handheld, size, orientation, ...)
A mediaQuery is dynamic

Videos
Canvas
CSS3 Transform

Flash is a black box. It hasn't been designed to be compatible with CSS3 or Canvas. The standard has. You can make transform a video with Canvas and CSS for example. Here is an example.

HTML5 in the wildCSS3 javacsript & co

10 interesting uses of modern web technologies

Image Uploader

3D content

Games!

Animations

3 ways:

Data visualisation

Geolocation

History API

Adaptative layout

Multimedia

?

This presentation
is a web page

Your turn!

HTML5 in the wildCSS3 javacsript & co

10 interesting uses of modern web technologies

Image Uploader

3D content

Games!

Animations

3 ways:

Data visualisation

Geolocation

History API

Adaptative layout

Multimedia

?

This presentationis a web page

Your turn!

This presentation
is a web page