Je comprenais mal Git, m’emmêlais dans les notions de branches, de fork et de commit. J’ai demandé des explications à Julien. J’ai mis ça en images et avec mes mots. Je vous le partage (CC by SA), des fois que ça vous serve aussi.
Ressources (françaises) de référence pour se lancer, suivre et se perfectionner dans la conception, l’intégration, le design, etc. de sites web orientés qualité, standards, accessibilité, expérience utilisateur, etc.
Vos propres références sont les bienvenues en commentaire.
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
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 :
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).
Utiliser la balise <caption>. Voir Au tableau ! pour la création de tableaux en HTML
Résumé du tableau
Utiliser l’attribut summary
En-tête et pied de tableau
Utiliser les balises <thead>, <tfoot> et <tbody>
Résumé des en-têtes
Utiliser l’attribut abbr
Les images
Ne traiter que les images de contenu
Gérer les images illustrative et décorative via la feuille de style. Dans le cas d’une image présente dans le contenu mais n’apportant pas d’information, laisser la valeur de l’attribut alt à vide.
La barre « Web developper » est une extension du navigateur Firefox.
Très utile aux développeurs, elle permet de mettre en valeur rapidement et facilement toute une liste d’informations sur une page web.
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.
Le Word Wild Web Consortium est un regroupement de personnes et d’organisation qui, ensemble, mettent au point les normes pour le développement web : les standards du web.
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”>
XHTML a été créé pour permettre d’utiliser HTML en conformité avec un autre langage : le XML.
Les différences de syntaxe ou de structure entre XHTML et HTML sont minimes et concernent uniquement l’intégrateur.
D’un point de vue utilisateur, c’est totalement transparent.