XAHUTU MANAGEMENT http://www.xahutu.com Sun, 13 May 2012 10:30:28 +0000 en hourly 1 Quand WordPress parle à Facebook http://www.xahutu.com/quand-wordpress-parle-a-facebook/ http://www.xahutu.com/quand-wordpress-parle-a-facebook/#comments Thu, 03 Nov 2011 14:57:57 +0000 Agustin http://www.xahutu.com/?p=2292 Désormais, les clients veulent, avec raison, que lorsqu'ils saisissent l'adresse de leur site sur un statut Facebook, une image dédiée et un texte explicatif apparaissent sur le Mur.]]> Quand WordPress parle à FacebookDésormais, les clients veulent, avec raison, que lorsqu’ils saisissent l’adresse de leur site sur un statut Facebook, une image dédiée et un texte explicatif apparaissent sur le Mur. Jusque là rien d’anormal et de très compliqué.

Il suffit de mettre les « meta » qui vont bien. Comme par exemple, le nouveau Blog A l’Avant-Goût édité par Profile PR. Si nous plaçons le code ci-après dans la partie (généralement contenu dans le header.php du thème) des pages du WordPress, quelle que soit l’adresse saisie sur Facebook, on aura le même texte et la même image.

<meta property="og:title" content="A l’Avant-Goût" />
<meta property="og:image" content="http://www.alavantgout.com/wp-content/themes/roots/img/og_image.jpg" />
<meta property="og:description" content="Découvrez A l'Avant-Goût, le nouveau blog gastronomie - art-de-vivre de Profile PR !" />

Toutefois, ce n’est pas ce que souhaitent faire les webmasters du blog qui, certes, veulent qu’apparaissent cette image et ce texte pour la page d’accueil (leur Index), mais non pour les articles que les internautes sont libres de partager avec une illustration relative à l’article.

Il est donc nécessaire d’introduire la notion de « Est-on sur la page d’accueil du blog ? » avec le code suivant :

<?php
if ( is_home() ) { ?>
        <meta property="og:title" content="A l’Avant-Goût" />
        <meta property="og:image" content="http://www.alavantgout.com/wp-content/themes/roots/img/og_image.jpg" />
        <meta property="og:description" content="Découvrez A l'Avant-Goût, le nouveau blog gastronomie - art-de-vivre de Profile PR !" />
<?php } ?>
]]> http://www.xahutu.com/quand-wordpress-parle-a-facebook/feed/ 0 Première application Facebook http://www.xahutu.com/premiere-application-facebook/ http://www.xahutu.com/premiere-application-facebook/#comments Sat, 14 May 2011 14:17:58 +0000 Agustin http://www.xahutu.com/?p=2224 Depuis que Facebook a décidé de se passer du langage FBML, nous passons du temps sur les forums à la recherche de pistes, d'idées... à même de remplacer toutes les routines développées auparavant.]]> Première application FacebookDepuis que Facebook a décidé de se passer du langage FBML, nous passons du temps sur les forums à la recherche de pistes, d’idées… à même de remplacer toutes les routines développées auparavant.

Et force est de constater que nous ne sommes pas les seuls à creuser la toile. Voilà pourquoi, nous avons décidé de partager notre savoir-faire avec la communauté. Bien entendu, toutes les pistes expliquées ici ne sont pas forcément les meilleures et les plus efficaces, mais elles ont l’avantage de fonctionner !!!

Only for your eyes

Pour mesurer la notoriété d’une page Fan, il est nécessaire d’obtenir des « fans; ». Mais rares sont ceux qui cliquent sur le fameux Like d’emblée. Certes, les quiz, le jeux et autres concours permettent de drainer des fans, mais l’attachement à la marque est-il réellement au rendez-vous ? Nous préférons proposer des contenus à valeur ajoutée.

Côté programmation, sans FBML, il faut créer un fichier index.php qui va orienter l’internaute en fonction de son statut de fan ou non-fan. voilà à quoi cela ressemble. S’il est fan, on exécute accueil.php, sinon on affiche une image de 520 pixels de large invitant à devenir fan.

<?php

	$url_index = "accueil.php";

	// ----------- INITIALISATION DU BLOCAGE PAR LIKE
	function parsePageSignedRequest() {
    	if (isset($_REQUEST['signed_request'])) {
      	$encoded_sig = null;
      	$payload = null;
      	list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2);
     	$sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
      	$data = json_decode(base64_decode(strtr($payload, '-_', '+/'), true));
      	return $data;
    	}
    	return false;
  	}

 		$signed_request = parsePageSignedRequest();
 		if($signed_request->page->liked)
		{
			header("Location:$url_index"); exit;
		} else { ?>

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Ma première application Facebook</title>
		<link rel="stylesheet" href="css/styles.css" />
	</head>
	<body>
		<div id="content">
			<img src="img/image-default.jpg" alt="Devenez Fan">
		</div>
	</body>
</html>
<?php } ?>

Voilà l’idée de départ. Malheureusement, rien ne fonctionne comme on le souhaite. En effet, nous avons constaté que lorsque l’on ajoute un partager avec des amis, l’adresse de retour que propose Facebook est celle de la page de l’application et non celle de la page fan. Dès lors, il a été nécessaire d’ajuster la partie body du code ci-dessus afin d’imposer un retour forcé vers la page fan (partie script et appel dans le body).

<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Ma première application Facebook</title>
		<link rel="stylesheet" href="css/styles.css" />

                <script language = "javascript">
		function redirect() {
		top.location.href = "<?php echo "http://www.facebook.com/adresse-page-fan/" ?>";
		}
		function gotoout() {
		if (window.name == "iframe_canvas") {
			var content = document.getElementById("content");
			content.style.display="none";
			redirect();}
		}
 		</script>

	</head>
	<body onLoad="gotoout()">
		<div id="content">
			<img src="img/image-default.jpg" alt="Devenez Fan">
		</div>
	</body>
</html>
<?php } ?>

Où peut-on voir un exemple d’application réalisée avec ce code :

Exemple d’application avec les Outils de la Tribune.fr
]]> http://www.xahutu.com/premiere-application-facebook/feed/ 0 Ajouter une icône sur l’écran de l’iPad et l’iPhone http://www.xahutu.com/ajouter-une-icone-sur-ecran-ipad-et-iphone/ http://www.xahutu.com/ajouter-une-icone-sur-ecran-ipad-et-iphone/#comments Thu, 03 Feb 2011 16:46:28 +0000 Agustin http://www.xahutu.com/?p=2123 Poser une icône pointant vers un site Web sur l'écran d'accueil d'un iPad, d'un iPhone (3 ou 4) ou d'un iPod est chose aisée puisque le navigateur Safari Mobile possède une fonction adhoc.]]> Ajouter une icône sur l'écran de l'iPad et l'iPhonePoser une icône pointant vers un site Web sur l’écran d’accueil d’un iPad, d’un iPhone (3 ou 4) ou d’un iPod est chose aisée puisque le navigateur Safari Mobile possède une fonction adhoc. Pour vous en
persuader, démarrez le navigateur depuis votre iPad et consultez un site Web.

En haut à gauche du navigateur, il y a trois icônes, cliquez sur celle dont le symbole est une flèche qui sort d’un écran (sur iPod, il s’agit d’un signe +). Une menu se déroule avec plusieurs options : optez pour « Ajouter à l’écran d’accueil ». Si le site Web ne possède pas des icônes spécialement prévues pour iPad, iPhone ou iPod, une copie d’écran de la page consultée est automatique créée afin de servir de pictogramme.

Ajouter une icône sur l'écran de l'iPad et l'iPhone

Créer une balise dédiée aux appareils d’Apple

Si vous avez un site Web et que vous souhaitez mettre en place des icônes dédiées, il faut aller ajouter des balises propriétaires dans le header (la section head) de vos pages Web. La balise est la suivante :

<link rel="apple-touch-icon" href="http://www.adressedusite.com/nomdufichier.png" />

Les icônes doivent être des images au format .PNG avec les dimensions suivantes :
iPhone (v4) : 114 x 114 px
iPad : 72 x 72 px
iPhone (v3 et v3GS) : 57 x 57 px
iPod : 57 x 57 px

Personnellement, on préfère imposer le choix de l’icône en fonction de la résolution de l’écran plutôt que de laisser Apple dicter sa loi. De même, avec « apple-touch-icon-precomposed », on évite également l’effet aux coins arrondis qu’appliquent les Apple par défaut.

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="http://www.adressedusite.com/ico-57px.png" />
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="http://www.adressedusite.com/ico-72px.png" />
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="http://www.adressedusite.com/ico-114px.png" />

Si vous souhaitez tester sur un site ayant les icônes adhoc, allez sur www.xahutu.com

]]> http://www.xahutu.com/ajouter-une-icone-sur-ecran-ipad-et-iphone/feed/ 0 Un site e-commerce en 10 jours ? http://www.xahutu.com/un-site-e-commerce-en-10-jours/ http://www.xahutu.com/un-site-e-commerce-en-10-jours/#comments Thu, 06 Jan 2011 08:27:50 +0000 Agustin http://www.xahutu.com/?p=2067 Un de nos clients lance sa nouvelle collection de vêtements le 19 janvier prochain. A cette occasion, nous avons souhaité démontrer qu'il était possible de créer un site e-commerce à partir de la plate-forme Magento en moins de 10 jours ouvrés. Cet article expliquera, point par point, toutes les étapes de la création (technique, humain, templates…).]]> Un site e-commerce en 10 jours ?Un de nos clients lance sa nouvelle collection de vêtements le 19 janvier prochain. A cette occasion, nous avons souhaité démontrer qu’il était possible de créer une boutique en ligne à partir de la plate-forme Magento en moins de 10 jours ouvrés. Cet article expliquera, point par point, toutes les étapes de la création (technique, humain, templates…). Bien entendu, nous restons sur une plate-forme de base, car pour un site plus complet, il compter plus de 10 jours sans oublier la partie saisie des catégories et des produits…

Étape 1 : le nom de la boutique

En premier lieu, le nom de la boutique, qui sera également le nom de domaine du site. Ce choix se révèle très important car il faut à la fois que l’on retrouve la marque du client (LASTAGE) sans que cela vienne parasiter son propre site. Comme toujours les meilleures idées sont les plus simples, à condition, bien sûr, que le nom de domaine soit disponible. Puisqu’il s’agit de LASTAGE et que l’on y vend des produits fabriqués par cette marque, on part sur l’idée de « Made in LASTAGE ». Une rapide vérification sur Gandi, nous confirme que madein-lastage est disponible en .com et .fr. C’est décidé, les deux noms sont achetés.

Étape 2 : Installation de Magento et choix du look

Le nom de domaine choisi, nous devons désormais installer la plate-forme Magento dernière version sur notre hébergement dédié chez OVH. Rodés à ce type d’installation, la plate-forme est installée et paramétrée dans la journée. Nous sommes restés sur du basique sans extensions « exotiques » demandant du temps à mettre en place et à tester (la compatibilité des extensions entre-elles étant souvent aléatoire).

Pour le design de la boutique Magento, nous avons fait nos emplettes sur Themeforest : thème Dashing de goThemeTeam. Plutôt bien pensé et bien documenté, ce thème nous a semblé simple à adapter aux besoins. Et à 85 dollars le risque financier n’est pas bien grand. Néanmoins, comme toujours avec un thème américain, il a été nécessaire de sortir la trousse à outils pour refaire quelques bouts de codes en javascript et PHP… et recréer une partie des graphismes.

Bien entendu, ça ne marche jamais comme on le voudrait et le thème propose un affichage dans une fenêtre de type fancybox (s’ouvrant sur demande) qui ne fonctionne qu’avec des produits non configurables (dommage, nous devons gérer des tailles, des couleurs…). Bref, nous voilà en train de comprendre la logique des développeurs du thème et faisant du débogage pour eux… Après une journée d’attente, les développeurs texans apportent une solution. Il ne reste plus qu’à la mettre en œuvre. Bon, après deux problèmes connexes aux corrections et un aller-retour avec les texans, la version fonctionne. Certes, nous ne sommes pas encore bien satisfaits du mini-moteur de recherche qui, s’il est esthétique ne recherche pas grand chose… Ils cherchent une solution, on verra bien…

Étape 3 : Éprouver le design

Cette partie est la moins excitante de l’affaire. Le remplissage avec quelques produits doit permettre de déterminer le design final (avec des vrais éléments, on voit mieux les défauts de la boutique), le paramétrage de la TVA, le mode de paiement… Parallèlement, une autre partie de l’équipe travaille à créer un logo, à retailler toutes les illustrations fournies et à embellir le design. Déjà, la marque demande quelques réajustements sur les termes employés et le choix des images… mais rien de bien contraignant. On avance.

Un site e-commerce en 10 jours ?

Étape 4 : Mise en place du mode de paiement

Banque ou Paypal, telle est la question… Il faudra aussi aller voir nos amis de la Poste, pour avoir un contrat Colissimo. Comme le site doit être prêt pour le 19 janvier, on écarte la banque, bien que nettement moins coûteuse. Reste Paypal.
Voilà ça marche…
Le site est prêt, visible à cette adresse :Site Made in LASTAGE.

]]> http://www.xahutu.com/un-site-e-commerce-en-10-jours/feed/ 0 Tirer le meilleur parti de Twitter http://www.xahutu.com/tirer-le-meilleur-parti-de-twitter/ http://www.xahutu.com/tirer-le-meilleur-parti-de-twitter/#comments Wed, 01 Dec 2010 08:08:55 +0000 Agustin http://www.xahutu.com/?p=1823 La seconde édition de l'excellent eBook « Comment tirer le meilleur parti de Twitter » de Flavien Chantrel est dans les bacs numériques. Les auteurs, car ils sont multiples, reprennent le même principe que pour la première version : la mutualisation des compétences et des points de vue. Au final, un ouvrage collectif fort réussi que devraient lire tous les responsables marketing et autres journalistes et politiques.]]> Tirer le meilleur parti de TwitterLa seconde édition de l’excellent eBook « Comment tirer le meilleur parti de Twitter » de Flavien Chantrel (le Blog du Modérateur) est dans les bacs numériques. Les auteurs, car ils sont multiples, reprennent le même principe que pour la première version : la mutualisation des compétences et des points de vue. Au final, un ouvrage collectif fort réussi que devraient lire tous les responsables marketing et autres journalistes et politiques pour bien comprendre les usages, les enjeux et les problématiques de ce « nouveau » média.

 

]]> http://www.xahutu.com/tirer-le-meilleur-parti-de-twitter/feed/ 0 Personal Branding http://www.xahutu.com/personal-branding/ http://www.xahutu.com/personal-branding/#comments Mon, 29 Nov 2010 07:00:40 +0000 Agustin http://www.xahutu.com/?p=1649 À l'heure où certains se font remercier pour avoir été trop critiques à l'égard de leur entreprise sur les réseaux sociaux, des éclaircissements sur la gestion de l'identité numérique (personal branding) et de la réputation en ligne (e-reputation) s'imposent.
Faut-il se créer son média personnel ? Je répondrai par une anecdote.]]> Personal BrandingÀl’heure où certains se font remercier pour avoir été trop critiques à l’égard de leur entreprise sur les réseaux sociaux, des éclaircissements sur la gestion de l’identité numérique (personal branding) et de la réputation en ligne (e-reputation) s’imposent.
Faut-il se créer son média personnel ? Je répondrai par une anecdote.

Un associé d’un d’avocats très connu sur la place de Paris me posait la question « Comment puis-je améliorer le référencement du cabinet ? » Une rapide recherche sur Google me démontrait l’ampleur des dégâts : les principaux mots clés menant vers le site étaient… son nom et des combinaisons intégrant celui-ci. Depuis l’avènement des réseaux sociaux, il avait, sans le savoir, bâtit une marque personnelle forte, un véritable Personal Branding affichant clairement son appartenance au cabinet d’avocats.

Bravo, très bien me direz-vous. Mais il y a un revers de la médaille : les autres associés, beaucoup moins « communicants », n’apparaissaient pas et surtout ne menaient pas vers le cabinet d’avocats. Un réel problème quand on doit se démarquer dans la jungle des recherches sur le mot « avocat ».

Notre recommandation a été de construire une identité numérique pour chacun des associés. Bien entendu, cette recommandation est valable pour tous les dirigeants et communicants d’une entreprise. Chaque Personal Branding est alors l’occasion pour la société d’accroître sa visibilité, son exposition numérique, d’améliorer sa réputation. L’enjeu pour l’entreprise consiste à trouver des personnes capables de l’incarner. Il existe des réussites en la matière  Michel-Édouard Leclerc dont le blog est devenu une référence, Marc Touati avec une présence médiatique forte sur tous types de médias est un « plus » incontestable pour Golbal Equities (marctouati.com, acdefi.com…), ou encore Tristan Nitot, le Président de Mozilla Europe (blog Standblog, Tristan Nitot sur les standards du Web, les navigateurs et la technologie).

Opportunité et revers de la médaille

Une incarnation mais aussi un sacré dilemme car deux inconvénients sautent aux yeux instantanément. Tout d’abord, lorsque qu’une personne qui incarne l’entreprise décide de quitter le navire et de voler de ses propres ailes, elle « part » avec son média. Et même, si les traces digitales mèneront toujours vers l’entreprise, il faudra bien gérer l’« Après ».

Secundo, comment faire en sorte qu’informations personnelles et professionnelles ne viennent pas créer des dégâts collatéraux sur l’e-reputation de l’entreprise ? Car tel est bien le problème, comment les deux sphères peuvent-elles coexister ? Se dévoiler, c’est assurément apporter de l’humain, de l’authenticité. Laisser déborder la sphère privée, c’est prendre de grands risques aussi bien pour sa carrière que pour sa société. De notre point de vue, il convient dès la création du média personnel de séparer les deux sphères quitte à distiller des informations personnelles dans le cadre de publications professionnelles.

Dans la cadre d’une conférence sur le thème du « personal branding au service des marques » de l’Atelier BNP Paribas, l’ifop a dévoilé une enquête sur la diffusion d’informations professionnelles sur Internet.Cliquez sur ce lien pour consulter les résultats de cette enquête iFop pour l’Atelier BNP Paribas.

Enfin, l’ouvrage Se protéger sur Internet : Conseils pour la vie en ligne de Xavier Tannier édité chez Eyrolles nous a semblé une bonne lecture pour ceux et celles ayant envie de se lancer dans l’aventure. On y apprend les ficelles pour garder le contrôle de sa vie privée et de son image sur Facebook et autres réseaux sociaux.

]]> http://www.xahutu.com/personal-branding/feed/ 0 Musica a tope,musica toda la noche… http://www.xahutu.com/musica-a-topemusica-toda-la-noche/ http://www.xahutu.com/musica-a-topemusica-toda-la-noche/#comments Sat, 27 Nov 2010 08:00:57 +0000 Agustin http://www.xahutu.com/?p=1605 Impossible de résister à l'envie de vous fournir la procédure pour installer le widget de Deezer, tant il est utilisé dans nos bureaux. Bon, on va être sympa avec vous, on ne va pas vous configurer une webradio Electro qui démarre automatiquement, bien que celle-ci soit la plus écoutée…]]> Widget DeezerImpossible de résister à l’envie de vous fournir la procédure pour installer le widget de Deezer, tant il est utilisé dans nos bureaux. Bon, on va être sympa avec vous, on ne va pas vous configurer une webradio Electro qui démarre automatiquement, bien que celle-ci soit la plus écoutée…

Vous trouverez à l’adresse suivante, le widget de Deezer. Il vous suffit de choisir ce que vous souhaitez intégrer dans votre blog ou site : webradio, smartradio ou playlist personnalisée (attention, il y a des règles de diffusions à respecter), de définir les différents paramètres et d’aller copier le code HTML dans votre page. En voici un exemple :

 

Découvrez la Radio Dancefloor

 

Si vous disposez du module Lighbox Evolution en version JQuery ou plugin WordPress, vous pouvez également insérer le widget de Deezer sous la forme d’un simple lien comme celui-ci par exemple :

En avant la musique
]]> http://www.xahutu.com/musica-a-topemusica-toda-la-noche/feed/ 0 Testé pour vous : le widget de la Liga de Fútbol http://www.xahutu.com/teste-pour-vous-le-widget-de-la-liga-de-futbol/ http://www.xahutu.com/teste-pour-vous-le-widget-de-la-liga-de-futbol/#comments Fri, 26 Nov 2010 07:16:00 +0000 Agustin http://www.xahutu.com/?p=1566 Que cela soit clair, dans l'équipe, nous sommes des supporters du Rugby (le Biarritz Olympique et, pour quelques âmes égarées, l'Aviron Bayonnais). Néanmoins, nous tenons à saluer le travail des développeurs du journal El Paìs dont le widget sur la « Liga de Fútbol » est particulièrement bien pensé.]]> widget de la Liga de FútbolQue cela soit clair, dans l’équipe, nous sommes des supporters du Rugby (le Biarritz Olympique et, pour quelques âmes égarées, l’Aviron Bayonnais). Néanmoins, nous tenons à saluer le travail des développeurs du journal El País dont le widget sur la « Liga de Fútbol » est particulièrement bien pensé.

Bien qu’en langue espagnole, ce développement en Adobe Air propose de suivre en direct les rencontres de la Liga et toute une panoplie de statistiques (classements, équipes, actualités…). L’ensemble est relié, bien évidemment, aux contenus du journal en ligne El País.com.

Pour l’installer ce widget, il suffit de se rendre à l’adresse suivante et de définir les dimensions et les couleurs. Ensuite, il ne reste qu’à recopier le code HTML dans votre blog ou site. L’outil propose également le widget au format iGoogle ou Opera Widget.

<script language="Javascript" type="text/javascript" src="http://widgets.elpais.com/liga/wlaunch.html?c=verde&w=350"></script>

 

]]> http://www.xahutu.com/teste-pour-vous-le-widget-de-la-liga-de-futbol/feed/ 0 Testé pour vous : le widget Chaîne Sport de Le Monde.fr http://www.xahutu.com/teste-pour-vous-le-widget-chaine-sport-de-le-monde-fr/ http://www.xahutu.com/teste-pour-vous-le-widget-chaine-sport-de-le-monde-fr/#comments Thu, 25 Nov 2010 16:39:22 +0000 Agustin http://www.xahutu.com/?p=1530 La chaîne Sport de Le Monde.fr propose un widget un panorama de l'actualité sportive sous forme de chronologie à insérer dans votre blog ou votre site. Il permet de suivre en direct les événements et les rencontres et de disposer d'un accès direct aux contenus de la chaîne de Le Monde.fr. Notre avis : ça fonctionne bien !]]> La chaîne Sport de Le Monde.fr propose un widget un panorama de l’actualité sportive sous forme de chronologie à insérer dans votre blog ou votre site. Il permet de suivre en direct les événements et les rencontres et de disposer d’un accès direct aux contenus de la chaîne de Le Monde.fr.
Pour l’installer, il suffit de se rendre à l’adresse suivante et de définir les dimensions du widget. Dans notre exemple, il s’agit de 580 px sur 400 px. Ce widget en Flash fonctionne plutôt bien et ne présente aucun risque de conflits avec d’autres composantes du site ou blog.


]]> http://www.xahutu.com/teste-pour-vous-le-widget-chaine-sport-de-le-monde-fr/feed/ 0 Une plate-forme sécurisée pour les photographes http://www.xahutu.com/une-plate-forme-securisee-pour-les-photographes/ http://www.xahutu.com/une-plate-forme-securisee-pour-les-photographes/#comments Sat, 13 Nov 2010 11:13:05 +0000 Agustin http://www.xahutu.com/?p=1314 On nous demande souvent comment nous avons mis en place Imagevue d'ImagevueX pour le photographe Marce Morante de los Reyes. La genèse de l'histoire est celle-ci : Marce, journaliste et photographe professionnel espagnol, voulait proposer à ses clients une plate-forme sécurisée de visualisation de photographies. Mais sur le marché, il n'y avait rien de simple à mettre en œuvre, de peu onéreux et capable d'offrir une confidentialité suffisante.]]> Une plate-forme sécurisée pour les photographesOn nous demande souvent comment nous avons mis en place Imagevue d’ImagevueX pour le photographe Marce Morante de los Reyes. La genèse de l’histoire est celle-ci : Marce, journaliste et photographe professionnel espagnol, voulait proposer à ses clients une plate-forme sécurisée de visualisation de photographies. Mais sur le marché, il n’y avait rien de simple à mettre en œuvre, de peu onéreux et capable d’offrir une confidentialité suffisante (multi-clients).

Effectivement, lorsque l’on cherche une plate-forme sécurisée de visualisation pour les photographes, on ne trouve pas grand chose de facilement exploitables. Nous avons donc eu l’idée de construire la plate-forme à partir d’un outil peu onéreux (150 $ pour la licence « Version Commerciale ») Imagevue d’ImagevueX. Il s’agit d’une galerie de photographies entièrement personnalisable développée en Flash (voir le site de l’éditeur).

L’avantage de cette plate-forme est que les albums peuvent être masqués du menu, mais surtout que son organisation interne - en dossiers distinctement séparés - permet d’adjoindre très facilement une sécurité complémentaire. En effet, il suffit de placer dans le répertoire à protéger des fichiers .htaccess et .htpass pour qu’ils soient accessibles uniquement au travers d’une boîte de dialogue de login/password.

Installer et paramétrer Imagevue

En premier lieu, il convient de faire l’acquisition d’Imagevue (150 $). Installez le logiciel et commencez par remplir les parties qui seront visibles par tous les internautes. Ce n’est pas très compliqué, la seule chose qui prend du temps c’est de redimensionner les photographies et d’insérer un filigrane de copyright (nous reviendrons sur l’automatisation de ces deux manipulations dans un autre article). Voilà un exemple de site obtenu avec Imagevue.

Maintenant que le site est prêt, allez sur le backoffice d’Imagevue et créez un nouveau dossier (Create new Folder dans la partie Folder actions). Une boîte de dialogue vous demande le nom du dossier à créer. Renseignez le nom et la description du dossier, puis cliquez sur Save. Vous êtes prêt à insérer les photos converties dans ImageVue. En bas à droite, il y a une zone baptisée Folder upload. Cliquez sur le bouton UPLOAD FILE.

Il vous suffit maintenant de localiser le répertoire de votre ordinateur contenant les images converties et de les sélectionner par lot de 400 photos maximum. Ce téléchargement peut être long (cela dépend de la vitesse de l’ordinateur et de la bande passante de votre connexion Internet).
Recommencez cette opération jusqu’à ce que la totalité des photos soient copiées. Attention à ne pas sélectionner deux fois les mêmes. Une fois que l’opération est complète, les photos apparaissent toutes en mode réduit, cliquez sur Hide this folder dans la zone Folder actions afin de rendre invisible le dossier. Puis cliquez sur Logout dans le menu du haut.

Mettre en place la sécurité

Voilà, il ne reste plus qu’à copier les fichiers .htaccess et .htpass dans le répertoire à protéger. L’opération prend deux minutes au moyen d’un logiciel de FTP comme FileZila par exemple.

  • Le fichier .htaccess explique où se trouve le fichier de mots de passe et indique comment doit se comporter le navigateur afin de laisser néanmoins accès aux appels internes effectuées par Imagevue.
  • Le fichier .htpass contient les mots de passe, celui du photographe et celui des clients.
    L’article suivant explique comment procéder pour crypter les mots de passe.

Exemple de fichier .htaccess

Voici le code source du fichier .htaccess.
AuthUserFile indique le chemin complet où se trouve le fichier .htpass.
Attention, le Allow from .votre_site.com (le point devant votre_site est important) en fin de code a pour objectif de permettre au logiciel de fonctionner, sinon impossible de voir les pages…

AuthUserFile /home/xx_compte_xx/www/votre_site.com/imagevue/content/nom_du_dossier_a_securiser/.htpass
AuthGroupFile /dev/null
AuthName "Identification obligatoire"
AuthType Basic
<limit GET POST>
require valid-user
</limit>

Satisfy any

Order Deny,Allow
Deny from all
Allow from .votre_site.com
Voici des photos protégées par notre procédé

Utilisateur : test
Mot de passe : test

Besoin d’aide ? Contactez-nous.
]]> http://www.xahutu.com/une-plate-forme-securisee-pour-les-photographes/feed/ 0