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

1

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.

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

http://min.us
http://min.us
2

3D content

Quiet explicit :)

WebGL is the glue between your graphic card and Javascript.

pepetz.com
pepetz.com
3

Games!

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

And the technologies are here, and are powerful enough.

playbiolab.com grantgalitz.org/gameboy
playbiolab.com grantgalitz.org/gameboy
4

Animations

3 ways:

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.
animatable.com
animatable.com
5

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.
highcharts.com
highcharts.com
6

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.
maps.google.com
maps.google.com
7

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.com
github.com
8

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.
jasonweaver.name
jasonweaver.name
9

Multimedia

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.
thisshell.com
thisshell.com
10

?

The last web page I want to show, you've been looking at it for these last 30 minutes.

This presentation
is a web page

paulrouget.com/dzslides

Your turn!