WordPress, HTML5, CSS3, jQuery, graphisme et orthographe

• WordPress, what else!
• HTML5, CSS
• jQuery
• Graphisme, images et icônes
• Grammaire, orthographe et synonyme
• Miscellanées

Abandonnées peu à peu depuis mon utilisation intensive de Twitter où je partage l’essentielle de ma veille technologique (en plus de Delicious), les listes de liens commentées refond leur apparition sur ce blog. Si Twitter est le format idéal pour partager des liens au fil de l’eau, il n’est pas toujours évident pour le follower de s’y retrouver parmis les nombreux liens proposés. C’est pourquoi, j’en rajoute une couche dans cette nouvelle rubrique intitulée Le petit journal du web. Par ailleurs, je me dit qu’un tweet est bien peu de chose : rien ne vaut un bon vieux backlink en dur comme récompense du travail accompli et comme motivation pour celui à venir !

WordPress, what else!

Si on ne présente plus WordPress, ce n’est pas une raison pour ne pas rappeler que ce n’est pas qu’un moteur de blog ni même un CMS : c’est un moteur d’envies !

Pour en savoir plus sur nos envies, justement, Xavier Borderie lance un grand sondage pour mieux connaitre la communauté francophone de WordPress. A vos claviers !

En attendant, voici une sélection de liens qui devraient vous intéresser que vous soyez débutant de chez débutant ou un professionnel de la profession :

• WordPress Upgrade — Ce script développé par Martin Panel et Billyboylindien permet de mettre à jour automatiquement plusieurs installations de WordPress en une seule passe. Via Free Tools. Voici le déroulement des opérations : 1) Téléchargement de la dernière version de WordPress ; 2) Backup des fichiers et de la base de données de votre WordPress (pas besoin de renseigner les login et password) ; 3) Mise en place des nouveaux fichiers (conserve votre wp-content intact) ; 4) Mise à jour de votre base de données.

• L’ordre d’affichage des catégories par ordre alphabétique ascendant ou descendant n’est pas forcément le plus adapté. Pour y remédier, je vous propose deux plugins : Category Order qui date peut-être un peu mais qui me donne entière satisfaction et My Category Order qui ne fonctionne pas chez moi (peut-être à cause du thème Hybrid). Si vous le testez, n’hésitez pas à revenir pour nous en toucher deux mots.

• Widgetifyr — Créer un widget pour WordPress n’aura jamais été aussi simple. Il suffit de renseigner quelques champs concernant votre plugin et hop ! Widgetifyr se charge de toute la partie laborieuse. Il ne reste plus qu’à créer une belle fonction PHP… Via SlyDnet.

• Last but not least, voici la partie WordPress de la grosse grosse liste.

HTML5, CSS

Vous en avez sûrement du vous en rendre compte, la pression exercée par HTML5 (et CSS3) ne fait de plus en plus forte. Il y a quelques temps j’avais fait une tentative pour faire le point sur HTML5 et voir s’il ne s’agissait pas de vaporware vu les délais et les contraintes (absence de support des nouvelles balises par IE et guerre interne pour le contrôle des codecs audio et vidéo). Mais il semblerait que l’on puisse commencer à travailler avec HTML5.

• Envie d’utiliser HTML5 mais pas chaud pour mettre les utilisateurs d’IE de côté ? Facile, placez ce bout de code dans votre page web :

`

`

Créé par Remy Sharp et inspiré par HTML5 Shiv de John Resig. On en profitera pour connaitre une des manières les plus courtes pour savoir si le navigateur est Internet Explorer avec var isMSIE = /@cc_on!@/false; ou plus court encore var isMSIE = /@cc_on!@/0;

• Galerie de site réalisés avec HTML5 — Comme son nom l’indique, ce site présente des sites web réalisés avec HTML5 et pourrait bien de prendre la place qu’avait CSS Zen Garden en son temps pour vanter les mérites des feuilles de styles. Bref, du «  en veux-tu en voilà !

• HTML et CSS orienté objet ? — Les bonnes pratiques de codage, la séparation de la forme et du fond par l’exemple dans ce tutoriel présentant les avantages de la pensée « objet » avec moult snippets de codes CSS3 et HTML5 pour aboutir à une page web comprenant un header, une section, une barre latérale (aside) et un footer.

• DOM vs namespace pour implémenter HTML5 sur IE6, IE7, Firefox2, Camino, etc.

• Comparez les meilleurs Frameworks — Avec une dizaine de frameworks PHP, 6 frameworks Ruby, de 12 frameworks Javascript et de pas moins de 22 frameworks CSS, ce comparateur de Framework permettra aux indécis d’avoir une vision claire des principaux atouts des uns et de découvrir les autres.

• CSS Sticky Footer Layout — Un pied de page (footer) toujours en bas de la page en CSS (sans Javascript, sans div surnuméraire) tout en restant compatible avec moult navigateurs.

• Last but not least, voici la partie ressources pour webdesigners de la grosse grosse liste.

jQuery

jQuery est toujours une bibliothèque Javascript aussi rapide et concise pour simplifier les longues traversées de DOM, border les manipulations hasardeuses d’événements, faire de jolies animations et dompter Ajax. jQuery est tout désigné pour changer la manière dont vous écrivez Javascript. Ou pas, d’ailleurs, parce qu’une des raisons de la popularité de jQuery provient de la foultitude de plugins prêts à être installés en deux coups de cuillères à pot, et c’est très bien ainsi !

• Lazy loader — Vous souvenez-vous du préchargement d’images en Javascript ? Et bien ce plugin pour jQuery fait exactement le contraire : il ne charge vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur. Le plugin est doté d’options plutôt bien pensées : seuil en pixels à partir duquel l’image sera chargée ; image de substitution en attendant le chargement de l’image ; apparition des images sur un événement click ou mouseover ; affichage des images après le déclenchement d’une fonction personnalisée, etc. Via Anis Berejeb.

• jQuery UI Multiselect — Améliore l’apparence et l’ergonomie de la balise HTML select basé sur jQuery 1.3 et jQuery UI 1.7, ce plugin dispose même d’un champs pour rechercher parmis les options proposées. Via arnaud-k.

• Faire un carrousel avec jQuery — Tutoriel très didactique qui décompose le déroulement des opérations pour réaliser un carrousel de base avec HTML, CSS et jQuery.

• jQuery Tools — Si jQuery UI propose des éléments d’interface de qualité, jQuery Tools va encore plus loin en proposant l’incorporation des animations Flash, une gamme étendue d’overlay, des tooltips à foison, des tabs, etc. Voir jQuery Tools: The missing UI library for the Web pour plus d’information. Et pour achever de vous convaincre, voici la page de démontration.

• News déroulantes à la iTélé — Très bonne solution pour avoir un joli bandeau de news à l’aide de liste de définition, d’une pincée de CSS et d’une bonne rasade de jQuery avec explication de texte. Le tutoriel aborde également les aspects graphiques avec le découpage des images. Profitez-en pour jeter un oeil sur la création de plugins jQuery et sur cet effet de page cornée en quelques lignes de jQuery.

• Last but not least, voici la partie jQuery de la grosse grosse liste (plus de 240 plugins classés par thème)

Graphisme, images et icônes

Après le code, le visuel est un élément indispensable. Il peut être minimaliste ou exubérant. Coloré ou gris. Simple ou complexe. C’est à vous de voir.

• Worth1000 — Peu connu en France, Worth1000 est pourtant une référence internationale quand il s’agit de dégainer Photoshop. Voici la page des tutoriels qui vous permettra de vous faire la main pour participer aux nombreux concours thématiques auxquels j’ai participé en 2005. Cf. ma petite note sur Worth1000.
  

• 45 tutoriels pour Photoshop — Une bonne tranche de tutoriels assez variés pour élargir nos connaissances concernant le meilleur logiciel du monde ! J’ai particulièrement apprécié Creating a Vector Composite Effect from a Photo pour son impact visuel, Photo Cutout Photoshop Tutorial, Turn A Photo Into A Collage Of Polaroids, Making Skin Beautiful et Create an Illustrated Look From a Photograph.

• All Silhouettes — contient plus de 5 700 silhouettes vectorielles au format Illustrator (.ai) et Photoshop (brossse) réparties dans plus de 90 packs (via webstorming) : feuilles et palmiers, signalétique de danger ou de sport, flèches diverses, fleurs, chevaux, couples, vaisseaux spaciaux, bateaux, filles sexy ou au travail et autres silhouettes humaines.

• Icon Finder — Recherchez parmi plus de 110 000 icônes et 230 collections avec ce moteur de recherche très bien pensé : recherche par taille (12px, 16px, 16px, 32px, 48px, 64px et 128 pixels) ; par couleur de background ; pour usage commercial seulement ou non, etc.

Une suggestion des recherches liées à la vôtre vous permettra d’élargir votre horizon. Bref, c’est le coup de coeur de cette semaine (que j’ajoute à la grosse grosse liste des 1000 ressources pour webdesigner). Merci @codeur !

• 25 blogs de graphistes — jolie liste dont votre serviteur fait partie.

• Last but not least, voici la partie icônes et goodies pour Photoshop de la grosse grosse liste.

Grammaire, orthographe et synonyme

• Ressources gratuites pour s’améliorer en français — plus de 80 liens pour décrypter les mots et expressions de la langue française. Mais aussi : des dictionnaires en ligne, de synonymes, de rimes, conjugaison, dépannage linguistique, grammaire et orthographe, terminologie, vocabulaires thématiques, thésaurus, dictionnaires de sigles, d’acronymes et d’abréviations, étymologie, littérature classique, dictées, logiciels, forums et portails, argot etc.

• 11 ressources pour mieux bloguer en français — comme son nom l’indique 😉

Miscellanées

• Mac OS X est-il vraiment ergonomique ? — Comparatif entre un environnement Linux (Kubuntu) et Mac OS X Léopard : gestion des fenêtres, explorateur de fichiers et autres applications. Conclusion : Et vous ? Qu’est-​ce qui vous fait rester sous Mac ?

PS : Le petit journal du web est gratuit : faites tourner !