Photo de samgrover depuis Flickr

Découverte

Lors de la création de mes premières pages web, j’utilisais un outil WYSIWYG et je gérais les alignements comme je le pouvais à coup de marge plus ou moins épaisse, de toutes façons, je ne me préoccupai que du rendu d’IE 5, et vu ce que l’on trouvait à l’époque sur le web, ce n’était pas si mal.
Le passage à une écriture de code à la main, m’a permis de supprimer toutes les fioritures inutiles ajoutées par mon outil précédent. Je me suis vite rendu compte que le résultat était tout de même plus joli, mais basique.
L’arrivé de nouveaux navigateurs à compliqué la donne, le rendu approximatif se révélant au mieux presque correct, au pire vraiment aléatoire.
J’ai toujours souhaité travailler avec un code propre, en évitant les hacks pour corriger les défauts d’implémentation des navigateurs, j’estime que ce n’est pas à moi de le faire. Mais si je peux avoir un code qui passe partout, je ne m’en prive pas.
Et peu à peu ma veille permanente m’a fait découvrir des techniques de mise en page plus évoluées. J’ai suivi cela de plus ou moins loin, en n’en gardant que la théorie, mais sans mettre plus que cela en pratique. Il me semblait clair que c’était une voie à étudier, une solution à mette en œuvre, mais il y a tellement de chose à faire…

Révélation

La conférence sur la micro-typographie de David Rault m’a rouvert les yeux L’illumination est venue d’Anne-Sophie Fradier. Je ne reviendrai pas sur la qualité de sa prestation à Paris Web 2010, mais sur la pertinence du contenu, qui m’a définitivement donné envie de m’y mettre. En une heure elle me présentait un condensé de ma veille avec de jolis exemples, je ne pouvais plus éviter le sujet. Cela tombe bien j’avais un site dont j’étais globalement content, avec des pistes graphiques intéressantes, mais qui pêchait sur certains aspects, et je voyais bien que j’étais désormais dans la bonne direction !
Il ne me restait plus qu’à laisser mûrir tout en me remettant activement dans la technique.

Mise en situation

Vincent Valentin à eu la bonne idée d’écrire à ce moment une série de billets qui m’ont enthousiasmé, et guidé dans mon entreprise. Il y reprend la partie technique avec des exemples précis, un vrai retour d’expérience, sur les outils qu’il utilise et surtout pourquoi. Il y explique le cheminement de ses réflexions, bref comment il travaille. Bien sûr, lui est intégrateur, moi je fais juste de l’intégration. Il m’a donc fallu plusieurs lectures, et quelques autres billets pour bien me remettre au goût du jour, et j’ai commencé par tâtonnements à reprendre mon projet.
Après quelques essais, j’ai décidé de ne pas tout utiliser, et j’ai laissé de coté Les grilles toutes faîtes, et les compilateurs CSS. Les premières car l’utilisation avec les media-queries me semblaient ajouter de la complexité (même si Vincent propose une solution) le second car c’est un projet simple, inutile de trop compliquer la tâche. Cela viendra donc dans un second temps.

Mise en pratique

Le projet initial était finalement assez simple, avec quelques images, mais finalement, beaucoup de dégradés ou de coins arrondis. L’alignement sur la grille ne poserait donc pas trop de problème en découpe d’images.
Je suis donc reparti de feuilles de styles vides, et quitte à reprendre le code en y ajoutant une dose de CSS3, autant revoir le balisage et passer à HTML5. Cette partie fut vite expédiée. La lecture récente des deux premiers opus de la collectionA book apart m’ayant remis les idées en place sur le sujet.

J’ai ensuite pris le temps de tester plusieurs largeurs de grilles et de colonnes avant de trouver mon bonheur, avec une possibilité de mettre en page sur une, deux, trois ou cinq colonnes (Il existe du coup d’autres possibilités que je n’utiliserais pas, restons simples, à mon sens trop de colonnes tuent les colonnes).

L’utilisation de Hashgrid a été précieuse pour cette partie du travail, en me permettant de visualiser l’invisible.

Certaines pages de contenu ne me convenaient pas du tout, mise en page simpliste, alignements maladroits, même si au premier abords, je n’aurai su dire pourquoi et comment le corriger. Je ne suis pas non plus graphiste…
J’avais bien prévu de les refondre, mais comment ? Finalement c’est venu tout seul… Sans rien faire d’autre qu’utiliser ma grille pour remettre en place les différents blocs de contenus, tout s’est éclairci, et au fur et à mesure les textes se sont mis en page aidés par la grille horizontale et par la grille verticale. Tout en gardant un rendu « simple », le tout devenait harmonieux (à mes yeux, pas vous ? mince…)
Le travail en parallèle sur les polices et les hauteurs de ligne, a bien aidé, et à même simplifié le travail. La règle ajoute des contraintes, oblige à se plier à certaines obligations, mais au final, libère ! Plus de rendus approximatifs, plus d’hésitations, on se fie à la grille et c’est tout. Finis aussi les effets de bord quand on ajuste d’un côté et que casse de l’autre…

Il y a pour moi trois étapes :

• L’ignorance de la règle
• Son apprentissage et sa mise en application
• Son appropriation et son contournement

Et un outil, si bon soit il doit être utilisé à bon escient. Pas question d’appliquer bêtement une règle, une réflexion s’impose. Alors bien sûr il m’est arrivé de contourner certaines règles. Les raisons sont variées, mais tout ne peut pas rentrer dans une grille, parfois quelques éléments ont besoin de plus ou moins de place, à l’œil, on sent que quelque chose ne passe pas bien ,que tout est trop rigide… Il faut donc s’échapper du carcan, pour trouver la solution. Il faut trouver une exception, la règle a beau l’air parfaite, il existe des cas particuliers. Il s’agit alors de ne pas faire n’importe quoi, au risque de perdre une partie du bénéfice acquis, mais de trouver une justification raisonnable qui apporte une solution au problème. Et j’ai finalement souvent trouvé cette solution dans d’autres grilles, dans des « sous-grilles », en répétant ma grille d’origine différemment, en appliquant les mêmes marges mais autrement…

La macro-typographie ça marche !

Retour d’expérience

Au final, il m’aura fallu quelques heures/jours de montée en compétence entrecoupées de temps de réflexions, d’essais pratiques, et de remise en question pour arriver à mon résultat. Il reste encore du travail, tout n’est pas fini, l’adaptation aux navigateurs mobiles est en cours, mais il est déjà temps d’en tirer des conclusions.
Je retiens que si j’y ai passé du temps au début, je n’en ai pas perdu pour deux raisons :

• Le résultat final est meilleur
• J’ai gagné du temps sur d’autres aspects de l’intégration

Et sur mes prochains projets, ce sera encore plus vrai.

Ressources

Billets

• Macro typographie sur le Web – une grille dynamique
• Macro-typographie sur le Web – Mise en pratique
• Macro-typographie sur le Web – Quelques outils
• http://snook.ca/archives/html_and_css/font-size-with-rem

Vidéos

• conférence sur la micro-typographie
• sa prestation

Alors que dire de plus, regardez les vidéos, lisez les quelques références ci-dessous, essayez, testez, et dites moi comment vous vous en sortez, ce que cela vous apporte, si cela vous bride ou non…

Moi j’y retourne, j’ai encore un peu de travail…

Sur le même thème

• Bien utiliser les feuilles de style (CSS)
• Optimiser son site web
• Internationalisation & localisation
• Livre : HTML5 pour les webdesigners
• Développer sous Ubuntu

En tant que développeur Java, mais surtout PHP, souvent sur Linux mais parfois sous Windows, Eclipse s’est imposé à moi, par son adaptabilité et aussi son prix. Il possède d’autres facettes bien sympathiques, c’est l’objet de ce billet !

Photo de robotson depuis Flickr

Présentation

Eclipse est un IDE libre, multiplateforme (Linux, Windows, Mac), développé en Java.
A l’origine développé pour Java il s’est vite imposé comme une référence dans le monde Java, mais il prends de plus en plus de place dans l’écosystème PHP.

Sa conception modulaire, constituée de dizaines de plugins branchés les uns sur les autres en fait un projet facilement extensible.

C’est ce qui à permis d’avoir aujourd’hui différentes branches officielles ou non. Voici les plus connues :

• JDT, la base pour Java
• PDT, lié à Zend Studio
• Zend Studio, version customisée graphiquement et plus avancée que PDT
• RAD successeur de WSAD développé par IBM

Il existe d’autres distributions, officielles ou non, payantes ou gratuites constituées de multiples plugins et optimisées pour un usage précis.

Il faut noter que le développement du cœur de l’application comme des plugins principaux est très active, avec des nouveautés régulières.

Installation

Eclipse est complètement indépendant de la plateforme sur laquelle il est installé. En fait il n’est pas vraiment installé, il s’agit ni plus ni moins que d’une copie de fichier. Il ne faut donc pas de droits particuliers pour le faire fonctionner. Eclipse à donc de fait la particularité de pouvoir être utilisé sur une machine en parallèle avec d’autres versions d’Eclipse.

Ainsi, plutôt que d’avoir une version d’Eclipse avec les plugins JDT et PDT, n’hésitez pas à installer plusieurs branches, qui pourront vivre séparément avec chacune ses workspaces, ses plugins et son paramétrage.

Gestions des workspaces

Au premier lancement, Eclipse demande de définir un espace de travail. C’est ici qu’il stockera les informations relatives à votre travail. Vous pouvez en créer autant que vous le souhaitez, c’est particulièrement utile quand on travaille sur des projets qui n’ont rien en commun, et qui pourront ainsi avoir leur espace de travail dédié, paramétré au plus près des besoins et sans superflu.

Vous pouvez facilement switcher d’un espace de travail à un autre et même lancer deux instances de votre installation d’Eclipse avec des workspaces différents ! Utile pour comparer deux projets !

Configuration

La configuration d’Eclipse est très complète et même complexe au premier abord. Elle mérite que l’on s’y attarde un peu pour la maîtriser correctement.
La configuration se fait dans un premier temps au niveau du workspace, puis au niveau du projet.

On a ainsi une configuration globale commune à tous les projets avec la possibilité de surcharger celle ci pour des cas précis.

Le gestionnaire de configuration dispose d’une fonctionnalité très pratique de recherche par mot clé, indispensable pour gagner du temps !

Ajout de plugins

Il existe une multitude de plugins, certains soutenus par Eclipse, d’autres indépendants. Certains nécessitent l’installation d’autres plugins pour fonctionner.

Vous en trouverez pour :

• La gestion de version
• L’édition de fichier XML
• L’édition de fichier de traduction
• Maquettage
• Gestion de serveurs web
• Revue de code

Et encore tout plein… (un bon millier !)

• Site officiel des plugins Eclipse

Développement de plugins

C’est une fonctionnalité sous utilisée car peu connue, mais pourtant bien pensée et relativement simple à mettre en place. Des plugins simples mais utiles peuvent être écrits en quelques minutes, pour par exemple vérifier qu’une règle sur le nommage des variables est bien respectée.

• Eclipse Plugin Development
• Cours de Mickael BARON sur developpez.com
• Cours de Lars Vogel en anglais

Je vous invite bien sûr à mettre vos plugins, à la disposition de la communauté, qui pourra les réutiliser et les enrichir !

Pour aller plus loin

Eclipse c’est toute une communauté, avec différents canaux de communication et d’entraide, vous trouverez donc toute l’info dont vous avez besoin sur la galaxie Eclipse…

• Des webinars
• Un wiki
• Un planet
• Des forums

Pour finir…

A vrai dire, depuis 2005 que j’utilise Eclipse, je n’ai jamais pris le temps de m’y mettre, mais la présentation du sujet au Forum PHP 2008, m’avait bien plu.

J’aimerai avoir vos retours d’expérience sur l’utilisation d’Eclipse en général et sur la création de plugins en particulier ! A vos claviers !

Sur le même thème

• Outils : Edition de fichiers avec Notepad++
• Outils XML : Cooktop
• Les bons outils pour PHP (partie 2)
• La gestion des versions
• Comparaison et fusion de fichiers et de dossiers

Certains site surfent sur la vague de la notation d’entreprise, mais entres les faux commentaires postés par des DRH en mal de recrutements et les aigris qui qui ne jugent pas de manière objective, difficile de trouver un avis sincère.

Ayant eu moi même des expériences diverses, voici mon ressenti.

Photo de REMY SAGLIER – DOUBLERAY depuis Flickr

SSII

Souvent le passage obligé quand on sort des études, surtout si on ne sait pas exactement ce que l’on veut faire. Elles sont critiquées, souvent à raison, mais certaines sont bien pires que d’autres, pour ma part je n’ai pas eu à m’en plaindre, au contraire. J’y ai eu des missions variées qui m’ont permis de gagner en assurance, de travailler chez des clients très différents, avec des méthodologies variées et de rencontrer beaucoup de monde.

Les SSII permettent une montée en compétences rapide, et en début de carrière c’est à mon avis un choix pas plus mauvais qu’un autre. Mais faîtes tout de même attention à bien la choisir ! Il ne faut pas se focaliser sur la mission proposée, bien souvent vous ferez tout autre chose, c’est pourquoi il vaut mieux s’attarder sur l’ambiance générale, les moyens mis en œuvre pour al réussite des missions, le feeling avec le commercial ou le directeur d’agence…

Sans expérience les salaires sont peu élevés, n’attendez pas qu’on vous augmente significativement, regardez ailleurs pour voir ce que l’on vous propose, ensuite négociez ou changez !

Éditeur logiciel

Pour les mêmes raisons j’ai moins apprécié le travail chez un éditeur de logiciel. Arrivé en cours de projet, le travail et les technos était limités à l’existant, avec quelques évolutions sympas à développer, mais un périmètre trop restreint m’a poussé à aller voir ailleurs. Le risque de rester cantonner sur un même projet des années à faire de l’intégration pour des clients ou de la TMA sans rien de plus, ce n’était pas pour moi. Ceci dit certains y trouvent leur compte et peuvent s’investir à fond sur du long terme, avec l’assurance d’horaires moins contraignants, un environnement moins changeant…

Attention tout de même à ne pas trop vous enfermer et à évoluer, vous ne resterez pas 40 ans dans la même boite et le changement peut s’avérer rude.

Petite web agency

J’y ai travaillé en sous traitance pendant plus d’un an, et j’y ai apprécié la convivialité, la taille des projets, l’étendue des compétences demandées et l’autonomie accordée… On se rapproche d’un travail d’artisan du web., mais en équipe. Il faut bien sûr avoir un minimum d’expérience purement web, de la curiosité, l’envie d’apprendre, pour une expérience enrichissante !

Grosse web agency

C’est mon expérience actuelle, j’ai encore peu de recul, mais c’est pour le moment exactement ce que je recherchai !
Pour autant je ne me plairai pas chez n’importe quel concurrent, en effet mon choix était motivé par certains pré-requis indispensables à mon épanouissement professionnel :

• Qualité des projets
• Moyens mis à disposition
• Niveau d’expertise
• Valeurs humaines

Aujourd’hui c’est nickel, avec les quelques bémols qui font que rien n’est jamais parfait, mais qu’on est motivé pour les surmonter et améliorer encore ce qui peut l’être.
Pas évident d’être tout à fait objectif, en plus je ne suis pas sûr du tout que ca ressemble à ce qui se fait dans d’autres structures de taille équivalente ou je n’ai pas d’expérience, j’attends vos retours !

Indépendant

C’est une situation un peu particulière que je n’ai jamais vraiment développée, même si j’y ai rapidement pensé. Je manquait certainement d’expérience à ce moment là, et j’aurai eu du mal à m’en sortir, je ne suis pas assez « commercial ». Le côté positif c’est l’indépendance, le côté négatif c’est que l’on ne peut compter que sur soi même. Aux qualités de développeur il faut ajouter celles de commercial, et assez peu de gens peuvent gérer correctement ces deux aspects. Pensez aussi que c’est un cadre de travail ou l’on se retrouve plus souvent seul, ou il faut des compétences pour gérer son réseau, rencontrer du monde, échanger techniquement…

Financièrement les fortunes sont diverses, l’expérience et la qualité de votre réseau faisant bien souvent la différence. C’est pourquoi, avec une bonne expérience et des connaissances solides, cela peut être une piste à explorer. Mais pas pour moi qui ai besoin de l’émulation qu’apporte le travail en équipe, les échanges techniques, la vie de bureau…

Associations

Si les petites associations ne font souvent appels qu’a des bénévoles ou à des compétences internes, limitées, de plus grosses associations peuvent être un bon tremplin pour débuter. , le modèle économique ne permettant pas forcément mieux. Mais ce n’est pas forcément vrai et si en plus vous adhérez la cause de l’association, ce n’est que du bonheur !

Les dernières annonces que j’ai vu dans ce domaine étaient clairement sous payées, mais les postes étaient super intéressants ! à mon avis un très bon moyen de faire ses preuves en toute autonomie avant de voir plus grand !

Petit client final

On peut y retrouver les avantages de la petite web agency comme les inconvénients de l’éditeur logiciel. Une grande autonomie, et toujours le même projet… Évidement les cas sont variés et sur un projet à temps plein, on a l’occasion de mettre en place énormément de concept, de technos, de savoirs faire… Si l’intégration avec le reste de l’équipe, développeurs ou non est bonne, cela peut être une très bonne expérience, mais comment évoluer dans une petite structure ? Pensez-y !

Gros client final

C’est un peu comme le petit client final, mais avec une équipe plus développée, beaucoup de PME d’envergure nationale ou internationale, on un service informatique qui gère leur site web et quelques sites évènementiels, parfois en sous traitant à des web-agency, et là on se retrouve du côté du client. Encore un poste avec énormément de potentiel.

Les postes chez ce genre de clients ne sont pas les plus faciles à trouver, bien souvent il faudra passer par une mission via une SSII avant de se faire embaucher par le client. Un bon moyen de voir si le job plait ou pas. Dans cette catégorie, il y en a clairement pour tout les goûts !

Et encore…

On pourrait aussi citer le cas de l’employeur un peu en dehors du web, industriel qui privilégie les process métier ,mais qui utilise l’outil web pour des intranets. Vous ferez certes du web, mais certainement de manière moins sexy qu’en web-agency. Vous pouvez aussi bosser dans le web à titre perso, afin de gérer vous même votre boutique en ligne, par nécéssité ou par plaisir en tant qu’activité annexe…

Conclusion

Les occasions de travailler dans le web sont nombreuses, mais encore une fois, attention de ne pas se laisser enfermé dans un projet ou une techno, le web évolue vite et il est primordial de faire de une veille technique régulière, de se tenir informé des évolutions techniques sous peine d’être largué et plus du tout au goût du jour.
Pensez aussi que vous ne trouverez pas le poste rêvé du premier coup, qu’il faudra démontrer vos capacités à évoluer pour, après quelques changements, avoir un poste qui vous convienne bien… Jusqu’à la prochaine évolution, qui ne sera peut être possible qu’en s’investissant dans une autres structure…
Le principal est de se sentir bien au moment présent ! Je vous souhaite de l’être autant que moi !

Et vous ?

J’attends vos réactions et commentaires, vous travaillez comment vous ?

Sur le même thème

• Comment apprendre le développement web ?
• La compatibilité du code avec les navigateurs
• Veille techno Web de A à F (partie 1)
• Trouver un bon hebergeur web, quels critères ?
• Outils : Edition de fichiers avec Notepad++

Heureusement, dans tout projet digne de ce nom, on met en place des procédures plus ou moins développées pour tester le code dans de bonnes conditions afin d’éviter les surprises et les régressions.

Toute un série de tests permettent de valider le côté qualitatif du projet. Ils sont rarement tous mis en œuvre, souvent partiellement, sauf sur des projets stratégiques, et bien souvent on prend juste l’essentiel. C’est souvent suffisant pour arriver à un résultat correct, même si il en faudrait parfois un peu plus…

Photo de Oncle Tom depuis Flickr

Que tester ?

L’idéal est de tout tester mais certains tests peuvent être décorrélés du reste. La configuration du serveur, les scripts de mise en production ou de maintenance ou encore le paramétrage des noms de domaines ne sont pas nécessaires à toutes les étapes du développement. On peut souvent les tester séparément du reste sans risques, jusqu’à l’assemblage final en pré-production. Sinon que ce soit des tests de bas niveau, dans le code ou fonctionnels, ils permettront de s’assurer que l’on répond le plus précisément au besoin exprimé.

De toutes façon, tout doit être testé, plus ou moins suivant les cas, on n’imagine pas laisser la moindre place au hasard dans ce processus..

Quels types de tests ?

A chaque étape du développement les tests doivent s’enchaîner, de plus en plus précis, pour arriver au final à une application avec un minimum failles.

Test unitaires

Ce sont parfois quasiment les seuls tests réalisés avant la recette. Ce sont les premiers effectués, directement par les développeurs. C’est évidemment une mauvaise pratique de laisser le soin au seul développeur de tester son code et le fonctionnel rapidement entre deux développements. Le test fait en ayant connaissance du code est toujours orienté, et si le fonctionnel était mal compris son application sera forcément à revoir…

Tant que ces tests ne sont pas automatisés ou au moins effectués par une tierce personne et suivis dans un cahier de tests ils sont quasiment inutiles car limités à des cas non exhaustifs et non reproductibles. La création d’un cahier des tests permet de limiter les effets négatifs, mais rend souvent le travail moins intéressant et parfois rébarbatif…

Et certains tests qui touchent à l’ergonomie ou aux bonnes pratiques ne peuvent être faits de manière automatique car ils requièrent une faculté d’analyse et un œil expert. Le recours à un spécialiste du sujet peut s’avérer décisif si le niveau de qualité à atteindre est conséquent.

Tests unitaires automatisés

Qu’ils soient côté serveur ou côté client, l’automatisation et la réutilisation sont leur point fort !

Côté serveur des frameworks comme JUnit ou PHPUnit permettent de tester de manière efficace les fonctions d’un projet. On teste avec différents paramètres en entrée et on vérifie la sortie sans oublier les cas devant générer des erreurs afin de vérifier que le comportement attendu est le bon.

Coté client des outils comme BadBoy ou Sélénium permettent d’enregistrer des macros et de les rejouer à volonté. On s’assure ainsi qu’il n’y a pas de régression fonctionnelles.

Ces tests automatisés peuvent être lancés après l’ajout d’une fonctionnalité ou la correction d’un bug de manière à éviter les régressions. On peut ainsi tester efficacement et complètement les différentes fonctionnalités développées. Ils peuvent aussi être utilisés de manière automatisée sur une plateforme d’intégration continue.

Avec cette méthode, on capitalise énormément, les tests sont rejouables à l’infini par le client qui peut s’assurer de la bonne conduite du projet et même par une équipe différente qui devrait reprendre le développement ou la maintenance.

Les test peuvent même être à l’origine des développements. En les écrivant avant, on s’assure de bien répondre à chaque cas. Le développement sera validé quand tous les tests passeront.

Quels environnements ?

Environnement de test local

Il évolue souvent en cours de route, suivant l’évolution du cahier des charges, des test des développeurs, des différents projet sur lesquels on peut être amené à travailler simultanément. Il n’est pas toujours évident de tout cloisonner et ce n’est pas forcément nécessaire. A ce stade il peut être intéressant pour les différents acteurs d’avoir une plateforme de travail sans liens communs. C’est particulièrement vrai chez un éditeur de logiciels, qui ne maîtrise pas forcément la plateforme cible de ces clients. Cela permet de capitaliser sur des expériences variées et de pouvoir répondre à un besoin différent facilement.

Pour avoir sous la main des environnements divers et variés pour tester différents clients web par exemple, le recours à des machines virtuelles ou « VM » est d’un grand secours. Vous pouvez ainsi avoir facilement sous la main plusieurs OS, et navigateurs dans des versions hétéroclites. Que ces VM soient sur votre poste ou en réseau, accessible à distance, elles vous permettront de faire vos tests dans d’excellentes conditions.

Environnement de recette

L’environnement de recette doit être proche de l’environnement final, au moment du développement il m’est arrivé assez souvent de ne pas connaitre précisément l’hébergement cible, on peut cependant partir sur les bases évidentes. Choix du langage, des version majeures des différents composants, paramétrages… Le but est d’être au plus près possible de la cible, de manière à ne pas avoir de mauvaises surprises par la suite. Évidemment plus tôt on aura une image précise du serveur de production, et mieux on pourra affiner cet environnement.

Environnement de pré-production

L’environnement de pré-production doit être une copie exacte de l’environnement de production, avec un paramétrage exactement similaire et des données de production. Et l’on ne peut transiger sur aucun de ces points ! Il faudra bien sûr veiller à répliquer et documenter immédiatement le moindre changement.

A chaque fois que l’on m’a imposé une différence si minime soit elle, une erreur est apparue en production. Le plus souvent très légère, c’est vrai mais quel intérêt de faire ce test si il n’est pas exhaustif

Conclusion

Les tests doivent être la base de tout développement, qu’ils soient faits de manière humaine ou automatisée, leur régularité permet d’anticiper les dérives et de corriger rapidement les erreurs.
Des contraintes temporelles ou budgétaires viennent souvent limiter leur mise en application, pensez alors à faire valider régulièrement l’avancée du projet par le client, à défaut de tests, c’est à lui de prendre ses responsabilités.

Sur le même thème

• Trouver un bon hebergeur web, quels critères ?
• Bien définir son projet de site web
• Optimiser son site web
• Fournir un webservice et son API
• Maquettage avec Pencil Sketching

Photo de minusbaby depuis Flickr

Mais il faut surtout se doter des bons outils…

Communication

La communication est la base du travail d’équipe. Il est important de connaître son équipe visuellement. Le contact physique apporte beaucoup dans la relation et facilite les échanges à distance. L’information doit y circuler facilement pour avancer efficacement. Il faut privilégier des points réguliers et pas trop longs pour pouvoir réagir rapidement en cas de problème, garder une certaine dynamique, et garder un auditoire actif.
Il est aussi important de connaître son équipe visuellement. Le contact physique apporte beaucoup dans la relation et facilite les échanges à distance.

Réunion

Rien de pire que les réunions à rallonge ou rien ne se décide, mais elles sont pourtant indispensables pour avancer. L’idéal à mon avis est de les limiter tout en les multipliant. Je m’explique. Moins de réunions longues avec toute l’équipe, mais plus de réunions courtes voire très courtes avec juste les personnes concernées pour faire des points d’avancements, des points techniques…

Pour qu’une réunion soit efficace, elle doit capter les intervenants et les faire participer sans les lasser !

Messagerie instantanée

Que ce soit via MSN ou un protocole XMPP, ou encore via de nouveaux outils comme Google wave, la messagerie instantanée est indispensable au quotidien pour échanger rapidement sur des sujets peu sensibles mais qui nécessitent une réponse simple et rapide.

Mails

Le mail a l’avantage de pouvoir garder une trace des échanges, avec éventuellement un tri par conversations, par projet… Intéressant pour archiver des demandes ou des décisions dont on pourrait avoir à prouver l’existence.
C’est à mon sens uniquement à cela que doivent servir les échanges par email. Ils ne devraient jamais contenir de données sensibles ou stratégiques, mais annoncer leur disponibilité et leur emplacement. Ceci pour des raisons évidentes de sécurité et pour éviter d’avoir de multiples versions de documents en cours d’utilisation.
Si l’on vous envoie un document, des données, classer les sur le réseau dans un wiki, mais pas dans vos mails, ce n’est pas fait pour cela.

Téléphone

A mon avis, très proche de la messagerie instantanée, les mêmes contraintes voire plus si le destinataire de l’appel est absent.
N’oubliez pas de valider les points importants par un mail récapitulatif.

Visio-conférence

Indispensable pour du travail à distance, même si l’on ne s’en sert pas systématiquement, elle apporte un plus, couplée à des outils tels que des tableaux blancs, elle apporte de l’interactivité et simplifie les rapports humains.

Sources & documentation

Tout projet de développement n’existe pas sans sources et documentation. A plus ou moins grande échelle il est vrai. C’est pourquoi il est primordial de mettre en place les outils et les processus associés pour gagner en productivité et en qualité.

Gestion des versions

C’est l’outil de base, et pourtant tout le monde ne l’utilise pas encore. Au forum PHP 2009, pas plus de la moitié de l’audience d’une des conférences n’a levé la main pour dire qu’il l’utilisait. Je m’attendait à du 99%, surtout au regard de l’assistance plutôt « geek ».

Indispensable pour travailler en équipe sur un même projet et en même temps. Même si il faut essayer de compartimenter le travail pour éviter les incohérences qui compliquent les fusions, il est indispensable de pouvoir revenir en arrière ou d’intégrer les modifications d’autres développeurs à son code.

Bien évidemment il faut apporter une attention particulière à l’utilisation de ces outils, sans commentaires de qualité et sans soumissions régulières, l’intérêt s’amenuise…

Gestion documentaire

Bien souvent c’est juste un dossier sur le réseau ou chacun peut écrire et lire des documents au format Word ou Excel. C’est une limitation gênante car à moins d’avoir une rigueur et des process sans failles, il n’est pas évident de tenir à jour ses documents et de les versionner…

Passer un outil de gestion électronique de documents apporte un plus important avec l’ajout de méta données, une gestion des accès et des différentes versions facilitée.

Wiki

Le wiki est également un outil de communication trop souvent négligé. Il est pourtant très utile pour certaines données comme les coordonnées des intervenants sur le projet, une présentation de l’équipe, une présentation complète du projet avec une liste des différents outils et leurs emplacements…

Cet un outil vivant et simple à prendre en main, un vrai plus pour centraliser les informations !

Gestion de tickets

Pour échanger sur les nouvelles fonctionnalités ou les bugs, peu importe qu’on utilise Mantis, Trac ou Redmine, l’important est de l’utiliser et de bien documenter toutes les actions afin d’avoir une traçabilité sans faille, ces données doivent souvent être reprises par d’autres membres de l’équipe qui doivent comprendre ce que vous avez voulu dire ou faire sous peine de voir des régressions ou d’autres bugs surgir…
Et si vous pouvez intégrer le avec votre outil de versionning pour simplifier l’interaction entre les deux.

Intranets, Extranets, Cloud…

Certains Intranets ou Extranet regroupent une partie de ces outils, pour avoir un maximum d’efficacité, ils doivent êtres intégrés et inter-connectés de façon cohérente pour maximiser les

Sur mes projets personnels j’utilise Google Apps qui apporte tout un lot d’outils bien intégrés les uns aux autres et mes permet de gérer ma communication et ma documentation. Avec l’intégration progressive de tous les outils dans cette suite logicielle, elle va encore gagner en utilisabilité et permettre d’accroitre encore la productivité de ses utilisateurs.

Conclusion

Échangez, documentez, normalisez, mettez en place les process pour être efficace ! En un mot, industrialisez les processus, la productivité et la qualité sont à ce prix !

Voilà mon avis de développeur, j’aimerai avoir votre avis, de développeur, de chef de projet, de client… Laissez un commentaire !

Sur le même thème

• La gestion des versions
• MySQL GUI Tools
• Maquettage avec Pencil Sketching
• Les plugins Firefox : Colorzilla
• Comparaison et fusion de fichiers et de dossiers

Pour la sortie de Lucid Lynx, la dernière version d’Ubuntu, je vais donc vous donner envie de suivre ma voie, jusqu’au bout, ou au moins en partie…

Fond d’écran d’Ubuntu Lucid Lynx

Passer à Linux

Les raisons de passer à Linux peuvent être nombreuses, besoin d’un OS plus léger et rapide, libre, gratuit (le plus souvent)…

La première chose à faire à mon avis c’est de se renseigner ! On trouve des dizaines de témoignages sur Internet, faites vous votre avis. Pour que la migration soit une réussite il faut d’abord être convaincu par la démarche.

Je vous conseille notamment un site explicatif qui présente aussi bien les avantages et les inconvénients de chaque solution, et vous aide dans votre migration :

• Passer à Linux

Personnellement, j’ai d’abord été convaincu par la théorie, par l’esprit du libre, mais la pratique me faisait un peu peur. J’avais peur de perdre mes repères.
Il m’a donc fallu un certains temps, à peu près deux ans, pour y venir. Mais j’ai mis ce temps à profit !

Un bon témoignage sur le site Framasoft m’avait convaincu d’utiliser des logiciels libres multi-plateformes avant de passer à Linux, de manière à faciliter la migration. J’ai donc peu à peu adopté un ensemble de logiciels de grande qualité. Le jour de la migration, j’ai juste changé d’OS, pas de logiciels !

Et ils me permettent aujourd’hui de travailler dans de bonnes conditions. Comme professionnellement je travaille sous Windows, j’utilise donc les mêmes logiciels, un vrai bonheur !

Mes logiciels

Voici donc la liste des logiciels multiplateforme que j’utilise au quotidien. A titre personnel, le bénéfice est en partie spirituel, professionnellement, c’est très pratique de pouvoir utiliser des logiciels que je connais, qui sont mis à jour régulièrement, et ce quel que soit le client et pour un budget sans surprise.

Navigateurs

Côté navigateurs, on peut utiliser Chrome, Firefox ou Opera sur les deux plateformes, il ne manque que Internet Explorer mais est-ce vraiment gênant ?

Du coup quasiment toutes les extensions disponibles le sont aussi pour Linux, pas de problèmes donc à attendre de ce côté.

Suite bureautique

J’utilise bien évidemment Open-Office, l’un des logiciels libre les plus connus. A l’usage, l’ouverture de certains fichiers propriétaires pose parfois quelques problèmes cosmétiques, mais on s’en sort.

On me dit souvent que cette suite est moins complète que celle du concurrent, elle me parait plus simple d’utilisation, et réponds à toutes mes attentes.

Environnement de Développement Intégré

Les principaux IDE comme Eclipse ou NetBeans, sont basés sur Java et donc multiplateforme. J’utilise donc PDT sans aucune contrainte.

Logiciels de gestion de version

Quand on est comme moi habitué à Tortoise SVN sous Windows, on se retrouve un peu seul sous Linux. Il existe des solutions graphique mais qui ne m’ont pas donné entière satisfaction. La ligne de commande, a ses avantages par moments, mais j’ai finalement trouvé mon bonheur avec les extensions d’Eclipse ou de NetBeans.

Le seul point ou je ne suis pas entièrement convaincu donc.
Edit : Grâce aux commentaires, j’ai trouvé une solution qui me convient !

Gestion de base de données

Que j’utiliseMySQL ou PostgreSQL, MySQL Gui Tools et PGAdmin répondent correctement à mes attentes.

Client FTP

Sous Ubuntu, on peut utiliser le gestionnaire de fichiers pour accéder à des ressources distantes, je n’utilise donc plus de logiciel de transfert. Cependant si vous le souhaitez, Filezilla est une excellente solution qui existe aussi sous Linux.

Outils graphiques

The Gimp est évidemment moins performant que Photoshop même si certains disent le contraire. Je ne connais pas de graphistes qui l’utilisent ! Mais pour un développeur qui fait quelques retouches de temps en temps il est parfait ! Un peu déroutant avec son organisation multi-fenêtres, on finit par s’y faire avec le temps.

Outils divers

J’utilise Poedit pour gérer mes traductions ou 7zip pour les archives, là encore ces logiciels sont disponibles pour différents OS, pas de quoi être perturbé !

Webwares

Là vous l’aurez deviné pas de problèmes, mais du coup, autant que possible, j’utilise aussi des outils libres que j’installe sur mon propre serveur… Quand on commence à toucher au libre, on y reste attaché !

Passer le cap !

Vous pouvez le télécharger ou commander le CD sur le site d’Ubuntu :

• Télécharger Ubuntu

Au final, L’OS ne reste qu’une plateforme que l’on utilise finalement assez peu, le plus important est donc de trouver des logiciels adaptés au besoin.
Le plus dur pour passer à Ubuntu c’est d’oublier ce que vous savez de Windows et de réapprendre à votre rythme. Pour cela, je vous conseille un excellent livre, libre bien entendu, édité par Framabook et In Libro Veritas.

• Présentation du livre « Simple comme Ubuntu » par Framablog

• Simple comme Ubuntu 10.04
• Licence : Creative Commons By-SA 2.0
• Broché : 359 pages
• Éditeur : In Libro Veritas
• Édition : 1ère (3 mai 2010)
• Collection : Framabook
• Langue : Français
• ISBN-13: 978-2-35922-022-3

Ce livre étant libre, il est également disponible en téléchargement au format PDF sur le site Framabook :

• Simple comme Ubuntu 10.04 en PDF

Et si vous n’êtes pas encore convaincu, Le CD-rom d’Ubuntu est un Live CD, vous pouvez donc le mettre dans votre lecteur de CD-rom et démarrer votre PC sous Ubuntu sans l’installer. Idéal pour tester !

Conclusion

Finalement, le développement web sous Linux, ca se passe très bien ! Si avec tout ca vous ne changez pas, j’aurai au moins essayé, prenez votre temps, l’idée va faire son chemin et le moment venu vous passerez le cap…

Et quand vous l’aurez passé revenez me donner votre avis !

Sur le même thème

• MySQL GUI Tools
• La gestion des versions
• Livre : Pro Git
• Développer en équipe
• Navigateur Web standard : Firefox

Photo de tochis depuis Flickr

Définitions

Les concepts sont importants à maitriser, je vous invite donc à lire les définitions suivante si besoin.

• Internationalisation
• Localisation

Analyse

Un site multilingue, quel que soit le niveau de complexité, se prévoit en amont du développement lors de la phase d’analyse. C’est une problématique tellement imbriquée dans le code qu’il est contre-productif de vouloir passer un site en plusieurs langues si cela n’a pas été pensé lors de sa conception. C’est d’autant plus dommageable, qu’y penser au préalable n’est pas vraiment plus compliqué et ne coûte bien souvent pas beaucoup plus cher.

Ainsi sans tout prévoir on peut mettre en place les bases d’un travail ultérieur sur le sujet.

Traduction

La traduction, c’est à cela que l’on pense en premier quand on veut que son site soit visible dans d’autres pays. C’est un passage obligé et il ne faut pas le négliger. Quoi de plus désagréable qu’un texte dans un français approximatif. Cela peut être catastrophique en termes d’image et de confiance, surtout sur un site marchand !
La solution idéale est de confier le projet à un traducteur professionnel, de préférence dont la langue natale est la langue cible. Il sera ainsi plus à même de connaître les spécificités de la langue.

Sur un projet d’envergure, évitez autant que possible d’autres solutions bancales qui n’apporteraient finalement pas grand chose à l’internaute visé, ou faîtes le en connaissance de cause et en mesurant les risques encourus.

Dans le cas d’un blog et si vous maitrisez vous même la langue voulue, c’est un excellent exercice. Attention cependant à avoir un niveau suffisant pour que cela ne se retourne pas contre vous.

Domaines & IP du serveur

Un domaine par langue ou zone géographique vous apportera un plus auprès de l’internaute qui se sentira plus proche d’un site de son pays. Il n’aura pas l’impression d’être juste sur une traduction, mais sur un site implanté près de lui.

Pensez aussi à avoir si possible une IP localisée dans la zone correspondante, c’est un plus pour les moteurs de recherches.

Search Engine Optimization

Une bonne internationalisation passe par la prise en compte des techniques de référencement. Les mots clés utilisés ou les urls doivent être dans la langue cible afin de positionner correctement le site sur les moteurs de recherche pour chaque langue.

Urls

Les urls réécrites dans la langue de l’utilisateur permettent d’être mieux référencé et sont plus simple à lire ou écrire pour l’internaute. Si il voit l’adresse sur un autre site ou dans le contenu d’un mail, il en comprendra immédiatement le contenu. C’est une solution plus ou moins complexe à mettre en place, mais très efficace.

Mots clés

Les mots clés doivent êtres choisis en concertation avec le traducteur, afin de coller au mieux à la problématique. Là encore, une traduction mot à mot risque de ne pas suffire. Une connaissance du contexte local est un vrai plus.

Régionalisation ou localisation

Pour aller encore plus loin, on peut adapter chaque détail apparemment sans importance, mais qui fera cependant la différence. Il ne vous viendrait pas à l’idée d’écrire la date au format américain sur un site français, ne faites pas le contraire ! Il convient donc de connaitre et respecter chaque culture.

Format des chiffres dates et heures

Chaque continent et chaque culture à des conventions différentes pour les dates et heures, le calendrier ou les unités de mesure. Pour que votre contenu soit compréhensible facilement, votre lecteur doit comprendre de quoi vous parlez sans avoir à faire de conversions. Il faut donc y penser lors de la rédaction du contenu mais aussi dans la mise en page du site, pour convertir et afficher les données à la volée.

Sens de lecture

Là aussi, on voit souvent le problème du point de vue occidental, mais les arabes ou les chinois n’ont historiquement pas les mêmes habitudes que nous. Je n’ai pas eu à régler ces problématiques, mais j’imagine qu’une bonne prise en compte doit demander une charge de travail certaine.

Images et couleurs

D’un pays à l’autre les couleurs sont perçue différemment et si pour nous le rouge signifie ce qui est interdit et le vert ce qui est autorisé, ce n’est pas cas partout. La signalétique à donc besoin d’être adaptée en conséquence.
Pour les images, le problème est le même. Tout les peuples n’ont par exemple pas le même rapport à la nudité, même partielle, ne risquez pas de choquer un internaute par méconnaissance et adaptez les images ou le contenu à sa zone géographique.

Je ne pense pas cependant qu’il faille aller aussi loin que cette multinationale américaine qui a transformé un homme d’origine africaine en européen pure souche entre sa version américaine et son site polonais, mais on entre dans un autre débat…

Particularismes régionaux

Dissociez bien l’extension du nom de domaine pour le pays et la langue ! Certains pays comme la Belgique ayant plusieurs langues officielles, chaque région étant attachée à sa langue. Par ailleurs et pour les mêmes raisons, préférez un affichage de la liste des langues supportées plutôt que des drapeaux qui ne représentent pas des langues mais des pays. Ne brusquez pas les sensibilités de vos visiteurs.

Contenu spécifique

Technique

Bien évidemment il va falloir standardiser au maximum pour être efficace. L’emploi d’un jeu de caractères unicode s’impose pour gérer un maximum de langages.

Mise en place

Les frameworks et les CMS récents implémentent désormais tous, de façon plus ou moins complète des outils pour mettre en place l’internationalisation et la localisation. Penchez vous sur l’existant, d’autres que vous ont réfléchi au problème et le sujet étant complexe, il est ainsi plus facile à appréhender.

Maintenance

Les mises à jour qui découleront d’une version en plusieurs langues sont évidemment plus complexes et plus nombreuses à mettre en œuvre. Côté technique tout doit donc être prévu pour faciliter ce travail afin qu’il ne devienne pas fastidieux.

Conclusion

L’internationalisation et la régionalisation ne laissent aucune place au hasard. C’est un travail de longue haleine qui doit être pris en compte le plus tôt possible, et qui doit être poursuivi en permanence si l’on veut qu’il soit rentable. Si le but est d’être présent sur tout le globe, il est probablement plus simple de gérer des sites complètement indépendant d’une zone à l’autre, quitte à les faire tourner sur la même solution logicielle, mais avec des contenus différents adaptés aux marchés et spécificités locales et bien sûr à l’actualité de la région.

C’est un sujet complexe sur lequel on à encore énormément à apprendre. J’attends vos retours d’expérience avec impatience, surtout si vous travaillez nativement dans une autre langue et que vous internationalisez en français.

Sur le même thème

• Bien gérer ses noms de domaine
• Les générateurs de sprites CSS
• Optimiser l’utilisation d’Eclipse
• Livre : HTML5 pour les webdesigners
• Fournir un webservice et son API

Photo de exquisitur depuis Flickr

Présentation

Mon besoin se limite au maquettage web, et Pencil Sketching à une belle bibliothèque de composants web. On peut également y importer d’autres collections d’objet ou de cliparts pour faire des diagrammes.
L’installation est simplifiée au maximum, et la prise en main immédiate. Quelques essais rapides m’ont convaincu.

Points forts

Une application comme je les aime, utilisable sur n’importe quelle machine, avec une prise en mais rapide…

• Licence GPL version 2
• Gratuit
• Mutli plateforme (Windows, MacOS, Linux)
• Environnement graphique intuitif
• Bibliothèques graphiques variées (mobile, icônes…)

Fonctionnalités

• Outils pour créer des diagrammes et faire du prototypage
• Documents multi-page avec liens entre les pages
• Edition de texte riche
• Installing user-defined stencils and templates
• Opérations standards : superpositions, alignements, rotations,…
• Collections d’objets extensibles
• Exports au format HTML, PNG, Openoffice, Word et PDF.

Documentation

Une documentation basée notamment sur des screencasts permet de rapidement prendre en main une application naturellement intuitive.

• Tutoriel vidéo sur Pencil Sketcher

Bibliothèques graphiques (pencils)

Une dizaine de bibliothèques permettent d’étendre les possibilités graphiques du produit, et d’autre devraient venir compléter la gamme.

• Bibliothèques pour Pencil Sketching

Plugin pour Firefox

Ce logiciel est distribué de plusieurs manières. Soit en application stand-alone telle que je vous l’ai présentée, soit en plugin de Firefox. Elle est dans ce cas disponible sur le site d’extension du navigateur :

• Le plugin Pencil Sketching pour Firefox

Site officiel du projet

• Site officiel du projet
• Le projet sur Google Code

Conclusion

Un outil prometteur à tester ! Je vous en dit plus dès que j’aurai pris le temps de tester…

Sur le même thème

• Les plugins Firefox : XRefresh
• Bien utiliser Javascript
• Les bons outils pour PHP (partie 2)
• Utiliser Chrome et violer la neutralité ?
• Recette & environnements de test

Je vous laisse donc découvrir cette nouvelle mosaïque de flux !

Photo de ThreeHeadedMonkey depuis Flickr

Framablog

Un blog écrit à plusieurs mains et plusieurs langues aussi d’ailleurs puisqu’en plus d’articles de fond on y retrouve de nombreux articles traduits en français sur tout ce qui tourne autour du web et du libre, avec toujours une introduction bien menée pour présenter l’article à suivre.

• Le blog Framablog
• Le flux ATOM de Framablog

Framablog est l’une des extensions de Framasoft, référence du logiciel libre et qui a besoin de vos dons pour survivre et évoluer.

Fred Cavazza

Incontournable, l’une des références que je suis depuis des années. Je suis tous ses blogs, chacun avec une thématique précise, un ton très pro, et bien documentés. Si vous ne le suivez pas déjà, il est grand temps de vous y mettre !

• Le blog de Fred Cavazza
• Le flux RSS de

Voici donc ses blogs « secondaires » qui m’intéressent le plus :

• Le site SimpleWeb
• Le site InterfaceRiches
• Le site Entreprise2.0

HTMLZenGarden

Bonnes pratiques et réflexions à propos d’intégration web, d’ergonomie, de sémantique…

• Le site HTML Zen Garden
• Le flux RSS d’HTML Zen Garden

J’espère qu’il va se remettre à bloguer, c’est un peu calme en ce moment.

Julien Pauli

Comme je suis développeur PHP et utilisateur du Zend Framework, les articles de Julien Pauli sont un moyen de faire une veille permanente sur le sujet.

• Le blog de Julien Pauli
• Le flux RSS de Julien Pauli

Julien Pauli est architecte logiciel expert certifié PHP/ZendFramework et également l’auteur de « Zend Framework, bien développer en PHP » avec Guillaume Ponçon.

Les intégristes

Accessibilité, référencement, intégration, tout est passé au crible et il n’en ressort que le meilleur.

• Le blog des Intégristes
• Le flux RSS des Intégristes

Les auteurs maintiennent également un flux avec leur veille :

• Le flux de veille des Intégristes

Un titre bien trouvé pour ce blog qui ne laisse rien passer.

Moteurzine

Un blog collaboratif avec une équipe rédactionnelle très efficace pour tout savoir sur le référencement web.

• Le site Moteurzine
• Le flux RSS de Moteurzine

Nexen

C’est clairement le site dont je suit les news depuis le plus longtemps. A l’époque c’était encore en jaune et bleu, il n’y avait pas de flux RSS, et j’avais ma newsletter toutes les semaines… Je suis un peu nostalgique, car j’aimais bien ce thème. La doc était claire avec ses couleurs. Finalement j’ai opté pour la doc officielle, mais je reste sur les news de Nexen, car sur PHP, c’est un passage obligé.

• Le site de Nexen
• Le flux RSS de Nexen

Performance web

Un blog découvert suite au forum PHP 2008. Tout ce qu’il faut savoir sur l’optimisation web est ici. La référence en langue française dans le domaine. L’essayer c’est l’adopter ! On devient très vite accro à l’optimisation.

• Le blog Performance web
• Le flux RSS de Performance web

Eric Daspet est aussi l’auteur de livres sur PHP dont nous avons déjà parlé par ici.

Planet PHP

Un flux qui reprend souvent les mêmes informations que celui de Nexen, parfois en doublon, mais finalement pour tout savoir, mieux vaut avoir les deux !

• Le site Planète PHP
• Le flux RSS de Planète PHP

Pompage

Des traductions d’articles techniques sur le développement web. Un rythme irrégulier mais un travail de grande qualité !

• Le site Pompage
• Le flux RSS de Pompage

ReadWriteWeb France

Un concentré d’information sur les technologies d’Internet. Ce blog est disponible en plusieurs langues dont le français. Une référence que vous connaissez déjà sûrement…

• Le site ReadWriteWeb France
• Le flux RSS de ReadWriteWeb France

Standblog

Un blog qui traite de navigateurs, des standard du web, du web en général mais aussi d’écologie ou de photo.

• Le blog Standblog
• Le flux RSS du Standblog

Tristan Nitot qu’on ne présente plus est aussi président fondateur de Mozilla Europe.

Tentatives accessibles

Recherches, expérimentations et discussions autour de l’accessibilité du Web

Tout est dans le sous titre… Ergonomie, accessibilité, formats de fichiers, vous ne pourrez pas dire que vous ne saviez pas !

• Le site Tentatives Accessibles
• Le flux ATOM de Tentatives Accessibles

WebDeux

Révolution web2.0 en live

Tout sur le web2.0, l’e-réputation, la monétisation, le web marketing et beaucoup de billets pleins de conseils pour monter son blog !

• Le blog WebDeux
• Le flux RSS de WebDeux

WebRankInfo

Encore une référence historique du référencement et une excellente source d’infos.

• Le site WebRankInfo
• Le flux RSS de WebRankInfo

WebRankInfo c’est aussi des dossiers, un forum très actif, un annuaire, des outils et des formations…

Conclusion

Une bonne veille commence par un suivi régulier de flux RSS mais peut bien évidemment être complétée par la lecture de sites web sans flux ou par une veille sur Twitter.

Je compte une demi-heure par jour de veille active, mais les connaissances acquises permettent par ailleurs de regagner ce temps. Et parfois si je n’ai pas le temps, lire un titre suffit à savoir que l’information existe sans pour autant lire tout l’article.

J’aimerai bien connaître vos sources d’information afin d’agrandir la mienne. N’hésitez pas à commenter ce billet avec vos liens ou un lien vers un article sur le sujet sur votre blog.

Mes articles préférés sont également visibles sur la page dédiée ma veille technologique.

Voilà il ne me reste plus qu’a trouver une île déserte avec avec une liaison Internet et y aller lire les nouveaux flux que vous m’avez et allez encore me proposer !

Sur le même thème

• Veille techno Web de A à F (partie 1)
• Bien utiliser Zend Framework
• Bien gérer ses noms de domaine
• Bien développer en PHP (partie 1)
• Bien écrire HTML & XHTML

Sur Internet les sources sont aussi nombreuses qu’hétéroclites. Je vous propose donc de faire le tour des flux RSS de mon agrégateur (250 flux dont la moitié traitent du web) pour en ressortir l’essentiel, à savoir, les 30 flux indispensables que j’emporterai sur une île déserte…

Une mosaïque de contenus tous plus intéressants les uns que les autres

Photo de Karl depuis son site/blog

Ce choix se veut varié, certains sont plus techniques que d’autres, plus ou moins généralistes, avec une ligne éditoriale plus ou moins stricte, mais ce qui me plait, c’est le ton employé qui donne toute sa saveur à cette lecture quotidienne.

Je pense que le lien entre tous ces acteurs du web est cette passion qu’ils nous transmettent au fil des jours…

Comme la classification n’était pas évidente, je vous les livres dans l’ordre alphabétique, ca vous obligera à tout lire…

60 Questions

Le blog qui plaide pour un web meilleur

Un blog qui parle à la fois d’architecture de l’information, de comportement utilisateur, de l’écriture pour le web, d’ergonomie, de gestion de projet, enfin bref tout ce qui touche au web ! Une mine d’information essentielle.

• Le blog de 60 Questions
• Le flux RSS de 60 Questions

Jean-Marc Hardy, est aussi auteur du livre « réussir son site web en 60 fiches », formateur, auditeur…

Adverbe

Mots justes, image Net

Tout sur l’e-réputation, et les réseaux sociaux d’entreprise.

• Le site Adverbe
• Le flux RSS d’Adverbe

Adverbe intervient dans la gestion de l’e-réputation et de l’identité sur Internet et pour la mise en place de réseaux sociaux et l’animation de communautés en ligne pour ses clients.

Alsacréations

Un site que je connais depuis toujours, enfin quasiment depuis que je fais du développement web. J’ai toujours apprécié leur façon de voir le web, alors forcément les actualités que le site met en avant sont un plus pour ma connaissance du web.

• Le site Alsacréations
• Le flux RSS d’Alsacréations

Raphaël Goetter et Rodolphe Rimelé à l’origine de ce site sont également auteurs de livres et de mémentos sur XHTML, CSS et MySQL.

Antoine Dupin

Entreprise 2.0; personal branding et medias sociaux

Le blog d’Antoine Dupin est le petit nouveau de mes flux, une découverte intéressante avec des articles vraiment très complets ! Je n’ai pas encore beaucoup de recul sur ses billets qui abordent l’entreprise 2.0, l’e-réputation, mais c’est vraiment prometteur ! A suivre !

• Le blog d’Antoine Dupin
• Le flux RSS d’Antoine Dupin

BioloGeek

BioloGeek est le site d’un développeur web freelance passionné par les frameworks web, les Logiciels Libres, le Web Sémantique, l’optimisation du temps et bien plus encore.

• Le blog BioloGeek
• Le flux ATOM de BioloGeek

J’ai eu l’occasion de voir David Larlet, lors des RMLL 2009 à Nantes, je peux même dire que j’y suis allé car il y était et que j’aime bien suivre son blog et ses idées à propos de la gestion des données, du logiciel libre ou la sécurité.

Blog Axe-Net

Des billets sur le référencement de bonne qualité et très réguliers, mais aussi sur des tests SEO, le webmarketing ou les questions juridiques.

• Le blog Axe-Net
• Le flux RSS du blog Axe-Net

Dasini.net

Journal d’un expert MySQL

Ma principale source d’information sur MySQL

• Le blog Dasini.net
• Le flux RSS de Dasini.net

Olivier Dasini est certifié MySQL, co-fondateur du MUG, membre de l’AFUP et membre de l’April. J’ai pu assister à l’une de ses présentations lors du Forum PHP 2009, et j’ai vraiment apprécié le sujet.

Descary

Un blog qui s’adresse aux entrepreneurs du Web, développeurs, spécialistes marketing et aux internautes à l’affût des derniers développements Web.

• Le blog Descary.com
• Le flux RSS de Descary.com

Benoit Descary est aussi formateur et conférencier.

Do as i say, not as i do

Un peu tout ce qui touche au web, pas mal de Symfony, de la méthodologie, et tout cela de façon très didactique.

• Le blog Do as i say, not as i do
• Le flux RSS de Do as i say, not as i do

Écrire pour le Web

Stratégie éditoriale & Ergonomie des contenus web

Conseil éditorial, webwriting et ergonomie au programme. On est plus dans le contenu que le contenant, mais le sujet est vraiment passionnant !

• Le site Écrire pour le Web
• Le flux RSS d’Écrire pour le Web

Équilibres informéthiques

Un petit blog pas très connu mais qui agrège des informations sur le logiciel Open-source.

• Le blog Équilibres informéthiques
• Le flux RSS de Équilibres informéthiques

Ergonomie Web, Rails et Architecture de l’Information

Je ne le lis pas pour Rails que je ne connais pas, mais pour le côté ergonomie web et architecture de l’information, la gestion de projet, le web2.0 ou l’accessibilité… Toujours intéressant même sur un sujet qui ne nous intéresse à pas à priori !

• Le blog Ergonomie Web, Rails et Architecture de l’Information
• Le flux RSS d’Ergonomie Web, Rails et Architecture de l’Information

Ergophile

Analyse de l’ergonomie web

Analyse, tests d’ergonomie, conseils, tout ce qu’il faut pour devenir un ergophile passionné.

• Le blog Ergophile
• Le flux RSS d’Ergophile

Jacynthe Busson est consultante en ergonomie web & mobile, webdesigner et formatrice en Conception et Gestion de Projet / Ergonomie web. Elle a aussi lancé tKaap la première communauté liée aux défis.

Explorateurs du web

Ce groupe de passionnés s’est fixé comme mission de faire partager les résultats de ses explorations du Web en confrontant ses différents points de vue. Les Explorateurs du Web proposent de mettre leur intelligence collective au service du plus grand nombre. Le site reprends les billets des blogs de ses membres.

• Le blog des Explorateurs du Web
• Le flux RSS des Explorateurs du Web

Formats ouverts

Comme son nom l’indique ce blog traite des formats ouverts et du risque d’enfermement lié au logiciel propriétaire. Une problématique qu’il expose lors de conférences, j’ai ainsi pu l’écouter aux RMLL à Nantes en 2009.

• Le site Pour les formats ouverts !
• Le flux RSS de Pour les formats ouverts !

Thierry Stoehr travaille sur les formats de données et de fichiers, leur importance, leur rôle et les dangers possibles des formats fermés, au sens large. Depuis 1998, il est fortement impliqué dans les logiciels libres, au travers essentiellement de l’AFUL car les logiciels libres sont basés sur des formats ouverts et des protocoles ouverts.

Entracte

Voici donc la première moitié de mes références en matière de blog. La suite est disponible dans Veille techno Web de F à Z (partie 2)

Mes articles préférés sont également visibles sur la page dédiée ma veille technologique.

Sur le même thème

• Veille techno Web de F à Z (partie 2)
• Bien développer en PHP (partie 1)
• MySQL GUI Tools
• Twitter & autres…
• Les bons outils pour PHP (partie 2)

Photo de i_gallagher depuis Flickr

Concept

L’expression « Réinventer la roue » exprime l’idée de ne pas refaire inutilement quelque chose qui a déjà été fait. « Réinventer la roue carrée » y ajoute l’idée d’une réinvention de moindre qualité. Wikipédia fais le point sur ces concepts :

• Réinventer la roue
• Réinventer la roue carrée

Les éléments à charge pour étayer l’expression sont évident et pourtant, dans certains cas ce n’est pas si évident…

Le pour

Donc le contre réinventer la roue.

Pour ce qui est des concepts élémentaires qui font leurs preuves depuis toujours, parfois avant même l’histoire de l’informatique, la question ne se pose souvent même pas. Sur certains problèmes simples, on connait la meilleure solution de traiter les cas, alors pourquoi chercher à faire autrement.

Déjà éprouvés

On a tous étés confrontés un jour à un code un peu complexe que l’on a fini par simplifier à l’extrême en découvrant une solution simple et efficace sur Internet mais à laquelle on avait pas pensé.

Internet favorise l’échange de savoirs de façon exponentielle. Tout internaute un peu curieux peu apprendre rapidement sur le sujet de son choix, on peut ainsi facilement trouver et utiliser une bibliothèque ou un framework et gagner un temps non négligeable en évitant de réécrire l’essentiel. Aujourd’hui très peu de projets partent de zéro, on s’appuie toujours sur une couche existante.

Un code optimisé et fiable c’est ce que tout bon développeur recherche alors si on vous le propose tout prêt, pourquoi hésiter ? Ne risquez pas de faire pire, réutilisez !

Gain de temps

Ce serait donc une perte de temps évidente de chercher à réinventer ce que d’autres ont développé. D’autant que bien souvent les projets communautaires sont d’une grande qualité et la somme des compétences techniques de leurs auteurs est bien plus grande que la votre ou celle de votre équipe. On ne peut pas être spécialiste dans tout les domaines ! Faites confiance à d’autres équipes, vous gagnerez en temps de développement et même sur la maintenance, les évolutions et corrections de bugs ne seront pas de votre ressort !

Le temps gagné vous permettra peut être de publier votre propre code et d’en faire gagner à quelqu’un d’autre.

Le contre

Donc le pour réinventer la roue.

Quel que soit l’outil ou le concept, on pense souvent que tout est déjà inventé et pourtant de nouvelles idées et de nouveaux produits voient le jour quotidiennement et ils paraissent tellement évidents qu’on se demande pourquoi on y à pas pensé soi-même un peu plus tôt… Comment ses idées ont elles germé ? Bien souvent en envisageant un problème sous un autre angle, en se posant une question de manière différente. Bien des inventions ne sont que la réunion de plusieurs.

Comprendre les concepts & les adapter à d’autres inventions

Avoir une approche différente est essentiel. Il faut comprendre le fonctionnement de la roue pour pouvoir l’améliorer ! Utiliser une bibliothèque ou un framework c’est bien, mais en comprendre le fonctionnement c’est encore mieux. Quand vous en maitriserez le fonctionnement, quand leur conception vous semblera claire, vous pourrez les réutiliser efficacement dans d’autres cas.

Votre y gagnerez en compétence et en efficacité.

Il y a quelques années, avant l’arrivée des frameworks PHP, j’ai développé ma propre solution. Cela m’a permis de gagner beaucoup de temps en mutualisant certains développement entre plusieurs projets. J’ai gagné en compétence car je souhaitais toujours trouver la meilleure solution à un problème donné. Aujourd’hui j’appréhende d’autant mieux les outils que j’utilise même si je ne les ai pas écrits moi même.

Nouvelles idées ou fonctionnalités

Re-développer un outil ou réfléchir à un concept avec un œil neuf vous apportera peut être une idée de génie. Le petit truc auquel personne n’avait pensé, la fonctionnalité évidente qui donnera une longueur d’avance à votre projet. Un truc évident, après coup, mais qui nécessitait un certain point de vue, certaines connaissances, tout un ensemble de choses que personne n’avait visiblement eues avant vous.

Usage spécifique & optimisation des performances

Dans certains cas, il faut savoir si la roue qu’on nous propose nous convient vraiment, et si on n’ a pas besoin de la modifier ou de la réinventer pour répondre de manière plus précise à son besoin. Pourquoi utiliser un outil avec des tas d’options si votre besoin est vraiment basique. L’analyse de l’outil et sa réécriture permettent de monter en compétence sur le sujet et d’avoir un produit répondant uniquement à votre besoin et du coup plus performant.

Le contraire est vrai aussi, et si un outil ne propose que 90% de vos besoins, améliorez le et proposez les améliorations à la communauté !

Conclusion

Réinventer le roue peut s’avérer utile pour innover, et c’est en tout cas un moyen formateur pour qui veut apprendre d’autres outils ou concept pour les faire évoluer ou en comprendre l’essence et l’adapter à d’autres cas. N’ayez plus peur de réinventer la roue, mais faîtes le en connaissance de causes et pour de bonnes raisons

Et vous alors ? Réinventez vous la roue ? Est ce pour de bonnes raisons ? Que pensez vous des miennes ?

En question subsidiaire, j’aimerai savoir d’ou vient l’expression, je n’ai pas trouvé d’information sur son origine.

Sur le même thème

• Les plugins Firefox : FoxyProxy
• Bien utiliser Zend Framework
• Bien définir son projet de site web
• Les plugins Firefox : Colorzilla
• Comment apprendre le développement web ?

Voici donc aujourd’hui une extension pour Firefox, qui permet d’avoir tout un tas d’outils sous la main directement dans le navigateur : Colorzilla.

Photo de Richard0 depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de Firefox :

• Installer Colorzilla pour Firefox

Présentation

Colorzilla est un outil qui permet de zoomer sur la page pour sélectionner une couleur et la copie automatiquement dans le presse papier, vous n’avez plus qu’à la coller dans votre code ! Il extrait les couleur d’une page en s’appuyant sur leDOM. Vous pouvez même enregistrer des palettes de couleurs et les partager.

L’outil est léger et sait se faire oublier. Il est disponible en bas à gauche de votre navigateur ou via un clic droit.

Fonctionnalités principales

• Pipette pour sélectionner les couleurs de la page
• Palette de couleur (simples à enregistrer et partager)
• Analyseur des couleurs du DOM
• Zoom
• Copie automatique de la couleur dans le presse papier
• Gestion de formats de couleurs multiples (Hexadécimal, RVB, TSV…)

Un outil vraiment bien pensé et donc indispensable pour gérer ses couleurs web au quotidien qui mérite ses 5 étoiles.

Sur le même thème

• Les plugins Firefox : XRefresh
• Les plugins Firefox : TileTabs
• Les plugins Firefox : FoxyProxy
• Navigateur Web standard : Firefox
• Les plugins Firefox : Firebug

Lors de la refonte d’un site, le prestataire à tendance à vouloir tout refaire sous prétexte que l’existant est inadapté, c’est peut être vrai, et d’ailleurs très souvent le cas, mais dans ce cas il faut réfléchir et travailler pour que cela ne se reproduise pas systématiquement à chaque version. Si le projet est bien pensé, une refonte graphique et quelques développements peuvent suffire la plupart du temps, à moins bien sûr que le fonctionnel change du tout au tout ou qu’un autre paramètre important ai changé de manière significative.

Comment prévoir et intégrer les évolutions du projet ? Quelles questions se poser ? Quelles sont les erreurs à ne pas faire ? Voilà tout l’enjeu de cette réflexion.

Photo de slinky2000 depuis Flickr

Modularité

Avec les moyens actuels, et le développement en couche, on peut facilement changer une partie d’un projet sans toucher au reste. Le principe MVC permet par exemple de changer complètement l’affichage de votre site sans toucher à la partie métier. On peut ainsi cloisonner le projet, les différentes parties travaillant chacune de leur coté, mais ensemble.

Il faut pour cela réfléchir à certains points en amont du projet. Voyons les questions à se poser le plus tôt possible.

Volumétrie

Le choix d’un site marchand est évident si vous vous lancez dans la vente, mais si vous commencez avec de faibles volumes, un site vitrine est peut être plus approprié, votre projet à 30 000 € peut attendre… Tout dépends de vos ambitions !

Et côté hébergement, suivants vos besoins actuels et à moyenne échéance, en terme de ressources processeur ou de bande passante, les extensions nécessaires, le prix… Il faudra faire le tri et trouver un hébergement au meilleur rapport qualité prix, mais facilement évolutif pour pouvoir migrer vers une offre supérieure simplement.

Je vous invite à voir l’article de Webaaz sur l’hébergement web.

Prévoyez donc de dimensionner votre projet en fonction de vos besoins à court terme et des évolutions à venir.

Fonctionnalités

On ne peut bien évidemment pas aborder ici toutes les problématiques fonctionnelles, voyons donc en deux points qui nous serviront d’exemple, comment envisager ces questions.

Public visé

En fonction de votre cible, vous ne ferez pas le même site web. Le collaboratif c’est plutôt orienté vers la génération X et la génération Xgénération Y, alors si vous vous adressez à un public plus âgé, faites plus simple, avec une ergonomie adaptée, des boutons plus gros par exemple…

Pensez tout de même à toujours garder votre site accessible à tous pour ne pas vous couper d’une partie de la population !

Multilinguisme

Sur le web votre site est accessible par tout le monde. Même les internautes auxquels vous n’avez pas pensé. Ils ont aussi le droit d’y venir, et même de consommer ! Vous n’allez tout de même pas vous priver de ces clients sous prétexte de ne pas parler la même langue ?

Bon, peut être que dans un premier temps vous ne pensez pas à cela et que votre marché est francophone, mais vous avez déjà pensé à vous étendre par la suite, alors dites le ! Intégrer plusieurs langues dans un site existant est très couteux, et oblige à revoir le site en profondeur, alors que développer un site multilingue n’est pas beaucoup plus compliqué qu’un site en une seule langue.

Alors à moins d’être sur un périmètre géographique très restreint, prévoyez ! Voyez grand !

Technologie

Je vais passer pour quelqu’un d’arriéré, mais non un site web statique n’est pas dépassé ! Même si aujourd’hui les besoins évoluent et que la mode est au web social, au web 2.0, à l’interactivité, posez vous la question : Ai-je besoin de tout cela ?

Si votre site ne nécessite que peu de pages et peu de mises à jour, un site vitrine fera parfaitement l’affaire. Pourquoi mettre une usine à gaz pour si peu de besoins ?

Et même si votre projet doit être dynamique, les fonctionnalités qui manquent à votre CMS ou à votre blog ne peuvent elles pas être juste des pages statiques en plus ?

Au final, des pages statiques, ce n’est pas forcément moins évolutif qu’un code dynamique.

Cahier des charges

Pour réunir toutes ces réflexions, et le résultat de toutes ces questions, un cahier des charges s’impose. Fonctionnel dans un premier temps pour définir clairement les besoins. Technique ensuite pour expliquer les moyens de répondre à la demande.

Fonctionnel

Vous pourrez y expliquer vos besoins précis en fonctionnalités en expliquant les règles métier spécifiques à votre entreprise.

Technique

Il sert à définir les solutions techniques retenues et la manière de les mettre en œuvre. Le développeur s’appuie dessus pour développer votre site web. Tout y est expliqué et en théorie, il y trouve toutes les réponses à ses questions.

Evolutivité

Coté évolutivité, il y a du boulot ! Il va falloir penser à ce dont vous aller avoir besoin, sans pour autant penser à des fonctionnalités que vous n’êtes pas sûrs d’utiliser, ce qui serait totalement contre productif. Si vous êtes une PME, n’imaginez pas que votre site vitrine puisse se transformer en site marchand ou en réseau social, mais pensez que vous aurez besoin de nouvelles pages pour les nouvelles agences du groupe par exemple.

Vous avez besoin de donner accès à votre catalogue à d’autres application ? Développez un webservice qui pourra resservir et évoluer.

Mise en œuvre

Je le fais moi même ou je le fais faire ?

La question ne se pose bien évidemment que pour un site perso, ou un site pro très simple genre site vitrine. Pour de plus grosses structures, c’est une question de crédibilité (encore que ce ne soit pas le cas pour tout le monde).

Pour un site plus conséquent, le temps, les compétences nécessaires et le résultat attendu ne vous laisseront bien évidemment pas le choix.

Bien sûr faire soi même son site web demande des compétences, mais pour un petit projet et pour peu que cela vous intéresse c’est tout à fait possible. Différentes formations abordent le sujet de façon plus ou moins approfondie.

L’article de Webaaz sur les formations web vous en apprendra plus sur le sujet.

Conclusion

Le but est de penser à tout ce qui pourrait arriver, et supprimer finalement tout ce qui n’arrivera pas. Quand on a enlevé tout le superflu, il ne reste que l’essentiel, et c’est ce dont vous avez besoin !

Vos besoins évolueront probablement, et lors de la prochaine refonte vous vous reposerez les mêmes questions, et vous n’aurez sûrement pas les mêmes réponses. Votre prestataire Internet vous dira peut être qu’il faut tout refaire, et il aura peut être raison, mais l’existant pourra resservir en partie grâce à la modularité ! C’est déjà ca de gagné !

Mise à jour

Le sujet est un peu vaste pour être abordé de façon complète dans un seul article. Je complèterai donc cet article et j’aborderai des sujets connexes de manière plus précise par la suite, en fonction de vos retours.

A vos commentaires !

Sur le même thème

• Réinventer la roue, ou pas ?
• Les plugins Firefox : XRefresh
• Les plugins Firefox : Colorzilla
• MySQL GUI Tools
• Bien utiliser Zend Framework

Je vous propose de découvrir Notepad++. Il ne fonctionne que sous Windows, mais apporte un véritable plus pour cette plateforme dont l’éditeur par défaut est vraiment trop simpliste.

C’est un logiciel gratuit sous licence GPL. Je le trouve idéal car très fonctionnel, simple à installer, rapide à lancer et extensible. Il est donc idéal quand on change souvent de poste et que l’on veut rapidement retrouver ses repères.

Photo de PSD depuis Flickr

Fonctionnalités

Notepad++ est un outil très complet, ces principales fonctionnalités sont :

• Coloration syntaxique (PHP, Java, SQL, CSS, HTML, Javascript, YAML…)
• Éditeur WYSIWYG
• Auto-complétion
• Affichage de fichier et édition multiple simultanée
• Fonction de recherche avec expressions régulières
• Auto détection de modifications de fichiers
• Gestion de macros
• Zoom
• Multilingue

Vous trouverez toute la liste des fonctionnalités de Notepad++ sur le site de l’éditeur.

Plugins

Cette liste n’est pas exhaustive car en plus Notepad++ est extensible avec une très belle liste de plugins dont voici les plus intéressants à mon goût :

• Éditeur hexadécimal
• Édition de fichier via un explorateur FTP
• Gestionnaire de tags HTML
• Correcteur orthographique
• Réducteur dans la barre de tâches
• Édition XML (multiples outils)
• Gestionnaire de plugins

Astuces

Cet outil s’intègre parfaitement à Windows, vous pourrez ainsi le mettre dans le menu contextuel de Windows et y accéder via le clic droit de votre souris ou tout simplement l’utiliser par défaut à la place du bloc-notes de Windows.

Ces astuces sont à voir sur la page de téléchargement de l’application.

Site de l’éditeur & téléchargement

Vous pouvez télécharger Notepad++ sur le site de l’éditeur :

• Site officiel de Notepad++

Aide, forum et wiki

Si vous avez besoin d’aide pour débuter avec Notepad++, des forums multilingues et un wiki en anglais répondront probablement à toutes vos questions.

• Forums
• Wiki

Mon avis

Personnellement, je l’utilise depuis des années sans aucun soucis. Son ergonomie est très bonne, et ses plugins très nombreux permettent de répondre à toutes les attentes. Il est simple mais fonctionnel, vous le trouverez bientôt indispensable.

Et n’oublier pas, Notepad++ est un outil gratuit, pensez à aider le projet en traduisant ou en apportant une contribution financière.

Sur le même thème

• Outils XML : Cooktop
• Les plugins Firefox : XRefresh
• Comparaison et fusion de fichiers et de dossiers
• Les plugins Firefox : Colorzilla
• MySQL GUI Tools

Photo de just.Luc depuis Flickr

Comment apprendre et pour devenir quoi ?

En guise d’introduction, c’est une question qui me vient à l’esprit : Comment apprendre et pour devenir quoi ? Si il y a quelques années, un « webmaster » faisait son site tout seul dans son coin avec des connaissances très limitées, le web et ses technologies se sont considérablement développés, et aujourd’hui, c’est souvent l’affaire de toute une équipe et de profils très différents. Les besoins sont tellement vastes qu’il est inutile de vouloir tout connaître. Il convient donc de savoir si l’on est plus attiré par la gestion de projet ou le design, la programmation ou le référencement…

Le parcours « classique »

Beaucoup de mes collègues, une majorité, viennent d’IUT ou d’écoles d’ingénieurs. C’est le parcours « classique » dans la plupart des domaines. C’est globalement le profil le plus recherché par les SSII. Les plus petites structures du style « web agency » recherchent probablement plus l’expérience et les compétence que le diplôme, il faut donc faire ses preuves.

Les formations web

Les formations orientée spécifiquement vers le web sont un moyen d’apprendre rapidement et arriver à un niveau acceptable pour créer ou maintenir de petits sites. On y apprends les bases de l’HTML, des CSS et du Javascript, l’utilisation d’un logiciel WYSIWYG et la publication FTP, mais aussi les bases de la retouche photo. Ces formations sont très souvent courtes, voire très courtes, de 10 jours à quelques semaines. Inutile de préciser qu’avec ces bases très légères vous serez parfaitement aptes à vous créer une page perso, mais inutile de voir plus loin. Si vous en doutez, faites une recherche sur les termes « formation webmaster » et regardez le programme ! Certaines formations vous apprennent Dreamweaver en deux jours, Flash en trois et Photoshop en deux heures le tout pour plus de 3000€ HT !

Il existe des formations plus poussées qui abordent la programmation, avec PHP le plus souvent. A l’heure du Web2.0 impossible de développer un site web sans connaitre les notions de POO ou MVC.

Ces formations ont l’avantage d’être d’accès facile, le prix est relativement élevé par rapport à la durée, mais n’importe qui peut y prétendre. Avec un DIF, ca peut être un moyen d’élargir ses compétences et de faire un premier pas vers le développement web.

Les formations généralistes

Bien sûr les formations généralistes sont bien plus poussées, mais leur durée, leur coût éventuel et leur accès y sont moins aisés.
La durée et le financement peuvent être des facteurs bloquants dans le cadre d’une reconversion par exemple, ou il sera difficile de se lancer dans un cursus d’école d’ingénieur ou un IUT. En revanche, pour un jeune bachelier, ou un étudiant déjà titulaire d’un DEUG ou d’un BTS, c’est certainement la meilleure solution qui soit. La formation est relativement généraliste et vous permettra de trouver assez facilement du travail, et d’évoluer vers le domaine qui vous plaira le plus (analyse, développement, gestion de projet, architecture, administration de bases de données…).

Ces formations vous ouvrent les portes aussi bien des grands comptes, des SSII des éditeurs de logiciel ou des web-agency, vous pourrez aussi bien travailler sur du site web, (internet, intranet ou extranet) que de la programmation logicielle classique, ou pour des téléphones ou smartphones (Androïd, Blackberry, Iphone…). les métiers et les emplois et les salaires sont divers et variés, et chacun peut y trouver son compte.

Le cas des webdesigners est un cas à part, puisqu’il vaut mieux passer par des écoles de design ou d’arts graphiques qui ont des formations dédiées à l’infographie.

Les formations professionnelles

C’est par là que je suis passé pour ma reconversion. Six mois intensifs à l’ENI, des modules sur la POO et les bases de données, l’apprentissage de .Net et Java. Ensuite, un stage de huit semaines en entreprise, et au final, un diplôme de niveau Bac+2 et une embauche.
Ces formations sont à l’écoute du marché et en contact permanent avec les acteurs informatiques locaux, leurs formations sont taillées sur mesure, et la plupart des élèves d’une promo sont embauchés dès la fin de leur formation.

Le prix de la formation me semble raisonnable vu la qualité des prestation et la quasi assurance de trouver du travail. De plus des aides municipales ou régionales sont souvent accordées, renseignez-vous !

L’auto-apprentissage

Tout le monde est plus ou moins autodidacte, mais pour arriver à se former vraiment tout seul, il faut énormément de temps, mais c’est important, car vous devrez en permanence savoir vous adapter pour répondre aux différentes problématiques que vous rencontrerez.

J’ai moi même appris tout seul, avec l’aide de sites web reconnus pour leur savoir faire, en développant des sites web associatifs de façon bénévole. C’est de là qu’est partie mon envie de me former de façon plus professionnelle afin d’acquérir plus de technique et de méthode.

Ma formation m’a permis d’être plus rigoureux, de travailler en équipe et detre bien plus crédible auprès des entreprises. C’est aujourd’hui un plus non négligeable sur mon CV.

L’expérience

Après une bonne formation, vous ne serez expert dans aucun domaine, mais vous aurez de solides bases, il ne tiendra plus qu’a vous de faire vos preuves et de vous spécialiser dans votre domaine de prédilection, sans pour autant vous enfermer dans une technologie qui risque de ne plus être d’actualités dans cinq ans. N’oubliez pas que le web va très vite !

L’expérience s’acquiert aussi bien au sein de votre entreprise que de manière autonome sur des projets persos ou en participant à des projets open-source. C’est un plus recherché par beaucoup d’employeurs.

Conclusion

Tous les moyens sont bons quand la motivation est là, une formation est un plus indispensable pour trouver du travail, et assoir ses compétences personnelles. Mais le diplôme ne suffit pas et la passion est un véritable plus qui fera la différence. C’est un métier ou les technologies que nous utiliserons dans cinq ou dix ans n’existent probablement pas encore.

Alors bon courage !

Sur le même thème

• Les plugins Firefox : XRefresh
• Réinventer la roue, ou pas ?
• Bien utiliser Zend Framework
• Bien définir son projet de site web
• Les plugins Firefox : FoxyProxy

Photo de just.Luc depuis Flickr

Présentation

Le Zend Framework ou ZF est en même temps un framework ou cadriciel et une bibliothèque de classes. Il est développé par Zend Technologies et distribué sous licence New BSD.
Il est actuellement considéré comme un outsider de Symfony mais ils sont à mon sens tout à fait concurrents et le choix entre les deux se fera juste sur le feeling que vous aurez avec l’un ou l’autre. Pour ma part, je trouve que ZF est plus souple que Symfony et qu’il correspond mieux à ma vision de PHP, mais c’est un avis très personnel basé sur mon expérience.

Pour plus d’informations sur le Zend Framework, lisez la présentation qu’en fait la communauté française :

• Présentation du ZF

Documentation

La documentation du Zend Framework est bien développée, pas toujours complète sur certains sujets, mais une excellente base avec beaucoup d’exemples. Elle est traduite dans un grand nombre de langue, mais pas toujours de façon exhaustive. La documentation française n’est faite qu’en partie, vous y trouverez donc des passages en anglais. Cependant, cela reste facilement accessible.

• Documentation française du Zend Framework

Normes

Pour profiter pleinement du framework de Zend il faut en respecter les principes, et notamment les régles d’écriture du code. Ainsi votre code sera plus lisible, et potentiellement plus facile à partager avec la communauté, ou pour vous faire comprendre sur les forums d’entraide.

• Règles d’écriture du framework

Bonnes pratiques

Pour progresser rapidement dans la compréhension et profiter au maximum des possibilités offertes par le Zend Framework, plusieurs bonnes pratiques s’imposent !

• Respect des concepts
• Analyse du code, pour comprendre le fonctionnement et les subtilités que la doc n’explique pas
• Utilisation de Google pour trouver des exemples, beaucoup de blogs font des tutos très intéressants
• Participation active à la communauté francophone par le biais du forum

En résumé, un framework ne vous apporte pas juste des bouts de codes, mais un cadre de travail standard, des bonnes pratiques, un état d’esprit en somme. Et c’est ce tout qui vous permet d’être efficace.

Communautés & Forums

Les communautés apportent donc des ressources supplémentaires, tutoriels, exemples de code, forums de discussion, mais demandent aussi de l’investissement pour ceux qui le souhaitent, alors si vous avez le temps et les capacités n’hésitez pas à proposer votre aide pour la traduction, la rédaction de cours, ou pour participer au développement même du framework !

• La communauté anglophone
• La communauté francophone
• Le forum de la communauté francophone
• La communauté francophone de developpez.com

Tutoriels

Google ne suffit pas toujours à trouver son bonheur, voici donc les sources ou je me fournit en tutos.
L’idéal pour bien appréhender un sujet, c’est le tutoriel vidéo, et pour le Zend Framework, un site lui est dédié :

• Zendcast

developpez.com propose également un tutoriel pour débuter :

• Tutoriel ZF pour débutant sur developpez.com

Je suis à la recherche d’autres sites avec des tutoriels de qualité, n’hésitez pas à m’indiquer les vôtres en commentaire.

Livres

Pour bien débuter, il est impératif de connaître PHP5 et la POO, et si possible le principe « Modèle Vue Contrôleur ».
Avec ces pré-requis le livre de Guillaume Ponçon et Julien Pauli devrait vous permettre de rapidement comprendre les principes de base :

• Bien développer en PHP de Guillaume Ponçon et Julien Pauli

Ce livre sera très bon pour les non-initiés, mais je ne vous le conseille pas si vous maîtrisez déjà PHP car il ne rentre pas assez dans le détail des rouages du framework et ré explique des concepts basiques pour le développeur PHP averti.

Et si vous avez besoin de vous remettre à jour sur PHP, deux articles de ce blog devraient vous permettre d’y arriver :

• Bien développer en PHP
• Les bons outils pour PHP

En savoir plus…

Pour en savoir plus sur les frameworks PHP, n’hésitez pas à aller voir le comparatif de frameworks PHP.

Sur le même thème

• Réinventer la roue, ou pas ?
• Les plugins Firefox : FoxyProxy
• Navigateur Web standard : Firefox
• Les plugins Firefox : XRefresh
• Les bons outils pour PHP (partie 2)

Il faut bien avoir en tête que ce sont les petits gains par ci par là qui feront la différence. Cela vous demandera finalement assez peu de travail pour les premiers résultats et beaucoup plus pour arriver à un résultat parfait. Mais même sans pousser la démarche jusqu’au bout, l’effet sera bénéfique en termes d’audience, et votre taux de transformation devrait augmenter lui aussi.

Voici donc quelques conseils, et quelques références afin de maîtriser le sujet

Photo de GemMoth depuis Flickr

L’optimisation c’est quoi ?

On peut voir dans un premier temps l’optimisation comme la mise en œuvre des moyens disponibles pour améliorer l’existant. Un second temps permet d’accentuer encore les performances en ajoutant de nouveaux moyens. Nous traiterons uniquement du premier point ici. Changer d’hébergeur ou de serveur pour augmenter vos performances est un solution, mais avant cela tout un panel de techniques permet de faire mieux avec les mêmes ressources.

Quelques statistiques

La taille des pages a plus que triplé en 5 ans, passant de 90Ko à 310Ko. Dans le même temps on a aussi doublé le nombre de composants externes par page (de 25 à 50)Une page web c’est en moyenne 500 mots et 600 balises HTML ! Si l’on ajoute a cela que le nombre de connexion RTC est encore non négligeable aux États-Unis par exemple.

Perdre 500ms c’est perdre 20% de trafic pour Google et réduire de 25% le poids de la page c’est gagner 25% d’utilisateurs à moyen terme pour Google. Augmenter la latence de 100ms c’est perdre 1% de ventes pour Amazon. Pour Yahoo! perdre 400ms c’est avoir 5 à 9% d’abandon en plus.

A partir de 4 secondes d’attente on perd massivement les visiteurs…

Que doit on améliorer ?

Les améliorations à prévoir sont au niveau du paramétrage du serveur, de la qualité du code, de choix techniques, de la gestion des composants web…

Des outils sont là pour vous aider à identifier les points importants parmi lesquels on trouve des plugins Firefox :

• Yslow
• Google Page Speed

Et des sites de mesure de performance :

• site-perf
• IBM Page Detailer
• Web Pagetest

Notez que ces derniers pourrons vous permettre de tester votre site depuis l’autre bout du monde et voir les impacts que cela a sur votre site.

Deux règles principales pour la performance des sites web sont de réduire le nombre de requêtes HTTP et de limiter la taille des données qu’on télécharge. Voyons cela plus en détail.

Optimisation de la configuration du serveur

La mise en cache

La mise en place d’un cache côté serveur est une bonne chose et permettra de fournir un contenu plus rapidement à l’internaute, mais le protocole HTTP permet lui aussi quelques prouesses. Il est efficace pour la moitié des utilisateurs qui affichent une première page de votre site. Soit parce qu’ils sont déjà venus auparavant ou parce que vous partagez des ressources avec d’autres sites via des CDN.
Dès la deuxième page de votre site il est bénéfique pour 80% des utilisateurs, les 20% restants ayant par exemple désactivé leur cache.

Configurez donc votre serveur pour qu’il envoie des indications de mise en cache au navigateur.

La compression des données

On peut gagner entre 50 et 90% du poids d’une page pour une occupation serveur de 5%. Si votre serveur le permet en terme de ressources, le bénéfice sera immédiat, et encore plus pour les connexions lentes.

• Tests de compression de pages web
• Visualiseur de ressources réseau

ETags

Désactivez les ETags si le site est en cluster. Leur performance est alors très aléatoire. Si vous n’avez pas de cluster, vous pouvez les laisser, même si YSlow vous fait la remarque.

Impacts de la latence réseau

Avec un temps de latence avec le serveur de 20ms, pour 25 requêtes externes on perd donc une demi seconde ! Et encore le temps de latence est plus souvent entre 30 et 60 ms. On peut cependant relativiser un peu car la parallélisation des téléchargements permet de limiter cet effet.

Il est donc important de limiter le nombre de composants à charger par page.

L’utilisation de connexions persistantes sur des serveurs statiques (CDN) paraît être un bon moyen de limiter les effets de la latence, mais son paramétrage peut être délicat et dépends de votre cas particulier. L’abus de cette techniques pourrait avoir l’effet inverse en engorgeant le serveur de connexions persistantes inutiles.

Pour la concaténation de vos fichiers, un module d’Apache permet de faire le travail côté serveur, je ne l’ai pas testé, mais j’attends vos retours sur le sujet dans les commentaires :

• Mod_concat

Optimisation du code source

HTML

Un code standard limite le travail de l’interpréteur HTML, par rapport à un code illisible que le navigateur devra corriger à la volée.
Limiter la profondeur du DOM pour limiter le reflow, c’est à dire la réorganisation de la page par le navigateur en cas de changements au niveau de la structure de la page. Pour les tableaux vous pouvez utiliser le mode de rendu fixe des tableaux HTML pour limiter le reflow.

Vous devez limiter les iframes qui sont coûteuses en termes de performances, même vides.

CSS

Pour les frameworks CSS, utiliser un cache central (google, yahoo…) permet de partager un cache avec tous les autres utilisateurs du CDN. Ainsi il y a de fortes chances pour que vos librairies soient déjà en cache dans le navigateur de votre visiteur.

Mettre les scripts en début de page pour que le navigateur puisse faire la mise en page le plus tôt possible.
L’utilisation conjointe de scripts externes minimisés, permet de gagner jusqu’à 25% du poids des feuilles de style.

Ne pas utiliser @import pour les CSS, moins performant et ne pas utiliser les filtres CSS, non standard et très coûteux en ressources. Si vous avez des modifications CSS à faire, faites les d’un seul coup pour éviter le reflow et non pas dans une boucle !

Javascript

Pour les bibliothèques génériques (jQuery, Dojo…) l’utilisation d’un cache central (google, yahoo…) permet comme pour les CSS de partager un cache avec tous les autres utilisateurs du CDN.

Pour optimiser encore mettez les scripts en fin de page. Le navigateur pourra afficher la page correctement avant de les charger, et l’utilisateur pourra naviguer avant la fin du chargement. Le temps qu’il interagisse avec la page, le Javascript sera chargé.

Comme pour les CCS, des scripts externes minimisés, permettent de gagner jusqu’à un tiers du poids des fichiers.

• CSSOptimiser
• CleanCSS

Et dans vos scripts utilisez des sélecteurs précis basés sur l’id et pas sur les classes css, l’identifiant étant unique la navigateur retrouve plus facilement la balise demandée; que si il doit analyser toutes celles de la page.

Ajax

Ajax permet d’améliorer le ressenti utilisateur en limitant le rechargement de la page au strict minimum. C’est donc une bonne piste d’optimisation, mais attention à le faire le mieux possible. Pour cela, envoyer les requêtes AJAX avec la méthode get et utiliser le cache de requête HTTP.
Pour le format de données vous pouvez utiliser JSON ou XML, les deux solutions ont leurs avantages et inconvénients, mais sont bien plus performantes que d’envoyer du code HTML pur !

Optimisation des images

Les formats d’image

En JPEG on peut gagner jusqu’à 90% du poids d’une image avec une perte acceptable (compression autour de 55, à tester car chaque logiciel implémente sa propre échelle de compression). Idéal pour les photos.

En PNG on peut gagner entre 75 et 90% du poids de l’image sans perte. Idéal pour des images avec du texte. Attention à prendre du PNG8 et non pas 24 !

Le GIF ne devrait jamais être utilisé, sauf éventuellement pour du GIF animé.

Sprites et métadatas

L’utilisation des sprites, permet de diminuer l’impact du temps de latence et le poids des images. Le poids du sprite généré est inférieur à la somme des images qui le composent !

• Sprites CSS : Meurs, découpe d’images, meurs !
• CSSSprites
• SpriteGen

La suppression des metadata des images avec Smushit, Optipng, Pngcrush ou PunyPng apporte un gain de 15% environ du poids des images en supprimant les données inutiles dans un contexte web des photos.

• PNGCrush
• OptiPNG
• PunyPNG

Favicon

Même si il n’est pas spécifié, les navigateurs le cherchent et chargent une page 404 si il n’est pas présent. Cela peut donc être très coûteux, surtout si votre page d’erreur personnalisée est lourde.

Ma référence pour avoir des information et des tests sur le traitement des images :

• CSS-IG : Optimisation Web, format PNG

D’autres pistes d’optimisation

Il faut à tout prix limiter les redirections sur la page d’accueil, cela augmente la latence et n’est souvent qu’un mauvais palliatif à une solution plus pérenne. Ce n’est d’ailleurs pas bon non plus pour votre référencement.

Les cookies

Un cookie est envoyé avec chaque requête http, il faut limiter strictement leur taille, un cookie de 1ko retarde la réponse de 16ms en moyenne, avec 50 composants dans la page, on gagne donc 0,8s ! Il faut donc si vous le pouvez limiter les cookies aux sous domaines afin qu’il s n’impactent pas le téléchargement des autres ressources. En utilisant un CDN ou un sous domaines pour les données statiques, vous règlerez le problème.

DNS

Le temps de résolution d’un domaine tourne autour de 30ms. Multiplier le nombre de domaine permet de paralléliser les téléchargements. Certains « vieux » navigateurs ne téléchargent que deux ressources simultanément, mais les plus récents en prennent 4 fois plus en moyenne. Limiter le nombre de domaines à 4 est un bon compromis.

Buffer

Il est important également d’envoyer votre buffer le plus rapidement possible. L’utilisateur verra sa page commencer à se charger plus rapidement. Son ressenti sera bien meilleur, surtout si les temps de génération de votre page sont longs.

Références utiles

Une des meilleures références sur le sujet est en français. Vous y trouverez beaucoup d’explications

• Le blog d’Éric Daspet sur les performances web

Les autres en anglais sont aussi de très bonne facture :

• Les bonnes pratiques par Yahoo
• Les bonnes pratiques par Google
• Le blog de Steve Souders

Conclusion

Une fois tous ces éléments mis en place, votre site doit avoir retrouvé de sa vigueur et si tout n’est pas encore parfait, il est peut être temps de passer à l’étape deux. Votre site à probablement besoins de moyens spécifiques, mais ces conseils lui sont déjà profitables et sont suffisants pour la plupart des projets web.

un livre sur le sujet devrait paraitre bientôt, je ne manquerai pas de vous tenir informé !

Merci à Eric Daspet de m’avoir ouvert les yeux sur ce sujet aussi utile que passionnant.

Sur le même thème

• Les générateurs de sprites CSS
• Bien utiliser les feuilles de style (CSS)
• Recette & environnements de test
• Utiliser Chrome et violer la neutralité ?
• Les plugins Firefox : Colorzilla

Il existe des logiciels simples pour faire ce travail de comparaison. Voici donc une présentation d’un outil libre et gratuit, Winmerge.

Photo de gomattolson depuis Flickr

Présentation de l’outil

WinMerge est un outil de comparaison et de fusion de fichier sous Windows. Grâce à la coloration syntaxique des fichiers vous visualisez instantanément les portions de codes qui diffèrent entre vos fichiers et vous pouvez copier les différences d’un fichier à l’autre d’un simple clic pour fusionner les documents.
Il supporte la comparaison de fichiers aux formats texte DOS, UNIX et MAC.

WinMerge propose de comparer des répertoires complets en filtrant éventuellement sur l’extension des fichiers à comparer.

Fonctionnalités annexes

Il s’intègre dans le menu contextuel et autorise la sélection de fichiers par glisser/déposer. Et si vous utilisez TortoiseSVN pour la gestion des version de fichier sur vos projets, vous pouvez intégrer WinMerge à la place de l’outil par défaut.

Téléchargement & installation

Installer Winmerge

Alternatives

Pour les utilisateurs d’environnement Linux il existe de multiples alternatives libres et gratuites qui devraient vous satisfaire :

• Meld
• Kompare

Si vous avez des astuces pour simplifier la comparaison et la fusion de fichiers, les commentaires sont là pour ça !

Sur le même thème

• Outils : Edition de fichiers avec Notepad++
• MySQL GUI Tools
• Les plugins Firefox : Colorzilla
• Outils XML : Cooktop
• Les plugins Firefox : XRefresh

Photo de Frédéric de Villamil depuis Flickr

Définitions

Javascript ou JScript, suivant le navigateur, est un langage de script orienté objet ou plus exactement orienté prototype qui s’exécute côté client, sur la machine de l’internaute. Il est issu de la norme ECMAScript.

• La définition de Javascript sur Wikipédia
• La définition d’ECMAScript sur Wikipédia

Historique

Javascript a été créé par Netscape en 1995 et mis en place dand Netscape Navigator dès 1996. Microsoft réagit rapidement et implémente alors JScript dans son navigateur. Netscape propose son implémentation à l’Ecma International pour le standardiser, ce qui sera fait en 1997.

Depuis Adobe a lui aussi créé sa propre implémentation du standard, ActionScript, utilisée dans Flash, et le standard évolue régulièrement pour apporter de nouvelles fonctionnalités.

Toutes ces implémentations sont quasiment respectueuses du standard, mais pas entièrement compatible entre elles. Les différences sont cependant minimes et l’utilisation d’un framework Javascript permet de ne pas se préoccuper de ces différences.

Ou apprendre ?

Pour bien débuter, Openweb propose une belle présentation du langage qui pourra à l’occasion servir d’aide mémoire. Je vous conseille également les articles sur le sujet de l’excellent Pompage, qui explique très bien comment écrire un code Javascript non-intrusif afin de ne pas gêner les utilisateurs qui le désactivent ou utilisent des navigateurs alternatifs sans Javascript comme les lecteurs d’écran.

• Tutoriel ECMAScript sur OpenWeb
• Tutoriels Javascript sur Pompage.net

Je n’ai pas d’autres ressources sous la main pour apprendre le JS, mais c’est un langage objet qui peut aussi être utilisé de façon procédurale, les habitué des ces techniques s’y retrouverons vite, pour les autres, l’apprentissage sera favorisé par un livre récent, mais là aussi, je n’en ai pas en référence. J’attends donc vos commentaires sur le sujet.

Documentation

La documentation est disponible sous différentes formes, je vous conseille les suivantes qui sont claires et complètes.

• Documentation Javascript de mozilla
• Documentation ECMAScript officielle

Méfiez vous des sites spécialisés en javascript « procédural » et qui ne proposent que des bouts de scripts, si ils étaient intéressants il y a quelques années, l’utilisation d’un framework est aujourd’hui une solution plus pérenne.

Questions / Réponses

Et comme la documentation ne suffira pas, la Faq de developpez.com et le forum Javascript d’Alsacréation devraient vous permettre de solutionner vos problèmes.

• Faq Javascript de Developpez.com
• Forum Javascript d’Alsacréation

Les frameworks et bibliothèques Javascript

Elles sont à l’origine du renouveau de Javascript car elles simplifient grandement le développement. Elles permettent de ne pas réinventer le roue en permanence, et permettent des effets très « web 2.0″ qui améliorent l’ergonomie et l’expérience utilisateur. Quelle que soit celle que vous choisissez les fonctionnalités sont en partie équivalentes, et le résultat dépendra surtout des plugins que vous pourrez installer ou des développements que vous ferez.

Pour simplifier, les plugisn permettent à l’utilisateur lamda de rapidement avoir l’effet voulu, mais pour un résultat plus rapide ou plus précis fonctionnellement, il faudra écrire son propre code.

J’utilise principalement JQuery avec JQueryUI pour les effets graphiques et Mootools. Ils sont simples à utiliser pour mettre facilement en place des effets simples sans trp de connaissances, ou pour des développements plus complexes avec une bonne expérience en JS.

• JQuery
• JQuery UI
• Mootools

Il en existe plein d’autres avec parmi les plus connus :

• Prototype
• Dojo Toolkit

Pour vous aider dans votre choix, des comparatifs existent sur Internet, Bestwebframeworks devrait vous aider dans cette tâche.

Outils

Pour déboguer vos scripts je vous conseille les extensions Firefox, en particulier Firebug que j’utilise en quotidiennement.

• Installer Firebug pour Firefox
• Installer Venkman pour Firefox

Je déborde un peu du sujet en abordant l’optimisation de code. Pour améliorer le temps de chargement de vos scripts, n’hésitez pas à utiliser des bibliothèques disponible sur les CDN de Google ou Yahoo par exemple et de compresser votre code avec Compressorrater.

• Compressorrater

Vous voilà avec l’essentiel des connaissances pour travailler sereinement avec Javascript.
Et pour ceux qui veulent creuser le sujet, je vous conseille une discussion sur l’implémentation de Javascript coté serveur sur Linuxfr.org.

Encore une fois je n’ai pas trouvé de photo illustrant parfaitement « Javascript », alors celle-ci avec ses branches tortueuses me rappelle un peu le Javascript approximatif d’il y a quelques années… C’est léger comme explication, mais c’est tout ce que j’ai, et puis la photo est belle, ça suffit non ?

Sur le même thème

• Les plugins Firefox : Firebug
• Les plugins Firefox : TileTabs
• Bien utiliser les feuilles de style (CSS)
• Bien développer en PHP (partie 1)
• Bien écrire HTML & XHTML

Photo de Hamed Saber depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de Firefox :

• Installer Firebug pour Firefox

Présentation

Firebug permet d’infiltrer le code source de votre page web afin de vérifier ce qui s’y passe, aussi bien pour le DOM, le code HTML, les CSS, le Javascript ou les requêtes AJAX. Vous pourrez même agir en direct sur le code et voir les effets de vos modifications instantanément.
Pour cela Firebug est doté d’un débogueur, d’une console d’erreur, et d’une ligne de commande.

Fonctionnalités principales

Pour HTML et CSS, vous pouvez afficher le code lié à chaque balise HTML, et voir toutes les propriétés définies que ce soit directement ou par héritage. En modifiant ces valeurs vous pourrez vous rendre compte des changements de rendu immédiatement.

Coté Javascript vous pourrez ainsi visualiser le code lié à la page et le suivre pas à pas dans son exécution. Les erreurs sont visibles dans la barre d’état et affichées dans la console. Vous pourrez également interagir avec Javascript grâce à la ligne de commande.

AJAX bénéficie aussi de fonctionnalités bien pratiques. Vous pouvez ainsi visualiser les requêtes envoyées et les réponses obtenues en temps réel.

Le profilage d’application est également facilité avec un outil graphique qui permet de visualiser les requêtes HTTP et les temps de réponse qui en découlent.

Tutoriel

L’extension est tellement complexe et puissante que je vous recommande la lecture d’un très bon tutoriel :

• Tutoriel Firebug

FirebugLite

Une version plus légère mais tout aussi pratique peut être embarquée dans d’autres navigateurs comme Internet Explorer, Opéra ou Safari. Utile donc pour finaliser votre développement sur ces environnements.

• FirebugLite

Les extensions

Firebug à beau être une extension, cela ne l’empêche pas d’être extensible ! D’autres extensions Firefox étendent encore les possibilités de Firebug parmis lesquelles on retrouve :

• Firecookie : pour gérer les cookies
• Firediff : pour voir les différences entre deux états
• FirePHP : pour déboguer votre code PHP
• FireRainbow : pour ajouter la coloration syntaxique au Javascript
• YSlow : pour optimiser le temps d’affichage votre site web
• SenSEO : pour optimiser votre référencement naturel

Je reviendrais bientôt sur certaines de ces extensions qui méritent un article spécifique. En attendant vous en trouverez en tout plus d’une vingtaine sur le site de l’éditeur :

• La liste complète des extensions de Firebug

Et si vous n’en avez pas encore assez, il ne vous reste plus qu’a créer votre propre extension pour Firebug, pour cela rendez vous sur le groupe Google « Firebug Working Group » créé à l’occasion.

Voilà, vous avez désormais les cartes en main pour déboguer facilement vos applications. Bon courage !

Sur le même thème

• Les plugins Firefox : XRefresh
• Bien utiliser Javascript
• Les plugins Firefox : TileTabs
• Les plugins Firefox : Colorzilla
• Bien utiliser les feuilles de style (CSS)