Bon, si vous êtes aux Microsoft TechDays la semaine prochaine, faites-moi signe : j’y serai aussi.

J’ai eu du mal à me faire mon programme : il y avait parfois plusieurs conférences en même temps qui m’intéressait.

Je suis à peu près sûre d’aller voir :

• Des conférences autour de HTML5 et CSS3 (celle de Raphaël Goetter ? celle de David Rousset ?) parce que depuis que je ne suis plus intégratrice, il faut bien dire ce qui est, je ne suis pas complétement à jour !
• Au moins une conférence sur « METRO« , l’interface que l’on retrouve sur Windows Mobile mais aussi sur ma Kinect, sur les sites MS, etc.
  Je l’ai découverte sur ma Kinect*, donc, et je l’ai trouvée plutôt agréable, simple et intuitive.
  * Je vous ai dit que j’ai eu une Kinect à Noël ?
• Une conférence sur l’expérience utilisateur qui a l’air de tout reprendre (en une heure !)
• Au moins une session où sera présentée une application développée par ma nouvelle boîte avec plein de HTML5 et de CSS3 dedans.
• Et une conférence sur l’accessibilité de HTML5, par Aurélien Levy + le retour d’expérience de Thibault Lanssade sur la prise de conscience autour de l’accessibilité par une agence web …ben la mienne

Voilà. Je ne sais pas si j’arriverais à tout voir car, d’expérience, c’est bruyant et épuisant et il y a toujours un moment où on (se) laisse simplement tomber.

Alors ? qui j’y verrai ?

• 

  POMPAGE – Emails HTML – Dompter la bête

  Tags du favori : email cebdev

• 

  Squidfingers / Patterns

  Tags du favori : motif outils design

• 

  Vérification du contraste des couleurs – Outils – Britoweb

  Tags du favori : outils contraste couleur accessibilité

• 

  A List Apart: Articles: A More Useful 404

  Tags du favori : 404 cebdev

• 

  Tous les gabarits — Gabarits HTML-CSS

  Gabarits sur Alsacréations : « Vous pouvez utiliser ces gabarits comme base de vos mises en pages, ou tout simplement étudier leur construction pour progresser en HTML et CSS.  »

  Tags du favori : gabarit css xhtml html

Synchronisation automatique et quotidienne via Blogmarks, outil de gestion de favoris en ligne.

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).

• 

  HTML Character Entities Cheat Sheet – Cheat Sheets – Added Bytes

  Antisèche à imprimer (ou non) pour les entités caractères

  Tags du favori : cheat sheet html caractères spéciaux

• 

  Microformats Cheat Sheet – Cheat Sheets – Added Bytes

  Antisèche à imprimer (ou non) pour les microformats

  Tags du favori : cheat sheet microformat

• 

  HTML Cheat Sheet – Cheat Sheets – Added Bytes

  Antisèche à imprimer (ou non) pour le HTML

  Tags du favori : cheat sheet html

• 

  CSS Cheat Sheet (V2) – Cheat Sheets – Added Bytes

  Antisèche à imprimer (ou non) pour les feuilles de style

  Tags du favori : cheat sheet css

• 

  Regular Expressions Cheat Sheet (V2) – Cheat Sheets – Added Bytes

  Antisèche à imprimer (ou non) pour les expressions régulières

  Tags du favori : cheat sheet expression régulière

Synchronisation automatique et quotidienne via Blogmarks, outil de gestion de favoris en ligne.

• 

  Web Design WordPress function list

  Liste des marqueurs WordPress

  Tags du favori : wordpress

• 

  CSS Balanced Columns V3 (en)

  Des colonnes de même hauteur via JavaScript. Attention à styler aussi la version sans JavaScript

  Tags du favori : css javascript colonne gabarit

• 

  La recette pour un menu déroulant accessible – partie 1 –

  Le menu déroulant sur plusieurs niveaux, avec ou sans JavaScript, accessible et …valide !

  (depuis Accessibilité numérique, CSS et standards du web – Fairytells)

  Tags du favori : css menu accessibilité

Synchronisation automatique et quotidienne via Blogmarks, outil de gestion de favoris en ligne.

• 

  CSS — Structurer, documenter et maintenir

  Tags du favori : css bonnes pratiques guide

• 

  Appel à contribution «Guide stylistique pour HTML et CSS»

  Projet pour la création d’un guide stylistique HTML et CSS. Un cahier des charges de bonnes pratiques d’intégration.

  Tags du favori : cahier des chages guide xhtml css bonnes pratiques

Synchronisation automatique et quotidienne via Blogmarks, outil de gestion de favoris en ligne.

• 

  Eric’s Archived Thoughts: Reset Reloaded

  Le « reset » d’Eric Meyer

  Tags du favori : css

Synchronisation automatique et quotidienne via Blogmarks, outil de gestion de favoris en ligne.

La séparation des différents éléments

Une page web est un ensemble de « couches » d’éléments qui, combinés ensemble, font la totalité de la page : texte, design, fonctionnalités, interactivité, etc.
Chacun de ses aspects est traité indépendamment les uns des autres par différents langages.

La structure de l’information est gérée par le HTML.

La mise en forme (couleurs, typographies, emplacements des éléments, etc.) est traitée par les feuilles de style (CSS).

Certains comportements destinés à amener une « couche de confort » (ouverture dans une nouvelle fenêtre, apparition/disparition de texte, etc) sont traiter par le Javascript.

Enfin, dans le cas de traitement de données importantes (simulation en ligne, formulaire de demande, etc.), on utilise un langage de développement ; le PHP par exemple.

Le rôle du HTML : structurer le contenu

Le langage HTML est un langage de structuration : cela veut dire qu’il indique pour chaque information donnée dans la page, le type d’information dont il s’agit : paragraphe, lien, image, citation, adresse, etc.

Le code

Les outils

Les outils du développeur sont :

• un éditeur. Cela peut être un simple éditeur de texte ou un logiciel type « WYSIWYG » : What You See Is What You Get.
• dans l’idéal, des plateformes de test. Pour pouvoir tester ses pages dans différentes configuration
• dans la plupart des cas, un logiciel FTP. Pour envoyer les fichiers créés à disposition sur le serveur, pour les mettre « en ligne ».

Un langage de balises

Le HTML est composé avec des balises. Les balises sont des éléments encadrant le contenu. Elles indiquent le type d’information donnée (titre, paragraphe, image, liste, etc). Elles permettent de structurer la page et d’indiquer le type d’information.

Ex :
<p>Cette balise indique un paragraphe.&lt/p>

Ce qui donne, dans la page :
Cette balise indique un paragraphe.

Une balise HTML est un élément de la grammaire HTML (de la « langue » HTML). La balise marche par paire : une balise ouvrante, une balise fermante. Entre les deux balises, se place le contenu.

Les attributs

Une balise HTML indique donc le type d’information qu’elle délivre. La balise peut ensuite être « paramétrée » par des éléments supplémentaires : les attributs.

Par exemple, pour indiquer un lien, on utilise la balise <a>. Mais signaler que le texte qui est encapsuler dans la balise <a> est un lien ne suffit pas. D’autres renseignements sont nécéssaires, comme par exemple la cible du lien. On utilise alors les attributs de la balises : « href » pour la destination du lien, « title » pour le titre du lien (info-bulle).

Ex :

&lt;a href= »http://www.nissone.com/ » title= »Conception de sites web »&gt;Nissone.com&lt;/a&gt;

Ce qui donne dans la page :

Nissone.com

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)

Entre les deux déclarations ci-dessous, à votre avis, laquelle sera appliquée sur l’élément de liste <li> ?

.page .menu li {color: red;}
body div.menu ul li {color: blue;}

Si les deux déclarations désignent bien le même élément, l’une est prioritaire sur l’autre et du style de la première déclaration dont va hériter l’élément de liste. La couleur bleue de la deuxième déclaration ne sera pas appliquée.
Si la première déclaration (.page .menu li) prend le pas sur la deuxième (body div.menu ul li) c’est que le calcul de spécificité lui donne plus d’importance.

La spécificité

La spécificité d’une déclaration est un calcul qui indique le « poids » d’une déclaration.
Ce « poids » est alors utilisé pour comparer les différentes déclarations entre-elles et savoir laquelle est prioritaire sur l’autre, laquelle a le plus de « poids ».

Le calcul de la spécificité

Le calcul se fait :

• en fonction de 3 types d’éléments qui composent une déclaration (ID, class, élément balise)
• sur 3 chiffres concaténés

Pour connaitre le premier des trois chiffres concaténés, il faut compter le nombre d’ID dans la déclaration (a).
Pour le deuxième chiffre, il faut compter le nombre de class (b).
Enfin, le troisième chiffre est donné par le nombre d’élément balise (c).

Le poids d’une déclaration est le nombre donné par ces trois résultats mis côte à côte (abc).

Dans notre exemple :

• .page .menu li {color: red;}
  • Nombre d’ID : 0 (donc a=0)
  • Nombre de class : 2 (donc b=2)
  • Nombre d’élément : 1 (donc C=1)

  Le poids de cette déclaration est donc de 21 (021).

• body div.menu ul li {color: blue;}
  • Nombre d’ID : 0 (donc a=0)
  • Nombre de class : 1 (donc b=1)
  • Nombre d’élément : 4 (donc C=4)

  Le poids de cette déclaration est donc de 14 (014).

La première déclaration est donc bien prioritaire sur la deuxième.

Quelques exemples :

• #contenu #contenu-principal La spécificité est de 200 (a=2 ; b=0 ; c=0)
• div.informations #mentions p.important span La spécificité est de 123 (a=1 ; b=2 ; c=3)

Et comme une image (ludique) vaut toujours mieux qu’un long discours : Specificity Wars

Conclusion

Cela nous permet de comprendre pourquoi, dans certains cas « inexplicable » notre déclaration ne s’applique pas alors qu’elle ne contient aucune erreur. L’élément cible hérite en fait d’une déclaration ayant une spécificité plus forte.
Parfois, ces problèmes peuvent simplement se régler en « surchargeant » la déclaration afin de lui donner plus de poids. Attention néanmoins à ne pas avoir le réflexe de trop charger ses déclarations (pour éviter ce type de désagrément) au point d’avoir des déclarations très fortes et peu souples.