PowerPoint Presentation

Un aperu des nouvelles normes

HTML 5 et CSS 3

Rencontres Mondiales des Logiciels LibresBordeaux - mercredi 7 juillet 2010

Francis Draillard,
auteur de "Premiers pas en CSS et XHTML" - ditions Eyrolles

Du XHTML

au HTML 5

Rencontres Mondiales des Logiciels LibresBordeaux - mercredi 7 juillet 2010

Francis Draillard
auteur de "Premiers pas en CSS et XHTML" - ditions Eyrolles

L'volution du HTML

HTML 4

XHTML 1 puis 1.1

HTML 5 / XHTML 5

XHTML 2

whatwg.orgWeb Hypertext Appplication Technology
Working Group

problme de "rtrocompatibilit"

Retour au HTML ?

Sous cette appellation HTML 5, les principes essentiels du XHTML sont conservs

Sparation du contenu (code HTML 5)
et de la mise en forme (feuille de style CSS)

Des balises qui donnent du sens au texte

Sparation du contenu et de la mise en forme

Titre

Premier sous-titre

Du texte... du texte... du texte... du texte...

Deuxime 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... }

HTML 5 ou XHTML 5 ?

Ces deux langages sont trs proches

Les balises sont identiques

Sites web courants : HTML 5

XHTML 5 : pour liens avec XML

Le plus important :
Utiliser les balises de faon rationnelle

Orientations du HTML 5

Davantage de sens pour les balises

Dlimitation des parties de la page par des sections (remplaant certains )

Simplification des contenus multimdias
(audio, vido, animations)

Sections HTML 5

dlimite un bloc de la page ( )

texte indpendant dans la page ou une section

contenu diffrent (publicit, slogan, brves, ...)

menu de navigation

Sous-sections HTML 5

Dlimitent les parties d'une page
ou d'une section de la page

en-tte

ensemble de titres et sous-titres , , ...

pied de page ou de section

Exemple de sections

interprtation en HTML 5 d'un extrait du site www.framasoft.net

Contenus multimdias, audios et vidos

Logiciel de lecture intgr au navigateur

- plus besoin d'application complmentaire- balises simplifies et

texte alternatif

texte alternatif

Insertion simplifie des contenus Flash

Formats vidos

Theora : format libre et ouvert

H264 : format propritaire et soumis une licence trs coteuse

WebM : format libre et ouvert (codec VP8)

format rcent et performant, trs prometteur

projet soutenu par Mozilla, Google, Opera, ...

www.webmproject.org

Application
Balises audio et video

Affichage fourni par Chrome 5

N'abusez pas du vin, mme s'il est tir la clef USB ! Ce ne serait pas bon pour votre sant et pour la comprhension du HTML5 !

Utilisation du HTML 5

En complment du XHTML, en attendant la gnralisation des nouvelles versions de navigateurs

Ds prsent, si les destinataires sont quips de navigateurs modernes

pour les tablettes et terminaux mobiles dans le cadre d'un intranet...

Principales nouveauts
des CSS 3

Rencontres Mondiales des Logiciels LibresBordeaux - mercredi 7 juillet 2010

Francis Draillard
auteur de "Premiers pas en CSS et XHTML" - ditions Eyrolles

Nouveaux slecteurs CSS3

Plus de possibilits dans les slecteurs

balises ayant le mme parent

nime enfant d'un bloc

balises vides

slection en fonction du contenu d'un attribut :commenant par ..., finissant par ...,
contenant ..., diffrent de ...

Transparence

Rglage du niveau de transparence d'une couleur

couleur du texte ou couleur de fond

codage rgba(..., ..., ..., ...)

le "a" reprsente la couche alpha (transparence)

Transparence d'un bloc et de son contenu

proprit opacity

Transparence
en CSS 3

opacit du fond : 40 %
background-color: rgba(...);

opacit du bloc : 40 %
background-color: rgb(...);
opacity: 0.4;

Transfert d'une police

Plus de limitation aux quelques polices de caractres les plus courantes

Transfert du fichier avec @font-face

Utilisation possible dans toute la page

Effets d'ombres

Ombrage du texte

proprit text-shadow

Ombrage des blocs

proprit box-shadow

Rglage des dcalages, de la couleur
et de la largeur de flou

Cadres coins arrondis

Arrondis pour
l'ensemble des coins

Arrondi spcifique pour chaque coin

Rglage de la courbure des arrondis

proprit border-radius, dcline galement pour chaque coin (top, right, left, bottom)

Multicolonnage automatique

Nombre et largeur des colonnes

Trait de sparation des colonnes

type de trait, paisseur, couleur

Espacement entre les colonnes

Equilibrage des colonnes

Application de multicolonnage

Extrait du site http://2010.rmll.info, modifi pour une rpartition sur trois colonnes

Transformations gomtriques 2D et 3D

Proprit transform applique des fonctions gomtriques

translation

changement d'chelle

rotation

dformation

Images : Wikipedia

Spcifications pour terminaux mobiles

Adaptation du site aux appareils du type smartphone, tablette, PDA, ...

Application d'une feuille de style spcifique en fonction de critres donns

taille de l'cran

mode portrait ou paysage

...

Image : Wikipedia

Utilisation des CSS 3

Ds prsent

pour des effets accessoires
ombrages, coins arrondis, ...

pour des terminaux rcents :
feuille de style adapte aux appareils mobiles

Avec des prfixes pour certaines proprits

pour les navigateurs rcents, mais pas "dernier cri"

prfixe -moz-, -webkit- ou -o- suivant le navigateur

Pour aller plus loin...

Spcifications officielles du W3C
sur www.w3.org

Premiers pas en CSS et XHTML - 3me dition

auteur Francis Draillard, ditions Eyrolles

prsente les normes HTML 5 et CSS 3 et tient compte
du comportement des nouveaux navigateurs

Ce diaporama : sur www.antevox.fr/livre

RMLL 2010Un aperu des nouvelles normes HTML 5 et CSS 3

RMLL 2010