Conception de site web

Conception dans le navigateur avec HTML5 & CSS3 (amélioration progressive)

Le design dans le navigateur est une technique de Webdesign qui fait l’impasse sur la maquette Photoshop. Derrière ce concept se trouve l’idée selon laquelle dans « Webdesign » il y a d’abord « Web » : pourquoi commencer le travail dans Photoshop pour refaire ensuite presque la même chose en HTML et en CSS ? Surtout quand la prise en charge progressive de CSS3 par les navigateurs récents autorise des effets graphiques qui nécessitaient autrefois de nombreuses images et un marquage HTML surnuméraire… →

HTML & CSS

Le petit journal permanent de HTML5

Le nombre de ressources disponibles sur HTML5 ne cesse d’augmenter. Leur qualité également. Voici quelques liens triés sur le volet qui vous permettront d’amorcer le virage pour rejoindre la dernière ligne droite en direction de HTML5 : des sites web consacrés entièrement à la nouvelle version de HTML, des tutoriels, des trucs et des astuces, sans oublier les liens vers les indispensables ressources officielles ! →

HTML & CSS

7 outils en ligne pour l’intégration HTML & CSS

Ce petit coin de blog est le cadre idéal pour vous présenter quelques outils en ligne qui vous permettront de réduire le temps passé à réaliser l’intégration de vos sites web : éditeurs visuels, générateurs de colonnes, conversion des pixels en unité relative em, etc. Pas vraiment nouveaux, ils méritent quand même le détour !  →

HTML & CSS

Formbuilder — des formulaires HTML avec PHPForm

Formbuilder — Trois étapes suffisent pour créer des formulaires en éliminant la phase de codage HTML : il suffit de cliquer sur les éléments que vous voulez, personnaliser les labels et renseigner les valeurs par défaut. Il est possible de modifier l’ordre des éléments après leur création par glissé-déposé. Enregistrez, c’est gagné ! →

HTML & CSS

EmChart — Convertir des pixels en EM

EmChart — Il est courant d’avoir besoin de convertir des valeurs exprimées en pixels vers une unité de mesure relative comme les EM’s. Cette conversion n’est pas toujours aisée et la calculatrice est souvent nécessaire. EmChart est une table de correspondance qui donne automatiquement le ratio en EM par rapport à deux valeurs exprimées en pixels. →

HTML & CSS

Frameworks CSS — Blueprint vs 960 Grid System

Blueprint et 960 Grid System sont deux frameworks CSS que j’ai utilisés parmi les 25 que j’ai recensés et survolés dans Choisir un framework CSS. J’ai ainsi pu me faire une idée plus précise de leurs qualités respectives. Je ne me suis pas attardé sur les aspects typographiques — même s’ils ont leur importance : j’ai préféré faire l’analyse du système de grille de mise en page (grid.css et 960.css). Pourquoi comparer ces deux frameworks ? Tout simplement parce qu’ils proposent pratiquement les mêmes «fonctionnalités» avec quelques différences dans la mise en oeuvre. Après une rapide introduction sur Blueprint et 960 Grid System, vous trouverez dans la suite de cet article une comparaison et une explication de code. →

HTML & CSS

CSS3, Please! Générateur de CSS3 Cross-Browser

CSS3, Please! — Une belle page éditable avec l’essentiel des propriétés CSS3 : border-radius, box-shadow, Gradient, RGBa(), Transition, @font-face, etc. avec les filtres Microsoft pour IE6/7 et IE8 qui vont bien (ou mal). Un bloc de contenu reflète automatiquement les changements apportés aux déclarations avec la possibilité de désactiver les effets les uns après les autres pour mieux les percevoir. CSS3, Please! est certainement l’un des meilleurs générateurs de CSS3 disponibles. →

HTML & CSS

Générateurs de CSS3 pour tous les navigateurs (ou presque)

Même si tous les navigateurs ne prennent pas en charge les spécifications CSS3, il est intéressant de se pencher dessus, d’autant plus de que nombreux générateurs en ligne sont là pour adoucir la courbe d’apprentissage. Au menu : des générateurs de propriétés CSS3 comme border-radius, gradient, box-shadow, text-shadow, RGBa, @font-face, Multiple Columns, etc. ; des effets de texte  et une palanquée de ressources complémentaires. →

HTML & CSS

HTML5 — Et si on évitait la balise «section» dans une balise «article» ?

Ce billet fait partie d’une série de notes rapides prises lors de ma lecture des spécifications HTML5. Aujourd’hui, c’est le commentaire de Romy qui me donne l’occasion de rebondir sur le découpage d’une page web avec HTML5 et plus particulièrement la balise `section`. Dans ce billet, je m’éloigne un peu du commentaire de Romy et je voudrais souligner qu’elle a parfaitement raison quand elle dit que le rôle des balises `header` et `footer` est clair mais que leur traduction en En-tête et Pied de page prête à confusion ; il faudrait peut-être introduire la notion de meta information. →

HTML & CSS

HTML5 — Pourquoi «header» et «footer» ne créent pas de «sections»

Les nouvelles balises introduites par HTML5 ne sont pas très évidentes à utiliser. Plus que jamais, le contenu est roi et tout dépend de lui. Les notions de Sectioning Content implicites ou explicites risquent de se transformer en poil à gratter pour les intégrateurs web. Pour commencer, notre balise `div` préférée devra laisser du terrain à la balise `section` quand on pourra justifier d’un `h1` à l’intérieur. →