J'ai eu la chance de partir à Londres les 10 et 11 juin 2010 par le biais de mon Agence, Digitas France, pour assister à deux jours de conférences aux Webdirections At Media 2010.

Comme je fais parti de l'équipe qui organise les conférences Paris-Web, je ne ferais pas ici un compte rendu des conférences mais un retour sur l'organisation au sens large du terme. Pour les détails des conférences, vous pouvez consulter le blog de Jérémie Patonnier qui s'en est donné à cœur joie. Je me concentrerais sur les conférences, n'ayant pas assistés aux ateliers.

Les conférences se sont déroulées dans le hall "Queen Elizabeth" du "Southbank Centre", composé d'un grand hall et de deux salles de conférences. Les participants sont accueillis par deux files d'attente distribuant les arrivants par ordre alphabétique.

Crédit Photo : Emilie Pistorius (CC)

Nous recevons une sacoche argentée arborant "Webdirection At Media" comportant des plaquettes des partenaires, un cahier présentant les différentes conférences et un cahier de note. Le cahier de conférence est bien fait puisque en face de chaque présentation on dispose d'une page blanche pour prendre des notes. Un tour de cou à la Marque "Opéra" et un badge me sont remis, il est grand et comporte mon nom, mon prénom, le nom de mon entreprise ainsi que mon contact Twitter (enfin non pas moi parce que j'ai la poisse), c'est très lisible et très pratique.

Crédit Photo : Emilie Pistorius (CC)

Au dos du badge se trouve le programme, pas besoin de chercher dans son sac, il suffit de tourner le badge pour voir en clin d'œil où se déroule la prochaine conférence où à quelle heure se font les pauses.

Crédit Photo : Emilie Pistorius (CC)

Crédit Photo : Emilie Pistorius (CC)

Les salles de conférences sont de tailles différentes. La première que l'on peut qualifier de principale doit pouvoir accueillir 700 voire 800 personnes. Seule la moitié basse sera occupée, c'est agréable d'avoir de l'espace. Les sièges sont relativement confortables, mais arrive mi-dos, rien à voir avec ce que l'on peut connaitre chez IBM. Accessoirement quelques prises électriques sont disponibles en début de rangée. La salle dispose d'une très grande scène, avec sur sa gauche un pupitre et dans le fond un écran géant pour dérouler les slides. L'acoustique est très bonne ! L'autre salle est deux fois moins grande mais tout aussi agréable avec une scène surélevée.

Le programme est découpé en deux types de conférences, pour les développeurs et pour les designers, clairement identifiés par des couleurs sur les badges. Les journées démarrent par une première intervention d'1h05 dans la grande salle. Il n'y a pas de track parallèle, ce qui rassemble tous les profils. C'est une bonne idée, dans un monde où ces derniers ont du mal à communiquer, cela nous rappelle que nous sommes bien là pour avancer ensemble et partager. Ceci dit je pense aussi que la présentation d'Andy Clarke était exceptionnelle et qu'il aurait été peut pertinent de faire un track dans l'autre salle. Le "Thé du matin" coupe la matinée et permet de discuter tout en se restaurant : café, thé, grenadine et gâteaux sont disponible en quantité suffisante. Détail léger mais qui a son importance, les toilettes sont grandes ! Deux conférences de 55 minutes suivront avant le déjeuner. A une exception près, les sujets sur le design et le développement sont alternés dans chacune des salles, ce qui implique un gros mouvement de foule entre les deux. Bien qu'il y ait surement une bonne raison à cela j'ai du mal à comprendre ce fonctionnement. Chacune des salles pouvant accueillir la totalité des participants, ce changement n'était pas obligatoire.

Le déjeuner se déroule dans le hall qui comporte plusieurs espaces pour se restaurer. Des repas sont disposés sur des tables à la sortie des salles, des menus végétariens sont également disponibles. Je ne me souviens pas si cette information avait été demandé lors de l'inscription mais c'est bien vu. Une petite barque en plastique ainsi qu'une bouteille d'eau seront le repas. La nourriture est fraiche et bonne mais j'avoue être un peu resté sur ma faim, en bon français j'aurais aimé un morceau de fromage, en bon anglais un muffin !

La pause d'une heure est courte mais suffisante à mon goût. Des stands des partenaires sont disposés et permettent de faire des démos et de pouvoir discuter avec les éditeurs de navigateurs et les éditeurs de services comme Opéra, Yahoo! ou Microsoft. C'est très chouette de pouvoir discuter avec eux des prochaines évolutions / sorties.

L'après-midi sera le miroir du matin avec deux conférences successives, une pause puis une conférence de clôture. A noter que le vendredi midi une session de discussion avec un intervenant, Andy Clarke en l'occurrence, avait lieu dans la petite salle. C'est un format très intéressant où chacun peu intervenir librement et échanger sur ses problématiques. J'aimerai vraiment voir ce format pour Paris-Web car nous avons peut l'occasion d'être physiquement rassemblés entre professionnels et de discuter ouvertement.

Une session de table ronde organisée sous forme de discussion animé par Jeremy Keith se déroule en fin de journée jeudi. J'ai trouvé vraiment dommage que le micro ne circule qu'au bout de 45 minutes. La table ronde ressemble plus à discussion privé de la hype qu'à un réel échange avec le public.

Une petite note sur l'infrastructure réseau : trois réseaux Wifi étaient disponible, un pour le public, un second pour les stands et un troisième pour les organisateurs. Vous ne le savez peut-être pas mais offrir un réseau wifi de qualité à plusieurs centaines de geeks est une mission quasiment impossible, entre ceux qui postent sur les réseaux sociaux, ce qui prennent des notes dans le Cloud, ceux qui blogguent et j'en passe, le réseau fini toujours par s'écrouler. L'idée de fournir différents réseaux et de couper le réseau public afin de privilégier les démos m'a semblé une excellente idée !

L'apéritif communautaire prend place jeudi soir dans le hall accompagné d'une vente à prix cassés des livres rédigés par les conférenciers. Une soirée de clôture aura lieu dans un bar privation juste à côté. Malheureusement nous pourrons pas y participer car notre train nous attend !

Globalement l'organisation est très bonne, pas de retards sur les horaires, des informations claires et précises pour profiter pleinement de l'événement !

Eric Daspet, auteur du blog "Performances Web" organise une soirée autour des performances le 21 juillet 2010. La soirée se déroulera sur les Champs-Elysées à Paris avec la présence de Stoyan Stefanov largement connu pour ses ouvrages et ses outils permettant d'améliorer ses compétences dans ce domaine. Une soirée à ne pas manquer !

Les inscriptions sont ouvertes sur cette page dédiée. Vous y trouverez le déroulé de la soirée, ainsi que l'adresse.

Il arrive que vos clients n'aient pas la possibilité d'installer des applications sur leur poste car ils n'ont pas les droits nécessaires. Dans ce cas, impossible de mettre à jour un Internet Explorer 6 ou d'installer un navigateur performant comme Firefox, Safari ou encore Opera.

Crédit Photo : Emilie Pistorius (CC)

Il existe peut-être une solution du côté de FireFox en version portable, c'est-à-dire une version "standalone" fonctionnant sur une clef usb.

Vous trouverez une version portable de FireFox sur le site de PortableApps.

Une fois l'application téléchargée, lancer l'installation et indiquer le lecteur et le répertoire sur la clé usb.

Concernant les mise à jour, il faut télécharger la dernière version puis écraser le répertoire comportant l'application, les données seront conservées. Une sauvegarde préalable du répertoire ne coûte rien et peut être utile en cas de problème.

Si vous souhaitez passer par la mise à jour automatique de Firefox, faite une copie de votre profil - PortableFirefox\Data\profil, installer la nouvelle version et puis recopiez votre ancien profil dans la nouvelle installation.

La Foire Aux Questions en anglais est bien faite et répondra à vos interrogations.

Les clefs sont prêtes à être livrées et j'espère qu'il n'y aura pas de problématique de sécurité trop fortes sur le poste cible et que cela fonctionnera. 

Si vous avez des retours d'expériences sur ce sujet, n'hésitez pas à nous en faire part dans les commentaires.

Selon vous, l'état de l'art du développement de site internet inclue-t-il la compatibilité cross-browser ?

Un excellent article intitulé "Dégage, Sale programmeur" chez Codingly fait état du programmeur aujourd'hui en france.

Au-delà de ce constat, j'aimerais rebondir sur la question de l'organisation des équipes Front-End dans les entreprises. Les développeurs Back-End n'ont pas subi de changements majeurs dans leur organisation qui existe depuis nombreuses années dans les sociétés de services informatiques. Le passage vers les technologies web s'est faite naturellement avec par exemple la naissance de langages comme JAVA, facile à manipuler pour les développeurs C++, afin de produire des applications web.

Je pense que l'on peut établir la structure suivante :

• Développeur
• Analyste
• Architecte
• Expert technique
• Chef de projet technique
• Directeur de projet technique
• Directeur de pôle technique

Cette structure varie en fonction de la taille de l'entreprise et me semble appropriée.

Du côté du Front-End, c'est complètement différent, peut-être parce que la culture est encore jeune, une quinzaine d'années tout au plus. Par ailleurs, la notion de programmation est très récente car on parle depuis peu de développeur Front-End au lieu de "monteur" ou d"'intégrateur". En effet, l'implémentation de Javascript semblait réservée aux dev. Back-end comme le définit le Portail des métiers du Web pourtant je vois que de plus en plus d'intégrateurs qui aiment ouvrir leurs compétences sur l'utilisation de ce langage de programmation.

Le métier a largement évolué et la programmation a sa place dans le profil du développeur Front-end avec l'utilisation massive d'Ajax et des connaissances qui sont nécessaires à son utilisation. Je pense en particulier à HTML / CSS / XML / Accessibilité mais également à Javascript / JSON, HTTP et les notions de performances qui font que votre application est utilisable. Il me semble que l'implémentation de Javascript a tout à fait sa place dans les compétences du dev. Front-End.

Nous sommes de plus en plus confrontés à des sites web qui sont de véritables applicatifs, comme par exemple Netvibes pour ne citer qu'eux, et qui nécessitent une organisation sur le même mode que les développeurs Back-end.

Je vous encourage vivement à vous positionner en tant que tel sur vos CV et à motiver cette idée dans vos structures. Comme le disait Stéphane, lors de sa conférence à Paris-Web 2009, "Intégrateurs, montez au Front", communiquez et répétez sur l'évolution de notre métier. Nous avons besoin d'experts pour intervenir en amont des projets pour établir et corriger la faisabilité des projets. Nous avons besoin d'architectes et de chefs de projet technique pour spécifier et s'interfacer avec les équipes fonctionnelles et les développeurs Back-End.

Le développement Front-Office ou Front-End (en opposition au Back-Office ou Back-End) concerne les technologies qui vous sont nécessaire pour nécessaire pour construire une ou plusieurs pages web.

On retrouve des protocoles comme par exemples HTTP, des langages de script comme HTML ou CSS ou encore des langages de programmation comme Javascript. La plupart des ces ressources sont en anglais, certaines sont traduites en français.

Je vous recommande d'abord la base sous forme d'un guide de démarrage sur HTML écrit par David Ragett : http://www.w3.org/MarkUp/Guide/ et celui de Normand Lamoureux : http://normandlamoureux.com/cours/xhtml/page-002.html pour les francophones.

Les documents officiels

Voici une liste non exhaustive des ressources que vous devez consulter pour appréhender le développement Front-Office :

• HTML 4.01 : http://www.w3.org/TR/html4/ / 
• XML : Les essentiels : http://www.w3.org/standards/xml/core
• XHTML 1.x : http://www.w3.org/TR/xhtml1/ / http://www.la-grange.net/w3c/xhtml1/
• CSS 2.0 : http://www.w3.org/TR/1998/REC-CSS2-19980512/ / http://www.yoyodesign.org/doc/w3c/css2/cover.html 
• Javascript : https://developer.mozilla.org/en/JavaScript ainsi que son introduction https://developer.mozilla.org/en/A_re-introduction_to_JavaScript
• Document Object Model Level 1 : http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html
• Document Object Model Level 2 : http://www.w3.org/TR/DOM-Level-2-HTML/html.html
• Web Content Accessibility Guidelines  : http://www.w3.org/TR/WCAG/
• Status HTTP : http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
• URL : http://tools.ietf.org/html/rfc1738

Lire ces document prend du temps, ils sont souvent longs, touffus mais ils ont le mérite d'être assez clair. Je ne les connais pas personnellement par coeur mais j'ai dans un coin de mon bureau, un dossier qui me permet d'atteindre ces références rapidement. Je vous conseillerais de commencer par regarder les sommaires afin d'avoir une impression générale et de pouvoir recherche plus rapidement une information par la suite.

De bonnes lectures

Il existe également des ressources qui donnent des exemples concrets d'implémentations, par chance il en existe de très bonnes dans le monde francophone, je vous laisse découvrir par vous même ces sites, la curiosité vient en complément de vos lecture !

• Openweb : http://openweb.eu.org/
• A list part :  http://www.alistapart.com/
• Pompage : http://www.pompage.net/
• Performance Web : http://performance.survol.fr/
• HTML Zen Garden : http://www.htmlzengarden.com/

De bons outils

Maintenant que nous savons ce que nous devons utiliser voici de bons outils pour les implémenter et les afficher :

• Aptana : http://www.aptana.org/
• FireFox : http://getfirefox.org
• FireBug : http://getfirebug.com/
• Web Accessibility Toobar : http://www.wat-c.org/tools/

Et bien évidemment les conférence Paris-Web : http://www.paris-web.fr/ qui permettent de baigner dans les discussions autour de ces technos.

J'utilise depuis longtemps un script de Scott Edwards avec une petite adaptation, pour le rendre privé, pour gérer des cookies, c'est extrêmement simple :

/*
 * @name cookie
 * @createCookie (method) static
 * @readCookie (method) static
 * @deleteCookie (method) static
 * @param sName (string) Cookie variable name
 * @param sValue (string) Cookie variable value
 * @param iDays (integer) Cookie duration in days; empty is for session
 */

(cookie = function (){
                               
        //Based on Scott Andrew script
        this.createCookie = function createCookie(sName,sValue,iDays) {
            if (sDays) {
                var dDate = new Date();
                dDate.setTime(dDate.getTime()+(iDays*24*60*60*1000));
                var sExpires = "; expires="+date.toGMTString();
            }
            else var sExpires = "";
            document.cookie = sName+"="+sValue+sExpires+"; path=/";
        }; //createCookie
        
        this.readCookie = function readCookie(sName) {
            var nameEQ = sName + "=";
            var ca = document.cookie.split(';');
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
            }
            return null;
        }; //readCookie
        
        this.deleteCookie = function deleteCookie(sName){
            dDate = new Date;
            dDate.setFullYear(dDate.getFullYear()-1);
            createCookie(sName, null, dDate);
        }; //deleteCookie
        
        return {
            
            createCookie : this.createCookie,
            readCookie : this.readCookie,
            deleteCookie : this.deleteCookie
            
        }
            
    })(); 

Si je veux créer un cookie, il faut instancier l'objet cookie :

cCookie = new cookie();

puis appeler la méthode createCookie(); avec les paramètres nécessaires, si l'on omet le troisième, le cookie est valable le temps de la session :

cCookie.createCookie( 'hasVisited', 'true', 10 );

pour le lire, on rappelle le nom de la valeur à lire :

cCookie.readCookie( 'hasVisited' );

et enfin pour l'effacer on appelle la méthode deleteCookie(); avec toujours le nom de la valeur à supprimer :

cCookie.deleteCookie( 'hasVisited' );

Attention la valeur du cookie 'hasVisited' est de type String et non booléen, ainsi pour comparer la valeur, on utilise :

if ( cCookie.readCookie('hasVisited') == 'true' ) instructions

et non

if (cCookie.readCookie('hasVisited')) instructions

qui serait toujours faux.

http://sixrevisions.com/design-showcase-inspiration/25-elegant-workstations-for-your-inspiration/

http://portablecontacts.net/

http://meyerweb.com/eric/thoughts/2009/09/07/html5-and-you/

http://oseres.com/fr/2009/06/un-iphone-geant-24.html

http://www.mnot.net/cache_docs/index.fr.html

http://10gui.com/video/

http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/

http://www.webdesignerwall.com/tutorials/css-design-out-of-the-box/

http://hacks.mozilla.org/2009/10/orientation-for-firefox/

http://datavis.tumblr.com/#213657045

http://wiki.github.com/fnagel/jQuery-Accessible-RIA

http://sixrevisions.com/infographs/browser-performance/

... et c'est sur http://moresoon.org/ que ça se passe...

• NTT DATA Auto Terminal
• Homepage
• NTT DATA Auto Terminal

Premier billet de liens en vrac !

• http://lite.facebook.com/ , un FaceBook lite avec moins de bling bling et plus de rapidité, idéal pour les machines et pour gagner du temps
• Stéphanes Deschamps sur les tailles fixes versus les tailles relatives qui date un peu mais qui reste pertinent (via HTMLZenGarden)
• Google Search Insight pour afficher des tendances de recherche en fonction de mots-clefs :

et pour se détendre les neurones :

• Chevalier et Laspalès : "Le train pour Pau", "Y'en a qui ont essayé ils ont des problèmes, cela dit il est très rapide !"
• Elie et Dieudonné : "La pêche", "Comment Nicole n'est pas chez sa mère ?"
• La classe américaine : "Le Orlando" - "Perdu ! Parce que c'est aussi moi qui t'aies vu le deuxième"
• La classe américaine : "La ferme" - "A la ferme ? quelle ferme ?"