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

L’intégrateur web en milieu naturel

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

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

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

Mais qui est donc l’intégrateur web ?

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

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

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

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

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

Les profils de l’intégrateur web

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

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

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

En bref

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

Articles sur le même sujet

• Définir le métier « intégrateur web » ou « intégratrice web »
• Quelques notes sur la balise h1 avec HTML5
• 1000 ressources pour le développement web et WordPress
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Frameworks CSS + Reset CSS : design from scratch

PHPCrossRef est un véritable carrefour des références des variables, des fonctions, des classes et des constantes utilisées dans les projets Open Source réalisé avec PHP. A ce jour, quatre CMS dont Drupal, Joomla!, Textpattern et WordPress ainsi qu’un framework PHP avec Zend Framework sont disponibles. L’idée est de permettre de naviguer parmi les fichiers sources. Un clic sur chaque élément référencé redirige vers la liste des fichiers qui l’utilise.

Voici les CMS et autres projets que je vous laisse découvrir :

• Drupal (Drupal 6.20, Modif. du 2010-12-15),
• Joomla! (1.5.22 Stable Release [03-November-2010),
• Textpattern (Changes in 4.3.0),
• WordPress (Version 3.1),
• Zend Framework (Zend Framework 1.11.2).

Articles sur le même sujet

• Supprimer l’attribut title dans les catégories et les pages WordPress avec jQuery ou PHP
• Installer Drupal (ou les tribulations d’un WordPressien en Drupalie)
• Le petit journal du web — WordPress, développement web, etc.
• Classes CSS générées par WordPress pour les images
• 23 listes pour Webdesigners

CodeIgniter est un framework PHP robuste comme Zend Framework ou Symfony mais bien plus léger. Il vous aidera à construire votre site web avec le modèle MVC (Modèle, Vue et Contrôleur) en améliorant le temps de développement de vos projets grâce à un ensemble complet de bibliothèques simple d’utilisation.

Tutoriel CodeIgniter

Même si le guide de l’utilisateur disponible sur le site de l’éditeur est très bien fait, voici un tutoriel en plusieurs parties pour développer un CMS (Content Management System) rédigé par Ange Chierchia (@nighcrawl) :

1. Développer un moteur de site Web avec CodeIgniter,
2. Système de login sécurisé,
3. La gestion des pages.

Code Igniter en français

codeigniter.fr est le miroir francophone de codeigniter.com. Vous y trouverez notamment le guide de l’utilisateur avec la plupart des rubriques traduites en français ainsi que des tutoriels. Si cela ne suffit pas, le forum est à votre disposition.

Question : «quel site francophone développé avec CodeIgniter fait bonheur des intégrateurs web ?»

Réponse : Alsacréations — Et oui, depuis sa version 3, le site de la communauté d’apprentissage pour les standards du web est développé avec CodeIgniter !

Articles sur le même sujet

• PHPCrossRef — Bibliothèques de référence pour projets PHP Open source
• Supprimer l’attribut title dans les catégories et les pages WordPress avec jQuery ou PHP
• Le petit journal du web — WordPress, développement web, etc.
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• 23 listes pour Webdesigners

Sur une ancre, l’attribut title sert généralement à donner une indication sur la destination du lien. Si son utilité est certaine dans une optique d’accessibilité, cet attribut peut poser des problèmes de lisibilité sur les sous-menus lorsqu’il est appliqué sur les liens d’un menu déroulant vertical ou horizontal comme c’est le cas sur css 4 design. Dans WordPress, le title des liens des catégories affiche la description de la catégorie si elle est renseignée, ou un title par défaut si l’on ajoute le paramètre use_desc_for_title dans la fonction wp_list_categories(). Or, je n’ai rien trouvé qui permet de supprimer purement et simplement ce title une bonne fois pour toute.

Avec jQuery

Voyons comment jQuery peut nous aider avec la méthode removeAttr() qui permet de supprimer l’attribut passé en paramètre, ici le title, soit :

$(document).ready(function () {
    $('#catlist ul a').removeAttr('title');
});

• Georglob
• neovov
• pivwan
• DuaelFr
• antoineguiral
• julienguigner
• piouPiouM
• AjJi

Sans jQuery

jQuery c’est bien joli, mais il peut être intéressant d’avoir une version PHP pour se passer de cet attribut title récalcitrant. Jamy me propose sur Twitter l’article Remove the Title Attribute from WordPress Category and Page Lists qui donne une solution à cet épineux problème. Il s’agit de supprimer la balise en question avec une fonction category_without_title_attribute() utilisant la fonction preg_replace de PHP à placer dans le fichier functions.php de votre thème WordPress. Reste à utiliser ensuite cette fonction à la place de wp_list_categories() . C’est simple, net et sans bavure.

Supprimer les title dans le menu «Catégories»

<?php
function categories_without_title_attribute() {
    $categories = wp_list_categories('echo=0');
    $categories = preg_replace('/title=\"(.*?)\"/','',$categories);
    echo $categories;
}
?>

Supprimer les title dans le menu «Pages»

Pour faire la même chose avec la liste des pages WordPress, il suffit de modifier la fonction précédente comme suit :

<?php
function pages_without_title_attribute() {
    $pages = wp_list_pages('echo=0');
    $pages = preg_replace('/title=\"(.*?)\"/','',$pages);
    echo $pages;
}
?>

Remplacer wp_list_pages ou wp_list_categories

Si vous voulez utiliser ces fonctions personnalisées dans l’ensemble de votre thème, il suffit d’appliquer un filtre WordPress en ajoutant les actions suivantes dans functions.php :

add_filter('wp_list_categories', 'categories_without_title_attribute');
add_filter('wp_list_pages', 'pages_without_title_attribute');

Conclusion

La suppression pure et simple de l’attribut côté serveur permet de ne pas dépendre de l’installation d’un framework comme jQuery pour économiser les ressources côté client ou simplement en fonction de vos habitudes de travail. Toutefois, la méthode avec jQuery préserve un semblant d »accessibilité : au cas où Javascript est désactivé, les title sont toujours là pour remplir leur office.

Articles sur le même sujet

• Le petit journal du web — WordPress, développement web, etc.
• PHPCrossRef — Bibliothèques de référence pour projets PHP Open source
• 23 listes pour Webdesigners
• 10 liens pour faire plaisir à votre intégrateur web
• 100+ comptes Twitter pour webdesigner

Ne cibler que les navigateurs modernes grâce aux sélecteurs avancés — Astuce très intéressante de Raphaël Goetter pour cibler les navigateurs «modernes» ou les navigateurs «actuels». Les «modernes» sont les navigateurs qui prennent en charge les CSS3 ; les «actuels» (opposés à anciens) sont surtout Internet Explorer 7 et 8. Idéal pour mettre en oeuvre l’amélioration progressive sur votre site web.

J’étais sur la :root

Le pseudo-sélecteur :root permet de cibler les navigateurs modernes :

#toto { /* Pour tout le monde */
    display: block;
    float: left;
}
:root #toto { /* Pour les navigateurs modernes (CSS3 uniquement) */
    display : -moz-box;
    display : -webkit-box;
    display : box;
    float: none;
}

Ne gardez pas votre :lang() dans la poche

Pour cibler les navigateurs actuels :lang(fr) est notre amie. N’oubliez pas <html lang="fr"> pour que l’astuce fonctionne.

Exemple pour positionner un bloc à l’aide de table-cell :

#toto { /* Pour tout le monde, dont IE6/IE7 */
    float: left;
    width: 300px;
}
:lang(fr) #toto { /* Pour les navigateurs modernes et IE8 */
    display: table-cell;
    float: none;
    width: auto;
}

:lang(fr) #toto {  /* Pour les navigateurs modernes et IE8 */
    display: inline-block;
}
#toto { /* Pour IE6/IE7 et les anciens navigateurs */
    display: inline;
    zoom: 1;
}

Articles sur le même sujet

• HTML5 et CSS pour l'intégrateur web
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)
• «Test Drive» (IE9 preview) sur Vista

Après le petit journal HTML5 et CSS, je continue la série de l’intégration web côté client avec Javascript (et plus particulièrement jQuery) et une pincée de PHP histoire de ne pas totalement laisser de côté la partie serveur.

Javascript

• jQuery-Accessible-RIA — Collection de plugins pour jQuery repensés pour être conformes aux normes régissant l’accessibilité sur le web (WAI) : WCAG 2.0 et ARIA. Initialement développé pour améliorer les bonnes pratiques de développement front-end chez Namics, le pack se concentre sur les besoins récurrents en webdesign : lightbox, validation de formulaires et menus à onglets accessibles sont prêts à l’emploi. Via Web CSS Design.

• Zooming with jQuery and CSS — Ce petit script jQuery très simple permettra à vos lecteurs de modifier la taille du texte de votre site en choisissant une valeur dans un menu déroulant (select).

• Jquery Pagination System — Les systèmes de navigation sont généralement fait côté serveur et sont relativement gourmands en requêtes MySQL et en preprocessing PHP. Cette pagination est réalisée à l’aide de jQuery, côté client, donc. Un exemple à copier-coller est disponible pour vous faire une idée.

• Javascript Framework Matrix — tableau comparatif des principaux frameworks Javascript : jQuery, Mootools, The Dojo Toolkit, Prototype, Script.aculo.us, Ext JS, Adobe Spry, BBC Glow et Yahoo! UI Library.

  Les exemples concrets de codes permettant de se faire une idée de la syntaxe et de la philosophie adoptées par ces frameworks : General, DOM Ready, DOM Basics, DOM Filtering, DOM Manipulation, Effects, Transitions, Events, Custom Functions, Ajax et Classes. Via LudiBlog.

• jsbin — Cette application en ligne dédiée aux tests collaboratifs de code Javascript (y compris Ajax) créée par Remy Sharp (créateur de html5shiv) fait en sorte qu’Internet Explorer affiche les nouvelles balises structurelles disponibles dans HTML5.

• Closure Library — Toute la puissance de développement de Google au service de cette bibliothèque Javascript qui s’ajoute à jQuery, Prototype, etc. Je serais curieux de savoir ce qu’en pense les experts : Google est-il plus rigoureux avec Javascript qu’avec HTML ?

• Cheat SheetS pour développeurs web — 25 fiches pour avoir sous la souris l’essentiel pour travailler sur le web.

• 88 liens pour l’intégrateur web — Au menu : WordPress, jQuery, typographie, CSS, webdesign… Que du bonheur !

PHP

• Un Chat élémentaire en Php/jQuery — Tout est dans le titre. Ce chat tout simple (outre qu’il permet une transition idéale pour passer de jQuery à PHP) se rendra utile dans moults occasions.

• Roll Your Own PHP Framework — Série de trois tutoriels pour créer votre propre framework PHP. Propose l’ensemble des fichiers en téléchargement : 1. Part I : Réécriture des URL’s et système de fichiers — 2. Part II : Templates — 3. Part III : Interaction avec la base de données.

• Passez à l’UTF-8 sans manquer une étape — Les soucis d’encodage sur un site web sont aussi nombreux que les éléments de la chaine du web qu’il faut prendre en compte : du format d’enregistrement des fichiers composant le document HTML jusqu’aux en-têtes renvoyées par le serveur, en passant par le charset indiqué dans la balise meta http-equiv, la base de données… etc. Ce tutoriel de Josselin Willette fait le point avec précision et concision, ce qui ne gâche rien.

• 50+ Really Useful Tools For PHP Developers — Que l’on soit novice ou expérimenté, les outils utilisés pour développer ont un impact significatif sur la productivité et la qualité du code produit. Voir Les outils utiles pour les développeurs PHP pour la traduction française.

• 25 New & Useful PHP Techniques & Tutorials. plein de code et d’idées pour vos développements : de la rotation d’image à la Facebook au parcours d’un répertoire avec PHP et jQuery en passant par la création de requêtes RESTful vous aurez l’embarras du choix.

• Prepared Statements in PHP and MySQLi — Les requêtes préparées en PHP et MySQLi sont peu utilisées malgré qu’elles offrent une sécurité accrue pour vos applications web. C’est le moment d’en apprendre davantage.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• 139 ressources Javascript et jQuery
• 100+ comptes Twitter pour webdesigner
• 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.

Cette liste de ressources devrait rendre de grands services à l’intégrateur HTML & CSS ainsi qu’au développeur web. en effet, vous y trouverez : un générateur de miniatures pour la page d’accueil de votre blog WordPress ; des outils pour valider l’ensemble de votre site ; un fichier PHP pour gérer votre base de données et des plugins jQuery tous plus intéressants les uns que les autres, etc. Il s’agit du meilleur des bons plans que je propose sur mon compte Twitter integrateur_css. Stay tuned and mind the gap!

WordPress : redimensionnez et affichez une miniature à partir des images de vos articles

Je vous ai parlé dernièrement (dans les bons liens WordPress) du script get_post_images() associé à la fonction first_thumbnail() pour afficher une miniature en homepage, par exemple, en prenant la première image d’un article. Mehdi Kabab vient d’apporter une amélioration substantielle à la fonction first_thumbnail() pour prendre en compte le script timthumb qui permet de générer une miniature aux dimensions que vous voulez (via la bibliothèque graphique GD) plutôt qu’un redimensionnement HTML lourd de conséquence sur le poids de votre page d’accueil.

Vous pouvez voir cette petite merveille en action sur la page d’accueil de ce blog : les miniatures sont redimensionnées et affichées grâce à cet ensemble de fonctions. Pour les souhaits et surtout les remerciements c’est par ici que ça se passe ;)

Pages web et bases de données

• Validateur — Validez votre site Web en entier grâce à l’outil de validation multipages (via truffo). Ce service est développé et maintenu par le Réseau Proze et s’appuie sur le service de validation du W3C qui détient les droits d’auteur de son service.

• Adminer — est un outil tenant en un seul fichier PHP qui permet de gérer une base de données MySQL à la manière d’un phpMyAdmin light. Existe également sous forme de plugin pour WordPress.

• Firebug Lite — Ce simple fichier Javascript — disponible sous forme de bookmarklet — va superposer l’essentiel des commandes de Firebug à la page en cours.

Javascript et plugins jQuery

• jQuery Magnifier Loupe — propose un zoom pour vos images. Utilise intelligemment la propriété longdesc pour zoomer à partir d’une miniature (thumbnail). Il reste possible de « fabriquer » la miniature avec les propriétés HTML width et height. (via Amicalement Web).

Attention tout de même au caractère peu accessible de cette solution basée sur l’attribut HTML longdesc qui permet de fournir une description de l’image pour les malvoyants comme me le rappelle Sébastien Delorme sur Twitter ici, ici et ici ;)

Cela dit, le script ne nécessite pas obligatoirement l’attribut longdesc pour fonctionner ; il est possible de déclencher la loupe en utilisant la classe jLoupe sur l’élément img concerné !

• qtip jQuery Plugin — Sans doute la solution ultime pour gérer les info-bulles (tooltips) : cross browser, dégradation gracieuse, coins arrondis personnalisables, positionnement facile, effets personnalisables, AJAX, etc. (via arnaud-k)

• Vanadium — Validation et vérification des champs d’un formulaire à l’aide de l’attribut class. Par exemple : <input class=":required" type="text"> pour un champs requis ou <input class=":format;/^(vanadium)+$/i" type="text"> pour un champs qui doit recevoir la chaine de caractère vanadium. Possibilité de valider via AJAX avec <input id="pass" class=":ajax;/username_checker/check.json" type="text"> par exemple.

Quelques trucs pour vos CSS

• 21 polices de caractères à intégrer avec @font-face — Cette propriété CSS2 permet d’incorporer les informations vectorielles relatives à une fonte dans votre page web sous la forme @font-face { font-family: GraublauWeb; src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype"); } à utiliser ensuite comme suit : h1 { font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif; }

• Ultimate IE6 Cheatsheet 25+ hacks et contournements pour faire sa fête à IE6 — Avec des parts de marché estimées à 18% ou 25% selon les sources, l’intégrateur web doit encore se coltiner avec le dernier de la classes des navigateurs.

Miscellanées

• A l’occasion du Last Call pour l’écriture des spécifications pour HTML5, Florent V. répond à nos questions sur les différents DOCTYPE et autres types MIME qui peuplent la jungle du développement web. Des réponses synthétiques seront publiées dans le courant de la semaine prochaine.

Articles sur le même sujet

• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• 100+ comptes Twitter pour webdesigner
• Le petit journal du web — WordPress, développement web, etc.
• WordPress de A à Z — E comme Extensions (les plugins)
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

Twitter devient le service web 2.0 sur lequel il faut voir et être vu. Je vous propose un petit voyage dans le webdesign anglo-saxon avec 100 comptes Twitter utiles dans le cadre d’une veille technique et stratégique sur le Webdesign, WordPress, les Standards du Web, Javascript & jQuery, Photoshop & Illustrator, HTML & CSS, PHP, l’architecture de l’information, etc. Au menu, le pseudo avec un lien vers le compte Twitter et la bio présente sur le profil.

Webdesign

1. DeliciousHot — Currently Popular content from Delicious
2. Fleuron — The British Journal of Typography and Design
3. webdosanddonts — Tips and tricks for the modern day web designer
4. zeldman — The present-day pachuco refuses to die.
5. sixrevision — Web developer/designer and founder of Six Revisions.
6. ilovetypography — Covering news from the Colorado Startup scene
7. DesignerDepot — Webdesigner Depot is one of the most popular blogs about web design trends, tutorials and much more. It’s run by Walter Apai, a web designer from Vancouver.
8. nazareth – Web and Graphic Designer, Developer UX, CSS, (X)HTML, Blogger, Twitter Fan, Internet Addict, Freelancer, Adobe Instructor, Digital Illustrator, friend
9. wwwdesign — Whirl Wind Web & Design Studio provides services for website design, eLetterhead, ecommerce and content management systems small to medium sized businesses.
10. in_design — Share all important and interesting information about DESIGN via Twitter4all.COM then FOLLOW a moderated selection on this Twitter Design Channel
11. webdesignledger — http://webdesignledger.com/
12. 101bestwebsites — 101 Best Websites is a new approach to website showcasing.
13. designfeed — Tweeting the best web and print design feeds. I’m a bot, I don’t reply to @’s. Please send suggestions for feeds in a DM. Retweets are very much appreciated :)
14. wpstudios — WPstudios is a visual design and coding agency
15. mezzoblue — using Twitter for me, not for you.
16. cwylie0 — web developer, homebrewer, guitarist, herb gardener into comics, horror movies, photography
17. DesignNewz — Feeding the design community with design and dev related news, articles and tutorials! yay! (please also follow @jophillips)
18. khoi — Design Director, NYTimes.com
19. hvdesigns — http://www.hv-designs.co.uk/
20. justintadlock — Web designer, teacher in Seoul South Korea, and all-around good guy.
21. Hicksdesign — Designer and cheese fetishist working for Opera Software from the Cotswolds, UK
22. stevensnell — Web designer, blogger, and freelance writer.
23. COStartupTrack — Covering news from the Colorado Startup scene
24. Malarkey — Andy Clarke designs things, then writes and talks about them.
25. WebDesignDev — Learn web design the easy way!
26. Minervity — Web/Graphic Designer. Web Developer. Founder of Minervity.com, RazorMade Mediaworks and The MonoTwins.
27. kevinmarks — Reading your thoughts. if you write them first.
28. coopercobra — Stage Tech,a mac user, interested in webdesign,typography,graphism
29. ThemeForest — Awesome ThemeForest Files, Community, News & Chatter
30. buildinternet — Web design, development, and business blog run by twins Sam and Zach Dunn
31. webmonkey — I am webmonkey. I help you build websites! | http://www.webmonkey.com/
32. mikeindustries — Come heavy or don’t come at all.
33. stefsull — Client-side developer. Beach volleyball freak. Procrastinating workaholic. Codes, trains & writes for food.
34. dewebtimes — latest in technology from Design, Graphics, Industry News, Photoshop, Showcase, Usability, Web Development. CSS Gallery and Showcase for Your Website.
35. DesiMatlock — Personal: Mom of twins, daddy’s girl, traveler/polyglot. Work: Web geek, SEO, SEM (lotta PPC) & hand-coded valid (can you say perfectionist?) website redesigns.
36. bkmacdaddy — Web and graphic designer: SEO XHTML CSS PHP Joomla Templates, Magento Themes, WordPress Themes, Twitter Backgrounds – all your web design dreams in 1 place!
37. DesignNewTrends –The best news in the design and web development world from around the web.
38. Abduzeedo — Graphic/web designer and blogger.
39. markboulton — Is not an early adopter. Apparently.
40. jasonsantamaria –Designer by day, designer by night.
41. elliotjaystocks — Designer / author / speaker. Currently accepting new work!
42. meaganfisher — I love good design, well written markup, and owls. I’m the deputy designer at SimpleBits. When not helping Dan, I work with my own clients.
43. webofdesign — web design!

WordPress

1. iandstewart — I’m the WordPress Theme Developer behind the popular Thematic Theme Framework, LaunchPad Theme, and Wpazo.
2. pimpmywordpress — Help you ‘pimp’ your blog by publishing the latest free themes, hot plugins, blogging tips, tricks and tutorials on using WordPress.
3. themehacks – love graphic design, wordpress fan. I design themes and templates.
4. FreelyWordpress — Premium WordPress Themes, Given away for FREE, Blogging Theme, Woo Themes, Thesis Theme and much more.
5. wordpress — Updates and other fun stuff related to WordPress.org (that’s the self-hosted version).
6. ozh — WordPress & PHP hacker.
7. wptavern — Official account for the WPTavern website
8. wpfreelance — Freelance marketplace for WordPress theme design, plugins, programming and tweaks.
9. iheartwordpress — WordPress Fanatic, Helper, Designer
10. photomatt — WordPress, Automattic, Akismet…
11. hashwp — Finding news about #wp and #wordpress and RT them
12. themesnack — Premium WordPress Themes & HTML Templates
13. myWordPress — WordPress Video Tutorials – From basic usage to advanced SEO tactics
14. ThemeHunter — We hunt for the latest and greatest WordPress themes and share them with you! Some of the themes we feature are paid, many are free!
15. nathanrice — I do stuff with WordPress. Not kinky stuff, just normal « code » stuff.
16. wordpress_jobs – wordpress jobs + projects for freelancers, jobber + buyers
17. adii — Entrepreneur, co-founder of WooThemes and general creator of Rockstar Awesomeness!
18. wpbeginner — WP Beginner offers tips, tools, resources, and suggestions to #Wordpress Users. If you are a WordPress User, then you should stay updated with our tweets.

Standards Web

1. meyerweb — Web standards | (X)HTML | CSS | microformats | community | writing | speaking | signing man.
2. laura_carlson — http://webstandardsgroup.org/features/laura-carlson.cfm
3. w3c — The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential.
4. bblfish — The Semantic Web as philosophical Engineering. Social Cloud Architect at Sun Microsystems.
5. mollydotcom — The Annoying Standards Girl.
6. technorati — Who’s saying what. Right now.
7. t — barcamp bicycler buildingblocks climber cultural evolution gtd hacker independent microformats nerdy optimist pescatarian scientist skeptic
8. cdibona — Googler, Open Source Dude, Dad
9. alistapart — A List Apart–For people who make websites
10. 9swords — Web Developer / Designer – Student of W3Schools Refsnes Data W3C Web Standards
11. iheni — Accessibility and standards advocate, Sinaphile, kickboxer and Chinese foodie.
12. webstandard — Web-Developer, Blogger, Autor mit Tweets zu Webdesign, Entwicklung, Usability, Internet, Tools, Trends, …

Javascript

1. codepo8 — All things web, writing and working together
2. robertnyman — http://robertnyman.com/
3. jquery — Write less, do more. News & updates from the jQuery team.
4. shauninman — Cool like Mint. Hot like a Fever. Designer. Developer. Um, schemer?
5. jeresig — Creator of jQuery, JavaScript programmer, blogger, author, work for Mozilla.
6. ppk — Freelance front-end web development consultant, agent, trainer, writer, blogger, and speaker. Currently doing heavy research into mobile browser compatibility.
7. del_javascript – Javascript News and Links (from del.icio.us)
8. http://twitter.com/javascript_news — reddit.com/r/javascript_news
9. http://twitter.com/greatjavascript — I bring great links of Javascript to the wealth of Developers and designers that follow me. WARNING GOOD LINKS!!!
10. jsninja — Here on Twitter I will sporadically divulge sensitive information regarding JavaScript and its various abstractions…
11. rem — Invented Squirrels

Graphisme, Photoshop, Illustrator

1. vectorart – Vector Art : A digital illustration blog for graphic designers & illustrators. Free vectors, brushes, tutorials, fonts and more.
2. PSDTUTS — The web’s #1 Photoshop tutorials site.
3. VECTORTUTS — http://vector.tutsplus.com/
4. patternhead — Designer, blogger, front end coder, pattern designer, painter, wannabee artist in love with Photoshop, Illustrator and Jquery.
5. hashphotoshop — Finding news about #photoshop and RT them
6. PshopCreative –We’re the team behind Photoshop Creative – the magazine for Adobe Photoshop inspiration and advice
7. Colorburned — Brushes, patterns, vectors, tutorials and more!
8. logomoose — Logo design inspiration gallery
9. photoshoplady – All of the Best Design Resources Around the World
10. Photoshop_PSD — Photoshop Tutorials: How To Do, Skills Like A Pro
11. colorburned — Brushes, patterns, vectors, tutorials and more!
12. Illustrator_GU — Illustrator articles, tutorials, reviews, tips, tricks, and freebies from GurusUnleashed.com
13. InsideAI — We’re members of the Adobe Illustrator product development, marketing, and engineering team. Let us hear from you!
14. ComputerArts — The world’s best-selling creative magazine
15. Photoshop_GU — Photoshop articles, tutorials, reviews, tips, tricks, and freebies from GurusUnleashed.com
16. NAPP_News — We are the National Association of Photoshop Professionals (led by Scott Kelby), the leading world-wide resource for Photoshop training.
17. photoshopguides — Fresh Tutorials Added Daily
18. psdisasters — Pour le fun, histoire de voir ce qu’il ne faut pas faire avec Photoshop !