CSS & Webdesign » Intégration HTML

Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur

Bruno Bichet — Tue, 17 Jan 2012 19:42:53 +0000

La périodicité du blog est devenue irrégulomadaire à tendance bimensuelle… Malgré tout, je tiens à partager avec vous les fruits de la veille. Dans le panier : des trucs sympas et pratiques pour WordPress ; un plugin pour splitter du contenu avec jQuery ; des formulaires HTML plus efficaces ; une astuce toute simple pour connaitre personnellement vos visiteurs via Google Analytics, quelques liens pour compresser et organiser vos CSS et tout un tas d’autres choses dont l’énumération serait longue et fastidieuse.

Liens WordPress

WordPress Theme Generator

WP Generator Blog est assez bluffant : votre thème pour WordPress est plié en quelques clics, sans connaissance préalable en HTML, JS, PHP ou même CSS ! Changez les couleurs, le nombre de colonnes, etc. L’outil produit des thèmes compatibles à partir de WordPress 2.1 jusqu’à la version 2.7 au moins, et embarque le framework Yahoo! UI.

Affichez votre nombre de followers Twitter sur votre blog

Il n’y a pas que le compteur Google Feedburner pour gonfler notre égo virtuel. Le nombre de followers que l’on peut avoir sur son compte Twitter peut à lui seul vous gonfler un égo capable d’atteindre la ~~blogosphère~~ stratosphère ^__^ Le code fourni par wpRecipes est composée d’une partie à copier dans le fichier functions.php de votre blog et d’une autre partie à placer là où vous désirez afficher l’information.

Random « Read More »

Ces deux bouts de code dégottés sur wpguy affichent un lien « lire la suite » aléatoire pour chacun de vos articles. Le premier est à placer avant The Loop :

Liens intégration web

Organisation, compression, vos CSS vont adorer !

cleancss — Cet outil en version française très complet propose quatre niveaux de compression et permet de personnaliser les paramètres en précisant un gabarit de formatage pour votre feuille de style, dont voici un exemple de compression maximale,
Styleneat — Trie (ou pas) les sélecteurs ou les déclarations dans l’ordre alphabétique. Affiche les déclarations sur plusieurs lignes. Possibilité de coller la feuille de style, de saisir l’URL de la CSS ou enfin de l’uploader depuis votre poste de travail. Via roget.biz,
dustmeselectors — Extension pour Firefox qui traque les sélecteurs CSS inutilisés dans votre page web,
Em Calculator — Pratique pour obtenir des valeurs en em pour les éléments de votre document HTML à partir d’une taille exprimée en px,
Construct Your CSS — Construct est un éditeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya. Il montre que l’on peut mettre à la disposition des intégrateurs web une boite à outil, ainsi qu’un éditeur visuel pour faire des CSS et du HTML sémantique,
pagecolumn — Générateur de maquette en plusieurs colonnes avec CSS 2.0 en utilisant les %, les px ou les em. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets,
drawter — Déjà évoqué sur ce blog : drawter, dessiné, c’est gagné,
CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières qu vont avec) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !

Encore un effort !

Formulaires HTML efficaces en 10 étapes

Consultez l’excellent article de bbxdesign sur les 10 bonnes pratiques pour réaliser un formulaire basé sur la conférence de Luke Wrobleski de Yahoo! dont voici le sommaire :

Aller droit au but,
Alignement des labels,
Aide et astuces,
Validation,
Actions primaires et secondaires,
Actions en cours,
Erreurs,
Input inutiles,
Organisation du formulaire,
Engagement graduel.

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

JotForm — Création de formulaires en ligne,
webjackalope — 12 exemples de formulaires d’inscription pour «feignasse».

Splittez votre contenu en plusieurs parties redimensionnables avec jQuery Splitter

C’est sur Dator Blog que j’ai déniché jQuery Splitter tout droit sorti de chez Dave Methvin. Ce plugin permet d’afficher une séparation entre deux contenus de la forme :


     Left content goes here 
     Right content goes here

L’appel de la fonction étant réduit au strict minimum :

$().ready(function(){
    $("#MySplitter").splitter();
});

La splitbar peut être déplacée très facilement de manière accessible en cliquant-glissant, avec une accessKey ou encore via la touche tab.

Autres ressources Javascript

390 ressources Javascript et jQuery — Les fruits de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign.

20 mémos utiles pour tout webdesigner

Une bonne palanquée de Cheat Sheet (à vos souhaits) pour ne plus oublier les raccourcis Photoshop, les propriétés des CSS, les éléments HTML, etc. Mention spéciale pour :

Blueprint 0.8 (via Christian Montoya),
récapitulatif des fontes communes (ou pas) entre les systèmes d’exploitation Windows et MacOS,
Kit de survie du créatif oeuvrant dans les métiers du graphisme,
Les coulisses d’un design par Douglas Bowman,
Mémo de la maquette web par Romy Duhem-Verdière qui nous rappelle les éléments à prendre en compte et les bonnes pratiques pour la composition de vos pages, les hyperliens, les textes, les formulaires, les éléments multimédias, ainsi que les mentions o-bli-ga-toires.

Miscellannées

Google Analytics — Identifiez les lecteurs en provenance de Netvibes

Généralement, les informations aggrégées par les outils de mesure d’audience ne permettent pas de connaitre le nom (ou le pseudo) des visiteurs ! Google Analytics vous permet en seulement trois clics d’en savoir plus :

Cliquez sur Traffic Sources (Sources de trafic),
Puis sur Referring Site (Sites Référents),
Rendez-vous dans la liste des sites et cliquez sur Netvibes,
Enjoy ;)

Bref, je suis sûrement le dernier à avoir cliqué sur Netvibes pour afficher les visiteurs concernés, mais si je suis l’avant-dernier, je me dis que ça servira au moins à une personne ;)

T’es qui, toi, déjà ?

Ping.eu ou tout ce que vous avez toujours voulu savoir sur une adresse IP ou un nom de domaine sans jamais avoir osé le demander : Ping, Traceroute, DNS lookup, WHOIS, Port check, Reverse lookup, Proxy checker, Mail relaying, Bandwidth meter, Network calculator, Network mask calculator, Country by IP, Unit converter !

Stay tuned and mind the gap!

PS : n’oubliez pas la grosse grosse liste de 1000 ressources pour webdesiger et développeurs web !

Articles sur le même sujet

L'intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

Bruno Bichet — Tue, 26 Apr 2011 11:53:45 +0000

Les claviers ont crépité la semaine dernière autour du rendu des maquettes Photoshop au pixel près. En relisant les billets et les commentaires, j’ai finis par me demander de quoi on parlait exactement. Lorsque l’intégrateur web reçoit un PSD (qui a déjà été validé, donc) à découper, il se se pose généralement pas la question : il prend une longue inspiration, se remémore quelques épisodes de Dexter et commence à découper sa maquette bien proprement.

Si vous aussi, vous vous demandez comment Dexter s’y prendrait pour découper vos .psd avec brio ;-)

Découper avec «dextérité»

Selon sa méthode de travail, l’intégrateur s’occupe du marquage HTML après avoir tout bien tranché. Il teste ensuite le rendu final dans tous les navigateurs disponibles. Il peut aussi découper, intégrer et tester le rendu dans plusieurs navigateurs au fur et à mesure. Dans les deux cas, on ajuste le code HTML (le moins possible, s’il a été pensé de manière sémantique) et les CSS pour que le site s’affiche de manière identique partout ou presque, en faisant au mieux avec les innombrables bugs et incohérences qui font le charme (ou pas) de l’univers impitoyable des navigateurs.

A cette étape, si l’intégrateur a eu le temps nécessaire pour travailler sereinement, le site devrait s’afficher parfaitement dans les navigateurs les plus courants, y compris dans IE6 ! Oui, parfaitement.

Il s’agit-là de la méthode «standard» pour faire un site web à partir d’une maquette réalisée dans un logiciel de traitement d’image, et ce depuis déjà de nombreuses années. Généralement, ces sites possède une largeur fixe et s’affichent entièrement sur des écrans ayant une résolution de 1 024 par 768 pixels. Ils regroupent sans doute plus de 80% de l’ensemble des sites web. Ils sont généralement prévus pour s’afficher de manière identique sur les navigateurs présents sur le marché.

Bref, le «pixel perfect» comme je le comprends existe depuis longtemps déjà. Savoir si c’est une bonne chose ou non est un autre débat.

Sur le fil du rasoir

Selon la «nature graphique» de cette maquette, l’intégrateur peut être tenté d’utiliser certains effets CSS3 pour rendre les arrondis, les ombres portées, les dégradés, etc. A partir de là, on n’est bien conscient qu’il s’agit d’utiliser des technologies émergentes qui sont encore à l’état de brouillon. Les éditeurs de navigateur travaillent déjà dur pour implémenter ces technologies ; on ne peut pas leur demander en plus d’assurer un rendu identique à celui du voisin (du moins pour l’instant) !

Au niveau des spécifications, il est normal de penser qu’un bord arrondi ne devrait pas être différent d’un navigateur à l’autre. C’est pareil pour une ombre portée ou un dégradé. Mais à supposer que chaque navigateur parvienne à implémenter correctement ces effets CSS3, je continue de penser qu’une légère différence d’affichage n’est pas préjudiciable : un visiteur consulte rarement le même site simultanément dans deux navigateurs différents, si ?

Conclusion…

… Y en a pas ;-) Ou plutôt : dites-moi si dans les travaux que vous réalisez, vous trouvez que les maquettes à découper «au poil de c.. près» sont en augmentation par rapport aux maquettes où l’on peut faire tout ou partie du design directement dans le navigateur, ou pas ?

Articles sur le même sujet

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

Bruno Bichet — Fri, 22 Apr 2011 14:36:42 +0000

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 ?

Avec CSS3…

Pas forcément. En ce qui concerne CSS3, il faut s’en tenir aux conseils donnés dans CSS3 pour les web designers par Dan Cederholm :

Utiliser CSS3 «ici et maintenant» à condition de s’en tenir aux éléments de présentation ou d’interactivité en ciblant la couche d’expérience non critique (interaction, récompense visuelle, réactivité et mouvement) sans toucher à l’identité visuelle, l’utilisabilité, l’accessibilité ou la mise en page.

… ou à l’ancienne ?

Pour tout le reste, il faut se débrouiller avec des images de fond, en limitant les dégâts au maximum : marquage HTML réduit au minimum, utilisation de sprites pour les images, tenter de se passer de Javascript pour des effets visuels, éviter les hacks, etc. J’irais plus loin en conseillant d’éviter même les balises sémantiques HTML5 en raison de leur accessibilité perfectible.

Bref, dans ces conditions — si le temps et l’argent le permettent — rien ne s’oppose à ce que la maquette du graphiste soit rendue au pixel près. C’est même souhaitable. L’intégrateur pourra prévoir des fallbacks pour l’affichage sur les tablettes tactiles comme l’iPad, les téléphones tels que l’iPhones ou Android. Ou alors, c’est le graphiste qui pourra dessiner comme bon lui semble la version iPhone, etc. s’il veut garder le contrôle.

C’est quoi un intégrateur web ?

Comme le dit STPo (@stpo) suite à l’article de Julien sur le rendu Pixel Perfect et les standards du web :

Le boulot d’un inté, c’est de placer intelligemment le curseur entre respect de la DA, performances, accessibilité, maintenabilité, etc. afin d’obtenir le meilleur produit final possible. Le graphisme n’est QU’UN de ces paramètres : parfois c’est le plus important, et on négligera les autres davantage. Et parfois, non.

Soyons agiles

S’il faut faire le deuil de quelque chose — que ça soit à cause de bugs ou de contraintes techniques indépassables — ce n’est pas sur cette question du rendu parfait, puisqu’il est accessible dès maintenant. Il faut faire le deuil de la méthode de travail unique. Il faut adapter ses méthodes et être agile. Et ce n’est pas facile.

Nous sommes tous à la recherche de trucs et d’astuces réutilisables. On n’aime pas réinventer la roue toutes les semaines. On préférerait que les clients comprennent nos contraintes (en même temps, si votre boss ne vous comprend pas, il n’y a pas grand chose à attendre du client qui n’y est pour rien…).

Intégrateurs web, prenez des risques !

Il faut comprendre le projet sur lequel on travaille et force est de constater que certaines organisations ne favorisent pas la prise de risque de la part de l’intégrateur web qui est rarement consulté en amont. Pourtant, avec un bref brief, l’intégrateur pourrait prendre de l’assurance et éviter de se prendre la tête pour aboutir systématiquement à un rendu parfait lorsque les projets ne le nécessitent pas.

Articles sur le même sujet

Les sites web doivent-ils s'afficher exactement de la même manière dans chaque navigateur?

Bruno Bichet — Wed, 20 Apr 2011 17:41:03 +0000

Cette question récurrente est un peu le serpent de mer du webdesign et de l’intégration web. Elle provient à l’origine d’une application sans discernement du flux de production PAO à des projets web qui n’ont pas les mêmes problématiques à résoudre. En PAO, il est impossible de dire au client que sa brochure imprimée aura un nombre de colonnes différent selon les lecteurs ou que la belle typo qu’il a déjà sur sa carte de visite ne passera pas à l’impression. C’est ainsi qu’est né le mythe du rendu des maquettes Photoshop au pixel près. Et pour cause : une fois que l’on a fait signer le BAT au client, on a les mains liées. Difficile de lui expliquer ensuite pourquoi son site ne ressemble à rien sur le PC de sa secrétaire qui utilise IE6. Et c’est normal du point de vue du client qui a bien raison de se moquer des problèmes existentiels des ouvriers qui travaillent à fond de cale :)

Face à cette problématique, nous avons grosso modo deux profils bien différents :

Les intégrateurs ou les webdesigners chargés de l’intégration web, formés à la découpe d’image dans Photoshop ou ImageReady, avec comme seul objectif en tête de faire exactement la même chose que la maquette. Sinon, ils ont raté leur vie. Pour eux, chaque bug est une occasion de traiter le web par-dessus la jambe et de cacher les miettes sous le tapis.
De l’autre côté, nous avons des webdesigners ou des intégrateurs qui ont compris que le web était plus vaste que la somme des sites qui le compose, et qui «font avec» la multitude et les différences. Pour eux, chaque bug est une occasion d’en apprendre plus, de s’améliorer, de devenir un(e) meilleur(e) intégrateur/intégratrice web.

Entre les deux, on peut trouver des profils mixtes. Le rendu au pixel près est un type de prestation qui a déjà trouvé son public parmi les clients. Reste à faire payer le juste prix pour le travail de tuning fastidieux.

Pour ma part, lorsque c’est possible, j’essaie de m’affranchir le plus possible des contraintes de rendu fidèle en adoptant la philosophie de l’amélioration progressive ou de la dégradation gracieuse.

Sur le papier, cette philosophie est cool. Malheureusement, il est difficile de l’appliquer dans les agences, à cause du manque de bagage technique de la force de vente. Alors qu’avec un peu de pédagogie, appuyée par des arguments en termes de finances et de délais, je me rends compte que les conséquences liées à l’amélioration progressive et à la dégradation gracieuse sont plutôt bien comprises par les clients. Ils sont prêts à accepter que :

Les visiteurs sous IE6, IE7 et IE8 n’auront pas de coins arrondis,
Certains fonds n’auront pas de dégradés,
Certains effets de transparences n’apparaitront pas,
Etc.

Ce n’est pas si compliqué à faire comprendre. A condition d’être soi-même convaincu, bien évidemment !

Je pense être à même de comprendre les deux points de vue car j’ai travaillé plus de 10 ans en PAO et autant dans le web. Il m’a été très difficile à une époque de faire le deuil de la qualité de l’imprimé par rapport au côté cheap du web (surtout dans les années 1998). Je me suis souvent trouvé dans la situation de certains graphistes qui ont aujourd’hui des difficultés à comprendre les prises de position parfois un peu extrêmes de ceux qu’ils appellent les intégristes de l’intégration.

Or, ces derniers sont avant tout soucieux de rendre utilisable le site dont il ont la charge en prenant en compte le maximum d’utilisateurs et de configurations, au moindre coût. Car bien sûr, les plus « charitables » des graphistes-intégristes diront que le client n’a qu’à payer plus pour avoir plus. Par exemple, payer une intégration pour les ordinateurs de bureau, une autre pour les Netbooks, encore une pour les iPhone et pourquoi pas une dernière pour la route avec les téléphones Android ou Blackberry…

On le devine en filigrane, une des pierres d’achoppement qui empêche les uns de comprendre les autres, est globalement politique. Avec d’un côté, ceux qui essaient de diffuser largement la connaissance au moindre coût (quitte à gagner moins et à travailler plus) et ceux qui tentent de tirer le maximum de leurs clients, qu’importe si le site vendu n’est accessible qu’avec un ordinateur Apple équipé d’un écran de 25 pouces.

Je caricature, bien sûr. Je suis persuadé que l’on trouve des gens très bien chez les graphistes qui travaillent en agences et quelques brebis galeuses parmi les chantres du libre et de l’open source.

Le clivage semble politique et économique. C’est pas gagné.

Do websites need to look exactly the same in every browser?

→ Pssst : la suite de cet article sur Et si Photoshop permettait de tester des maquettes fluides ?

Articles sur le même sujet

Quelques notes sur les fonctions de l'intégrateur web et de l'intégratrice web

Bruno Bichet — Tue, 05 Apr 2011 11:54:49 +0000

Parmi les nombreux intervenants dans la chaine de production des métiers de l’internet, l’intégrateur web est sans doute celui qui se cherche le plus. C’est le «vilain petit canard» de l’Open Space. Souvent coincé entre les graphistes et les développeurs web, il peut se sentir à l’étroit. Placé au bout de la chaine, de nombreuses erreurs de conception faites en amont lui tombent dessus, à commencer par les délais. Le retro-planning donne souvent l’impression d’avoir zappé le temps nécessaire à «l’intégration». Pourtant, l’intégrateur HTML & CSS est une ressource précieuse que toute entreprise sérieuse devrait valoriser. C’est le garant de la qualité globale du site mis en ligne, du respect de la charte graphique à l’expérience utilisateur en terme de performance d’affichage des pages.

L’intégrateur web en milieu naturel

Selon les entreprises, en dehors de sa responsabilité évidente relative au bon affichage du site sur l’ensemble des navigateurs, il gère les «oublis» en matière de référencement et d’optimisation «SEO» pour les moteurs de recherche (pléonasme !) en remplissant les balises alt ou certains attributs title. Il peut même aller jusqu’à améliorer la densité des mots-clés présents dans les titres des articles. C’est dire son implication dans la réussite de l’entreprise.

Par ailleurs, sa passion du web et son goût pour l’accessibilité lui permettent de rendre votre site web accessible au plus grand nombre. Avec un peu d’expérience, votre intégrateur web pourra facilement devenir un chef de projet web capable de faire travailler ensemble graphistes et développeurs web.

Enfin, et c’est le plus important, l’intégrateur web, en fonction des composés HTML & CSS qu’il emploi et des bonnes pratiques qu’il observe lors de l’intégration des différents fichier Javascript, a une responsabilité importante en ce qui concerne la maintenance du site dont il intègre les pages. D’après mon expérience, la plupart de l’argent mal dépensé par les entreprises sur le web est lié à une mauvaise conception des pages et à une architecture de site défaillante. N’attendez plus et mettez donc un intégrateur web qualifié dans votre moteur !

Mais qui est donc l’intégrateur web ?

Les définitions concernant l’intégration web insistent souvent sur la découpe et l’intégration de la maquette réalisée par le graphiste. On parle souvent de «montage» de page web, terme qui nous vient du fin fond du monde de l’imprimé et de la PAO…

Définition globale du métier d’intégrateur web

L’intégrateur web produit généralement des pages web à partir d’indications visuelles ou sonores : maquette détaillée dans un logiciel de traitement d’image, croquis à main levée, directives verbales, etc. Il utilise tout code informatique compatible avec les agents utilisateurs (les navigateurs web). Il crée le plus souvent des composés HTML & CSS pour déterminer le fond et la forme des éléments composants la page et peut ajouter de l’interactivité avec les utilisateurs en manipulant le DOM avec ECMAScript. Source : Définir le métier intégrateur web.

L’intégrateur est avant tout un spécialiste des langages HTML et CSS. Produire des pages web consiste à taper du code dans un éditeur texte, à en tester le rendu dans les navigateurs web présents sur le marché et à s’arranger pour que la page web affichée corresponde au brief ou à la maquette.

Dans cette définition, je n’ai pas voulu enfermer l’intégrateur dans le rôle du méchant découpeur de .psd qui monte des pages à la chaine. D’une part, il peut très bien produire une page web (voire même tout un site) directement dans le navigateur d’après un simple croquis, comme j’ai pu le démontrer dans l’article Conception dans le navigateur avec HTML5 & CSS3, et d’autre part, lorsqu’elle existe, cette phase d’exécution pure n’est que la partie émergée de l’iceberg des compétences de «l’inté».

Les profils de l’intégrateur web

Selon le secteur d’activité, la taille de l’entreprise, et la définition de poste, le curseur initialement situé au centre des compétences premières de l’intégrateur web («découpe» de fichiers Photoshop et «montage» des pages) se déplace sur une ligne qui va de l’intégrateur-graphiste à l’intégrateur-développeur :

A gauche du curseur, nous avons le web designer capable de concevoir une charte graphique, de la mettre en œuvre à l’échelle d’un site web, de réaliser le montage HTML & CSS des pages. Ce web designer possède avant tout une forte culture graphique.
Un peu plus vers la droite, le web designer peut également intervenir sur les développements côté client avec Javascript ou côté serveur avec PHP. Variante : le Web designer utilise un CMS comme WordPress pour l’assister dans cette tâche. Celui-ci possède plutôt une culture technique. C’est souvent un ancien webmaster qui a l’habitude de Photoshop.
Au centre, nous trouvons notre intégrateur dont le rôle consiste à découper une maquette fournie (généralement) au format Photoshop et de la transmuter en page web à l’aide de HTML & CSS.
Un peu plus loin vers la droite, nous avons le webmaster chargé initialement de l’intégration des contenus et qui fait naturellement l’intégration HTML & CSS des pages web qu’il ajoute au site. Il intervient également souvent sur la partie PHP.
A droite du curseur, nous avons un développeur PHP dont le sens esthétique ou le goût pour la lisibilité lui permettra d’habiller ses développements PHP avec HTML & CSS3. Généralement adepte de The Gimp, il pourra reprendre le logo du client et placer des éléments graphiques dans sa composition.

→ Lire Je suis « enveloppeur web » moi monsieur et Intégrateur web + graphiste = intégraphiste !

En bref

Les compétences de base de l’intégrateur sont multiples, et ce d’autant plus que ce dernier peut porter plusieurs casquettes allant du graphiste au développeur web. Toute fiche «métier» devrait tenir compte de la spécificité de ce métier qui peut en cacher plusieurs autres ! A ce sujet, je recherche des témoignages d’intégrateurs web sous forme d’un ou deux paragraphes : brève description du travail effectué et place dans le flux de production de l’entreprise, et tout autre élément que vous jugerez nécessaire. Vous pouvez me faire parvenir votre témoignage dans les commentaires ou à l’adresse infographiste[at]gmail[dot]com Merci d’avance o/

Articles sur le même sujet

Définir le métier « intégrateur web » ou « intégratrice web »

Bruno Bichet — Mon, 04 Apr 2011 08:44:36 +0000

Toujours en quête de concision et d’exhaustivité pour définir le métier d’intégrateur web — et puisque on n’est jamais mieux servi que par soi-même –, voici ma modeste contribution sous la forme d’une courte définition qui devrait prendre place prochainement dans une «fiche métier» consacrée à l’intégration HTML & CSS :

L’intégratrice web et l’intégrateur web produisent généralement des pages web à partir d’indications visuelles ou auditives ⁽¹⁾ : maquette plus ou moins détaillée dans un logiciel de traitement d’image, croquis à main levée, directives verbales, etc. Ils utilisent tout code informatique compatible avec les agents utilisateurs (les navigateurs web). Ils créent le plus souvent des composés HTML & CSS pour déterminer le fond et la forme des éléments composants la page. Ils peuvent ajouter de l’interactivité avec les utilisateurs en manipulant le DOM avec ECMAScript.

Notepad++ est probablement le meilleur ami de l’intégrateur web travaillant sous Windows

Balisage HTML d'une page web. Cliquez pour agrandir l'image.

⁽¹⁾ On pourrait ajouter «tactile» si le brief est rédigé en braille et «olfactif» à la liste des indications lorsque l’intégrateur travaille au «pifomètre».

Articles sur le même sujet

HTML5 — Une orientation encore trop « littéraire » et pas assez « web »

Bruno Bichet — Tue, 02 Feb 2010 08:57:52 +0000

Dans HTML5, il manque quand même la balise panier pour aller avec article. Ce début de réflexion que je partageais sur Twitter m’est venu en lisant les ~~tables de la loi~~ spécifications de HTML5, notamment la partie semantics. Là, j’ai eu comme une révélation : Les balises HTML et surtout HTML5 sont orientées vers les contenus littéraires (dialog), le monde de la presse (article) et les publications à caractère scientifique (section).

C’est normal si on considère que le web est issu du monde de la recherche universitaire mais ça l’est moins au regard des autres pratiques du web en général et du commerce en ligne en particulier. Du coup, mon côté réactionnaire a pris le dessus et je me suis mis à regarder HTML5 comme un sous-produit de XHTML réservé aux contenus dits de « qualité » vs le commerce qui ferait partie du côté « obscur » de la force.

Pour prendre le contre-pied de ce que j’écrivais dans Favoriser les sites de contenus, n’est-ce pas exclure de fait les sites d’entreprises ? je pense qu’il est peut-être temps de se pencher sur la structure sémantique des sites de vente en ligne.

Les balises qui manquent à HTML5

Et là, je ne parle pas que de e-commerce. Quelqu’un pourra-t-il m’expliquer la présence d’une balise dialog alors qu’il manque la balise logo, élément bien plus largement utilisé sur le web ? Idem pour une éventuelle balise motto ou baseline ? Je veux bien y mettre de la bonne volonté, mais HTML5 est quand même un truc bancal quand on regarde de près la structuration des contenus présents sur le web.

Et le e-commerce, ça pue ?

Et oui, à côté des blogs, des articles d’information et des sites corporate (qui partagent la même structure), le gros du web est composé de sites de vente en ligne. Quand on y regarde de plus près, les éléments composant la notice d’un article (produit) sont autrement plus complexes que ceux d’un article (billet) : on retrouve les mêmes éléments (titre, sous-titre, résumé, etc.) en plus des éléments spécifiques au commerce comme le prix (price ?), le nombre d’éléments en stock (item ?), etc. Sans compter tous les éléments qui caractérisent un produit comme la taille, la couleur, etc.

Vous vous doutez bien qu’il ne serait pas très pratique d’avoir autant de balises dites « sémantiques » pour caractériser chaque élément de personnalisation possible pour un article donné. C’est pourquoi, je propose d’inventer un mécanisme permettant de spécifier un élément sous forme ce classe CSS histoire de s’en sortir avec tous les micro-contenus… Mais attendez, on me souffle dans l’oreillette que les microformats existent déjà…

En (très) bref

HTML5 sera parfait pour structurer l’exemplaire papier de Roméo et Juliette qui se trouve dans ma bibliothèque. En ce qui concerne les contenus disponibles sur le web le travail ne fait que commencer.

Articles sur le même sujet

Framework CSS sémantique ? Comment je vois les choses

Bruno Bichet — Mon, 29 Jun 2009 18:35:21 +0000

Je reviens vers vous sur la question des frameworks CSS suite à la lecture de A Reflexion About Semantic Grids qui défend grosso modo le point de vue selon lequel les frameworks ne sont pas sémantiques et incitent à marcher sur la tête en bousculant le flux de production web.

A première vue, les classes ajoutées au code HTML par les déclarations présentes dans les bibliothèques CSS sont essentiellement destinées à la présentation. Un peu comme si l’on mettait une classe .rouge pour afficher en rouge ce qui est important dans le texte, alors que tout le monde sait que .red, étant plus court, est bien plus approprié ^_^v (je suppose ici que les professionnels du web seront sensibles à l’ironie ; je ne suis pas inquiet pour les autres !).

Ensuite, à cause des frameworks CSS, l’intégrateur serait obligé de commencer par la feuille de style au lieu de baliser correctement son contenu avec du HTML bon CHIC (Code Html Intrinsèquement Classe) bon genre.

Vous avez dit web sémantique ou flux de production web ?

Je ne suis pas vraiment convaincu par ces arguments car la sémantique ne se réduit pas à la place des opérations à accomplir dans le flux de production web : à partir du moment où l’on connait le pas de la grille, il n’y a aucune raison de ne pas générer le fichier grid.css qui va bien. D’autant plus que cette grille ne devrait avoir aucune influence sur la qualité du code HTML à venir, si justement, l’intégrateur ou le webdesigner a pris soin de séparer le fond de la forme en amont.

Mais surtout, à part quelques frameworks qui nécessitent jusqu’à trois classes — voire plus — pour placer un bloc (ce qui commence à manquer de factorisation), la suite des .span-x peut se comprendre comme l’importance accordées à chaque bloc : du moins important (.span-1) au plus important (.span-24), à l’image de la presse écrite où un article surmonté d’un titre en 8 colonnes à Une mérite plus d’attention qu’un entrefilet sur 2 colonnes.

C’est dans cet esprit que je préfère un .span-x à un .grid-x, d’autant plus qu’il existe déjà un élément span en HTML.

Est-ce une raison pour justifier l’utilisation d’un framework CSS ?

J’aime bien tester rapidement différentes déclinaisons d’une charte graphique avec les frameworks. En effet, dès que le fichier grid.css (ou layout.css, maquette.css, etc.) est en place, on peut déplacer les blocs de contenus très rapidement : l’Édito sur 6 ou 8 colonnes ? Le Sticky Post, avec une marge à gauche ou à droite ? etc.

Quand les choix sont validés, je refais la partie layout de mon fichier styles.css avec les éléments utilisés réellement tout en gardant grid.css sous le co(u)de prêt à servir avec une règle @import entre commentaires.

Par exemple, pour tester ma grille, j’ai tendance à utiliser :

Et en production :

Avec :

#sticky-post {
    width: 310px;
    float: left;
    margin-right: 0;
    overflow: hidden; /* avec #sticky-post { zoom: 1 } dans le fichier ie.css */
}

Et ainsi de suite avec tous les éléments de la page. C’est un peu fastidieux, mais au final — et pour peu que vous réunissiez toutes vos CSS dans un fichier unique bien commenté — votre code HTML et votre feuille de style CSS y gagneront en lisibilité et surtout en légèreté.

Articles sur le même sujet

Drawter : dessinez, c'est intégré ! (WYSYWYG Powa!)

Bruno Bichet — Wed, 26 Nov 2008 20:42:17 +0000

Drawter est un générateur de code HTML et CSS en ligne qui vous permet de dessiner votre mise en page dans un canevas. Vous pouvez choisir les options de votre page comme le titre, le doctype, la langue du document, les balises que vous souhaitez pour chaque bloc présent à l’écran et pour chacune d’entre elles les propriétés et les attributs.

Une fois votre maquette terminée, vous choisissez le mode de placement pour vos blocs : float: left ou position: absolute. Le site autorise les imbrications de balises pour réaliser des mises en page complexes dans une interface réactive et intuitive. N’hésitez pas à parcourir toutes les options disponibles dans les palettes d’options et amusez-vous :) Drawter : dessinez, c’est gagné ? A tester !

PS : Merci à Thierry pour le lien ;)

Articles sur le même sujet

The HTML Framework Project | Phase 1.1 — définir

Bruno Bichet — Fri, 05 Sep 2008 02:25:23 +0000

Je vous ai rapidement parlé de The HTML Framework Project qui propose de réfléchir ensemble à la mise en place d’un environnement de travail pour rendre le démarrage d’un projet de site web moins ennuyeux. Le projet en est à la phase 1.1 : définir. Il est évident que produire un bon code HTML est un métier, un art qui peut difficilement se faire comme on élève des poules en batteries. Pour autant, il doit être possible de dégager parmi les bonnes pratiques de travail, quelques concepts récurrents que l’on pourrait utiliser au démarrage d’un projet.

C’est quoi un framework HTML, au juste ?

Un Framework HTML devrait inclure une structure de fichiers normalisée, quelques trucs pour mettre les navigateurs au garde-à-vous et des fichiers HTML servant de fondations pour des maquettes différentes. C’est aussi simple que ça : un jeu de fichiers et de répertoires pour amorcer le travail dans la joie et la bonne humeur ;)

Sur quelles bases construire ce framework ?

S’assurer que le Framework HTML est conforme avec les points suivants :

Éviter les tables pour la présentation,
Séparer le fond et la forme,
Réserver la partie présentation aux CSS,
Prendre en considération la « sémantique » des balises HTML,
Intégrer des noms de classes signifiants,
Valider en accord avec les spécifications du W3C.

Un mot d’ordre : la flexibilité

Pour que ce framework HTML soit utile aux développeurs, il faudra :

Ne pas gêner les web designers (les graphistes doivent pouvoir laisser libre-court à leur créativité),
S’adapter aux contraintes propres d’un projet (être un plus, pas un obstacle),
Rester léger en excluant les fonctionnalités superflues,
Être extensible pour faire face aux besoins futurs.

Participer à la discussion

On parle beaucoup (ou pas) de HTML5. J’ai donc lancé l’idée de bâtir les fondations du framework sur la base des spécifications du HTML5, notamment pour la partie structure en accord avec la partie sections du W3C :

section — Chapitres, onglets des menu, etc. La page d’accueil d’un site web pourrait être découpée en sections : introduction, news et informations de contact.
nav — Menu principal ou secondaire d’un site web.
article — Partie indépendante d’une page, d’un document ou d’un site : contribution sur un forum, article de magazine, billet de blog, commentaire, etc.
aside — Barre latérale ou contenu adjacent,
header — Regroupement de sections ou de balises h1, h2, etc.
footer — Pied de page d’une section,
address — Informations de contact, idéalement placées dans le footer.

Dans le framework HTML, ces éléments pourraient se traduire par :

Les autres éléments de HTML4 étant utilisés — comme d’habitude — de manière à coller au plus près du sens véhiculé par le contenu.

Pour conclure

L’avantage de calquer les id et les class sur les balises prévues par HTML5, c’est de voir loin tout en s’adaptant dès maintenant aux nouvelles habitudes de structuration des contenus avec HTML5. Et comme le suggère jdgraffam il est envisageable que le framework définisse un plan pour passer du framework au HTML 5 quand ce dernier sera pris en compte par les navigateurs, tout en restant rétro-compatible !

Faites tourner et n’hésitez pas à partager ce que ce projet vous inspire. Si vous avez des idées et quelques connaissances en anglais, je vous invite à commenter ce billet, ou ici, si vous êtes plus à l’aise en français ;)