GitPourLaNulle (PDF, 660 ko)

J’ai aussi mis le diaporama (au format PPTX téléchargeable) sur SlideShare :

Vos propres références sont les bienvenues en commentaire.

(et à propos de la veille : Faire de la veille)

Articles et billets

• OpenWeb
  #qualitéweb  #standards
  http://openweb.eu.org
• Pompage
  #webdesign#standards
  www.pompage.net
• Planète Accessibilité
  #accessibilité
  http://planete-accessibilite.com
• Webatou
  #accessibilité
  http://blog.webatou.info
• Mammouthland
  #intégration
  www.mammouthland.net

Outil

• Projet Opquast – Gestion de la qualité
  #qualitéweb  #referentiel #bonnespratiques
  http://www.opquast.com

Communautaire

(forum, liste de diffusion, discussion, etc.)

• Alsacréations
  #intégration #webdesign #standards
  www.alsacreations.com
• Professionnels francophones du développement web
  #intégration #développement
  http://groups.google.fr/group/webdevfr
• HTML Zen Garden
  (placé dans « communautaire » car les articles appellent des commentaires qui sont tout aussi intéressants que l’article)
  #intégration
  www.htmlzengarden.com

Événements

• W3Café
  http://france.w3cafe.org
• Paris Web
  #conférences #ateliers
  www.paris-web.fr

Le compte-rendu si dessous est d’ailleurs très partiel par rapport à la richesse de la conférence. J’ai eu du mal à doser entre le plaisir d’écouter et de me laisser porter et celui de prendre des notes consciencieuses et rigoureuses De toute façon, je vous recommande vivement de vous faire vos propres notes en visionnant la vidéo … dès qu’elle sera sortie !

Quelques rappels :

CSS1 date de 1996 ; CSS2 est sorti en 1998 et CSS3 est en travail depuis … 1998.

Le CSS Working Group a imposé que CSS2.1 devait sortir dans les 2 ans.

CSS2.1?

CSS2.1 parce que CSS2 est à revoir : il faut corriger les erreurs et ambiguïtés, virer ce qui inimplémentable / inimplémenté / inutilisé. Les ajouts y sont minimes.
CSS2.1 devra subir des suites de tests.

Ce qui va être implémenté à CSS :

C’est là que commence le « teasing » avec une liste d’éléments CSS. Certains sont déjà implémentés dans certains navigateurs ; on peut donc commencer à « jouer » avec.

Selectors Level 3

• :nth-child: s’utilise avec un argument. Cela permet de sélectionner un élément dans un groupe : 1 paragraphe sur 2, le 8ème élément … On pense tout de suite à nos tableaux dont on veut modifier la couleur de ligne une ligne sur deux. Finis ma class="lignePaire" !
• selecteur d’attribut [nomdattribut] (implémenté dans tous les navigateurs sauf IE6)
• @namespace : permet de mélanger du style pour HTML et SVG sans soucis.
• :not() : pour nier la valeur booléenne résultante – Si l’élément n’a pas la classe « xxx » alors la règle s’applique. Je trouve ça génial et, maintenant qu’on me le met sous le nez, indispensable.
• ::selection couleur de fond et couleur du texte des éléments sélectionnés. Je suis pressée de l’utiliser également pour me débarrasser du moche « blanc sur fond bleu ». Attention toutefois à ce qu’il n’y ait pas de « dérives » de graphistes ne voulant pas gâcher un design et en profitant pour rompre trop le contraste de la sélection.

marquee

On croyait s’en être débarrassé. On croyait que c’était bien. …Et bien non ! La possibilité de faire défiler un texte est très importante pour sur les marchés asiatiques (Japon, Chine). Cela fait partie de leurs usages.

Sauf que là, ce sera géré par CSS et non plus par HTML.

CSS Media Queries

Sélection des média selon leurs caractéristiques intrinsèques.
Celui-là aussi est génial et très attendu. Il va permettre de sélectionner une feuille de style en fonction, par exemple, de la taille de l’écran :
@media screen and (max-width: 501px) { ... }

Borders and backgrounds

De nombreux éléments arrivent pour les bordures et les images de fond :

• background-size
• background-repeat : space | round
• background-clip : border-box | padding-box | content-box | no-clip
• backgound-break : pour l’impression
• border-radius (Mozilla, WebKit, Safari OK)
• box-shadow

CSS Transformations

Je crois qu’on n’a pas fini de s’amuser quand la propriété transform sera à notre disposition ! A nous, intégrateurs et webdesigners consciencieux, d’en faire du bon et non pas du gadget.

• transform: scale rotate translate skew matrix
• transform-origin

CSS Transitions

Pareil avec celle-ci qui permet des animations de page bien sympatiques si on n’abuse pas de l’effet.

-property, -duration

Valeurs, unités et autres

J’en rêvais, je ne le croyais même pas possible. Depuis le temps que des profs de maths s’évertuent à me faire comprendre qu’on n’additionne pas des torchons et des serviettes … et bien CSS si !
CSS va nous permettre de donner des valeurs additionnant des % et des valeurs fixes ! Waouh !

width: calc(100%/3 - 2*1em - 2*1px)

Typage de attr() et généralisation de la propriété content ! (attention, si je remplace un paragraphe par l’url d’une image, il faut que le lecteur d’écran se base sur le DOM et non sur la restitution)

Multi-colomn

Le multi-colomn, que certains d’entre-nous exploitent déjà grâce à Firefox…

CSS colors

Idem avec opacity.

A noter à propos des couleurs, la dépréciation des couleurs système CSS2.

CSS 3 Basic UI

Et encore plus d’éléments à découvrir, exploiter et utiliser :

• contrôle des éléments de formulaire : :active, :defaut, :valid, :invalid, …
• ::value, ::choises
• box-sizing
• nav-index…

Brouillons :

Et pour finir de se mettre l’eau à la bouche, voici ce qui est en préparation dans la hotte :

• gradiant,
• grid positioning / CSS templat layout,
• @font-face,
• flexible box model,
• Generated content for page media,
• variables / constantes, CSS positioning (hauteur d’un élément égal à la hauteur d’un autre élément).

Elle permet par exemple d’afficher tous les attributs « alt » ou « title » de la page. Elle permet de vérifier la validité d’un code en faisant appel au validateur du W3C. Elle permet de voir une page dans différentes tailles (800×600, 1024×768 ou taille au choix). Elle permet de désactiver le Javascript pour vérifier le comportement de la page. Elle permet encore de voir rapidement et sans intervenir sur le code une page sans faire appel aux fichiers de mise en forme.
Bien d’autres fonctionnalités sont à découvrir en fonction des besoins de chacun.

En savoir plus et télécharger : https://addons.mozilla.org/fr/firefox/addon/60

Initiation au HTML – Plan de l’article complet

• Initiation au HTML (1/5)
• HTML et Internet (Initiation au HTML 2/5)
• Le langage HTML (Initiation au HTML 3/5)
• Pages statiques et pages dynamiques (Initiation au HTML – Annexe I)
• Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)
• Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)
• Le W3C (Initiation au HTML – Annexe III)
• Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)
• La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)

Pour voir le code d’une page HTML :

• depuis Internet Explorer :

  • clic droit > « Afficher la source »

  • ou Menu > « Affichage » > « Source »

• depuis Firefox :

  • Ctrl + U

  • ou clic droit > « Code source de la page »

  • ou Menu > « Affichage » > « Code source de la page »

  Sur les deux navigateurs, utiliser ensuite Ctrl + F pour faire une recherche précise.

Initiation au HTML – Plan de l’article complet

• Initiation au HTML (1/5)
• HTML et Internet (Initiation au HTML 2/5)
• Le langage HTML (Initiation au HTML 3/5)
• Pages statiques et pages dynamiques (Initiation au HTML – Annexe I)
• Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)
• Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)
• Le W3C (Initiation au HTML – Annexe III)
• Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)
• La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)

Initiation au HTML – Plan de l’article complet

• Initiation au HTML (1/5)
• HTML et Internet (Initiation au HTML 2/5)
• Le langage HTML (Initiation au HTML 3/5)
• Pages statiques et pages dynamiques (Initiation au HTML – Annexe I)
• Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)
• Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)
• Le W3C (Initiation au HTML – Annexe III)
• Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)
• La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)

Une page HTML contient nécessairement certains éléments :

• les balises qui indiquent que l’on va « parler » en HTML

<html>

</html>

Elles encapsulent la totalité du HTML.

• la section qui contient les informations non affichées mais nécessaires au navigateur

<head>

</head>

Elles encapsulent des informations telles que le titre de la page, la description de la page, les mots-clé, l’encodage utilisé, la langue, la favicon, etc.

On y trouve aussi certains appels aux autres « couches » de la page : feuille de style, script Javascript, etc.

• la section visible par le navigateur

<body>

</body>

C’est dans cette section que ce trouve tout ce qui peut être vu/lu par l’internaute ; tout ce qui s’adresse à lui.

Le doctype

Le doctype fait partie des éléments obligatoires sur une page HTML. Il indique quelle est la « grammaire » utilisée : la version de (X)HTML et le lien vers la grammaire en question, sur le site du W3C. Il se situe donc juste avant la balise qui indique le début de HTML.

Par exemple, de Doctype pour indiquer qu’on utilise du XHTML 1.0 Strict est :

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>

Initiation au HTML – Plan de l’article complet

• Initiation au HTML (1/5)
• HTML et Internet (Initiation au HTML 2/5)
• Le langage HTML (Initiation au HTML 3/5)
• Pages statiques et pages dynamiques (Initiation au HTML – Annexe I)
• Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)
• Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)
• Le W3C (Initiation au HTML – Annexe III)
• Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)
• La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)

Initiation au HTML – Plan de l’article complet

• Initiation au HTML (1/5)
• HTML et Internet (Initiation au HTML 2/5)
• Le langage HTML (Initiation au HTML 3/5)
• Pages statiques et pages dynamiques (Initiation au HTML – Annexe I)
• Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)
• Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)
• Le W3C (Initiation au HTML – Annexe III)
• Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)
• La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)