Jump Camp - HTML5

HTML 5 Presented by David CHAU

Sommaire
Il était une fois, HTML
Quoi de neuf chez HTML 5?
La syntaxe
Extensions & APIs
Exemples
A vous de jouer!

Il était une fois, HTML
1991: Naissance de HTML par Tim Berners-Lee.
1993-1994: img, formulaire, CSS, tableau
1995-1996: HTML 2.0
1997: HTML 3.2 et HTML 4.0
2000-2006: XHTML 1.0
2007: HTML 5

Quoi de neuf chez HTML 5?
HTML5 est le successeur de HTML 4
Définit le langage HTML5 et le xHTML5
Ere des applications web
Nouveau modèle structurel
Standardisation de nouvelles APIs
Travail de séparation entre fond et forme

La syntaxe
text/html ou application/xml
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html> <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html>

La syntaxe - quelques balises
section
Définir les différentes sections d’un document
article
Représenter un text/article d’un blog…
aside
Indiquer le contenu indirectement lié à l’article lui-même (source d’information, archive…)

header & footer
Représenter l’entête / le pied de page d’une section ou d’une page
nav
Définir une section de liens de navigation
dialog
Préciser la séquence d’une dialogue

legend
Utilisé dans fieldset, figure, details
figure
Regrouper les éléments visuels, tels que images, les vidéos et leur légende

audio/video
Représenter les contenus multimédia
canvas
Définir les zones graphiques 2D
…

La syntaxe
La structure

Extensions & APIs - WebSocket
WebSocket
Connexion TCP en Full-Duplex standard
T raverse proxy et firewall
Connexion à d’autres serveur que le serveur d’origine de la page.
Entête d’une requête d’1 octet
Trame de type texte ou binaire
Jetty + Chromium (Nightly builds)

Instancier/connecter un websoket
Définir les gestionnaires
Communiquer et déconnecter
Var wSocket=new WebSoket(“ws://www.websoket.org”); wSocket.onopen=function(evt){alert(“open…”);} wSocket.onmessage=function(evt){alert(“receive…”);} wSocket.onclose=function(evt){alert(“close…”);} wSocket.postMessage(“coucou”); wSocket.disconnect();

Web forms 2.0
Extension des types de input
Validation (type, pattern, required, min, max, etc.)
Gestion des listes
<form> <div id="repeatformcontainer"> <div id="tem1" repeat="template" repeat-min="2" repeat-max="5" > <label>Features</label><input type="text" name="product.[tem1]" value="E.g, Nice eyes"> <button type=remove> Remove</button> <button type=move-up> Move Up</button> <button type=move-down> Move Down</button><br /> </div> <div class="button"> <button type=add template=tem1> Add</button><br /><br /></div> </div> </form> search number range color tel url email date month week time datetime datetime-local

Extensions & APIs - GéoLocalisation
GéoLocalisation
S ervice de localisation décorrélé de la source d’information sous-jacente (wifi, GPS, etc.)
I f (!!navigator.geolocation)
// tester s’il est possible d’utiliser la geoloc If (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position) { //definir la fonction capable de gerer les positions var info = “Latitude = “+position.coords.latitude +”<br/>Longitude = ”+position.coords.longitude +”<br/>Altitude = “+position.coords.altitude; alert(info); } ); } else { alert(“navigateur non compatible geo loc”); }

Extensions & APIs - Canvas
Canvas
API 2D
Zone de dessin
// tester si le navigateur implémente la spécification fucntion supportCanvas(){ return !!document.createElement(‘canvas’).getContext; } function draw(canvas) { var ctx = canvas.getContext(“2d”); ctx.strokeStyle="rgb(155,255,188)"; ctx.lineWidth=10; ctx.arc(50, 50,Math.PI/180*60, Math.PI/180*50, false); ctx.stroke(); } if (supportCanvas()) { var canvas = document.createElement(‘canvas’); // définir la dimension de zone canvas.height=100; canvas.weidth=100; draw(canvas); document.getElementById('container').appendChild(canvas); }

Extensions & APIs
Video
Standardisation de l’insertion des vidéos
I f(!!document.createElement(‘video’).canPlayType)
Web workers
L ancement de scripts en tâche de fond
Coûteux en temps d’instantiation et en mémoire. A utiliser judicieusement!
http://dev.w3.org/html5/workers/Overview.html#tutorial

Extensions & APIs
Base des données locale
Une façon de stocker les information en locale
Concept similaire aux cookies, mais pour une plus grosse quantité
Gestion des application offline
Travailler en offline
dnd
Drag & drop

Démonstrations
http://html5demos.com
http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml
http://www.abonentendeur.com/mobile.html sur mobile Android ou iPhone
http://shwetankdixit.com/testpages/webforms2demo.htm sur Opera 9.5 ou sup.

A vous de jouer!
Réaliser une page HTML5 récupérant les feeds publiques de Twitter et les stocker dans une base de données locale pour pouvoir les relire.

A vous de jouer!
HTML
<!DOCTYPE HTML> <html> <head> <meta charset= "UTF-8" > <link rel= "stylesheet" href= "twitter.css" > <title> Twitter public timeline reader </title> </head> <body> <menu> <button id= "load" > ↻ Refresh </button> </menu> <article id= "timeline" ></article> <script type= "text/javascript" src= "twitter.js" ></script> <script type= "text/javascript" >  </script> </body> </html>

JavaScript
Récupération des données via Twitter
Créer une fonction d’appel à Twitter
Créer un Callback traitant les résultats
Afficher les résultats
A vous de jouer!

JavaScript (Twitter.load)
A vous de jouer! load : function() { console.log('load'); //Remove JSONP scripts var head = document.getElementsByTagName('head')[0]; var scripts = null; scripts = head.getElementsByTagName('script'); for(var l=scripts.length; l--;) { head.removeChild(scripts[l]); } document.getElementById('load').innerHTML = 'Refreshing...'; var url='http://www.twitter.com/statuses/public_timeline.json?callback= Twitter.twitterCallback ’ var script = document.createElement('script'); script.setAttribute(src', url); script.onload = function() { document.getElementById('load').innerHTML = '↻ Refresh'; } console.log(script); head.appendChild(script); },

JavaScript (Twitter.twitterCallback)
A vous de jouer! twitterCallback : function(obj) { console.log('callback'); for (var i=0, l=obj.length; i<l; i++) { Twitter.display ({ 'id' : obj[i].id, 'username' : obj[i].user.screen_name, 'text' : obj[i].text, 'created_at' : obj[i].created_at, 'avatar' : obj[i].user.profile_image_url }); } },

JavaScript (Twitter.display)
A vous de jouer! display : function(row) { console.log('display'); var timeline = document.getElementById('timeline'); var section = document.createElement('section'); var d = new Date(); d.setTime(Date.parse(row['created_at'])); section.innerHTML = '<img src="'+row['avatar']+'" alt="" height="24" widht="24"/>'+ '<span class="user">'+row['username'] + '</span> ' + row['text'] + ' <span class="date">' + prettyDate(d) + '</span>'; timeline.appendChild(section); },

HTML
A vous de jouer!

JavaScript (global)
A vous de jouer! var db = null; try { if (window.openDatabase) { db = openDatabase("Twitter", "1.0", "Twitter Feed", 200000); } } catch(err) { }

JavaScript (Twitter.init)
A vous de jouer! //Create table init : function() { console.log('init'); if (db) { //Have database? Read data db.transaction(function(tx) { tx.executeSql( "CREATE TABLE IF NOT EXISTS status (id REAL UNIQUE, username TEXT, created_at TEXT, text TEXT, avatar TEXT)", [], function(result) { Twitter.readStatus(); }, function(tx, error) { Twitter.readStatus(); } ); }); } else { //No database? Just load data and display Twitter.load(); } },

JavaScript (Twitter.readStatus)
A vous de jouer! //Read statuses readStatus : function() { console.log('read'); db.transaction(function(tx) { tx.executeSql("SELECT id, username, created_at, text, avatar FROM status ORDER BY id DESC", [], function(tx, result) { var timeline = document.getElementById('timeline'); timeline.innerHTML = ''; for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i); Twitter.display(row); } }, function(tx, error) { // Couldn't retrieve tweets return; }); }); },

JavaScript (Twitter.twitterCallback)
A vous de jouer! twitterCallback : function(obj) { console.log('callback'); if (db) { var inserts = []; for (var i=0, l=obj.length; i<l; i++) { var status = [ obj[i].id, obj[i].user.screen_name, obj[i].text, obj[i].created_at, obj[i].user.profile_image_url ] inserts.push(status); } Twitter.insert(inserts, Twitter.readStatus); } else { //No database? just display for (var i=0, l=obj.length; i<l; i++) { Twitter.display({ 'id' : obj[i].id, 'username' : obj[i].user.screen_name, 'text' : obj[i].text, 'created_at' : obj[i].created_at, 'avatar' : obj[i].user.profile_image_url});} } },

JavaScript (Twitter.insert)
A vous de jouer! //Synchronous insert insert : function(arStatus, callback) { var status = arStatus.pop(); var sql = "INSERT INTO status (id, username, text, created_at, avatar) VALUES (?,?,?,?,?)"; db.transaction( function (tx) { tx.executeSql( sql, status, function(tx, result){ if (arStatus.length > 0) { Twitter.insert(arStatus, callback); } else { callback(); }}, function(tx, error){ if (arStatus.length > 0) { Twitter.insert(arStatus, callback); } else { callback(); }} ); } ); }

APIs qui renforcent la mobilité et répondent aux demandes que HTML 4 ne pouvait résoudre
Spécification en draft
Couplage fort entre HTML et JavaScript
Google, Apple, Palm, Mozilla, WebKit, Opera, IE
Conclusion

[email_address]
Questions?

Jump Camp - HTML5

by chaudavid

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 18

Statistics

Jump Camp - HTML5 Presentation Transcript

https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com	9
http://www.slideshare.net	7
http://localhost	2

Jump Camp - HTML5

by chaudavid

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 18

Statistics

Jump Camp - HTML5 Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare