2803, le blog web 2.0, Internet et technologies » wordpress

PadPressed pour transformer votre site en application ipad

henri — Wed, 28 Jul 2010 12:05:08 +0000

L'ipad, la tablette d'Appel, est un bel objet mais naviguer sur un site non optimisé pour l'engin est parfois non ergonomique. La solution est de faire une version spécifique à l'appareil comme certains le font avec l'iphone par exemple. Pour y arriver je ne vous cache pas qu'il faut quelques connaissances en CSS et HTML pour faire quelque chose de joli. C'est là tout le problème!

Encore une fois vous allez être sauvé par un plugin wordpress (enfin si votre blog fonctionne avec ce moteur). Cette extension, appelée PadPressed, est vendue 49$ et permet de donner un sacré coup de jeune à votre blog sous l'ipad. Et vous fabriquer la webapp pour ipad en deux coups de cuillères à pot. Regardez la vidéo pour voir le résultat.

N'ayant pas d'ipad et n'ayant pas acheté l'extension je ne peux pas tester le rendu mais cela a l'air bien sympathique tout de même.

Via Techcrunch

N'hésitez pas à suivre le compte Twitter et la page Facebook
L'article d'origine est là : PadPressed pour transformer votre site en application ipad
Copyright © 2005-2010 2803 MEDIA

# Autres articles pour aller plus loin...

Ajoutez un effet d’apparition fluide sur vos images

henri — Fri, 09 Jul 2010 07:54:33 +0000

Voici un petit script qui théoriquement vous permettra d'améliorer la qualité de l'expérience utilisateur sur votre site et blog. Sur le principe vous allez faire afficher les images uniquement lorsque le visiteur pourra les voir avec un petit effet fade in très sympathique. Ce script jQuery "Lazy Load" est disponible sous la forme d'un script jQuery mais aussi sous la forme d'un plugin pour wordpress, Image Lazy Load, alors n'hésitez pas à vous faire plaisir.

Quelques images pour la démonstration (cela ne marchera pas dans votre lecteur RSS) :

Par ailleurs si vous utilisez le plugin wp-minify sachez qu'il faudra commenter les lignes 15, 16 et 17 du fichier jquery-image-lazy-loading.php comme cela :

< ?php
 
  /*
  Plugin Name: jQuery lazy load plugin
  Plugin URI: http://github.com/ayn/wp-jquery-lazy-load/
  Description: a quick and dirty wordpress plugin to enable image lazy loading.
  Version: v0.10
  Author: Andrew Ng
  Author URI: http://blog.andrewng.com
  */
 
function jquery_lazy_load_headers() {
  $plugin_path = plugins_url('/', __FILE__);
  $lazy_url = $plugin_path . 'javascripts/jquery.lazyload.mini.js';
//  $jq_url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
//  wp_deregister_script('jquery');
//  wp_enqueue_script('jquery', $jq_url, false, '1.4.2');
  wp_enqueue_script('jquerylazyload', $lazy_url, 'jquery', '1.5.0');
}
 
function jquery_lazy_load_ready() {
  $placeholdergif = plugins_url('images/grey.gif', __FILE__);
  echo <<
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});
 
EOF;
}
 
  add_action('wp_head', 'jquery_lazy_load_headers', 5);
  add_action('wp_head', 'jquery_lazy_load_ready', 12);
?>

N'hésitez pas à suivre le compte Twitter et la page Facebook
L'article d'origine est là : Ajoutez un effet d’apparition fluide sur vos images
Copyright © 2005-2010 2803 MEDIA

# Autres articles pour aller plus loin...

Ajouter des images pour les articles relatifs

henri — Thu, 27 May 2010 08:21:36 +0000

Certains sites ou blogs proposent des contenus fortement axés sur le visuel, c'est le cas de mon blog déco ou encore du blog auto, ces deux supports mettent en avant des produits et donc des images. Les articles relatifs qui étaient proposés à la fin de chaque article étaient uniquement sous un format texte (comme sur 2803.fr), malheureusement ce format peu visuel n'incitait pas les visiteurs à poursuivre plus loin.

En septembre 2008, papygeek m'avait fourni son code pour intégrer ces vignettes des articles relatifs. Depuis plusieurs plugins pour les blogs WordPress proposent cette navigation visuelle.

Le premier est un vieux de la vieille qui permet d'afficher les articles relatifs sur 2803.fr : WordPress Related Posts qui fonctionne avec les tags, ce dernier permet d'afficher les vignettes mais il faut lui donner un champs personnalisé, il n'est pas suffisamment malin pour trouver cette vignette ou encore pour la générer au cas par cas. Il est donc fonctionnel mais pas tellement pratique pour l'affichage de ces thumbnails.

Le second, Wp-Thumbie, est installé sur Blog Deco Design et Blog 4 Auto. Il est beaucoup plus simple à utiliser et à configurer. En 30 secondes vous aurez des petites images sous vos articles. L'inconvénient de ce dernier est qu'il n'utilise pas les tags des articles pour trouver les articles similaires mais les titres (donc moins performant à mon avis), les vignettes sont générées à la volée par TimThumb. L'exclusion de certaines catégories ne fonctionne pas chez moi vous me direz si vous y arrivez... Globalement c'est un excellent choix pour les blogs avec du visuel, vous allez augmenter votre nombre de pages vues et peut être diminuer le bounce rate!

N'hésitez pas à suivre le compte Twitter et la page Facebook
L'article d'origine est là : Ajouter des images pour les articles relatifs
Copyright © 2005-2010 2803 MEDIA

# Autres articles pour aller plus loin...

Intégrer le bouton like de Facebook sur un site Internet

henri — Mon, 26 Apr 2010 08:14:03 +0000

Vous le savez certainement mais Facebook a fait quelques changements (encore une fois) en ce qui concerne les plugins mis à disposition des éditeurs de sites et des développeurs. Ainsi on ne va donc plus parler du bouton "partager" ou "share" ni d'ailleurs de "devenir fan" ou "become fan" qui d'un coup deviennent obsolètes. Donc maintenant on remplace tout cela par le bouton "like" ou "j'aime" en français. Dans un sens c'est plus simple mais un peu perturbant vis à vis des pages fans car on peut aussi bien aimer un article qu'un site maintenant...

L'intérêt de ce bouton like est qu'il est simple, très simple même. Avec un clic un internaute (qui sera logué sur son compte facebook) pourra aimer l'un de vos articles et le faire savoir à ses amis sur facebook. Un système de notation comme avec les étoiles sauf que dans ce cas c'est social, donc plus proche de la recommandation.

Tous les nouveaux plugins proposés par Facebook sont sur cette page : http://developers.facebook.com/plugins. Pour mon usage seul le bouton "like" est utile pour l'instant car les autres ralentissent fortement le chargement des pages donc exit l'affichage des photos des membres (2 secondes de plus en général).

Alors pour intégrer le bouton "like" sur votre blog rien de plus simple il suffit d'aller sur cette page et de choisir ses options (affichage d'un texte avec le nom des personnes, leur photo, le mot à afficher : like ou recommend, la police à utiliser et le thème du bouton : couleur claire ou foncée).

Vous allez donc avoir un code de ce type pour la homepage de 2803.fr :

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.2803.fr&layout=standard&show_faces=true&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px">iframe>

Pour le rendre dynamique sur votre blog (wordpress) il faut l'intégrer dans le fichier single.php dans votre thème et surtout faire un modification sur l'url qui devra être :

< ?php echo urlencode(get_permalink($post->ID)); ?>

Le code utilisé sur 2803.fr est donc le suivant :

 echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=false&width=90&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:90px; height:25px;">

Finalement c'est plutôt facile et pas besoin de plugin sur ce coup. Libre à vous de l'intégrer où vous le souhaitez en bas ou en haut de l'article...

N'hésitez pas à suivre le compte Twitter et la page Facebook
L'article d'origine est là : Intégrer le bouton like de Facebook sur un site Internet
Copyright © 2005-2010 2803 MEDIA

# Autres articles pour aller plus loin...

Utiliser Minify pour améliorer le temps de chargement de votre site

henri — Wed, 21 Apr 2010 07:05:13 +0000

Minify est une application qui permet de réduire les requêtes depuis en site en combinant les différentes feuilles de style ou les scripts javascript du site internet. L'intérêt est donc de gagner en poids et donc en temps de chargement de votre page internet. N'oublions pas que moins votre site est lent moins sera problématique pour votre référencement dans Google.

L'exemple donné sur la page de l'application est suffisamment parlant pour tout le monde, le tout bien entendu pour un résultat équivalent, donc sans dégrader quoique ce soit sur le site :

Sans minify : 7 requêtes, 2681b envoyés et 98453b reçus
Avec minify : 2 requêtes, 783b envoyés et 29049b reçus

L'installation semble presque à la portée de tout le monde, mais c'est encore plus simple pour ceux qui ont un blog sous wordpress puisqu'il suffit simplement d'installer le plugin wp-minify et c'est tout.

Ce plugin fonctionne parfaitement sur 2803.fr.

L'optimisation des javascripts :

Sans minify

Avec minify

L'optimisation des CSS :

Sans Minify

Avec Minify

Ici l'optimisation n'est que de 7% mais il n'y a pas beaucoup de CSS ou de Script à la base... Bien entendu plus vous aurez de javascript ou de feuilles de style (CSS) d'installés plus minify sera performant.

Pour télécharger wp-minify c'est par ici.

N'hésitez pas à suivre le compte Twitter et la page Facebook
L'article d'origine est là : Utiliser Minify pour améliorer le temps de chargement de votre site
Copyright © 2005-2010 2803 MEDIA

# Autres articles pour aller plus loin...

Intégrer des suggestions à votre moteur de recherche de blog

henri — Tue, 02 Mar 2010 10:20:28 +0000

Google venant de mettre en place la suggestion dans la boite de recherche de Gmail, je me suis dit qu'il était temps d'intégrer une fonction équivalent ou du moins d'en trouver une car la boite de recherche est plutôt bien cachée sur ce blog (cela va changer prochainement d'ailleurs). Donc la problématique était de trouver un plugin pour wordpress qui ne nécessite pas de boulot d'intégration ni de compétences techniques.

Voici donc Autocompleter, très simple à installer : un seul clic et à configurer : on peut choisir d'afficher le nombre résultats, et de lancer ou non la recherche une fois la proposition survolée par la souris de l'internaute. Vous voilà avec une sorte de Google Suggest en version light mais quand même bien pratique!

Exemple d'une recherche sur 2803

SI vous voulez tester cette forme de recherche cliquez ici et puis tapez votre texte. Pour installer le plugin Autocompleter c'est là.

N'hésitez pas à suivre le compte Twitter et la page Facebook
L'article d'origine est là : Intégrer des suggestions à votre moteur de recherche de blog
Copyright © 2005-2010 2803 MEDIA

# Autres articles pour aller plus loin...

Smush.it tes images pour gagner de la vitesse sur ton blog

henri — Wed, 03 Feb 2010 09:08:10 +0000

On le sait tous le web de demain sera rapide et ceux qui n'afficheront pas assez vite leurs pages ne seront plus sur des tops positions dans les moteurs de recherche (dont Google). Afin d'optimiser vos temps de chargement il y a plein de méthodes mais la plus simple pour les néophytes de la configuration d'un serveur apache est d'optimiser les images affichées dans le blog.

Le moyen le plus simple est d'utiliser un optimiseur d'images comme celui de Smush.it qui est l'un des plus efficace à mon avis, mais bon envoyer son image sur Smush.it puis la copier et enfin la remettre sur dans son article n'est pas le moyen le plus rapide et ne vous fera pas gagner du temps. Heureusement si votre blog fonctionne avec WordPress il faut savoir qu'il existe un plugin qui permet de faire tout cela automatiquement et sans que vous le voyez, il suffit d'installer WP Smush.it et le tour est joué.

L'utilisation de ce plugin n'est pas rétroactive donc vous n'allez optimiser que les images des nouveaux articles, mais si vous le désirez vous pourrez aussi réduire le poids des images déjà sur le serveur en vous rendant dans la Media Library de WordPress et en cliquant sur Smush.it now! Sur certaines images j'arrive à avoir un gain de 50%, alors n'hésitez plus smushitez vos images surtout si vous êtes sous WordPress.

Sinon pour les plus geek et ceux qui maitrisent les commandes serveurs vous pouvez utiliser pngcrush, pngout, optipng ou encore pngrewritte.

N'hésitez pas à suivre le compte Twitter et la page Facebook
L'article d'origine est là : Smush.it tes images pour gagner de la vitesse sur ton blog
Copyright © 2005-2010 2803 MEDIA

# Autres articles pour aller plus loin...

Corriger les bugs de wordpress 2.9

henri — Thu, 24 Dec 2009 09:22:29 +0000

A peine sorti et déjà trois bugs "majeurs" ont été identifiés dans la nouvelle version de wordpress. C'est classique mais cette fois-ci c'est la fonction "cron" qui permet la planification des articles qui ne semble plus fonctionner... Le plugin Blacktype Connect qui permet de retrouver les tweets relatifs aux articles ne semble plus fonctionnel non plus.

Voici trois fichiers qui sont à mettre dans le dossier wp-include/ de votre installation de wordpress. Les fichiers sont censés corriger le bug du cron de wordpress, des widgets RSS, et de conversion en UTF-8. Dixit BackType cela devrait aussi aider au fonctionnement du plugin.

Source Semiologic.

N'hésitez pas à suivre le compte Twitter et la page Facebook
L'article d'origine est là : Corriger les bugs de wordpress 2.9
Copyright © 2005-2010 2803 MEDIA

# Autres articles pour aller plus loin...

WordPress 2.9 disponible au téléchargement

henri — Sat, 19 Dec 2009 16:38:19 +0000

La nouvelle version de wordpress, intitulée "Carmen" a été mise en ligne aujourd'hui avec un maximum de nouveauté comme vous allez le voir dans la vidéo ci-dessous :

Donc au programme maintenant il y a :
-un superbe éditeur d'image,
-la possibilité de mettre des articles en "trash" au lieux de les effacer (pour effacer les trash de 10 jours il faut mettre cela dans le fichier wp-config.php define( ‘EMPTY_TRASH_DAYS’, 10 );
-les mises à jour de plusieurs plugins en même temps (il faut passer par le menu Tools et pas par plugins)
-l'intégration facile de vidéo simplement en collant un lien YouTube, Daily Motion, Blip.tv, Flickr, Hulu, Viddler, Qik, Revision3, Scribd, Google Video, Photobucket, PollDaddy, et WordPress.tv.

En fonction secondaire on va retrouver cela :

-L'optimisation automatique de la base de données en ajoutant define('WP_ALLOW_REPAIR', true); dans le fichier wp-config.php
-L'intégration de rel=canonical pour le SEO
-Une fonctionnalité de miniature d'image "post thumbnails" pour mettre une vignette sur un article sur les pages home, category, etc... Pratique pour un newbie.
-et pleins d'autres fonctionnalités que l'on va découvrir à l'usage...

La version 2.9 ne sera pas aussi novatrice que la 2.8 mais WordPress devient une très belle solution blog/CMS de plus en plus incontournable.

A télécharger ici pour la version US et là pour la version française.

N'hésitez pas à suivre le compte Twitter et la page Facebook
L'article d'origine est là : WordPress 2.9 disponible au téléchargement
Copyright © 2005-2010 2803 MEDIA

# Autres articles pour aller plus loin...

Important, faites la mise à jour de WordPress pour protéger votre blog

henri — Sun, 06 Sep 2009 12:31:10 +0000

Depuis hier c'est un peu l'effervescence dans la communauté WordPress car un ver (worm) sévit et dixit les spécialistes il est plus intelligent que les autres car il simule l'enregistrement d'un nouvel utilisateur, utilise une faille de sécurité connue, puis se cache avec l'aide d'un javascript et enfin intègre du spam et du code malicieux au sein de vos articles.

Donc il faut mettre à jour votre blog avec la dernière version de WordPress en date, la version 2.8.4 qui est immunisée contre ce virus. Pour faire la mise à jour vous pouvez utiliser la mise à jour automatique fournie avec WordPress ou bien télécharger la dernière version (ici pour la version française) en date et l'installer sur votre serveur (ce ver n'étant présent que pour les blogs qui ont installé wordpress sur un serveur).

Update : Pour savoir si votre blog est contaminé, lisez l'article d'Amaury Balmer qui décrit une méthode pour identifier la présence ou non du ver

# Autres articles pour aller plus loin...

Améliorer l’intégration des images dans vos articles de blog

henri — Fri, 21 Aug 2009 08:04:50 +0000

Illustrer ses articles avec des images est certainement un point à ne pas négliger car les images captent l'attention et participent à la rétention des visiteurs. Sur WordPress le module d'upload d'images est efficace mais peut devenir vite pénible si vous avez beaucoup d'images à insérer (sans pour antant vouloir le faire via une galerie). Le plugin Fast Insert comme son nom l'indique va vous permettre de gagner un temps précieux (vous allez éviter de cliquer 15 fois pour insérer 15 images).

Le plugin va intégrer le module d'upload directement sous la zone d'édition de l'article et vous allez aussi avoir la possibilité d'insérer toutes les images d'un seul coup.

Un plugin pratique qui sera vite inutile lorsque WordPress aura intégré cette option "Insert All Images".

# Autres articles pour aller plus loin...

Backtype Connect le plugin pour intégrer les commentaires diffus sur votre blog

henri — Fri, 10 Jul 2009 08:11:14 +0000

Les réseaux sociaux sont de bons outils mais leur problème principal vient du fait qu'ils rendent les discussions hétérogènes, diffuses et difficiles à suivre étant donné qu'elles ont lieu à plusieurs endroits sur Internet (blog, twitter, digg pour les américains...). Il y a quelques temps des plugins pour les blogs wordpress proposaient de rapatrier ces commentaires sous les articles en rapport afin de consolider la discussion. Dans la même veine que ces derniers mais en plus puissant voici Backtype Connect.

Backtype Connect est le plugin issu du service de tracking de commentaires, Backtype, présenté sur 2803 en Septembre 2008. Ce dernier va donc scanner Twitter, les commentaires des autres blogs, Frienfeed, Digg, Reddit et Hacker News à la recherche de lien vers vos articles et intégrer les réactions dans le flux classique des commentaires. Un outil bien pratique et surtout très facile à mettre en place sur un blog, il suffit de cliquer sur Install et c'est tout.

Pour voir une démonstration du plugin, Twitter, bloguer, Friendfeeder, Digger ce post et vous verrez apparaitre votre twit dans les commentaires comme sur la capture d'écran ci-dessous.

Exemple d'intégration de Twitter dans le flux

N'hésitez pas à suivre le compte Twitter et la page Facebook
L'article d'origine est là : Backtype Connect le plugin pour intégrer les commentaires diffus sur votre blog
Copyright © 2005-2010 2803 MEDIA

# Autres articles pour aller plus loin...

Enlever la mise en forme de la syntaxe dans l’éditeur de thème de WordPress

henri — Thu, 25 Jun 2009 09:58:40 +0000

La nouvelle version de WordPress intégre quelques nouveautés dans l'interface qui peuvent être énervante. En écrivant cela je pense à la mise en forme du code dans l'éditeur de thème ou de plugin qui reconnait automatiquement le type de langage utilisé et qui de ce fait applique un style de mise en forme.

Depuis la mise à jour vers la version 2.8 de wordpress j'ai à plusieurs moment du modifier du code sur les blogs et comme je ne suis pas codeur j'y vais par interpolation et à cause de cet éditeur j'ai perdu quelques bouts de pages (notamment celle de la sidebar). Alors plutôt que de ne plus utiliser l'éditeur de thème en ligne (ce qui pourrait être une solution) j'ai fait des petites recherches et pour virer cette mise en forme (qui ralenti l'affichage de la page par ailleurs), il suffit d'aller dans >Appearance>Editor puis de cliquer sur Screen Options en haut à droite et de cliquer sur "Disable syntax highlighting" et voila plus de mise en forme!

L'éditeur de texte avec la mise en forme de la syntaxe

Sans la mise en forme

Notez qu'une désactivation dans l'éditeur de thème, désactivera l'option dans l'éditeur de plugins aussi... Pour réactiver l'option il suffit de faire le process inverse.

N'hésitez pas à suivre le compte Twitter et la page Facebook
L'article d'origine est là : Enlever la mise en forme de la syntaxe dans l’éditeur de thème de WordPress
Copyright © 2005-2010 2803 MEDIA

# Autres articles pour aller plus loin...

Générer automatiquement des catégories WordPress à partir d’un fichier texte

henri — Mon, 22 Jun 2009 10:18:34 +0000

WordPress est certes une plateforme de blog mais aussi un très bon outil pour les CMS (Content Management Systems) et dans une utilisation de ce type l'architecture du site, donc des catégories peut être un peu complexe. J'ai eu le cas sur le site sur les hôtels design, je souhaitais utiliser les noms de pays comme nom de catégorie, à partir du moment où c'était moi qui gérait la mise en ligne des hôtels cela n'était pas problématique car chaque nouvelle intégration pouvait nécessiter au besoin la création d'une nouvelle catégorie.

Mais depuis quelques temps le site est ouvert aux contributions et propositions des visiteurs, l'écriture des articles sur les hôtels se fait par le biais d'un formulaire, j'ai donc besoin dans ce cas d'avoir tous les pays comme catégorie... Alors plutôt que de renseigner les 195 pays j'ai utilisé un plugin qui a fait le travail à ma place. Post Corrector est l'outil adapté pour cette opération car une fois installé vous allez pouvoir intégrer industriellement des noms de catégories simplement en copiant/collant leur nom dans la boite de dialogue.

Une catégorie par ligne...

Un petit outil qui vous fera peut être gagner du temps...

N'hésitez pas à suivre le compte Twitter et la page Facebook
L'article d'origine est là : Générer automatiquement des catégories WordPress à partir d’un fichier texte
Copyright © 2005-2010 2803 MEDIA

# Autres articles pour aller plus loin...

WordPress 2.8 est téléchargeable aujourd’hui

henri — Thu, 11 Jun 2009 08:41:47 +0000

L'équipe de WordPress tient le rythme des sorties de version avec une nouvelle version aujourd'hui la 2.8. Au programme des nouveautés, beaucoup de correction de bugs (un peu moins de 800), une nouvelle gestion des thèmes (plus besoin d'aller sur le site wordpress.org), une gestion des widgets simplifiée, un accès à la documentation sur le code de wordpress, et des options de modifications de l'interface.

La vidéo ci-dessous présente les principales nouveautés :

Une version qui personnellement ne m'apportera pas grand chose de nouveau (les thèmes sont gérés à la main chez moi et je n'utilise pas les widgets) mais pour beaucoup wordpress sera plus simple à manipuler. Sinon pour les curieux la liste des nouveautés de wordpress 2.8 est disponible ici, pour télécharger wordpress 2.8 c'est là, la version française ne devrait pas tarder à arriver ici .