Semageek » contenu

Retour de l’E1 : un Evènement Web à Toulon

Olivier Despont — Tue, 08 Jun 2010 09:11:35 +0000

Le 4 juin 2010, c’est tenu un Évènement Web à Toulon : l’E1. Je me suis donc rendu à cet évènement afin d’élargir mes connaissances dans le domaine du web. Je profite donc d’un billet un peu off-topic pour vous résumer ma journée riche en rencontres sous le soleil du Sud.

Pourquoi l’E1 pour Semageek

A la base cette réunion est pour Semageek une occasion de rencontrer des acteurs du web IRL, mais c’est aussi un moyen d’accélérer certaines prises de contact et de pouvoir tisser des liens rapidement entre divers intervenants d’internet. C’est l’occasion pour Semageek de présenter son projet et de montrer une sorte de présence dans un monde déjà bien remplit.

Les conférences

Durant le déroulement de la journée, plusieurs conférences sont au programme dans trois salles : Une salle de conférence principale et deux Ateliers sur le principe de la participation entre les intervenants et les participants.

Les thèmes abordés sont riches et l’on retrouve des sujets comme : les réseaux sociaux et communautés, la gestion de e-réputation, le référencement et le contenu, l’ergonomie du web ou encore tout un panel sur le financement du web.

Une grosse partie des conférences traite aussi les sujets du e-commerce, ou encore E-marketing et la publicité en ligne ainsi qu’un chapitre sur les nouveaux moyens de communication comme les périphériques mobiles.

Réseaux Sociaux et communautés

A vrai dire, nous ne pouvons plus ignorer les réseaux sociaux, leur diversité nous laisse un choix immense pour les intégrer. Ensuite on aime où on aime pas tel ou tel réseau social. A mon avis, comme la plupart des intervenants de cette conférence, Twitter semble sortir du lot, mais comment ignorer Facebook qui réalise des records de visites.

Frédéric Krebs (Allociné) nous parle alors du bouton « J’aime » de Facebook. Il nous explique que le résultat attendu par ce type de bouton n’est pas forcement au rendez-vous, car il rajoute en finalité qu’une ligne sur le profil, bien vite noyé au milieu de la timeline et sans contenu supplémentaire.

Contrairement, la fonction « Partager » de Facabook permet, en plus de partager un lien, de rajouter du contenu comme une vignette ou un commentaire. Et l’impact et bien plus rentable.

Ergonomie du Web

Au niveau de l’ergonomie du web, cet atelier ne m’a pas forcement appris de choses nouvelles, mais m’a beaucoup réconforté dans certaines lignes directives que je m’impose de suivre à Semageek. Cet atelier m’a aussi permis de voir, que même si je connais la théorie, il y a toujours des points à améliorer en pratique qui sont essentiels à une lecture correcte du site.

Au niveau de l’ergonomie d’un site web il faut déjà prendre en compte la résolution de l’écran du lecteur, qui bien souvent ne dépasse pas le 1024×768 en majorité, donc une fois les différentes barres de navigation enlevé, on doit compter sur une résolution utile de 1000×600 pixels où doit se situer la majorité du contenu.

Compte tenu de ce principe, la barre de navigation principale doit donc plutôt être situé en entête (header) pour être bien visible. Une utilisation en colonne latérale peut être néfaste au niveau de la navigation interne, principalement en fonction des résolutions rencontrées.

Au niveau des liens (clickable) il faut aussi clairement les identifier, un lien qui ne ressemble pas à un lien par convention devient vite trop noyé dans le texte et ne rapporte pas de réel retour. Il faut dont utiliser majoritairement une typographie propre aux liens (souligné). Il en va de même avec les boutons clickables qui doivent ressembler à un bouton pour être clairement identifié par l’utilisateur.

Au niveau des formulaire de données, il faut privilégier un label positionné en haut à gauche du champ à renseigner, mais il faut aussi supprimer le bouton » old-school » de remise à zéro du formulaire (très néfaste). Pensez aussi à réduire les différentes étapes de validation d’un formulaire pour privilégier un formulaire one-shoot en une seule page avec une numérotation et une identification claire des étapes. Pour le bouton de validation, la couleur verte est préconisée, car rassurante pour l’utilisateur et à positionner en bas à droite de préférence.

Un autre point de cet atelier porte sur la police de rédaction et bien qu’il faille donner une identité par le design à son site, il est conseillé d’utiliser des polices de caractères standards disponible de base chez les lecteurs, pour ma part j’utilise du Verdana qui reste très visible même en taille petite. Pour information, il est préconisé d’utiliser une police proche de 14pts pour une ergonomie meilleure et couvrant la majorité des tranches d’ages.

L’autre point intéressant est la validation de votre site en blind-test, pour cela il suffit de réaliser un test avec une personne ne connaissant pas votre site et de filmer ses réactions lors de la navigation en incrustation de vidéo. Il suffit alors de relire la vidéo calmement pour observer des habitudes de navigation surement différentes des vôtres.

Référencement et Contenu

Un sujet très intéressant, qui nous rappelle les deux techniques de référencement qui sont pratiquées sur le marché.

Avec d’un côté une technique de référencement Black Hat SEO, qui permet d’obtenir de bons résultats rapidement, mais qui devient très vite éphémère lorsque que Google la détecte. Cette technique utilise donc tout ce qui est prohibé par les règles du SEO durable, mais permet de faire du référencement à la barbare au détriment du nom de domaine. Idéal pour faire du fort trafic à court terme sur un nom de domaine jetable.

L’autre technique, en opposition, la White Hat SEO, permet d’effectuer un référencement durable. Elle est plus longue à mettre en place, mais à terme, elle est beaucoup plus pérenne pour effecteur un référencement de qualité.

David Degrelle nous explique que la nouvelle tendance du SEO s’oriente plus vers du Pink SEO, histoire de ne pas trop s’établir dans les clichés extrêmes de ces deux techniques.

Les conférences off topic

Pour ma part l’E1 est une aussi occasion aussi de pouvoir établir des discutions sur la thématique du web avec différents intervenants sur le coin d’une table ou encore sur la terrasse. Ces discussions sont bien souvent fortes en enrichissements personnels.

Sans organisation précise, j’ai retrouvé autour d’un café Didier Sampaolo, Nicolas Deschamps et Mickael Bertrand, avec qui j’ai passé une journée agréable, sans prises de têtes et surtout avec une bonne dose de délire tout au long de la journée. Le sujet de nos conversations est resté dans le web, mais avec différences approches et divers points de vue fort enrichissant.

J’ai aussi pu rencontrer Fabien Thomas qui est une personne dont j’apprécie le travail personnel et Pascal Cataye de DaGhostProd qui a réalisé de logo de Semageek. Il faut dire que la Team Niçoise était présente et j’ai d’ailleurs fait connaissance avec Damien Faure, qui est une personne très intéressante et dont j’ignorais sa culture professionnelle.

J’ai croisé aussi Mar1e (PinkSEO) avec qui le courant est bien passé et j’ai aussi discuté avec David Degrelle (1ère Position) avec de long débats philosophique sur les META KEYWORDS et les stratégies de référencement.

Entre deux, une petite discussion avec Hervé Bourdon (Oxatis) m’a réconforté sur mon optique de e-commerce, avec la règle essentielle numéro 1 : « Ne jamais travailler pour un ami ! ».

J’ai enfin rencontré Jérôme Neuvéglise (Sph3re), qui est un voisin géographique et avec qui j’échangeais quelques tweets, le courant et bien passé aussi.

Puis j’ai croisé Dugomo qui « Dis du bien » et qui est vraiment fidèle à ses vidéos border-lines.

J’ai aussi croisé des personnalités de scène web françaises comme Eric Dupin (Presse Citron), Jean François Ruiz (Poweron) ou Olivier Ruffin (Veille Perso) avec qui j’aurais aimé discuter un peu, mais faute de temps et peut être pour ne pas faire mon troll, je n’ai pas trouvé l’occasion opportune pour cela, dommage.

Conclusion

Pour une fois qu’un événement web se déroule dans le Sud, cela aurait dommage de le rater. Cet évènement organisé par 3.117 et TVT Innovation fut vraiment une réussite et j’en suis rentré très ravit de part la qualités des conférences et les rencontres effectuées. Une belle initiative à reproduire l’année prochaine.

PictPocket : un plugin WordPress qui identifie et bloque les voleurs de contenu.

Olivier Despont — Fri, 26 Jun 2009 23:05:43 +0000

Introduction :

La plupart des blogueurs sont confrontés à un problème bien connus, le hotlinking.
Le hotlink (traduction littérale : lien à chaud) c’est le fait de poster une image sur site A (le voleur) tout en la laissant sur un site B (en occurrence le votre), la conséquence principale est que c’est le possesseur du site B qui se voit amputé la bande passante liée au trafic de ses images vers le site B, ainsi que les divers frais lié au trafic.
La principale alternative au hotlink, c’est de protégé ses images via une modification du fichier Htaccess. L’avantage est que c’est un filtre robuste qu’il faut sans cesse mettre à jour pour autoriser ou bannir certains sites. En effet certains robots, comme Google Bot Images, utilisent une plénitude d’adresses IP qu’il faut ne faut pas filtrer si l’on souhaite être référencé correctement.

Pictpocket.

Le principe.

Le principe de PictPocket est très simple, à son initialisation il modifie le fichier htaccess afin de rediriger toutes les images vus par une source extérieur au blog vers un moteur générateur d’images en php.
1. Le moteur, dans un premier temps, se contente seulement de lister les hotlink dans la base de données et vous en informe via une page dans la Console d’Admin de WordPress.
2. Il s’offre à vous plusieurs choix :
• Autoriser le site de manière permanente : Le site sera donc inclus dans le fichier htaccess et il ne sera plus filtré par le moteur de PictPocket, l’accès aux images de votre bloc sera débloqué totalement.
• Bloquer le site : Chaque fois qu’un site bloqué voudra accéder à vos images, il affichera une image de remplacement arbitrairement choisit afin de dissuader les hotlinkeurs.

Les avantages.

Par rapport à une méthode brute de filtrage par Htaccess, PictPocket vous informe de la provenance des hotlinks, souvent associé à un vol de contenu total (articles et images). La gestion du filtrage est nettement plus facile que celle du fichier htaccess, car elle se configure entièrement via la console d’Admin.
Installation.
1. Téléchargez le plugin sur http://wordpress.org/extend/plugins/pictpocket/.
2. Décompresser l’archive et copier le répertoire pictpocket dans « /wp-content/plugins/ »
3. Activer le plugin.
4. Lancer la configuration automatique.

Utilisation.

Menu de Pictpocket

Le menu comporte 4 onglet : Overview, Autorisations, Hotlinks, Options, et Donation.

Overview : Synthèse

Cette page sert à configurer le fichier Htaccess et indique un récapitulatif du nombre de hotlinks traités. A l’initialisation du plugin, il faudra lancer une configuration automatique du plugin et le cas échéant, changer les droits d’accès du fichier Htaccess.

Autorisations.

Sur cette page, ce trouve touts les sites autorisés à accéder à votre contenu. Tous ces sites ne seront plus traités par PictPocket. Attention la syntaxe à utiliser est celle employée par les RewriteCond de fichier htaccess.
Vous pouvez ajouter manuellement ou supprimer des droits sur cette page.

Hotlinks : les Voleurs.

Sur cette page sont répertoriés tous les sites ayant accédés à vos contenus images via le moteur PictPocket. Ceux en gras sont les derniers découverts depuis votre dernière visite. Afin de simplifier un peu la liste, vous pouvez regrouper les hotlinks en 4 familles : Défaut, Masqué, Lien de confiance ou Moteur de Recherche.

Options.

Sur cette page, vous pouvez définir une image perso de remplacement pour les contenus bloqué, il suffit juste de donner son url complète (ex: http://monsite.com/download/mon_image.jpg). L’aperçu se fait en 200px par 200px, mais l’image de remplacement sera conservée dans sa taille originale.
Vous pouvez aussi définir un effacement automatique des hotlinks, en effet quand un contenu est bloqué et remplacé par une image de substitution, le site hotlinkeur, ne tarde pas à l’effacer.

Donation.

Et oui, avec tout le trafic et la bande passante que je vous ai fait économiser, vous pourriez me faire une donation.(;

Conclusion.

C’est un projet personnel que je dévelloppe seul, alors soyez indulgent avec les commentaires.

Merci de laisser en en commentaires, vos reports de bugs, vos demandes d’améliorations ou encore vos remerciements.