Ressources de référence

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.

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

Articles et billets

Outil

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

Communautaire

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

Événements

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

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

Mémo rédacteur web / intégrateur HTML

Mémo rédacteur web / intégrateur HTML
Rédacteur web Intégrateur HTML
Style éditorial Faire court
Faire simple
Organisation de l’information Appliquer le principe de la pyramide inversée
Les titres Compréhensible hors-contexte
Hiérarchisés Utiliser les balises <h1> à <h6>
Contribuent à organiser la page
L’emphase Prévoir de l’emphase Utiliser les balises <strong> et <em>
Les aides à la compréhension Prévoir les abréviations Utiliser les balises <abbr> et <acronym> (voir Abréviations, sigles et acronymes : balises, attributs HTML et accessibilité
Prévoir un glossaire Utiliser les balises <dl> , <dt> et <dd>
Langue Signaler les langues et les changements de langue Utiliser l’attribut lang de la balise <html> pour la langue principale du document
Utiliser l’attribut lang dans la balise englobant un texte d’une langue différente de la langue principale.

Utiliser la balise <span> au besoin
Les liens Compréhensible hors-contexte
Un même intitulé pour des liens vers une même destination Utiliser l’attribut rel= »nofollow » pour qu’il n’y ait qu’un seul lien suivi par les moteurs de recherche
Liens dont le libellé est le même différenciés par info-bulle Utiliser l’attribut title du lien
Utiliser l’info-bulle pour des renseignements supplémentaires
Les téléchargements Indiquer les informations techniques Utiliser éventuelement l’attribut title du lien
Les règles typographiques Indiquer et imposer les règles typographiques Utiliser les espaces insécables (&nbsp;). Voir HTML Character Entities (en)
Les tableaux Titre du tableau 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.
Image-lien : indiquer la fonction du lien Utiliser l’attribut alt
Alternative courte
Alternative longue pour des images complexes Utiliser l’attribut longdesc
Les boutons Utiliser des verbes
Les formulaires Items réunis par groupes logiques Utiliser la balise <fieldset>
Titres des groupes logiques Utiliser la balise <legend>

Gabarit de tableau HTML

<table summary= » »>
<caption></caption>
<thead>
<tr>
<td>&nbsp;</td>
<th id= » » abbr= » »></th>
</tr>
</thead>
<tbody>
<tr>
<th id= » » abbr= » »></th>
<td headers= » »></td>
</tr>
</tbody>
</table>

La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)

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.

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


Initiation au HTML – Plan de l’article complet

Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)

Voir le code

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

Le W3C (Initiation au HTML – Annexe III)

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.


Initiation au HTML – Plan de l’article complet

Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)

Ouverture / fermeture

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

Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)

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.


Initiation au HTML – Plan de l’article complet