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

Diviser pour mieux régner

1. Base — Il s’agit des réglages par défaut valables pour l’ensemble de votre projet. Ils devraient se composer exclusivement de sélecteurs simples, mais peuvent comporter des sélecteurs d’attributs, des pseudo-éléments , des sélecteurs frères ou enfants. Cf. 5 Reset CSS à la loupe.
2. Maquette — Ces règles divisent la page en plusieurs sections qui peuvent comporter un ou plusieurs modules. Cf. Choisir un framework HTML & CSS.
3. Module — Ce sont les parties modulaires, réutilisables de votre page (légende, mise en exergue, fiche produit).
4. Etat — Ces règles spécifient : le comportement de la maquette et des modules  selon le contexte (activé / pas activé, affiché / masqué) ; l’affichage de la page selon la résolution de l’écran ; ou l’apparence de tel module selon qu’il se trouve en page d’accueil ou en page «intérieure».

Convention de nommage

Une fois que l’on a divisé nos règles CSS, il devient facile de mettre en place une nomenclature adaptée pour savoir du premier coup d’œil à quel élément l’on a affaire : quel est son rôle dans la page, sa portée, etc.

Pour cela, on peut utiliser des préfixes, comme l- ou layout- pour les éléments de la maquette (layout), mais grid- fonctionne très bien aussi ! Pour préfixer les règles d’état, on peut utiliser is- pour is-hidden ou is-collapsed. Les modules composent généralement la plus grande partie d’un projet. C’est pourquoi mettre un préfixe module- systématiquement est plus verbeux qu’autre chose. Préférez plutôt le nom du module lui-même, et basta !

Exemples de classes

/* Callout Module */
.callout { }
/* Callout Module with State */
.callout.is-collapsed { }
/* Form field module */
.field { }
/* Inline layout */
.l-inline { }

Il devient facile de décliner votre maquette selon le contexte. Par exemple pour permuter l’article et la barre latérale :

#article { float: left; }
#sidebar { float: right; }
.l-flipped #article { float: right; }
.l-flipped #sidebar { float: left; }

#article {
    width: 80%;
    float: left;
}
#sidebar {
    width: 20%;
    float: right;
}
.l-fixed #article { width: 600px; }
.l-fixed #sidebar { width: 200px; }

Identifiant vs. classe ?

Ces exemples utilisent des sélecteurs d’ID pour la maquette mais rien ne vous empêche d’utiliser des classes (voire même un framework CSS) : la différence de performance entre les deux est quasi-inexistante.

Par ailleurs, à cause de leur poids plus important, les identifiants peuvent poser des problèmes de spécificité et nécessiter l’ajout de sélecteurs inutiles pour surclasser telle ou telle déclaration.

Pour aller plus loin

Après ce rapide aperçu, je vous invite à vous procurer SMACSS aussi vite que possible pour découvrir toute une floppée de trucs et astuces qui vous aideront à organiser vos maquettes, vos modules et les états qui vont avec.

Notez que l’auteur précise que ses conseils ne sont pas à suivre aveuglément. Toutefois, il insiste tout de même sur le fait qu’il est important d’avoir des conventions documentées et de s’y tenir.

SMACSS est un livre électronique dont on peut obtenir la dernière version à partir de 9$ pour la version Kindle (ou 15$ pour la version PDF, ePub et mobi).

→ Notez que la version originale est disponible gratuitement en ligne.

Articles sur le même sujet

• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• Lutte des classes CSS !
• 940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid

Mini « framework » PHP

Envie d’utiliser des fonctions PHP génériques pour les tâches les plus courantes d’un projet web ? Ange Chierchia @nighcrawl répond à la question Pourquoi créer son propre « framework » PHP ? et nous propose son jeu de fonctions peaufiné au fil des projets :

• Ajouter un enregistrement dans une table,
• Mettre à jour les informations d’un enregistrement,
• Supprimer un enregistrement,
• Retourner une liste d’enregistrements,
• Mettre en place un système de pagination.

Chaque partie est détaillée et propose un exemple d’utilisation. Un article comme on aimerait en lire plus souvent.

Conditional JavaScript and CSS

Une bonne pratique consiste à ne charger les JS et les CSS que lorsqu’on en a besoin. Au-delà de la fonction wp_enqueue_script, l’article aborde le chargement des ressources associées à une page en particulier grâce à des fonctions telles que :

• wp_enqueue_script
• get_query_template
• add_filter
• wp_enqueue_style
• is_admin
• {$type}_template
• wp_head

Human Coders

A l’initiative de @camilleroux et @matthieusegret, Human Coders propose une série de sites consacrés aux différents langages du web sous la forme de bookmarks thématiques commentés. Voici les liens et leur flux RSS :

• HTML5Live — RSS
• JSLive — RSS
• phpLive — RSS
• RubyLive — RSS
• Et plus à venir…

Guide stylistique…

… de la Commission de la fonction publique. Ce guide stylistique traite des normes de rédaction à respecter pour tout document de la CFP. La première section répertorie par ordre alphabétique les règles générales ayant trait à la typographie; la seconde, énonce les règles particulières s’appliquant aux documents suivants :

• Rapport annuel,
• Rapports d’évaluation,
• Correspondance et les allocutions de la présidente,
• Documents affichés sur le Web.

99lime HTML KickStart

Dans la lignée de Bootstrap, 99Lime est un framework complet avec un jeu de composant impressionnant : typographie, tooltips, boutons, navigation par onglets (tabs), fil d’Ariane, système de grille fluide en 12 colonnes, images, Slideshow (Carousel), Media, etc. Via @nbirckel. Lire Choisir un framework HTML & CSS parmi une liste de plus de 40 projets !

Responsive Navigation Patterns

A l’heure du Responsive Web Design, le choix de l’emplacement du menu de navigation sur mobile est crucial : comment allier gain de place et ergonomie ? Traduction française dans Quels choix de navigation en responsive design ? Via @StephaneChonez

Taming Advanced CSS Selectors

Comprendre les sélecteurs CSS avancés pour mieux les utiliser. Un billet déjà ancien mais qu’il est utile de garder sous la souris :-)

Articles sur le même sujet

• 35 blogs de développeurs web
• WordPress de A à Z — E comme Extensions (les plugins)
• Le petit journal du Web — 31 décembre 2010
• 100+ comptes Twitter pour webdesigner
• Améliorations cosmétiques et ergonomiques sur ce blog

«image replacement» : une autre technique

Une nouvelle technique de remplacement par l’image a récemment été ajoutée au projet HTML5 Boilerplate. Ce billet explique son fonctionnement et comment elle se situe par rapport aux autres méthodes, utilisant text-indent notamment.

Voici le bloc CSS qui a fait son apparition dans la récente mise à jour de HTML5 Boilerplate et le framework Compass :

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Comment ça marche ?

1. font:0/0 a — Ce raccourci met à zéro les propriétés font-size et line-height. La valeur a fonctionne comme un raccourci pour font-family : font-size: 0; line-height: 0 et font-family: a. C’est une idée reprise de l’implémentation BEM. Bien que le validateur CSS fait sa chochotte avec les valeurs 0/0, il faut savoir que tous les navigateurs acceptent cette syntaxe et qu’il s’agit d’une erreur d’interprétation du validateur. En effet, si l’on utilise font: 0px/0, tout va bien, alors que dans le même temps, le validateur affiche font: 0/0.
2. text-shadow:none –- Permet de s’assurer que les ombres portées avec text-shadow sont supprimés du texte pour éviter l’apparition d’une ombre portée par-dessus le background.
3. color:transparent -– Requis pour les navigateurs qui ne parviennent pas à rendre le texte complètement invisible, comme Safari 4 ou certains navigateurs pour mobiles. Les versions d’Internet Explorer IE6/7/8 ne reconnaissent pas cette valeur pour la propriété color, mais heureusement, les versions IE7/8 ne montrent rien et IE6 n’affiche qu’une très légère trace du texte.

Dans HTML5 Boilerplate, nous avons également supprimé les éventuelles bordures et couleur de fond :

/* For image replacement */
.ir {
    border:0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background-color: transparent;
}

Avantages par rapport à text-indent

Cette nouvelle technique évite les problèmes posés par la méthode de remplacement via text-indent, notamment les pertes de performances. Notez que ces dernières affectent également la dernière méthode proposée par Scott Kellum qui vise au départ à améliorer les performances sur iPad 1.

1. Fonctionne sur IE6/7 sur les éléments de type inline-block. Cf. les problèmes liés aux techniques basées sur l’indentation de textes à l’adresse http://jsfiddle.net/necolas/QZvYa/show/
2. N’implique pas la création d’une boite en dehors de la surface visible de l’écran qui entraine une baisse des performances.
3. Plus besoin de spécifier d’alignement de texte ou de masquer le contenu qui dépasse car le texte de la nouvelle méthode ne prend tout simplement plus de place.
4. Inutile de masquer les éventuelles balises ou d’utiliser un contournement avec display:inline impliqué par l’indentation du texte.
5. En tout état de cause, cette technique nécessite moins de lignes de code.

Effets de bord

Aucun hack de remplacement par image n’est parfait :

1. Laisse une légère trace de texte sur IE6.
2. Implique de ne pas utiliser l’unité em pour les marges de l’élément sur lequel vous appliquez cette technique, vu que la taille du texte est réglé à zéro.
3. Windows-Eyes a un bug qui empêche la lecture du texte caché par cette méthode. Il n’y a en revanche aucun problème avec les autres lecteurs d’écran testés. Merci à @jkiss pour ses précisions et à @wilto pour avoir confirmé que cette méthode fonctionnait avec JAWS 12 dans IE 6/7/8 et Firefox 4/5/6.
4. Comme beaucoup de méthodes de remplacement par l’image, elle ne fonctionne pas si les CSS sont chargées mais que les images ne le sont pas.
5. Le texte n’est pas caché si le visiteur a une feuille de style utilisateur avec une déclaration font-size se terminant par !important pour l’élément où vous avez appliqué la class .ir.

Il est utile de noter que le remplacement par l’image utilisant les pseudo-éléments — NIR image replacement — évitent ses désagréments mais ne fonctionne pas correctement sur IE6/7.

Pour finir

J’utilise cette technique sans encombre depuis que Jonathan Neal et moi-même l’utilisons dans le cadre d’un test de clearfix commencé il y a un an environ. Le framework BEM utilise également cette technique pour ses icônes. L’idée principale fut proposée dès 2003 mais le rendu des navigateurs de l’époque n’a pas permis une large diffusion de cette méthode.

Si vous rencontrez des problèmes en utilisant cette technique, merci de détailler le bug.

Traduit de l’article Another CSS image replacement technique avec l’aimable autorisation de l’auteur ⁽¹⁾.

⁽¹⁾ Nicolas Gallagher (@necolas) est un développeur web front-end freelance basé à Londres. Il a co-créé Normalize.css et il fait partie des développeurs du projet HTML5 Boilerplate.

N’hésitez pas à me faire part de vos remarques sur les contresens (l’anglais était ma 3e langue), les fautes d’orthographe et d’une manière générale tout ce qui pourrait être préjudiciable à l’article d’origine.

Edit du 09/04/2012 — N’hésitez pas à jeter un oeil sur l’article : My thoughts about the latest Image Replacement techniques qui pointe les défauts de ces nouvelles méthodes de remplacement de texte par une image.

Articles sur le même sujet

• HTML5 et CSS pour l'intégrateur web
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Une solution CSS accessible pour remplacer du texte HTML par une image
• 8 techniques CSS pour remplacer du texte HTML par une image
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

1. Standards du W3C — Après un bref historique sur l’histoire du HTML et les travaux du W3C et du WHAT WG, la présentation aborde le niveau de prise en charge des propriétés et API’s HTML5 par les navigateurs. Une présentation simple, rapide et qui va à l’essentiel.
2. Accessibilité des icônes “@font-face” — Le côté séduisant des icônes créées avec la propriété font-face ne doit pas nous faire oublier de penser à leur accessibilité par les lecteurs d’écran. (cf. 11 vidéos pour comprendre l’accessibilité).
3. CSS Color Palette extractor — Extrait les couleurs d’une feuille de style CSS sous la frome d’une palette des couleurs et des niveaux de gris. Idée originale et pratique de @mauriz.
4. Google Developper — Le site de Google pour maitriser les API’s de Google : Google+, Android, Chrome, Google Maps, Google TV, le e-commerce, etc.
5. Learning JavaScript Design Patterns — Un cours complet sur les bonnes pratiques de développement avec Javascript et jQuery.
6. ColorHexa — Informations sur les couleurs et conversion vers les modèles Hexadecimal, Binaire, RVB, CMJN, TSL, CIE-Lab, etc. ColorHexa gère également les correspondances de couleur complémentaire, analogique, triadique ou monochromatique.
7. Microthemer — Un plugin pour personnaliser votre thème WordPress visuellement, sans connaissance technique particulière. Fonctionne pour les thèmes : Twenty Eleven, Twenty Ten, Thematic et Toolbox. Via @BoiteAWeb.
8. Typography Converter — Un outil de conversion de mesures typographiques parmi la myriade des convertisseurs  disponibles sur unitconversion.org. Un must-have à garder sous la souris.
9. La timeline de la création numérique — Last but not least, voici une présentation rapide de mon nouveau projet pour tous les designers : web, print et au-delà.

Retrouvez-moi sur Twitter à travers mon compte @br1o, histoire de faire plus ample connaissance o/

Articles sur le même sujet

• Améliorations cosmétiques et ergonomiques sur ce blog
• Check your <body> avec le W3C
• Le petit journal du web — WordPress, développement web, etc.
• Le Petit Journal du Web — 09/2011
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign

Remplacement de contenu

Le remplacement de contenu sera certainement une des nouveautés-phare de la prochaine version de Photoshop. Une fois votre sujet sélectionné, vous pouvez le déplacer dans l’image et Photoshop s’occupe de faire le ménage derrière vous en remplaçant votre sujet par l’environnement qui aurait du se trouver là. Une sorte de Content-Aware mélangé avec l’outil pièce, du grand art ! Via Wisibility.

Autres nouveautés ou améliorations de CS6 :

• Interface sombre pour une meilleure immersion dans l’image et une intégration plus poussée avec Lightroom,
• Nouveaux contrôles dans Camera Raw,
• Outil Fluidité amélioré avec notamment la possibilité d’augmenter la taille de la brosse et de travailler directement dans l’image,
• Edition des tracés vectoriels comme dans Illustrator,
• Enregistrement des fichiers volumineux en tâche de fond pour continuer à travailler sur un autre fichier.

→ Plus d’informations sur la chaine Youtude de Photoshop.

Adobe Creative Cloud

Adobe Creative Cloud : 5 services, 19 applications, 2 communautés et plus à venir

Creative Cloud — Dans quelques mois, Adobe proposera la Creative Suite à la location à l’année pour la modique somme de 49,99 dollars par mois. Pour ce prix, nous disposerons d’une myriade de logiciels à télécharger sur notre poste de travail, dont les célèbres Photoshop®, InDesign®, Illustrator®, Dreamweaver® et de nombreux autre outils comme Adobe Typekit pour accéder à des milliers de polices de caractère. C’est presque indécent de la part d’Adobe de nous proposer tous ces logiciels : il n’y a toujours pas plus de 24 heures dans une journée !

Cette initiative est très intéressante. Les créatifs pourront goûter aux joies de la suite d’Adobe sans être obligé de s’endetter sur 20 ans ou de risquer 20 ans de prison pour utilisation de logiciels contrefaits ! Pour le prix d’une journée et des poussières de facturation, la Creative Suite est dans la poche pour toute une année et ça fait bien plaisir :-)

Articles sur le même sujet

• Editeur de dégradés CSS3 à la mode de Photoshop
• Optimiser les images PNG, JPG, GIF
• Notes de lecture : « Responsive Web Design »
• Astuce CSS3 et RGBA avec les outils de développement de Google Chrome
• L'intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

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

Journaliste, un métier à reconfigurer

Pour accompagner ce billet, je vous propose d’ouvrir un onglet à côté et d’écouter Gladiator, le duo entre Lord Kossity et Jacky pour pimenter le débat.

(Lord Kossity) Lord Kossity dans l’arène j’suis un warrior J’vais t’kill j’suis un barbare dans la guerilla.

Pour commencer, Lord Kossity attaque fort en allant voir ce qui se passe dans la tête d’une femme au foyer avec un billet intitulé Journaliste, un métier à reconfigurer. L’analyse est aussi claire qu’efficace : le différent entre blogueurs et journalistes tient en peu de mots : obsolescence des seconds face aux nouvelles technologies, sans compter que rien que cette expression ressemble déjà, pour la plupart d’entre nous, à une photo sépia…

En prime, Mimi nous propose une vidéo de l’intervention du journaliste Francis Pisani au CFJ (Centre de Formation des Journalistes) qui sonne comme le plaidoyer d’un homme d’une génération née bien avant l’invention du microprocesseur [...] pour un journalisme moderne résolument multimédia, face un parterre de jeunes aspirants journalistes qui semblent découvrir pour la plupart les flux RSS, les wikis, les digg, les del.icio.us etc.

FRANCIS PISANI AU CFJ par lucos

Professionnels vs amateurs

(Jacky) A ce qui paraît j’suis là pour un clash, une mise à l’amende. Dès la deuxième mesure j’te l’dis tu tiendras pas un round.

Jacky continue donc avec le billet de sandrine Szabo du blog profession-web qui arrive à l’instant dans mon lecteur de mail (le hasard fait bien les choses) et qui s’interpose dans le débat entre les professionnels (les journalistes) et les amateurs (les blogueurs). Il semblerait quand même que les blogueurs « amateurs » n’aient rien à envier à leurs hétérologues journalistes professionnels en terme de capacité d’analyse et de réactivité sur l’information et de dialogue avec les lecteurs ! Un comble, non ?

Journalisme vs blogging

Il faut remonter dans le temps pour trouver un texte qui, sans mettre tout le monde d’accord, permet d’aborder la question du journalisme vs blogging, sous un autre angle.

Cyril Fievet commente une décision de justice rendue en Californie en 2006 selon laquelle « toute publication régulière d’informations en ligne assimile son auteur à un journaliste, protégé — en Californie au moins — comme un journaliste professionnel ». De sorte que la pratique du journalisme ne résulte pas d’une logique sociologique ou économique et que « Les blogueurs qui pratiquent le journalisme sont des journalistes. Point final. »

5 siècles pour apprendre son métier…

C’est vrai qu’après 500 ans de diffusion d’informations up to bottom on comprend (ou pas) que les jeunes générations de journalistes peinent à se former par leurs propres moyens… Mais qui va donc informer les informateurs, hein ?

Bref, de toutes manières, si le débat a encore de l’avenir sur le fond, sur la forme, c’est déjà la fin, vu que j’imagine mal un journaliste ne pas tenir aussi un blog pour faire son travail sérieusement. Ne serait-ce pour soumettre ses idées à des lecteurs avertis avant publication pour éviter les approximations ou erreurs d’interprétations dont les journalistes sont friands ^__^v

Nous en revenons donc au refrain de Gladiator qui, je l’espère, vous aura accompagné tout au long de ce billet ;-)

(Jacky & Lord Kossity) Choisis un adversaire de ta portée ! Les gladiateurs sont dans l’arène et le combat est lancé. Qui de toi ou moi va l’emporter ? Jusqu’à la mort ça va saigner, un seul devra rester.

A méditer

La France compte l’une des « blogosphère » les plus dense et, au pays des lumières et de la révolution, l’heure est semble-t-il arrivée de tenter d’éditorialiser ce foisonnement, par nous même, d’analyser et de mettre en avant le meilleur des contributions « journalistiques » et spontanées. (six35.fr).

Note : Cet article date de 2008 mais il m’a semblé intéressant de le publier malgré tout, histoire de faire mentir celles et ceux qui prétendent que le web est une fuite en avant qui ne regarde jamais en arrière pour prendre le temps de la réflexion ^^

Articles sur le même sujet

• Vis ma vie d'intégrateur HTML
• Le prêt-à-bloguer bride-t-il la créativité ?
• Ma vie et mes avis numériques sur la blogosphère «people», le «web beuh zéro» avec parfois beaucoup de recul
• Sites de contenus vs sites commerciaux ?
• Les Editions Thélès à livre ouvert

WordPress

• Optimiser la base de données – Avec le temps, les performances de WordPress baissent à causes des modifications qui affectent la base de données. Pour retrouver un WordPress frais comme un gardon, sortez les gants et préparez-vous à faire le ménage.
• Performances dans WordPress — Des conseils pour optimiser les images, l’inclusion des fichiers Javascript et CSS, la gestion du cache, le nombre de requêtes dans les templates, les appels aux API externes et le fichier .htaccess.
• Vendre des thèmes WordPress — Présentation de Francis Chouquet à l’occasion de WordCamp Paris sur son retour d’expérience concernant la vente de thèmes WordPress à travers le site Peaxl.com.
• Site de presse avec WordPress ? — Retours d’expériences de Lagazette.fr, un «gros» site qui tourne sous WordPress.
• Hegemony of WordPress – Si Drupal et Joomla! n’ont (presque) rien à envier à WordPress, comment expliquer l’hégémonie de WordPress lorsqu’il s’agit du choix d’un CMS ?
• 10 Must Have Hacks For WordPress – Voici 10 fonctions à copier-coller dans votre fichier functions.php pour obtenir : des boucles personnalisées, une liste de billets en relation avec d’autres en fonction des tags qu’ils partagent, afficher les billets populaires dans la sidebar, afficher des publicités dans le flux RSS, ajouter un fil d’Ariane pour guider vos visiteurs, afficher une sidebar selon l’article affiché, etc.
• Créer un thème de A à Z — Ce tutoriel écrit par @bbx est destiné aux graphistes et aux intégrateurs qui débutent dans WordPress. Néanmoins, une connaissance du HTML et des CSS est requise. Si vous le souhaitez, allez lire [son] autre tutoriel : CSS l’Art et la Science.

Développement web

• DocHub – Recherche instantanée dans la documentation des langages CSS, HTML, JavaScript, ainsi que du DOM et de jQuery. N’oubliez pas le compte Twitter @documenthub. Via @ThierryRoget du blog éclectique roget.biz.
• Friendly Bit – Le blog du développement qui vous écoute ! Des articles de qualité sur le développement web moderne et comment bien l’utiliser.
• jQfundamentals – Tutoriel complet sur jQuery (contenant de nombreux exemples d’illustration) écrit par Rebecca Murphey avec notamment les contributions de James Padolsey (@padolsey) et Paul Irish (@paul_irish) dont voici les 11 chapitres :
  1. Welcome,
  2. JavaScript Basics,
  3. jQuery Basics,
  4. jQuery Core,
  5. Events,
  6. Effects,
  7. Ajax,
  8. Plugins,
  9. Performance Best Practices,
  10. Code Organization,
  11. Custom Events.
• Syntaxe des classes JavaScript – Tutoriel pour les développeurs PHP qui se lancent dans un projet JavaScript dépassant le simple scripting. Par Jean-Pierre Vincent (@theystolemynick).
• jQuery.Buzz() — Restez à l’écoute de jQuery avec des ressources quotidiennes en provenance de sources diverses ete variées. Le site est parfois long à répondre ; suivre le compte Twitter @jquerybuzz ou s’abonner aux flux RSS du site est peut-être préférable.
• Maquettes d’interfaces graphiques – Liste commentée de 18 outils disponibles sur MacOS, Windows et Linux pour réaliser des maquettes d’interface graphique (mockup ou prototype de site web).

C’est cadeau (ou pas)

• SMACSS (Scalable and Modular Architecture for CSS) — Guide en ligne (gratuit) ou aux formats PDF, ePub et mobi (pour $15, soit 11.58 petits euros) de Jonathan Snook pour apprendre comment structurer ses CSS pour allier souplesse et maintenance à mesure que vos projets et vos équipes grandissent. Via t37.net.
• Design Professionalism – Le guide du designer pour reprendre le contrôle de votre métier. Qu’est-ce que le métier de webdesigner ? Comment s’y forme-t-on ? Que peut-on attendre de ce métier parfois fascinant et souvent ingrat ? Andy Rutledge répond à toutes nos interrogations existentielles.

C’est fini !

Articles sur le même sujet

• 9 ressources pour web designer
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le Petit Journal du Web — 09/2011
• WordPress de A à Z — E comme Extensions (les plugins)
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples