RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard, auteur de "Premiers pas en CSS et XHTML" - éditions Eyrolles

RMLL 2010 Du XHTML au HTML 5 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard auteur de "Premiers pas en CSS et XHTML" - éditions Eyrolles

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 3 L'évolution du HTML HTML 4 XHTML 1 puis 1.1 HTML 5 / XHTML 5 XHTML 2 whatwg.org Web Hypertext Appplication Technology Working Group problème de "rétrocompatibilité"

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 4 Retour au HTML ? Sous cette appellation HTML 5, les principes essentiels du XHTML sont conservés Séparation du contenu (code HTML 5) et de la mise en forme (feuille de style CSS) Des balises qui donnent du sens au texte

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 5 Séparation du contenu et de la mise en forme Titre Premier sous-titre Du texte... du texte... du texte... du texte... Deuxième sous-titre Du texte... du texte... du texte... du texte... h1 { mise en forme des titres... } h2 { mise en forme des sous-titres... } p { mise en forme des paragraphes... }

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 6 HTML 5 ou XHTML 5 ? Ces deux langages sont très proches Les balises sont identiques  Sites web courants : HTML 5  XHTML 5 : pour liens avec XML Le plus important : Utiliser les balises de façon rationnelle

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 7 Orientations du HTML 5 Davantage de sens pour les balises Délimitation des parties de la page par des sections (remplaçant certains ) Simplification des contenus multimédias (audio, vidéo, animations)

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 8 Sections HTML 5  délimite un bloc de la page (  )  texte indépendant dans la page ou une section  contenu différent (publicité, slogan, brèves,...)  menu de navigation

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 9 Sous-sections HTML 5 Délimitent les parties d'une page ou d'une section de la page  en-tête  ensemble de titres et sous-titres,,...  pied de page ou de section

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 10 Exemple de sections interprétation en HTML 5 d'un extrait du site

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 11 Contenus multimédias, audios et vidéos Logiciel de lecture intégré au navigateur - plus besoin d'application complémentaire - balises simplifiées et texte alternatif Insertion simplifiée des contenus Flash

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 12 Formats vidéos Theora : format libre et ouvert H264 : format propriétaire et soumis à une licence très coûteuse WebM : format libre et ouvert (codec VP8)  format récent et performant, très prometteur  projet soutenu par Mozilla, Google, Opera,... 

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 13 Application Balises audio et video Affichage fourni par Chrome 5 N'abusez pas du vin, même s'il est tiré à la clef USB ! Ce ne serait pas bon pour votre santé et pour la compréhension du HTML5 !

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 14 Utilisation du HTML 5 En complément du XHTML, en attendant la généralisation des nouvelles versions de navigateurs Dès à présent, si les destinataires sont équipés de navigateurs modernes  pour les tablettes et terminaux mobiles  dans le cadre d'un intranet...

RMLL 2010 Principales nouveautés des CSS 3 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard auteur de "Premiers pas en CSS et XHTML" - éditions Eyrolles

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 16 Nouveaux sélecteurs CSS3 Plus de possibilités dans les sélecteurs balises ayant le même parent n ième enfant d'un bloc balises vides sélection en fonction du contenu d'un attribut :  commençant par..., finissant par..., contenant..., différent de...

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 17 Transparence Réglage du niveau de transparence d'une couleur  couleur du texte ou couleur de fond  codage rgba(...,...,...,...)  le "a" représente la couche alpha (transparence) Transparence d'un bloc et de son contenu  propriété opacity

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 18 Transparence en CSS 3 opacité du fond : 40 % background-color: rgba(...); opacité du bloc : 40 % background-color: rgb(...); opacity: 0.4;

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 19 Transfert d'une police Plus de limitation aux quelques polices de caractères les plus courantes Transfert du fichier Utilisation possible dans toute la page

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 20 Effets d'ombres Ombrage du texte  propriété text-shadow Ombrage des blocs  propriété box-shadow Réglage des décalages, de la couleur et de la largeur de flou

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 21 Cadres à coins arrondis Arrondis pour l'ensemble des coins Arrondi spécifique pour chaque coin Réglage de la courbure des arrondis  propriété border-radius, déclinée également pour chaque coin (top, right, left, bottom)

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 22 Multicolonnage automatique Nombre et largeur des colonnes Trait de séparation des colonnes  type de trait, épaisseur, couleur Espacement entre les colonnes Equilibrage des colonnes

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 23 Application de multicolonnage Extrait du site modifié pour une répartition sur trois colonnes

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 24 Transformations géométriques 2D et 3D Propriété transform appliquée à des fonctions géométriques  translation  changement d'échelle  rotation  déformation Images : Wikipedia

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 25 Spécifications pour terminaux mobiles Adaptation du site aux appareils du type smartphone, tablette, PDA,... Application d'une feuille de style spécifique en fonction de critères donnés  taille de l'écran  mode portrait ou paysage ... Image : Wikipedia

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 26 Utilisation des CSS 3 Dès à présent  pour des effets accessoires  ombrages, coins arrondis,...  pour des terminaux récents :  feuille de style adaptée aux appareils mobiles Avec des préfixes pour certaines propriétés  pour les navigateurs récents, mais pas "dernier cri"  préfixe -moz-, -webkit- ou -o- suivant le navigateur

RMLL 2010 Un aperçu des nouvelles normes HTML 5 et CSS 3 27 Pour aller plus loin... Spécifications officielles du W3C sur Premiers pas en CSS et XHTML - 3 ème édition auteur Francis Draillard, éditions Eyrolles présente les normes HTML 5 et CSS 3 et tient compte du comportement des nouveaux navigateurs Ce diaporama : sur