"En 2006, Kamini écrit et tourne avec des amis la chanson rap Marly-Gomont, qui raconte avec humour l'ennui des jeunes dans le monde rural et la difficulté d'appartenir à la seule et unique famille de noirs du
village.
Son clip, envoyé à plusieurs « majors » de l'industrie musicale le 12 septembre 2006 est refusé, mais amuse les employés des labels qui le font circuler jusqu'à en faire un véritable succès populaire."
Le web 2.0 a révolutionné nos métiers du Web : les développeurs doivent prendre en compte les nouvelles exigences participatives des internautes. Les graphistes eux-aussi doivent se mettre à la page : le web 2.0 impose des tendances et des codes qu’il est bon de bien connaître :
I - L’Ambiance et l’espace
Les dernières études sur le EyeTracking
démontrent qu’un bon design doit guider le regard de l’internaute vers les éléments importants : une simplification du contenu et de la mise en page du site s’impose donc.
-
Présentez les éléments vitaux sur la page d’accueil et les informations secondaires sur les autres pages.
-
Dans une page, conservez 60% d’espace blanc pour faciliter la lisibilité (readability)
-
Rendez votre site attrayant et simple en vous inspirant des codes visuels de l’enfance et des jouets.
II - Les couleurs et les formes
Elles jouent un rôle déterminant dans la
construction du graphisme et attirent l’attention de l’internaute. Le plus difficile peut être de conserver une certaine cohérence visuelle :
-
Utilisez des couleurs brillantes et contrastées
-
Présentez des aplats de couleurs franches sur la page et donnez-leur du relief
-
Rendez votre graphisme attractif en usant (et abusant) des procédés de dégradé, d’ombres portées, des effets de reflet…
-
utilisez des formes simples : carrés, rectangles à bords arrondis, ronds, étoiles …
III - La Typographie
Elle permet de retenir l’attention de l’internaute sur des
notions clés, en utilisant :
-
une taille importante pour les titres,
-
des polices de caractères simples pour rendre la lecture du contenu agréable.
IV - Images et pictogrammes
L’utilisation des images et icônes doit être réfléchie, car hautement stratégique... Chaque pictogramme doit avoir un sens si l’on veut captiver l’internaute. Un photomontage dynamique et une création graphique contribuent fortement à l’ambiance ressentie par l’internaute.
Le graphisme est la dernière chose à négliger
Pour identifier vos différents marchés cibles, segmentez d'abord votre marché global en groupes de gens qui semblent avoir les mêmes désirs et besoins. La segmentation peut avoir autant de groupes que vous voulez. Par exemple, un groupe par tranche d'âge, par genre, par type d'emploi, par zone géographique, par style de vie, par comportement d'achat, par groupe ethnique, par niveau d'études, etc...
L'objectif est de reconnaître qu'il n'existe pas "d'acheteur moyen". Chaque
groupe de personnes a ses propres désirs et besoins. Par conséquent, certains groupes trouveront vos produits et services plus attirants que d'autres. Ceux-ci constituent vos marchés
cibles.
Parce que l'email marketing peut réellement toucher des cibles très spécifiques, vous pouvez segmenter en profondeur, car plus vous segmenterez, plus vos campagnes d'emailing seront extrêmement ciblées. Et il existera toujours un listing d'adresses mail pour chaque segment que vous aurez identifié.
Cependant, les marchés cibles doivent être suffisamment importants pour justifier le temps et l'effort, si ce n'est le coût, d'une campagne d'emailing ciblée. Idéalement, vous devez toucher des segments de marché qui ont une taille suffisante et qui sont desservis par vos concurrents.
C'est pour cette raison qu'il est vital de passer beaucoup de temps sur la
segmentation.
1. Sélectionnez le carnet d’adresses
2. Dans le menu Edition, cliquez sur Catégories.
3. Cliquez sur Liste des catégories principales.
4. Dans la zone Nouvelle catégorie, tapez un nom pour la catégorie.
5. Cliquez sur Ajouter.
6. Pour créer d'autres catégories, recommencez les étapes 3 et 4.
7. Cliquez sur OK.
1. Sélectionnez le carnet d’adresses
2. Dans la barre d’outil standard, cliquez sur Classer > toutes les catégories
3. Cliquez sur Nouveau.
4. Attribuez une couleur.
5. Pour créer d'autres catégories, recommencez les étapes 3 et 4.
6. Cliquez deux fois sur OK.

Je viens juste de donner une formation sur le Web 2.0 et le marketing
viral, et voilà que je tombe sur ce superbe article de eveille.fr. Dommage pour la chronologie...
Voyez comment on monte un buzz, l'ampleur que la parole et les medias donnent à l'évènement.
Voici l'article dans son intégralité :
Backlink : http://www.eveille.fr/explication-du-buzz-le-bus-de-lyon-1051
Les faits en image : le buzz qui fait le tour du monde
Il y a un peu plus d’une semaine, une vidéo apparait sur Youtube se nommant « Accident de bus à Lyon« . En quelques jours, cette vidéo fait le tour du web. On peut y voir un jeune homme voulant faire une blague et fait le « clown » en plein milieu d’une rue lyonnaise devant l’arrivée d’un bus. Sauf que le conducteur du bus va avoir le mauvais reflexe en donnant un coup de volant et le bus va se renverser.
Voici la vidéo de l’accident du bus à Lyon :
En
coulisse
Pour ceux qui ont un œil averti, il est évident que c’est un « fake » et que la vidéo a été fabriquée de toute pièce. Même si le rendu est bien fait, on voit bien quand le bus se couche qu’il y a quelque chose de bizarre. Pourtant, cette vidéo va être publiée sur des dizaines de sites et à la télévision. Au point même que certains journalistes vont appeler la compagnie de bus Lyonnaise (TCL) pour déterminer s’il y a eu un accident de bus ! Si bien que cette compagnie a bien failli porter plainte contre les auteurs de cette blague.
Les auteurs de cette vidéo se sont manifestés une semaine après. Ils ont créés cette vidéo afin de tester l’effet buzz et montrer également leur talent. D’après eux, la réalisation de cette vidéo a nécessité 2 mois de travail quand même.
L’ampleur médiatique a dépassé leur espérance et ils ont donc réalisé le
making-of de cette vidéo buzz afin d’expliquer comment ils ont fait. Je vous laisse regarder, c’est assez bluffant
RSS ? Voilà un sigle bien barbare :
- on le voit pourtant partout, accolé à son logo orange.
- il fait partie intégrante du paysage des blogs
- les projets Web actuels demandent tous une intégration dynamique des flux RSS
Un constat à faire : tout le monde ne connait pas les flux RSS... Et encore moins comment s'en servir. Dans cet article, je vais vous expliquer simplement comment tirer partie de la puissance des flux : pour la veille, la rapidité de l'information, etc...
I - La Syndication Web
La syndication Web met à disposition le contenu d'un site très rapidement,
- directement sur l'ordinateur de l'utilisateur
- sans que ce dernier n'ait à se rendre sur le site
- très souvent via un lecteur de flux sous forme logiciel ou plateforme en ligne
Le plus souvent, les contenus sont distribués par le biais de flux d'information : fils RSS (Really Simple Syndication) et Atom sont les 2 formats les plus populaires.
La souscription à un fil nécessite un module capable de lire le langage XML (Extensible Markup Language), on l'appelle agrégateur de fils RSS ou Atom. Une fois abonné, le souscripteur est averti en temps réel et automatiquement de la publication de nouveaux contenus.
Vous n'imaginez pas le temps gagné ! ![]()
II - Comment celà se passe-t-il dans les faits ? La vidéo
III - S'abonner aux flux : mode d'emploi
Pour pouvoir lire un flux RSS, il vous faut tout naturellement un lecteur de flux RSS. Ce lecteur est une application simple qui permet d’une part d’afficher les informations et qui, d’autre part, va chercher régulièrment les informations des flux que vous lui avez soumis. Chaque fois que vous verrez un logo RSS ou un lien du type Syndiquer ce flux, cliquez, un fichier est alors affiché, copiez l’url de ce fichier et ajoutez la dans votre lecteur par la commande Ajouter ou Créez un flux.
Les navigateurs web comme firefox, outre la détection du flux RSS, permettent de s'y abonner et de les lire. Les flux s'intègrent alors dans la barre de menu ou dans un menu latéral. C'est simple mais dépourvu de fonctions avancées de tri ou d'organisation.
Ce sont les outils dédiés aux fils RSS. Comme de nombreuses applications, ces lecteurs sont soit disponibles en ligne, soit à installer localement sur votre PC.
- Exemples de lecteurs RSS en ligne :Bloglines, Pluck, Newsgator
- Exemples de lecteurs RSS installés : RSS Reader, Amphetadesk, Newsgator (s'intègre à Outlook), FeedDemon.
IV - Les avantages du RSS
La technologie RSS possède des avantages la prédisposant favorablement face à d’autres canaux de
communication :
Maintenant que vous savez tout sur les RSS, il ne vous reste plus qu'à vous abonner à ce blog !
Nous recevons tous chaque jour des courriers indésirables dans notre webmail ou messagerie : entre 6 et 30 courriers indésirable par jour selon le Journal du Net.
Ces courriers indésirables portent aussi le nom de pourriels ou de SPAM. Mais que signifie au juste le mot SPAM, et d'où vient-il ?
Littéralement SPAM se traduit en anglais : Shoulder of Pork and Ham, autrement dit épaule et jambon de porc. Ce mot anglais a une origine inattendue, en réalité il fait référence à un sketch télévisé de 1970, intitulé « SPAM » réalisé par les Monthy Python, groupe de comiques anglais à l’humour burlesque.
L'histoire se déroule dans un bar, où un couple s'attable et demande le menu à la serveuse. Pour chaque plat du menu, la serveuse énumère et répète sans arrêt le mot SPAM. Dans ce sketch, le
SPAM, désigne le jambon en boite qui se trouve être une marque de conserve de viande renommé au Royaume-Uni. Le terme SPAM envahit alors les discussions.
Pendant ce temps, un groupe de viking chante bruyamment : « spam, spam, lovely spam, wonderful spam », la conversation initiale entre les clients et la serveuse est recouverte par le chant des guerriers.
La similitude se comprend avec les courriers indésirables qui parasitent nos boîtes mails
Le domaine des marchés publics vient de vivre sa petite révolution : « Le pouvoir
adjudicateur
a décidé qu'un marché peut être passé sans publicité ni mise en concurrence
préalables si son montant estimé est inférieur à 15 000 euros HT." Le palier était auparavant de
4000€ HT
Cette actualité m'a décidée à vous présenter le vocabulaire des projets web, notamment les MOA et MOE que l'on retrouve fréquemment dans les appels d'offres (AO).
Le périmètre du projet
Le projet web définit la réalisation d'une prestation, celle-ci répond :
- à un besoin,
- à un délai et un budget donnés,
- à un niveau défini de qualité.
Ces trois engagements intrinsèques - qualité, délai et coût - définissent ce que l'on nomme « le périmètre » du projet.
Qui demande : la maîtrise d'ouvrage (MOA)
Également appelée « client » d'un projet, la Maîtrise d'Ouvrage est la personne ou l'entité à l'origine de la demande. Ce peut être, selon les cas, une société extérieure ou une unité interne de l'entreprise. Elle définit le site Web, le besoin, vérifie l'adéquation des solutions proposées et est économiquement responsable du produit (c'est le payeur).
Qui réalise : la maîtrise d'œuvre (MOE)
Il s'agit de la personne ou de l'entité qui réalise le projet afin de répondre à la demande d'une maîtrise d'ouvrage. Elle définit et conçoit la solution, la réalise et assiste souvent la MOA dans le démarrage du projet.
Les études préalables
L' étude préalable consiste à collecter et à analyser les informations relatives au lancement du projet : analyser la nature du marché et identifier les besoins existants.
Études de faisabilité, études de marché et étude de la concurrence peuvent aider dans cette démarche. Au final, il est important d'identifier la cible et les besoins, estimer le niveau d'équipement des futurs internautes et surtout définir les objectifs généraux et le type de site qu'il faudra mettre en œuvre.
Le cahier des charges fonctionnel
L'AFNOR définit le cahier des charges fonctionnel comme un document par lequel le demandeur exprime son besoin en terme de fonctions de services et de contraintes. Pour chacune d'elles sont définis des critères d'appréciation et leurs niveaux. Chacun de ces niveaux doit être assorti d'une flexibilité. (Source : AFNOR / Norme NF X 50151)
Le cahier des charges fonctionnel est un document par lequel le client (maîtrise d'ouvrage) exprime son besoin. Ce dernier doit être formulé en termes de fonctionnalités que le futur internaute aura à accomplir, ou que le site Web devra accomplir pour lui. Il s'agit d'un élément clé du projet, il va permettre à l'équipe de réalisation :
L'AMO ou la formation ?
Si vous n'êtes pas "technique", faites-vous aider par une AMO (Assistance à Maîtrise d'Ouvrage) ou une formation au projet web et cahier des charges.
De nombreux projets web ont échoué en raison d'un cadrage initial insuffisant : les besoins ont été trop peu ou mal définis, aucune stratégie n'a été clairement identifiée, aucun budget n'a été prévu pour l'exploitation...
Y aller : oui, mais pas n'importe comment !
Si on vous inscrivait à une course à pied, vous aimeriez connaître la distance, le type de terrain, le parcours, le temps de référence, les points de ravitaillement, etc ...
Un site web demande de la préparation et des compétences en amont, comme une épreuve sportive : faites-vous aider si vous vous sentez court, ou si vous avez peur de tomber sur de mauvais prestataire.
Hervé Mainguet de l’hôtel le Régent … a demandé de l’aide à la communauté Facebook "pratiques du e-tourisme" pour créer un emailing pro et charté. Allez Hervé : on va te donner un coup de pouce, qui à mon avis, pourra servir aux autres…
Pourquoi avoir choisi SendBlaster ?
Je m’y attèle, et vous raconte l’histoire depuis le début
Pour réaliser nos campagnes emailing, il nous a fallu trouver une solution réputée. Sur les forums, c’est la guerre entre Sarbacane et
SendBlaster.
Nous avons opté pour SendBlaster, car l’interface est plus optimisée, il possède une version gratuite et une version payante
professionnelle, et surtout il y a des outils de vérification de spam et de tracking.
Et la modification de template alors ?
Lorsque vous créez un nouveau message dans SendBlaster, vous trouvez un menu sur votre droite, dont le bouton "Choisir un modèle". Vous avez alors la possibilité de choisir différents templates. Prenons pour notre exemple le modèle Web 1.
Pour modifier un template, il faut avoir quelques bases en HTML/CSS et avoir un accès FTP sur votre serveur.
Prêt à plonger dans le code HTML ?
Et oui le code HTML et CSS d’un emailing est très préhistorique, la majeurs partie des CSS ne sont pas pris en compte dans les messageries.
La mise en page d’un emailing se fait donc en tableau (dur dur pour les webmasters 2012) et les styles css sont introduits dans les attributs HTML.
De la taille du tableau, à la couleur d’arrière plan, tous les styles css sont mis en ligne, on parle de style in-line.
Pour voir le spectacle : cliquez sur "afficher le code" dans la barre de mise en page.
<TD style="PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: Tahoma; COLOR:
#ffffff; FONT-SIZE: 18px; FONT-WEIGHT: bold; PADDING-TOP: 5px" ctass="tdTitle">
<DIV style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-SIZE: 18px; FONT-WEIGHT: bold; PADDING-TOP: 0px">Lorem ipsum dolor sit
amet</DIV></TD></TR></TBODY></TABLE>
Pour modifier plus facilement le template, vous allez pouvoir télécharger le plugin de l’éditeur HTML avancé. Pour cela,
retour sur la page d’accueil, cliquez sur "Utiliser des plugs-in".
De là téléchargez le plugin Advanced HTML Editor.
C’est fait ? Et bien retour sur la composition du message et vous devez avoir une
nouvelle icône dans votre barre de mise en page.
En cliquant, une nouvelle fenêtre de dialogue apparait avec votre template.
Adressage absolu des images
En double-cliquant sur l’image du bandeau, vous avez accès aux propriétés de l’image.
Vous pouvez alors entrer l’adresse absolue de l’image dans le champ "Source" (cela nécessite donc d’avoir mis en ligne vos images sur votre
serveur). Le lien absolu utilise l’adresse URL, c’est un chemin d’accès complet à partir du nom de domaine.
Ici http://www.web-creatif.net/img/bando_accueil.png
Vous devez entrer les dimensions de l'image : champs largeur et taille.
Puis vous pouvez changer toutes les images de la même manière.
Enfin validez en bas de la fenêtre avant de retourner sur l'écran principal de composition de message.
On change de style
Pour l’image de fond, la chose se complique, puisque nous devons aller dans le code HTML via "Afficher le code".
Maintenant, il vous suffit de vous armer de patience, et de prendre une bonne paire de lunette afin de retrouver ce qui pourrait ressembler au code
de l’image de fond.
Je vous aide, ça ressemble à cela :
background=C:\Users\caroline\AppData\Local\Temp\~ed_sb_i\~files\5.png
Et de la même manière que le bandeau, vous entrez l’adresse absolue de l’image de fond :
background=http://www.web-creatif.net/img/gouttedeau.jpg
Pensez à changer ou supprimer la couleur de fond bleu restée derrière l’image (pour ma part, j’ai mis du blanc) :
<TD style="BORDER-BOTTOM: #04c8e5 4px solid; BACKGROUND-COLOR: #fff"><IMG border=0 alt="ABC Widgets"
src="http://www.web-creatif.net/img/bando_accueil.png" width=966 height=291></TD></TR>
Il ne reste plus qu’une étape : changer la couleur de fond bleu des titres.
Pour cela, il suffit de trouver la propriété bgColor de l’attribut Table dans le code HTML.
Si jamais la couleur de fond de la cellule date vous dérange, vous pourrez changer les paramètres dans les styles présents avant le <body>
.td.date{
padding: 5px; background-color:#fff;
}
td.date p {
background-color:#fff;
font-family: Tahoma;
font-size: 12px;
font-weight: normal;
color: #000000;
margin: 0px;
padding: 5px 0 5px 5px;
}
Voila, notre tuto est fini, vous avez un début de template adapté à votre charte graphique. Facile non ?
Ceci est un extrait de la formation "emailing professionnel avec HTML et Sendblaster" : on ne garde pas nos contenus égoïstement, c'est ça l'esprit du web !
| Février 2012 | ||||||||||
| L | M | M | J | V | S | D | ||||
| 1 | 2 | 3 | 4 | 5 | ||||||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 | ||||
| 13 | 14 | 15 | 16 | 17 | 18 | 19 | ||||
| 20 | 21 | 22 | 23 | 24 | 25 | 26 | ||||
| 27 | 28 | 29 | ||||||||
|
||||||||||
Derniers Commentaires