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 !
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 !
Cette liste de liens pour le développeur web front-end est issue de la veille documentée que j’effectue sur Javascript & Webdesign — Les meilleures ressources Javascript pour développeurs web front-end (avec parfois un soupçon de PHP) – depuis plus de 6 mois. A quelques exceptions près, les resssources pointent directement sur les articles d’origine. La liste est affichée dans l’ordre où j’ai rédigé les billets : les plus anciens en premier par paquet de 10 pour aérer la lecture parce que vous le valez bien.
select.select et input avec jQuery.window.open() !fieldset.PS : Pour trouver l’article correspondant sur js4design, il suffit de saisir l’ancre du lien dans le champs de recherche de la colonne latérale.
Une petite note personnelle pour annoncer la parution du hors-série n°5 du magazine Webdesign (webdesignmag.fr) dans lequel j’ai écris un tutoriel sur la création d’une page web réalisée avec HTML5 et CSS3 sans image, avec une dégradation gracieuse dans les navigateurs ne prenant pas en charge les coins arrondis, les ombres portées ou les dégradés.
En prime, les fichiers HTML et CSS sont disponibles sur le CD du magazine et l’ensemble est disponible pour la modique somme de 12,90€ dans les bons kiosques à journaux ! Cerise sur le gâteau, vous y trouverez une belle interview de Raphaël Goetter à propos d’Alsacréations.

100% tutoriels exclusifs sur HTML5, CSS3 et jQuery

Retrouvez-moi à la page 128 du magazine !

Une bien belle interview à propos d'Alsacréations.
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.
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');
});
Merci à ceux qui ont pris le temps de répondre à ma question sur Twitter pour la bonne syntaxe 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.
<?php
function categories_without_title_attribute() {
$categories = wp_list_categories('echo=0');
$categories = preg_replace('/title=\"(.*?)\"/','',$categories);
echo $categories;
}
?>
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;
}
?>
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');
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.
J’ai lancé mi-novembre 2009 le blog js4design pour garder les bons liens Javascript et jQuery sous la souris. A l’exception du billet pour annoncer son lancement et des liens réguliers sur Twitter, je n’ai pas fais d’efforts particuliers pour le promouvoir. C’est pourquoi je suis très content des résultats que je tiens à partager avec vous :
A noter le pic de 994 visites le 30 novembre 2009 suite à l’annonce de l’ouverture du blog par Victor Brito. Ce qui fait d’Alsacreations la première source de trafic pour js4design. Sans oublier Planète jQuery et Planète Standard du Web que je tiens à remercier également.
Les statistiques font état de plus de 1 230 requêtes issues des moteurs de recherche Google :
Je vous fais grâce de la longue traine ;)
Pour finir, le billet le plus lu au moment où j’écris ce billet est 22 menus déroulants passés au crible.
Voici les 11 derniers script ou plugins qui ont particulièrement attirés mon attention :
J’en profite pour vous souhaiter une bonne et heureuse année 2010 (année de la milice ?) !
Si vous travaillez avec une grille pour harmoniser la disposition des blocs sur la page, vous passez certainement du temps à afficher puis masquer cette grille pour vérifier que tout est en ordre. Pour cela on peut ajouter une classe CSS dans le code HTML ou mettre entre commentaires une ligne concernant le background de la page dans la feuille de style… Les deux solutions sont assez fastidieuses. C’est pourquoi, je vous propose une petite astuce toute simple qui s’applique à tout type d’intégration avec toutefois un bonus pour WordPress que vous adapterez sans peine à votre CMS préféré.
Voici le code à ajouter dans votre template WordPress si vous voulez afficher ou masquer la grille en production. Si vous travaillez en local (ou si vous n’utilisez pas WordPress), supprimez le code PHP :
<?php if ( is_user_logged_in() ) : ?>
<a id="displayGrid" href="#displayGrid">Afficher/masquer la grille</a>
<?php endif; ?>
Le bout de code jQuery pour gérer l’événement :
// Affichage de la grille si connecte
$("#displayGrid").click(function() {
$("html").toggleClass("display-grid");
});
La règle CSS à mettre dans votre feuille de style :
.display-grid #container {
background: url(pix/grid.png);
}
Pour que le lien vous suive quand vous faites défiler la page :
#displayGrid {
position: fixed;
}
Avec un peu d’astuce et d’espièglerie vous trouverez rapidement de nombreuses applications à cette astuce. Je pense notamment à la possibilité de proposer une mise en page CSS alternative aux visiteurs.
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.
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 !
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.
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!
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 ;)
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.
jQuery Magnifier Loupe — propose un zoom pour vos images. Utilise 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.
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.
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.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.
N’oubliez pas de me rendre visite sur @css4design où je tiens un micro-blog sur les CSS, le HTML, le Webdesign, le Graphisme, etc. Vous y trouverez quelques pensées en vrac et des discussions avec d’autres passionnés du web. Le tout en 140 caractères, parfois moins ;)
Stay tuned and mind the gap!
C’est sur le Dator Blog, que j’ai déniché jQuery Splitter tout droit sorti de chez Dave Methvin. La splitbar peut être déplacée très facilement de manière accessible en cliquant-déplaçant avec la souris, avec une accessKey ou encore via la touche tab. jQuery Splitter requiert la version 1.3.2 de jQuery et permet d’afficher une séparation entre deux contenus sous la forme :
<div id="MySplitter">
<div> Left content goes here </div>
<div> Right content goes here </div>
</div>
#MySplitter {
height: 200px;
width: 500px;
border: 5px solid #aaa;
}
#MySplitter div {
overflow: auto;
}
.vsplitbar {
width: 5px;
background: #aaa;
}
$().ready(function(){
$("#MySplitter").splitter();
});