Archive pour février 2012

Twitter : une force pour les entreprises

Vendredi 24 février 2012

 

illustration de Twitter pour entreprises

 

Twitter, le réseau social de microblogging est le 3ème réseau social le plus populaire de France et bénéficie d’une notoriété grandissante (+ 5pts depuis automne 2010) Source: IFOP, Observatoire des réseaux sociaux, nov 2011.

L’usage de Facebook est maintenant ancré dans la stratégie de communication des entreprises sur les réseaux sociaux. Qu’en est-il de Twitter : quelle est l’utilité et la place de ce réseau social dans la politique de développement d’une entreprise ?

 

Données Réseaux Sociaux, IFOP 2011

 

La veille thématique

Twitter sert en premier lieu à informer, en utilisant un nombre réduit de caractères (140 caractères autorisés maximum). Ce principe de réduction de caractère en fait un outil d’information idéal, notamment pour effectuer de la veille sur une thématique précise or, il est indispensable pour une entreprise de rester informée sur les actualités concernant son secteur et ses concurrents.

 

La promotion

Avoir un compte Twitter entreprise avec un certain nombre de « followers » permet de communiquer à ces différents « suiveurs d’information », en se plaçant en tant qu’informateur. L’information peut concerner le lancement d’un nouveau produit,  une annonce promotionnelle ou de recrutement ou plus généralement les actualités sur l’entreprise.

La publication de contenu est aussi l’objet d’autres réseaux sociaux mais la force de Twitter, réside dans la brièveté des informations qui  sont rendues accessibles et faciles à relayer. L’information a donc plus de chance d’être lue et d’être transmise.

 

La relation client

Twitter peut aider à développer la relation client et le service à la clientèle d’une entreprise :

- En repérant les clients mécontents  suite à un tweet défavorable et en réagissant rapidement face à ce mécontentement (proposer une solution, donner des explications etc.)

- En testant de nouvelles idées via des sondages.

- En renforçant la crédibilité de l’entreprise grâce à des publications fréquentes dans le domaine de l’entreprise. Les « twittos » intéressés par ces publications pourront attester de l’expertise de l’entreprise et ainsi, accorder une plus grande confiance à celle-ci.

- En usant d’interactions avec certains abonnés.

- En humanisant l’entreprise et donc les relations : proposer de dévoiler le profil de la personne qui s’occupe de tweeter sur le compte de l’entreprise.

 

Le référencement

Les GoogleBots suivent les liens postés sur Twitter et indexent les pages de destination en temps réel.

En effet, d’après une étude par SEOMoz en 2010, les tweets vers un article envoient les googlebots vers cet article 78 secondes en moyenne après le 1er tweet. L’étude montre aussi que la rapidité d’indexation de la page dans le moteur de recherche augmente jusqu’à 325% si le tweet est retweeté 3 fois :

- Page avec  1 tweet = indexation après 26h avec 69% contenu indexé

- Page avec  3 retweets = indexation à 8h avec 88% du contenu indexé

L’étude montre que pour optimiser le référencement d’une page, la meilleure combinaison est la création de liens internes + liens vers Twitter :

- 1ère visite des Bots = 82 secondes en moyenne

- Page avec 1 tweet = indexation 5h avec 79% contenu indexé

- Page dès 3 retweets = indexation 4h25 avec 88% du contenu index

 

Résumé de l' étude SEOMoz, 2010

 

Les avantages de Twitter pour les entreprises sont donc nombreux mais il va sans dire que ceci dépend bien sûr de l’effort de l’entreprise à publier des informations cohérentes, si possible exclusives et de manière fréquente. Et, comme tout réseau social, une vérification de l’e-réputation et une modération régulière permettent d’éviter certains désagréments.

 

Comme indiqué par  Joel Chaudy (dirigeant de JConseil, consultant indépendant e-réputation, community management, Médias sociaux et fondateur de Docteur Tweety) dans une interviewl’usage de twitter par les entreprises françaises est actuellement expérimental.  L’adhésion des marques a connu une évolution positive depuis deux ans mais reste assez peut assumée selon lui. Joel Chaudy ajoute aussi  que l’utilisation de Facebook doit être couplée avec celle de Twitter puisque ces deux réseaux sociaux n’ont pas les même objectifs :

 

« Un tweet a pour but d’informer et d’être diffusé […] un message Facebook a, quant à lui, pour objectif d’entretenir le dialogue avec des fans et susciter leur réaction. »

 

 

Enfin, sachez que Twitter ads vient de lancer une nouvelle solution publicitaire pour les petites entreprises. Ce service jusque là réservé à quelques 3000 grandes sociétés privilégiées sera donc accessible pour les TPE/PME américaines dans un premier temps fin mars, puis s’ouvrira au marché international plus tard dans l’année 2012.  Une opportunité à saisir pour les petites et moyennes entreprises françaises !

Pour en savoir plus sur le service de publicité pour « small business » de Twitter 

Sophie Coulon

 

IE10 : Développer des pages optimales en HTML5 et CSS3 (1ère partie)

Lundi 20 février 2012

HTML5+CSS3

1. Brève introduction à l’HTML5

Depuis quelques temps, on entend parler ici et là de HTML5 ou XHTML5, ce format de données développé par W3C et WHATWG, révision majeure du moteur HTML, est conçu pour représenter les pages Web. Ce nouveau standard intègre une couche applicative donnant accès à de nombreuses API et à de nouvelles balises HTML, supportées par la plupart des navigateurs modernes.

Actuellement, HTML5 est toujours en développement par le W3C, et l’on attend une finalisation des spécifications prévue pour 2014. Mais le W3C encourage les développeurs Web à implémenter cette technologie dès maintenant, car aujourd’hui rien ne les empêche d’utiliser le DOCTYPE HTML5 dans leurs projets Web.

Bien sûr, le but du jeu sera d’utiliser les nouvelles balises HTML5 (canvas, section, aside, footer, header, article, video, audio, etc. ) et pas seulement le DOCTYPE HTML5.

En revanche, toutes ces implémentations ne sont pas supportées nativement par certains navigateurs du marché, pour ne pas les citer IE6 , IE7, IE8, etc.

Il existe cependant certaines astuces permettant d’implémenter  les nouvelles balises ou de simuler les nouveaux comportements des API HTML5 en utilisant des plugins Javascript (ex : Api drag & drop). Cette tendance commence à s’inverser car la plupart des navigateurs modernes fournissent de plus en plus de compatibilité avec ces nouvelles balises et API.

En voici une liste non exhaustive de ces nouveaux User Agent :

    • IE 9,
    • IE 10 bientôt sur  Windows 7 et Windows 8,
    • Firefox 3.6,
    • Firefox 4+,
    • OPERA 11,
    • Safari 5+,
    • Chrome,
    • Ipad,
    • Iphone,
    • Android,
    • Windows Phone IE 9 mobile.

Pour plus d’information, je vous invite à lire cet excellent article sur HTML 5.

Pour connaître la liste des fonctionnalités supportées par les différents navigateurs du marché sur les technos HTML5 / CSS3 voici quelques sites intéressants :
Une présentation détaillée de HTML5
HTML5 et CSS3 par l’exemple
Lecture des HTML5 et CSS3 dans les navigateurs

 

2. HTML5 et CSS3 : une paire indissociable ?

Beaucoup de gens pense que HTML5 rime avec CSS3 mais c’est faux, CSS3 est juste une mise à jour majeure des feuilles de style de la version CSS2.1. Son développement a débuté dès 1999, mais la plupart de ces implémentations ne sont toujours pas supportées par tout les navigateurs modernes.

Cependant une multitude de nouveautés accompagnent CSS3 :

  • Effets visuels : border-radius, text-shadow, font-face…
  • Sélecteurs : nth-child(odd)
  • De nouveaux outils : Media Queries, Column-count, Grid layout

 

Quelques navigateurs tentent par ailleurs de changer la donne,  en faisant de leur mieux pour respecter les spécifications du W3C. Pour cela, lorsqu’ils implémentent de nouvelles propriétés expérimentales, ils ajoutent un préfixe aux attributs des propriétés CSS.

Voici une liste non exhaustive de ces préfixes :

  • -moz- : Firefox
  • -webkit- : Chrome,Safari,Iphone,Android
  • -o- : Opera
  • -ms- : Internet explorer
  • etc.
Pour plus d’informations sur ces nouvelles implémentations CSS3, je vous invite à consulter les sites suivants :
Présentation et stylisation du CSS3
Support du HTML5 et du CSS3 selon les navigateurs, comparatif et indispensable
Can I use ? Bonnes pratiques du couple HTML5/CSS3

 

3. HTML5 et CSS3 dans IE10

Entrons maintenant dans le vif du sujet car Microsoft nous dévoile sa nouvelle mouture d’ Internet Explorer IE 10 Platform Preview. La version définitive de IE 10 est prévue pour le second semestre de l’année et elle ne sera compatible que sur les machines tournant sur Windows 7 et Windows 8.

Après avoir propulsé plusieurs versions d’Internet Explorer(IE6, IE7, IE8) respectant peu les standards W3C du Web, Microsoft arrive enfin avec une version aboutie de son navigateur IE 10. En effet IE 10 sera totalement compatible HTML 5 et CSS 3 , il embarquera toutes les nouvelles implémentations validées par le W3C à ce jour et plein d’autres propriétés en cours de validation.

Pour tester toutes ces innovations majeures de IE 10, je vous conseille de faire un tour sur ce site qui les récapitulent Test Drive Site Map.

Bien sûr, munissez-vous d’une machine tournant sur Windows 7 ou sur Windows 8 Developper Preview et installez respectivement IE 10 Platform Preview 2 ou IE 10 Platform Preview 4.

 

Cas pratique dans le navigateur IE10

Je vais maintenant vous présenter une propriétés CSS3 assez intéressante, pour l’instant disponible uniquement sur IE 10 Grid Layout -ms-grid-, mais qui ne tardera pas à être implémentée sur Mozilla et Chrome 19.

CSS3 Grid layout et Metro

Et oui, après XBOX 360, Windows Phone, Windows 8, IE 10  nous offre la possibilité de designer des interfaces Web intuitives de type Metro grâce à la propriété -ms-grid. Le concept de Grid layout est de créer une grille virtuelle composée de lignes et de colonnes sur la page Web. Ainsi on pourra facilement disposer des éléments sur cette grille , les aligner, les centrer et les superposer de façon intuitive ; le tout sans structure HTML nécessitant un balisage particulier comme le faisait auparavant la balise Table.

Démonstration

Prenons un exemple concret : je vais représenter une partie de l’interface Metro de Windows 8 sur une page Web avec la propriété Grid Layout.

HTML5, Metro Windows 8

Explication

Nous allons créer une page Web dans laquelle la div principale #main de type Grid constituée de 2 colonnes de largeur automatique et de 6 lignes de hauteur automatique qui contiendra plusieurs logos que l’on placera à divers endroits :

  1. Logo 1 est placé à la colonne 1 et à la ligne 1 disposé sur toute la largeur
  2. Logo 2 est placé à la colonne 1 et à la ligne 2
  3. Logo 3 est placé à la colonne 2 et à la ligne 2
  4. Logo 4 est placé à la colonne 1 et à la ligne 3 disposé sur toute la largeur

 

Feuille de style – css.css

body{ background:green; display:-ms-grid;   -ms-grid-columns:auto; -ms-grid-rows:1;   }   div {margin: 2px 0px 2px 0}
#main{  display:-ms-grid;/* Affichage de type Grid*/   -ms-grid-column:1; -ms-grid-row:1;   -ms-grid-columns:auto auto;   -ms-grid-rows:(auto)[6]; }
#b1{ -ms-grid-column:1;   -ms-grid-column-span:2;   -ms-grid-row:1; background:url(i/1.png);   width:252px;    height:120px; }
#b2{ -ms-grid-column:1;   -ms-grid-row:2;    background:url(i/2.png);    width:126px;   height:126px;   }
#b3{ -ms-grid-column:2; -ms-grid-row:2; background:url(i/3.png); width:126px; height:126px; }
#b4{ -ms-grid-column-span:2;   -ms-grid-column:1;   -ms-grid-row:3;   background:url(i/8.png);   width:252px;   height:120px; } 

 

Code html 5 – index.html

<!DOCTYPE html>

<html>

<head>

<link href= »css.css » media= »all » rel=« stylesheet » />

</head>

<body>

<div id= »main« >

<divid= »b1« ></div>

<div id= »b2« ></div>

<div id= »b3« ></div>

<div id= »b4« ></div>

</div>

</body>

</html>

Résultat

Résultat HTML 5

 

Voilà, la partie 1 sur HTML5 et CSS3 est terminée.  Nous avons vu une infime partie des nouveautés supportées par IE 10,  que ce soit au niveau CSS3 ou balisage HTML5.

La seconde partie se concentrera plus sur les nouveautés du  côté de l’API HTML 5.

 

Pour plus d’infos, consulter :

http://ie.microsoft.com/testdrive/Views/SiteMap/ sur IE 10 Preview 2 (avec Windows 7)
http://ie.microsoft.com/testdrive/Views/SiteMap/ sur IE 10 Preview 4 (avec Windows 8 Developper Preview )

 

Christophe Rafina

 

 

Election présidentielle 2012 : La data visualisation au service du débat citoyen

Jeudi 2 février 2012


Mai 2012, l’heure des choix va sonner et les Français vont se diriger vers les urnes. Pour s’y préparer et s’informer, nos concitoyens se tournent de plus en plus vers le web. Et les candidats ont appris, après un coup d’œil Outre-Manche il y a 5 ans, que c’était là un espace à occuper.

La Toile regorge donc de données sur le sujet et les outils utilisés pour faire le buzz cotoîent la publication plus classique d’infos journalistiques.

C’est là une matière rêvée pour le concours Google de Dataviz qui a eu lieu fin 2011.
Intéressé par la recherche en data visualisation (voir définition), Google a demandé aux participants de développer une application web innovante pour éclairer de façon perspicace et originale la campagne présidentielle française. Cette application doit se servir de données variées mais obligatoirement d’au moins un jeu de données de Google ou de Twitter.
Au final, le jury réuni par Google a sélectionné les applications dont les auteurs ont mis en œuvre des bonnes pratiques de data visualisation, dont le traitement graphique a témoigné d’une vraie sensibilité pour le design et dont le contenu apporte un soin particulier au traitement de l’information.

(Pour en savoir plus sur le concours et notamment retrouver des exemples de jeux de données, les critères de sélection et les membres du jury, consultez le site dédié : https://sites.google.com/site/concoursdataviz2012/)

Bien que le jury a rendu son verdict il y a plus d’un mois, nous vous proposons de découvrir l’application gagnante ainsi que les finalistes. Toujours pertinentes, elles vous permettront peut-être d’affiner vos choix !

Le gagnant :

MediArena

http://mediarena2012.fr/

MediArena

MediArena compare les différents traitements réservés aux candidats par douze organes de presse et mesure l’écho suscité sur Twitter par certains articles.

Les données :

  • Flux RSS des sites web des journaux
  • Nombre de tweets qui mentionnent chaque article

 

Les finalistes :

Bubble-T

http://yt-french-election-hr.appspot.com/tendances/slide#4

BubbleT

Bubble-T collecte et répartit les tweets en temps réel.

Les données :

  • Tweets dans lesquels sont cités les noms des candidats

 

Partie2Campagne

http://partie-2-campagne.appspot.com

Partie2Campagne

Partie2Campagne explore les thèmes de la campagne présidentielle et compare les sujets lancés par les candidats et leur traitement par les journaux.

Les données :

  • Sources politiques : blogs, sites, comptes Twitter des candidats, de leurs lieutenants et des partis
  • Presse : flux RSS dédiés de la presse en ligne

 

Politweets

http://yt-french-election-hr.appspot.com/tendances/slide#2

politweets

Politweets classe les tweets des candidats et de leur parti sur les derniers 45 jours pour en faire ressortir : les sujets, qui tape sur qui, qui a dit quoi.

Les données :

  • Tweets des candidats, de leurs lieutenants et des partis

 

Retwhit2012

http://par-la-fenetre.net/retwhit2012/

Retwiht-2012

Retwhit2012 récupère les tweets de personnalités politiques françaises et les classes en fonction de leur nombre de retweet et de la date. Cela permet de mesurer l’influence des personnalités politiques sur Twitter.

Les données :

  • Tweets des candidats, de leurs lieutenants et des partis

 

Thematweet

http://presidentielles-dataviz.cloudfoundry.com/

thematweets

Thematweet présente sous forme de camemberts les thèmes abordés par les candidats lors de la campagne électorale.  Il s’agit d’une analyse du buzz autour des discours de chaque candidat, pour mieux comprendre la campagne.

Les données :

  • Tweets dans lesquels sont cités les noms des candidats

 

En savoir plus :

Pour consulter des analyses plus poussées sur les différentes applications, vous pouvez vous rendre sur le blog « Data journalism » : http://datajournalism.canalblog.com/

Toutes les applications présentées sont réunies sur la chaîne YouTube partenaire : http://yt-french-election-hr.appspot.com/tendances/all

Toutes les informations sur le concours Google de Dataviz  sont ici : https://sites.google.com/site/concoursdataviz2012/

 

Jeanne Millet

  • Les sorties

    • aperçu pour Sogeti

      > Sogeti

      La SOciété pour la GEstion de l’entreprise et Traitement de l’Information s’offre un nouveau « look-and-feel » avec n²

    • aperçu pour SODEXO

      > SODEXO

      La Planète Sodexo présente son nouveau site Web.

    • aperçu pour Claro-Afflelou

      > Claro-Afflelou

      Le dernier-né d’Afflelou simplifie vos démarches opticien, n² les digitalise.

    • aperçu pour Kiabi Emploi

      > Kiabi Emploi

      Postuler en ligne sur le site de Kiabi ? C’est désormais possible grâce à n².

    • aperçu pour Ryder Cup 2018

      > Ryder Cup 2018

      Pari gagné : la France accueillera la Ryder Cup 2018, quelque six mois après la mise en ligne du site de soutien n²

    • aperçu pour 48h Brico !

      > 48h Brico !

      Weldom, bricoleur averti, partage ses bons plans sur 48h Brico.

  • Les lectures du moment

    • Dont’ make me think, a common sense approach to web usability
      de Steve Krug
      éd.New Riders, 201 p.

       

    • L’essentiel d’ActionScript 3,
      de Colin Moock, éd. O’Reilly, 959 p.

    • Designing Interactions,
      de Bill Moggridge, éd. The MIT Press,
      766 p.

  • On aime / on n'aime pas

    • > Carls no

      Coup de coeur sur le site du restaurant norvégien Carls no !

    • > Lab Simurai

      Lab Simurai expose ses projets et expérimentations en matière d’animation CSS 3 !

    • > Soul Reaper

      Une BD animée en HTML 5 !