Le JW FLV Player de LongTail Video est un player extrêmement populaire car gratuit et très facile à mettre en place. Ce player existe en version gratuite déjà très aboutie. Cette version gratuite vous permettra notamment la diffusion de vidéos à différents formats (FLV, MP4 encodé avec le codec H.264), l’utilisation de “playlist” là aussi de formats différents (ASX, RSS… etc) et enfin sous différents protocoles (RMTP, HTTP…).

La baseline commrcial du JW FLV Player

The JW Player™ is the Internet’s most popular and flexible media player. It supports playback of any format the Adobe Flash Player can handle (FLV, H.264, MP4, MP3, AAC, JPG, PNG and GIF). It also supports various streaming and playlist formats (including RMTP, HTTP, live streaming and more), a wide range of flashvar settings and an extensive JavaScript API.

Il existe une version payante du JW FLV Player. L’achat de la licence permet en autre de faire disparaitre l’agençante incrustation du logo JW et son remplacement à la volée vos vidéos avec ce que l’on nomme un bug antenne, c’est à dire votre propre logo. L’achat de la licence offre la possibilité de changer la skin du player JW.

• logo.file (undefined): location of an external jpg, png or gif image which replaces the watermark image (Licensed players only)
• logo.link (undefined): link to direct to when the watermark image is clicked on (Licensed players only)
• logo.hide (true): When set to true, the logo will auto-hide (Licensed players only)

La méthode SWFObject

swfobject est une méthode de chargement de contenu flash plutôt facile à mettre en place pour se faire il ne faut charger qu’un seul fichier.

swfobject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file

Source : http://code.google.com/p/swfobject/

Un exemple du SETUP WIZARD

Le chargement tout simple d’une vidéo direct dans le player à laide de SWFObject avec une légere personnalisation des couleurs.

 
<script type='text/javascript' src='swfobject.js'></script>
<div id='mediaspace'>C'est ici que s'insère le player</div>
<script type='text/javascript'>
  var so = new SWFObject('player.swf','mpl','470','320','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
	/* La vidéo par défaut proposé par le site de longtailvideo.com */
  so.addVariable('file','http://content.longtailvideo.com/videos/flvplayer.flv');
  so.addVariable('backcolor','666666');
  so.addVariable('frontcolor','000099');
  so.addVariable('lightcolor','000099');
  so.addVariable('screencolor','0000CC');
  so.addVariable('autostart','true');
  so.write('mediaspace');
</script>

Le rendu du code ci-dessus

Source : http://www.longtailvideo.com/support/jw-player-setup-wizard

Jouer une playlist au sein de JW player

JW player est en mesure de charger les principaux formats de playlist habituels sur le Web. Voici les principaux formats dont vous disposez qui sont tout à la base des dérives du XML avec chacune des nuances. Les fichiers de vos playlists aurront constamment comme extension .xml

• Un flux ASX, c’est la playlist propre au Windows Media Player.
• Un fil ATOM, bien connu des utilisateurs de Wordpress
• Un fil RSS de type iTunes et Media (irss et mrss)
• Un fil SMIL, bien connu des utilisateurs de Quicktime
• XSPF feeds : un format assez classique qui est utilisé par d’autre player gratuit notamment le player audio de mp3 XSPF Web Music Player fait en Flash (http://musicplayer.sourceforge.net/)

	<script type='text/javascript' src='swfobject.js'></script>
	<!-- Le js va écrire dans le div nommé mediaspace  -->
	<div id='mediaspace'>C'est ici que s'insère le player</div>
	<script type="text/javascript">
	 var flashvars = {};
	 flashvars.file = "my_playlist_2.xml";
	 flashvars.width = "300";
	 flashvars.height = "328";
	 flashvars.displayheight = "225";
	 flashvars.backcolor = "0x111111";
	 flashvars.frontcolor = "0xdddddd";
	 flashvars.lightcolor = "0x99cc00";
	 var params = {};
	 params.loop = "false";
	 params.quality = "best";
	 params.wmode = "transparent";
	 params.allowfullscreen = "true";
	 params.allowscriptaccess = "always";
	 var attributes = {};
	 attributes.id = "movieId";
	swfobject.embedSWF("mediaplayer.swf", "mediaspace", "300", "328", "9.0.124", "expressInstall.swf", flashvars, params, attributes);
	</script>

Les vidéos de la playlist type XSPF sont délivrés par un serveur en local accessible via http://127.0.0.1/97_JW_PLAYER/_m_2.flv en http streaming pour la vidéo _m_2.flv.

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
 <trackList>
   <track>
    <title>Titre Film 1</title>
     <creator>hecube.net</creator>
       <location>http://127.0.0.1/97_JW_PLAYER/_m_2.flv</location>
	 <info>http://www.hecube.net</info>
   </track>
   <track>
   <title>Titre Film 2</title>
     <creator>Hemedia.net</creator>
	<location>http://127.0.0.1/97_JW_PLAYER/_m_3.flv</location>
	  <info>http://social.hecube.net</info>
   </track>
 </trackList>
</playlist>

Source : http://www.longtailvideo.com/support/tutorials/Setting-Up-A-Playlist

Le rendu du code ci-dessus

En le chargeant directement depuis le serveur en local, on évite l’affichage de cette fenêtre système de mise ne garde. Toutefois si vous cliquez sur OK, vous aurez la possibilité de voir la playlist se lancer car vous autoriser une exception temporaire de sécurité.

En savoir plus

• Le site officiel de JW FLV Player
  http://www.longtailvideo.com/
• Le wizard ou assistant pour vous procurer le code javascript SWFObject adéquat pour charger le JW FLV Player
  http://www.longtailvideo.com/support/jw-player-setup-wizard
• La bible du SWFObject pour la détection et l’embed du Flash Player
  http://blog.deconcept.com/swfobject/
• Le site du projet officiel de SWFObject
  http://code.google.com/p/swfobject/
• Les tutoriaux sur les multiples suages de JW player
  http://www.longtailvideo.com/support/tutorials
• Un excellent article sur la playlist et son positionnement / “Using the JW FLV Player Part 1: Creating a Playlist with Commercials”
  http://labs.influxis.com/?p=47
• Les valeurs disponibles (flashvars) pour charger le JW FLV Player et le personnaliser notamment.
  http://developer.longtailvideo.com/trac/wiki/Player5FlashVars
• Du bonne usage du fichier crossdomain.xml
  http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html

Dans notre comparatif des solutions e-commerce les plus habituels, après avoir passé rapidement ne revue Drupal/Ubercart, on va s’intéresser à Wordpress et l’un des plus fameux plugins de e-commrece disponible sur le marché à ce jour : wp-e-commerce. On va donc tester le couple Wordpress/WP-e-commerce. Pour se faire, on va partir sur la toute dernière version de wp-e-commerce, conçu par les neo-zélandais de www.instinct.co.nz wp-e-commerce.3.7.5.3.zip et la dernière version de Wordpress disponible en anglais WordPress 2.9.1

Pour l’installation de Wordpress en local, vous pouvez vous reportez à un articles de ce blog.

• Créer et héberger son site avec Wordpress

Les instruction d’installation de wp-e-commerce extrait du readme.txt

== Installation ==
1. Upload the folder ‘wp-e-commerce’ to the ‘/wp-content/plugins/’ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress

Activer le Plugin wp-e-commerce

30 de plus à table

La seule installation du plugin wp-e-commerce.3.7.5.3.zip occasionne une sérieuse inflation dans la nombre de tables. De 11 tables nécessaires au fonctionnement du WordPress 2.9.1, on passe à 44 tables, soit un ajout de 30 tables dont le préfixe commence par wp_wpsc_

La BDD avant l’activation du plugin

La BDD après l’activation du plugin

Attention vous êtes dans un environnement anglophone, ainsi la valeur Tax settings où vous allez rentrer le taux de TVA en vigueur pour vos produits, vous devez écrire 19.6 et non 19,6.

La création d’une boutique

On va se livrer à une création de boutique plus avancé, imaginons que vous souhaitiez créer une boutique ne ligne avec 3 catégories Cat_1, Cat_2, Cat_3. Chacune d’entre elles va contenir plusieurs types de produits. On va aussi créer 3 marques Marque_1, Marque_2, Marque_3

Catégories et Marques de notre boutique en ligne

Les produits peuvent classés par catégorie ou par marque. Bien évidemment un article peut être attaché à plusieurs catégories comme à plusieurs marques.

1. Cat_1
2. Cat_2
3. Cat_3

1. Marque_1
2. Marque_2
3. Marque_3

La configuration générale de votre boutique en ligne sous Wordpress

Les différents onglets vous permettront de paramètrer l’ensemble des éléments clés de votre futur boutique.Vous avez dans ce plugin en version gratuite la possibilité de configurer facilement les principaux écrans et procédures de votre future boutique en ligne.

L’insertion des produits et des catégories va se faire à l’aide du nouveau menu apparu à gauche dans votre administration WP.

Il existe la possibilité d’importer en masse vos références produits via un fichier .csv

Quelques améliorations pour une meilleure expérience marketing sur votre boutique en ligne
Vous avez la possibilité de vous livrer dès le lancement de votre boutique à une gestion du “couponing”

Les règles qui régissent l’expédition de vos produits
Vous avez la possibilité de vous livrer dès le lancement de votre boutique à une gestion du “couponing”

Les paramètres de la passerelle de paiement (payment gateway)
L’onglet qui régit les moyens de paiement à disponibles sur votre boutique sous Wordpress.

La configuration du processus de commande (checkout process)

Créer des produits

On va voir les différents champs à compléter pour finaliser l’insertion d’un produit dans notre boutique. Chaque porduit sera illustré par une image, la taille par défaut ets de 96×96 en pixels.

Le nom du produit Prod_C

Les catégories attachés à ce produit Prod_C

Les tarifs d’expédition du produit Prod_C

Passer une commande pour voir le processus de commande en action (checkout process)

On est dans le theme par défaut de WP, c’est la raison pour laquelle, les écrans ne sont pas finalisés mais fonctionnellement tout y est. En Ajax, votre panier s’augmente des différents produits sélectionnés et une mise à jour automatiquement se fait du montant global de vos achats.

Votre profil client et l’adresse d’expédition

L’écran de récapitulation de votre commande
Pour parvenir à cette écran, nous avons réduit à néant les tarifs de livraison. La configuration du “shipping” est un élément clé du fonctionnement de votre boutique ne ligne.

Dans l’administration, vous obtenez une ligne pour votre première commande

Conclusion

Le plugin dans cette version gratuite est complet pour gérer de A à Z une boutique ne ligne adossée à Worpdress, ce qui est était l’objectif initial de cette article. La prise ne main est aisée et facile comme souvent sous Wordpress. Il faut se toutefois se pencher sans doute un peu sur la configuration de la passerelle de paiement mais globalement l’interface avec Paypal ou la solution Google Checkout est grandement faciliter. Si vous souhaitez plus de vues produits notamment, vous pouvez passer à la version payante de ce plugin. Un petit inconvénient tout de même, il faudra dans cette version gratuite comme dans la payante explorer le code pour internationaliser les fichiers afin de publier en français par exemple votre boutique.

En savoir plus

• Le site officiel de wp-e-commerce
  http://www.instinct.co.nz/e-commerce/
• Le tag e-commerce sur l’espace de plugins de WP
  http://wordpress.org/extend/plugins/tags/ecommerce

Comment profiter de deux des plus puissants moteurs de réseau social en seulement quelques clics? C’est l’objet de cet article consacré au plugin Twitter tools. Votre serviteur étant un novice en la matière, vous pourrez juger du niveau de simplicité quant à la faisabilité de l’opération.

Fonctionnalités du plugin

Cet outil a pour fonction de réaliser la synergie complète de votre blog WordPress et de votre compte sur le fameux site de micro-blogging Twitter.
Principalement, ce plugin peut:

• Créér automatiquement grâce aux tweets des posts de manière journalière ou hebdomadaire
• Donner la possibilité d’envoyer des tweets directement depuis votre blog
• Archiver et éditer vos tweets

Installation du plugin

Au préalable, vous devez télécharger l’outil en question. Vous pouvez vous y rendre à l’adresse suivante: http://wordpress.org/extend/plugins/twitter-tools/

Après avoir récupéré le dossier requis, “dézippez - le” et placez le à l’endroit dédié habituellement à vos plugins pour Wordpress en respectant le chemin suivant: wp-content/plugins/

Une fois la mise à jour de vos fichiers effectuée, rendez-vous sur votre tableau de bord Wordpress.
En sélectionnant la rubrique “Extensions”, vous devez obtenir l’écran suivant:

Comme vous le voyez, 4 éléments activables apparaissent sur votre écran: le plugin Twitter Tools et 3 autres plugins complémentaires.
Décrivons les succintement.

• Twitter Tools - Bit.ly URLs : utilise Bit.ly (service de gestion de liens pour le web social) pour créer des raccourcis d’URL vers Twitter tools
• Twitter Tools - Exclude Category : empêche les posts d’une catégorie définie d’être tweetés via Twitter tools
• Twitter Tools - Hashtags : Permet d’ajouter un dièse pour vos métadonnées Twitter.

Après demande d’activation du Twitter Tools, on se trouve face à l’écran suivant:

Par la suite,sélectionnez selon vos besoins les différentes options qui vous sont proposées (en anglais) et enregistrez votre choix. Vous disposez dorénavant d’un nouveau widget.
Installez le comme bon vous semble. Dans notre exemple, Twitter Tools est inséré dans une sidebar (thème: Twicet).

Postez votre message dans l’espace dédié et le tour est joué. Vous pouvez voir sur votre compte Twitter que votre message est bien affiché.
Pour y accéder directement, vous pouvez cliquer sur le lien “More Updates”.

De manière réciproque, le post réalisé sur Twitter peut être directement pris en compte sur votre site.

En résumé, l’installation et l’application de ce plugin sont plutôt aisées et permettent de mettre à jour rapidement les deux interfaces. Le gain de temps qui en découle et la multiplication de sa présence sur le web à travers les posts sont des éléments qui ne sont pas négligeables.

En savoir plus

• Détail des possibilités de Twitter tools par son développeur: Alex King
  http://alexking.org/projects/wordpress/readme?project=twitter-tools
• Un exemple d’utilisation de Twitter tools: le blog de Diane Bourque
  http://boitealunch.info/

Cette article s’intéresse à l’installation d’un module e-commerce complet Ubercart pour gérer une boutique en ligne sous Drupal 6. On tentera dans un avenir proche, de se livre à une comparaison avec les couples les plus connus de solutions e-commerce adossé à un CMS, pour ne pas les citer : Joomla/Virtumart ou Wordpress/GoldenCart.

Notre installation va se faire en local sur la version gratuite de MAMP, avec Drupal version 6.15 et le module Ubercart version 2.2

Pour installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog :

• Installer un environnement php-mysql sur Mac
• Installer un environnement php-mysql sous Windows

Création de la BDD pour accueillir Drupal 6

On passe rapide sur l’installation de Drupal 6 qui a été détaillé dans un article précèdent.

• Drupal - Installation de Drupal 6

Les information indispensables pour créer la BDD
On crée une base et un utilisateur simultanément bien sûr, en production, le mot de passe peut et doit être légèrement plus complexe. La commande SQL pour se connecter au client MySQL de MAMP. Vous vous connecté(e) comme utilisateur root, le mot de passe est root.

/Applications/MAMP/Library/bin/mysql -u root -p

	# Création simultanée de la base drupal6_install et l'utilisateur drupal6_install
CREATE USER 'dr6_install'@'localhost' IDENTIFIED BY 'dr6_install';GRANT USAGE ON *.* TO 'dr6_install'@'localhost' IDENTIFIED BY 'dr6_install'WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0; CREATE DATABASE IF NOT EXISTS dr6_install;GRANT ALL PRIVILEGES ON dr6_install.* TO 'dr6_install'@'localhost';

Au terme de ces commandes dans MySQL, nous aurons donc de quoi compléter les informations demandées lors de l’installation de Drupal 6.x. A savoir les informations suivantes :

Database Name= dr6_install
Database User name = dr6_install
Database Password = dr6_install
Database Host = localhost

Pour mieux comprendre la gestion d’une BDD via la console MySQL ou à l’aide de PhpMyadmin, vous pouvez reportez à cette article :

• MySQL, PhpMyadmin - Administrer une base de données MySQL via la console MySQL et PhpMyadmin

Problèmes rencontrés sous MAMP

La procédure d’installation de Drupal 6 semble peiner un peu au moment de la configuration de la BDD sous MAMP. Pour contourner cette difficulté, le mieux est d’éditer manuellement le fichier de configuration afin de paramétrer correctement l’accès à la BDD. Le fichier de configuration se trouve dans [le_repertoire_qui_contient_Drupal_6]/sites/default/settings.php

Les lignes à mettre à jour manuellement dans setting.php avec les données de connexion à la BDD MySQL.

* Database URL format:
 *   $db_url = 'mysql://username:password@localhost/databasename';
 *   $db_url = 'mysqli://username:password@localhost/databasename';
 *   $db_url = 'pgsql://username:password@localhost/databasename';
 */
$db_url = 'mysql://dr6_install:dr6_install@localhost/dr6_install';
$db_prefix = ''; /* Ne nous mettons pas de préfixe sur les tables */

Un conseil pour retrouver l’outil d’administration.
Toujours se souvenir que si votre installation plante, vous pouvez accéder aux outils d’administration via ces deux URLs.

• http://localhost/admin
• http://localhost/?q=admin

Installation de Drupal

On est parti sur une version drupal 6.13 drupal-6.13.tar.gz sur laquelle on a fait une mise à jour pour passer à la version 6.15 issu de drupal-6.15.tar.gz. Apres cette phase d’installation, vous serez libre devenir le Übermensch de Ubercart. Dans une traduction approximative en français vulgaire, cela donne un cador du Superpanier

Il est conseillé de partir sur Drupal 6.7 ou plus. Cela tombe bien, on est en local sur le version 6.15

Une fois la mise à jour faite pour l’installation de la version 6.15. Vous pouvez vérifier que votre plate-forme est à jour

Drupal et dépendances

Il y a une palanquée de modules complémentaire à installer avant même d’envisager de se servir de Ubercart notamment des modules liés à la gestion des images. Eh, oui vous êtes censé(e) obtenir un catalogue avec au moins des vignettes de vos produits, c’est un minimum pour attirer le chaland sur Internet.

Ubercart s’appuie dans son fonctionnement sur différents modules existant pour Drupal. Seul un certain nombre de ces modules sont à activer. Attention, certains modules sont inclus au sein de modules complets. Dans la liste ci-dessous, entre parenthèses, les modules à activer au sein du module complet.

Module obligatoire
• Token

Gestion des images
• CCK (Content)
• FileField
• ImageAPI (ImageAPI, ImageAPI GD2)
• ImageCache
• ImageField
• Thickbox

Modules conseillés mais non obligatoires
• Google Analytics
• Views

Le module Token

Le module CCK

Les modules Google Analytics et Views

Il reste tous les modules d’images dont les mises à jour vous sont constamment signalés. Comme c’est la cas ici pour le module ImageCache

Les conseils donnés par Ubercart

Il s’agit des “tips” c’est à dire des petits conseils donnés par l’équipe de développement de Ubercart. Il sont au nombre de 4.

1. Choisir un thème avec deux colonnes uniquement pour le backend ou l’administration pour faciliter la vue et le traitement des commandes.
2. Activer les URLs lissés (Clean URLs). C’est nécessaire dans la gestion des images.
3. Compléter l’information concernant le site
4. Désactiver la procédure de validation de l’inscription par email avant d’accéder au site. Il est vrai que si l’inscription est fastidieuse, cela n’encouragera pas vos potentiels clients à s’inscrire. Cette désactivation se fait via Administer > User management > User settings

Activation des URLs lissés (Clean URLs)

Désactivation de la validation de l’inscription par mail

Source : http://www.ubercart.org/docs/user/8075/installing_ubercart

Installation de Ubercart 2.2 sur Drupal 6.15

Il faut si ce n’est pas déjà fait le module path qui est nécessaire à l’élaboration du catalogue Ubercart.

L’activation de Ubercart se fait comme un module. Il faut placer le répertoire ubercart dans /site/modules/ ensuite activer l’ensemble des modules via l’outil d’administration.

Ubercart core

Ubercart payment

Ubercart extras

Quelques paramètres supplémentaires à régler

Augmenter la valeur memory_limit

Drupal vous conseille instamment de faire passer la valeur du paramètre memory_limit dans le fichier php.ini de votre serveur sinon lorsque Ubercart va tenter de traiter des grandes images de vos produits à l’aide de GD Library, PHP sur le serveur n’aura pas les ressources nécessaires pour effectuer le traitement.

Pour en savoir plus sur cette question, vous pouvez vous reporter à la FAQ du site de boutell, les créateurs de la lib GD
Source : http://www.boutell.com/gd/faq.html - Why does gd cause my PHP script to run out of memory?

Pour information, cela suppose que vous avez la possibilité d’installer la librairie GD sur votre espace d’hébergement, que vous avez accès au fichier de configuration de PHP (php.ini) et que vous êtes en mesure de redémarrez votre serveur ! Cela fait beaucoup de conditions qui sont souvent remplis par un hébergement dédié mais rarement un hébergement mutualisé.

Paramétrer Google Analytics
Cette question est beaucoup simple à régler. Il vous d’entrer le script fourni par GA pour le marquage de vos pages.

Les avantages de Ubercart

Voici en gros tous les avantages attendues de la solution e-commerce Ubercart outre le fait qu’elle tourne sur Drupal.

* Configurable product catalog includes catalog pages and a block to display product categories.
* Flexible product creation system with product classes.
* Multiple product image support out of the box.
* Flexible product attributes system.
* Basic product stock level tracking and notification.
* Product features to add file downloads, role promotions, and more to products.
* Single page checkout.
* Automatic account generation (anonymous checkout).
* Customer and administrator checkout notifications.
* Simple order processing (with workflow-ng integration for automated order processing).
* Simple order creation and editing.
* Integrated payment system that acts as a bridge between acceptable payment methods (check, credit card, purchase order, etc.) and payment gateways (Cyber Source, Authorize.net, PayPal, etc.).
* Shipping quotes and fulfillment, including integration with UPS, FedEx, USPS.
* Sales, product, and customer reports.
* Activity logging.
* Much more… and more to come.

Source : http://drupal.org/project/ubercart

En savoir plus

• La projet Ubercart sur Drupal
  http://drupal.org/project/ubercart
• Les pré-requis de la plate-forme pour héberger votre Drupal
  http://drupal.org/requirements
• Les pré-requis de la plate-forme pour héberger votre Drupal
  http://drupal.org/requirements
• La documentation de l’API Ubercart
  http://www.ubercart.org/docs/api
• Ce qu’est Ubercart (What is Ubercart?)
  http://www.ubercart.org/what_is_ubercart

Les liens vers les modules

• 1. Token 6.x-1.11
  http://drupal.org/project/token
• 2. CCK 6.x-2.1 (Content)
  http://drupal.org/project/cck
• 3. ImageAPI 6.x-1.0 (ImageAPI et ImageAPI GD2)
  http://drupal.org/project/imageapi
• 4. Image Cache 6.x-2.0-beta2
  http://drupal.org/project/imagecache
• 5. ImageField 6.x-3.0-alpha2
  http://drupal.org/project/imagefield
• 6. Thickbox 6.x-1.1
  http://drupal.org/project/thickbox

La question est quelles sont possibilités offertes par Joomla 1.5 pour se connecter au site de micro-blogging twitter. On a sélectionné un certain nombre d’éléments fonctionnels parmi des plugins, modules notamment qui permettent d’étendre les capacités d’un site sous Joomla pour gérer un compte twitter. L’idée était à la base de faire l’installation la plus rapide avec un minimum de configuration, ce que l’on est légitimement en doit d’attendre d’un module/plugin Joomla. Or, il y a comme souvent pour Joomla, Wordpress ou Drupal “à boire et à manger” dans les développements que l’on peut récupérer sur internet ainsi tous les éléments qui ont été installés avec un succès relatif…
Nous avons classé notre sélection par ordre de préférence.

1. Tweets Module

Un module simple et efficace qui vous permet de rapatrier vos “gazouillis” de votre compte Twitter en ferraillant un minimum pour la configuration. Nous avons testé la version tweetsmodule-v2.2.zip

Dans l’administration de Joomla 1.5

L’installation se fait comme un module standard (upload et installation)

L’installation se fait comme un module standard (upload et installation)

Il faut ensuite activer le module

Il reste ensuite à configurer le tweetsmodule-v2.2.zip pour son affichage en “frontend”

Source : tweetsmodule-v2.2.zip

• Pour télécharger la dernière version de Tweets Module
  http://extensions.joomla.org/extensions/external-contents/social-blogging/5066
• Le site de l’auteur de Tweets Module, Van Eldijk
  http://extensions.vaneldijk.nl/

2. JTweet

Un bon module propret et facile d’installation fait l’équipe de Joomla Bamboo plutôt connu à ce jour pour les templates Joomla.

• Pour télécharger la dernière version de BizTweet Lite
  http://extensions.joomla.org/extensions/external-contents/social-blogging/7459
• Le site de Joomla Bamboo
  http://www.joomlabamboo.com/

3. Twitter Status

Un module tout à fait honorable de Tomasz Dobrzynski qui comme son nom l’indique…est polonais et accessoirement bon développeur. On a testé le
mod_easy_twitter_status_joomla1.5.x.zip

• Pour télécharger la dernière version de Twitter Status
  http://extensions.joomla.org/extensions/3735/details
• Le site de Tomasz Dobrzynski
  http://tomasz-dobrzynski.com/

4. BizTweet Lite

Ce extension conçue par les australiens de jtips.com.au est assez complète. Cela produit un bon aperçu de votre eventuelle activité sur Twitter. Il existe une version gratuite (lite) et téléchargeable si on s’inscrit. Il existe aussi la version payante avec des fonctionnalités étendues.

• Pour télécharger la dernière version de BizTweet Lite
  hhttp://extensions.joomla.org/extensions/content-sharing/twitting/9112
• Le site de jtips.com.au
  http://jtips.com.au/store/details/19/4/other-components-and-software/biztweet-lite.html

5. p8 Twitter

Prometteur mais décevant car pratiquement impossible à faire fonctionner

• Pour télécharger la dernière version de p8 Twitter
  http://extensions.joomla.org/extensions/external-contents/social-profiles/7692
• Le site de jtips.com.au
  http://jtips.com.au/store/details/19/4/other-components-and-software/biztweet-lite.html

En savoir plus

• La liste de référence pour la publication sur Twitter via Joomla
  http://extensions.joomla.org/extensions/social-web/twitter-publish
• Une liste publiée par le site joomtorial.com sur les extensions pour Twitter
  http://www.joomtorial.com/news/38-joomla-twitter-tools

Lorsque vous vous mettez à écrire des articles ou des pages sous Wordpress, rapidement vous allez souhaiter enrichir ce contenu d’une carte Google Map si par exemple, vous souhaitez donner l’emplacement exacte du magasin dont vous faites l’éloge ou la critique. Pour insérer un carte GM à ce contenu, il va vous falloir trouver rapidement un plugin qui fasse l’affaire, à toutes fins utiles, voici un petit comparatif rapide des plugins les plus performants qui répondent à ce besoin cartographique.

• Google, Flex, Buddyress et Wordpress - Interfacer BuddyPress et Google Map API sous Flex
  Notamment la partie consacrée à “Obtenir une API KEY pour Google Maps”

Obtenir une clé Google Map

Les étapes principales pour l’obtention de la clé Google Map qui vous sera souvent demander lors de l’activation du plugin.

Vous devez vous inscrire…

Vous devez donner l’adresse du site sur lequel vous souhaitez mettre en place les cartes Google

Le sésame tant attendu : la clé Google Map API

api key google => ABQIAAAAFyG-m8QhmAV1sRfWzKJDFShSYTp878J79xzYAOhGr
VUYUXOeDpixSM1cRwbCgMk5NXr2AfLPyzYPyUAg

New-York City, USA
On va se servir des coordonnées de NYC comme exemple à placer sur une carte.

 
	Latitude = 40.7143, Longitude = -74.0060
	Lat    = 40 degrees,   42.9 minutes   North
	Long = 74 degrees,   0.4 minutes   West

1. Geo Mashup

C’est à notre avis le meilleur plugin d’insertion de carte google dans Wordpress. Il y a toutefois, un inconvénient, on ne peut associer q’une seule carte à un article ou une page. Il est possible de sauvegarder des cartes sous le nom de son choix mais cela ne permet pas en revanche de les appeler directement dans la code, c’est dommage ! Par contre, ce plugin met à votre disposition quasiment toutes les valeurs de l’API Google Map.

N’oubliez apres lactivation du plugin, d’inséré la clé API Google sinon, cela ne fonctionnera pas !

Vous ne pouvez pas appeler la carte par le nom sous lequel vous venez sauvegarder la carte.

[geo_mashup_map name="1-Broome-Street-New-York"  height="200" width="490" zoom="17" add_overview_control="true" add_map_type_control="true"]

Un usage classique du code à insérer pour faire figurer une carte. Automatiquement, la carte selctionné s’affichera dans l’article correspondant ou la page correspondante

	[geo_mashup_map  height="235" width="600" map_type="G_HYBRID_MAP" zoom="19" add_overview_control="true" add_map_type_control="true"]

• add_map_control - true or false. Adds zoom/pan controls.
• add_map_type_control - true or false. Adds map type selector controls.
• add_overview_control - true or false. Adds the overview control.
• auto_info_open - true or false. Opens the info window of the most recent or link source post.
• center_lat - decimal latitude. With center_lng, an initial center location for the map.
• center_lng - decimal longitude. With center_lat, an initial center location for the map.
• click_to_load - true or false. Activates the click-to-load feature described above. Default is false.
• click_to_load_text - the text displayed in the click-to-load pane.
• disable_tab_auto_select - For use with the tabbed category index, shows all posts to begin with. Allows the info window to remain open.
• height - the height of the map in pixels
• interactive_legend - true or false. Controls the display of checkboxes in map legend. Default is true.
• legend_format - dl or table. Formats the category legend using a definition list or table. Default is table.
• limit - the maximum number of items to include on a global map or contextual map.
• map_content - global, single, or contextual. Overrides the default content of a map.
• map_control - !GSmallZoomControl, !GSmallMapControl, !GLargeMapControl, !GSmallZoomControl3d, !GLargeMapControl3D
• map_type - G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP
• map_cat - the ID of the category to display (you can edit the category and look for cat_ID in the address bar)
• marker_min_zoom - hide markers until zoom level, 0 to 20
• name - name for this map. You can then use the name in the for_map parameters of other tags.
• show_future - true or false. Includes future-dated posts. Default is false.

Source : http://code.google.com/p/wordpress-geo-mashup/wiki/TagReference

2. Google Map Shortcode

Ce plugin s’appuie sur les “Customs values” ou “Champs personnalisés” pour attacher une carte google map un article ou à une page. Nous ne sommes pas parvenu à faire fonctionner correctement ce plugin mais toutefois le code semble prometteur.

	[google-map-sc address="3501 S.W. 130th Ave., Davie 33330" width="250" height="250" zoom="14"]

3. WP Geo

Là encore un code prometteur mais bien des difficultés à la mettre en place et à le faire fonctionner.

	[wpgeo_longitude]40.7143[/wpgeo_longitude]
	[wpgeo_latitude]-74.0060[/wpgeo_latitude]

Source : http://www.wpgeo.com/

Pour aller plus loin

• La page du Codex de Wordpress consacré à la question de la traduction Translating WordPress
  http://wordpress.org/extend/plugins/geo-mashup/
• La page du Codex de Wordpress consacré à la question de la traduction Translating WordPress
  http://wordpress.org/extend/plugins/tags/google-map
• Map Coordinates Finder
  http://www.batchgeocode.com/lookup/

On va livrer le .po aux roses de la localisation de votre thème. Imaginons un cas de figure simple et diablement réel, en clair “un business case”, vous souhaitez faire un thème multilingue à partir d’un thème existant. Cela va sans dire le thème est loin d’avoir été prévu pour être utilisé dans une langue autre que celle de Shakespeare. Pour une compréhension rapide et se permettre des mauvais jeux de mots, nous faisons référence directement à l’extension du fichier pour désigner les deux fichiers de traduction indispensables sous Wordpdress : le fichier source fr_FR.po et sa version fr_FR.mo compilé.

Pour information, selon wikipedia et pour votre information, Poedit est un logiciel libre d’aide à la traduction utilisant la bibliothèque Gettext. C’est une aide pour le processus de développement d’internationalisation et de localisation.. Nous utiliserons quant à nous comme logiciel pour éditer le .po, notre logiciel d’édition habituel : TextMate.

Dans notre exemple, notre thème se nomme nom-du-theme. Ce thème comprend les deux fichiers fr_FR.po et sa version compilée fr_FR.mo sous PoEdit.

Le .po de FR

Vous ouvrez le fichier fr_FR.po avec un éditeur genre Notepad ++ sur PC, TextMate sur Mac. Vous y ajoutez les lignes manquantes et le tour est joué avec la traduction en dessous. Il ne vous reste ensuite qu’à enregistrer en fr_FR.po puis à envoyer le tout en FTP dans le répertoire du thème qui est celui de votre site.

Un fr_FR.po fr_FR.mo sur mesure dans un thème WP

Les fonctions de traduction de WP

On trouve de texte en anglais souvent collé en dur dans l’ensemble de fichiers .php qui constituent votre thème WP. Il faut rechercher et remplacer ces textes écrits "en dur" afin de les remplacer par des fonctions de traduction propres à un bon fonctionnement WP.

A votre disposition, pour traduire, vous avez globalement deux types de fonction:

• __ ('phrase-en-anglais', 'nom-du-theme');, cette fonction permet de passer une traduction figurant dans le fichier .mo dans une fonction par exemple. Le second paramètre permet d’indiquer le chemin vers notre thème WP nommé nom-du-theme. Ce paramètre est indispensable
• _e ('phrase-en-anglais', 'nom-du-theme');, cette fonction fait un équivalent php de la commande echo. Cette dernière publie la traduction figurant dans le fichier .po et de sa version compilée .mo. Le second paramètre permet d’indiquer le chemin vers notre thème WP nommé nom-du-theme. Ce paramètre est indispensable

Un cas concret de traduction

Prenons les textes à traduire de la page d’erreur 404 d’un thème écrit initialement en anglais.

La première chose à faire, il faut placer cette fonction load_theme_textdomain('nom-du-theme'); dans le fichier functions.php. Ce fichier est parti prenante de votre thème WP.

<?php 
/* for the french version */
load_theme_textdomain('nom-du-theme');
 ?>

La visualisation du .po via Poedit

Le code source du fichier fr_FR.po

	#: comments.php:102
	msgid "Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment."
	msgstr "La modération des commentaires est active et cela peut retarder la publication de votre commentaire. Il n'est pas nécessaire de publier à nouveau votre commentaire."
 
	#: comments.php:102
	msgid "Please note:"
	msgstr "A noter :"
 
	#: category.php:18
	msgid "Read More..."
	msgstr "En savoir plus..."
 
	#: 404.php:12
	msgid "Error 404 - Not Found"
	msgstr "Erreur 404 - Aucun fichier trouvé"
 
	#: 404.php:16
	msgid "Try Going back home"
	msgstr "Essayer de repartir vers la page d'accueil"
 
	#: 404.php:20
	msgid "Or use the search form in the sidebar to find what you're looking for..."
	msgstr "Ou utilisez la recherche situé dans la barre de côté pour trouver ce que vous cherchez..."

Le fr_FR.po sous TextMate. Cela permet plus facilement d’ajouter des lignes dans ce fichier fr_FR.po

Un type de texte non-traduit dans un template WP sur la page 404 404.php

Les textes dûment traduits à l’aide des foncions de WP

<?php _e('Error 404 - Not Found', 'nom-du-theme'); ?>
 
 <p><small><strong><?php _e('Please note:', 'nom-du-theme'); ?></strong> <?php _e('Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.', 'panama'); ?></small></p>

Le rendu de la même du thème cette fois-ci traduit à l’aide du fr_FR.po et fr_FR.mo mis à jour

Des cas plus complexes de traduction

On s’est contenté de traduire avec l’aide de la fonction la plus simple : _e('Error 404 - Not Found', 'nom-du-theme'); qui permet d’afficher dans la page 404, la ligne suivante Erreur 404 - Aucun fichier trouvé

Un première d’usage de la fonction __()

<?php comments_number( __('0 comment', 'nom-du-theme'), __('1 comment', 'nom-du-theme'), __('% comments', 'nom-du-theme') ); ?>

Un deuxième usage de la fonction __()

Le code non-traduit

<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>

Le même code mais correctement traduit

<p><?php printf(__('You must be <a href="%s">logged in</a> to post a comment.', 'nom-du-theme'), wp_login_url( get_permalink() )); ?></p>

Pour aller plus loin

• La page du Codex de Wordpress consacré à la question de la traduction Translating WordPress
  http://codex.wordpress.org/Translating_WordPress
• Les fichiers de la traduction française
  http://www.wordpress-fr.net/telechargements
• Le blog de Xavier Borderie qui contribue beaucoup tant sur le JDN Développeurs ou son blog WP ainsi que lors des Wordcamps, bref complet
  http://xavier.borderie.net/wp-fr/
• Le site de l’outil PoEdit pour vous aider à compiler le .po en .mo
  http://www.poedit.net/
• Le site de l’outil TextMate — The Missing Editor for Mac OS X
  http://www.macromates.com/
• Le site de l’éditeur PC NOTEPAD++
  http://notepad-plus.sourceforge.net/fr/site.htm
• Un article de ce blog consacré aux questions de traduction
  http://social.hecube.net/blog/2009/09/04/wordpress-les-plugins-de-traduction-ou-comment-traduire-son-blog/

Si vous avez l’intention de gérer un nom de domaine doté d’une cinquantaine d’adresses email et d’ajouter éventuellement à ce domaine une multitude de services : calendriers, documents partagés… Tout cela gratuitement ! Alors laissez faire Google. Il existe au demeurant une version payante, pro dont le tarif annoncé est de l’ordre de 40 euros par compte mail. A ce prix-là, vu ce qui vous est proposé par Google dans la version gratuite, Google doit au moins vous fournir le café en plus chaque matin ! On avait déjà dans un article précédent abordé la question des Google Apps et de la gestion du nom de domaine.

• Google - Gérer son nom domaine avec Google Apps
  http://social.hecube.net/blog/2009/05/04/google-gerer-son-nom-domaine-avec-google-apps/

Etape par étape, le gestion du domaine sur Google Apps

On va donc s’inscrire de nouveau à Google Apps afin de profiter des différents services proposés lorsque vous déléguez la gestion de votre nom de domaine à Google. Dans cette article cependant, nous allons opter pour une intégration plus poussé et plus complète, notamment en configurant les DNS d’un nom de domaine. Les services dont vous disposerez sont les suivants :

Gmail
Créez une adresse e-mail personnalisée comme fandemoto@votregroupe.com.

Google Agenda
Organisez votre planning et partagez des événements avec vos amis.

Google Documents
Partagez des documents, présentations et feuilles de calcul en ligne.

Google Sites
Créez des sites Web et des wikis de groupes.

Source : http://www.google.com/apps/intl/fr/group/index.html

Page d’accueil des Google Apps où G nous fait l’article !

On va se contenter de la version gratuite et non de la version payante

Les différents services auxquels me donne accès mon inscription à Google Apps

1. Choix du nom de domaine pour Google Apps

On choisit Administrateur : je possède ou contrôle ce nom de domaine

2. Inscription à Google Apps

Le formulaire de l’étape 2. Inscription qui permet de spécifier le compte Administrateur

Ces informations ne sont pas obligatoires mais elle aide Google à mieux vous cibler le marché pro…

Le mail du compte Administrateur, avec le captcha de rigueur

Apres cette ultime étape, vous êtes désormais titulaire d’un compte sur Google Apps. Il va falloir toutefois entériner auprès le fait que vous être propriétaire du nom de domaine.

3. Configuration du nom de domaine sur Google Apps

Confirmer la propriété du nom de domaine à l’aide du CNAME

Nous avons choisi de confirmer la propriété du nom de domaine à l’aide du CNAME. Voici les informations que vous livre Google pour parvenir à vos fins.

Voilà les instructions données par Google

Confirmez que vous possédez le domaine xxxx.com.

1. Connectez-vous au service d’hébergement de votre domaine et accédez à la page de gestion DNS. L’emplacement de cette page varie en fonction des services, mais, de manière générale, vous pourrez y accéder par le biais des sections Gestion du domaine ou Paramètres avancés.
2. Utilisez la chaîne unique suivante pour créer un enregistrement CNAME pour le domaine xxxxxxxx.com :

google53115a17889d8a3b
3. Cibler l’enregistrement CNAME sur :

google.com
4. Une fois les modifications effectuées, vous pouvez contrôler l’enregistrement en lançant une requête CNAME lookup pour http://google53115a17889d8a3b.xxxxxxxx.com . De nombreux sites Web vous permettent de lancer des requêtes CNAME lookup automatisées. Vous trouverez ces sites en recherchant CNAME lookup à partir de la page http://www.google.com .

Vous êtes connecté en tant qu’Administrateur à votre compte Google Apps

On sélectionne la procédure de confirmation de la propriété du nom de domaine par le CNAME

C’est la ligne à ajouter dans votre gestion de zone pour confirmer la gestion du domaine chez Google par CNAME

google53115a13666d8a3b 10800 IN CNAME google.com

La gestion des mails depuis votre compte Google Apps

Dans la gestion de vos zone chez votre registar, il faut changer les lignes qui sont relatives aux MX de la manière suivante.

@ 10800 IN MX 10 ASPMX.L.GOOGLE.COM.
@ 10800 IN MX 10 ASPMX.L.GOOGLE.COM.
@ 10800 IN MX 20 ALT1.ASPMX.L.GOOGLE.COM.
@ 10800 IN MX 20 ALT2.ASPMX.L.GOOGLE.COM.
@ 10800 IN MX 30 ASPMX2.GOOGLEMAIL.COM.
@ 10800 IN MX 30 ASPMX3.GOOGLEMAIL.COM.
@ 10800 IN MX 30 ASPMX4.GOOGLEMAIL.COM.
@ 10800 IN MX 30 ASPMX5.GOOGLEMAIL.COM.

La création de sous-domaine qui pointent vers les applications Google

C’est le point optionnel mais qui a son importance dans la mesure où vous simplifier l’accès à vos services google. Par exemple webmail.xxxxx.com pointe vers votre webmail sur google. Un conseil, n’oubliez pas d’enlever la/les ligne(s) concurrente(s) au webmail donnée par votre registrar, par exemple gandi. Par exemple : (webmail 10800 IN CNAME agent.mail.gandi.net.)

Pour le webmail
Apres avoir fait les modifications suivantes sur google, vous pourrez avoir une adresse webmail.xxxxx.com pointe vers votre webmail sur google

webmail 10800 IN CNAME ghs.google.com.
calendar 10800 IN CNAME ghs.google.com.
docs 10800 IN CNAME ghs.google.com.
sites 10800 IN CNAME ghs.google.com.

Pour les autres services : calendar, docs….etc
On fait de manière identique pour tous les autres services google sur le principe exposé ci-dessus pour le webmail.

Récapitulatif & Conclusion

Vous avez, si vous êtes un indépendant o une TPE, un arsenal digne des grandes entreprises avec des solutions propriétaires souvent très onéreuses. Tout cela est pour vous disponible gratuitement avec des limites certes amis tout de même ! Ci-dessous, un récapitulatif complet des lignes à insérer dans votre gestion de zone pour mémoire.

	google53115a17889d8a3b 10800 IN CNAME google.com 
	@ 10800 IN MX 10 ASPMX.L.GOOGLE.COM. 
	@ 10800 IN MX 10 ASPMX.L.GOOGLE.COM. 
	@ 10800 IN MX 20 ALT1.ASPMX.L.GOOGLE.COM. 
	@ 10800 IN MX 20 ALT2.ASPMX.L.GOOGLE.COM. 
	@ 10800 IN MX 30 ASPMX2.GOOGLEMAIL.COM. 
	@ 10800 IN MX 30 ASPMX3.GOOGLEMAIL.COM. 
	@ 10800 IN MX 30 ASPMX4.GOOGLEMAIL.COM. 
	@ 10800 IN MX 30 ASPMX5.GOOGLEMAIL.COM. 
	webmail 10800 IN CNAME ghs.google.com.
	calendar 10800 IN CNAME ghs.google.com.
	docs 10800 IN CNAME ghs.google.com.
	sites 10800 IN CNAME ghs.google.com.

C’est typiquement le type de lignes nécessaires sur gandi.net

Pour aller plus loin

• Page d’accueil de Google Apps Édition Standard
  http://www.google.com/apps/intl/fr/group/index.html