MS TechDays 2012

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 ?

Ma petite pêche du 28/11/08

Voici, via Blogmarks, le ou les derniers favoris que j’ai recueillis.

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

La mode se démode, le <style> jamais – Daniel Glazman

Définitivement, je n’aime pas les conférences de Daniel Glazman ! …Ben oui, quoi ! c’est frustrant toutes ces choses qui vont arriver, tous ces nouveaux éléments, enthousiasmants et parfois très attendus qui … qui vont arriver ! 😀
Bon, bien sûr, je les aime autant qu’elles me mettent dans un état d’impatience et je sors d’une conférence de Daniel Glazman, telle que celle-ci, emballée et en aimant encore plus mes chers CSS !

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).
Il paraît qu'il est de bon ton de mettre un canard...
Il paraît qu'il est de bon ton de mettre un canard...

Ma petite pêche du 18/11/08

Voici, via Blogmarks, le ou les derniers favoris que j’ai recueillis.

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

Ma petite pêche du 08/11/2008

Voici, via Blogmarks, le ou les derniers favoris que j’ai recueillis.

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

Ma petite pêche du 03/11/08

Voici, via Blogmarks, le ou les derniers favoris que j’ai recueillis.

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

Le langage HTML (Initiation au HTML 3/5)

HTML et les autres éléments d’une page

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.

A gauche, le contenu uniquement (HTML) – à droite, le même contenu mais avec la couche de mise en forme (CSS).
A gauche, le contenu uniquement (HTML) – à droite, le même contenu mais avec la couche de mise en forme (CSS).

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 :
&lt;p&gt;Cette balise indique un paragraphe.&lt/p&gt;

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.

Aperçu du code de la même section de page
Aperçu du code de la même section de page

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

Quiz pour geeks !

Petits quiz sur mingle (devenu OnePlusYou). Je me suis bien amusée, même si je ne cache pas que je suis un peu déçue par mes scores… Bon, bien sûr, je n’étais pas tout à fait prête, j’étais fatiguée, il y avait du bruit, la pièce était sombre, la chaise n’était pas confortable… Tout ça, quoi !

La spécificité en CSS

Introduction

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.