If you can't read please download the document
Upload
fnot
View
3.214
Download
1
Embed Size (px)
Citation preview
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