davidtouvet.com

Si comme moi vous n’arrivez toujours pas à vous faire à l’éditeur WYSIWYG de WordPress (essayez de copier-coller un code embed provenant de youtube par exemple en ayant pris soin avant de basculer en mode HTML et vous verrez le désastre…), vous n’avez comme autre choix que d’utiliser les quicktags de WordPress, sorte de petits boutons cliquables nous épargnant la saisie fastidieuse des balises HTML.

Eh bien, sachez qu’il est possible de les éditer ces petits boutons pour se configurer la barre quicktags de nos rêve. Deux cadeaux: un tutoriel qui explique tout cela et une barre améliorée de la mort qu’il suffit de charger sur son serveur à la place de l’originale.

Par exemple, lorsque j’ajoute une citation, la barre orginale me permet en cliquant sur blockquote d’obtenir ceci:

<blockquote></blockquote>

Jusqu’à présent, je devais rajouter à la main un attribut cite et la mention source pour obtenir ceci:

<blockquote cite="">

Source</blockquote>

Il suffit de repérer dans le fichier quicktags.js le code suivant:

edButtons[edButtons.length] =
new edButton('ed_block'
,'b-quote'
,'\n\n<blockquote>'
,'</blockquote>\n\n'
,'q'
);

et de remplacer par

edButtons[edButtons.length] =
new edButton('ed_block'
,'b-quote'
,'\n\n<blockquote cite="">'
,'\n\nSource</blockquote>\n\n'
,'q'
);

Et pour finir en beauté, on remarquera que l’avant-dernière ligne indique le raccourci clavier du quicktag, ici “q”. Sur OS X et Firefox, utilisez la touche Ctrl+q, sur Windows, essayez par exemple Alt+q ou ?

Extension sympathique pour les développeurs web: X-Ray vous permet d’économiser du temps et de la rétine puisqu’il est possible de visualiser les tages d’une page sans faire des va et vient avec la source (via gou blog).

One installed the X-Ray command is available by right-clicking as well as in the Tools menu. When applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser. Is that list made of li dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what’s beneath the surface of the page.

Source

L’article Google Optimization Tips est une bonne introduction pour maîtriser les bases d’un référencement de son site par Google.

• A Bot Visit: pour demander aux robots de Google de venir faire un petit tour sur son site, on peut utiliser un formulaire à l’URL www.google.com/addurl pas très immédiat mais c’est un bon début pour un nouveau site).
• Get Your Keywords: importance de définir un set de mots-clés adaptés à son site. On peut utiliser inventory.overture.com pour savoir si un mot-clé a été beaucoup demandé (= recherché) le dernier mois et les recherches associées (donc les mots-clés associés qu’on pourra utiliser).
• Place Your Keywords: vu qu’il est acquis qu’il ne sert plus à rien de placer nos bons vieux mots-clés dans la balise meta keyword, l’endroit le plus adapté serait l’URL et le titre des pages. Selon l’auteur, il serait également important de placer ses mots-clés dans le corps de la page (body) selon deux principes: fréquence et proximité. De plus, plus les mots-clés sont placés en début de texte ou dans les balises h1/h2, plus ils sont importants (principe de la pyramide inversée)
• Check Your Keywords: l’outil googlerankings.com permet de checker sa position dans Google suivant tel ou tel mots-clés entré.
• Tech and Formatting Tips: importance de la mise à jour fréquente de la homepage de son site.
• Lots of Links: là ça devient carrément un jeu: le but étant de truffer son texte de liens spécialement vers des sites connus et bien référencés (penser à tester son Google Pagerank). Le must: les liens entrant (d’un autre site vers le sien).
• Clean Formatting: enfin, et cela fait plaisir quand on utilise WordPress pour propulser son blog, vérifier que son site soit programmé proprement en respectant les standards. A éviter: toutes les technologies que Google ignore: frames, javascript, menus en Flash, sites en Flash, etc.

Dans cet article, Raphaël GOETTER dresse la liste des balises et propriétés HTML dépréciées et obsolètes.

Il faut tout d’abord s’interroger sur la raison de la dépréciation de ces propriétés (car il y’en a une !)

L’objectif annoncé des Standards est de faire une séparation stricte entre le contenu et la mise en forme du site web.
En clair : la page HTML ne doit contenir que les textes et autres contenus de façon brute. Séparément, la feuille de style CSS doit contenir toute la mise en forme visuelle de ce contenu (couleurs, tailles, positionnements,…)

Cette séparation Contenu/Forme est instaurée pour faciliter la lecture du code, la mise à jour du site, sa rapidité d’affichage, sa compatibilité et son accessibilité.

En pratique, toute page web sera composée d’une page HTML et d’une feuille de style associée.

De ce fait, toutes les balises et propriétés dépréciées dans le HTML sont autorisées (et conseillées) dans les feuilles de style. Ces dernières permettant en outre des fonctionnalités impossibles à réaliser en HTML pur (configuration des liens hypertextes par exemple) .