Design & Graphisme

Intégration HTML & CSS des maquettes Photoshop au pixel près

Je reviens rapidement sur la question du rendu identique des maquettes quelque soit le navigateur. Je pense que tout le monde est d’accord pour reconnaitre que les standards ont encore une marge de progression et que les spécifications CSS3 et HTML5 prendront du temps avant d’être validées et implémentées correctement dans au moins deux navigateurs. En attendant, il faut bien faire avec l’existant. Est-ce à dire qu’il faut faire son deuil du rendu unique dans tous les navigateurs ? →

Intégration web

Maqetta — Editeur HTML5 / Javascript en ligne ou à emporter

Maqetta est un éditeur HTML5 open source lancé par IBM sous l’égide de la fondation Dojo. Cet éditeur existe en deux parfums : une version en ligne en mode Saas et un logiciel de 42,7 Mo à télécharger sur son poste de travail. La version en ligne est déjà très intéressante : l’ajout des contrôles jQuery UI s’effectue par glissé-déposé et l’interface est suffisamment WYSIWYG pour voir les Menus à onglets (Tabs) ou les Menus en accordéons (Accordions) fonctionner pour de vrai. On peut passer à volonté du mode «Design» au code «Source» ou avoir les deux à l’écran, horizontalement ou verticalement. →

WordPress A à Z

WordPress de A à Z — A comme Allons-y ! (on s’organise)

«A comme Allons-y !» est le premier billet d’une série d’articles sur la création d’un site internet avec WordPress que j’ai commencé avec Créer son site web avec WordPress de A à Z… avec le Codex. Il existe plusieurs approches pour mettre en place un site WordPress : modifier un thème existant ; ajouter les fonctions WP dans un gabarit HTML résultant de la découpe d’une maquette Photoshop ; ou créer les pages web directement dans le navigateur. Excepté pour le premier cas, on peut partir d’une feuille blanche, reprendre les éléments du projet précédent ou partir sur un thème minimaliste que l’on aura choisi avec soin. Voici le sommaire complet des 26 articles de WordPress de A à Z. →

Plugin jQuery

jQuery Placeholder — L’attribut de formulaire HTML5 «placeholder» pour les navigateurs anciens

jQuery-Placeholder permet d’utiliser l’attribut de formulaire «placeholder» dans les navigateurs ne prenant pas en charge HTML5. Cet attribut affiche une courte description ou une brève indication de la raison d’être du champs de formulaire en question : «Un Email valide, de préférence !» ou «N’oubliez pas http://», etc. Il ne se substitut pas à la balise label qui indiquerait «Votre Email» ou «Votre site web» (1). →

Intégration web

Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3

Je viens de terminer le dernier livre de Raphaël Goetter intitulé CSS avancées. Vers HTML5 et CSS3 paru aux Editions Eyrolles mi-mars 2011 et préfacé par Daniel Glazman. Ce livre n’est pas une simple mise à jour de CSS2, pratique du design web paru en 2005 ; il s’agit d’une refonte totale avec une orientation «utilisateurs avancés». L’auteur commence par un état des lieux sur les standards du web et leur prise en charge par les principaux navigateurs : Internet Explorer (IE6, IE7, IE8, IE9), Firefox, Chrome, Safari et Opera. Le livre est ensuite divisé en trois parties : 1) tirer le meilleur de CSS, 2) HTML5 et CSS3 : l’innovation en marche, et 3) CSS et applications spécifiques. →

HTML & CSS

Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »

Au menu de ce petit journal, je vous propose un pot-pourri de ce qui a retenu mon attention ces 30 derniers jours. La typographie sur le web avec Font-face et les différents formats de polices de caractère. Apprendre les bonnes pratiques en matière d’intégration HTML & CSS avec HTML5 Boilerplate. Choisir de mettre un reset CSS dans votre moteur ou une simple (mais complète) feuille de style de base. Approfondir CSS3 avec un tutoriel concret et utiliser les pseudo-classes `:before` et `:after` pour créer des ombres portées du plus bel effet. Mettre en place une feuille de style pour les périphériques mobiles et autres smartphones (iPad, iPhone ou Android). Avoir une liste d’outils pour vous aider à développer avec Internet Explorer (et IE6 en particulier). Et pour finir, reprendre les bases de Photoshop avec un tutoriel en 5 parties distinctes mais complémentaires. →

Intégration web

BlueGriffon — Un éditeur HTML5 & CSS3 WYSIWYG avec des morceaux de Firefox

Après ma longue liste commentée des éditeurs HTML plus ou moins WYSIWYG, voici mes premières impressions sur BlueGriffon. C’est un éditeur HTML complètement WYSIWYG dont l’affichage est confié au moteur de rendu qui équipe le navigateur Firefox. Le créateur s’y connait, puisqu’il s’agit de Daniel Glazman (@glazou pour les intimes) qui travaillait déjà sur Composer, l’éditeur HTML de la suite Netscape, puis sur Nvu dans le cadre de Disruptive Innovations. Il fait partie du groupe de travail de normalisation du langage CSS au W3C : c’est un vrai spécialiste des CSS. →

Logo

Logo HTML5 du W3C — Vers une redéfinition des métiers du web ?

Le W3C a demandé à l’agence OCUPOP de (re)penser l’identité graphique des technologies qui forment ce qu’on appelle généralement les standards du W3C. Ce vocable englobe toutes les technologies non-propriétaires développées et/ou adoubées par le Consortium. Ce dernier a surpris la communauté du développement web au sens large avec un nouveau logo censé englober les standards du web sous l’appellation «HTML 5». →

Le petit journal du web

Le petit journal du Web — 31 décembre 2010

A l’occasion du 31 décembre, voici quelques éléments statistiques concernant la fréquentation de ce blog. Depuis le 26 juillet 2006, css 4 design compte plus d’un million de visites pour un peu plus de 715 000 visiteurs uniques et a atteint une vitesse de croisière d’un peu plus de 1 000 visites par jour depuis quelques mois. D’après Alexa.com, ce blogzine fait partie du top 100 000 des sites mondiaux et du top 5 000 pour la France. Les visiteurs sont plutôt des hommes sans enfant, âgés de 18 à 34 ans, avec un niveau d’étude plutôt élevé qui se connectent plutôt depuis l’école et le lieu de travail. →