Bien sûr, c’est très réducteur car ce métier est au carrefour de beaucoup d’autres : graphisme, design, ergonomie, accessibilité, développement, référencement (SEO), rédaction, etc. Chaque intégrateur et intégratrice web sera plus ou moins à l’aise avec tout ou partie de ces domaines, en fonction de son background et de ses expériences.

La question de Sophie est en fait plus précise : est-ce que l’intégrateur web doit obligatoirement connaitre Javascript ? Oui, l’intégrateur doit posséder des connaissances suffisantes pour modifier ou adapter du code Javascript ou plus prosaïquement pour rechercher le meilleur plugin jQuery en terme de fonctionnalités, de performances et d’accessibilité.

Qu’est-ce que l’intégration web ?

L’intégrateur web produit 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. Il utilise tout code informatique compatible avec les agents utilisateurs (les navigateurs web). Il créent le plus souvent des composés HTML & CSS pour déterminer le fond et la forme des éléments composant la page. Il peut ajouter de l’interactivité avec les utilisateurs en manipulant le DOM avec ECMAScript.

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

Qui fait de l’intégration web ?

Intégrateur web

Au sens strict, c’est celui ou celle qui découpe une maquette Photoshop (ou tout autre logiciel de traitement d’image) pour la transformer en page web à l’aide principalement de HTML et CSS. Il peut utiliser Javascript, le plus souvent sous la forme de plugin jQuery pour les carousels, les menus déroulants, etc

Webdesigner

C’est le graphiste spécialisé dans le web qui fait l’intégration de ses maquettes,

Développeur front-end

C’est le développeur PHP/Javascript qui fait la partie frontale du site en allant piocher les informations à afficher dans une base de données. Il utilise principalement PHP, Javascript, HTML et CSS.

Webmaster

Chargé d’alimenter le site web dont il a la charge, il peut être amené à coder les contenus ou à décliner des pages existantes.

Community manager

Ne rigolez pas. Oui, le community manager peut être amené à faire de l’intégration web.

La question subsidiaire est de savoir à partir de quel moment on devient un développeur qui fait aussi de l’intégration ?

Articles sur le même sujet

• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Quelques notes sur les fonctions de l'intégrateur web et de l'intégratrice web
• Définir le métier « intégrateur web » ou « intégratrice web »

Pour nous aider à choisir une conventions de codage pour les langages HTML et CSS, Google propose une liste de suggestions pour que tous les membres d’un projet partagent le même vocabulaire. L’idée est de se concentrer sur ce que l’on a à dire plutôt que sur comment le dire. Via le blog des nouvelles technologies.

→ Lire Google HTML/CSS Style Guide

Articles sur le même sujet

• CSS Selectors — Visualiser les sélecteurs CSS de manière interactive
• Quel est le coeur de métier de l’intégrateur web ?
• Recommandations pour développeurs web front-end
• Lutte des classes CSS !
• Tutoriels pour apprendre HTML & CSS

Exemple 1

Exemple de code permettant d’appliquer un style commun aux éléments commençant par .btn- et de décliner des styles spécifiques pour .btn-left ou .btn-right. Larry Botha dans About HTML semantics and front-end architecture.

[class*="btn-"] { } // Styles génériques
.btn-small { }      // Diminuer font-size
.btn-medium { }     // Taille par défaut
.btn-large { }      // Augmenter font-size
.btn-primary { }    // Faire flotter le bouton à gauche
.btn-secondary { }  // Faire flotter le bouton à droite
.btn-left { }       // Ajouter une icône à gauche des boutons
.btn-right { }      // Ajouter une icône à droite des boutons

Exemple 2

On peut aussi s’inspirer du modèle d’architecture de l’exemple précédent en jouant sur les classes multiples :

.btn { }            // Styles génériques pour les boutons
.icon-right { }     // Ajouter une icône à droite de n'importe quel élément
.icon-left { }      // Ajouter une icône à gauche de n'importe quel élément
.btn.icon-right { } // Ajouter une icône à droite du bouton
.btn.icon-left { }  // Ajouter une icône à gauche du bouton

Exemple 3

Autre manière d’application d’un style générique à un élément .item déclinable selon le contexte. Rapide et pratique, cette solution présente tout de même l’inconvénient de ne pas être totalement scalable si vous décider de créer un nouveau contexte tel que #header .item {}

.item {}             // styles génétiques pour item
#cart .item { }     // styles spécifiques pour item dans le contexte du panier
#category .item { } // styles spécifiques pour item dans le contexte des catégories
#product .item { }  // styles spécifiques pour item dans le contexte des produits

.item { }
.item-cart {  }
.item-category { }
.item-product { }

.item { }
.cart { }
.category { }
.product { }
.item.cart {  }
.item.category { }
.item.product { }

Pour aller plus loin

• Organiser ses classes CSS — Comment ça, il n’existe pas de consensus sur l’organisation des feuilles de style CSS ?
• SMACSS – Scalable and Modular Architecture for CSS. A flexible guide to developing sites small and large. (cf. SMACSS — Architecture évolutive et modulaire pour CSS
• About HTML semantics and front-end architecture  – Covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression.
• Writing efficient CSS selectors – The difference in speed between an ID and a class is almost totally irrelevant.

Articles sur le même sujet

• Quel est le coeur de métier de l’intégrateur web ?
• Guide de bonnes pratiques HTML & CSS par Google
• Tutoriels pour apprendre HTML & CSS
• Check your <body> avec le W3C
• SMACSS — Architecture évolutive et modulaire pour CSS

Learn HTML & CSS présente 10 leçons proposées par @shayhowe pour débuter avec HTML & CSS et développer votre premier site web :

1. Terminologie, syntaxe et introduction — Avant de commencer ce voyage dans HTML & CSS il est important de bien comprendre les termes utilisés.
2. Eléments et sémantique — Passage en revue des balises HTML et la sémantique qui leur est associée.
3. Modèle de boite et positionnement — Comment gérer la taille des éléments (largeur, hauteur, marges internes et externes, bordures) et comment les positionner (positionnement flottant, absolu, fixé).
4. Typographie — Mettre en gras, en italique, en exergue, utiliser les polices de caractère. Bref, tout ce qu’il faut savoir sur la gestion du texte pour rendre vos compositions plus belles et plus lisibles.
5. Fonds et dégradés — Les fonds sont un élément important pour attirer l’attention des visiteurs. Apprenez comment mettre une image en background ou un dégradé avec CSS3.
6. Listes (ordonnées, non-ordonnées et définition) — Les listes font partie de notre vie quotidienne : recettes, choses à faire, instructions, etc.
7. Images, audio et vidéo — Apprenez à gérer l’affichage des médias sur le web avec les dernières technologies et les fallbacks qui vont bien. Le point également sur les éléments figure et figcaption.
8. Formulaires — Les bases concernant les formulaires, les bonnes pratiques, des exemples.
9. Données tabulaires (tableaux) — La gestion des tableaux peut s’avérer complexe. Cette page fait le point sur chaque élément à connaitre.
10. Bonnes pratiques de développement et ressources — Les bonnes pratique de développement avec HTML & CSS : balisage sémantique et valide, bonne utilisation des attributs (notamment title et alt), séparation du fond et de la forme, les commentaires, les préfixes vendeurs, le regroupement et l’alignement des déclarations, etc.

Un bien joli site très didactique qui donne, pour chaque rubrique, l’ensemble des éléments et des attributs à prendre en compte avec de nombreux exemples pratiques. Un must-read (et oui, toutes ces bonnes choses sont écrites en anglais). Via @pomeh

CSS Débutant — Si vous êtes plus à l’aise avec le français, je vous invite à consulter le site de @PascaleLC où vous pourrez cultiver les standards du web :

1. Premiers pas en CSS — Pour appréhender progressivement et facilement les feuilles de style et les rudiments du HTML
2. Tutoriels CSS — Techniques pour réaliser des boutons, des formulaires, des menus, etc.
3. CSS3 – Créer des ombres, arrondir les coins, ou encore adapter ses pages aussi bien aux grands écrans qu’aux smartphones.
4. Boite à outils — Besoin d’un générateur de CSS ou de bouton, d’outils de développement ou d ‘une liste de discussion peuplée de gens compétents et sympas ? C’est là que ça se passe.

CSS : l’Art & la Science — Encore en français — et suggéré par LeonsaysHi –, ce tutoriel empreint de poésie et d’humour aborde avec intelligence les neuf points suivants :

1. Un tango se danse à deux — HTML & CSS, attributs, sémantique, flux
2. Le pinceau CSS — Syntaxe, sélecteurs, héritage
3. Au plaisir des yeux — Color, font, text, word
4. L’abîme — Background, sprite
5. La dimension de nos espérances — Height, width, margin, padding, border
6. Au vent favorable — Float, clear
7. La prise, l’empire du désir — Position : relative, absolute, fixed, static
8. Pratiques de base — Le petit bassin
9. Bonnes pratiques — Le grand bassin

Cours de XHTML conforme et accessible – Ce cours proposé par Normand Lamoureux est conçu pour vous permettre d’apprendre le XHTML 1.0 (langage de balisage hypertexte extensible). Un concentré de bonnes pratiques pour créer des pages Web qui répondent aux normes de qualité du W3C. 

Plan de cours :

1. Les outils
2. Balisage et absence de balisage
3. Les en-têtes et les paragraphes
4. Créer et imbriquer des listes
5. Votre premier fichier valide
6. Parenthèse sur le rôle du langage CSS
7. Faire des citations
8. Le gras, l’italique et compagnie
9. Créer des liens hypertextes

Articles sur le même sujet

• Check your <body> avec le W3C
• Quelques notes — Programme de formation HTML & CSS
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Quelques notes sur la balise h1 avec HTML5
• HTML5 et CSS pour l'intégrateur web

Principaux validateurs du W3C

• Unicorn– C’est le Validateur unifié du W3C pour :
  • Vérifier la conformité générale en effectuant tous les tests possibles.
  • Vérifier la validité pour les profils CSS 1, CSS 2, CSS 2.1 et CSS 3.
  • Vérifier la compatibilité avec les portables.
  • Vérifier la syntaxe des flux Atom ou RSS.
  • Un dernier choix permet de sélectionner les tests à effectuer parmi les items précédents.
• Markup Validation Service — Connu également sous le nom de Validateur HTML, ce service vérifie la conformité des formats HTML, XHTML, SVG ou MathML.
• Link Checker — Vérifie les ancres dans un document HTML / XHTML. Pratique pour faire le point sur les liens brisés.
• CSS Validator — Vérifie la conformité des feuilles de style CSS ou des documents qui comportent des styles CSS. Les trois derniers outils sont réunis dans Log Validator qui permet d’améliorer la qualité d’un site web pas à pas en cherchant les erreurs en premier lieu dans les documents les plus populaires. Plus d’information à ce sujet dans Passer aux standards Web rédigé par Karl Dubost (@karlpro).
• mobileOK checker — Vous développez pour les périphériques mobiles ? Ce service vous aidera à découvrir les points faibles de votre site lorsqu’il est affiché sur un smartphone.

Autres services du W3C

• Semantic Extractor — Affiche votre page web d’un point de vue  sémantique : outline, description, langages utilisés, etc.,
• RDF Validator — Vérification et affichage des documents RDF,
• Feed Validator — Vérification des flux de nouvelles aux formats ATOM et RSS,
• P3P Validator — Vérifie si un site est compatible P3P,
• XML Schema Validator — Outil en cours d’approbation par le W3C,
• Logiciels open source du W3C.

W3C Cheat Sheet

Valider c’est bien, encore faut-il savoir comment améliorer les éléments que ces fabuleux outils soumettent à notre sagacité. Si le W3C est capable de trouver la source des maux dont souffrent nos pages web, il nous donne aussi les clés pour améliorer notre pratique.

W3C Cheat Sheet est un outil open source que le W3C met librement à la disposition des développeurs web. Il fournit un accès rapide à tout un tas d’informations concernant les différentes spécifications publiées par le W3C :

• Moteur de recherche
• Mobile Web Best Practices
• Accessibility: WCAG2 at a Glance
• Internationalization Quicktips
• English Typography

Articles sur le même sujet

• Tutoriels pour apprendre HTML & CSS
• 9 ressources pour web designer
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations
• Améliorations cosmétiques et ergonomiques sur ce blog

The HTML Framework Project

L’idée d’un environnement de travail intégré n’est pas nouvelle. En remontant dans le temps, je suis retombé sur The HTML Framework Project que j’avais relayé ici dès 2008 dans une série d’article commencée avec The HTML Framework Project | Phase 1 — définir.

Bootstrap, Fondation et HTML5 Boilerplate

Bootstrap et Fondation ont une vocation globale en proposant des d’éléments d’interface graphique. Cet aspect GUI a toujours été le talon d’Achille du langage HTML par rapport à des langages de programmation qui offrent des nomenclatures unifiées pour créer des applications.

En plus d’un système de grille,  Fondation et Bootstrap proposent des éléments d’interface simples : bouton, formulaire, label ; ou plus complexes : boites modales, navigation par onglets horizontale ou verticale, menus déroulants, pagination ou encore fil d’Ariane, etc.

Pour les objets plus complexes, les deux frameworks utilisent des plugins Javascript qui font appel à la bibliothèque jQuery. A ce petit jeu, Bootstrap est certainement le plus complet.

HTML5 Boilerplate ne propose pas d’élément d’interface. Son domaine c’est la structure globale du projet, ce qui se passe entre les balises <head> et </head> et juste avant la fermeture du </body>, sans oublier les aspects liés aux performances du serveur avec un fichier .htaccess très complet. Tout cela en fait un complément «Bonnes Pratiques» idéal à Bootstrap ou Fondation.

Alors, les frameworks, c’est bien ou pas ?

J’aurai tendance à dire que tout dépend de votre projet, de vos compétences, du temps dont vous disposez, etc. Mais en réalité, la réponse est assez simple : il est important de passer du temps à faire de la veille pour se documenter et apprendre de nouvelles techniques. Le potentiel didactique de ces frameworks est presque inépuisable.

N’hésitez pas à visiter les dépôts Github des projets pour vous faire une idée. Vous serez ainsi de plus en plus capable de choisir votre framework (ou de ne pas en utiliser du tout) en connaissance de cause.

En bref : ne vous laissez pas enfermer dans un framework : les langages du web  ont été conçus pour être utilisé simplement, là tout de suite ; les frameworks imposent de se pencher sur une surcouche qui n’est pas toujours la meilleure façon de faire. Il est important de n’utiliser dans ses projets que des choses que l’on comprend bien (enfin au moins dans votre coeur de métier).

PS : Voir aussi 99lime HTML KickStart qui propose la gestion de la typographie, tooltips, boutons, navigation par onglets (tabs), fil d’Ariane, système de grille fluide en 12 colonnes, images, Slideshow (Carousel), Media, etc.

Articles sur le même sujet

• Mes thèmes WordPress Basics et Beyond Basics sont sur Github
• 940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid
• Nouvelle méthode de remplacement de texte par une image
• Quelques notes — Programme de formation HTML & CSS
• 390 ressources Javascript & jQuery

Le framework utilise également jQuery avec Orbit pour la mise en place d’un slider pour présenter n’importe quel contenu (texte, image, vidéo) même sur mobile ainsi que pour Reveal qui propose une gestion des fenêtres modales.

→ Foundation est disponible sur github.

Articles sur le même sujet

• 31 outils en ligne simples et efficaces pour les travailleurs du web
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• 390 ressources Javascript & jQuery
• Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)
• 7 outils en ligne pour l'intégration HTML & CSS

Développement web

1. jsfiddle — Idéal pour partager des bouts de code ou mettre en place des tests avec HTML, CSS, jQuery (ou Mootools, etc.). Voir aussi : JS Bin, Pastie, Pastebin.
2. MarkUp Validator – Utile pour tester la validité de votre code HTML (mais aussi XHTML, SMIL, MathML) selon les spécifications du W3C. D’autres outils de validation existent, notamment pour vérifier la conformité de CSS, RDF, RSS, XML. Quant à Link Checker, il vous permettra de vérifier si votre site contient des liens qui ne fonctionnent plus ; Semantic Extractor vous montrera vos pages du point de vue sémantique.
3. HTML-Ipsum – Bien sûr, rien ne vaut le texte définitif. Mais en attendant que votre client ne vous fournisse le Saint-Graal du Webdesign (le contenu), voici une ressource à garder sous le coude pour créer des blocs de HTML (paragraphes, listes ordonnées ou non, listes de définition, formulaires, titres et paragraphes plus ou moins longs, etc.), avec du faux-texte. Voir aussi Lipsum qui propose du faux-texte dans une quarantaine de langues.
4. Lorempixel — Choisissez une taille d’image et un thème en accord avec le sujet de votre site (parmi les 11 disponibles), puis cliquez sur Image couleur ou Niveau de gris pour obtenir un visuel de placement pour agrémenter vos pages remplies de Lorem Ipsum. Voir aussi Placekitten, Dummyimage ou Placehold.it.
5. CSSLisible — Tout droit sorti du labo de Darklg, cet outil réorganise vos CSS et change l’ordre des propriétés pour faciliter la lecture (et donc la maintenance) de vos feuilles de style. Attention, pour le moment, les commentaires sont retirés ! Voir aussi Styleneat.
6. PunyPNG — La compression d’image qui va bien. Cet outil optimise vos images en réduisant considérablement leur taille, sans perte de qualité. Voir aussi Smush.it.
7. Listes pour Webdesigner — Last but not least, voilà une liste d’une vingtaine de liste qui devrait faire plaisir aux accros des bons tuyaux !

Edition & travail collaboratif

1. Markdown Editor — J’ai adopté la syntaxe Markdown depuis déjà plusieurs années pour prendre des notes structurées et les transformer en billet via l’excellent plugin Markdown on Save pour WordPress. Pour en revenir à Markdown Editor, il vous permettra de transformer à la volée votre syntaxe Markdown en HTML sans forcément passer par un CMS…
2. Diigo — J’ai cherché une solution de bookmarks alternative à Delicious lorsque Yahoo! a cherché des repreneurs, il y a quelques mois. J’utilise régulièrement la Diigolet pour sauvegarder mes liens, prendre des notes et les partager sur les réseaux sociaux. Une fonction enregistre automatiquement les liens sur Delicious. Vous pouvez me retrouver sur mon compte Diigo. Voir aussi Scrible.
3. Notepad.cc — Mini éditeur en ligne, à l’image du Bloc-note de Windows. Idéal pour partager des notes, protégées ou non par mot de passe.
4. Ta-da List — Créer des listes  de choses à faire, réordonner les items, partager vos listes, etc. Un site de todolist simple et efficace, pour nous, qui avons toujours tant de choses à faire pour avant-hier. Voir aussi Workflowy.
5. Writeboard — Un outil pratique pour rédiger et corriger des textes à plusieurs. Chaque «Board» est accessible via une URL. Les révisions sont listées dans la marge avec le nom des personnes ayant apporté des modifications. Il est possible de s’abonner au flux RSS des modifications faites sur les documents.
6. Doodle — Organiser des réunions, des rencontres en créant des sondages pour connaitre le moment qui conviendra au plus grand nombre de participants. Vue Tabulaire (liste) ou vue Calendrier pour avoir une vue d’ensemble des disponibilités et des événements.
7. Twtpoll — Créer des sondages et des enquêtes d’opinion et partagez-les sur les réseaux sociaux grâce à une simple URL.
8. Kiwoos — Créez votre sondage en quelques clics … Et partagez-le sur Twitter et Facebook avec vos amis.

Réseaux

1. Ping.eu — Tout connaitre ou presque à propos d’une adresse IP ou d’un nom de domaine : 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  !

Dictionnaires et références

1. yoyodesign — Nombreuses traductions d’articles et de recommendations du W3C. Voir également la liste des traductions françaises des documents du W3C.
2. htmldog — C’est en anglais, mais la clarté des explications en fait une référence incontournable pour tout ce qui touche au développement web, avec un dictionnaire HTML où l’on retrouve toutes les balises passées au crible avec des exemples d’utilisation, les attributs requis, les attributs optionels et des exemples !
3. gotAPI — regroupe les principales API du web dans une interface Ajax très réactive : HTML, CSS, Javascript, jQuery, PHP, Ruby, asp, mais aussi le fonctionnement de certains CMS comme Drupal ou de services web comme Flickr.
4. Giminik — La liste des balises XHTML 1.1 (ou 1.0 Strict sans les éléments obsolètes), leur utilité, leurs attributs, leurs évènements et la relation entre parents et enfants (hiérarchie). Indispensable pour construire un document valide.
5. Guide HTML — Le HTML de A à Z de Laurent Bernat : 95 balises HTML décrites par le menu (version, compatibilité Netscape / IE, type, attributs, usage, exemples) (Merci Loïc M.).
6. Opquast — l’ensemble des bonnes pratiques pour la qualité des services en ligne. Abonnez-vous au fil RSS des bonnes pratiques pour avoir votre dose quotidienne.
7. Openweb — Les bonnes pratiques en action pour les technologies du web (XHTML, RSS, CSS, DOM, PNG) et les différents thèmes qui y sont associés (pages dynamiques, navigateurs, accessibilité, études de cas, mise en page, multimédia, structure).
8. Développez (pour le web) — toutes les technologies du web à portée de clic. Des tutoriels, des cours, des documents à télécharger. Allez, faites le plein !
9. Forum Alsacreations — Presque toutes les questions sur les CSS et le HTML et quasiment toutes les réponses ! Cerise sur le gâteau, la FAQ est complète et bien organisée.
10. Wiki Media Box — Pour obtenir une présention claire (succinte ?) d’une propriété CSS et sa compatiblité avec les navigateurs, c’est nickel (Merci Pierre le Bot).
11. Leftlogic — Permet de voir le code html d’un caractère, pratique lorsqu’on cherche le code pour ñ par exemple (Merci Anthony).
12. Format publicitaire AdSense — Et oui, qui n’a pas eu besoin de prévoir des emplacements publicitaires dans une charte graphique et de chercher les formats les plus courants ? Voici les formats en vigueur chez Google, qu’il s’agisse des formats textes, images ou vidéos.
13. WordReference — Sans doute le meilleur site de traduction (mot à mot en incluant les locutions idiomatiques). Pour les cas difficiles, vous pouvez utiliser le forum. Nombreux plugins Firefox pour la recherche par langue.
14. Les dictionnaires — Un maximum de dictionnaires thématiques classés par catégories : langue française, synonymes, encyclopédie, citations et expressions, gastronomie, humour, acronymes, etc. Mention spéciale pour le Trésor de la Langue Française Informatisée (TLFI pour les intimes) : interface web 0.2 mais très efficace (Florent V. sous souffle dans l’oreillette que l’on peut y accéder via le portail lexical du Centre national de ressources textuelles et lexicales.
15. BonPatron — Correcteur qui trouve des fautes d’orthographe et de grammaire en français.

N.’hésitez pas à partager vos services en ligne préférés dans les commentaires de ce billet, sur Twitter ou sur Google+, c’est vous qui voyez :-)

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Foundation — Framework HTML, CSS & jQuery
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Définir le métier « intégrateur web » ou « intégratrice web »
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

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 :

<?php
    $more_strings = array(
        "Read More...",
        "Keep on Reading...",
        "Wait! There's more...",
        "Read the rest of the article..."
    );
?>
<?php
    the_content($more_strings[rand(0,count($more_strings))]);
?>

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 !

• CSS Compressor,
• CSS Compressor Advanced (cssdrive),
• Cascading Style Sheets Optimization,
• Labo CSS.

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 :

1. Aller droit au but,
2. Alignement des labels,
3. Aide et astuces,
4. Validation,
5. Actions primaires et secondaires,
6. Actions en cours,
7. Erreurs,
8. Input inutiles,
9. Organisation du formulaire,
10. 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 :

<div id="MySplitter">
    <div> Left content goes here </div>
    <div> Right content goes here </div>
</div>

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 :

1. Cliquez sur Traffic Sources (Sources de trafic),
2. Puis sur Referring Site (Sites Référents),
3. Rendez-vous dans la liste des sites et cliquez sur Netvibes,
4. 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

• 100+ comptes Twitter pour webdesigner
• Améliorations cosmétiques et ergonomiques sur ce blog
• 35 blogs de développeurs web
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery

Si les spécifications sont très utiles pour comprendre la nature des ingrédients (balises HTML et propriétés CSS), elles ne nous disent pas grand chose sur la manière de les mettre en oeuvre pour réaliser un site web. S’il n’existe pas de recette toute faite, c’est certainement à cause des plats (les contenus) qui sont uniques.

Enfin, en même temps, on ne peut pas ne pas constater que les sites Web sont à 90% composés de :

• En-tête pour : logo, baseline, visuel, un ou plusieurs menus de navigation,
• Zone de contenu principale : texte, image, vidéo,
• Une, deux ou trois barre latérales (Sidebar) à droite, à gauche de la zone de contenu,
• Pied de page (Footer).

Depuis quelques temps, je réfléchis à la mise en place d’un plan de cours pour l’apprentissage du couple HTML & CSS. Dans l’idéal, cette formation devrait être :

1. Assimilable rapidement par les débutants qui n’ont jamais vu une balise HTML ou une règle CSS,
2. Convainquante pour inciter les créatifs à se pencher sur les notions d’intégration web,
3. Intéressante pour ceux qui utilisent ces langages dans leur vie professionnelle ou en amateur (dans le noble sens du terme).

La plupart des plans de cours sur le sujet séparent souvent l’étude du HTML des CSS. J’aimerais mettre en place une méthode globale s’inspirant (très librement) de la Programmation Orientée Objet (POO), en initialisant un super objet — le site web — englobant d’autres objets comme le header, la sidebar, les menus et les différentes zones de contenu que l’on trouve généralement dans un site internet ou sur un blog (titres, sous-titres, paragraphes, liste, etc.). A cet égard, HTML 5 permet d’aller dans ce sens avec les balises header, nav, article, aside, footer.

CSS et HTML sont dans un bateau…

Sans le HTML, les CSS ne servent à rien. Dans la pratique, on rencontre rarement HTML sans CSS. Au lieu d’aborder les deux langages de manière séquentielle, j’envisage de démarrer par la mise en place d’un vocabulaire de base qui fournirait les briques élémentaires nécessaires à la construction d’un site web. Cela pourrait s’effectuer en abordant les deux langages simultanément tout en ajoutant les notions d’ergonomie et d’accessibilité  : les bonnes manières s’apprennent dès le début.

Ces briques seraient composées de bouts de code, de module, de composés HTML & CSS «prêts à l’emploi» à expliquer aux apprenants par le biais d’exercices pratiques qui débuteraient le plus tôt possible dans la formation. L’apprenant serait ensuite invité à assembler ces briques pour construire une page web. Le formateur fournissant à cette occasion les indispensables conseils, trucs et astuces concernant l’apparence sur les différents navigateurs, l’utilisation des commentaires conditionnels, etc., selon le temps disponible.

Parmi les méthodes proposées dans les commentaires du billet d’Aymeric, nombreuses sont celles qui préconisent de partir du contenu pour commencer l’apprentissage de HTML. Je suis généralement le premier à prendre mon Stabilo ® pour baliser le contenu avant même de prendre une tablette graphique ou mon Notepad++. Toutefois, intégrer le balisage du contenu dans la formation peut s’avérer chronophage et ne pas trouver sa place dans le temps généralement impartie dans les centres de formation où un module de base dure rarement plus d’une semaine.

En outre, indépendamment du contenu, l’immense majorité des sites web partage les mêmes caractéristiques. On pourrait passer beaucoup de temps à lister tous les éléments constituant un site et faire des statistiques pour savoir si tel ou tel élément se retrouve le plus souvent dans le header, la sidebar ou le footer, etc. mais force est de constater qu’à ce niveau, un consensus se dégage : le logo, la baseline et le menu principal se retrouvent dans haut de la page tandis que les informations de contact et de copyright se situent plutôt en bas de la page !

On pourrait donc, dans le cadre d’une formation sur cinq jours,  fixer les idées autour des zones que l’on rencontre généralement sur les sites web ou les blogs :

1. un header (pour le logo, la baseline, la navigation principale et les liens d’évitement),
2. une zone de contenu…
3. … associée à une ou plusieurs barres latérales,
4. avec un footer (contact, crédits, copyright) pour finir.

Ce découpage mélange joyeusement l’analyse fonctionnelle et la présentation, mais présente l’avantage de fixer les idées sur des choses auxquelles les apprenants ont été confrontés, ce qui a son importance.

Pour aborder l’apprentissage des balises et la sémantique qui leur est associée, je propose de partir du logo qui peut être le premier niveau de la page d’accueil (ce n’est pas gravé dans le marbre, cf. 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO).  On pourra lui réserver la balise h1 avec un background pour l’image. On pourra masquer le texte d’une manière ou d’une autre.

Partant du principe qu’une zone de menu sera souvent composée avec une liste de liens, il me semble utile de proposer dès le début les méthodes généralement utilisées pour faire flotter les li, transformer les a en bloc, utiliser les images de fonds, etc.

Une zone de contenu secondaire est souvent représentée par une barre latérale placée à droite ou à gauche de la zone de contenu. Pourquoi ne pas introduire directement les notions de positionnement avec float et les positions relative et absolute ? Pour un débutant, ces notions ne sont pas plus difficiles à comprendre que le reste. Je me dis qu’elle seront peut-être même plus rapidement assimilées en les abordant dès le début, même si les notions de contexte de formatage ou de clearing ne sont pas très évidentes au premier abord.

Je reviendrais sur le sujet un peu plus tard selon vos retours. L’objectif est de remplir un programme de formation détaillé sur 5 jours permettant à des personnes ayant des pré-requis réduits au minimum de pouvoir créer une page web «classique».

Pour ne pas conclure

Ce billet est une ébauche que je compléterais au fur et à mesure avec vos suggestions. Ce billet traine dans mes brouillons depuis que Aymeric a eu — dès 2007 — l’excellente idée de synthétiser les commentaires qui avaient suivis son billet sur le plan de formation idéal pour l’apprentissage de XHTML et des CSS que je vous invite à lire sans plus attendre.

Linkographie

• http://openweb.eu.org
• http://www.opquast.com
• http://www.w3schools.com
• http://fr.html.net/tutorials/html
• http://slaout.linux62.org/html_css/html.html
• http://www.elitwork.com/xhtml_tutoriel.html
• http://www.martiusweb.net/category/Tutoriaux/XHTML-CSS
• http://www.siteduzero.com
• http://css.mammouthland.net
• http://www.la-grange.net/w3c/html4.01/cover.html
• http://www.w3.org/TR/html5 et http://dev.w3.org/html5/spec-author-view/spec.html
• http://j-willette.developpez.com/tutoriels/html/les-bases-du-html
• http://reference.sitepoint.com
• http://htmldog.com

Articles sur le même sujet

• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Quelques notes sur la balise h1 avec HTML5
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire