Archive for the ‘tutorial’ 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.

Publicités

Truc Accessibilité #3 – se séparer de la souris

7 août 2007

Afin de rendre vos pages accessibles aux non-voyants ainsi qu’à tous ceux qui ne peuvent utiliser une souris, n’oubliez pas de verifier que:

  • Chaque élément qui utilise un attribut de type onmouseover doit être surchargé d’un attribut onfocus, et leur evenement associé doit déclencher une action similaire.
  • Chaque élément qui utilise un attribut de type onmouseout doit être surchargé d’un attribut onblur, et leur evenement associé doit déclencher une action similaire.

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.

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

Truc CSS #9 – réaliser de bô tableaux

27 mars 2007

J’avoue, je ne me suis pas foulé pour le titre mais le contenu en vaux la peine, jugez plutôt:

Si le même principe que le faaaameux Zen Garden, je vous propose aujourd’hui d’aller piquer du code sur le site CSS Table Gallery qui nous propose une gallerie de styles CSS divers et variés de mise en page ce qui releve toujours une gageure, j’ai nommé les tableaux. Je vous ai mis l’adresse sur un style qui me plait, ca vous dit quelque chose 😉

Truc CSS #8 – standardisez vos formulaires

26 mars 2007

Il n’y a rien de plus difficile à mettre en page qu’un formulaire. Les objectifs sont en effet multiples et souvent contradictoires: attractif, fonctionnel, utilisable, robuste … (rangez dans l’ordre de priorité de votre projet). Pour vous aidez dans cette quête, le succès passe par le bon usage d’HTML bien formé, des CSS et du Javascript qui doit rester d’un usage optionnel sur vos formulaires.

Un excellent exemple d’implémentation de ces principes nous est présenté sur Uni-Form, savant mélange d’HTML bien formé, de CSS et de Javascript. Vous pouvez même en telecharger le code.

Guide de developpement mobile gratuit.

21 mars 2007

blueflavor.com nous offre gracieusement (et en pdf) un guide de développement d’applications pour mobile (comprenez telephones portables). Il est vrai que certaines contraintes doivent absolument être prises en compte si vous voulez développer un application utilisable sur mobile. Alors, a quand votre .mobi ?

MàJ: J’en profite pour vous donner le lien vers une librairie de pattern pour mobiles: Mobile User Interface Design Patterns

AJAX ? c’est facile ! Je vous explique …

19 mars 2007

Jarry Maugans nous a pondu un petit tutorial de +/- 1 page pour nous expliquer comment mettre de l’AJAX sur notre site sans lire pleins bouquins …

En 3 etapes simples :

  1. Etape 1: Créer la partie intelligente du côté serveur qui va executer le requete (vous pouvez aussi la faire en ColdFusion, c’est plus facile 😉
  2. Etape 2: Créer le formulaire HTML
  3. Etape 3: connecter les 2 parties à l’aide d’un petit fichier Javascript qui s’occupera de la connection entre le client et le serveur.

Une indigestion de references

13 mars 2007

Pour ceux qui n’ont pas peur d’une indigestion, allez visiter le Web Design Reference Site de l’Université du Minnesota. On y trouve tout ce qui se réfère au web design et en grande quantité.

Perso, c’est le genre de reference que je met dans mes signets mais que je ne vais jamais consulter, il y en a trop !