css 4 design » Tableaux

Revue de web de la semaine #2 (WordPress, développement web et miscellanées…)

Bruno Bichet — Wed, 21 May 2008 19:41:17 +0000

Pour cette deuxième revue de web de la semaine, je vous propose : quelques plugins et astuces pour mieux utiliser WordPress ; ce qui a retenu mon attention en matière de développement web en général et quelques liens utiles ou simplement amusant glanés sur la vaste toile pour finir avec la banane ;)

WordPressing

Générateur de shortcode — Si WordPress 2.5 fournit une API pour faciliter la création de raccourcis au sein d’un billet pour insérer un contenu récurrent comme une signature, une image, ou carrément afficher une boucle WordPress (the loop) personnalisée, K-ny, quant à lui, nous propose, en plus de son générateur de shortcodes, des tutoriels sur la création de shortcodes avancés. Voir aussi la série des trois tutoriels sur les Shortcodes de burningHat. Comme vous pouvez le voir sur le visuel, j’en ai profité pour créer un petit shortcode bien pratique pour clearer les float à l’aide d’un retour à la ligne br et d’une déclaration CSS disponible dans ce billet.[br]
ImageManager — Ce plugin compatible avec WordPress 2.5 fournit une interface pour uploader des images sur votre serveur et naviger parmis elles. L’éditeur intégré autorise quelques manipulations de base sur les images comme la découpe, la rotation, l’inversion ou la mise à l’échelle. Parmis les petits détails bien vus, il est possible d’ajouter facilement une classe CSS ou un style en ligne sur les photos.[br]
Keywords Autolink – Ce plugin pour WordPress 2.5 codé par k-ny de Webinventif vous permet de définir un mot-clé ou un groupe de mots clés ainsi que l’URL ou le groupe d’URL vers laquelle il doit pointer ! Et tout celà sans devoir éditer vos billets car la fonction détecte automatiquement les mots-clés dans vos articles et les transforme en liens !
WordPress 2.6 et la révision des billets — A peine la 2.5 est-elle sortie qu’il faut déjà se tenir au courant des évolutions de la prochaine version de WordPress. Heureusement que burningHat veille pour nous ;)
Thème Mimbo en détail — Très bon article paru sur Exutoire sur les paramétrages avancées du Thème Mimbo pour WordPress.
Plugin Pagination – Envie de changer des billets précédents et billets suivants pour afficher en plus le nombre de pages restant à parcourir sur votre blog WordPress ? Ce plugin est fait pour vous. La documentation aussi ;) Ne semble pas fonctionner avec la page de recherche (search.php) ou d’archives : le nombre de pages affichées reste identique quelque soit le nombre de résultat.

Développement web

25 éditeurs WYSIWYG — Revue des principaux outils de création de sites web. Prenez aussi le temps de jeter un oeil sur les 30 éditeurs de code sources passés au crible ! Inspirez-vous des techniques proposées pour Améliorer la lisibilité des CSS avec ce bel article sur les différentes manière d’organiser nos feuilles de styles CSS… De toute façon, je suis sûr que vous ne ratez aucun des billets publiés sur Smashing Magazine ;)[br]
Blog déco design — le blog d’Henri Labarre consacré au design a changé d’adresse et n’est plus un sous-domaine de 2803.com. Mettez à jour vos blogroll ![br]
kotatsu — Générateur de tableaux HTML en ligne avec la possibilité d’ajouter des lignes et des colonnes ainsi que des classes CSS.[br]
Performances Web — Benchmark sur le chargement des feuilles de style avec la balise link ou la règle @import
Des variables en CSS — Dans un avenir plus ou moins lointain, les variables pourrait faire leur apparition dans une future version.
jquery.pngFix.js — Plugin jQuery pour gérer la transparence des images au format PNG 24 bits. Voir aussi iepngfix ou le projet PNGHack de Pôle-Web.

Miscellannées

Vatchvideo — Téléchargez les vidéos à partir de YouTube ! Il est même possible de spécifier le format de sortie comme via Xavier83.
Re-mark — Lorsqu’on importe des bookmarks sur delicious, ils sont privés. Si comme moi vous êtes amené à rendre public plus de 2400 liens, vous serez content d’utiliser ce service. Merci Twitter, merci Gilles ! L’outil n’est pas des plus intuitif : pour rendre vos liens public, une fois que vous avez activé l’option idoine dans re-mark et copié le code, loguez-vous sur votre delicious et affichez 100 liens par page (pour allez plus vite), puis collez le code sur chaque page l’opération s’effectue en direct live.
Albert Einstein vs Marylin Monroe — pour finir cette liste un peu ennuyeuse, voici une Illusion d’optique assez étonnante trouvée sur Koreus ;)

Articles sur le même sujet

table vs div : dis papa, racontes-moi encore les tableaux…

Bruno Bichet — Wed, 10 Oct 2007 03:10:37 +0000

La mise en page des sites web avec les tableaux n’a pas que des inconvénients : ça permet d’obtenir une structure à l’épreuve des balles très rapidement. La mise en page en div (5 légumes par jour, on vous dit…) n’a pas que des défauts : grâce aux CSS, il sera possible de moduler l’agencement des différentes parties de votre design. Bien sûr, tout n’est pas toujours aussi simple : les éléments constitutifs d’un tableau ne sont pas allergiques aux CSS, tandis qu’une structure en div mal conçue au départ ne sera pas vraiment modulable, même avec des CSS.

Il m’est arrivé dernièrement d’être « obligé » d’utiliser des tableaux pour faire une grille de mise en page à l’intérieur d’une structure en div pour les raisons suivantes (la première raison étant suffisante) :

l’addition de valeurs exprimées en pourcentage ne permettait pas un alignement correcte avec les div, alors que les mêmes valeurs exprimées sur des cellules de tableaux donnaient le résultat attendu.
le code CSS pour arriver à un résultat approximatif avec les div était largement plus verbeux que celui utilisé avec les tableaux. Sans parler du code HTML lui-même !
cette structure devait pouvoir se décliner rapidement en différents templates. Autant dire que vu le temps passé à gérer les problèmes de float, d’overflow et de clear avec les div, l’utilisation des tableaux a été une bouffée d’air frais… Il suffit de s’en sortir avec les colspan et rowspan and the cat’s in the bag!

Je tiens à préciser que je n’ai pas utilisé de tableaux pour autre chose qu’organiser des données tabulaires depuis 2001 et que je n’hésiterais pas à dénoncer mes amis si je les prenait la main dans le sac ;)

Si je vous raconte tout ça, c’est que bien que l’utilisation d’un marquage sémantique adapté est à privilégier, il arrive parfois que certaines contraintes (de délai, d’organisation ou de compétences dans la chaine de production, etc.) font pencher la balance du côté obscur et je trouve normal de confesser les entorses aux bonnes pratiques que l’on peut faire dans le cadre professionnel.

Tiens, en guise d’auto-flagellation je me connecterai une fois par jour sur #openweb, ça m’apprendra ;)

Articles sur le même sujet

5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs

Bruno Bichet — Tue, 14 Aug 2007 02:51:45 +0000

Vous n’utilisez pas de styles CSS pour votre page web ? Ce n’est pas grave : les navigateurs le font pour vous. Ils utilisent chacun leur feuille de style par défaut pour obtenir un rendu visuel minimal. C’est pourquoi les tableaux possèdent des bordures, et les paragraphes des espaces avant et après. Le problème ? Si des balises comme strong ou em sont traitées de la même manière par les agents utilisateurs, l’immense majorité présente des différences plus ou moins importantes. Ce fameux manque de « consistance » décrié par les webdesigners anglo-saxons concerne principalement les propriétés margin et padding. Avec une pensée particulière pour le retrait des listes ol et ul : si IE applique bien le margin-left: 40px préconisé, Firefox utilise quant à lui un équivalent du padding-left: 40px pour le même rendu. Dans ces conditions, il est tentant de vouloir mettre tous ces agents utilisateurs au garde-à-vous…

Dans leur grande sagesse les concepteurs du HTML ont fourni un exemple de feuille de style pour uniformiser le rendu visuel des pages web ; dans leur précipitation à sortir leur produit avant la concurrence, les concepteurs des navigateurs ont fait ce qu’ils ont voulu. Enfin, il est aussi possible que les spécifications – parfois sybillines – du monde joyeux des recommandations puissent être interprétées de diverses manières…

Prudence est mère de sûreté…

Il ne faut pas confondre ces différences de rendu entre les navigateurs avec les nombreux bugs qui affectent particulièrement IE comme le calcul de la largeur d’une boite. Gardez également à l’esprit que l’on peut très bien travailler avec ces valeurs par défaut au lieu de les éliminer, et que faire reset, ce n’est pas toujours rigolo : il s’agit d’une technique à manier avec précaution.

D’autant plus que la majorité des problèmes rencontrés est souvent liée à la transmission de l’héritage entre parents et enfants. Faire table rase, d’accord, encore faut-il savoir de quoi ^_^ Une autre notion indispensable est d’avoir une idée des possibilités d’imbrication des balises. Voici un récapitulatif de qui contient quoi, ainsi qu’une référence complète sur les attributs et relations de parenté des éléments XHTML 1.1.

La Cascade (le C de CSS) est une autre source de confusion. Openweb a consacré un article intéressant qui explique comment sont « priorisés » les différents styles qui peuvent s’appliquer à un élément.

Pour faire simple : si vous débutez l’apprentissage des CSS, je vous déconseille fortement de mettre un reset dans votre moteur, même s’il semble ronronner affectueusement au début. Nul doute que dès que vous aurez le dos tourné… Enfin maintenant si vous insistez, je vous ai préparé un mini dossier sur le sujet :

Remise à zéro du margin et du padding avec le sélecteur universel * »

Articles sur le même sujet

Votre blog sur un téléphone portable, really ready ?

Bruno Bichet — Sat, 21 Apr 2007 03:41:07 +0000

Des fois c’est facile, des fois… pas facile. Pourtant, un site web ou un blog devraient être accessibles depuis n’importe quel périphérique, y compris un téléphone portable. Après la lecture du billet de Nico, j’ai testé mon blog sur le site .mobi qui a évalué ma page d’accueil sur une échelle de 1 à 5 en fonction de sa lisibilité sur un petit écran, de sa taille et de l’estimation de sa vitesse (ou coût) de chargement. Le tout en une trentaine de tests. Strict is the way…

Comme vous pouvez le constater, avec une note de 2 sur 5, mon blog n’est pas mobile ready. A cause notamment du marquage XHTML non valide au regard des possibilités de traitement des navigateurs embarqués. Au moins ais-je échappé à la shame frame ^^

Le résumé des tests est sans appel, mais plein d’enseignements : un lien sur chaque élément pris en compte détaille les raisons de l’échec. Sans oublier les avertissements ou les commentaires sur les spécificités non bloquantes à prendre tout de même en considération pour une meilleure accessibilité de mon contenu sur ces petits appareils.

Résultats des tests

Ce blog échoue donc lamentablement à sept d’entre eux :

La page n’est pas conforme à XHTML-MP (wap 2.0, formulation de XHTML à l’usage des périphériques mobiles), ni même à un autre langage comme :
- i-mode (cHTML)
- wap 1.0 (WML)
Le marquage XHTML n’est de toute façon pas valide ! C’est vrai que j’ais laissé la DTD Strict Made in Dotclear alors que je devrais mettre une DTD Transitionnal. (c’est fait depuis la capture),
Taille des images. Au moins une image n’a pas de hauteur ou de largeur spécifiée,
Mesures. Des dimensions spécifiées en pixel ou de manière absolue sont détectées dans la feuille de style,
Feuilles de style. Mon utilisation des feuilles de style n’est pas en accord avec les bonnes pratiques. L’usage des styles en ligne en est principalement la cause. Mais aussi l’utilisation des balises sup ou del mal prises en charge par les navigateurs mobiles,
La taille de la page (en incluant les images et les feuilles de styles) est trop importante : si le code HTML se stabilise à 68 ko, la page complète pèse dans les 277 ko… Depuis, j’ai remplacé Prototype et script.aculo.us par la Splash Box de Xuxu pour l’effet lightbox, et j’ai installé jQuery en version compressée pour le reste : j’ai économisé plus de 50 ko,
La page est liée à trop de ressources externes, (images, feuilles de styles et autres objets) ce qui ajoute du temps au chargement de la page.

Avertissements et commentaires

Grâce à ces derniers, j’en ai appris davantage sur les éléments à prendre en compte lorsqu’on veut cibler les navigateurs embarqués dans les appareils mobiles. Répétez avec moi :

J’évite de concevoir mes pages web avec des propriétés display ou float,
Je garde sur un coin du bureau un post-it pour me souvenir que la plupart des périphériques mobiles ne supportent pas Javascript,
Je mets le focus sur les champs input pour faciliter la saisie, et je fournis des valeurs sélectionnées par défaut,De toutes manières, étant données les limitations typiques des formulaires sur les appareils mobiles, une interface utilisateur devrait autant que possible en minimiser l’usage, Lorsque c’est possible, je privilégie les checkbox, radio, et autres button qui ne nécessitent pas de saisie fastidieuse,
Je me retiens d’utiliser des tableaux qui sont par nature difficiles à rendre sur ces petits appareils,
J’utilise les accesskeys sur tous les liens,
Pour finir, je place un fichier sitemap.gz à la racine du site. Chez moi il s’appelle sitemap.xml… je changerais le nom à l’occasion.

Résumé

Pour être mobile ready un site web devrait donc :

Posséder un code XHTML non seulement valide, mais conforme au XHTML-MP, ou en tout cas débarrassé de certaines balises comme sup, del, ou table,
Spécifier les dimensions des images,
Abandonner les unités de mesures fixes (sauf peut-être pour les images) au profit des unités relatives comme em, ex ou %,
Éviter les styles CSS en ligne comme style= »border: 0; » par exemple,
Limiter (voire supprimer) les liens vers les ressources externes comme les scripts, ou les balises object,
Etre léger, léger…

Malgré le haut-débit et la puissance des processeurs, l’allègement des pages web est toujours d’actualité

Le poids des mots, le choc des photos

Faire un site adapté aux périphériques mobiles ne se limite pas à modifier quelques balises et à en supprimer d’autres. Car même en ne visant que les navigateurs compatibles WAP 2.0, le poids total des pages handicape la plupart des blogs et des sites web.

Toutefois, rien n’est gravé dans le marbre et il est toujours possible d’alléger la page. A cet égard, le choix d’une librairie Javascript légère et évolutive est essentiel. Nous faisons trop souvent comme si le chargement des éléments tels que les CSS ou Javascript dans le cache du navigateur à la première requête, nous autorisait à être léger sur l’accessibilité et à avoir la main lourde sur les effets graphiques ou les animations.

Suite à ces tests, je me suis rappelé que chaque jour, près de 75% des visiteurs venaient ici pour la première fois, et qu’une partie non négligeable, repartait après la première page vue. Ces visiteurs-là n’ont pas le temps d’apprécier les bienfaits de la mise en cache par le navigateur ! Reste l’étude de la mise en cache via PHP qui pourrait — avec compression gzip — faire l’objet d’un autre billet.

L’avenir appartiendrait-il aux flux Atom et RSS…

On peut envisager de détecter le navigateur et décider de charger ou non ces ressources, mais cette approche ne règle pas les autres particularités des navigateurs embarqués concernant notamment les propriétés float. Et encore je ne parle même pas des unités de mesure trop souvent définies en pixels.

Pour moi, la solution se trouve du côté des flux Atom ou RSS qui vont à l’essentiel du contenu. A cet égard, j’ai trouvé I Feed You qui permet de convertir un fil RSS/Atom au format Wap et i-mode pour suivre l’actualité d’un site ou un blog très simplement depuis un mobile.

…avec du semacode dedans ?

C’est déjà pas mal. Mais sachez que nous pouvons épargner cette fastidieuse saisie de l’adresse du flux en question en utilisant les tags visuels de semacode.

Alors n’hésitez plus, et créez un code barre pour le flux RSS/Atom de votre blog. Il sera ainsi facilement accessible aux utilisateurs d’un mobile avec appareil photo.

PS : Si vous connaissez un bon lecteur de flux pour téléphone portable, ou d’autres solutions, c’est le moment de dégainer :)

Stay tuned and mind the gap!

Articles sur le même sujet

Exercice de style CSS et HTML : table vs div

Bruno Bichet — Thu, 26 Oct 2006 02:12:17 +0000

L’utilisation des CSS à la place des tableaux pour concevoir une page web fait sa place dans la boite à outils du webdesigner. Or, s’il est relativement aisé de concevoir un site «full CSS» from scratch, c’est parfois un peu plus tricky de partir d’un site existant et d’en débarrasser la table. Après la lecture de ce billet, vous saurez comment j’ai divisé par deux le poids d’une page, rendu au code HTML son teint de rose, et facilité la digestion des navigateurs… tout en conservant 99% du look d’origine…

La page à transformer provient d’un template SPIP dont l’étude du code source nous fait remonter assez loin dans le temps pour nous dévoiler les joies de la géologie htmlienne ;) Alain, l’éditeur du site sivom-nautique, m’a demandé de jeter un œil sur la page d’accueil et de moderniser le gabarit HTML.

Note : L’intégration du gabarit live n’étant pas prévue dans l’immédiat, les liens vers «l’original» mènent, dans la suite de cet article, vers une copie de la page qui peut présenter des différences par rapport à celle qui est en ligne.

La structure de la page en question s’appuie largement sur des tableaux, tandis que des balises div encadrent les titres et d’autres portions de texte. Par exemple la colonne de gauche est composée de

Dernières images

…On voit ici que les styles CSS sont utilisés en ligne avec l’attribut style, alors qu’il existe une feuille de style externe perso.css. On remarquera que le titre Dernières images se trouve dans un container div dont la sémantique se rapproche dangereusement de zéro ;)

Dis papa, racontes-moi encore les tableaux ! »

Articles sur le même sujet

CSS 3 column layout – the holy grail!?

Bruno Bichet — Sat, 19 Aug 2006 06:21:00 +0000

En sortant surfer ce matin, j’ai trouvé cet article sur l’utilisation – ou non – des hacks css pour vos design web. Mais aussi, et plus malheureusement, sur le retour aux TABLE pour la mise en forme des pages. Tant pis, c’aurait pu être un très bon article. Ca reste néanmoins un point de vue intéressant, qui rejoint d’une certaine manière, l’excellent W3C go home ! d’Arno.

Articles sur le même sujet

Trucs et astuces CSS

Bruno Bichet — Wed, 21 Jun 2006 00:30:03 +0000

Cette page regroupe des trucs & astuces CSS que j’ajoute régulièrement : bookmarkez, blogmarker, favorisez, bref faites tourner… Si vous cherchez plutôt des exemples de design CSS plus complets, les billets présents dans cette page consacrée au design web avec CSS devrait vous intéresser ;)

Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.

La feuille blanche

Document XHTML pour partir de bonnes bases :


    
        
            
            
            Un titre explicite contenant les mots-clés de la page

Consultez cet article d’OpenWeb pour mieux connaitre les différentes DTD et les gabarits XHTML prêt à l’emploi.

J’ajoute souvent un Reset CSS au choix pour débuter la feuille de style :

Lire l’indispensable article de Blog & Blues pour plus d’informations sur la diminution de la taille par défaut de la police et l’utilisation de l’unité de mesure em

Quelques informations supplémentaires au sujet de la remise à zéro des margin et padding pour tous les éléments sur leftjustified.net.

On a toujours besoin d’un peu d’interactivité sur nos pages web. La bibliothèque Javascript jQuery est idéal : empreinte légère, et facilité d’utilisation, plugins nombreux, communauté réactive. Lire cette introduction à jQuery et cette liste de 240 plugins pour jQuery.

Raccourci pratique pour les bordures CSS

Ces deux propriétés CSS permettent de gérer l’épaisseur, le style, la couleur d’une bordure ainsi que les côtés où elle apparait.

.bordure {
    border: 1px solid #DF001A;
    border-width: 0 0 3px 0;
}

Cet exemple affiche une bordure de 3 pixels au bas de l’élément dont la classe est bordure. La valeur de 1px de la première déclaration CSS est surchargée par la valeur de la deuxième ligne.

Pour afficher une bordure de 1 pixel en haut et 3 pixels à gauche, il suffit de modifier la deuxième ligne comme ceci : border-width: 1px 0 0 3px;

Transparence

div.transparence {
    filter:alpha(opacity=50);
    -moz-opacity:  0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

La gestion de l’opacité est un chemin semé d’embûches. Heureusement, il existe des chemins de traverse pour pallier le manque de support des propriété standards par les navigateurs.

J’ai trouvé les 3 premières lignes chez ac-graphic.net et la quatrième chez babylon-design. La première ligne est destinée à IE, la deuxième à Firefox, la troisième est un standard en CSS3 ! et la dernière à Konqueror.

P.S. : Pour une compatibilité maximale, il est conseillé de mettre les 4 lignes ensemble.

Commentaires conditionnels d’IE vs hacks CSS

Lire le billet consacré aux commentaires conditionnels.

Barre de défilement et décalage d’une page centrée

html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
}

La deuxième ligne est une propriété spécifique à Mozilla. Solution trouvée sur http://web.covertprestige.info/test/…

Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur

#page {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30em;
    height: 30em;
    margin: -15em 0 0 -15em;
    border: 1px solid #000;
    text-align: left;
    background-color: #990;
}

Centrer un bloc horizontalement dans la fenêtre du navigateur

#page {
    position: relative; /* optionel mais utile par la suite /
    width: 80%;
    margin: 0 auto;
    text-align: left; / optionel : reliquat d'un bug sous ie5.5 */
}

Modifier les caractéristiques des liens avec LoVe F HAte

a          { color: #CAB3A5; }
a:link     { color: #CAB3A5; }
a:visited  { color: #CAB3A5; }
a:focus    { color: #CAB3A5; }
a:hover    { color: #DB9D41; }
a:active   { color: #FFF; }