Ce petit journal du web de milieu de mois propose un résumé des liens qui ont atterri dans mes filets (la liste complète est disponible sur mon compte Diigo). Dans ce billet, vous trouvez : les articles parus sur la timeline 4design.tl ces derniers temps ; le blog de Mathieu consacré à une veille active sur jQuery et d’autres frameworks Javascript ; une série d’articles parus dans le train de 13h37. Vous trouverez également des articles sur la propriété @font-face, le fichier .htaccess, les backgrounds multiples, ainsi qu’une mise en garde contre a { outline: none }. Pour finir, je vous propose un outil en ligne pour créer des flèches en CSS.

A lire sur 4design.tl

• Bariol, la cerise sur la typo – Police de caractère lisible même dans les petits corps, grâce à des formes sobres et une construction sans fioriture.
• Liquid Slider – Slider responsive HTML5 & CSS3 pour le web et les mobiles.
• WordPress Basics 0.5.1 — Mise à jour du thème Basics avec la dernière version de HTML5 Boilerplate 4.0.1 et une corrrection de bug concernant le Shortcode permettant d’afficher les images.
• Faire un rapport de bug simple et efficace – La correction des bugs, c’est aussi du design ! A quoi ressemblerait votre site si les bugs d’affichage n’étaient pas résolus ?
• 52 frameworks CSS — Mettez une grille dans votre design ! Pas mal de nouveaux frameworks CSS à garder sous le tapis de souris.

A lire pendant le p’tit déj’

• To be geek or not to be — C’est le blog de Mathieu Robin consacré à une veille très active sur jQuery, jQuery UI et AngularJS notamment. Un must-read pour se tenir au courant de l’actualité des frameworks Javascript !

Lu dans le train de 13h37

• Apprendre à apprécier les parties les moins sexy de CSS – Petite mise en lumière de certaines règles CSS discrètes mais utiles. Traduction de l’article Learning to Love the Boring Bits of CSS écrit par Peter Gasston.
• Aide-toi, le Web t’aidera — Comment faire face à un bug récalcitrant ou une mission trop complexe pour vos connaissances ? Marie Guillaumet nous rappelle intelligemment combien nous avons la chance d’appartenir à des métiers où l’entre-aide est présente.
• Les microdonnées par l’exemple — Vous êtes toujours dans le wagon ? Profitez-en pour faire le point sur l’implémentation des microdonnées dans vos pages web.

Lu ailleurs

• Comment utiliser une police personnalisée sur un site Web ? — Tutoriel complet sur la propriété @font-face.
• Le fichier htaccess — Le point sur ce fichier qui offre des fonctionnalités en terme de performances web, de SEO, etc.
• a { outline: none } – NE FAIS PAS ÇA !

Lu en anglais

• Mastering CSS3 Multiple Backgrounds – Le point sur l’intérêt de la propriété CSS3 Multiple Backgrounds et son utilisation, exemples à la clé.
• WordPress Basics 0.5 — HTML5 Boilerplate 4.0.1 and fix for caption shortcode

A tester !

CSS ARROW PLEASE! — Envie de créer des flèches en CSS qui pointent en haut, en bas, à droite ou à gauche pour faire des bulles de dialogues sans image ? Cet outil en ligne est pour vous ! Via @graphitruc.

Articles sur le même sujet

• 37 blogs de développeurs web
• 390 ressources Javascript & jQuery
• 24 listes pour Webdesigners
• Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek
• Foundation — Framework HTML, CSS & jQuery

Bootstrap est un framework CSS & Javascript conçu pour accélérer et faciliter vos développements «front-end». C’est devenu le couteau suisse du web : on y trouve une lame adaptée pour chaque besoin, ou presque. Une fois que Bootstrap est mis en place, l’intégrateur web dispose d’un coup de nombreux outils CSS et Javascript pour créer des maquettes et des éléments d’interface à l’aide de classes qu’il suffit de placer sur les éléments HTML appropriés (listes, div, etc).

Maquette

• Grille de mise en page modulable et personnalisable (modification des variables avec LESS)
• Clearfix à l’épreuve des balles,

Enrichissement graphique

• Effets CSS simples d’utilisation grâce à LESS (Mixins) :
• Coins arrondis,
• Ombres portées,
• Transitions,
• Dégradés.

Interface utilisateur

• Eléments de navigation avec des listes,
• Menus avec onglets (tabs),
• Fil d’Ariane,
• Pagination,
• Mur d’images,
• Messages d’alerte,
• etc.

Faciliter ce qui l’est déjà ?

Bootstrap est déjà simple d’utilisation, mais c’est sans compter le génie créatif du web qui a mis en place des outils en ligne dédiés à simplifier ou étendre les fonctionnalités de Bootstrap :

• jetstrap — Interface 100% web pour construire des sites à partir de Twitter Bootstrap. Pas besoin de logiciel à installer : il suffit de se loguer pour accéder à ses projets.
• bootsnipp — Plus de 30 éléments de design et bouts de code HTML, CSS & JS pour accompagner Bootstrap.
• PaintStrap — Générez des thèmes de couleur pour Bootstrap à l’aide de Adobe kuler et COLOURlovers.
• Bootswatch –  Galerie de thèmes pour Bootstrap, histoire de changer du thème par défaut que l’on rencontre trop souvent.
• BootstrapCDN — Utilisez toute la puissance de Bootstrap avec la rapidité d’un CDN ! Plusieurs options disponibles selon les fichiers dont vous avez réellement besoin.
• StyleBootstrap — Créer votre propre thème Bootstrap sans passer par le code !
• BootTheme — Dans le même esprit que le précédent.
• Font Awesome — Une police de caractère pour simplifier la mise en forme des icônes dans Bootstrap.
• Invokator – Editeur visuel pour Bootstrap pour créer des sites avec n’importe quel environnement «compatible Bootstrap».

Articles sur le même sujet

• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign
• Foundation — Framework HTML, CSS & jQuery
• 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.
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

Les formulaires web ont souvent une mauvaise e-réputation auprès des designers web. Pourtant, ils sont incontournables dès que l’on veut recueillir des données sur les utilisateurs ou les faire interagir avec une application en ligne. Pour rendre la création des formulaires HTML moins laborieuse, voici une série de  liens pour mieux comprendre l’accessibilité des formulaires, avoir des exemples pour l’inspiration, générer des formulaires en ligne. Pour finir, je vous ai ajouté une liste de plugin jQuery pour rendre vos formulaires un peu plus «sexy» :-)

Généralités sur les formulaires

1. Formulaire accessible – Article didactique tout droit sorti du puit de science d’Openweb. Voir aussi Validation avancée des formulaires.
2. New form features in HTML5 – Les nouvelles fonctionnalités et attributs des éléments de formulaires HTML5 par Opera.
3. Prettier Accessible Forms– Fabriquer des formulaires compatibles tous navigateurs, à la fois beaux et accessibles ! Traduction française : De jolis formulaires accessibles par Romy Tetue.

Exemples de formulaires

1. Wufoo Examples – Des exemples de formulaires pour tout types d’utilisation.
2. Bootstrap Forms – Encore des exemples d’éléments de formulaires avec les styles associés. Via @cognard
3. Formulaire (Pastbin) – Exemples de balises et attributs des formulaires HTML5 via @tr13ze
4. Contact form HTML5 — Un formulaire de contact simple et efficace à la mode HTML5, par @tr13ze
5. Have a Field Day with HTML5 Forms – Tutoriel pas à pas pour styler un formulaire HTML5 qui pourra servir de base pour vos travaux.

Générateurs de formulaires en ligne

1. SOC formulaires – Création de formulaires HTML avec générateur de script PHP et MySQL by @Nico3333fr via @HTeuMeuLeu
2. reFormedapp – Encore de la création de formulaire via une interface plutôt sympathique. Via @Guillaume_DEB
3. Wufoo – Cette application en ligne vous aide à créer des formulaires accompagnés automatiquement des scripts de backend pour la base de données.

Une touche de jQuery

1. jQuery Masked Input — Masque de saisie pour les champs input
2. jQuery Placeholder — L’attribut de formulaire HTML5 «placeholder» pour les navigateurs anciens
3. «input type = password» — Affichage des mots de passe à la demande avec jQuery
4. Fancy Sliding Form — Affichez vos formulaires sous forme de Slideshow
5. jQuery Form Plugin — Mettez de l’Ajax dans vos formulaires HTML
6. Webform to wizard –Transformez les formulaires en «assistant»
7. Uniform — Des styles de formulaires « sexy » avec jQuery
8. jqTransform — Stylez vos formulaires avec jQuery et CSS
9. jQuery UI Selectmenu — des menus « select » personnalisés à la sauce ARIA

N’hésitez pas à partager vos ressources préférées dans les commentaires :-)

Articles sur le même sujet

• 37 blogs de développeurs web
• 10 liens pour faire plaisir à votre intégrateur web
• Le petit journal du web — Novembre 2012 #1
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign
• 13 éditeurs HTML WYSIWYG et WYSIWYM

Front-End Development Guidelines — Ce document regroupe un ensemble de bonnes pratiques et de recommandations pour les développeurs web : accessibilité, Javascript (& jQuery), HTML et CSS (& CSS3). Cerise sur le gâteau, vous aurez en prime des ressources complémentaires pour aller plus loin.  Les liens qui suivent peuvent aider à la standardisation du code. Ils permettent de s’assurer que les fonctionalités CSS3 et HTML5 pourront être utilisées sur un grand nombre de navigateurs.

• jQuery — Javascript sans grumeau
• jQuery UI — Est à UX/UI ce que jQuery est à JavaScript
• Modernizr — Détectez les fonctionnalités, pas le navigaeur !
• RespondJS — Responsive web design dans les vieux navigateurs.
• @font-face Generator –  Les polices de caractère pour tous, partout.
• RaphaelJS — Simplifie le dessin vectoriel dans les navigateurs.
• HTML5 Boilerplate — L’alpha de vos projects web même si on pourrait encore faire le ménage.
• Twitter Bootstrap — Prototypez rapidement vos applications web.

Merci à @picodix pour le lien o/

Articles sur le même sujet

• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• 139 ressources Javascript et jQuery
• Le petit journal du web — Octobre 2012
• Quelques ressources pour optimiser Bootstrap

Foundation est un framework HTML & CSS créé par l’agence web Zurb pour la conception des maquettes fonctionnelles (wireframes, mockups) quelque soit le type de périphériques. Il est composé d’une grille de mise en page, de la gestion des boutons et des formulaires.  S’il a été conçu à l’origine pour faciliter la création des prototypes, Foundation est également prêt à être utilisé en production.

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

• Le petit journal du web — Novembre 2012 #1
• Quelques ressources pour optimiser Bootstrap
• 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

Ces éditeurs WYSIWYG ont la particularité d’utiliser Javascript pour convertir le contenu des champs créés à l’aide de la balise textarea en contenu HTML principalement ; certains éditeurs proposent également d’autres syntaxes : Wiki, BBCodes, XBBCodes, Markdown, Textile ou Dotclear. Le point commun de ces outils est de proposer des icônes plus ou moins explicites pour donner aux portions de textes adéquates le sens ou la mise en forme désirés sans être obligé de saisir les balises HTML. Ces éditeurs sont généralement utilisés dans les CMS où ils permettent aux utilisateurs de saisir du texte presque comme dans LibreOffice ou Microsoft Word !

1. Redactor – Cet éditeur basé sur jQuery est à la fois beau et rapide tout en étant facilement personnalisable. Il rendra vos projets plus attractifs. Peut-être moins complet que d’autres éditeurs présents dans cette liste, il devrait néanmoins trouver sa place dans votre boite à outils.
2. elRTE — Editeur HTML WYSIWYG écrit en JavaScript (jQuery UI). Permet l’édition de textes formatés, de modifier son apparence, de changer les styles et plus encore. Vous pouvez l’utiliser pour des projets commerciaux ou personnels. N’oubliez pas d’installer elFinder pour la gestion des fichiers et des dossiers.
3. BBComposer  — Cet éditeur se distingue des autres, car il se présente sous la forme d’une extension Firefox qui propose un environnement WYSIWYG pour produire du code HTML (mais aussi du Wiki, BBCodes et XBBCodes).  Point fort : la création de super blocs pour envelopper du contenu avec des balises DIV et l’application de classes CSS sur les éléments. Revue complète dans BBComposer — l’éditeur HTML à consommer sur place ou à emporter. Démo.
4. TinyMCE — Editeur HTML simple à insérer dans votre CMS préféré. Il s’agit probablement de la solution la plus complète et la plus aboutie graphiquement — malgré le manque de la gestion des images et de l’upload dans la version gratuite. Il reste néanmoins possible d’acheter les modules correspondants. Démos.
5. CKEditor — L’accessibilité et la compatibilité avec les navigateurs et la possibilité d’uploader des images sur le serveurs sont les points forts de cet éditeur.  Le code est valide et il est possible d’ajouter un container DIV en spécifiant une classe CSS (idem sur les liens, les images et d’autres éléments HTML). Très complet et joli graphiquement, c’est un concurrent sérieux à TinyMCE. Possibilité d’afficher les blocs HTML et d’utiliser des modèles pour vos articles. Démos. N’oubliez pas d’installer CKFinder pour la gestion des fichiers et dossiers.
6. Aloha Editor — Basé sur la propriété contenteditable de HTML5, Aloha présente une particularité intéressante : la barre d’outil flotte au-dessus du texte à modifier pour offrir une expérience immersive à l’instar du mode plein écran que l’on trouve dans WordPress. A propos de WordPress, voici une démonstration assez bluffante de la modification de contenu « sur place ». Point fort : produit du code xHTML5 valide ! Voir les autres Démos.
7. markItUp! — Ce n’est pas à proprement parler un éditeur WYSIWYG mais plutôt WYSIWYM. Il vous permettra de produire plusieurs syntaxes : HTML, BBCode, Markdown, Textile, Wiki ou Dotclear très facilement. Nécessite jQuery.  Le point fort de markItUp est sa compatibilité avec des éléments extérieurs comme Farbastic, Simplemodal ou jQuery UI. Lire le tutoriel très complet de Clément Guillemain. Démos.
8. WYMEditor — Cet éditeur WYSIWYM (What You See Is What You Mean) met le paquet sur la sémantique tout en offrant un confort digne d’un éditeur WYSIWYG. Le point fort de cet éditeur est de fonctionner par classes CSS pour styler les différents éléments de votre contenu. Démos.
9. YUI Rich Text Editor — L’éditeur de Yahoo! Son architecture modulaire offre une extensibilité très importante avec des modules comme la recherche d’images sur Flickr, Calendrier pour afficher des dates ou l’insertion d’icônes. Point fort : peut être intégré de pratiquement n’importe quelle manière dans vos projets. Démos.
10. Xinha — Projet Open source sous licence BSD. Cet éditeur est hautement configurable et se nom se prononce comme Xena, la guerrière… Que demander de plus ? Démos.
11. jWYSIWYG — Basé sur jQuery, il offre de nombreuses options de configuration. Démos.
12. PHP Markdown — Lire Markdown — L’éditeur presque WYSIWYG.
13. htmlArea — Le projet est arrêté, mais il est toujours possible de télécharger la dernière version de l’éditeur. Le site est désormais un répertoire d’éditeurs WYSIWYG et d’autres outils web. A garder sous le coude.

N’hésitez pas à me faire part de vos retours d’expériences sur ces éditeurs HTML ou à proposer ceux que vous utilisez s’ils étaient absents de cette liste o/

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• 37 blogs de développeurs web
• Maqetta — Editeur HTML5 / Javascript en ligne ou à emporter
• Editeurs WYSIWYG : allez, les développeurs encore un effort :)
• Le petit journal du web — Novembre 2012 #1

Ce billet est une sorte de «Note pour plus tard» pour garder sous le coude quelques outils en ligne que j’utilise régulièrement ou que j’ai redécouverts dernièrement. Ils vous permettront de partager des bouts de code, prendre des notes, créer des penses-bêtes, sauvegarder vos bookmarks, partager des textes, valider votre prose (CSS, HTML, XML, RDF), placer du faux-texte et des fausses images (placeholders) dans vos pages web. Vous (re)découvrirez également des dictionnaires, des correcteurs orthographiques  et des ressources web à garder sous la souris. Le tout réparti entre développement web, édition & travail collaboratif et dictionnaires et ressources.

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
• 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
• 100+ comptes Twitter pour webdesigner

Ce billet est une sorte de «Note pour plus tard» pour garder sous le coude quelques outils en ligne que j’utilise régulièrement ou que j’ai redécouverts dernièrement. Ils vous permettront de partager des bouts de code, prendre des notes, créer des penses-bêtes, sauvegarder vos bookmarks, partager des textes, valider votre prose (CSS, HTML, XML, RDF), placer du faux-texte et des fausses images (placeholders) dans vos pages web. Vous (re)découvrirez également des dictionnaires, des correcteurs orthographiques  et des ressources web à garder sous la souris. Le tout réparti entre développement web, édition & travail collaboratif et dictionnaires et ressources.

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

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 :

 
<?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
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• WordPress de A à Z — E comme Extensions (les plugins)

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 :

<?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
• 37 blogs de développeurs web
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery