Archive for the ‘web development’ Category

Truc CSS #13 – Alleger ses commentaires dans les CSS

26 septembre 2007

Il est bien entendu recommandé de commenter son code CSS qui est loin d’être simple à lire, surtout après quelques semaines. Par contre, il y a plusieurs facons de commenter son code. L’usage de base utilise 3 lignes :

/*——————-*/
/*– Commentaire –*/
/*——————-*/

Ces 3 lignes de code contiennent autant d’information que la ligne suivante:

/*Commentaire*/

Tout aussi lisible et compréhensible, rassembler les commentaires permet de réduire la taille des fichier CSS.

Truc d’accessibilité #2 – l’ordre de tabulation

6 août 2007

L’ordre de tabulation défini l’ordre apriori logique pour naviguer de lien en lien ou de champs en champs dans les formulaires HTML. On passe d’un champ à l’autre en appuyant sur la touche … TAB (on l’aura deviné).

Verifier que cet ordre est logique, grouper l’information lorsque c’est naturel et approprié afin d’éviter les erreurs d’encodage. Spécifier si nécessaire l’ordre de tabulation au sein des éléments avec l’attribut « tabindex« .

exemple: <input id= »prenom » tabindex= »1″ type= »text » />

Truc d’accessibilité #1 – les accesskey

1 août 2007

Afin de faciliter l’accès de vos pages, prenez l’habitude d’ajouter des raccourcis clavier via la commande « accesskey » qui permet l’accès direct à certaines fonctions du système.

De manière générique, implémentez les accesskey suivantes dans toutes vos pages web:

  • Accesskey ‘1’: contenu principal
  • Accesskey ‘2’: Recherche
  • Accesskey ‘3’: barre de navigation principale

A blind person using a screen reader must experience the links one after another, which is rather inconvenient. They’ve got better things to do.
— Joe Clark

Les grilles sont chouettes

1 juin 2007

Si vous êtes un neophyte en mise en page CSS, je vous propose d’aller jeter un oeil sur les templates de grilles proposés par intensivstation. Ils ont en effet remis à jour leurs templates à l’usage des designers web. Le plus difficile maintenant: choisir celui qui vous conviendra le mieux.

Bouton ou lien d’action ?

21 mai 2007

Un nouvel article de Jakob Nielsen sur les hyperliens et les boutons qui ont des usages à l’origine bien differents:

– Les hyperliens sont utilisés pour la navigation, pour passer d’une page à un autre dans un même espace d’information.
– Les boutons sont utilisés pour des actions qui génèrent des modifications (par ex. ajouter un produit à un panier d’achat).

Il y a bien evidemment des exceptions à ces règles:

– Les boutons peuvent être utilisés pour passer d’une page à l’autre dans un processus de workflow (par ex. « continuer le shopping » ou « commander »)
– Les hyperliens peuvent être utilisés pour des actions secondaires (par ex. « Cancel »)
L’ainsi nommé « lien d’action » a le benefice de pouvoir être ecrit de manière plus longue et donc de manière plus claire pour l’utilisateur. Pour réduire la confusion, le lien doit explicitement montrer qu’il est lié à une action en commencant par un verbe à l’imperatif (par ex. « Add an item »)

Un autre avantage du lien d’action est que l’on peut ajouter un texte explicatif juste en dessous du lien. Le texte peut être présenter dans une police de caratère plus petite pour en souligner la nature secondaire. pour lire l’article en entier et en anglais.

70 Expert Ideas For Better CSS Coding

15 mai 2007

Un nouvel article compilation nous est proposé par smashingmagazine.com sur 70 trucs d’experts qui peuvent améliorer nos performances en codage CSS. Une version pdf est même promise d’ici peu …

Mon avis sur le sujet:

  • Pour le reset des CSS, j’utilise personnellement les CSS de yahoo, reset.css et font.css.
  • Pour charger vos pages web plus rapidement, evitez les @import
  • Mettez des commentaires dans vos CSS, ils commencent par /* et se terminent par */

Il ne faut jamais AU GRAND JAMAIS …

15 mai 2007

.. utiliser les ROWSPAN des vos tableaux HTML !

Cela n’engage que moi bien evidemment 😉

Truc CSS #12 – pour deboguer vos DIV

23 avril 2007

Un petit truc à utiliser lors de vos développement, ajouter à votre CSS globale:

div { border: 1px solid red; }

Ainsi, tous les div seront encadrés, ce qui aide grandement à corriger les problemes de mise en page.

Truc CSS #11 – utiliser plusieurs classes

20 avril 2007

On peut appliquer plus d’un classe sur un element. Ainsi, si on veut appliquer 2 classes sur une balise paragraphe, il suffira de l’indiquer de la manière suivante:

<p class= »classe1 classe2″>

Cela semble evident mais beaucoup de personnes l’ignorent …

Truc CSS #10 – affichez vos couleurs

30 mars 2007

CCS permet de définir les couleurs de différentes manières.

  1. La plus classique consiste à specifier les 3 valeurs, rouge, vert et bleu en hexadecimal et précedé d’un #. Exemple: « #000000 »
  2. Deuxième notation, donner les valeurs rouge, vert et bleu en decimal. Exemple: « RGB(0,0,0) »
  3. Troisième notation, donner le nom de la couleur souhaitée. Exemple: « black »

On peut également utiliser des raccourcis d’écriture quand les valeurs hexadecimales sont identiques, ainsi la notation « #0BC » est équivalente à la notation « #00BBCC ».