Destinés à tous ceux qui aurait raté Paris Web ou petit piqure de rappel pour les autres, voici un focus sur la conférence de Rudy Rigot et sa charte CATEEA. On sait … Paris Web ça commence à dater, mais le but ici est de relancer une vraie bonne idée et d’approfondir des ouvertures laissées par notre orateur. Agrémenté de quelques remarques et expériences personnelles, ce billet s’adresse avant tout aux chefs de projet mais également à toutes ressources au sein d’une équipe web. Une fois développée et aboutie, cette initiative pourra être considérée comme une pièce maîtresse dans une bonne gestion de projet. Ne laissons pas s’enterrer un concept qui semble prometteur !

La charte CATEEA : c’est quoi ?

La charte CATEEA (« Collaborative Achievement Through Everyone’s Expertise Acknowledgement », ce qui donnerait en français quelque chose comme « Réalisation collaborative par reconnaissance de l’expertise de chacun ») c’est avant tout une bonne dose de bon sens et de foi dans l’humanité (on sait ce n’est pas tous les jours facile…). Sinon c’est aussi une charte simple et non-contractuelle, permettant d’organiser logiquement les phases d’imprévu, afin de donner les moyens aux experts les plus pertinents du projet d’apporter les réponses aux questions pertinentes, et de sauvegarder la qualité du résultat final. Son objectif est de valoriser le travail de chaque expert vis-à-vis des autres experts (chef de projet et product owner compris)

Ce procédé s’articule autour de trois règles majeures que doit appliquer le CDP (chef de projet) :

• Responsabiliser
• Rattraper l’imprévu
• Remettre dans la boucle

Responsabiliser

Responsabiliser l’ensemble de son équipe (client y compris) est quelque chose de capital pour le bon déroulement d’un projet.

La charte commençait par donner une définition particulière du terme « expert » : « Un expert sur un domaine dans l’équipe d’un projet web, est la personne participant à ce projet web qui a la meilleure appréhension et étant capable des meilleures décisions sur ce domaine. »

Ce point de vue est très intéressant, d’une part il permet de valoriser l’individu au sein du groupe, et montre que l’avis / la maîtrise de chacun doit être respecté. Cela place également le chef de projet et le client en tant qu’expert, leurs domaines demandant également un certain savoir-faire et de l’expérience.

S’il est le plus souvent facile de sensibiliser son équipe, c’est une autre paire de manche concernant le client. Car oui, la charte doit être actée par tous les experts, le client faisant partie intégrante de l’équipe. En réalité c’est même lui qu’on cherche le plus à convaincre. Le but est de faire passer l’expertise des autres ressources avant ses propres opinions (pour ne pas dire caprices) en montrant qu’ils sont plus à même de répondre à ses besoins (et c’est bien pour ça qu’il fait appel à nous).

Une des plus grandes difficultés est d’établir une relation basée sur l’échange et de montrer au client qu’il doit être réactif et anticiper les besoins de l’équipe. Il doit donner autant qu’il reçoit.

Quand trop d’acteurs peuvent intervenir sur un point précis, le résultat est souvent plus confus qu’il ne l’était au départ. L’idée est donc de  rester sur les directives de  l’expert attitré et lui faire confiance : on évite de perdre du temps en multiple aller-retour, on écarte certaines tensions, et techniquement le résultat final sera pensé comme un ensemble par la même personne et donc surement plus cohérent que l’amas de bribes d’idées ressortissant d’une réunion bavarde. Il faut savoir faire confiance aux gens, c’est sans doute là qu’ils donneront le meilleurs d’eux-mêmes (et s’il est vraiment mauvais dans tous les cas, le résultat aurait été le même)

Attention cependant : privilégier la vision d’un expert sur ses recommandations ne veut pas dire que le reste de l’équipe n’a pas son mot à dire. Il faut toujours s’assurer que tous les experts travaillent bien ensemble et en bonne compréhension de l’expertise des autres.

Rattraper l’imprévu

L’imprévu fait malheureusement partie de notre quotidien. Très rares sont les projets sans aucune anicroche du début à la fin. L’imprévu a beau être un facteur aléatoire, certains paramètres permettent de réduire ces impacts.

Une des conséquences mis en avant par Rudy est « la déception d’expertise », un phénomène que l’on a tous expérimenté : lorsqu’on débute un projet web, toute l’équipe est très motivée, les idées fusent de toutes parts et tout le monde a en tête un site proche de la perfection et un déroulement sans encombre. Vers la fin du projet, tout l’équipe est démotivée, peste pour chaque action à mener, se rejette la faute, et le projet entre dans une stagnation énervante.

Cette situation apparaitrait dans 70% des cas (dans le cadre de prestation), ce n’est donc pas quelque chose d’isolé. Que s’est-il passé entre le début et la fin ? Mais surtout quand ? Et pourquoi ?

Le fil conducteur du projet serait perdu :

• 15% en période prévue, moments planifiés
• 47% en période d’imprévu
• 38% ne savent pas trop

Pourquoi cette déception apparait :

• 76% décision du client qui pensait savoir mieux que les experts
• 29% décision du chef de projet qui voulait prendre des décisions à la place de tout le monde
• 12% contraintes arbitrairement imposées par un autre expert

C’est donc bien en période d’imprévu qu’on rencontre le plus de difficultés et que la déception d’expertise apparait. Il est donc important d’avoir conscience que cet imprévu peut surgir à n’importe quel moment et de trouver des solutions pour y remédier le plus vite possible.

Une bonne gestion d’imprévu rime souvent avec un bon chef de projet. Pas de miracle, c’est avant tout l’expérience et la personnalité qui feront la différence entre un bon et un mauvais chef de projet. Mais cela rime aussi souvent avec un bon client, là aussi les connaissances et compétences du client sont à prendre en compte et c’est au chef de projet d’évaluer ce facteur.

Au final, un mauvais chef de projet comme un mauvais client impacte également la qualité du projet.

Remettre dans la boucle

Souvent lors de longs projets, les différents experts sortent au fur et à mesure de la boucle car leurs travaux sont à priori terminés.

Le problème c’est que ceci va à l’encontre de la responsabilisation qu’on veut insuffler aux membres. Un expert ne se sent plus concerné / impliqué à partir du moment où on l’a éloigné du terrain trop longtemps. Il est important que tout le monde reste dans la boucle car à tout moment un expert peut apporter son expertise, aiguiller les autres ressources et pourquoi pas, rectifier un tir manqué, même quand sa phase de travail est terminée.

Exemple : le designer peut très bien avoir à corriger un de ses éléments suite à des retours clients même pendant la phase de production technique. Il est important que chaque ressource sache situer l’avancement du projet à tout moment.

Plus bêtement, le « reply all » n’est pas un réflexe pour tous, et certaines informations cruciales ne circulent pas chez tout le monde. C’est au chef de projet de toujours veiller à la bonne propagation des informations lors des échanges et c’est lui qui doit remettre ses ressources dans la boucle.

Cette « exclusion » est aussi à l’origine de la déception d’expertise. Lorsque ce phénomène survient, 21% des experts ont rencontré le cas où ils n’étaient plus dans la boucle depuis longtemps et 24% ont rencontré le cas où ils n’ont pas essayé de faire valoir leur avis sur un élément blessant la qualité du projet quand ils ont vu un problème.

Les trois règles « responsabiliser », « rattraper l’imprévu » et « remettre dans la boucle » sont donc là pour limiter la déception d’expertise.

Aller plus loin

Comme vous l’avez surement noté, il est facile de dire qu’il faut responsabiliser, rattraper l’imprévu et remettre dans la boucle, mais concrètement, quelles sont les solutions efficaces pour remplir ces trois règles ?

Rudy proposait tout d’abord de mettre en place une grille de responsabilités. Un simple tableau, notifiant chaque responsable associé à son domaine d’expertise. Le support n’est en soi pas révolutionnaire mais s’appuie plus sur la psychologie de groupe. Il a été noté et présenté au groupe que untel serait responsable de l’ergonomie et que sa voix ferait référence dans ce domaine. Une simple histoire de bon sens et de mettre les choses au clair.

La gestion de l’imprévu et la remise dans la boucle posent beaucoup plus de contraintes (staffing, budget, distance) et trouver des solutions viables semble plus compliqué.

L’imprévu peut être anticipé  en prévoyant des temps creux dans le planning prévisionnel ou en évaluant les compétences de ses experts et leur attribuer un facteur risque qui multipliera leur temps de charge. Cela résout un problème mais en créé un autre : cela alourdira le budget et mobilise plus longtemps un expert qui sera donc moins disponible sur d’autres projets.

Maintenant c’est à vous de creuser le concept et de ressortir toutes bonnes idées qui pourraient aider à trouver des solutions aux problèmes restants.

Je vous propose de retrouver la présentation de la charte CATEEA par Rudy Rigot directement sur son site. N’hésitez surtout pas à lui faire parvenir vos remarques.

Chefs de projet en herbe ou avisés, à vos commentaires !

Quelque que soit le type de site sur lesquels ils sont implémentés (e-commerce, blog, sites d’actualités, etc.), ces boutons de partage ont un intérêt non négligeable puisqu’ils permettent de rendre son contenu facilement visible au plus grand nombre.

Il peut donc être intéressant de mesurer ces interactions sociales sur votre site internet. Combien d’internautes ont liké votre dernier article ? Combien l’ont unliké ? Combien l’ont liké en provenant d’un moteur de recherche ? Quel pourcentage des conversions proviennent d’internautes socialement engagés ? Vous l’aurez compris : le plus important est de pouvoir segmenter ces données pour connaître toujours davantage vos internautes.

Google nous propose aujourd’hui un tag permettant de récupérer ces données sur son outil Google Analytics : le _trackSocial.

Qu’est-ce que le _trackSocial ?

Le _trackSocial vient se rajouter à l’ensemble des autres tags Analytics tels que le _trackPageView, le _trackEvent, le _trackPageLoadTime, etc.

Il est construit de cette façon si :

_trackSocial (network, socialAction, opt_target, opt_pagePath)

• Le paramètre « network » nécessite une chaîne de caractères indiquant le réseau sur lequel l’action a lieu (ex : Facebook, Twitter).
• Le paramètre « socialAction » nécessite une chaîne de caractère indiquant l’action que réalise le bouton (ex : Like, Unlike, Send, Tweet).
• Le paramètre « opt_target » (optionnel) nécessite l’URL de la page cible.
• Le paramètre « opt_pagePath »(optionnel) nécessite l’URL de la page sur laquelle a eu lieu l’action.

Pour comprendre ces deux derniers paramètres, voici un exemple :

Le blog de Synerg’heTiC vient de publier un article. Voici l’URL de l’article :
http://blog.synerghetic.net/2011/08/26/deux-semaines-de-news-campagnes-buzz-3/
L’article s’affiche donc en mode complet à la page :
http://blog.synerghetic.net/2011/08/26/deux-semaines-de-news-campagnes-buzz-3/)
et en mode court sur celle-ci :
http://blog.synerghetic.net

Les boutons Like et Tweeter sont sur les deux pages.

Prenons deux utilisateurs A et B :

• L’utilisateur A like l’article sur la page de celui-ci : http://blog.synerghetic.net/2011/08/26/deux-semaines-de-news-campagnes-buzz-3/, le tag sera donc :

_gaq.push(['_trackSocial', 'facebook', 'like',
'http://blog.synerghetic.net/2011/08/26/deux-semaines-de-news-campagnes-buzz-3/',
'http://blog.synerghetic.net/2011/08/26/deux-semaines-de-news-campagnes-buzz-3/']);

• L’utilisateur B quant à lui, like l’article sur la page : http://blog.synerghetic.net/, le tag sera donc :

_gaq.push(['_trackSocial', 'facebook', 'like',
 'http://blog.synerghetic.net/2011/08/26/deux-semaines-de-news-campagnes-buzz-3/',
'http://blog.synerghetic.net/']);

Cela permettra d’analyser par la suite, sur quelle page le contenu a été le plus partagé et bien d’autres données, aussi segmentées soient-elles.

L’implémentation du tag

Le tag _trackSocial s’implémente de manière différente selon l’action à réaliser (Like, Unlike, Send, Tweet).

Facebook : Bouton Like

Pour pouvoir récupérer les données d’un Like sur Google Anlaytics, il faut utiliser l’évènement edge.create et une fonction de rappel qui se lance quand l’évènement se déclenche. L’URL de la ressource est alors passée en paramètre afin de pouvoir la récupérer dans Google Analytics.

FB.Event.subscribe('edge.create', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});

Facebook : Bouton UnLike

De la même manière que précédemment, on utilisera une fonction de rappel mais cette fois-ci avec l’évènement edge.remove :

FB.Event.subscribe('edge.remove', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
});

Facebook : Bouton Send

Ici on utilise l’évènement message.send pour implémenter le bouton Send :

FB.Event.subscribe('message.send', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
});

Twitter : Bouton Tweeter

Pour ce qui est de Twitter et de son bouton Tweeter, le fonctionnement global est le même. On attache une fonction de rappel à l’évènement tweet. Quand l’évènement se déclenche, la fonction est appelée pour récupérer l’URL de la ressource tweetée (qui a été stockée dans une iFrame) afin de la passer en paramètre du tag :

twttr.events.bind('tweet', function(event) {
  if (event) {
    var targetUrl;
    if (event.target && event.target.nodeName == 'IFRAME') {
      targetUrl = extractParamFromUri(event.target.src, 'url');
    }
    _gaq.push(['_trackSocial', 'twitter', 'tweet', targetUrl]);
  }
});

Ces fonctions sont uniquement en Javascript : elles doivent donc être tout simplement mises entre balises script et à intégrer avant la fermeture de votre balise body.
A noter : il n’y a pas besoin d’implémenter le tag pour le bouton +1. Celui est automatiquement récupéré par Google Analytics.

L’analyse des données avec Google Analytics

Avant tout propos, sachez qu’il vous faudra la version 5 de Google Analytics pour constater les résultats.

Sur cette version donc, vous avez dans la rubrique « Visiteurs », un onglet « Réseaux sociaux » dans lequel il y a deux intitulés : « Intérêt et interaction » et « Pages ».

Intérêt et interaction

Sur cette page, vous apercevez le nombre de « visites sociales ». C’est-à-dire les visites ayant déclenché un évènement social tel qu’un clic sur le bouton Tweeter ou un Like.

Si vous cliquez sur les visites qui sont socialement engagées, vous atterrissez sur une page avec le détail des actions qui ont été réalisées sur votre site.

Vous avez ainsi la possibilité de segmenter l’ensemble de vos données en fonction de vos visites sociales. Cela permet de récolter des données très intéressantes sur ces visites parmi lesquelles leur taux de conversion, leur source principale, etc… A votre guise !

Pages

Sur cette partie, vous avez la liste des URLs qui ont été l’objet d’une action sociale (option « Entité sociale ») et la liste de celles sur lesquelles ont été effectuées les actions (option « Page »). Pour comprendre la différence entre les deux, je vous invite à relire la partie « Qu’est-ce que le _trackSocial ? » un peu plus haut.

De la même manière que précédemment, l’intérêt est double. Vous avez une vue sur vos contenus qui ont été partagés et la possibilité de segmenter les données selon les critères que vous désirez en créant un segment personnalisé.

A noter : les données que vous récupèrerez ne correspondront uniquement qu’aux actions ayant été faites sur votre domaine. Si votre article reçoit un Like, Unlike, Send, Tweet ou un +1 hors de votre domaine, il ne sera pas comptabilisé dans les rapports Google Analytics.
Cependant, il existe une alternative pour le bouton +1 puisque vous avez toujours la possibilité de récupérer la donnée totale sur les Google Webmasters Tools.

Conclusion

Certains se diront peut-être que l’on peut obtenir le même genre de données en utilisant le tag _trackEvent. Ce n’est pas totalement faux. Le _trackSocial permet juste beaucoup plus de flexibilité avec les données.

Par exemple, la distinction entre la page partagée et la page où a eu lieu le partage serait difficilement récupérable avec le _trackEvent (il faudrait concaténer ces deux pages dans le paramètre Label du tag). Et dans l’hypothèse où vous souhaiteriez fonctionner comme ça, vous auriez beaucoup plus de mal à segmenter vos données.

Et vous, que pensez-vous du _trackSocial ? Vous l’utilisez sur votre site ?

Partagez vos astuces !

Mais qu’en est-il réellement et quelles sont les limites de cette utilisation ?

Cette technologie utilise les fonctions Javascript pushState() et replaceState(), utilisables uniquement sur le moteur web Gecko 2. Et oui ! C’est uniquement compatible Chrome (min v5), Firefox (min v4), Opéra (min v11.5) et Safari (min v5). Internet Explorer n’est pas dans la liste, ni-même sa version 10 et encore moins la 9 !

Après cette petite introduction, donnons tout de suite un exemple simple d’utilisation. Suivez bien :

Je suis sur une page A.html. J’ai un lien dans cette page qui me mène vers la page B.html, comme cela pourrait être le cas dans un menu de navigation. Je désire charger en Ajax le contenu de B.html afin de fluidifier un peu tout ça. Je vais donc récupérer en Ajax la page B.html, avec la méthode .load() de JQuery par exemple.

Jusque-là, rien d’innovant. L’un des problèmes de ce type de navigation est que si je fais « précédent » avec mon navigateur, je ne retomberai pas sur le contenu précédent, c’est à dire A.html. Pourquoi ? Etant donné qu’en appelant en Ajax le contenu de B.html, je n’ai pas bougé de ma page A.html. Donc le bouton précédent ne fera que me ramener sur la page où je me trouvais avant A.html. Vous comprenez facilement la limite de cette exemple au niveau ergonomique.

C’est là qu’intervient la fonction de manipulation de l’historique du navigateur. Quand je charge ma page A.html, j’exécute la fonction history.replaceState() en lui donnant en paramètre l’URL de la page, c’est-à-dire A.html. Au moment d’appeler B.html en Ajax, je fais un history.pushState() en lui plaçant en paramètre l’URL que je demande, B.html. Je crée ainsi une nouvelle entrée dans l’historique de navigation de mon navigateur. Tout le monde a suivi ?

Pour activer la navigation par le navigateur avec le bouton « précédent » et « suivant », je fais la fonction suivante :

$(window).bind(‘popstate’, function(event) {

var state = event.originalEvent.state;

if (state) {
$(« #ma_div_ou_je_charge_mon_ajax »).load(state.path);
}
});

J’ai donc placé un écouteur sur les évènements du navigateur afin d’afficher ce qui est demandé.

Niveau SEO :

Au niveau du SEO, c’est parfait ! J’ai uniquement appelé le contenu qui m’intéresse de B.html. J’ai bien deux pages distinctes A.html et B.html dans mon arborescence et les robots indexeront bien les deux pages. Si je désactive le Javascript, j’ai un lien classique de A vers B qui affichera la page demandée avec un rechargement du navigateur comme dans une navigation classique.

Inconvénients :

C’est assez difficile à mettre en place. Les navigateurs ne réagissent pas tous pareils à cette manipulation. En effet, il existe un problème sur Chrome. Je suis sur A.html, j’appelle la page B.html, puis ensuite tape une URL à la main vers un site externe. Si arrivé sur cette nouvelle page je fais précédent avec le navigateur, je retombe sur la page B.html en entière et non plus A.html avec l’importation du contenu de B. Il existe donc une méthode pour remédier à ce problème, mais on n’entrera pas dans les détails ici et elle est assez lourde.

Conclusion :

Grâce à cette technique, on peut créer une navigation très fluide en Ajax, tout en conservant la navigation par les actions du navigateur. Cette technologie se rapproche de ce qu’offre Flash au niveau de la fluidité. Comme toutes les bonnes choses, c’est à consommer avec modération. Nous avons bien vu dans les inconvénients, que cette méthode est encore au stade expérimental. Voici une application concrète de cette méthode sur le site Github. Regardez le chargement du contenu lorsque l’on clique sur un fichier dans le tableau. Testez la navigation par vous-même. Ceci dit, nous repoussons sans cesse les limites de nos navigateurs afin d’en tirer le meilleur. C’est ce genre de pratique qui pousse les concepteurs de navigateurs à améliorer leurs applications et repousse un peu plus la technologie web.

Nous allons voir ensemble comment réaliser le Doodle du 117^ème anniversaire de Martha Graham’s du 11 Mai 2011. Ce Doodle est une animation de Ryan Woodward dont vous pouvez avoir un aperçu de ses travaux sur son site www.ryanwoodwardart.com. Il faut savoir que tous les Doodles sont conçu différemment et la technique utilisée pour réaliser celui-ci n’est pas à 100% celle utilisée par Google mais en reprend les grandes lignes.

Retrouvez le rendu final à cette adresse : Rendu final du Google Doodle

Etape 1 : Les bases de l’animation

Toute notre scène va se dérouler dans un rectangle de 403px de large par 156px de hauteur. Nous allons donc créer une div que nous appellerons logo_start avec un id, elle sera notre scène. Il nous faut ensuite 2 images. Une qui représente la première image de l’animation, puis un sprite qui contient toutes les images de l’animation. Il vous faudra aussi installer en local ou faire appel à la bibliothèque JQuery.

Image de départ : img_start.png
Sprite : img_sprite.png
Jquery : jquery-1.6.1.min

Une fois les documents ci-dessus récupérés, attaquons le HTML et le CSS de notre Doodle :

<div id="logo_start"></div>

#logo_start{
  position:relative;
  width:403px;
  height:156px;
  background:url('img_start.png') no-repeat top left;
}

On place la div en position : relative afin de pouvoir jouer avec les positions : absolute à l’intérieur.

Voilà, c’est tout pour le HTML et le CSS de notre animation, tout le reste va se dérouler côté Javascript.

Etape 2 : Les bases du Javascript

Avant d’entamer le Js, je vais essayer d’être le plus clair possible sur ce que nous allons tenter de réaliser. Le principe de base est de faire apparaître des div dans cette scène. Chaque div a ses propres coordonnées de positionnement par rapport au point haut gauche de logo_start et chaque div a une image de fond bien précise. Ces images de fond sont toutes réunies sur le sprite que vous avez récupéré plus haut.

Nous avons donc pour chaque image de l’animation, des coordonnées de placement et des coordonnées pour l’image de fond. Les div apparaissant au bon endroit, avec le bon fond, feront apparaître l’animation. Il y a environ 155 images a faire apparaître pour jouer toute l’animation. Je vous entends déjà : « les tableaux de coordonnées vont être interminables ! » Et bien oui, mais rassurez-vous, nous avons déjà tout calculé pour vous, se sera l’affaire d’un simple copier/coller.

Attaquons donc notre fichier JS et commençons par les fameux tableaux de coordonnées :

var d = [307,48,88,89,307,48,89,89,307,48,91,89,305,49,93,89,305,50,93,88,305,50,93,88,306,52,92,86,305,53,93,84,305,54,94,83,306,54,93,83,307,54,92,83,307,54,92,83,308,54,90,83,308,54,90,83,306,53,91,84,306,53,91,84,308,53,90,84,308,53,90,84,305,53,92,84,305,52,92,85,306,52,91,85,308,51,88,87,308,50,88,88,308,49,88,88,307,49,89,88,307,50,89,87,308,51,89,86,307,54,90,83,307,57,90,80,306,58,92,79,306,58,92,79,305,60,92,77,302,61,95,76,302,63,95,74,302,51,96,86,302,66,98,71,304,67,96,69,301,63,96,74,301,58,93,79,291,52,94,85,288,50,71,88,285,43,76,95,285,37,70,101,281,29,55,109,278,20,58,119,278,20,55,119,277,12,121,127,271,2,122,138,267,1,126,139,264,0,136,140,260,0,141,140,255,0,148,140,252,0,151,140,249,2,121,138,247,3,123,137,246,3,123,137,246,2,124,137,258,2,112,137,263,2,106,137,263,2,106,137,262,2,103,137,260,2,104,136,260,2,104,137,268,2,98,137,267,2,99,137,266,2,97,137,266,3,96,136,264,3,99,136,263,3,100,136,261,3,100,136,259,2,138,137,254,2,126,137,247,2,101,136,240,2,108,136,238,1,110,137,230,1,118,138,220,15,128,124,211,18,137,121,205,43,102,96,202,45,104,93,200,38,97,101,198,38,104,101,197,39,107,100,197,39,112,100,213,39,94,110,212,40,95,111,211,41,97,111,209,42,99,112,209,43,98,112,213,43,87,112,213,42,83,113,211,40,86,109,211,38,86,103,211,37,88,112,211,20,186,131,213,27,167,122,212,44,87,105,210,44,88,98,195,44,106,98,189,44,110,98,182,46,117,99,173,44,118,96,161,43,130,99,154,42,137,97,153,42,137,97,153,42,137,97,152,41,137,98,151,41,137,97,149,41,145,97,148,25,144,114,148,13,144,126,141,12,153,127,115,11,173,128,108,7,180,133,108,4,180,136,108,3,176,137,108,1,161,139,105,1,235,138,103,1,295,148,103,0,277,149,108,0,234,137,101,0,232,137,99,0,135,139,95,0,244,139,81,0,152,139,69,0,164,139,66,0,169,139,65,0,170,139,63,0,168,138,61,0,159,138,35,0,304,139,19,0,189,140,18,11,138,129,18,11,137,129,18,11,137,128,18,6,135,133,7,4,146,136,6,4,147,136,3,4,150,136,3,5,150,135,3,8,150,132,4,6,394,145,12,6,388,145,11,8,389,144,11,8,387,144,11,8,387,143,10,8,113,131,11,8,111,131,10,9,112,130,12,9,116,130,12,9,111,130,12,9,111,130,12,9,110,131,12,34,113,106,13,35,110,104];

var e = [0,0,-88,0,-177,0,-268,0,-361,0,-454,0,-547,0,-639,0,-732,0,-826,0,-919,0,-1011,0,-1103,0,-1193,0,-1283,0,-1374,0,-1465,0,-1555,0,-1645,0,-1737,0,-1829,0,-1920,0,0,-89,-88,-89,-176,-89,-265,-89,-354,-89,-443,-89,-533,-89,-623,-89,-715,-89,-807,-89,-899,-89,-994,-89,-1089,-89,-1185,-89,-1283,-89,-1379,-89,-1475,-89,-1568,-89,-1662,-89,-1733,-89,-1809,-89,-1879,-89,-1934,-89,-1992,-89,0,-208,-121,-208,-243,-208,-369,-208,-505,-208,-646,-208,-794,-208,-945,-208,-1066,-208,-1189,-208,-1312,-208,-1436,-208,-1548,-208,-1654,-208,-1760,-208,-1863,-208,-1967,-208,0,-348,-98,-348,-197,-348,-294,-348,-390,-348,-489,-348,-589,-348,-689,-348,-827,-348,-953,-348,-1054,-348,-1162,-348,-1272,-348,-1390,-348,-1518,-348,-1655,-348,-1757,-348,-1861,-348,-1958,-348,0,-486,-107,-486,-219,-486,-313,-486,-408,-486,-505,-486,-604,-486,-702,-486,-789,-486,-872,-486,-958,-486,-1044,-486,-1132,-486,-1318,-486,-1485,-486,-1572,-486,-1660,-486,-1766,-486,-1876,-486,-1993,-486,0,-617,-130,-617,-267,-617,-404,-617,-541,-617,-678,-617,-815,-617,-960,-617,-1104,-617,-1248,-617,-1401,-617,-1574,-617,-1754,-617,-1934,-617,0,-754,-161,-754,-396,-754,-691,-754,-968,-754,-1202,-754,-1434,-754,-1569,-754,-1813,-754,-1965,-754,0,-903,-169,-903,-339,-903,-507,-903,-666,-903,-970,-903,-1159,-903,-1297,-903,-1434,-903,-1571,-903,-1706,-903,-1852,-903,-1999,-903,0,-1043,-150,-1043,-300,-1043,-694,-1043,-1082,-1043,-1471,-1043,-1858,-1043,0,-1188,-113,-1188,-224,-1188,-336,-1188,-452,-1188,-563,-1188,-674,-1188,-784,-1188,-897,-1188];

On vous avait prévenu, les tableaux sont costaux ! Mettez-les en début de fichier et faites une mise en forme qui ne vous gênera pas trop pour la suite.

Le tableau d définit les coordonnées de placement et de dimension des div. Afin de bien comprendre le fonctionnement de ce tableau, prenons les 4 premières données. 307 correspond au positionnement gauche, 48 correspond au positionnement haut, 88 le nombre de pixels de largeur et 89 les pixels de hauteur. Nous avons donc créé une div qui se placera sur la scène comme ceci :

Le tableau e définit les coordonnées du sprite des images de fond des div.

Nous allons définir les variables dont nous allons avoir besoin :

var i = 0;
var j = 0;
var temp = 0;

i correspondant au pointeur qui va parcourir le tableau d et j celui qui va parcourir le tableau e. temp correspond au compteur d’image. Dans notre Timer, une fois arrivé à 155 images, nous arrêterons l’animation, mais nous verrons cela plus tard.

Etape 3 : Les fonctions du Javascript

Passons maintenant au côté pratique. Nous allons lancer une fonction qui s’appelle Image à l’ouverture de notre page. Nous utiliserons simplement l’appel une fois que JQuery sera chargé. Nous avons donc le code suivant :

$(function() {
	Image();
});

Détaillons maintenant cette fonction Image. Je vous la donne et nous la commenterons après :

function Image(){

	temp++;

	var left = d[i];
	i++;
	var top = d[i];
	i++;
	var width = d[i];
	i++;
	var height = d[i];

	var y = e[j];
	j++;
	var x = e[j];
	j++;

	$("#logo_start").append("<div style='position:absolute; left:"+left+"px; top:"+top+"px; width:"+width+"px; height:"+height+"px; background-image:url(img_sprite.png); background-position:"+y+"px "+x+"px;'></div>");
	i++;
	Timer();
}

Allons-y ligne par ligne.

• temp++ va incrémenter temp de 1. Nous aurons ainsi un indicateur pour savoir à quelle image nous nous trouvons à chaque moment de l’animation.
• var left = d[i] récupère la première coordonnée de positionnement de la div que nous allons créer, ici le nombre de pixels à gauche par rapport au coin haut gauche de la div logo_start.
• var top = d[i] récupère la valeur top de la div de la même manière que left vu précédemment. Nous avons incrémenté i avec i++ afin de passer à la valeur suivante dans le tableau d.
• var width et height récupèrent eux les dimensions de la div que nous allons créer.
• var y = e[j] récupère les coordonnées en y du sprite pour afficher la bonne image de fond dans notre div.
• var x = e[j] va nous donner les coordonnées en x.

Voilà, nous avons tous les renseignements pour créer notre div. Ses dimensions width et height, sa position left et top, ainsi que le background-position du sprite. Nous pouvons donc enfin la créer avec un append de la librairie JQuery. Append va créer un élément HTML dans une balise ciblée à la suite du code existant. Nous aurons donc pas moins de 155 div à l’intérieur de logo_start à la fin de l’animation.

Allons-y :

• $(‘#logo_start‘) cible la div logo_start en JQuery
• append() ajoute donc le html que nous allons lui définir à la suite que ce qui existe déjà dans logo_start.
• Nous créons une simple div que nous stylisons directement avec l’attribut style. Donc position à absolute avec left et top que nous avons récupéré du tableau d. Width et height que nous avons récupérés aussi de d. Puis le background-image du sprite ainsi que ses coordonnées avec background-position que nous avons cette fois récupérés du tableau e.

Pour finir avec la fonction Image, nous faisons appel à un petit Timer qui va temporiser de 50ms entre chaque image notre animation. Nous faisons également un petit test sur la variable temp pour savoir si nous sommes arrivés à 155 images. Si l’animation n’est pas finie, ont envoi le Timer de 50ms qui appellera à nouveau la fonction Image qui dessinera l’image suivante, sinon on arrête tout car l’animation est finie.

Voici le code de la fonction Timer :

function Timer(){
	if(temp!=155){
		setTimeout("Image()",50);
	}
	else{
		return false;
	}
}

Voilà, vous avez tous les éléments de l’animation. Votre animation devrait s’afficher correctement.

On peut ensuite ajouter un bouton de lancement de l’animation. Pour cela il suffit de mettre l’événement sur un clic dans la partie JQuery. On peut par exemple avoir comme événement :

$("#monbouton").click(function(){
	Image() ;
}) ;

Note : Il faut penser à réinitialiser toutes les variables pour repartir d’une animation vierge.

Conclusion

Nous avons vu grâce à la création de ce Doodle que Google utilise des techniques à la portée de tous pour réaliser de très belles animations. Ils poussent cependant la technique avec l’utilisation d’un sprite et surtout de tout un tas de coordonnées à calculer avec une extrême précision.

La conception de ce Doodle est très intéressante car elle permet de voir toutes les étapes de fabrication d’une telle animation. Le graphiste doit réaliser toutes les images du sprite en tenant compte de la technique des append utilisée. Les développeurs doivent calculer toutes les coordonnées. Tout cela pour une animation de 5-6 secondes. Flash n’est donc pas une technologie morte, mais Google nous prouve une fois de plus que les autres technologies ont fait un grand pas en avant ces dernières années afin de réaliser de très belles animations.

Discutons-en…

Nous avons réalisé ce Doodle de cette manière, auriez-vous fait autrement, quelles améliorations voyez-vous en terme technique ? Tous vos avis nous intéressent, n’hésitez pas à en discuter en postant un commentaire.

Dans cette vidéo Sébastien vous transmettra une idée, celle que notre monde industrialisé connait un changement majeur, changement dont chacun d’entre nous peut faire partie.

« Le Marketeur Français » est un consultant en marketing et en croissance explosive, mais c’est surtout un homme qui a compris comment mettre à contribution tout ce qu’il a observé dans le milieu du web et du marketing classique pour monétiser très rapidement son activité et gagner sa vie.

Je ne suis pas en accord avec l’ensemble des mises en pratique mais la théorie est à la fois pertinente et enrichissante, je vous encourage donc à aller lire son blog et à mettre en application ses conseils de la meilleure façon qu’il soit pour transformer « vos clients en fans ».

Formation : Réaliser et promouvoir un site internet (V2)

Au programme de cette formation :

Communiquer sur Internet

• Quelques chiffres clés

La création d’un site web, de A à Z

• Objectifs, cibles, concurrence : définir la stratégie de communication
• Arborescence, contenus : la structure générale
• Conception ergonomique : accès à l’information
• Spécifications fonctionnelles : comment ça marche ?
• Spécifications techniques : quelle plateforme ?
• Conception graphique : la première impression
• Intégration et développement : ça prend forme !
• Recette  : debug et finalisation

Le mobile

• Quelques chiffres
• Déterminez votre stratégie
• Application VS site mobile
• Conception : outils et best-practices
• Développement : Web Apps VS Applications

Un site mais pas seulement

• Stratégie de communication globale
• Facebook : l’incontournable
• Twitter : l’instantané
• Blog : un outil à intégrer
• Newsletter
• Quelques pistes à explorer

Plus d’une cinquantaine de Junior-Entrepreneurs étaient présents et nous souhaitons les remercier chaleureusement ! Nous espérons que vous avez pris autant de plaisir à suivre cette formation que nous avons eu à la donner !

Lorsqu’on travaille en tant que chef de projet, deux solutions s’offrent schématiquement à nous pour réaliser et suivre son planning.
D’un côté Microsoft Project, que beaucoup trouvent trop lourd et complexe. A l’opposé, la bonne vieille feuille Excel remplie de formules.
Celle-ci fait souvent l’affaire, mais s’avère parfois peu pratique, surtout en cas de mises à jour successives de planning.

Entre les deux, on trouve quelques très bons logiciels de gestion de projets comme Merlin ou Omniplan, mais uniquement disponibles sous Mac OSX.

Je vous propose de découvrir Tom’s Planner, une application web dédiée à la gestion de projet et la création de planning en toute simplicité.
L’outil fonctionne en drag’n'drop et au clic-droit, permet d’attribuer des couleurs aux différents métiers impliqués dans le projet (développement, design, intégration…), d’ajouter des commentaires sur les tâches et d’exporter aux formats MS Project, image ou en version publiée en ligne.

L’utilisation de Tom’s Planner est gratuite pendant sa version bêta, toutefois tous les inscrits avant le 31 décembre bénéficieront gracieusement d’un an utilisation.

Site : http://tomsplanner.com/

Cependant, les utilisateurs avancés auront remarqué qu’à force d’accumuler les plugins, le navigateur devient très gourmand en mémoire vive, exemple vu hier après-midi, 250 Mo de RAM utilisés contre 200 pour Adobe InDesign CS4… Sans parler de l’interface qui peut devenir très vite chargée et ressembler à ceci :

Je vous propose donc de découvrir la fonction profil utilisateur de Firefox qui vous permet d’avoir « plusieurs Firefox en un ».

Quelle utilité ?

Firefox permet nativement de créer différents profils avec pour chacun, des préférences et extensions distinctes.
Vous réduirez ainsi le nombre d’extensions activées simultanément et par conséquent la consommation de ressources. Quelques exemples de profils à créer :

• Un profil développement web avec la Developper Toolbar, Firebug, FireFTP et les paramètres d’un éventuel proxy.
• Un profil de veille informative avec les extensions Delicio.us, Evernote, X-marks, Read it later, Pearltrees ou Echofon
• Un profil confort de lecture avec un thème compact, le plugin AdBlockPlus et le bookmarklet Readability.

Comment ça marche ?

Sous Windows, lancez l’invite de commande MS-DOS et exécutez « C:\Program Files\Mozilla Firefox\firefox.exe » –profilemanager
Sous Mac, lancez le terminal et exécutez : /Applications/Firefox.app/Contents/MacOS/firefox-bin –profilemanager

Dès lors, à chaque lancement, Firefox vous proposera son Profil manager avec lequel vous pourrez créer, gérer et démarrer vos profils utilisateurs.