Découverte HTML5/CSS3

François-Guillaume Ribreau

twitter.com/fgribreau

fgribreau.com

blog.geekfg.net

Veille technologiqueJavascript (jQuery) / HTML5 / CSS3 /

R&D Web / Sécurité

<intro>

CSS3 ? HTML5 ?

</intro>

W3CWorld Wide Web Consortium

«La W3C est un organisme de standardisation [...] chargé de promouvoir la compatibilité des technologies du WEB telles que HTML, XHTML, [...], CSS, [...].»

W3CWorld Wide Web Consortium

«La W3C est un organisme de standardisation [...] chargé de promouvoir la compatibilité des technologies du WEB telles que HTML, XHTML, [...], CSS, [...].»

«Le W3C émet [...] des recommandations à valeur de standards industriels.»

<html>

HTML«HyperText Markup Language»

XHTML«eXtensible HyperText Markup Language»

HTML vs XHTML

Xml (exigeant)Sgml (permissif)

HTML vs XHTML

Xml (exigeant)Sgml (permissif)Sale

HTML vs XHTML

Xml (exigeant)Sgml (permissif)SalePropre !

<HtMl>✔ HTML 4.01

✗ XHTML 1.1

<HtMl>✔ HTML 4.01

✗ XHTML 1.1

TOUT en minuscule

✔ HTML 4.01

✗ XHTML 1.1

✔ HTML 4.01

✔ XHTML 1.1

<body><p>Mon Texte</body>

✔ HTML 4.01

✔ XHTML 1.1

<body><p>Texte en gras italique</p></body>

Balise ouverte = Balise fermée

✔ HTML 4.01

Eléments vide?

✔ HTML 4.01

Eléments vide?

✔ XHTML 1.1<img src="WEI_2009.jpg" alt="sacré fête !" /><br/>

Fermé aussi!Eléments vide?

✔ XHTML 1.1<img src="WEI_2009.jpg" alt="sacré fête !" /><br/>

Fermé aussi!

Mais...mais... Il y a une autre erreur...

Eléments vide?

<b><i>Texte en gras italique</b></i>

✔ HTML 4.01

Vérifiez l’imbrication

✔ XHTML 1.1

<b><i>Texte en gras italique</i></b>

Vérifiez l’imbrication

✔ XHTML 1.1

<b><i>Texte en gras italique</i></b>

Mais...mais... Il y a une autre erreur...

Un dernier point...

barbant]

Le Doctype

Le Doctype=

DocumentTypeDefinition

Doctype

Définir ce qui est valide

(et donc ce qui ne l’est pas)

les éléments...

...leurs propriétés

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>Titre de la page</title> </head> <body> </body></html>

Doctype XHTML1.1

Et une page sans doctype ?

Quirks Mode

http://en.wikipedia.org/wiki/Quirks_mode

http://www.quirksmode.org/css/quirksmode.html

HTML 2.0<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN"><!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"><!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"><!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 2//EN">

HTML 3.0<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">

HTML 3.2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">

En résumé... le Doctype

<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐frameset.dtd">

<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transitional.dtd">

En résumé... le Doctype

l ongcomplexe

di f f i c i l e à reten ir

<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐frameset.dtd">

<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transitional.dtd">

Doctype HTML5

<!DOCTYPE html>

Doctype HTML5

<!DOCTYPE html>

...dernier point.

[/mode

barbant]

Le (x)HTML permet de structurer le document

</html>

CSS«Cascading Style Sheets»

Le CSS permet de décrire la présentation d’un document

monCss.css

Element

Propriété

Valeur

CSS«Cascading Style Sheets»

Formatage de la police

Alignement et contrôle de paragraphe

Marges et espace

Espaces intérieurs

Bordures

Couleurs et images d'arrière plan

Formatage de listes

Positionnement et affichage d'éléments

Formatage de tableaux

Pseudo-formats

</css>

<check>

Contenu Présentation

CSSHTML

http://bit.ly/5eSFuS

Plus JAMAIS ça !

#1 Pas de CSS/JS inline

<a href="portfolio.html">Portfolio</a>

<a href="portfolio.html" title="Portfolio">Portfolio</a>

<a href="portfolio.html" title="Quelques dessins de l'artiste">Portfolio</a>

Pourquoi ?

Chaque navigateur possède son propre CSS par défaut

Solution ?? :’(

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-‐size: 100%; vertical-‐align: baseline; background: transparent;}body { line-‐height: 1;}ol, ul { list-‐style: none;}blockquote, q { quotes: none;}

Google it !

#2Utilisez un CSS Reset

«Css Reset» sur Google

Contenu Présentation

CSS(X)HTML

Contenu

Présentation

CSSInteraction

Javascript

(X)HTML

</check>

</rappel>

<pourquoi>CSS 2.1 -> CSS3 ?

HTML4 -> HTML5 ?

Pourquoi créer une nouvelle version du langage CSS & (x)HTML ?

Année de la dernière spécification (x)HTML ?

Question du jour !

31 Mai 2001XHTML 1.1

8 ans sans

évolution !

Le Webdesigner conçoit le site sous Photoshop

Puis intégration du design

«Le client souhaite des bordures arrondies»

« Il veut cette police là ! »« Un texte sur plusieurs colonnes ! »

« Cette photo doit subir une rotation de 50° »

« Ce titre doit être ombré ! »

« ... »

L’intégrateur CSS/HTML...

(quasi)Impossible en pur CSS 2.1

CSS3 le permet ...#FTW

...oui mais pourquoi HTML5 ?

Limites de HTML4 atteintes

Flash pour afficher du contenu multimédia

Flash pour utiliser de nouvelles polices

Flash pour les animations 3D/complexes

Vérification des formulaires en javascript

Librairies javascript lourdes pour gérer le drag&drop

Librairies javascript lourdes pour animer le contenu

Petit point culture G !

Petit point culture G

Petit point culture Geek !

Petit point culture Geek

Il était une fois en 2004...

Mozilla Foundation Apple Opera software

Firefox(Gecko)

Safari(Webkit)

Opera(Presto)

Il était une fois en 2004...

Mozilla Foundation Apple Opera softwarePAS

CONTENT !Firefox(Gecko)

Safari(Webkit)

Opera(Presto)

WHATWGWeb Hypertext Application Technology Working Group

WHATWGWeb Hypertext Application Technology Working GroupW

3C #inside

C’était le petit point culture G !

C’était le petit point culture G

C’était le petit point culture G !

C’était le petit point culture G Geek

</pourquoi>

//Disclaimer

Vous êtes ici

<font>

DEPREC

Nouvelles balises

Avec HTML4/CSS2.1

Avec HTML4/CSS2.1Beaux designs (effets) = énormément* de balise

* dans la majorité des cas

HTML5 = plus de sens

SémantiqueMéta-données

Code avec HTML5

Code avec HTML5

Multimédia

La vidéo avant HTML5

FlashFormat

audio/vidéo propriétaire

(H.264)

La vidéo avec HTML5

<video>Format

audio/vidéo ouvert

(Theora & Ogg Vorbis)

La vidéo avec HTML5

<video>Format

audio/vidéo ouvert

(Theora & Ogg Vorbis)

Safari 3.1+ FF 3.1+ Opera 10+

L’audio avec HTML5

Safari 3.1+ Opera 9+

Stockage Hors-ligne

Objectif ?

Stocker les données directement sur le poste client

Objectif ?

sessionStorage

http://www.w3.org/TR/webstorage/

sessionStorage enregistre (clé/valeur) le temps de la session

IE 8+Safari 4+ Firefox 2+

localStorage

localStorage enregistrement (clé/valeur) permanent

IE 8+Safari 4+ Firefox 2+

Besoin de tables ?

D’une base de données relationnelle ?

Database storage

http://www.whatwg.org/specs/web-apps/current-work/multipage/section-sql.html#sql

Base de données SQL locale

Database storage

http://www.whatwg.org/specs/web-apps/current-work/multipage/section-sql.html#sql

Base de données SQL locale

Safari 3.1+

Canvas/SVG

WebForms 2.0

datetimenumberrangeurl

Web Sockets

Web Workers

Local File API

Geolocation API

FF 3.6 ->

CSS3 is...awe... [wait for it...] some !

Awesome (génial) !

Les préfixes CSS3

[prefix][propriété CSS]

Les préfixes CSS3

-webkit- -moz- -o- -ms-

Les préfixes CSS3

-webkit- -moz- -o- -ms-

Bordure arrondie avant CSS3

Contenu du block

* d’autres formes sont possibles

Contenu du block

De 4 à 8 éléments pour réaliser la bordure

<div class="block"> <div> <div></div> <div></div> </div> <div></div> <p>Contenu du block</p> <div></div> <div> <div></div> <div></div> </div></div>

Equivalent HTML*:

Contenu du block

De 4 à 8 éléments pour réaliser la bordure

<div class="block"> <div> <div></div> <div></div> </div> <div></div> <p>Contenu du block</p> <div></div> <div> <div></div> <div></div> </div></div>

Equivalent HTML*:

Images

Trop de CSS [...]

Bordure arrondie avec CSS3

Contenu du block

<div>Contenu du block</div>HTML:

Contenu du block

div {border-radius:20px;}CSS3:

Contenu du block

div {border-radius:20px;}CSS3:

Les ombres avant CSS3

Contenu du block

Texte avec Ombre

Contenu du block

<div class="block"> <div> <p>Contenu du block</p> </div> <div> <div></div> <div></div> </div></div>

Equivalent HTML*:

Texte avec Ombre

Contenu du block

<div class="block"> <div> <p>Contenu du block</p> </div> <div> <div></div> <div></div> </div></div>

Equivalent HTML*:

Texte avec Ombre

Les ombres avec CSS3

<p>Contenu du block</p>HTML:

Contenu du block Texte avec Ombre

<p>Texte avec Ombre</p>

p {box-shadow:3px 3px 8px #000000;}

p {text-shadow:3px 3px 3px #000000;}

✔ W3C

CSS3 Transform

CSS3 Transition

Un intégrateur utilisant CSS3

Heureux !

</HTML5></CSS3>

HTML5, pas officialisé avant 2012

La majorité des modules CSS3 sont encore à l’état de «brouillons»

Quand commencer à utiliser CSS3/HTML5 ?

Quand utiliser CSS3/HTML5 ?

Je suis...LIBRE ! (plus de flash...youpi !!)

Progressive EnhancementAmélioration progressive

Questions, remarques ?

http://dev.w3.org/html5/markup/spec.htmlhttp://www.css3.info

Ne vous arrêtez pas à cette conférence ! (please!)

http://fgribreau.com

Illustrations provenant de :Flickr / DeviantArt

Découverte HTML5/CSS3

Technology

Transcript of Découverte HTML5/CSS3

Rmll2010 Html5 Css3

13666 Apprenez a Creer Votre Site Web Avec Html5 Et Css3

TEMPLATE JOOMLA HTML5 / CSS3 - joomladay.fr · Le programme ! L’ HTML5/CSS3 avec le RWD ! Les Frameworks de template Joomla et l'HTML5 ! HTML5 et la compatibilité avec les navigateurs

100912876 Apprenez a Creer Votre Site Web Avec HTML5 Et CSS3

HTML5 et CSS3 votre site web avec Apprenez à créerkosmina.eu/web/13666-apprenez-a-creer-votre-site-web-avec-html5-et... · Apprenez à créer votre site web avec HTML5 et CSS3 Par

Débutez Html5 et css3

html5 and css3

Création d'une application html5 utilisant canvas, svg et les animations css3

Module 4 HTML5 / CSS3 / jQuery - 31 place Web31-place-web.net/IMG/pdf/mod4_html5_css3_jquery.pdfModule 4 – HTML5-CSS3-jQuery Compatibilité Internet Explorer 7 et 8 Internet Explorer

Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010

Microsoft Internet Information Services 8 - HTML5 et CSS3 pour … · 2014. 6. 5. · HTML5 et CSS3 pour des sites Responsive Web Design Responsable pédagogique dans un centre de

Développement Web - HTML5, CSS3, APIs Web

TP HTML5 et CSS3 - u-bourgogne.fr

CM4-1 : HTML5 Mickaël Martin Nevotmickael-martin-nevot.com/.../s30-cm4-1-html5.pdf · HTML5/CSS3. Mathieu Nebra. Réalisez votre site web avec HTML5 et CSS3. Liens Développement

Realisez Votre Site Web Avec HTML5 Et CSS3

Presentation html5 css3 by thibaut

SUPPORT DE COURS HTML5 - afci.fr · HTML 5 2 Introduction Historique Organismes de normalisation Définition du HTML5 Principe du HTML5 Quand choisir HTML5/CSS3 Le balisage Structure

Les Basiques - Web Développement HTML5, CSS3, JS et PHP

Cours HTML5 & CSS3

HTML5 et CSS3 : découverte et maîtrise des bases