css 4 design » Liste de liens

Le petit journal du Web — Novembre 2010

Bruno Bichet — Fri, 26 Nov 2010 09:45:56 +0000

Le petit journal du Web permet de faire régulièrement le point sur les sites Web nouvellement sortis, les nouveaux services pratiques et les articles susceptibles d’intéresser les intégrateurs et les développeurs Web. Peu de liens pour ce mois de novembre, mais la qualité est au rendez-vous. N’hésitez pas à vous abonner à mon compte Twitter Bruno LesBonsTuyaux pour ne rien rater !

A la Une ! Rédaction Web

Estimation du coût de production de contenu rédactionnel — Un article très instructif sur la formation des prix dans le cadre de la rédaction Web orientée SEO, par Martin Korolczuk (@martin1975 sur Twitter).

Estimation du coût d'une mission de production de contenu rédactionnel sur un tableur

Neo Reticulum

Post-traitement – Le site pour apprendre les techniques de la retouche photo avec Photoshop.
Typographisme – Un site tenu par des amoureux de la typo pour promouvoir et informer sur le travail typographique sur et pour le Web mais pas seulement.
Culture Couleur — Un bloc-notes sur la couleur (voir aussi Couleur & Marketing).
CCSearch — Recherche de vidéos ou d’images sous licence Creative Commons sur Blip, Flickr, Fotopedia, Google, Google Images, Jamendo, Open Clip Art Library, SpinXpress et Wikimedia Commons. Possibilité de choisir les contenus disponibles pour usage commercial et/ou susceptibles d’être modifiés ou adaptés.

Miscellanées

Cool Tools and Toys for Web Developers — Des outils et des jouets pour développeurs Web avec les bookmarklets XRAY (visualisation des marges, padding, position et autres détails sur l’élément sélectionné) et MRI (cliquez sur un élément et MRI vous suggère des sélecteurs en fonction du contexte). Bac à sable WYSIWYG pour les effets CSS3 : Gradients, Shadows, CSS Transforms, CSS Text Stroke permettant de récupérer les déclarations CSS.
Tester fiablement ses navigateurs — Le mode de compatibilité prévu par Microsoft pour passer de IE8 à IE7 ne semble pas offrir l’exhaustivité nécessaire pour faire face à toutes les situations (certains bugs JS, etc.). L’installation de plusieurs machines virtuelles semble être la solution. Pour nous en convaincre, jpvincent passe en revue les différentes méthodes permettant de tester ses pages Web avec leurs avantages mais surtout leurs inconvénients.
Débuter sur Adobe Photoshop ! – Une première partie déjà bien complète pour ce tutoriel Photoshop permettant de partir de zéro en apprenant les bases depuis le début.
When can I use… — Table de compatibilité pour la prise en charge de HTML5, CSS3, SVG, etc. dans les navigateurs de bureaux ou mobiles.
TypeFolly — Mise en page Web interactive à la manière de Photoshop. Via Wisibility.

Articles sur le même sujet

23 listes pour Webdesigners

Bruno Bichet — Tue, 02 Nov 2010 18:43:55 +0000

Quoi de mieux (ou de pire) qu’une liste de liens résultant d’une veille technique et stratégique triée sur le volet ? Une liste de listes de liens, pardi ! Voici donc devant vos yeux ébahis, plus de 20 listes thématiques dans le domaine du Webdesign, de l’intégration Web (HTML, CSS et Javascript) et de WordPress.

390 ressources Javascript & jQuery – Cette liste reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows.
100+ Polyfills et Fallbacks pour HTML5 – Guide tout-en-un des solutions de repli pour HTML5. Liste garantie entièrement non-alphabétique et sans grumeau pour utiliser les dernières technnologies à la mode, même dans Internet Explorer !
Le petit journal permanent de CSS3 — 100+ ressources pour commencer à comprendre et utiliser CSS3 dès aujourd’hui sans douleur grâce à des générateurs en ligne pour créer vos coins arrondis, vos ombres portées, vos dégradés, etc. Vous trouverez des expérimentations pour utiliser tout le potentiel de CSS3 sans utiliser Javascript.
Le petit journal permanent de HTML5 — Des sites web consacrés à HTML5, des tutoriels, des trucs et des astuces, sans oublier les liens vers les ressources officielles !
Le petit journal permanent de la TypOgrApHiE — plus de 60 ressources commentées et actualisés dans le domaine de la typographie : liens généralistes en français et en anglais, outils et techniques pour le Web, conseils tutoriels et astuces, trouver des polices de caractères, bibliographie.
15 « Photoshop-like » en ligne testés et commentés — Liste d’outils passés au crible avec un résumé, les «plus», les «moins» et un «verdict» pour que vous fassiez le bon choix pour l’édition de vos images en ligne.
14 outils en ligne pour créer des palettes de couleur — Choisir une bonne palette de couleur est une décision importante qui impacte la réussite d’un site internet. Jetez un oeil sur ces outils en ligne pour faire des ensembles de couleurs harmonieux.
30+ frameworks CSS — Mettez une grille dans votre design — Votre framework CSS préféré se trouve peut-être parmi cette sélection de ressources commentées de frameworks CSS et de générateurs de grilles de mise en page fixes ou fluides.
30+ éditeurs HTML — Sélection de plus de 30 éditeurs HTML plus ou moins WYSIWYG.
139 Ressources Javascript et jQuery — Liste de liens pour le développeur web front-end issue de la veille documentée que j’effectue sur Javascript & Webdesign.
5 CMS rapides et légers pour votre blog et votre site vitrine — CMS : à côté des poids lourds du secteur comme WordPress, SPIP, Joomla!, Drupal ou Typo3, des solutions légères n’attendent que vous !
7 outils en ligne pour l’intégration HTML & CSS — Réduisez le temps passé à l’intégration Web : éditeurs visuels, générateurs de colonnes, conversion des pixels en unité relative em, etc.
21 fonctions Javascript pour l’intégrateur web — Parce qu’il est parfois nécessaire de se passer des frameworks Javascript, il est toujours bon d’avoir quelques fonctions standalone sous la souris pour se faciliter l’intégration cross-browser !
Liens utiles pour l’intégrateur HTML / CSS et le développeur web — Concevoir des emails, dénicher des feuilles de style pour vos tableaux, ajouter des menus déroulants intelligents ou encore faire le point sur les templates tags WordPress.
11 ressources pour mieux bloguer en français — Ressources sur la grammaire, la conjugaison et l’orthographe.
13 outils pour l’intégrateur web — Des liens utiles en toutes circonstances !
10 bons liens WordPress — Trucs et d’astuces pour améliorer votre blog ou votre site web avec WordPress.
10 liens pour faire plaisir à votre intégrateur web — Générateur de miniatures pour WordPress, valider votre site, gérer votre base de données, des plugins jQuery.
23+ ressources pour webdesigner — Nouveaux blogs à découvrir, techniques utiles pour l’intégrateur HTML et CSS, astuces WordPress, outils de mesure d’audience.
100+ comptes Twitter pour webdesigner — Comptes Twitter anglo-saxon : Webdesign, WordPress, Standards du Web, Javascript & jQuery, Photoshop & Illustrator, HTML & CSS, PHP, architecture de l’information.
200+ garçons à suivre sur Twitter — Développeurs Web, intégrateurs HTML & CSS, spécialistes jQuery, poètes sur WordPress, graphistes, blogueurs amateurs ou professionnels.
Top 100+ des filles à suivre sur Twitter — Webdesigneuses, graphistes, spécialistes en SEO ou e-marketing, rédactrices freelance ou pour des grands journaux, blogueuses amatrices, étudiantes en communication.
1000 ressources pour le développement web et WordPress — Last but not least, voici la grosse grosse liste qui en a encore sous la botte : gardez le maximum de ressources à portée de souris sur jQuery, WordPress, le Webdesign, etc.

Vous en voulez encore ? Voici la liste des listes qui rassemble des liens vers des pages qui consistent en une liste ou qui comportent une liste.

Articles sur le même sujet

30+ éditeurs HTML plus ou moins WYSIWYG

Bruno Bichet — Tue, 14 Sep 2010 12:45:18 +0000

Qu’il s’agisse de créer une page web ou de permettre aux utilisateurs de mettre en forme leurs articles ou leurs commentaires, on a toujours besoin d’un éditeur HTML à consommer sur place ou à emporter. Voici une sélection de plus de 30 éditeurs HTML (tirée en grande partie de ma liste des 1000 ressources pour webdesigner) qui devrait occuper les longues soirées d’automne qui s’annoncent.

Editeurs de page web Windows (et/ou multi-OS)

Eclipse

Eclipse est un environnement de développement intégré (IDE) lancé par IBM pour développer des applications en Java. Son architecture est développée autour de la notion de plugins, ce qui permet de l’utiliser pour le développement web où il remplacera sans peine un Dreamweaver ou un Notepad++ grâce notamment aux « plugins » suivants :

WTP (Web Tools Platform) — Reconnait les formats HTML, CSS, JSP, JSF, javascript, XML, DTD, XSLT… (coloration syntaxique, auto-complétion, validation et aide à la saisie des fichiers XML par la DTD associée, etc.)
Aptana — Mêmes fonctionnalités que WTP. L’auto-complétion des fichiers CSS donne la compatibilité (IE et Firefox) des différentes balises de style, Débugger Javascript
ATF (Ajax Toolkit Framework) — Prise en compte du langage AJAX dans le développement web
Amateras Eclipse HTMLEditor — Reconnait les formats HTML, CSS, JSP, javascript, XML, DTD… avec un éditeur graphique de pages
X-Men — Editeur de fichiers XML (non maintenu depuis 2003)
OxygenXML — Prise en charge du format XML, DTD, XML SCHEMA, et XSLT (avec un débugger de feuilles de style XSLT)
EclipseTidy — Editeur de fichiers HTML et XML
eZing Builder — Editeur WYSIWYG de pages web (HTML)
Euromath 2 — Editeur WYSIWYG de fichiers XML permettant d’écrire des expressions mathématiques (un peu de la même manière qu’avec Latex)
EclipseXSLT — Création Gestion avancée des fichiers XSLT, avec la coloration syntaxique, la possibilité de créer plusieurs configurations de style applicables à un même fichier XML, etc.

Retrouvez la liste complète des plugins Eclipse sous forme d’un PDF mis à jour par Benoît Courtine.

Netbeans

Dans la même catégorie qu’Eclipse, Netbeans est une pure merveille. Prévu pour développer en Java, il existe des versions spécifiques pour développer en PHP, Ruby ou C++. Je m’en sers pour faire de l’intégration HTML & CSS dans un environnement PHP : il faut dire que son explorateur de code est très utile, sans compter les différentes aides comme l’auto-complétion et le «plié-déplié» des portions de code. Cerise sur le gâteau, Netbeans est capable de repérer automatiquement les balises fermantes.

Le seul défaut majeur de Netbeans est la lourdeurs inhérente aux applications écrites en Java d’une manière générale.

Dreamweaver

Cet éditeur de pages web fut créé par Macromedia puis racheté par Adobe. La fonction chercher-remplacer plus que complète (il faudrait un tutoriel pour faire le tour de la question) et la gestion multi-sites avec le transfert FTP méritent à eux seuls l’achat du produit. L’aspect ouiziouigue du bouzin est encore – dans la version CS3 – réservé aux gadgétophiles.

Le gros point noir de Dreamweaver est sa gestion fantaisiste du format UTF-8 qui nécessite un passage préalable dans un vrai éditeur comme Notepad++…

Notepad++

Quand Dreamweaver m’ennuie, c’est vers Notepad++ que je me tourne, tant sa simplicité apparente est reposante. Il prend en charge la coloration syntaxique de pratiquement tous les langages, et ses fonctions de « traitement » de textes sont impressionnantes (même si je n’en n’utilise pas le dixième).

Les plus : Notepad++ est capable de plier-déplier les blocs de code et possède un explorateur de fichier. De plus, utilisé conjointement avec FileZilla (en le spécifiant comme éditeur de texte distant, par exemple), vous avez une configuration légère pour trois fois rien ;)

Depuis la version 5.7, notepad++ est capable de répérer automatiquement les balises ouvrantes et fermantes.

Les moins : l’auto-complétion des propriétés CSS n’est pas vraiment contextuelle (contrairement à Dreamweaver).

KompoZer

KompoZer — Développé à partir de la version 1.0 de Nvu, ce logiciel reprend à son compte la gestion des plugins et des thème à la Gecko (Firefox), ce qui semble prometteur pour l’avenir. Des fondations de Nvu, KompoZer semble avoir gardé le goût de la non-simplicité pour la gestion des feuilles de style, notamment.

Intype

Intype — Ce puissant éditeur de code est d’après p4bl0 l’équivalent de TextMate sur Windows. Encore en version Alpha, vous pourrez suivre l’évolution du développement de cet éditeur prometteur sur le blog. Je l’utile pour comme logiciel par défaut pour ouvrir les .css auxquels je veux juste donner un coup d’oeil.

HTML-Kit

HTML-Kit — J’ai une relation ambiguë avec ce logiciel : je l’installe aussi souvent que je le désinstalle à cause de son interface peu intuitive qui finit toujours par me gêner avant que je trouve mes marques. Mais c’est un très bon produit et je ne désespère pas de m’y adapter un jour !

Il est possible d’avoir HTML-Kit en français avec une présentation du logiciel en prime.

UltraEdit-32

UltraEdit-32 — C’est un éditeur de code source qui supporte la plupart des langages (C++, PHP, HTML, VB Perl, Java). Il dispose aussi d’un module FTP et permet – comme Notepad++ d’enregistrer des macro-commandes pour les tâches répétitives.

Ce n’est pas un logiciel gratuit, mais la version UltraEdit-32 Professional Text Editor ne coûte que 34€, soit 12 fois moins que Dreamweaver CS3 !

Jedit

Jedit –C’est un éditeur écrit en Java, ce qui lui permet de fonctionner sous toutes les plate-formes.

Quanta Plus

Quanta Plus — Avec cet éditeur de texte, on sort un peu du développement web, puisqu’il permet également de créer des livrets de documentation, ce qui peut toujours être utile.

CSSED

CSSED — Cet éditeur de feuilles de style CSS nécessite l’installation de GTK+ Runtime Environment avec comme avantage de tourner sous Linux, Mac OSX et Windows !

E-Texte Editor

E Texte Editor — Toute la puissance de TextMate sur Windows (au point de laisser Mac OS X et switcher sur Windows ?).

PSPad

PSPad — Le meilleur pour la fin ? C’est bien possible car contrairement à HTML-Kit, son interface est très agréable et son intégration avec TopStyle Lite est très réussie. L’ensemble fournit un environnement de développement de pages web très complet et simple d’utilisation.

Parmi les petits plus appréciables : un générateur de faux-texte Lorem Ipsum et l’intégration de Google avec des options de recherche avancées, toujours utiles en plein travail.

A noter que la version Pro de TopStyle inclut un éditeur HTML.

BlueGriffon^TM

La nouvelle génération d’éditeur HTML basé sur le moteur de rendu de Firefox pour un Wysiwyg sans tâche.

Linux

Scribes: Scribes — C’est un éditeur pour Linux, puissant tout en restant simple et léger.
gedit: gedit — Il s’agit de l’éditeur de texte officiel pour l’environnement de bureau GNOME.
SciTE: SciTE — Cet éditeur de texte complet (coloration syntaxique, arbre de code dépliant, fonctions rechercher/remplacer) se distingue par l’exportation au format PDF, RTF ou HTML. Bien que disponible également pour Windows, SciTE gagne sa place dans la section Linux grâce à sa configuration par fichiers : pas de panique, Framasoft veille ;)

Mac OS X 10.4+

TextMate: TextMate — L’éditeur manquant ? Sur Windows, en tout cas, c’est sûr ;)
BBEdit: BBEdit — Si vous êtes Apple Addict.
TextWrangler: TextWrangler – Par le même éditeur de BBEdit dont il est une version allégée, cet éditeur autorise la manipulation de texte et l’administration de serveur Unix.
Smultron: Smultron — Conçu à la fois pour ne pas effrayer les débutants et satisfaire les utilisateurs avancés. Le projet n’est plus mis à jour, mais Fraise — projet basé sur la même architecture — est disponible.
cssedit: cssedit — un très bon éditeur de CSS.
Coda: Coda — Encore un bien joli éditeur de texte et de CSS qui intègre un module de transfert FTP.

Editeurs HTML hybrides

BBComposer: BBComposer est une extension Firefox, ce qui le distingue des autres éditeurs HTML disponible sur le marché. Il est donc possible d’utiliser cet éditeur HTML dans votre CMS préféré sans ajouter de plugin.; Lire BBComposer : un éditeur html à consommer sur place ou à emporter »
Markdown: Markdown est une alternative aux éditeurs WYSIWYG qui ne s’adaptent pas forcément à tous les besoins. Markdown vous permettra de rédiger des textes en utilisant un format de balisage de texte simple à écrire et à lire, puis à le convertir en code XHTML (ou HTML en option) structurellement valide.; Lire Markdown : un plugin WordPress pour produire du HTML

Editeurs HTML « riches » WYSIWYG

Ces éditeurs WYSIWYG ont la particularité d’utiliser Javascript pour permettre de convertir le contenu des champs créés à l’aide de la balise textarea en contenu HTML en cliquant sur des icônes plus ou moins explicites après avoir sélectionné les portions de textes adéquates.

TinyMCE
CKEditor
Xinha
htmlArea
Cross-Browser Rich Text Editor (RTE)
openWYSIWYG
NicEdit
markItUp! — Lire le tutoriel très complet de Clément Guillemain.
jWYSIWYG
HTMLBox
WYMEditor
Yahoo YUI Rich Text Editor

Lire 10 jQuery and non-jQuery javascript Rich Text Editors pour avoir un avis (en anglais) sur quelques éditeurs HTML.

En bref :

Il y a de quoi faire ! N’hésitez pas à me signaler les éditeurs HTML qui auraient échappé à ma vigilance et surtout ceux que vous utilisez au quotidien.

Articles sur le même sujet

Le petit journal du web — Non, Twitter n’a pas tué les Backlinks… La preuve !

Bruno Bichet — Mon, 06 Sep 2010 14:18:51 +0000

A force de refiler des bons tuyaux aux plus de 4 300 abonnés de mon compte Twitter j’en avais presque oublié mon petit journal du web. Cette rubrique qui me permets d’arrêter le temps, l’instant d’un billet, pour jeter un oeil dans le rétro, histoire de me remémorer les sites ou les articles qui ont attiré mon attention. En ce qui me concerne, il ne sera pas dit que Twitter sera un dévoreur de Backlinks ! Pour vous donner le goût des autres, ce billet est composé de sites que j’ai découvert récemment.

Nvision: De la création de structures adéquates à la mise au point de stratégies à succès, du design de pages web élégantes au développement de sites dynamiques performants, Nvision conçoit les sites web hauts de gamme au Luxembourg. Le blog parle de design, de techniques, de tendances, du métier et de nos projets.; Lire Si on parlait des utilisateurs avant de parler de contenu ?
Braincracking: BrainCracking est une revue de presse quotidienne et des articles originaux traitant principalement de performances, HTML5, CSS3, et de javascript avancé. Ce nouveau blog remplace feu jpv.typepad.com, le changement de nom de domaine étant une invitation pour écrire à plusieurs :); Lire Passer son blog WordPress à la sémantique HTML5 et ARIA
Hounkpe-Media: Hounkpe Media propose des solutions de référencement naturel garanti adaptées aux webmasters qui permet de gagner du trafic qualifié sur des mots-clés pertinent. Leur travail consiste à améliorer votre site pour l’optimiser vis-à-vis des moteurs de recherche dominants, en particulier google.; Lire Du SEO et des sites qui restent toujours en première place
Locita: Locita est une source d’informations sur le web, les réseaux sociaux et les nouvelles technologies. Locita vous informe sur les entreprises, les services en ligne et les réseaux sociaux en publiant quotidiennement des articles d’actualité, des analyses de fond et proposant des guides pour vous aider à mieux exploiter les réseaux sociaux et les sites web 2.0.; Lire 7 principes pour un meilleur classement dans les moteurs de recherche
Victor Coulon: Blog d’un développeur web qui maîtrise le PHP orienté objet, jQuery, HTML et les CSS et qui rafolle de tout ce qui touche le développement web & le web design.; Lire Une modal box en CSS3 et sans javascript
Débuter avec WordPress: Débuter avec WordPress propose des articles de fond, des tests de plugins, des modes d’emploi et des astuces sur le CMS WordPress. C’est un laboratoire où l’auteur expérimente différents plugins et partage ses découvertes.; Lire Comparer WordPress et Drupal
HTeuMeuLeu: Faites le pleins de trucs et d’astuces sur les langages HTML5 et CSS3, et tout ce qui fait le quotidien d’un intégrateur !; Lire Gmail et les marges sous les images
TroisPointZéro: TroisPointZéro est un blog de veille autour du webdesign, du graphisme, du développement web, du Cloud Computing, et plus généralement tout ce qui touche au web et au hi-tech.; Lire [script] Recuperer les liens dans une liste créée sous Twitter
Design Folio: Un blog sur les thèmes des nouvelles technologies, des services innovants, de l’interopérabilité dans le domaine médical, des réseaux sociaux et du buzz marketing.; Lire HTML5 : conseils, astuces et techniques

Voici, c’est fini pour aujourd’hui. N’hésitez pas à vous manifester si vous avez lancé un site ou un blog sur la création ou la gestion de sites web durant les six derniers mois.

Articles sur le même sujet

200+ garçons à suivre sur Twitter

Bruno Bichet — Wed, 11 Aug 2010 14:41:32 +0000

Après la liste des webdesigners anglo-saxons et celles des 100+ des filles à suivre sur Twitter je vous propose la liste ~~des 100 mecs pas toujours très beaux ni très musclés et pas toujours très malins à suivre sur Twitter~~ (featured @bibalabib) des 200+ garçons à suivre sur Twitter : des développeurs Web, des intégrateurs HTML & CSS, des spécialistes jQuery, des poètes sur WordPress, des graphistes, des blogueurs amateurs ou professionnels, des bruns, des blonds, des roux, des tatoués (j’imagine), petits, grands, sympas, mariés, célibataires, etc. A suivre sans modération parce qu’ils le valent bien !

@4h18 — 4h18 Day : Web & WordPress || Night : Just Fun. || Note : Je ne follow pas de suite, je liste et je follow ensuite || Keep Smiling.
@7studio – 7studio Intégrateur investi et créatif, je m’amuse aussi dans le bac à sable avec mon bob de chef de projet.
@8ken — Alex Aitken Front end designer/developer. Front range biker/skier. Husband. Dad. Web standards, JavaScript, frameworks, hardtails, freeheels, Chimay, Bordeaux, Gruyere…
@95pourcent — 95% Le webdesign, les graphistes, les artistes, les agences… Tout l’univers du webdesign et du graphisme en France. 95% Français et 5% International.
@Alkanz — Al Kanz Entrepreneur, blogueur pro, barbu à temps plein, Auvergnat seul, car quand il y en a plusieurs….
@allfordesign — AFD Folio 28 years old type lover & web designer from Marseille, southern France.
@alsacreations — Alsacreations Communauté d’apprentissage web et agence exotique.
@AntoineDupin — Antoine Dupin Chargé de Communication Web, Chef de Projet, Journaliste Video / Monteur… rêve de travailler au Canada.
@antoineguedes — Antoine Guedes I’m a young webdesigner & blogger of 21 years old. I’m living in Brussels (Belgium). I love creating awesome stuff.
@antoineguiral — Créateur de Twoolr || Consultant Marketing Social/SMO
@aurelienbardon — Oseox Seo Addict, éditeur du site Oseox.fr dédié à la création de trafic et consultant SEO. http://www.aurelien-bardon.fr http://oseox.fr
@aurelienlewin – Aurélien Lewin Webdesigner, photographe, chargé de communication et passionné de com. visuelle. Diplômé de services et réseaux de communication / INFOCOM.
@AymericJ — AJblog De quoi je parlais déjà ? Ahhh oui, ici c’est quand même bien 3617 mylife. Et parfois du pro.
@Barbayellow – BarbaBlog Webdesigner indépendant et blogueur influent (autoproclamé)
@beaucouplus — Beaucou Plus webdesigner, rédacteur & community manager freelance. Geek touche à tout, pop culture addict, et beaucouplus si affinités !
@belu – Journal de Benoit Breton.
@BertrandSoulier — Bertrand Soulier Webmaster drogué d’internet, blogueur compulsif, défricheur du web local, twitterrien émerveillé
@bibinou — Camille Appert Étudiant au parcours atypique, féru d’informatique.
@biou — Vanschklift.com Du n’importe quoi et des saucisses.
@Bouctoubou — Bouctoubou Webdesigner & Intégrateur XHTML – CSS // Freelance et photographe amateur
@bproductiv — Fabrik Numérique Webdesign – intégration – Développement – CMS – Référencement.
@bricolobob — Culture Générale Responsable technique d’une boîte de sécurité informatique.
@brinsdecausette — Brins de causette #RS #web2 #CM #pub… Quand un concepteur rédacteur migre vers les métiers des médias sociaux, cela donne Brins de Causette [et sinon, je suis aussi @harnibal].
@burninghat — burninghat Social Geek
@camj59 — Camille Jourdain Consultant e-business et Community Manager chez C2b interactive, agence web Lilloise – Bloggeur – Passionné par le web !
@CarreBarre — Carré Barré Interactivist Designers/ SaaS / Online Software / User Experience & quelques trucs un peu barrés ›› expliqués & commentés par Christophe Flavigny.
@chibani — LoicG Développeur Web (PHP, SQL, JS, WTF, \o/)
@chrislogiste — Christophe Logiste Directeur ligne éditoriale @ Groupe PlayWeb, Webrédacteur, Bloggeur, …✰
@clawfire – Thibault Milan Web Developper et Interface Designer (à ses heures perdues) je travaille chez Empowebo, je publie un peu sur geeklifeblog.com. 90% geek & internet addict.
@clementj – Dator Web développeur at Lyon. Work with Zend/Symfony/jQuery.
@ClementRoy – Crea2clic Jeune entrepreneur de 20 ans passionné par le développement Web !
@cobolian — Capitaine Commerce Je suis plus beau et plus intelligent que la plupart des gens. Et plus modeste.
@code18 — Code 18 Développeur d’applications web en PHP et passionné de musique.
@crayulaglonon – Julien Verkest Développeur web front-office, Drupal lover à Clermont-Ferrand (Auvergne).
@cwmconsulting — CWM Consulting Consulting, référencement et communication en ligne, web 2.0 et réseaux sociaux.
@daghostprod — Pascal Cataye Créa indépendant depuis officiellement 2006, je travaille sous le nom de DaGhostProd… pour les curieux vous trouverez plus d’infos sur pascalcataye.com ;)
@DamienRave — Le Potlatch Responsable Web et informatique d’un grand groupe associatif
@Darklg Darklg Webmaster / MinURL / Minu.me c’est moi / xHTML, Référencement, Mac User, Caféine, Energy Drink et Rock n’Roll.
@dascritch — Da Scritch développeur de sites marchands − chroniqueur bd − producteur radio − dialoguiste humoristique repenti − linux user − overclocked
@dauran — Dauran Fondateur du site financier Mataf.net et du blog Dauran.com.
@davidbgk — David Larlet Just a biologeek, interested in Django and Semantic Web. Oh, and freelance web dev too.
@davidkun — Zygomatique Individu à multiples personnalités. Développeur web le jour, super-héro la nuit et chat garou les pleines lunes, errant dans les tréfonds obscurs de Limoges.
@dboudreau – Denis Boudreau #AxS. #A11y. Tweeting lang=FR+EN. Moving towards inclusion, 140 chars at a time. Président AccessibilitéWeb. Social entrepreneur. Activist Wannabe.
@developpeurs — MSDN Division Developpeurs @ Microsoft France : Visual Studio, Silverlight, Azure, oData, Windows Phone 7, Sharepoint. Notre actu et celle de nos partenaires.
@Developpez — Developpez Club des professionnels en informatique.
@digiboy — http://www.digiboy.fr
@DijitaleWeb — Dijitale Etudiant Hetic, passionné de web et d’informatique, développeur et intégrateur en Freelance, j’aime aussi les lapins.
@dioxmat — Virgule.
@divarvel — divarvel Webdev @ eklaweb // Student @ Centrale Nantes
@dmathieu — Damien Mathieu Boire ou coder… Pourquoi choisir ?
@DrDJo — Novaway Entrepreneur, développeur, féru du web, Lyonnais et blogueur sur lafermeduweb.net (Comptes pro @lafermeduweb et @novawayfr)
@DuaelFr — Duael Developpeur web certifié PHP.
@edasfr — Éric Daspet Conseil, organisation et pilotage de projet web.
@efyx — APE project developper, Javascript & mootools fan, unicycle \o/
@elpep — Duplodocus et accessoirement développeur web freelance
@emmanuelc — Emmanuel Clement xhtml-css accessibilité ergonomie graphisme typographie photographie http://identi.ca/emmanuelc
@emmanuelcup — EmmanuelCup Freelance Webdesigner • Geek and Apple fanatic.
@Eroan — Blog d’Eroan Boyer Installé à Nantes, je suis spécialisé dans la création, la gestion et le référencement de sites Internet sur le thème du deux-roues. Suivez-moi sur Twitter !
@Exirel – Florian Strzelecki Développeur web à l’instinct ludique. Milite pour #DJMG (Diantre Je Me Gausse).
@fabienthomas – Fabien Thomas Intégrateur WEB, Amadeus Sophia Antipolis – France. Fan de WordPress
@fabricebonny
@fauveauarmel — Globalis Media System GLOBALIS co-founder/CTO, Web, Security, Performance, Apple/Mac  Addict, Geek Life, Astronomy and more.
@fetard – Mageekstore Un peu de geekerie, beaucoup de n’importe quoi, et + d’une fois par jour :)
@FGRibreau — fgribreau Micro-blogger & Developer | PHP/HTML5/CSS3/JS/jQuery/ ♥
@fitiwizz — Remi Garcia Développeur, Intégrateur web, Bloggeur. Intéressé par : Webdesign, jQuery, (x)HTML, CSS, SEO, High-Tech. Cherche un emploi d’intégrateur.
@FlaveaConseils — Flavea Développeur et Administrateur système Linux.
@FlavienHamon — fonkyt Journaliste culture/high tech et community manager pour http://www.lexpress.fr.
@fran6 — www.dribbble.com/players/Fran6 Francis Chouquet, Webdesigner Freelance, WordPress expertise
@FredCavazza — Fred Cavazza Web consultant and french blogger at www.FredCavazza.net.
@freetux — Freetux Blog, Buzz, Marketing, Web 2.0, Ubuntu, Geek, Caféinomane.
@fvsch — fvsch Web professional
@GaelSaulnier — imdeo Gaël Saulnier @ Lyon, France. Chef de Projets, passionné par le webdesign et tout ce qui tourne autour, mais pas que…
@geekarlier– {elseif} 20 y.o – Dev Web et Desktop – Mais aussi Bloggeur, Guitariste, Gamer, Linux User et troll incorrigible…
@geekeriesfr — Geekeries Graphiste, blogueur | Geekeries.fr, votre espace WordPress en français !
@geoffreydorne — Graphism Designer graphique & chercheur à l’Ensad de Paris. http://www.geoffreydorne.com :-)
@geoffrey_crofte — Creative Juiz Designer et concepteur Web dans une superbe agence, occasionnellement Freelance.
@goetter — Goetter Webdesigner chez Alsacréations et photographe amateur
@gonzague — Gonzague Works with / for nice and good people, enjoys music, good food, tech and life.
@GPenverne — Gregoire Penverne Webdev’ freelance. Bloggeur high tech/geek.
@guerrier — Frédéric Guerrier Webmaster, Webdesigner, Référencement Freelance – Formateur, Consultant, Veille TIC, Webdesign, Mac.
@HammHetfield — Justin Marsan.
@henrilabarre– 2803 Fondateur de 2803MEDIA http://www.2803media.fr.
@HTeuMeuLeu – HTeuMeuLeu Liens rigolos, tutoriaux et veille quotidienne d’un intégrateur passionné mais un peu grincheux.
@imath — imath owni Responsable Outils & Innovation.
@iNicolas — iNicolas Blogueur passionné, expert Worpdress et Mac addict.
@jacquesbh — Jacques Bodin Hullin Développeur d’applications web freelance depuis 2007 et étudiant.
@jBleuzen — Johan Bleuzen Developpeur WEB chez AdenClassifieds. Accroc à son iPhone et son nouveau MacBook ! Tags : #iphone, #mac, #jquery, #web, #java
@jcbrebion — Fairytree Intégrateur HTML/CSS freelance. Modérateur sur le forum officiel de MODx.
@jchavarria – Ape Project Weelya CEO and Lead Designer
@jisee — jcdardart Psychologue, ubuntu, wordpress, web 2.0, geek, eeepc, ipod touch
@jnreyt — Jean-Nicolas Reyt Chercheur universitaire et consultant en e-marketing. Diplômé de l’ESSEC et de Sciences Po Paris. Auteur du Guide du Web Management (Dunod).
@johnsgraphisme — Jonathan Menet Directeur Artistique, Webdesigner et Graphiste sur Paris. Apple addict, et fan de design..
@julienbob — julienbob French living in Bristol, Entrepreneur and Project Management / WordPress Freelancer.
@Karedas — Karedas Developpeur web et touche à tout.
@Keegfr — Keeg Blogueur Internet et SEO (et autres) et accessoirement gérant d’une agence, societe-econcept.com.
@kennyfeed — WebInventif J’administre également le site d’actualité mobiles www.mobiliens.com.
@Kerweb — kerweb Breton expatrié en Vendée. Le codeur c’est comme la bière, c’est bon seulement sous pression !
@kinaze – Kinaze Web analytics, strategies, KPI, ROI, management, CMS, IA, webmaster, SEO, e-marketing, copywriting, research, philosophy, MBA, vision, UQAR.ca, friend.
@knarf_18 — Web en Berry Intégrateur web sur Bourges, SPIP et accessibilité.
@koreus — Le blog de Koreus C’est moi Koreus, du site Koreus.com, le site de la déconne. Sur Twitter depuis 2007.
@kriscus — CCD-Design Fondateur de CCD Design, agence interactive @CCD_Design.
@Kyotoweb — Amine Mouafik Étudiant à Epitech.
@laurentbourelly — Laurent Bourrelly SEO Rockstar.
@lecolibrilibre — Le Colibri Libre Étudiant en Webdesign- Webmaster.Linuxien,libriste et blogueur sur le Colibri.On raconte que Dieu reviendra pour la fin du monde, ne cherchez plus c’est moi.
@LeCourrierIndus — Le courrier industriel : blog indépendant qui traite de l’industrie, de l’économie, de la technologie et de l’information.
@legizz — leGizz Consultant web, bloggeur, entrepreneur et éditeur de réseaux sociaux.
@lionelroux – Websourcing
@Longzero — Long Nguyễn Tai Chi Practitioner + Simple Designer. In that order.
@LudiKreation — LudiKreation Pour un Web Ludique – Retrouvez aussi http://blog.ludikreation.com Création web, veille et communication.
@ludobos — ludobos Video , Mobile, IPTV, chef de la Strike Team à M6 Web, veilleur de jour et de nuit, surtout de nuit, à bicyclette en juillet
@LyderStudio — Lyder Studio Hey, I’m a French Graphic Designer studying at Multimedia Section of CIFACOM. I tweet in French & English.
@L_Demontier — Laurent Demontiers Consultant en ergonomie fonctionnelle et design d’interfaces web.
@maccimum — Maccilabo Maccimum : communication globale, sites internet vitrine et administrables, Intégrateur Joomla/VirtueMart, CMSMS, WordPress.
@marevueweb – Ma Revue Web est un site de partage de ressources concernant le web et le design graphique.
@martin1975 — Une araignée au plafond Entrepreneur web à Rennes : WordPress, SEO et folie douce.
@mauriz — Maurice Svay J’aime créer des sites utilisables et jolis. J’aime aussi les pommes de terre, mais c’est une autre histoire.
@maxime — Maxime Valette Creator of VDM and FML. Web Entrepreneur.
@maximefulpin — Fulpin Maxime Référencement,SEM (SEO + SEA), e-commerce, communication en ligne. Etudiant en webmarketing, adepte de twapéro, d’échecs, de sports. Fan d’Android et de Lego.
@mbimagika — imagika PACA. Communication et contenus numériques à l’EJCM. SEO, graphisme, com’.
@michelc23 — Michel23 Webmaster tendance code. Discount et bon goût.
@mikiane — Mikiane Multimedia Studio Director in charge of the Digital Development @France24, Rue89 Cofounder & TEDxParis Curator since 2009 #media #marktech #innovation.
@mikiweb — Michael le Floch Chef de projet multimédia, passionné de GEO (SEO/SEM) webmarketing, webdesign, réseaux sociaux…
@moderateur — Modérateur Community manager @ http://www.regionsjob.com/
@MotsAndCo — http://www.facebook.com/motsandco MotsAndCo est une agence spécialisée dans la rédaction et la traduction de contenus web et print | Twitter feed of digital creative agency MotsAndCo.
@mrboo — Hellotipi Entrepreneur, fondateur d’ Hellotipi.com, Viedemome.fr, AutoFF.com & Newea.fr – Aime parler du web, mais pas que…
@MrThieu — Rossi Matthieu Intégrateur qui intégre l’inintégrable de l’intégration.
@n1k0 — Akei They didn’t know that it was impossible, thus they did it. — Mark Twain.
@nazab — Nazab web entrepreneur http://nazab.com , blogger and father.
@neolao — Portfolio de Neolao Développeur spécialisé dans les technologies internet.
@neovov — NeoBlog.
@netPlume — netPlume Création de sites web, rédaction de livres sur les arts graphiques (web et PAO), supports de cours et formation sur les arts graphiques.
@nfroidure — Elitwork Développeur Web PHP/MySQL/XHtml/CSS/Js, géniteur de KGen, BBComposer et XCMS. Internaute passionné. Gérant d’Elitwork.
@nhoizey — GasteroProd Passionné par Internet, co-fondateur et directeur technique de Clever Age (www.clever-age.com), photographe amateur.
@nicodiz – Nicolas Gouëset Intégrateur HTML pour une grande société de e-commerce. #css #xhtml #html5 #frontend #seo #web2.0 #bordeaux.
@nighcrawl — Ange Chierchia Freelance web designer and developer based in France
@nightangeldotfr – Night Angel 25 ans, blogueur dépravé et démoniaque, négociant en virages et photographe à ses heures perdues…
@nikodev — Nikodev Chef de projet, Développeur Web, Intégrateur HTML, Gestionnaire de contenu… La grande vie
@nikovitto — Rezonova Concepteur de sites et applications web
@nodesign — nodesign Design numérique, innovation & design thinking.
@notabene — Nota Bene self-taught (who isn’t), lazy, friendly french guy
@nsilberman — Strat&Geek CTO @ Condé Nast Digital France (Vogue, Glamour, GQ).
@nxcom — nxcom Intégrateur xhtml/css standardisé W3C chez C2iS à Lyon – Aussi @wikigrateur.
@oncletom — La Case de l’oncle Tom Web consultant #blog #bordeaux #javascript #php #symfony #wordpress #nodejs #css #html #parisweb.
@Ouark — La Ferme du web Co-Gérant de l’agence web Novaway.fr. Admin de LaFermeDuWeb.net,…
@Oziks — Oziks Étudiant en Informatique & Développeur d’application Web & Auto Entrepreneur web & Pleins d’autres choses .. ;-)
@palbertus — Patrice Albertus Multitask SEO / webmarketer on Monday, Blogger on Tuesday, Half-Marathon trainer on evening, French cook for dinner ;-)
@Palleas — Palleas Adobe Flash Wizard, compulsive PHP scripter and stickers addicted!
@paraboul — Ape Project 23y – Lead APE-Server developer – Server-side JS fanboy
@pasmalin — Pasmalin à temps plein depuis le siècle dernier.
@path_tech — Path Tech Trouvez l’actualité la plus vitaminée du web !
@Ph3nol — SoGeek Entrepreneur – Développeur Web – Geek de base – Fondateur twContest – Blogueur soGeek.info – CE Slynett Solutions (Slynett.com).
@philippeousset — Philippe Ousset Informaticien, Logisticien, Production. Disponible pour un nouveau challenge. http://pho.blog.sudouestjob.com/
@PierreTran — 01 net pro Journalist @01netPro 01Informatique | developer | tech | geek | hack | web2 | web3 | socialmedia | design | music | guitar player
@piouPiouM – Mehdi Kabab Développeur web: http://pioupioum.fr Auteur: http://gimp4you.eu.org/livre/ Geek Blog: http://www.fashion-geektim.fr/ TextMate addict.
@pixenjoy – Pixenjoy Webdesigner freelance – WordPress – logiciels libres
@pixxelboy — Pixelboy Je suis le papa de pixelboy.fr et de jsjobs.fr. J’anime aussi jqueryfrance, le meetup group du framework pour la France.
@Playmogeek – playmobilsandco Accessibilité, geek, veille, IE, actu, WTF
@plouga — Neokraft Eleveur de menhirs.
@pockystar — Pockyworld Oscille entre réalité http://crumblr-project.com/ et futilité http://www.onedayonechick.com -Où est le bouton j’aime ça ?
@poupi — Geekosphère Mon identité secrète est SuperTrollMan, mais ne le dites à personne.
@pressecitron — Presse Citron Eric Dupin – Blogueur influençable sur Presse-citron.
@programmateur — Programmateur Compte Twitter participatif sur le thème de la programmation, avec application dédiée. By @adrigau
@rade — Whitezine Whitezine’s author and Project Manager @1fluencedigital
@rauxbenoit – Benoit Raux Chef de projet developpeur web lyonnais #geek #apero #ski #sun #php #linux #shell #dev #web
@referencement — Référencement Blog Et http://e-reputation.org / http://facebook.com/alexandre.villeneuve
@rgaidot – Regis Gaidot Digital/technology enthusiast.
@rik24d — Hanblog Web standards addict, Mozilla contractor for web evangelism.
@romain — GroupePlayWeb #Domaining #Seo #Gaming #VideoGames #SocialMedia #SocialMediaMarketing #DadOf1 #NBA.
@romainblachier – Lyonnitudes Lyon, élu local,social-démocrate, blogueur, entrepreneur et cadre dans un gros groupe. Sympa aussi à ses heures. Retrouvez-moi sur http://www.romainblachier.fr/
@romm1 — Site Communautaire Recherche en stratégie, # Business Model #, marketing, e-business, medias sociaux, web 2.0 , cofondateur de http://www.sportganizer.com
@sarimarcus — YOP-Concept Curieux, bossant dans le Web et ouvert sur le monde et ceux qui y vivent…
@sebcbien — Ideance Consultant accessibilité numérique, Atalan.
@seebz_net — seebzNet Développeur PHP/Javascript et Mootools lover, même si ça ne ce voit pas.
@severin — QALC et Games And Geeks.
@seynaeve – Edouard Seynaeve @Wepika co-founder & @CafeNumerique promoter. Coder, thinker, speaker, optimistic & DIYholic (I build up my house). What would you like to drink ?
@ShadowKris — http://blog.shadowkris.com/
@Sidd4rtha — Taggle Intrapreneur, geek, développeur, veilleur, lvl 9 ‘toshop, padawan ergonome, vieux black hat seo et web marketer, sysadmin, i’m an uv’s,clicks and leads dealer !
@Skreo — skreo Webdev & Co-founder @ EklaWeb.com
@SkyNebula — Skynebula Art Director & Forward Thinker. Founder of Coworx and Spectral Club. Behance Ambassador in France. #design #technology #productivity #ux #ia #dev
@slebrethon — Capoblog Manutentionnaire de l’informatique, spécialité graphique….
@soymalau — Soymalau Graphiste chez @fcinqagency. Cycliste de minuit. Enragé notoire. Tous mes liens sont NSFW.
@spawnrider — Spawnrider Blogueur GeeK et consultant IT mais surtout Gadgetophile.
@spookev — Spookev Freelance graphisme, web & print. www.osoa.fr www.annei.net.
@StephaneGuerin — Stephguerin La grosse tête des technos chez NOFOLO.
@Thanh – Sute Kidane Co-founder of O2Sources, A French and Fresh Web Agency, standards compliant. Photographer on the side Tranches-de-vie
@thaunay — SEMePub Spécialiste AdWords agréé, Consultant indépendant et Formateur en SEM/ePub/Web Analytics, Entrepreneur et Blogueur : SEMePub.fr
@thierryB — Ameliorer son francais Créateur de thèmes pour WordPress et webmestre du site AmeliorerSonFrancais.com.
@thierrybezier — Intruders consultant, web strategist, traveler, videoblogger & blogger.
@ThierryRoget — Auteur de Cocktail de Web News, toujours de bonne humeur. Réside au Brésil au bord de la mer. Au paradis quoi!
@ThouxArt — Blog du Webdesign Graphisme / Webdesign / Print /Projet Web / WordPress / Developpement / Blog
@thujohn — genom-x Webmaster depuis Septembre 2009, je suis avide d’informations portant sur le développement web, graphisme, référencement Mon projet : twitter.com/GenomX
@TiChou – Waebo Ingénieur – Développeur web (PHP5&MySQL, JavaScript & xHTML) et blogueur passionné (blogger)
@titifrim — Des images par milliers Web & WordPress designer and Mac addict !
@Ti_Pierre — Pluxml I love Coffee, CSS, PluXml, w3c, GNU/Linux, Android and my Cat !
@tom_plays — OWNI 25ans paris. dev indépendant, #owni, #lesdemocrates.fr, #aaaliens, #chermedia,… @22mars team developpeur php écosystème WordPress / wpmu et BuddyPress.
@tuxboard — Tuxboard Blogueur // Sportif // Web Entrepreneur // Et bien plus encore !
@twevelopers — Twevelopers Partage via Twitter de ressources pour les développeurs web ! Inscrivez-vous sur http://twevelopers.elseif.eu et DM @twevelopers pour envoyer du contenu =) !
@Twikito — Twikito Webdesigner, webmaster, infographiste, chef de projet expérimenté en SEO, Google fan… geek en fait.
@un_geek — V.nf Développeur web, entrepreneur, geek et blogueur non-professionnel.
@Vincent_Cruz — Etudiant en Web Marketing, apprenti SEO dans une agence de référencement Lyonnaise. Digital addict, passionné du web, à l’affut des dernières tendances !
@vinch01 — Vinch Web junkie. Cofounder/CTO at 1MD & WooRank.
@viper82 –Luc Muller Developpeur Web spécialisé en gestion de contenu (Typo3, WordPress…).
@vlentz — Valéry Xavier Lentz Chef de projet web et militant européen.
@wabeoCreation — Wabeo Création de sites web création de web-vidéos.
@wdfriday — wdfriday Retrouvez la communauté francophone du web design autour d’un hashtag #wdfr, chaque vendredi à 13h !
@WDTrends — Webdesigner Trends Webdesign Blog : webdesign ressources, tips, webdesign and graphic showcases, photography and more !
@webdevcat — Cats Who Code Développeur web, Bloggueur, ami des animaux. Compte en Français. Follow @catswhocode for tweets in English!
@WebDif — wypeConcepteur web pour Wype Agency @wype
@weetabix — i-actu Founder of i-Actu – Céréales Killer.
@willybrousse — Willy Brousse Ma recette : un peu de photo, un poil de graphisme, un soupçon webdesign.
@wisrou — Moriame.
@wklinger — NeoDiffusion Depuis 1994, le web a bien changé…
@wolforg — Wolforg CMS, Logiciels Libres et Réseaux Sociaux en Lozère.
@wpchannel — WordPress Channel Créateur du projet WordPress Channel, co-fondateur de Protuts.net
@xkliber — Under Deep Water Informaticien à l’âme d’artiste (graphisme/musique/…) et grand enfant. « La curiosité n’est pas toujours un vilain défaut » [(c) moi]
@xuxu – Du côté de chez Xuan Développeur web lyonnais chez O2Sources, fan du net, de musique, des séries TV (US), de la bonne bouffe ^.^
@xxorax — xorax développeur victime du marketing e-commerce.
@YvesLyon — PhotoSpirit Jump to My Web link to see more about me :-)
@yvg yves.vg Front-End Developer Paris-Web & webdevfr Staff Mozilla & Songbird ❤
@zebden — http://www.zebden.fr
@zetura — JuicyApple Etudiant SUPINFO, développeur Java et avant tout passionné de web et de design. Blogueur à ses heures perdues.
@zeubeubeu – Attention je plope et drüdrüte !
@_jiann — Éclectique sans prétention. Intégrateur & Musicien.

Malgré tout le soin et l’attention apportés à la rédaction de cette liste, il se peut que des erreurs de cherché-remplacé et/ou de copié-collé se soient glissées sous le tapis de souris à l’insu de mon plein gré. Merci de votre compréhension :)

Suivez-moi sur @br1o !

Articles sur le même sujet

Le petit journal permanent de HTML5

Bruno Bichet — Tue, 10 Aug 2010 14:49:47 +0000

Le nombre de ressources disponibles sur HTML5 ne cesse d’augmenter. Leur qualité également. Voici quelques liens triés sur le volet qui vous permettront d’amorcer le virage pour rejoindre la dernière ligne droite en direction de HTML5 : des sites web consacrés entièrement à la nouvelle version de HTML, des tutoriels, des trucs et des astuces, sans oublier les liens vers les indispensables ressources officielles !

HTML5 : les nouveautés

Mise à jour le 03/01/2011

5Gallery — L’objectif de cette galerie de sites Web utilisant un marquage HTML5 est de montrer la manière dont les utilisateurs interprêtent les spécifications afin d’en apprendre plus sur le langage HTML5.
Spécifications HTML5 du W3C — Il s’agit d’une version simplifiée des spécifications qui se concentre sur les besoins des créateurs de sites Web. Les détails de l’implémentation dans les agents utilisateurs sont laissés de côté. Nouveau : voir aussi HTML: The Markup Language Reference.
HTML5 Validator — Validateur expérimental pour (X)HTML5
Sémantique HTML5 et ARIA pour WordPress — HTML5 introduit de nouveaux éléments qui sont parfaits pour ajouter de la sémantique à un blog ou un journal. ARIA fait de même concernant l’accessibilité.
Introduction à la balise video de HTML5 — Une présentation claire et complète de la balise `video` avec des exemples de code prêt à emporter.
Ressources HTML 5 et CSS 3 — Liste de ressources HTML5 (et CSS3) régulièrement mise à jour.
Pourquoi HTML5 ? — HTML5 a pour objectif d’intégrer via son code des contenus hétérogènes (l’audio ou la vidéo par exemple) et de mieux structurer la mise en page par des éléments doté de sens.
The Official Guide to HTML5 Boilerplate — Un guide video [en] pour connaitre les techniques proposées par HTML5 Boilerplate par Paul Irish :
Passer son blog WordPress à la sémantique HTML5 et ARIA — Les nouvelles balises HTML5, les rôles ARIA, améliorer les formulaires, un soupçon de Javascript et de CSS, les fichiers WordPress à modifier,
HTML5 Tutorial — Votre premier arrêt sur la route qui mène à HTML5 pour étancher votre soif de connaissances : tutoriels, exemples de codes.
http://html5doctor.com/ — Envie d’implémenter HTML5 dès aujourd’hui ? Faites appel au docteur ! Vous trouverez tout ce qu’il faut savoir pour utiliser `
`, `
`, `
`, `
`, etc. à bon escient.
Docteur HTML 5 — Cette traduction du site HTML5 Doctor vous permettra de travailler avec HTML5 dès aujourd’hui !
HTML5 Reset — Les fichiers proposés contiennent l’essentiel pour créer un document HTML5 avec les balises de base telles que `title`, `header`, `footer`, etc. Vous y trouverez également les commentaires conditionnels pour cibler une demi-douzaine de feuilles de styles CSS spécifiques, ainsi que quelques fichiers Javascript pour gérer les incohérences d’Internet Explorer.
HTML5 Boilerplate — Dans le même esprit que HTML5 Reset, ce framework HTML5 fournit un ensemble cohérent de fichiers HTML, JS et CSS qui tient compte des performances, de l’ajout de fichiers Flash, de @font-face, de la balise video et de la compression gzip.
25 HTML5 Features, Tips, and Techniques you Must Know — Un aperçu des nouveautés qui font le quotidien de l’intégrateur Web, là tout de suite ;)
Formulaires HTML5 – Quoi de neuf ? — Tour d’horizon des nouveautés apportées par les formulaires HTML5 : les nouveaux champs et les nouveaux attributs. Les nombreux exemples présentent les nouvelles méthodes avec HTML5 ainsi que la manière dont on y arrive à l’aide de jQuery.
HTML5 se dévoile — L’article francophone qui manquait pour avoir une vision claire de HTML5 par @juliegri.
La vie des intégrateurs avec Html5 — Billet plein de ressources concernant la mise en place de sites Web en HTML5 par les intégrateurs Web.
w3c.html5.free.fr — HTML5 par l’exemple
HTML5 Rocks — HTML5 Rocks, de Google
HTML5 Elements — L’ensemble des éléments HTML5
HTML5 Aujourd-hui — Comment HTML 5 peut-il être utilisé aujourd’hui ?

A consommer sans modération

W3C Working Draft — Le vocabulaire et les API’s associées pour HTML et XHTML. Propose les spécifications des nouvelles balises, des attributs, etc. pour HTML5.
HTML5 differences from HTML4 — Ce document du W3C présentent les différences entre HTML5 et HTML4.
http://forums.whatwg.org — Forum de discussion pour la communauté bâtie autour de HTML5

A relire

http://oli.jp/2009/html5-structure4 — Structurer du contenu avec HTML5 : passez de HTML4 ou XHTML 1 à HTML5
http://www.w3.org/News/2009#item119 — Annonce de l’arrêt programmé de XHTML 2 au profit de HTML 5
http://www.sitepoint.com/article/html-5-snapshot-2009/ — depuis l’annonce de l’application Google Wave architecturée autour de HTML5, ce dernier est devenu un sujet chaud dans la blogosphère. Exemples de marquage HTML sur le passage de HTML4 vers HTML5
http://www.alistapart.com/articles/previewofhtml5 — Avec l’amélioration des contrôles de formulaire, des API’s, le support du multimédia, HTML 5 promet aux auteurs de sites web plus de flexibilité et une plus grande interopérabilité. Beaucoup d’exemples concrets et pratiques.
http://www.ibm.com/developerworks/library/x-html5 — Exemples de mise en page avant et après HTML5
http://www.miximum.fr/actus/238-html5-quelles-nouveautes — Présentation en français des nouveautés apportées par HTML 5 et leur implémentation dans Firefox 3.5
http://t37.net/une-balise-nsfw-dans-html5-mais-wtf.html — Critique de Frédéric de Villamil sur l’introduction d’une balise `` (No Safe For Work) utilisés généralement sur IRC, Twitter, forums, etc. pour prévenir les lecteur que le liens contient du « matériel » pour adultes.
http://a.deveria.com/caniuse — Table de compatibilité pour les fonctionnalités présentes dans HTML5, CSS3, SVG et autres technologies web à venir. Voir aussi lewiki ou cette page sur l’introduction des fonctions dans les principaux navigateurs web.
http://www.sfgate.com — Il est devenu clair pour le W3c que le marché disponible pour XHTML 2 était trop petit comparé à HTML 5.
http://forabeautifulweb.com — Réflexions autour des microformats et de HTML5 sous l’angle de la « sémantique ».
http://www.modernizr.com — Modernizr est une petite bibliothèque Javascript qui peut vous aider à utiliser les nouvelles technologies (CSS3, HTML 5) dès maintenant grâce à une détection des navigateurs supportant telle ou telle fonctionnalité.
http://stoneship.org/ — Quelques questions intéressantes à propos de l’abandon de XHTML2 d’après les commentaires du billet de JeffreyZeldman intitulé XHTML DOA WTF.
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using — Tutoriel très instructif et très clair sur le balisage d’un blog à l’aide de HTML5 et de CSS3. Utilisation un peu étrange de la balise `
` que l’auteur met plusieurs fois dans le document pour regrouper le titre des articles et les meta-informations sur le billet.

Pour la route

Tagués HTML5 — Mes avis, mes interrogations, mes tutoriels sur ce blog.
23 sites pour explorer le HTML5

Articles sur le même sujet

7 outils en ligne pour l’intégration HTML & CSS

Bruno Bichet — Wed, 16 Jun 2010 14:05:30 +0000

Ce petit coin de blog est le cadre idéal pour vous présenter quelques outils en ligne qui vous permettront de réduire le temps passé à réaliser l’intégration de vos sites web : éditeurs visuels, générateurs de colonnes, conversion des pixels en unité relative em, etc. Pas vraiment nouveaux, ils méritent quand même le détour !

Construct Your CSS — Editeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya pour mettre à la disposition des intégrateurs Web une boite à outils pour faire des CSS et du HTML sémantique.
pagecolumn — Générateur de maquettes 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 — Générateur de code HTML et CSS en ligne. Lire Avec 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) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !
JotForm — Création de formulaires en ligne.
Em Calculator — Convertit vos pixels en `em` pour faciliter la mise en place de designs CSS fluides.
CSS Compressor — Compressez vos feuilles de style CSS. Nombreuses options disponibles.

Articles sur le même sujet

15 outils en ligne pour créer des palettes de couleur

Bruno Bichet — Sat, 15 Aug 2009 00:47:10 +0000

Pour le webdesigner d’aujourd’hui comme pour le peintre d’hier, le choix d’une bonne palette de couleur est déterminant pour la réussite d’une oeuvre, fut-ce un site web. Pour y parvenir, voici quelques ressources en ligne pour obtenir rapidement des palettes de couleurs de qualité, tout en s’amusant.

La couleur ? Longtemps elle a semblé échapper à toute appréhension, son caractère « accidentel » a découragé toute science. Sur elle on ne pouvait fonder un art. D’où la prééminence du dessin. Puis Newton établit que la lumière blanche n’est pas homogène mais composée. A sa suite, Buffon puis Goethe font leur place aux couleurs d’origine physiologique qu’ils rapportaient à l’oeil percevant. Les années 1840 marquent, elles, le grand tournant dont nous demeuront les héritiers : Chevreul, savant chimiste, remet en question les rapports admis de l’oeil avec l’objet perçu. Il établit la loi générale qui régit la perception des rapports entre couleurs contiguës. Une revalorisation de la couleur s’ensuivit qui a excercé une influence considérable sur plusieurs générations de peintres : Delacroix, les impressionnistes, Van Gogh, Gauguin, Seurat, Signac, les symbolistes, les futuristes et Delaunay. Le changement de paradigme ouvre sur la conquête des voies propres de la couleur qui conduiront la peinture jusqu’à l’abstraction.

Art et science de la couleur. Chevreul et les peintres, de Delacroix à l’abstraction. Edition revue et augmentée. George Roque. Gallimard, Collection Tel. 2009.

1. Toucan Color Palettes

Toucan fait partie des outils de création et d’édition en ligne proposés par Aviary. Vous pourrez très facilement créer vos palettes de couleur et les sauvegarder. Il est possible de lier Aviary à son compte Flickr pour piocher des couleurs dans votre stock de photos. Cerise sur le gâteau, il est possible de visualiser une palette de couleurs selon différentes affections de la vision telles que : protanopy, protanomaly, deutéranopy, deutéranomaly, tritanopy, tritanomaly, achromatopsy ou achromatomaly. Pratique pour s’assurer que les informations véhiculées par les couleurs seront accessibles pour tous !

2. kuler

L’outil indispensable pour chercher l’inspiration ou créer votre palette de couleur à partir de couleurs choisies d’après un nuancier (analogique, monochromatique, triade, complémentaire) ou en fonction de différentes teintes ou saturation. Des curseurs interactifs vous permettront d’affiner les choix initiaux en toute liberté selon votre intuition ou vos savants calculs quelque soit le mode colorimétrique de base : HVS, RGB, CMYK, LAB, HEX

Il est également possible de déterminer une palette de couleur d’après une image que vous aurez téléchargée depuis votre poste de travail ou depuis le meilleur site de photo au monde : flickr. Vous obtiendrez une palette de couleur que vous pourrez modifier en faisant varier les points chauds de l’image en question au cas où les couleurs par défaut passeraient à côté d’une couleur significative de l’image. Vous pourrez également faire varier les couleurs par défaut selon six modes prédéfinis.

3. ColorSuckr

Créé par Paul Burgess, ColorSuckr génère votre palette de couleur à partir du profil chromatique de votre image une fois que vous aurez indiqué son URL. Il est également possible de choisir une palette d’après une photo présente sur flickr en précisant un mot-clé. L’originalité vient du fait que l’on peut — pour chaque dominante de couleur — afficher les palettes de couleur déjà créées sur COLOURlovers. C’est un excellent exemple de mashup dans la pure tradition du web 2.0 !

4. colourlovers

COLOURlovers est un générateur de palettes qui prend la température de ce qui se fait de mieux en terme de nuanciers à travers le monde autant qu’il influe sur les tendances à venir. COLOURlovers permet à chacun (publicitaire, designer, graphiste, architecte, etc.) de chercher parmi des centaines de nuanciers, de les comparer entre eux et de se tenir au courant de ce qui se passe dans le milieu de la couleur, le tout en version française !

Voir tout spécialement les outils spécifiques dans Tools.

5. Pictaculous

L’originalité de cet outil est d’être compatible avec votre iphone : prenez une photo depuis votre appareil, envoyez-là à l’adresse colors@mailchimp.com et patientez pour la réponse !

6. Color Palette Generator

Pour commencer, choisissez une couleur en utilisant le sélectionneur de couleur, et une palette composée d’un camaïeu de 6 couleurs sera calculée automatiquement. Ce site comblera les fanas de couleurs grâce à la possibilité de sauvegarder des sets de couleurs aux formats Photoshop et Illutrator ! Voire de se faire envoyer les camaïeu par email !

7. colr

Dans le même esprit que Color Palette Generator le site extrait les couleurs d’une photo et propose une fonction « schemes » qui propose un dégradé selon les couleurs trouvées. Notez que si les couleurs ne vous conviennent pas, vous pourrez cliquer à nouveau pour avoir une autre proposition. Il est possible de tagger les couleurs et d’effectuer des recherches par tag ce qui s’avère très pratique quand on cherche une couleur par association d’idée.

8. Color Blender d’Eric Meyer

Un peu plus frustre d’apparence, mais néanmoins très utile. Voir ma petite note sur ce Color Blender pour une traduction du mode d’emploi.

9. colorschemer

Comme les autres, ce site permet de définir une palette de couleur mais se distingue en offrant l’utilitaire ColorPix pour prélever les couleurs visibles à l’écran. Le zoom va jusqu’à 2800% ce qui devrait suffire. L’application peut se lancer au démarrage et une option permet de placer la fenêtre au premier-plan ou la réduire dans la barre des tâches. En appuyant sur une touche, la couleurs sélectionnée est verrouillée. Redémarrez si cette fonction ne marche pas.

10. COLOROTATE

Colorotate offre une belle interface (bien qu’un peu confuse au premier abord) pour créer, mixer, mélanger les couleurs pour obtenir de palettes de couleurs. Le plus de Colorotate est d’afficher les palettes selon plusieurs types de déficiences visuelles.

11. Colorjack Studio

Je n’ai pas vraiment été convaincu par l’ergonomie et le look and feel de Colorjack Studio, mais qui sait, peut-être trouvera-t-il son public. En revanche, vous serez peut-être intéressés par les autres outils disponibles sur le site, comme Color Galaxy et Color Sphere.

12. Daily Color Scheme

Tous les jours une ressource colorée sous la forme d’une palette de couleur à télécharger pour Photoshop, Illustrator, etc. mais aussi sous forme de fichier CSS ou HTML.

13. Color Hunter

Crée une palette de couleur d’après un tag, une couleur hexadécimale (ne mettez pas le symbole# devant), l’URL d’une image ou en fonction d’une image sur votre disque dur. Propose également de modifier la tonalité des couleurs en diminuant la saturation.

14. Color Scheme Designer

Très bel outil pour créer des sets de couleurs modifiables globalement en jouant sur la saturation, le constraste ou en ajustant chaque couleur séparément.

Color-Hex

Un outil très simple, limite basique mais qui vous permettra d’aller à l’essentiel une fois que vous aurez saisi le code hexadécimale de votre couleur : traduction dans les autres modes colorimétriques (RGB, HSL, HSV, CMYK) ; affichage des couleurs triadiques, monochromatiques, analogues ou complémentaires. L’outil propose également quelques codes HTML et CSS prêts à l’emploi, comme .mybgcolor {background-color: #5e5391; }.

J’ai un faible pour les propositions monochromatiques qui permettent d’obtenir très rapidement une teinte plus claire ou plus foncé que la couleur de base.

PS : N’hésitez pas à participer à ce billet en soumettant à l’attention des lecteurs les outils qui font votre bonheur quotidien ;)

Articles sur le même sujet

Top 100+ des filles à suivre sur Twitter

Bruno Bichet — Wed, 29 Jul 2009 13:50:39 +0000

Après la liste des webdesigners anglo-saxons presque exclusivement masculine, j’ai tenté le grand écart avec cette liste d’une centaine de comptes féminins francophones sur Twitter : webdesigneuses, graphistes, spécialistes en SEO ou e-marketing, rédactrices freelance ou pour des grands journaux, femme politique 2.0 qui m’a un jour traité gentiment de « patate », blogueuses amatrices, étudiantes en communication, brunes, blondes, rousses, tatouées (j’imagine), petites, grandes, sympas, project manager, community manager, etc. à suivre sans modération parce qu’elles le valent bien !

@webatou — En campagne pour des sites Web de qualité, conformes et accessibles
@Delphine_D — Meilleure rédactrice auto-proclamée
@Aratta — My robotic love Élève ingénieur franco-allemande, sous Android, passionnée de robotique et de web, cherche thèse en robotique. CV: http://bit.ly/S88cu
@mereteresa — Interested in PHP, Ajax and opensource. Modo@PHPFrance.com, AFUP secretary and GTDerin
@Le_Piaf_Fou — un peu geek, un peu otaku, un peu gameuse, un peu photographe sur les bords…
@Turone — Webmestre éditorial – intérêts : projet web, architecture de l’information, écrit web, référencement naturel, ergonomie, intégration web, WordPress, web 2.0
@Desirade — Tweet en Français – intérêts Réseaux sociaux Education Associations Open Source Mondes Virtuels
@chrism — Je suis professeur de Lettres. Formateur CLEMI et TICE, l’éducation au média internet est au coeur de mes préoccupations.
@darialalala — http://dariablogue.wordpress.com/
@justepourdire — Computer & Web designer, blogger, novelist.Member of LesExplorateursDuWeb and working on #ExploraCoeur. Usually twit in French.
@latauliere — Webmarketer/SEM
@cath_woman — Etudes des comportements sociaux!, des interactions, Médias sociaux, Communauté, Web addiction, Blog / Photographie / Thé, Café et Chocolat!!
@melinelanouille — brunette. conceptrice. soupe au lait. redactrice. bonne copine. planneuse. mauvaise cuisinière. webholic. rêveuse.
@la_lene — Photography, webdesign, digital scrapbooking – Only accepting people I know.
@largow — Responsable référencement des sites de Prisma Presse (Voici, Gala, GEO, Télé Loisirs, Femme Actuelle,…) Passionnée de emarketing, ergonomie et web analytics
@Vesperale — Étudiante, blogueuse, lesbienne.
@basketsminijupe — blogueuse connue sous le pseudo Little Girl.
@M_C_B — journaliste, blogger, auteur de « putain d’ordinateur ! »
@Othella — 25 years old French girl living in Germany, freelancer, web designer, internet geek, Mac user, crazy about ITs, books and cats!
@Helran — http://helran.free.fr/ Bassiste Scientifique Folle Geek… Bon bah je crois que j’ai toutes les tares !
@Bulleine — http://www.geekyandgirly.fr/ Susceptible de balancer un lien idiot 24h/24. Mini blogueuse sur G&G , Community Manager la semaine. Aimant la photo, les geekeries, les bonbons, les chips.
@Chany167 — Journaliste – Photographe – Graphiste
@ClementineNYC — Journalist
@Kimauclair — Co-Fondatrice de Mikimya, une agence Web spécialisée en expérience utilisateur (www.mikimya.com). Fondatrice de MacQuébec (www.macquebec.com)
@Louiza — http://www.louiza.ch/
@Lovny — Just leaving a big company (TBWA) to start innovative 2.0 business dev and strategy at atafoto.studio.com
@Marceletmoi — http://www.marceletmoi.fr/
@Marynett — Mary Walckiers of BGS Consult – Business Strategy Consulting in Europe and Africa
@NatCordeaux — Blogueuse bientôt entrepreneuse créatrice et accompagnatrice de blog corporate avec Corpor@tement Vôtre
@Dievochka — Webmaster, SEO, référencement naturel, mélomane et voyageuse- Für die Deutschen : bitte meinem Konto Classicanetwork folgen
@nk_m — Secrétaire d’Etat chargée de la Prospective et du Développement de l’économie numérique
@MichelleBlanc — Consultante conférencière et auteure marketing internet et stratégies Web. Cofondatrice de Yulbiz.org
@Oelita — Le Web est un formidable terrain de jeu pour les famille et autres communautés
@PouipouiDesign — Freelance Webdesigner and Front-End Dev, work at home, love my job, to read-sleep-eat, and my dog and cat
@TheBrune — Une brune aux multiples petits jobs et en recherche d’un vrai boulot …
@Transtextuel — Translator EN / IT to FR and new blogger
@Zarathoustra — http://www.linkedin.com/in/langemarie
@catpointzero — Blogueuse sur Catpointzero.com et Community Manager en agence de communication.
@cattleg — Community manager|social media networking|Virtual worlds|projets et écosystèmes 2.0|usages innovants|art numériq|formation
@nayoungkwon — Development Tools Sales @Microsoft France and also frogger on www.frogz.fr
@cmic — Information Broker
@cmoijulie — http://www.julieh.info/blog
@corinne — Freelance webdesigner (accessibility savvy). Wannabe nomad and travel + photo reporter. Sincere lover (friends, good food & beautiful words rock).
@artful_diskette — http://juliebas.fr Blythe Aholic & blogueuse rurale !
@ecrirepourleweb — I run THE Belgian blog about webwriting
@eogez — Social media, enterprise 2.0, e-marketing, digital identity…
@fruitdesbois — Graphiste et WebDesigner … et bloggeuse aimant le panaché et les marrons glacés Ardèchois !
@globalref — A French SEO lost in Poitou Charente with her Chihuahua. My interests: internet, animals, healthy food, nature, home staging, travel….
@jlcoassin — French girl living in London + happy digital project manager @codegent + digital junkie + shopaholic + sport freak (especially waterski) + cupcakes addict = me
@kiedisfr — Crazy girl who love, the web, graphic design, ads, technology and everything about art
@lowett — Le quotidien d’une geekette belge passionnée par le web 2.0
@mar1e — Gérante d’Altiref : SEO, référencement et visibilité des sites Web. Bloggueuse intermittente.
@melanierai — Etudiante en dernière année à l’Iteem (Ecole Centrale Lille+ESC Lille
@myriam — Unique, as you :)
@noisette18 — je ne suis pas très bio en fait…
@paganotto –Camille Paganotto-Galichet, coloriste de bande dessinée
@pixxell — web / graphic designer
@camillenouille — cuisinière d’un blog non culinaire et puis aussi resp market-comm chez bike4all.com
@pude — sunshine, sushis, lucky strike and coffee
@rondcontrecarre — graphiste/pseudo webmastrice
@shesapinklady — Une petite pomme au pays des fashionistas
@tetue — Développement CSS / SPIP / W3C
@walinette — http://www.thebeautyandthegeek.fr/
@_IButterlin_ — Studying and teaching philosophy
@_Jeanne — want to dream, hope, read, write
@dixkatre — Dix-Katre anime, développe et fidélise vos réseaux professionnels grâce aux outils interactifs en ligne (blogs professionnels, plateformes collaboratives)
@kreestal — Web designer tendance geek, je suis passionnée par la musique, les beaux livres et la fantasy
@Danysworld — ¤¤ Web Developpeur ¤¤ , ☺☺ maman de 2 merveilles, ♥♥ bloguer et MrCherEtTendre
@toujoursalouest –Célibattante de trente ans ( un peu plus ) maman d’un adorable garçon de 10 ans et etudiante en DCG !!!!!
@lageekette — Sarah, étudiante belge en Information et Communication. 23 ans. Geekette à ses heures perdues.
@mespetitstrucs — http://www.mespetitstrucs.com/
@PenelopeB — http://www.penelope-jolicoeur.com/
@Balise — J’écris et je traduis des trucs avec des poils, et des fois je parle de bouffe.
@MarieAmelie — Journaliste et animatrice de communauté LEXPRESS.fr
@wordiz — Ecoutez et téléchargez vos oeuvres préférées
@jacinthe_ — Ergophile Co-fondatrice de tKaap.com – ex Dir. Artistique @Deezer
@Mariegaraud — Attachée de presse indépendante, qui aime les fraises et échanger sur les nvlles technos :)
@pociii — Pixel Artist & Etudiante en psychologie
@mariejugag — Journalist, columnist, technomade, blog-trotter and writer addicted to culture shock. Published three books. Based in Quebec province. First language: French.
@aureliesauthier — Happy in my life, I’m passionate about social media, online brand monitoring, online reputation management and so much more!
@C_cil — Search Marketer au sein d’une agence de Marketing Online.
@_Marine_ — Marine Landré
@_MaRiNeTTe_ — minirinette
@marion_mdm — Chef de projet web en agence, serial-geekette, noctambule pathologique, et aussi blogueuse amusante (parfois)
@priscilla_rj — rédactrice web chez RegionsJob
@veroniquer — French TV producer now in Communication and Web. Looking for job opportunity.
@chonchon12 — graphic designer + creative mind
@no_keo — Etudiante en Master 2 Management Commerce Electronique — AutoEntrepreneur — Addicted to Web ! — Recherche un emploi dans le Webmarketing pour le mois de nov!
@Suggestionchef — Des menus et recettes pour toutes les occasions…
@Capucine_Cousin — journalist, eco, mktg & IT, blogger, (more ore less) community manager. L’Entreprise, gpe Express Roularta. Author of ‘Tout sur le Web 2.0′
@natachaqs — Associate Director at imarginal.com, new media producer, journalist, specialist in digital strategy (community architect, Second Life expert).
@semioblog — Researcher. Maître de Conférences – Sémiologue – Spécialiste des médias audiovisuels. Analyste des médias, de la télévision et de la presse people (gossip).
@Carole_Fabre — What is the most important in life ? Who knows …
@Inzecity — Blogueuse à l’intérieur et dans le web à l’extérieur
@feedly — Helping build a feedly community on twitter.
@Helena_tel — http://is.gd/uhMp
@joplam — Veille usages du Web et information – Web & Information – Innovation, transformation, adaptation
@soraya_bhs — ebusiness consultant (ergo, user centric conception) from here and there… et un jour p’tet’ blogueuse, si si !
@Manzelkalou — Journaliste freelance RH/entreprise/finance
@Graphiklyste — Graphiste Maquettiste Infographiste Webdesigner Lyon. Conception de tout type de support de communication pour le web et le print.
@papilles — Rédactrice freelance blogueuse @ Papilles et Pupilles
@stephtara — Anglo-Swiss, online strategy consultant. Loves her Indian cat @bagha, does judo, and tries to sing. Chatty. Works at @eclau
@hyperlaxe — Je fais des photos et je rigole pas mal / For English + photography/art/design
@PascaleLC — CSS pour débutant et plus encore !
@dreamgratuit — DreamWeaver Gratuit. Bio : Femme + WebMarketing, WebDesign, WebAnalytics, Web 2.0, WebDevelopment. Mieux vaut être belle et rebelle que moche et remoche.
@baxxx — Definitely Blonde. Bio : Perso : Ecolo – Photo – Animals – Music … & Blonde / Pro : Search marketing – credit-agricole.fr & so many else …
@salyame — Parle de com’ mais pas que !. Bio : Pépiniériste de projets web, entrepreneuse de jour, bloggeuse com/dév du soir. Fondatrice de @dekwo Portfolio pro www.Salya.me :]
@lumieredelune — Encre de Lune. Bio : Photograph and webmaster, I work between Europe and Morocco
@sophiemasure — fonfek. Bio : fONfEk : Directrice Artistique/Graphiste. (print et web) Spécialisée dans la création de logos et d’identités visuelles.
@duboutdesyeux — Du Bout Des Yeux. Bio : Graphiste – Webdesigner à Paris.
@flexyflow — Kreature Je suis un bot.
@FlorencePorcel — Culture en vrac J’aime tellement la vie que je veux en vivre plusieurs à la fois. J’y arrive bien. Journaliste et artiste.
@zeni — Purple Rain. Trop jeune pour être vieille, trop vieille pour être jeune. Vespérale. (avatar : http://m-o-n-a-m-o-u-r.com)

L’ordre d’apparition dans cette liste (qui n’est pas un classement) n’est pas totalement le fruit du hasard mais presque. J’ai noté les personnes qui me sont venus à l’esprit tout en cherchant dans mes followings les personnes à ajouter. Merci à Delphine_D, romainblachier, PierreTran, moderateur pour leurs suggestions o/

Dans chaque liste il y a forcément une dernière, une avant-dernière, etc. Ce qui ne signifie pas que la qualité des tweets ou la personne soient en cause, mais c’est comme ça, épivala ! Toutefois, la liste devrait s’allonger en fonction de mes futures découvertes ou de vos suggestions.

Pour que ces dernières places ne soient pas trop mal vécues, voici quelques réponses à la question : selon vous, dans une liste ou un classement, vaut-il mieux être dernier ou absent ? :

@WebdesignIsArt : je suis dernier de la première page Google sur la requête « webdesigner freelance ». Là je suis très content de pas être absent !
@jimzzy : si c’est le top 100 des plus mauvais qqch … il vaut mieux en être absent :-P
@n1k0 : tout dépend de quelle liste : sur la liste de Schindler par ex., dernier c’est bien quand même
@dspe : tout depend de ta philosophie.. Perso mieux vaut etre une liste mm dernier.. On est reconnu d avoir fait qque chose :)
@Darklg : Tout dépend de la liste. vraiment.
@fetard : tout dépend de la longueur du classement
@TiKris : dernier! Rien que pour la visibilité offerte…
@kennyfeed : Avant dernier !
@fdevillamil : being the last at least makes you visible. So I’ll choose this option.
@fourretout : dernier
@Alkanz : ah dans ce cas, les deux situations doivent être insupportables #macho

Suivez-moi sur @br1o o/

Articles sur le même sujet

21 fonctions Javascript pour l'intégrateur web (et plus à venir…)

Bruno Bichet — Tue, 18 Nov 2008 23:10:17 +0000

Les bibliothèques Javascript — comme jQuery et la myriade de plugins qui l’accompagne — facilitent la vie des développeurs web en leur permettant de manipuler le DOM les mains dans les poches. Toutefois, il est toujours bon d’avoir quelques fonctions standalone sous la souris pour se faciliter l’intégration cross-browser ! Voici une sélection de plus de 21 scripts pour faire face à toutes les situations (ou presque) :

SimpleJS — Cette petite bibliothèque Javascript développée par Christophe Lefevre propose de faciliter l’utilisation d’Ajax pour les débutants travaillant sur des petits projets : SimpleJS ne saurait être comparée avec Prototype ou jQuery ou d’autre framework professionnels. Çà tombe bien, c’est exactement ce que l’on cherche aujourd’hui ! Toutefois, vous y trouverez l’essentiel :

    $ajaxload()
    $ajaxreplace()
    $opacity()
    $shiftOpacity()
    $pulsate()
    $highlight()
    $textColor()
    $morphColor()
    $toggle()
    $blindup(), $blinddown()

Sans compter les plugins simpleslish.js (Slideshow, 1.6k) et simpleacco.js (effet accordéon, 1k).

addEvent — cette fonction écrite par John Resig, à l’origine de jQuery, a gagné le concours addEvent() recoding contest. Elle permet tout simplement d’attacher une fonction à un événement (onload, onclick, onmouseover, etc) :

function addEvent( obj, type, fn ) {
    if ( obj.attachEvent ) {
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
        obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
        obj.addEventListener( type, fn, false );
}

En prime, voici la fonction inverse, au cas où :

function removeEvent( obj, type, fn ) {
    if ( obj.detachEvent ) {
        obj.detachEvent( 'on'+type, obj[type+fn] );
        obj[type+fn] = null;
    } else
        obj.removeEventListener( type, fn, false );
}

Quelques exemples d’utilisation :

addEvent( document.getElementById('foo'), 'click', doSomething );
addEvent( obj, 'mouseover', function(){ alert('hello!'); } );
addEvent( window, 'load', maFonction );

Le dernier exemple est idéal pour lancer une fonction au chargement de la page sans intrusion dans le code HTML !

The Ultimate GetElementsByClassName — Déjà évoquée ici, cette superbe fonction qui sélectionne les éléments par leur classe CSS a été mise à jour récemment.

getElementsByClassName(« info-links »); — tous les éléments possédant une classe info-links,

getElementsByClassName(« col », « div », document.getElementById(« container »)); — tous les éléments div contenus dans ù#container* et possédant la classe col,

getElementsByClassName(« pince-me pince-moi »); — tous les éléments avec les classes pince-me et pince-moi.
cssQuery — La fonction cssQuery() interroge le DOM via les sélecteurs CSS 1 et CSS 2 et une partie de CSS 3. Alternative à jQuery pour accéder aux éléments constitutifs du DOM quelque soit le navigateur !

var tags = cssQuery("body > div"); sélectionne toutes les balises div descendants directement de body,

images = cssQuery("img", tags); donne la liste des balises img présentes dans la variable tags vue plus haut,

Devinez-donc ce que donne var argh = "p>a:first-child+input[type=text]~span"; :)

Pendant que nous sommes chez Dean Edwards, profitez-en pour tester base2 un mini-framework Javascript intelligent (c’est Yves qui le dit sur twitter).
XHRConnection — Cette classe Javascript simplifie l’utilisation de l’objet XMLHttpRequest. Elle propose plusieurs méthodes pour gérer les données à envoyer en arrière-plan. Autrement dit, XHRConnection permet d’appréhender facilement AJAX. Nombreux exemples fonctionnels disponibles.
Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément li pour émuler la pseudo-classe :hover pour Internet Explorer qui ne l’applique que sur les ancres a, notamment.

Léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style elle-même puisqu’il faut doubler le sélecteur li:hover avec la classe li.sfHover).
Suckerfish Shoal — Si le script précédent vous a plu, vous êtes mûrs pour passer la vitesse supérieure avec ce jeu de fonctions dérivées de Suckerfish pour émuler les pseudo-classes :hover, :focus, :active et :target sur l’élément HTML que vous voulez :

suckerfish(sfHover, "LI", "nav"); pour appliquer :hover sur un élément li placé dans #nav.

suckerfish(sfFocus, "INPUT"); pour donner le focus aux éléments input.
DOMTab — Ce script non-intrusif transforme une liste de liens en un système de menu à onglets efficace avec plusieurs menus sur une même page ; la possibilité de faire un lien vers un onglet et la mise en place de liens suivant et précédent pour accéder aux onglets. Voir mon comparatif entre DOMTab et idTabs pour en savoir plus.
balance_columns — Script astucieux pour équilibrer des colonnes entre elles ! Ce script est non-intrusif : les identifiants des blocs à équilibrer se placent dans l’en-tête du script et il se dégrade harmonieusement si Javascript n’est pas activé sur le navigateur.
iepngfix — Ce composant HTC gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6. Le seul script à ma connaissance à prendre en charge les propriétés background-repeat et background-position avec iepngfix version 2.0 Alpha 3

Notes : gardez un oeil sur PNGHack de Yves Van Goethem !

Voir le tutoriel sur la transparence des PNG 24 bits sur IE6 pour plus d’information.
FlashReplace — Script très léger pour insérer une animation Flash dans votre page web avec une seul ligne de code :
En option : possibilité de préciser la version de Flash requise ou d’ajouter des paramètres à votre animation Flash.

ChangeClass — Changer une classe CSS à la volée. Trouvé sur cet excellent article de Noupe sur l’utilisation de Javascript (et de jQuery pour la majorité des solutions) pour fixer 12 problèmes liés aux navigateurs. Via Zeubeubeu.

function changeClass(oldClass, newClass) {
    var elements = document.getElementsByTagName("*");
    for( i = 0; i < elements.length; i++ ) {
        if( elements[i].className == oldClass ) elements[i].className = newClass;
    }
}

Effets lightbox sans framework — L’ouverture de « nouvelles fenêtres » laisse peu à peu la place aux effets lightbox. Voici donc plusieurs solutions simples et efficaces pour réaliser une lightbox pour présenter des images, un contenu dynamique, un formulaire avec effet de fading tout en assombrissant le reste de la page. Sans framework Ajax, avec quelques lignes de code. Scripts testés avec Internet Explorer, Firefox, Chrome, Opera, Safari et Konqueror.
9 Javascript à ne pas manquer — sélectionner ou désélectionner des checkbox d’un clic ; ouvrir une fenêtre popup ; avoir plusieurs boutons submit pour un formulaire ; émuler le bouton retour du navigateur ; remplir les valeurs d’un menu select selon les choix effectués avec un premier menu, etc.

Voilà pour les 21 premières fonctions. Comme le web est vaste et qu’il ne s’arrête jamais, cette liste va s’allonger au fil de l’eau avec d’autres scripts bien intéressants ;)

styleswitcher.js — Proposez des feuilles de style alternatives aux visiteurs.

maxWidthFixForIE6.js — Emuler la propriété max-width pour IE6 :

window.onload = checkAvailableWidth;
window.onresize = checkAvailableWidth;
function checkAvailableWidth(){
    var container = document.getElementById("container");
    container.style.width = (document.body.clientWidth > 1100)? "1100px" : "auto";
}

Simplifier l’accès aux identifiants à la manière de jQuery (via Josselin) :
```
function $( element ) {
    return document.getElementById( element );
}
```
dLite — Cette bibliothèque propose des fondations pour faciliter vos développements : trouver les éléments avec le même identifiant ou la même classe ; lancer une fonction lorsque le DOM est prêt ; ajouter ou enlever une classe à un élément ; ajouter ou enlever un gestionnaire d’événement (addEvent), etc. Tout ça, pour 4 ko en version compressée seulement !
DOMAssistant — Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse pour lancer des fonctions sur un ensemble d’élément par exemple. Supporte les sélecteurs CSS 1, CSS 2 et CSS 3.
```
$("#container input[type=text]");

$("#navigation a").addEvent("click", myFunc);

$("#news-list").load("updated-news.php");
```
Cerise sur le gâteau, cette bibliothèque est modulaire et la documentation existe en français. Le poid ? Moins de 10 ko en version compressée.
nanotabs — Version légère de idTabs sans jQuery pour faire des menus à onglets à partir de simples listes.
ul2finder — Listes dynamiques complexes pour réaliser un menu avec un comportement similaire au Finder de Mac OS X : un clic sur un élément affiche une colonne à côté pour le sous-menu, et ainsi de suite. Par le génial et prolifique Chris Heilmann !
Webdesign moderne avec Javascript — Bon, se passer des frameworks comme jQuery, c’est bien, mais je vous propose quand même cette liste impressionnantes de 47 scripts, fonctions ou plugins (jQuery, Mootools, YUI, etc.) pour améliorer l’expérience utilisateur ;)

Conclusion

Même s’il ne s’agit pas d’un ensemble de fonction « cohérent » dans le sens où certains scripts ont des fonctionnalités redondantes, ces fonctions devraient trouver une place dans votre bibliothèque. J’ai fait l’impasse sur les frameworks mais mon opinion est faite depuis longtemps : Prototype ou jQuery ont redonné ses lettres de noblesse à Javascript.