Rmll2010 Html5 Css3
Upcoming SlideShare
Loading in...5
×
 

Rmll2010 Html5 Css3

on

  • 2,985 views

Un aperçu des nouvelles normes HTML 5 et CSS 3

Un aperçu des nouvelles normes HTML 5 et CSS 3

Statistics

Views

Total Views
2,985
Views on SlideShare
2,920
Embed Views
65

Actions

Likes
1
Downloads
48
Comments
0

4 Embeds 65

http://fad.reseau2000.net 58
http://isachri-vivamexico.blogspot.fr 3
http://isachri-vivamexico.blogspot.com 2
http://fad2.reseau2000.net 2

Accessibility

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Rmll2010 Html5 Css3 Rmll2010 Html5 Css3 Presentation Transcript

  • 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
  • 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
  • L'évolution du HTML
    • HTML 4
    whatwg.org Web Hypertext Appplication Technology Working Group problème de "rétrocompatibilité" XHTML 1 puis 1.1 HTML 5 / XHTML 5 XHTML 2
  • 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
  • Séparation du contenu et de la mise en forme <h1> Titre </h1> <h2> Premier sous-titre </h2> <p> Du texte... du texte... du texte... du texte... </p> <h2> Deuxième sous-titre </h2> <p> Du texte... du texte... du texte... du texte... </p> <style type=&quot;text/css&quot;> h1 { mise en forme des titres ... } h2 { mise en forme des sous-titres ... } p { mise en forme des paragraphes ... } </style>
  • 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
  • Orientations du HTML 5
    • Davantage de sens pour les balises
    • Délimitation des parties de la page par des sections (remplaçant certains <div>)
    • Simplification des contenus multimédias (audio, vidéo, animations)
  • Sections HTML 5
    • <section>
        • délimite un bloc de la page (  <div>)
    • <article>
        • texte indépendant dans la page ou une section
    • <aside>
        • contenu différent (publicité, slogan, brèves, ...)
    • <nav>
        • menu de navigation
  • Sous-sections HTML 5
    • Délimitent les parties d'une page ou d'une section de la page
    • <header>
        • en-tête
    • <hgroup>
        • ensemble de titres et sous-titres <h1>, <h2>, ...
    • <footer>
        • pied de page ou de section
  • Exemple de sections interprétation en HTML 5 d'un extrait du site www.framasoft.net <header> <footer> <header> <header> <footer> <footer> <article> <article> <article>
  • Contenus multimédias, audios et vidéos
    • Logiciel de lecture intégré au navigateur
    - plus besoin d'application complémentaire - balises simplifiées <audio> et <video>
      • <audio src=&quot;piano-bar.mp3&quot;> texte alternatif </audio>
      • <video src=&quot;monclip.webm&quot;> texte alternatif </video>
    • Insertion simplifiée des contenus Flash
      • <embed src=&quot;pub.swf&quot; />
  • 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, ...
        • www.webmproject.org
  • Application Balises audio et video 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 ! Affichage fourni par Chrome 5
  • 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 ...
  • Principales nouveautés des CSS 3 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard auteur de &quot;Premiers pas en CSS et XHTML&quot; - éditions Eyrolles
  • 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 ...
  • Transparence
    • Réglage du niveau de transparence d'une couleur
        • couleur du texte ou couleur de fond
        • codage rgba(..., ..., ..., ...)
        • le &quot;a&quot; représente la couche alpha (transparence)
    • Transparence d'un bloc et de son contenu
        • propriété 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 caractères les plus courantes
    • Transfert du fichier avec @font-face
    • Utilisation possible dans toute la page
  • 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
  • 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)
  • 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
  • Application de multicolonnage Extrait du site http://2010.rmll.info, modifié pour une répartition sur trois colonnes
  • 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
  • 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
  • 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 &quot;dernier cri&quot;
        • préfixe -moz- , -webkit- ou -o- suivant le navigateur
  • Pour aller plus loin...
    • Spécifications officielles du W3C sur www.w3.org
    • 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 www.antevox.fr/livre