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.

A l'occasion des ateliers Paris Web qui se sont déroulés ce samedi 10 Octobre 2010, j'ai pu tester pour vous un système d'oculométrie. Ce système présenté par Antoine Luu représentant de la société Tobii permet via une caméra et une carte périphérique spécialisée de suivre le mouvement des yeux.

L'objectif est double. Il permet d'une part de filmer les mouvements de l'oeil sur l'écran pour identifier le parcours d'un utilisateur lors de sa visite sur une application et d'autre part de commander une interface. L'enregistrement est restitué sous forme de zones de chaleurs ou retrace le parcours effectué par les yeux de l'utilisateur :

Crédit photo : Monty Metzger - Licence CC

Une partie de cet atelier a été filmé et mis à dipos sur Viméo via Maurice Svay, la voici : 

.

Après un rapide calibrage de l'appareil, j'ai commencé par faire défiler du texte sur la droite de l'écran de haut en bas, puis de bas en haut. La vitesse de défilement varie en fonction de la distance entre l'axe horizontal médian de l'écran et les bords supérieurs ou inférieurs de l'écran. Le même test est effectué pour faire défiler horizontalement des pochettes de CD (Non ! pas Tokyo Hotel ><) sur un axe horizontal.

La prise en "oeil" est très rapide, le défilement se contrôle facilement et j'avoue être bluffé par une telle technologie. La système est disponible pour 20 000 euros environ et est également disponible à la location.

Par ce qu'on en bouffe tous les jours, parce qu'on en parle tout le temps, parce qu'on aime le regarder évoluer et que nous aimons y participer, nous partageons avec vous ce cliché :

Crédit Photo : Emilie Pistorius (CC)

Si vous aussi vous aimez le Web, faites les savoir du 22 au 25 septembre

• Rendez-vous sur http://www.mozilla.org/causes/onewebday/
• Téléchargez-y les posters
• Prenez une photo
• Faites-le savoir sur les réseaux sociaux via les mots-clés adaptés comme #owdposter sur Twitter

Une petite découverte via Karl Dubost : Personas.

Cet outil offre une représentation sémantique de votre image vue par le Web. Comme le souligne les auteurs, cette représentation ne peut être fidèle car les algorithmes sont incapables de différencier les différents homonymes.

Voici le mien à date :

et quelques autres :

George Bush - Président des états-unis 2001 - 2009 :

Kevin Mitnick - Pirate informatique américain :

Chuck Shuldiner - Chanteur et Guitare du groupe Death :

Mario Bros - Un plombier :

Vu les derniers événements, je commençais à douter de la capacitié du Conseil Constitionnel à faire respecter nos droits.

Je suis heureux de m'être trompé car Le Monde vient de publier l'article "Hadopi : le Conseil constitutionnel censure la riposte graduée".

Voici un court extrait, je vous laisse le soin de lire la suite :

"Internet est une composante de la liberté d'expression et de consommation", et qu'"en droit français c'est la présomption d'innocence qui prime"

Voilà, ça c'est fait !

Edit : et pour les archarnés : La "Décision n° 2009-580 DC du 10 juin 2009".

Il y a deux bdlogs que je lis régulièrement car je suis abonné à leur RSS.

En premier lieu, celui de mon pote STPo : "Demain j'arrête" et en second lieu celui de Lewis Trondheim : "Les petits riens".

J'aime beaucoup leur fraicheur et leur spontanéïté car ils reposent, à priori, tous les deux sur du vécu et du quotidien.

Afin de renforcer ses équipes, Digitas France recrute :

• Poste : Développeur Front-End, Monteur HTML, Intégrateur
  • Descriptif : Création de sites, webmastering, estimation de temps
  • Type de contrat : CDI
  • Localisation : Neuilly-Sur-Seine (Métro Ligne 1)
  • Expérience : 2 à 3 ans dans un poste similaire
  • Salaire : selon expérience
  • Scripts : Maitrise (x)HTML, CSS aux standards
  • Langages : Javascript (DOM, jQuery, Prototype, Ajax) bon niveau requis
  • Outils : Maitrise d'un IDE (DreamWeaver, Aptana, HTMLEdit etc....)
  • Les plus : Bonnes connaissances des contraintes web, connaissances de base Flash, PHP ou langages dynamiques), Performance (YSlow, minify etc...), Accessibilité
  • Contact : aleygues [at] digitas [point] com

D'une manière générale si vous êtes passioné(e) du web et que vous pensez avoir un rôle à jour, n'hésitez à me faire parvenir vos CV / Book quelquesoit votre expérience.