Archive for November, 2009

Adobe Flash : Comment créer une interpolation de forme et de mouvement

Monday, November 30th, 2009

Hello les geeks…

Tutoriel sur CS3 et CS4

Aujourd’hui je vous propose un petit avant goût de Flash.

Je vous guiderais premièrement sur un exercice qui vous permettra de créer une interpolation de forme.

Créer tout d’abord un nouveau fichier  adobe flash.

  • Commencez par renommer votre calque comme vous le souhaitez
  • Cliquer sur l’outil Ovale et dessiner dans votre zone de travail un cercle et sans contour.

Image 1

  • Puis allez dans le menu insertion => scénario => image clé
  • Une fois cette étape faite, sélectionner votre rond et supprimer le.
  • Vous allez maintenant créer la forme de destination, faite par exemple un carré de couleur jaune, et sans  contour.
  • placer votre curseur sur l’image de départ, allez dans Menu Interpolation et choisissez Forme

Image 2

  • Allez dans le menu contrôle, et cliquer sur Lire.

BRAVO, vous avez réussi à créer une interpolation de forme !!

L’exercice numéro 2 consiste à créer cette fois-ci une interpolation de mouvement ou autrement dit de morphing !

L’objectif principal étant de paramétrer une animation, par sa taille et sa cadence.

Alors,  commencez par créer un nouveau fichier Flash

  • vous allez tout d’abord changer la dimension de l’animation via le bouton “taille” et régler la hauteur à 150 px.
  • Faites un double clique sur l’outil main, puis régler la cadence dans la barre d’outil du bas et régler la sur 24.
  • Créez ensuite la forme de votre choix, par exemple un rond vert sans contour.
  • Votre rond est apparent, sélectionnez le et convertissez le en symbole. Ce qui est une étape indispensable pour créer une interpolation de mouvement.
  • Pour ceci, allez dans le menu MODIFICATION, convertir en symbole. Donnez un nom à ce symbole et coché “clip”.
  • Votre objet est maintenant une occurrence de symbole. La prochaine étape sera d’animer cette occurrence.
  • Dans le menu Insertion, sélectionnez scénario, puis image clé et déplacer l’objet vers la droite.
  • Sélectionner la première image et choisissez dans interpolation : Mouvement
  • Appuyez sur entrée et vous verrez votre objet se déplacer

Image 3

Voici un petit tutoriel rapide mais qui vous donnera les clés pour comprendre ce logiciel !

A bientôt les loulous !

Tutoriel création d’une page d’accueil avec des boutons roll-over

Friday, November 27th, 2009

Niveau : débutant

Logiciel : Dreamweaver CS3

Nous allons voir comment créer une page d’accueil, de manière assez simple, à un site internet. J’ai pris l’exemple de la marque Loreak Mendian qui tend à se faire connaître depuis quelques années. Marque espagnol, son esprit est plutôt sobre.

Etape 1 : Créer la base sur Illustrator

Commencez par créer à l’aide d’Illustrator un modèle en 1024×768 pixels. Placez en haut à gauche le logo Loreak Mendian ou celui de votre choix. Tracez ensuite 7 tranches comme dans l’exemple ci-dessous. Prenez bien garde à créer trois tranches de même taille au milieu de la page. Ces tranches seront l’emplacement des images nous permettant d’accéder aux divers pages du site. Enregistrez pour le Web et les périphériques dans la barre du menu Fichier. Une fenêtre s’ouvre alors vous proposant différents paramètres prédéfinis. Choisissez Jpeg Haute puis cliquez sur enregistrer. Choisissez comme type Html et Images puis enregistrez-le dans un document que vous aurez créé exclusivement pour ce site internet. Appelons le « siteloreakmendian ».

1

Etape 2 : Déclarer un nouveau site sur Dreamweaver

Passons désormais à Dreamweaver. Ouvrez donc le programme et dans la barre du haut choisissez le menu site > nouveau site. Une fenêtre s’ouvre, choisissez l’onglet avancé en haut à gauche. Rentrez le nom du site et indiqué l’emplacement du dossier racine locale que vous avez créé précédemment « siteloreakmendian ». Vous découvrirez qu’un dossier images s’est créé à l’intérieur c’est celui-ci que vous indiquerez comme Dossier des images par défaut. Validez.

2

Etape 3 : Convertir les tranches en région modifiable

A droite de votre plan de travail, dans le menu fichiers locaux, sélectionnez le fichier siteloreakmendian.html. Votre page tel que vous l’aviez créé sur Illustrator s’ouvre alors. Avec l’outil sélectionner (icône flèche) en bas à droite de votre plan de travail vous pouvez désormais sélectionner les différentes tranches que vous aviez créé sur Illustrator.

Sélectionner la tranche numéro 3 puis dans la barre du haut insertion > objets de modèle > région modifiable. Dreamweaver vous indique alors qu’il convertira automatiquement ce document en un modèle. Répéter l’opération pour les tranches 4 et 5.

3

Etape 4 : Créez des boutons roll-over

Utilisez 3 images différentes de même taille. J’ai pris les miennes sur le site de Loreak Mendian. Enregistrez les pour le web grâce à Illustrator ou Photoshop. Faites en 2 version de chaque, une sans texte et une avec texte pour expliquez aux internautes ou ils seront redirigés. J’ai choisi de rediriger l’internaute vers la collection, le catalogue et le blog. Placez toutes ces images dans le dossier image du dossier que vous avez créé « siteloreakmendian ».

Votre document Dreamweaver ressemble désormais à cela :

4

Sélectionnez Editregion1 avec votre curseur et puis dans l’onglet commun > image > image survolée. 5

Une fenêtre s’ouvre rentrez alors le nom de l’image, et sélectionnez dans le dossier images de votre dossier « siteloreakmendian » l’image du catalogue sans le texte pour l’image originale, puis l’image catalogue avec le texte pour l’image survolée comme dans l’exemple ci-dessous. Répétez l’opération pour EditRegion2 et EditRegion3 avec les images collection et blog. Vous avez désormais une page d’accueil avec des boutons roll-over.

6

Pour aller plus loin et une fois que les autres pages de votre site seront créées vous pourrez ensuite tirez des lien dans le menu situé en dessous du plan de travail allant vers le catalogue, la collection et le blog.

le rôle des réseaux sociaux en communication interne

Wednesday, November 25th, 2009

LES RESEAUX SOCIAUX : outils de communication interne Pour communiquer efficacement il faut être là ou soLES RESEAUX SOCIAUX : outils de communication interne Pour communiquer efficacement il faut être là ou sont les individus et aujourd’hui c’est sur le web qu’ils se mobilisent. Sur la toile, les plates formes sociales augmentent en nombre de manière significative en touchant toujours plus d’individus différents. Leur principale qualité ? Les réseaux sociaux savent s’adapter aux individus en se spécialisant. Les plus connus, les plates formes grand public concernent Twitter, Facebook, Digg, Myspace, Friendfeed, et semblent intéresser depuis peu les entreprises et agences de communication. En effet, il n’est pas surprenant de trouver sur facebook des profils de marques d’entreprises ou d’évènements. Cette nouvelle manière de communiquer semble séduire de plus en plus d’entreprises qui voient dans ces réseaux sociaux un bénéfice pour leur notoriété. -Comment les réseaux sociaux trouvent une place primordiale parmi les outils de communication interne ? Deux types de réseaux sociaux concernent les entreprises. Tout d’abord, les réseaux exclusivement professionnels tels que Lincked, In, Viadeo, Xing, Piwie, 6énergies. Sur ces plates-formes professionnelles, la notion de partage et d’échange est essentielle. Les professionnels donnent pour recevoir des recommandations, des conseils, des propositions, en somme des informations qui ont une valeur. Pour un chef d’entreprise, ces réseaux, s’ils sont correctement et efficacement utilisés peuvent faciliter le recrutement de nouveaux collaborateurs et la recherche de nouveaux clients et partenaires. Le second type de réseaux sociaux sur lesquelles sont présentes les entreprises concernent les plates formes grand public énumérées dans le premier paragraphe. Communiquer sur ce type de réseaux c’est une façon pour les entreprises de trouver des clients qu’elles ne trouvent pas avec les outils de communication traditionnels. Mais derrière le fait de communiquer se cache le souhait de diffuser des idées qui sauront toucher les consommateurs ou clients. Pour les entreprises il ne s’agit pas de faire de la publicité sous formes de fenêtres, surtout pour des taux de clics inférieurs à 2%.Au contraire, les applications disponibles sur Facebook donnent la possibilités de diffuser des messages ou encore de créer des tests à tendance publicitaire tels que : « quel parfum êtes-vous ? », « quel marque vous représente ? » Ces idées véhiculées ont de la valeur ajoutée pour les utilisateurs et sont donc favorable pour la notoriété d’une entreprise. En temps de crise, utiliser des réseaux sociaux c’est une manière de communiquer à moindre frais. Afin d’obtenir de meilleurs résultats ou au moins les mêmes , la communication via des plates formes sociales a su prouver son efficacité. En fonction des profils psycho-sociologiques présents sur les plates formes disponibles, les entreprises ciblent les espaces où elles vont pouvoir diffuser leurs idées. Pour cela elles utilisent principalement des outils comme des invitations à des évènements, des créations de discussions et de groupes, ou encore la diffusion de messages et d’articles. Tous ces échanges favorisent la création d’un climat de confiance qui facilitera ensuite la prise de contacts et les négociations. Mais s’afficher sur des plates formes grand public n’est pas une mince affaire pour les entreprises, qui doivent apprivoiser ces espaces de contact. La difficulté qui se pose désormais c’est comment choisir et cibler efficacement des plates formes en fonction de profils sociaux type alors que la vocation principale des réseaux sociaux est le rassemblement d’un maximum de personnes ? nt les individus et aujourd’hui c’est sur le web qu’ils se mobilisent. Sur la toile, les plates formes sociales augmentent en nombre de manière significative en touchant toujours plus d’individus différents. Leur principale qualité ? Les réseaux sociaux savent s’adapter aux individus en se spécialisant. Les plus connus, les plates formes grand public concernent Twitter, Facebook, Digg, Myspace, Friendfeed, et semblent intéresser depuis peu les entreprises et agences de communication. En effet, il n’est pas surprenant de trouver sur facebook des profils de marques d’entreprises ou d’évènements. Cette nouvelle manière de communiquer semble séduire de plus en plus d’entreprises qui voient dans ces réseaux sociaux un bénéfice pour leur notoriété. -Comment les réseaux sociaux trouvent une place primordiale parmi les outils de communication interne ? Deux types de réseaux sociaux concernent les entreprises. Tout d’abord, les réseaux exclusivement professionnels tels que Lincked, In, Viadeo, Xing, Piwie, 6énergies. Sur ces plates-formes professionnelles, la notion de partage et d’échange est essentielle. Les professionnels donnent pour recevoir des recommandations, des conseils, des propositions, en somme des informations qui ont une valeur. Pour un chef d’entreprise, ces réseaux, s’ils sont correctement et efficacement utilisés peuvent faciliter le recrutement de nouveaux collaborateurs et la recherche de nouveaux clients et partenaires. Le second type de réseaux sociaux sur lesquelles sont présentes les entreprises concernent les plates formes grand public énumérées dans le premier paragraphe. Communiquer sur ce type de réseaux c’est une façon pour les entreprises de trouver des clients qu’elles ne trouvent pas avec les outils de communication traditionnels. Mais derrière le fait de communiquer se cache le souhait de diffuser des idées qui sauront toucher les consommateurs ou clients. Pour les entreprises il ne s’agit pas de faire de la publicité sous formes de fenêtres, surtout pour des taux de clics inférieurs à 2%.Au contraire, les applications disponibles sur Facebook donnent la possibilités de diffuser des messages ou encore de créer des tests à tendance publicitaire tels que : « quel parfum êtes-vous ? », « quel marque vous représente ? » Ces idées véhiculées ont de la valeur ajoutée pour les utilisateurs et sont donc favorable pour la notoriété d’une entreprise. En temps de crise, utiliser des réseaux sociaux c’est une manière de communiquer à moindre frais. Afin d’obtenir de meilleurs résultats ou au moins les mêmes , la communication via des plates formes sociales a su prouver son efficacité. En fonction des profils psycho-sociologiques présents sur les plates formes disponibles, les entreprises ciblent les espaces où elles vont pouvoir diffuser leurs idées. Pour cela elles utilisent principalement des outils comme des invitations à des évènements, des créations de discussions et de groupes, ou encore la diffusion de messages et d’articles. Tous ces échanges favorisent la création d’un climat de confiance qui facilitera ensuite la prise de contacts et les négociations. Mais s’afficher sur des plates formes grand public n’est pas une mince affaire pour les entreprises, qui doivent apprivoiser ces espaces de contact. La difficulté qui se pose désormais c’est comment choisir et cibler efficacement des plates formes en fonction de profils sociaux type alors que la vocation principale des réseaux sociaux est le rassemblement d’un maximum de personnes ?

Le référencement, astuces pour bien le réussir.

Tuesday, November 24th, 2009

Bonjour à tous,

Comme vous le savez, il ne suffit pas qu’un site web soit beau pour qu’il soit souvent visité, surtout si en plus l’annonceur n’est pas connu.

En effet, un élément très important pour accroître la notoriété et le nombre de visites sur un site web est le référencement. Très souvent oublié ou peu utilisé, le référencement permet cependant d’obtenir une meilleure visibilité et gagner de nombreux internautes.

 

I Le référencement, kesaco ?

Pour commencer, nous allons définir ce qu’est le référencement.

Le référencement consiste à inscrire un site web sur des annuaires généralistes et/ou thématiques pour être classer au mieux dans les moteurs de recherches et ainsi gagner en visibilité face à sa cible.

En effet, l’objectif est d’arriver en tête lorsqu’un internaute tape un mot clef sur un moteur de recherche tel que Google, yahoo… Ceci est extrêmement important car la majorité des internautes fonctionnent de cette manière. De nos jours, presque plus personne ne tape directement une adresse url, mm s’il la connaît. Presque tous fonctionnent avec des mots clefs sur des moteurs de recherches, d’où l’importance pour un annonceur d’avoir fait référencé correctement son site web.

Le référencement permet donc d’accroître sa notoriété, mais aussi améliorer son image. Lorsque l‘on voit un site web dans les premiers, on considère souvent que c’est parce qu’il est meilleur que les autres.

 

II Le référencement, como ?

L’objectif maintenant est de voir comment faire un bon référecement. Nous allons donc détailler maintenant les différentes technique pour faire gagner son site en visibilité. 

Je tiens à préciser que certaines informations ci-dessous ont été prises du site web : www.referencementweb.com, un site très intéressant que je vous conseille d’aller le visiter !

1) Achetez un nom de domaine

1.1- Achetez un nom de domaine où votre nom est sans faute

Cela parait logique, mais il faut bien commencer par là! Si votre le nom de votre site est referencement, achetez le nom de domaine www.referencement.com. Préférez l’extension de nom de domaine en “.com”. En effet, cette extension la plus médiatisée, est la plus connue et la plus facile à retenir par les utilisateurs. Cependant, si cela est possible, optez pour l’extension en “.com” mais aussi qui correspond a pays de votre habitation (”.fr” pour la France, “.ca” pour le Canada, “.eu” pour l’Union Européenne…) qui vous permettra d’obtenir plus d’internautes. Pour les organismes ou sociétés à but non lucratif, mieux vaut privilégier  ”.org” qui donnera plus de crédibilité. 

1.2- Privilégiez un nom de domaine “exact-match”

Cela consiste à réserver un nom de domaine qui correspond très exactement au terme de recherche ciblé par le site Web et son référencement. Par exemple, un site Web sur le sujet du “référencement Web” a tout avantage à résider sous l’adresse www.referencementweb.com. Ces domaines à mots-clés que l’on appelle des “génériques”  sont un avantage considérable par rapport à la concurrence.

1.3- Achetez des noms de “domaines multiples”

Nombreux internautes écrivent rapidement leurs mots clefs dans les moteurs de recherche et peuvent ainsi souvent faire des fautes. Afin d’arrriver toujours en première proposition, certains hébergeurs vous proposent des noms de domaines multiples. Cela signifie que si l’internaute écrit “referancement” il arrivera tout de même sur votre site. Ces nom de domaines multiples peuvent être considérés comme des canaux parallèles, des pointeurs vers votre site. Cela est utile lorsque votre nom de domaine est relativement difficile à écrire ou lorsqu’il possède des traits d’union que l’internaute oublie souvent de mettre.

Cependant, il est important de préciser qu’il ne faut pas enregistrer trop de noms de domaines multiples, certains moteurs de recherche pouvant vous sanctionner, donc mieux vaut ne pas trop en abuser !

1.4 Achetez un vieux nom de domaine

Les noms de domaines enregistrés depuis longtemps et n’ayant jamais fait l’objet de pénalités jouissent d’une plus grande confiance des moteurs de recherche qu’un nom de domaine nouvellement enregistré. Il n’est pas rare de découvrir de vieux sites Web pratiquement à l’abandon trônant les résultats de recherche sur certains mots-clés. Il suffit souvent de contacter le propriétaire et de lui faire une offre raisonnable. Quand le budget le permet, un vieux nom de domaine peut-être un investissement très rentable. Attention, il faut cibler les vieux site Web traitants de sujets à tout le moins apparentés à celui de votre projet. 

2) Modélisez l’architecture de votre site Web selon les mots-clés de votre secteur

Il est important pour faire un bon référencement hiérarchiser sur trois niveaux les mots clefs : primaires, secondaires et tertiaires. Il s’agit en fait d’une simple hiérarchisation de contenu, mais utilisant ici de véritables mots-clés cherchés dans les moteurs de recherche. Par exemple, “référencement > referencement organique > conseils de référencement”. Cette façon d’organiser le contenu à l’aide de véritables mots-clés utilisés par les internautes vous assure une forte pertinence à l’intérieur d’un même sujet tout en ciblant des mots-clés qui ont un volume de recherche. 

3) Un contenu pertinent

3.1 – Elaborez un contenu hors du commun

Le contenu unique de haute qualité est l’avantage concurrentiel le plus naturellement puissant qui soit. Donc soyez inspiré !

3.2- Publiez régulièrement du contenu 

Le fait de publier avec régularité vous attirera la visite soutenue des robots d’indexation, ce qui est un avantage. De plus, d’un point de vue strictement marketing, vous encouragez vos visiteurs à revenir. Par ailleurs, certaines requêtes sont particulièrement surveillées par les moteurs de recherche et les positionnements pour ces mots-clés sont plus sensibles à la fraicheur du contenu. 

3.3- Privilégiez des pages avec un minimum de 200 mots

S’il est utile de publier régulièrement, il l’est plus encore de le faire en quantité suffisante. Pour bien définir le sujet d’une page et assurer de recevoir une bonne note de la part des algorithmes de pertinence des moteurs de recherche, un minimum de 200 mots par page devrait être visé. 

3.4- Gardez le sujet de votre site à l’intérieur d’un même thème

Sauf de rares exceptions, l’éparpillement d’un site Web sur de multiples sujets nuit fortement à son positionnement. Une très grande taille (nombre de pages très élevé) jumelée d’une forte autorité (nombre très élevé de liens entrants en provenance de sources de confiance) peut permettre à un site Web d’obtenir de bons positionnements sur une grande variété de sujets. 

3.5- Ciblez un seul mot clé ou phrase par page

Optimisez chaque page pour un seul mot-clé. Préférez une nouvelle page plutôt que de trop élargir le sujet d’une page existante. Par ailleurs, notez que dans certaines circonstances, l’optimisation de 2 pages sur le même mot-clé peut rapporter gros par l’affichage d’une double mention dans les résultats de recherche. 

3.6- Mettez toujours vos mots clés dans le titre de la page 

Conseil simple mais toujours utile !  Le mot-clé doit figurer dans la balise <title> … </tile> de votre page et le plus au début de la phrase que possible.

3.7- Mentionnez le mot clé dans l’URL de la page

Il est fortement conseillé d’utiliser le “URL rewriting” si votre site est dynamique afin d’insérer facilement vos mots-clés dans l’URL ‘une page. Cette technique permet de créer des URL intelligibles et optimisées. Sinon vous pouvez toujours inclure vos mots-clés dans les noms de répertoires et fichiers HTML comme par exemple http://www.motcleprimaire.com/mot-cle-secondaire/mot-cle-tertiaire.html

3.8- Utilisez des variations de vos mots clés

Utilisez les variantes de vos mots-clés dans le texte du corps de page comme par exemple les synonymes, appellations populaires, acronymes, etc., mais de façon naturelle et sans abuser. Le texte doit demeurer lisible, utile et de haute qualité. N’en faites surtout pas une décharge à mots-clés.

3.9- Utilisez vos mots clés dans les alternatives

Incluez vos mots-clés dans les attributs alt des images ou objets, dans l’attribut title des liens et toute autre opportunité de ce type. Faites-le naturellement dans un but descriptif et non pour le simple bourrage de mots-clés.

4) Pointez des liens de l’extérieur du site vers vos pages les plus importantes

Gardez en tête qu’un lien transmet une partie du PageRank de la page sur laquelle il se trouve à la page vers laquelle il pointe. C’est donc à dire que vous avez un certain contrôle sur la circulation du PageRank à l’intérieur de votre site. Pointez des liens vers vos pages importantes pour canaliser ainsi volontairement le PageRank de votre site sur les pages que vous avez choisies. 

5) Obtenez des liens vers votre site en provenance d’autres sites

Obtenir que d’autres sites Web pointent des liens vers votre site est un enjeu capital du référencement. Sans un minimum de liens entrants, votre site n’ira nulle part dans les moteurs de recherche, particulièrement sur des termes compétitifs.

6) Faites enregistrer votre site dans le répertoire Yahoo

Le répertoire Yahoo est un des plus vieux et des plus respectés du Web. L’inclusion dans ce répertoire n’est pas gratuite et même un peu cher à $399 USD par année, mais le répertoire affiche PR8 et constitue un puissant stimulant pour votre positionnement. Si le budget le permet, le répertoire Yahoo est un avantage.

 

III Le référencement, ce qu’il ne faut pas faire !

1) Evitez la duplication de contenu

La duplication de contenu est un problème récurrent sur le Web. Les moteurs de recherche, pour des raisons évidentes, évitent à tout prix de servir des résultats identiques ou trop similaires pour une même requête. Premièrement, la création de contenu nouveau et unique est une solution incontournable en vue de ne pas ressembler à quelque chose qui existe déjà. Mais attention aussi aux possibles duplications à l’intérieur même de votre site. Le cas le plus fréquent survient quand une page est disponible sur 2 ou plusieurs URL à la fois

2) Évitez de trop faire d’échanges de liens

Lier réciproquement deux sites Web comporte aujourd’hui des risques. Ce fut à une époque la panacée en terme de campagne de liens et c’est toujours une solution acceptable dans la limite du raisonnable. Ne vous engagez surtout pas dans l’échange de lien massif avec n’importe qui, n’importe quoi. Quelques liens réciproques avec des sites Web de qualité et portants sur des thèmes et sujet apparentés au vôtre peuvent s’avérer une stratégie d’acquisition de liens efficace. Mais attention, la ligne est mince et dès que ça ne semble plus “naturel”, vous risquez de voir votre site frappé d’une pénalité. 

3) Faire attention à Javascript

Les robots d’indexation n’exécutent pas le JavaScript. Si votre navigation dépend de cette technologie ou pire que le contenu de votre site est généré par JavaScript, votre site risque de comporter de grandes parties invisibles au moteurs de recherche. JavaScript est une technologie efficace au niveau de l’interactivité et permet d’améliorer l’expérience des utilisateurs. Assurez-vous seulement que tout le contenu soit disponible sans JavaScript. 

 

 

Et voici pour aujoud’hui ! Normalement, avec toutes ces informations, vous devriez avoir un site web correctement référencé. 

Et n’hésitez pas à rajouter quelques astuces si vous en avez !!

 

 


Utilisation des vidéos en streaming

Monday, November 23rd, 2009

Hé oui, on veut toujours insérer des vidéos dans des présentations powerpoint, commenter des publicités ou simplement uploader une vidéo trouvée sur youtube sur son site perso…

Mais allez savoir pourquoi, ça ne marche jamais.

Dans le powerpoint, la vidéo n’apparaît pas; le lecteur refuse de lire la publicité et de toute façon, on sait même pas télécharger une vidéo sur Youtube. FAUX. Car je suis là.

Tuto rapide et facile à mettre en oeuvre, pratique, et qui mérite une bonne note, by Kévin.

Quatre étapes.

1) Trouver la vidéo
2) La télécharger
3) La convertir
4) L’intégrer

1) Trouver la vidéo

Ce point paraît idiot. Mais vous l’êtes, sinon je n’aurai pas besoin de faire ce tuto.

E2videmment, Youtube, Dailymotion, Viméo, Google Vidéo, bref, tout ça c’est facile. Mais il existe des site spécialisés !
J’ai donc décidé de prendre une publicité sur Culture Pub pour la démonstration.

Hop, je vais sur le site avec Firefox (et oui, Firefox, c’est important pour la suite, car c’est le plus simple) et je choisis ma publicité.2

Une publicité coquine, forcément.

2) Téléchargement de la publicité

Les choses sérieuses commencent. Encore que.
Il s’agit maintenant de télécharger cette publicité en streaming.

En temps normal, j’aurai pensé PC, mais comme je ne suis pas seul au monde… On va éviter les logiciels. Il faut donc impérativement utiliser Firefox.

3

Nous allons installer un module à Firefox qui permettra de télécharger les vidéos en streaming. Plutôt que d’aller dans l’outil “module complémentaire”, qui semble corrompu par de mauvais add-on, je vous offre l’url directe :
https://addons.mozilla.org/fr/firefox/addon/3006

Cliquez sur “Ajouter à Firefox” (l’énorme bouton vert; bien vu 4l’aveugle), puis dans la fenêtre qui s’ouvre, cliquez sur “installer maintenant.”

Vous devrez ensuite redémarrer Firefox.

Ensuite, allez sur la page de votre vidéo, et cliquez sur l’icône juste à gauche de la barre d’URL; sélectionne5z la vidéo (elles portent souvent des noms étranges…) et le téléchargement se lance dans l’emplacement par défaut de Firefox (Outils > Options > Général > Téléchargement et sélectionnez l’emplacement voulu, si besoin.)

La plupart du temps, les vidéos sont au format .flv, c’est à dire flash. Pratique pour l’internet, pas du tout pour les présentations en cours.

3) Convertir la vidéo

Encore une fois, une méthode multi-plate formes sans installation aucune. Tout va se passer via internet, sur http://media-convert.com/convertir/

6 copie copie 2

Media Convert est très pratique, peut convertir une vidéo plusieurs fois et dans tous les sens. Il est même possible de faire un peu de découpage / montage vidéo, de convertir des fichiers de tous types ou presque d’ailleurs (peu pratique parfois, notamment niveau son, juste pour montrer que j’utilise ce site depuis des années et passer ainsi pour un pro.)

Quelques minutes plus tard…

ajax-loader

4) Intégration de votre vidéo dans une présentation .ppt ou un site internet

L’intégration de la vidéo dans un site sans passer par un lien permet non seulement d’échapper au lecteur Youtube de base (laid) pour pouvoir configurer le sien, mais également il assure une meilleure garantie de présence de votre vidéo, puisque sa présence de dépend que de vous, et non d’un autre site qui pourrait la modérer.

Mais le plus important : ne pas avoir l’air d’une buse en réduisant le powerpoint pour montrer une vidéo pendant une présentation. Il suffit donc d’intégrer la vidéo nouvellement créée dans le powerpoint. Dans une nouvelle diapositive, “insertion”, “film”, “film à partir d’un fichier.” Shift + F5.

Banco !

9 copie

“la qualité principale d’un mauvais site est qu’il fait mal aux yeux”

Thursday, November 19th, 2009

Refonte d’un site internet laid, obsolète, illisible !

Regarder par vous même via le visuel ci dessous !

page d'accueil site initial

J’ai trouvé ce site, enfin si l’on peut appeler cela « un site » en fouillant sur le net des sites, peu, voire très peu qualitatif ! et la morale de cette exercice est : « qui cherche trouve ».

C’est le site d’un tennis club situé dans la Ville de Matha. Ville apriori inconnue au bataillon, c’est pourquoi j’ai décidé de donner une seconde vie à ce club de tennis et à cette ville.

J’ai tout d’abord décidé de refaire le graphisme du site, et de créer une page d’accueil, puisqu’il n’en disposait pas réellement.

Le fond du site est de la couleur de la terre battue, et n’a pas de structure claire et définie.
J’ai donc pensé indispensable de recréer une ambiance liée au tennis :la terre battue, le joueur, les couleurs dynamiques et souvent utilisés sur les vêtements des joueurs.
Le message de cette page d’accueil pourrait être : Alliez sport et plaisir au tennis club de Matha.
La baseline : “sur la trace des champions” se représente sous deux formes.
- La première est simple : les champions sont passés par là, pourquoi pas vous ?!
- La seconde : le mot trace désigne la terre battue, chaque déplacement du joueur est matérialisé par une trace sur la terre battue.
On suit les traces des champions d’après leurs parcours et leurs traces !

J’ai tout d’abord commencé mon travail de relooking par la refonte d’une page d’accueil. (cf visuel ci dessous)

page d'accueil

Voici donc la page d’accueil de ce nouveau site. J’ai voulu mettre en avant une certaine dynamique puisque nous sommes dans le domaine du sport, de la compétition et du loisir.
Une page d’accueil sous les couleurs de la terre battue, de la mise en scène de joueurs de tennis en plein action. J’ai également inséré une barre de navigation en haut de l’image pour une facilité de déplacement à l’intérieur du site. Cette barre de navigation est présente et identique sur toutes les pages du site.
Le graphisme est simple, épuré et mets en avant les valeurs du tennis.  Le but de celui-ci est de permettre de trouver l’information de manière rapide et ciblée.

Exemple de la page Classement du site Initial:

Image 5

ET MA REPONSE EST :

Simple, claire et efficace !!
Plus besoin de vous abîmer les yeux pour chercher votre information !

Image 6

En espérant que le nouveau design graphique vous plaise davantage !!

VISITEZ L’INTEGRALITE DU SITE VIA : http://etudiants.lcf-lyon.org/lg0/www/index.html

americandad.fr

Wednesday, November 18th, 2009

Hello tutti !

Ce soir je vous propose le relooking du site français de la série American Dad : Une envie soudaine de voir la famille Smith ?  C’est ici.

Suite à cette petite incartade humoristique vous mourrez surement de savoir ce qu’il va advenir de ce site.

Tout d’abord un petit topo sur la série pour les non-connaisseurs :

American_Dad_logo

American Dad est une série télévisée satirique d’animation américaine diffusée depuis le 6 février 2005 sur le réseau FOX. En France la série est diffusée depuis le 7 novembre 2006 sur Canal + et désormais sur la chaîne TNT NRJ 12.

Cette série d’animation met en scène les mésaventures de la famille américaine Smith, habitant à Langley Falls, en Virgine.

Stan Smith, le père, est agent à la CIA, républicain, néo-conservateur, homophobe, raciste, pro-arme, pro-vie et admirateur du président George W. Bush. La fille, Hayley, étudiante de 18 ans, est au contraire très libérale. Le fils, Steve, est ado en manque de copine, et la mère, Francine, une femme au foyer opprimée. La famille abrite aussi un extraterrestre dépressif, porté sur la bouteille et recherché par la CIA, Roger, à qui Stan doit la vie lors d’une mission dans la Zone 51. La famille héberge aussi Klaus, un ex-skieur de fond olympique allemand, dont le corps a été échangé avec un poisson rouge par Stan, toujours lors d’une mission.

La série en est à sa 5ème saison, soit plus de 80 épisodes de 21 minutes.

Passons au vif du sujet : LE RELOOKING

americandad.fr est le site français de la série qui existe depuis plus d’un an et qui propose, entre autres, l’ensemble des épisodes en streaming.

Je suis partis d’un constat simple : Graphiquement le site actuel (ci-dessous) est beaucoup trop sobre, pas assez chaleureux et n’arrive pas à installer et à recréer l’univers de la série. Il était donc indispensable d’y remédier.

AD1

J’ai donc pris parti pour la mise en place d’une nouvelle page d’accueil qui ancrera plus profondément l’univers d’American Dad.

L’objectif est de mettre en avant les valeurs patriotiques du père (Stan) avec la présence des couleurs du drapeau américain (bleu, blanc, rouge) et les étoiles qui le compose.

Il était également impératif de présenter un site à l’aspect très épuré en parallèle avec les dessins de la série qui ne souffrent d’aucune fioriture.

La part belle est donc faite aux héros qui occupent quasiment un quart de la page d’accueil.

Dans ce cas aucun doute pour le fan, il est bien tombé sur le site qu’il cherchait.

Print - copie

Le style très sobre de la page d’accueil permet de trouver tout de suite l’information que l’on cherche contrairement à la version actuelle qui présente des informations de tous les côtés : Rubriques sous la bannière, dernières news, pubs et partenaires à gauche, dernières vidéos à droite … Elle met également moins en avant la possibilité de visionner les vidéos en streaming disponibles sur le site.

Le site étant positionné comme le site français d’American Dad, il doit permettre aux internautes de se renseigner et de s’informer (rubrique News et La Série), se divertir avec les vidéos en streaming (Episodes), et pouvoir s’imprégner intégralement de la série via la rubrique Wallpapers qui lui permettra de personnaliser son fond d’écran aux couleurs d’American Dad.

Chaque rubrique reprendra la même trame graphique que la page d’accueil, c’est-à-dire la bannière ci-dessous ainsi que les boutons.

Bannière

Un seul changement  par rapport à la page d’accueil : l’apparition d’un écran télé qui diffusera les informations, vidéos ou autres wallpapers en lieu et place des membres de la famille Smith. Vous remarquerez également le zoom du nom de rubrique sur lequel l’internaute a cliqué. Petits exemples :

page serie


page wallpaper


page episodes

Un Forum est également prévu pour les plus «mordus» qui se retrouve pour échange r sur de nombreux sujets. Crubriquese forum étant peu fréquenté et rarement mis à jour par les webmasters, j’ai choisi de placer le lien au sein de la bannière, ainsi seul les plus curieux prendront le temps de s’y rendre.

L’accès aux contacts et aux partenaires se fera par le biais des liens situés au côté de celui du Forum, ces informations étant généralement moins recherchées et moins utilisées par les internautes.

En conclusion : J’ai souhaité, à travers se relooking, mettre en avant le côté cartoon dépouillé de la série à travers une interface très sobre et très simple, l’internaute se rendant sur ce genre de site n’ayant aucune autre prétention que celle de vouloir se divertir sans contraintes.

Fireworks, ou comment faire des prototypes de sites web rapidement !

Tuesday, November 17th, 2009

 

Venant d’arriver depuis peu dans la famille Adobe avec la nouvelle version CS4, Fireworks est maintenant disponible à toute personne désirant créer rapidement un prototype de site web.


L’objectif de fireworks : créer un prototype de site web de manière simple et rapide, avec les liens permettant la navigation du site. Attention, en aucun cas le site créé sur fireworks n’a pour vocation d’être mis en ligne par la suite. Pour cela il faudra travailler sur des logiciels dreamweaver.

Fireworks permet de relier plusieurs interfaces entre elles, afin d’avoir une vision plus claire de la navigation du futur site. Il peut se révéler très pratique lorsque vous devez montrer, dans de courts délais, une esquisse de site web pour un de vos clients.

Niveau du tutoriel : débutants

Logiciel utilisé : fireworks CS4

Temps : moins d’une heure pour les plus rapides, ou quelques heures au maximum.

Une mauvais nouvelle cependant pour les habitués des raccourcis, le logiciel fireworks n’en possède presque pas, et le peu qu’il a ne correspond pas à ceux des autres logiciels d’Adobe. Navrée ! Mais soyez patient, je pense qu’ils ne tarderont pas à venir et redevenir comme les autres !

Donc maintenant que tout cela est dit, c’est parti !

 

 

1. Créer un nouveau document.

 

Image 1

Pour commencer, ouvrez fireworks. 

 

Cliquez sur fichier > nouveau document .

Une fenêtre apparaît dans laquelle vous pouvez inscrire vos données.

 

Pour un site web classique, vous prendrez par exemple : largeur 1024 pixels, longueur 768 pixels et une résolution de 75 pixels/pouces. Une fois cela fait, validez.

 

Par ailleurs, avant de commencer, il vaut mieux créer de suite un dossier spécifique dans vos documents pour cet exercice. Rien n’est plus important que vos dossiers soient correctement rangés. Vous le comprendrez très vite lorsque vous vous retrouverez avec plus d’une dizaine de documents dans vos dossiers.

Je vous préconise de créer votre dossier deux sous dossiers : l’un pour vos créations graphiques et votre photothèque, et l’autre pour tous les documents se reportant au web. Ce dernier comprendra 3 sous dossiers qui correspondront aux différents formats dans lesquels vous allez enregistrer vos futurs documents : HTM, PDF et PNG. 

Image 2

2. Importer vos interfaces

Avant toutes choses, il faut créer une interface (sur illustrator ou photoshop) qui servira de gabarit pour les pages du site web. Vous pouvez aussi créer une page d’accueil totalement différente de celle-ci, ou plusieurs types de gabarit. Tout dépend bien entendu de la navigation de votre site.

Je prendrais par exemple la page ci-dessous comme futur gabarit : 

Image 4

 (Je me permets de préciser que dans mon cas, c’est un site web pour une société créatrice d’aspirateurs laveur intelligents !)

Une fois votre création faite sur un des logiciels de créations, retournez sur Fireworks, cliquez sur fichier > importer > selectionner le fichier qui sera votre futur gabarit > valider. Une deuxième fenêtre s’ouvre, validez à nouveau.

Normalement, à moins que vous ne vous soyez trompé au départ dans vos dimensions, la page devrait s’afficher correctement dans votre page. Dans le cas contraire, soit vous redimensionnez vous-même manuellement, soit vous recréez un document en vérifiant vos dimensions.

Dans le cas où vous souhaiteriez rajouter quelques éléments graphiques, vous pouvez toujours le faire, même sur fireworks, grâce à la barre d’outil sur votre gauche. Vous reconnaîtrez notamment les icones pour créer des rectangles, des textes…

 

3. créer votre gabarit

Image 3

 

Une fois votre page à bonne échelle, cliquez sur l’onglet « pages » dans la barre d’outils à droite. (Normalement, cela se fait automatiquement)

Vous pouvez voir votre première page juste en dessous.

Faites un clic droit > définir comme gabarit.

Et voici votre gabarit créé ! Aussi simple que cela ! 

Vous remarquerez que votre page se nomme automatiquement “Gabarit”.

Vous pouvez maintenant enregistrer une première fois, en version PNG.

Dans le cas où vous souhaiteriez créer un deuxième gabarit, il vous suffit de refaire le procédé ci-dessus mais sur un nouveau document. Fichier > nouveau document.

Prenez le même format, puis importez votre autre gabarit. Vous pouvez ainsi créer de nouvelles pages du site web à partir d’un autre gabarit. Même si toutes vos pages ne sont pas issues que d’un seul et unique document, elles seront reliées entre elles à la fin lorsqu’elles seront enregistrées en format HTM.

 

4. Créer et égayér vos pages

a- Créer les pages

Maintenant que vous avez votre page type, vous pouvez commencer à créer les différentes pages qui composeront votre site.

Cliquez droit sur votre gabarit (barre d’outil de droite) > nouvelle page.

Le mieux est de renommer de suite votre nouvelle page. Pour moi, cela sera presentation.

Attention : n’oubliez jamais qu’il ne faut ni d’accent, ni signe/symbole, ni espace dans les intitulés de vos titres.

b- Etayer vos pages

Vous pouvez maintenant rajouter votre texte sur la page. Dans la barre d’outil de gauche, vous retrouvez vos icones habituels texte « T ».

Vous pouvez aussi rajouter quelques images ou photos. Pour cela, fichier > importer > sélectionner la photo > valider.

Image 2

 

Attention, n’oubliez pas que votre photo doit être enregistrée auparavant spécifiquement pour le web. 

(Petit rappel si vous avez oublié : ouvrez votre photo sur photoshop, fichier > enregistrer pour les webs et périphériques > sélectionnez votre paramètre (JPEG, GIF, PNG…) > enregistrer.)

Vous pouvez ensuite créer une deuxième page, pour la présentation des produits par exemples. Recréez votre zone de texte, rajoutez vos photos et visuels… Et ainsi de suite jusqu’à ce que vous ayez toutes les pages désirées.

 

N’oubliez pas de nommer vos pages entre temps et surtout d’enregistrer !

Vous ne voudriez pas perdre vos données je suppose !!

 

 

5. Reliez vos pages  entre elles

Image 5

a- créer les zones sensibles

Une fois toutes les pages créées, retournez sur votre gabarit (cliquez sur « page » dans la barre d’outil à droite).

 

Vous allez maintenant créer des zones sensibles : ces zones correspondent à l’endroit précis qui, lorsque vous cliquerez dessus, vous ameneront directement sur une autre page.

Pour créer les liens : dans la barre de gauche, cliquez long sur l’icône « outil zone sensible rectangulaire ».

Puis créer la zone où vous souhaiterez que l’internaute clique.

Faites vos zones sur chacun de vos onglets « presentation », « produit », « equipe » ect.

Vous voici avec un gabarit rempli de cases bleues !

Image 6

 

 

b- Créer les liens entre les pages

Lorsque vous cliquez sur un de vos carrés/rectangles bleus, un petit rond apparaît au centre, reportez vous maintenant sur la barre latérale en bas de votre espace de travail.

Vous avez une partie « lien ». Cliquez sur le menu déroulant. Vous avez ici de listé toutes vos pages créées. Sélectionné la page sur laquelle le clic vous amènera. Votre url est ainsi activé.

Image 7

Répéter cette action pour toutes vos zones sensibles. Et enregistrez encore une fois en PNG!

6. Regarder son site web

Ca y est, vous avez fais toutes vos pages, créez vos textes, remplis avec vos photos… Vous ne souhaitez plus qu’une chose, voire ce que cela donnerait sur vous le mettiez en ligne.

Pour cela, fichier > exporter  > pdf. Bien entendu, mettez le dans votre dossier pdf !

Image 8

 

L’enregistrement fait, votre site web en PDF s’ouvre automatiquement.

Si vous avez bien suivi toutes les instructions, vous pouvez maintenant naviguer comme vous le désiriez sur votre site.

 

Vous avez réussi à créer de manière simple et rapide, un prototype de site web,

avec toutes les navigations nécessaires.

 


Petit traité de Benchmarking sur Internet

Monday, November 16th, 2009

Si lancer un site Internet est aujourd’hui une démarche relativement aisée, « se lancer sur internet » l’est déjà beaucoup moins. Vous. Personnellement. Vous possédez probablement les outils adéquats et quelques notions de webmarketing. C’est bien. Ce n’est malheureusement que le strict minimum. Pour ceux qui souhaiteraient atteindre la taille critique et par là un sésame à la longévité, il faudra faire preuve de bien plus d’ingéniosité. En observant le web, force est d’avouer que les fiches, si abondantes il n’y a pas si longtemps, ont laissé libre cours à une jungle ultra-concurrentielle où seuls les plus habiles sont en mesure de survivre. Les paisibles communautés d’entraide aux idéaux utopiques, qu’on rêverait désintéressées, ne sont plus que les rejetons d’un marketing omniprésent (exemple : Doctissimo). C’est dans un tel contexte qu’il faut savoir récupérer les outils de cette discipline afin de gagner, de bon droit, sa place au soleil.

Mon but n’est pas de vous rédiger une formule magique qui vous fera réussir à tous les coups sur la toile. Je ne vais pas non plus vous faire un cours de webmarketing ou d’optimisation – ce serait manger le pain de nos professeurs bien aimés. Mon souhait est qu’à la lecture de ce « petit traité de web-benchmarking », vous découvriez un outil de professionnels dont il vous faudra faire usage de la manière la plus pertinente qui soit. Le terme technique ne doit pas vous faire peur. Si je l’emploie aujourd’hui, ce n’est que par commodité. Le benchmarking, de par sa définition naissante dans les années 80, nous est décrit comme l’outil permettant de  « trouver, au niveau mondial, l’entreprise ou les entreprises qui réalisent de la manière la plus performante un processus ou une tâche donnée, d’aller l’étudier et d’adapter ensuite ce processus à sa propre entreprise ». Sur le web, il s’agit de récolter des informations sur la concurrence pour adapter ses stratégies en marketing et en communication.


Nerd.jpg stalker image by VTChristin
Il y’a chercheur d’informations


james-bond
Et chercheur d’informations

Pourquoi le BenchMarking ?


Citons Sun Tzu pour la forme : « Connais l’adversaire et surtout connais-toi toi-même et tu seras invincible». Si la veille concurrentielle est une profession en soi, comment les communicants que nous sommes pourraient-ils être intéressés par cette activité si peu reluisante et à fortiori peu communicable ? Le benchmarking, en l’absence de données fournies par l’annonceur, devrait être à mon avis LA démarche fondamentale de tous processus créatifs virtuels. C’est aussi une clef de la réussite pour qui souhaiterait aujourd’hui devenir webmaster ou lancer son propre site Internet.

En tant que webmaster, j’ai pu dégager 3 grands groupes d’avantages à cette activité qui disons-le, est plus que chronophage.

- Innovation et calibration : on serait bien malavisés de dégager une idée ex nihilo sur Internet. La plupart d’entre elles ne sont que la récupération de concepts existants que l’on améliore, ou que l’on réforme. En observant la communication et les offres du concurrent, on peut en créer de nouveaux, ou tout simplement rattraper un retard pris. Cela peut toucher les produits, les E-services, le contenu rédactionnel ou tout simplement des techniques d’optimisation.

Exemple : Si vous vendez des pneus sur Internet et que votre principal concurrent (pneu-online.com) à un service de petites annonces automobiles, il faut réfléchir à un moyen de récupérer ou d’améliorer l’idée. Si vous estimez l’idée bonne, évidemment.


- Annihiler les menaces : Le terme est fort, mais la réalité sans nuance aucune. En récupérant des informations sur ce que fait, ou fera votre concurrent, vous anticiperez par déduction toutes ses actions. Vous devez être réactif sur Internet, c’est la clef de la victoire.

Exemple : votre concurrent lance une nouvelle version de son site, que vous trouvez géniale. Vous vous rendez compte au bout de quelques mois que ses visites baissent et le feedback de ses visiteurs sont mauvais. Ne faites pas la même erreur que lui et profitez-en pour proposer une offre parallèle et prendre une avance définitive sur votre rival.


- Trouver des opportunités d’alliance : Pour l’échange de liens notamment, connaître la puissance du site avec lequel vous allez vous allier est un plus. Si vous êtes un site traitant du manga « Naruto » et que vous souhaitez devenir partenaire avec un site plus généraliste de manga, le travail de recherche risque d’être long. Les sites qui ressortent de la requête « manga » sur Google sont en effet peu pertinents et les visites bien moindres que votre site sur la licence Naruto. On peut donc se poser des questions quant au bénéfice d’un rapprochement, ce que votre première impression ne vous avait pas forcément fait comprendre.

Je prêche des convaincus ? Vous pouvez bien sûr faire vivre votre site en autarcie et vous replier sur votre petite communauté. Ça reste du domaine de l’utopie, mais nous avons bien besoin de rêveurs dans ce bas monde.

Connaitre l’étendue de son marché


On n’arrive pas sur Internet avec son bon cœur et ses petites pièces, il est nécessaire de connaitre son marché et ses rivaux. Inutile de sortir la matrice SWOT pour impressionner vos supérieurs : vous êtes seuls devant votre ordinateur. Si vous voulez dégager des opportunités, il faudra plus que vos impressions, mais nécessairement des outils de connaissances.

- La recherche Google (basique) : Dans un premier temps, vous allez tout naturellement chercher les sites ressortant des deux premières pages de résultats. Si votre secteur d’activité est la licence Pokémon, vous penserez à taper toutes les combinaisons possibles : « Pokémon », « Pokemon », voire expressions annexes. N’oubliez pas qu’en recherche booléenne, les résultats sont plus pertinents avec des guillemets. Seule l’expression entière est alors comptabilisée, ciblant plus précisément vos requêtes sans résultats parasites.


google-concurents

- Utiliser Google Trend (avancé) : Google Trends offre deux volets de recherche, mais vous n’en connaissez probablement qu’un. Son objectif initial et de vous offrir, comme son nom l’indique, une tendance des mots clefs les plus tapés sur le web. Dans la réalité, ses nombreuses données annexes sont une véritable porte d’entrée sur toute la complexité de l’algorithme Google. Vous allez en effet pouvoir générer des ancres d’exploitation sur un certain nombre de mots clefs, mais surtout obtenir des informations très précises sur celles de vos concurrents. Observons ces trois exemples.

Utilisation 1  : Analyses des mots clefs
Restons chez les Pokémon. En tapant le mot clef directement depuis Google Trends, j’obtiens 3 sortes de données : la courbe de tendance, les faits d’actualité liés -ou non- aux pics ainsi que la géolocalisation des recherches. Le grand avantage de ce système, c’est la possibilité de pouvoir comparer deux mots clefs de deux secteurs différents ou sensiblement proches.


pokemontrends

Dans notre cas, il semblerait qu’il y ait une niche de visiteurs en Haute-Normandie, ce qui n’est pas inintéressant à savoir pour l’organisation, par exemple, d’un prochain tournoi de jeux vidéo dans la région.


Utilisation 2 : Récolte d’informations statistiques sur les concurrents.

Google trend a aussi une fonction bien plus discrète, mais pas moins intéressante. Prenons le site www.pokemontrash.com. Tapons cette adresse dans la barre de recherche Google Trends (sous cette forme sans http://). Rien n’apparaît. Vous distinguez cependant en dessous du logo un choix à opérer entre « Searches » et « Websites ». Nous choisirons naturellement websites et ô surprise : apparaissent pour ce site, non seulement ses visites uniques, mais aussi la géolocalisation de ses visiteurs, les sites connexes et les requêtes Google qui lui sont associées. Une vraie mine d’or qu’il convient naturellement d’exploiter (nous pourrions écrire un article entier là-dessus).


pokemontrash

Google Trends permet aussi la comparaison avec jusqu’à 4 autres sites web. Prenons les 4 leaders sur le web Pokémon : pokemon-f**nce.com, www.pokemontrash.com, www.*-pokemon.com,  www.pokeb*p.com. Dans la barre, nous séparerons chaque site par une virgule. Dans l’image que vous pouvez voir, j’ai rajouté deux petites astuces supplémentaires : la première, c’est qu’en vous loguant avec un compte Google, vous obtenez une mesure approximative des visites uniques réalisés par le site ; la seconde, c’est la possibilité, en haut à droite, de cibler sur une période ou un pays en particulier.


pokeweb
D’expérience, les fluctuations numériques données par Google, se relèvent juste. Les écarts entre la concurrence aussi. Les chiffres de visites uniques, par contre, sont souvent sous-évalués. Il est indiqué sur ce graphique que mon site réalisait en juin 2009, 11 000 visites uniques par jour. En réalité, le chiffre était de 18 000. J’applique donc à tous les chiffres trouvés un coefficient de 1,7 (le nombre d’or). Ça n’a rien de scientifique ou de rationnel, mais que ce soit pour les sites Pokémon ou pour le reste, cela m’a permis de trouver assez précisément les chiffres de mes partenaires.


Utiliser Google Adplanner (avancé) : cet outil encore peu connu du grand public et à accès très restreint est une application de Google qui se trouve être extrêmement intéressante. A l’origine, Google Adplanner permet aux annonceurs d’accéder à une base de données publicitaire sur chaque site internet à gros volume. Google Adwords permet en effet de réaliser des parrainages entre site et de facto se lier au support de leur choix. Sans rentrer dans les détails, il nait de la part des annonceurs un besoin de transparence sur les sites sur lesquels ils vont mettre leur publicité : Google y répond.

Nous ne sommes pas annonceurs, nous sommes des concurrents, et nous allons utiliser leurs propres moyens pour obtenir un maximum d’informations. Rendez-vous sur https://www.google.com/adplanner/ avec un compte Google valide. L’interface à laquelle vous accédez est très simple : vous tapez le nom d’un site, vous obtenez ses statistiques, des informations sur ses visiteurs et les différents formats publicitaires disponibles.


pokemon

Des sites comme Nielsen font payer très cher ce genre d’informations. Ici, c’est gratuit. En prenant l’exemple de www.pokemon.com, je voulais mettre en exergue la qualité des informations fournies, que ce soit sur l’âge ou la CSP visée.

On n’apprend pas à Picsou à nager dans l’or. Vous êtes des communicants et saurez à coup sûr utiliser ces informations de la manière la plus efficace qui soit.

Vous connaissez maintenant :

- Vos principaux concurrents…

- … leurs données chiffrées (visites) …

-  … leurs sources de développements (mots clefs, porte d’entrée).

- … le profil de leurs visiteurs

- Les limites du réservoir de trafic du marché.

- Votre champ sémantique d’activité

- Les mots clefs présentant des opportunités de référencement

Établir le profil de la concurrence


Vous possédez un ensemble de données fort pertinentes qui seront la clef de l’optimisation de votre site Internet. Vous voulez néanmoins aller plus loin, et connaitre parfaitement ceux qui le dirigent. Vous allez réaliser ce qu’on appelle plus vulgairement un « profil » des quelques sites susceptibles de vous intéresser (que ce soit par rapprochement ou concurrence)

- Connaitre le webmaster du site : SI vos relations ne suffisent pas, pensez à utiliser le Whois. Cet outil permet de connaitre le nom, le lieu de résidence voir le numéro de téléphone du propriétaire du nom de domaine. S’il existe de nombreuses exceptions, il y a de fortes chances qu’il s’agisse aussi du propriétaire du site, et par là même d’un de ses représentants.

- Obtenir des données sur la société : Avec la régularisation de plus en plus massive d’Internet, même les sites initialement amateurs ont tendance à se professionnaliser et à acquérir un statut. Des sites comme Société.com ou www.manageo.fr sont des moteurs de recherche et annuaires d’entreprises qui permettent de trouver leurs informations administratives et financières.  Vous obtiendrez aussi la forme juridique de l’entreprise, son capital social et ses effectifs, de quoi vous donner une idée du back stage de votre concurrent. Il existe des alternatives payantes (comme Euridile) qui peuvent vous fournir des résultats plus prolixes.

supdeputb

- Un saut dans le passé ? L’historien de formation que je suis ne peut pas ne pas aborder la question de la mémoire du web. Observer ce que votre concurrent a fait par le passé est source incroyable d’information sur lui, sur vous, et sur vos futurs respectifs. On utilisera WayBack Machine qui stocke régulièrement une sauvegarde des pages de votre site, et cela depuis près de dix ans. Autant dire qu’il n’y a pas de meilleures archives pour les historiens du web.


histoire

Surveiller ses concurrents


Vous pensiez que par le temps passé à la récolte de ces données à priori fixe, vous pourriez oublier la concurrence ? Vous n’êtes pas sorti d’affaire, loin de là. La veille concurrentielle et un travail rigoureux et ininterrompu qu’il faudra constamment perpétuer et pérenniser. Il y a de ce point de vue là des outils qui vous permettront de rester connecté en continu avec les activités de votre concurrent.

Abonnez-vous aux newsletters de votre concurrent. N’utilisez par le mail de votre société au risque de vous faire bloquer ou de lui faire restreindre la pertinence des informations envoyées. Grâce à cette technique, vous recevrez un condensé des nouveautés qui, en temps normal, ne sont accessibles qu’à un groupe restreint d’abonnés.

Utilisez les Flux RSS. Si vous êtes un site qui délivre un contenu rédactionnel, c’est essentiel. Vous y abonner vous permettra d’être averti en temps réel de l’actualité des sites visés et de facto de vous offrir une réactivité à toute épreuve. Pensez aussi à consulter les sites de la presse spécialisée dans votre secteur. De même pour la presse économique.

- Consultez les blogs et forums des concurrents ou relatifs à votre secteur d’activité. La communauté nécessairement plus réduite y est aussi plus bavarde…

Maitriser sa communication


Vous comprenez bien que par la nature quelque peu intrusive de cette méthode, vous vous deviez de rester discret quant à son utilisation. Si toutes ces astuces sont légales, transparentes et anonymes, il est tentant de parfois franchir les limites juridiques par gourmandise ou par dépit. La récolte d’informations n’a en effet pas bonne publicité et les dérives sont nombreuses : hacking, manipulation, chantages et pots de vin sont des options que je ne vous recommande pas.

Vous êtes maintenant prêt à passer à l’attaque. Que la Force soit avec vous.

Relooking du site internet de l’office du tourisme d’Aix-les-Bains

Thursday, November 12th, 2009

La communication des collectivités territoriales est en pleine évolution depuis quelques années. Les offices du tourisme se doivent donc de répondre à ce phénomène en mettant en place des outils de communication correspondant aux normes actuelles. J’ai donc choisi de redesigner le site internet de l’office du tourisme d’Aix-les-Bains qui avait un réel besoin de modernité.

Site internet actuel de l’office du tourisme d’Aix-les-Bains

Site actuel de l'office du tourisme d'Aix les Bains

Le choix des couleurs est en accord avec le logo de la ville cependant la trop forte présence du rouge bordeaux nuit à la visibilité et alourdit le design de ce site. Il était donc important de conserver le bleu ainsi que ce rouge mais à moindre dose.

Le placement du site internet en haut à droite de la page laisse un espace blanc important nous donnant une impression de mauvaise finition. Il a donc été recentré et occupe désormais l’ensemble de la page.

zoom sur la navigationSon modèle de navigation ne nous permet pas d’accéder à toutes les informations du site via le gabarit de base. J’ai alors pris le parti de replacer le menu en créant une têtière aux couleurs d’Aix-les-Bains illustrer d’un visuel d’une de ses plages. Chaque thème étant placé en dessous de la têtière. Le survole de ces thèmes permet à l’internaute d’accéder à un menu déroulant, ou il accèdera à chaque sous-partie. Ces sous-parties n’étaient disponibles, dans le modèle précédant, que sur la page propre à chaque thème. De plus la mise en page faisait que ces sous-parties n’étaient que très peu visibles et de plus chevauchées pour certaines par des flèches menant à un autre menu déroulant. L’accès le plus rapide et le plus logique possible à l’information permet de ne pas perdre l’internaute dans le site internet. Il pourrait se lasser et quitter le site s’il met trop de temps pour accéder à sa recherche.

En termes de rédaction j’ai renommé certains thèmes. En effet certains d’entre eux s’adressaient directement à l’internaute en le vouvoyant alors que d’autres étaient simplement référentiel. J’ai donc choisi de supprimer le vouvoiement en ne conservant que la fonction référentielle.

Ma proposition de refonte

Ma proposition pour la refonte de ce site