Voici comment on s'en sert…

Vous voulez analyser le trafic du site que vous êtes en train de visiter

Cliquez simplement sur le bookmarklet

Vous voulez analysez le volume de recherche d'un mot ou d'un terme

Sélectionnez le ou les mots que vous souhaitez analyser et cliquez sur le bookmarklet

Vous voulez analysez le trafic d'un site dont l'URL se trouve écrite dans une page internet

Sélectionnez la portion de texte qui comporte l'url et cliquez sur le bookmarklet

Et voilà !

Voici le bookmarkelt

Enregistrez le dans vos favoris (ou faites le glisser direct dans votre barre de favoris)

Google trends (Dans cette version la page s'ouvre dans la même fenêtre)
Google trends (Dans cette version la page s'ouvre dans une nouvelle fenêtre)

Rien de révolutionnaire mais ça m'a pris moins de 10 minutes à développer, alors pourquoi s'en priver

1. Tapez about:config dans votre barre d'adresse
2. Tapez editor.singleLine.pasteNewlines dans la zone de filtre

3. Faites un clic droit au dessus de editor.singleLine.pasteNewlines et faites “modifier”

4. Mettez le à la valeur 1 au lien de 2

Et voilà, ça prend effet immédiatement

A vos bookmarks … prêts ? Partez ! (Oui c'est un peu pourris comme jeu de mots, mais j'assume ^^)

7 Tutoriels - SQL, formulaires, SEO, WP 2.6, CSS …

1. Creating Options Pages
   [Tuto] Voici comment créer une page d'options pour l'administration de votre blog (en anglais)

2. Faire des requêtes sécurisées sous WordPress 2.5 ! Utilisation de la méthode $wpdb->prepare !
   [Tuto] Amaury nous a concocté un beau tutoriel sur la façon de procéder pour faire des requêtes SQL sécurisées avec wordpress

3. Gérer la connexion-déconnexion de vos membres, directement depuis votre thème
   [Tuto] Encore un tutoriel d'Amaury ! Cette fois il s'agit d'intégrer un formulaire de connexion (/déconnexion) directement sur vos pages de blog

4. Réaliser un site internet avec Wordpress
   [Tuto] Aymeric nous explique comment s'y prendre pour construire un site avec wordpress en l'utilisant comme un CMS

5. WordPress SEO - Definitive Guide To High Rankings For Your Blog
   [Tuto] Voici un gros dossier sur l'optimisation pour les moteurs de recherche de votre blog ! Quasiment tous les points important sont abordés et expliqués. C'est en anglais mais assez clair.

6. Wordpress 2.6 y los desarrolladores de plugins
   [Tuto] Voici ce qu'il faut faire pour que vos plugins soient entièrement compatible avec wordpress 2.6 ! Par contre c'est en espagnole, désolé.

7. Styling Your Wordpress Comments
   [Tuto] Voici un tutoriel (+ressources à télécharger) qui vous donne 3 manières de faire une mise en forme originale pour les commentaires de votre blog ! Allez hop, on bookmark !

12 Plugins - SEO, optimisation, javascript, flux …

1. HeadSpace2
   [Plugin] Si vous cherchez un remplaçant au plugin All-in-one SEO, alors vous devriez tentez celui-ci, très complet !

2. Cache Images plugin for WordPress
   [Plugin] Permet de rapatrier automatiquement toutes les images qui sont sur vos page et qui ne sont pas hébergé sur votre serveur (Je ne suis pas certain de sa compatibilité avec WP 2.5, à tester donc)

3. WordPress Tools: MW Adminimize
   [Plugin] Permet de minimiser et réorganiser un peu l'interface d'administration de WP 2.5+

4. Google AJAX Libraries API Plugin
   [Plugin] Permet d'utiliser la nouvelle librairie Ajax de Google dans vos pages (via la fonction wp_enqueue_script function)

5. WordPress Plugin: My favorite posts
   [Plugin] Permet de faire une sélection de vos propres billets préférés et de les afficher sous forme de liste de liens où vous voulez dans votre thème.

6. WP SEO Sniper for Professional WordPress SEO
   [Plugin] Voici la suite du fameux plugin Al-in-one SEO dont le développement à été repris par une autre personne (d'où le nouveau nom)

7. WP-Syntax
   [Plugin] Voici un plugin pour mettre en forme les portions de code que vous écrivez dans vos billets. Indispensable pour rendre vos codes clairs et lisibles !

8. Show125 : un widget pour vos annonces 125*125
   [Plugin] Voici un plugin sous forme de widget qui vous permet de mieux gérer vos encarts pub de 125*125 pixels

9. Better Feed for WordPress: Now Even More Better!
   [Plugin] Voici un plugin qui va vous permettre de prendre le contrôle de votre Flux RSS. Vous pourrez par exemple ajouter du contenu (même entre des articles) ou ajouter un lien “more” …

10. Plugin WordPress - Def-SMS
    [Plugin] Astuce utilisant Twitter pour recevoir des messages SMS directement depuis votre blog

11. WP JS - Wordpress plugin by Halmat Ferello
    [Plugin] L'auteur de ce plugin à eu une excellente idée ! Il s'agit ici d'un plugin qui regroupe tous vos fichiers javascript en 1 seul et le compresse ! EL tout à la volée evidement !

12. Advanced Category Excluder
    [Plugin] Pour ceux qui ne connaitraient pas encore, voici un plugin qui vous permets de gérer l'exclusion d'une ou plusieurs catégories de votre page d'accueil, archives, flux et recherche !

7 Thèmes - Magasine, BD, sandbox …

1. Introducing The “MassivePress” WordPress Theme
   [Theme] Voici un thème de grande qualité, sobre, efficace et entièrement gratuit ! N'hésitez pas !

2. Wordpress Theme: Corporate Sandbox
   [Theme] Voici un thème basé sur l'excellent Sandbox ! Ici il s'agit d'une mise en forme très minimaliste, juste histoire de rendre le thème d'origine Sandbox un peu plus sexy. Vraiment très bon !

3. ComicPress - The WordPress Webcomic Theme
   [Theme] Voici un thème génial qui mériterait un article à lui tout seul (mais pas le temps ^^). Il s'agit d'un thème assez évolué, bourré d'options de mise en page …. et le tout dédié aux blogs BD

4. Free Theme: WP NewsMag : WordPress Magazine
   [Theme] Voici un thème magasine assez sympa. La page d'accueil est clair, et l'utilisation du javascript cohérente. Sobre comme je les aime

5. Maggo Mag Theme
   [Theme] Voici un thème magasine assez clair et léger. Un bon compromis pour ceux qui voudrais passer tout doucement d'un thème classique à un thème magasine.

6. Personal Mag Theme
   [Theme] Et oui encore un thème sobre et aéré, c'est mon dada ^^. Enfin voilà de quoi redonner de la fraicheur a votre blog

7. UBD Moneymaker Theme
   [Theme] Voici un thème assez bien réalisé qui part sur l'idée de l'argent

5 Listes - Thèmes, astuces, plugins et documentation …

1. 43 Phenomenal and Advanced Groundbreaking Wordpress Themes - Free to Download
   [Liste] Voici une liste de 43 thèmes frais et originaux ! Certains très connus mais d'autres intéressants
   

2. 40+ Most Wanted Wordpress Tricks and Hacks
   [Liste] Voici plus de 40 astuces pour améliorer et personnaliser votre blog ! A bookmarker !

3. 7 Amazing Plugins to view your Wordpress Blog on any Mobile Device (iPhone, PDA…)
   [Liste] Voici tout ce qu'il vous faut pour rendre votre blog visible sur les appareils mobiles

4. 15 thèmes Wordpress inspirés par les systèmes d'exploitations
   [Liste] Christophe nous a fait une liste de 15 thème wordpress inspirés d'OS ! (Perso j'ai peur d'instller le thème Vista, trop peur de planter mon blog )

5. WordPress Function List
   [Liste] Voici la liste des fonctions “Template Tags” pour wordpress, présentée de manière originale.

(oui je sais, une liste de listes ça devient bizarre ^^)

Compatible avec IE6, IE7, Firefox, Opera, et Safari !

Allez, voici la 1ère demo et la 2ème demo !

Mise en place

1. On inclut script.js dans la page entre les balises HTML <head> et </head>

2. Et voici à quoi doit ressembler le code HTML du menu

Il faut donner l'attribut value="1" au lien qui recevra le slide par défaut.

3. Et voici un exemple de CSS à mettre à la fin de votre votre feuille de style

Pour le 1er exemple ….

Pour le 2ème exemple ….

4. On initialise le menu

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js

Le morceau de code ci-dessus est à appeler au chargement de la page (onload), si vous ne savez pas comment faire, voici une des méthodes possible:

Les paramètres

• 1er: l'id de la liste
• 2ème: l'id de la div vide qui slide

Conclusions

Voici de quoi mettre un peu de vie dans vos menus horizontaux, et encore une fois pour un poids vraiment très léger !

Liens

• 1ère demo
• 2ème demo
• Télécharger l'exemple
• Site officiel

Allez, voici la demo !

Mise en place

1. On inclut la librairie jQuery (si ce n'est pas déjà fait) ainsi que le fichier jquery.jHelperTip.1.0.min.js dans la page entre les balises HTML <head> et </head>

2. Pour activer les tooltip, on inclut le code suivant:

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js

Evidement ce ne sont que des exemples, à vous d'adapter.

Les options possibles

• trigger: “click” ou “hover”
• topOff: position offset vertical du tooltip par rapport au pointeur de la souris
• leftOff: lposition offset horizontale du tooltip par rapport au pointeur de la souris
• source: peut ètre “container”, “ajax” ou “attribute”, container est un objet DOM de la page, ajax charge le contenu d'une autre page, attribute récupère un attribut html de l'élément courant.
• attrName: le nom de l'attribut HTML que vous voulez afficher dans le tooltip (uniquement si l'option source vaut “attribute”)
• ttC: l'élément DOM qui recevra le contenu chargé en AJAX, si pas précisé, un conteneur sera crée automatiquement
• dC: l'élément DOM qui sera affiché si l'option source vaut “container”
• aC: l'élément DOM sur lequel recuperer l'attribut (uniquement si l'option source vaut “attribute”)
• opacity: opacité des tooltips
• loadingImg: url relative de l'image de chargement(uniquement si l'option source vaut “ajax”)
• loadingText: texte pendant le chargement (uniquement si l'option source vaut “ajax”)
• type: “GET” ou “POST” (uniquement si l'option source vaut “ajax”)
• url: url relative de la page à charger (uniquement si l'option source vaut “ajax”)
• data: les données à passer à votre page appelée en AJAX (uniquement si l'option source vaut “ajax”)
• autoClose: true ou false, précise si la tooltip doit se fermer via une action

Liens

• La demo
• Télécharger l'exemple
• Site officiel

Compatible avec :

• Internet Explorer 6+
• Firefox 1+
• Safari (Only tested 3+)
• Opera 8+

Exemple d'utilisation :

Ce qui créera un objet dom qui pourra ensuite recueillir les messages de log …

Démonstration en vidéo :

Liens utiles :

• NitobiBug
• Demonstration

Ils ont au moins le mérite de faire de belles pages d'erreur ….

Sinon pour ceux qui veulent, mon twitter

Allez juger par vous-même …. par ici pour jouer à BeSlimed

A jouer uniquement au bureau

Ici il s'agit d'un générateur de ruban multicolore, bon ce n'est pas révolutionnaire mais ça ajoute facilement une petit touche colorée sur un site.

Un exemple …

Le petit truc sympa c'est qu'il peut générer un ruban en partant d'une seule couleur, il interpole les autres. Vous pouvez évidemment choisir vous ème chaque couleurs ainsi que la largeur des rectangle.

Une fois que le ruban est généré, intégrez le de cette façon par exemple:

Ce qui affichera le ruban tout en haute de votre site.

Liens

• Générateur de ruban
• Autres outils du même site (à voir !)

1. 25 gestionnaires de projet à découvrir
   Stephane nous présente une liste de 25 gestionnaires de projet, à voir !

2. Retour sur une campagne de guest-blogging
   Christophe nous a fait un compte rendu détaillé sur sa campagne de guest-blogging. Vous savez maintenant pourquoi vous l'avez vu partout ces derniers temps

3. Une librairie javascript pour lire les informations EXIF des photos
   Voilà un plugin Jquery capable de lire des données exifs !

4. Classement Google des sites par PageRank (PR) et backlinks Yahoo
   Voici un script qui vous permettra de garder un oeil sur le classement de vos concurrents en affichant le PR dans les résultats de recherche, à garder sous le coude !

5. Flowplayer
   Une alternative au très bon JW FLV MEDIA PLAYER pour lire vos fichier flv donc !

6. Milky, a free vector icon set
   Un joli petit set d'icônes, et la suite se trouve ici.

7. CSS Decorative Gallery
   Voici une ressource excellente pour décorer vos images via CSS, à lire !

8. textsnip - Keep your text & code formatting safe from IM and Email
   Application pour partager du texte en ligne, à combiner avec Twitter par exemple

9. 30 Websites to follow if you’re into Web Development
   Voici une liste de 30 sites (en anglais) à suivre si vous faites du web développement !

10. Google Doctype
    Encore une belle initiative de Google ! Retrouvez tout un tas de conseils, astuces et code pour le développement de vos sites et applications !