CSS & Webdesign » ShortCode

Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek

Bruno Bichet — Tue, 12 Oct 2010 07:54:54 +0000

Vous l’attendiez, il est là, c’est le petit journal du web ! A la Une cette semaine : des ressources pour exploiter au mieux les propriétés CSS3, un dossier sur l’ARIA-nisation et la HTML5-nisation de WordPress, le point sur display: inline-block, un tutoriel conséquent sur Javascript, le bilinguisme et l’optimisation des performances dans WordPress (et tout un tas d’astuces très pratiques). Vous aurez aussi un modèle de cahier des charges et des informations pour partir du bon pied avec vos projets de sites Web. Deux nouvelles rubriques font timidement leur apparition dans cette revue de presse : La vie quotidienne du geek et Nostalgeek.

Breaking News!

Charité bien ordonnée commence par soi-même : voici la liste des billets que j’ai mis à jour dernièrement : 28 frameworks CSS et Le petit journal permanent de HTML5.

WordPress

Une actualité littéraire débordante avec la parution de deux livres sur notre CMS préféré.

Sites Web avec WordPress 3.0 — Cet ouvrage «100% pratique» paru aux Editions DUNOD est destiné à ceux qui souhaitent découvrir et maîtriser WordPress 3.0 sans perdre de temps. Il a été écrit par Simon Kern (Brin d’web et Alsacréations), concepteur et designer graphique & multimédia pour des des projets web et print. Il est également formateur sur Flash et WordPress. L’objectif principal du livre est de vous permettre de maitriser la création d’un thème WordPress 3.0 grâce à un concentré de pratiques saines et efficaces. Le livre est accompagné d’un CD-ROM et la table des matière et un aperçu du livre sont disponibles sur DivaBook.

WordPress 3 — Cette seconde édition entièrement révisée couvre les nouveautés de la version 3. Les débutants pourront construire un blog et les lecteurs expérimentés approfondiront leurs connaissances techniques : conception de thèmes et d’extensions, mise en place d’un réseau de sites avec la fonctionnalité multisites intégrée. WordPress 3 est écrit par Xavier Borderie, Francis Chouquet et Amaury Balmer — Salut les gars o/

WordPressez, il en restera toujours quelques chose !

Bilinguisme et WordPress : plugins et astuces — Présentation de Yannick Carrière-Guy composée de 51 slides sur l’internationalisation (i18n), la localisation (l10n) et les différentes techniques et plugins permettant d’avoir du contenu bilingue dans WordPress. Via On fait du web. Cf. l’article Un blog WordPress multilingue avec WPML Multilingual CMS.
Optimisation WordPress : vitesse et performances — Le temps d’affichage d’une page page est un facteur important dans la perception de votre site par les internautes. Ce billet passe en revue les optimisations que l’on peut faire sur une installation WordPress pour gagner des secondes et des visiteurs. Au sommaire : les outils nécessaires pour benchmarker son blog, l’optimisation de la taille des fichiers CSS, les fichiers Javascript, les images, le serveur et le core de WordPress. Lire aussi Accélérer son site web avec Squid et Architecture pour un blog optimisé.
6 modèles de pages indispensables pour WordPress — Le thème par défaut de WordPress Twenty Ten comporte une floppée de templates différents, mais tous ne sont pas indispensables. Pour ma part, je les limite au maximum en commençant par index.php et en ajoutant les autres au fur et à mesure des besoins. Voici les six modèles les plus utilisés et les tutoriels associés : page d’erreur 404, page de liens, page sitemap ou plan du site, page d’archives par catégorie, page d’accueil sur-mesure et page de contact.
Sécuriser son blog WordPress et lutter contre le spam — Ce manuel de combat est composé de 22 parties qui sont autant d’éléments à prendre en compte pour sécuriser son blog WordPress. La première qui me vient à l’esprit, c’est que ça n’arrive pas qu’aux autres :-( Pour le reste, faites confiance à ce spécialiste des blogs sous WordPress.
Options de configuration de WordPress — Un billet de Grégoire qui nous donne de quoi nourrir notre fichier wp-config.php : définition de la lange, optimisation des performances, debug et développement, sécurité. Lire également Pimp your wp-config.php et le Codex.
10 useful new WordPress hacks — Encore des hacks (ou plutôt des fonctions PHP appliquées à l’API de WordPress) pour adapter le CMS à vos désirs : supprimer les liens automatiques dans les commentaires, notifier vos abonnés à chaque nouveau billet, mettre la date au format Twitter, afficher les miniatures dans le flux RSS, bloquer les requêtes extérieures, simplifier le mode debug, utiliser les Shortcodes dans les fichiers du thème, autoriser l’upload de fichiers avec des extensions exotiques, utiliser un Shortcode pour visualiser les documents au format PDF et détecter le navigateur utilisé pour ajouter une classe dans la balise `body`.
BuddyPress, votre propre réseau social sous WordPress — BuddyPress est un plugin qui ajoute une couche de réseau social à votre blog. Ce tutoriel prend le temps d’expliquer la majorité des options disponibles pour nous permettre d’en profiter au mieux.

HTML(5), CSS(3), jQuery (Javascript)

Le W3C n’est pas encore prêt à mettre en place HTML5 — J’apprends avec stupéfaction que les propos que je tenais sur HTML5 dans Quelques notes, beaucoup de liens (et un peu de mauvaise foi) sur HTML5 n’étaient pas totalement à côté de la plaque ! Philippe Le Hégaret — Un membre du W3C qui porte bien son nom — nous apprend que les spécifications de HTML5 sont encore à l’état de brouillon et qu’une mise en production serait prématurée en raison de l’instabilité du bouzin… Pour ma part, j’y vois le résultat des pressions exercées par un industriel comme Adobe, peu satisfait de voir que les parts de marché de Flash commencent déjà à s’émietter au profit de la balise . Quand on parle de HTML5 dans les médias, il s’agit avant tout de gros sous, et pas de nos balises `article` ou `hgroup` : quand on parle «structure», ils entendent «facture» ^^
Utiliser CSS3 aujourd’hui, outils et ressources — Des ressources pour se simplifier l’utilisation des effets CSS3.
Sémantique HTML5 et ARIA pour WordPress — Dossier complet sur le passage à HTML5 d’un blog WordPress avec la prise en compte des rôles ARIA : Introduction et travail préparatoire, Les articles, HTML5 Forms et rôles ARIA, La mise en page sémantique.
La rubrique HTML du manuel du savoir-faire à l’usage des geeks et des curieux — Les recherches d’un développeur sur les nouveautés HTML5 : Stockage local vs. Cookies, la balise Meter en HTML5, l’attribut autofocus, la géolocalisation, l’audio, l’attribut Placeholder, etc.
La propriété CSS display: inline-block — Malgré son intérêt, cette propriété est sous-employée alors qu’elle peut s’avérer très utile pour les menus de navigation, les nuages de tags ou la gestion graphique des titre h1 — h6.
Javascript Off — Michel Fortin navigue au quotidien en désactivant Javascript et ça lui va bien. Il nous relate son expérience.
CSS3 Button Generator — Par le créateur de bxCarousel, cet outil permet de créer des boutons en CSS3 à l’aide d’une interface intuitive pour utiliser les propriétés relatives aux polices de caractère, à la boite, aux bordures, au background (y compris avec l’état survolé `:hover`)
Dynamisez vos sites web avec Javascript ! — Ce tutoriel sur Javascript a été conçu de manière à ce qu’un minimum de connaissances en HTML soit nécessaire. Le cours est composé de deux parties et devrait aborder le DOM, les objets, Ajax, Mootools et HTML5 prochainement. Lecture complémentaire : jQuery : écrivez moins pour faire plus !
Who Is Online –Conçu avec PHP, MySQL et jQuery, WIO affiche en temps réel le nombre de visiteurs qui parcours votre site Web. Voir la démonstration. Via Restez Connectés.

Métiers du Web

Modèle de cahier des charges de site web — Envie de lancer un appel d’offre, mais vous ne savez pas par quoi commencer ? Damien Ravé nous offre un modèle de CDC au format .doc (qui s’ouvrira parfaitement avec OpenOffice.org) à compléter selon vos besoins. Rendez-vous à l’adressse cahier-des-charges-web.lepotlatch.org pour avoir la dernière version. Bref, de quoi éviter le cahier «décharge» ^__^
La vie des intégrateurs, chapitre IV : Les specs ? Quels specs ? — Eric le Bihan nous parle avec humour du processus et des différents intervenants impliqués dans la création d’un site web : «réunion de kick-off et identification des ressources», «conception et wireframes», «création graphique et mise en couleur», «validation du client», «laissez les intégrateurs faire leur travail…», «on va débugger tout ça maintenant». Lecture complémentaire : Bien démarrer son projet avec le kick-off meeting.
Bilan d’une recherche d’emploi — Sylvain Fix fait le bilan d’une recherche d’emploi qui lui a permis de prendre le temps d’étudier le marché de l’emploi dans le secteur du développement web : le secteur de l’informatique est en crise, le critère de la localisation géographique, que nous disent les entretiens d’embauche, les rémunérations.

Vie quotidienne du geek

Flux RSS — Vous ne le savez peut-être pas, mais Google abandonne le support du tracking des changements survenus sur un site web. Grosso modo, Google Reader proposerait la création d’un flux RSS pour les sites qui en étaient dépourvus. Parmi les alternatives, Google himself nous propose d’utiliser page2rss.
Photoshop CS3, Retouche photo — En attendant un retour un peu plus touffu, je vous conseille la lecture de ce livre sur les techniques des professionnels pour retoucher vos photos numériques de la perception de la lumière et des couleurs par l’oeil humain à la l’optimisation pour la diffusion à l’écran (Web) ou pour l’impression. Téléchargez gratuitement Les fichiers PDF optimisés pour le web (21 Mo) ou les fichiers PDF pour l’imprimeur (120 Mo) disponibles également par chapitres.
25 tutoriels Photoshop et Illustrator — Belle liste de tutoriels pour les plus graphistes d’entre vous avec des thèmes allant de la création d’une fille-oiseau (assez improbable mais les techniques mises en oeuvre valent le détour) à des effets de flammes de très bonne facture.
Goo.gl a maintenant son site et des statistiques — Le service de réduction d’urls de Google lancé fin 2009 et utilisé en interne par Google dans FeedBurner, Maps ou Picasa devient accessible au public pour en faire le raccourcisseur le plus stable, le plus sécurisé et le plus rapide du web. Cerise sur le gâteau, Goo.gl propose des statistiques à la manière de bit.ly.
YOU CANNOT COPYRIGHT A TWEET – La loi américaine sur le droit d’auteur ne semble pas protéger les tweets qui n’entrent pas dans son champs d’application. Que dit la loi française ?

NostalGeek (pour la route)

Déjà fini ?

Oui, jusqu’à la prochaine édition. En attendant, n’hésitez pas à me retrouver sur mon compte Twitter @br1o les bons tuyaux et de vous abonner au flux RSS du blog de l’intégrateur. Merci de votre attention.

Articles sur le même sujet

Pour réparer éditeur visuel bloqué, casses un flux RSS ^_^

Bruno Bichet — Tue, 10 Jun 2008 10:01:00 +0000

Dans WordPress, le bloquage de l’éditeur visuel basé sur tinyMCE en position HTML arrive relativement souvent sans que l’on sache vraiment pourquoi. C’est typiquement le genre de petit soucis qu’on laisse passer un temps avant de s’attaquer au problème. En ce qui me concerne, j’ai parcouru les quelques ressources qui en parlait, pour découvrir que certains thèmes WordPress causaient des problèmes en ajoutant des fonctionnalités à l’éditeur.

Toutefois, dans mon cas, vu que mon thème, c’est moi qui l’ai fait, je sais ce qu’il y a dedans : je n’ai pas touché à ce satané éditeur visuel… Hum… sauf qu’en testant avec le thème par défaut, le problème s’est réglé. Damned! Le problème vient donc bien de mon thème…

A partir de là, il ne m’a pas fallu bien longtemps pour chercher du côté du fichier functions.php qui apparaissait comme le seul à pouvoir torturer le petit tinyMCE de la sorte. D’autant plus que j’utilise des morceaux du thème Sandbox dans lesquels j’aurais pu faire une coupe trop franche ou pas assez !

Je ne vais pas vous faire patienter plus longtemps pour vous livrer le coupable qui se cachait dans une fonction qui servait à insérer une vidéo Youtube via un shortcode. J’avais pourtant déniché cette petite perle chez quelqu’un de confiance ;)

J’ai donc supprimé les fonctions et tout est revenu à la normale… pendant au moins dix minutes ! le temps d’écrire ce billet, et hop, l’éditeur visuel perdait la vue à nouveau /o\ le code de l’ami burn’ n’étant donc pas fautif !

Je décidais de laisser ce petit soucis de côté pour la prochaine fois pour embrayer sur la résolution d’un problème bien plus important : mon flux RSS, invalide, provoquait des erreurs. Après une discussion sur Twitter avec Olivier Galluchot qui m’a fournit des pistes précieuses, comme supprimer tous les espaces surnuméraires dans les fichiers relatifs aux flux présents dans le dossier /includes, et tout rentrait dans l’ordre.

Cerise sur la cacahouette, en revenant corriger cet article, j’ai retrouvé un éditeur visuel en parfait état de marche…

Conclusion en forme de proverbe indien : pour réparer éditeur visuel bloqué ; casses un flux RSS ^_^

Articles sur le même sujet

La revue de web de la semaine #1

Bruno Bichet — Sat, 05 Apr 2008 10:55:33 +0000

Au menu de cette revue de presse, il y a l’incontournable CSS Naked Day qui a lieu le 9 avril prochain ; un rendez-vous avec Ruedi Baur ; une liste de 90 ressources autour de Photoshop ; une série de tutoriels sur les shortcodes apparus dans WordPress 2.5 ; une nouvelle version de bbPress ; un nouveau forum SEO pour les professionnels du référencement ; et on termine avec le début d’une série de podcast vidéo qui promet d’être intéressante. Plein de bonnes choses à picorer à droite à gauche :

CSS Naked Day — Pour la troisième année consécutive, Dustin Diaz nous invite à montrer notre blog dans son plus simple appareil, c’est-à-dire sans les CSS. C’est l’occasion de voir si votre marquage HTML tient la route sans feuilles de style ;)
Parisiens, parisiennes, ne ratez pas cet évènement annoncé sur étapes graphiques :
Rendez-vous avec Ruedi Baur, à Intégral rue Parmentier. Parmi les projets en cours : Le pavillon de Shangaï pour l’exposition universelle, ou encore, la signalétique de l’aéroport de Vienne observée ici par rapport à celle de l’aéroport de Cologne.
Ruedi Baur (attention : site « expérimental ») est un génie de la typographie et du design graphique qui à notamment écrit Typography, mon livre de chevet depuis bien des années. Bon, il reste la vidéo pour se consoler, c’est toujours ça de pas perdu…
La typographie n’est pas une science. La typographie est un art. Lisez ce très bon article paru sur I Love Typographie sur le choix des polices de caractère.
90 ressources pour Photoshop (via info-graphistes) :
BurningHat nous propose une série de tutoriels sur les « shortcodes » apparus dans WordPress 2.5. Dans functions.php placer les lignes suivantes :
```
function merci_burningHat(){
echo "burningHat, mon héro ;)";
}
add_shortcode('kudos', 'merci_burningHat');
```
Pour l’explication en détail, je vous invite fortement à lire WordPress 2.5 et les ShortCodes et à vous abonner au flux RSS de burningHat, vous ne le regretterez pas !
Amaury Balmer, l’auteur de Simple Tags et membre de WorPress-fr, annonce la sortie du pack français de bbPress, qui passe en version 0.9. Tiens en parlant de WordPress-fr, jetez donc un oeil sur cette présentation du plugin blog-metrics qui permet de mesurer le succès de bon blog. bbPress ? C’est un forum de discussion simple, efficace et beau avec la patte des créateurs de WordPress. Je n’en dit pas plus.
La sortie de WordPress 2.5 ne vous aura certainement pas échappée, mais voici un rappel des nouveautés avec cet article de Francis paru sur Monetiweb.
Forum SEO — Le forum Taggle qui réunissait les professionnels du SEO autour du référencement et des moteurs de recherche n’est plus actif (les archives restent consultables). Il a laissé la place à Twiger qui gardera la même orientation professionnelle, tout en permettant à tous de s’inscrire. Via 1ère Position.
Pour finir, une initiative intéressante de Martin (une araignée au plafond) qui s’essaie au podcast vidéo pour présenter un sujet dans un format court (une minute). Ca fait longtemps que ça me titille, alors je vais suivre cette expérience de près ;)