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

Comme pour le premier tome, HTML5 pour les webdesigners, ce livre rassure sur la manière de faire, explique rapidement les bases, dédramatise et simplifie la prise en main, le tout dans un style bien écrit et agréable à lire ! L’auteur ne se limite pas à aborder les points technique mais pose des questions et explique ses réponses et remarques, très utile pour bien comprendre les enjeux !

Photo de Abulic Monkey depuis Flickr

L’auteur

Dan Cederholm est le fondateur du studio de design SimpleBits, expert reconnu sur le webdesign et les standards. Il est également co créateur de dribbble, joueur de yukulele et auteur des livres suivants :

• Handcrafted CSS (New Riders)
• Bulletproof Web Design, Second Edition (New Riders)
• Web Standards Solutions

Utiliser CSS3 aujourd’hui

Dan conseille de ne surtout pas lire la spécification, elle n’est pas faite pour tout le monde, en revanche, tout le monde peut utiliser CSS3, il liste ce qui peut être utilisé dès maintenant, et aborde les préfixes de navigateur, indispensable pour une implémentation immédiate et pérenne.

Comprendre les transitions CSS

Le chapitre aborde les transitions, et les mets en valeurs avec un exemple à suivre tout au long du livre.

Broder avec CSS3

Je reprends les sous titres de chapitre très bien trouvés, qui expliquent que CSS3 est là pour apporter surprise et émerveillement. C’est la touche ne plus qui améliore l’expérience utilisateur, sans pénaliser ceux qui n’en bénéficient pas.
Dan pose la question : les sites web doivent ils offrir exactement la même expérience dans tous les navigateurs ? Et y réponds avec ce site au nom tout trouvé : dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

Transformer le message

Toujours avec le même fil directeur, les exemples s’enchaînent pour aborder les transformations et les rotations

Arrières plans multiples

Arrière plans multiples, effets de parallaxe sont au sujet de ce chapitre.

Enrichir les formulaires

Autre sujet très intéressant sur l’ajout de CSS3 dans les formulaires. Pour embellir et alléger les boutons avec des dégradés ou des ombres, mais aussi l’ajout d’animations au focus ou au survol des éléments pour un changement de style tout en douceur.

Conclusion

On termine par un chapitre qui donne les clés pour évangéliser, aborde le futur de langage et donne une précieuse liste de liens indispensables pour creuser un peu !

J’en veux un !

• CSS3 pour les webdesigners
• Broché : 122 pages
• Éditeur : Eyrolles
• Édition : 1ère (20 janvier 2011)
• Collection : A book appart
• Langue : Français
• ISBN-13: 978-2212129878

Toute ressemblance avec l’atelier de Jérémie Patonnier au dernier Paris Web est certainement fortuite, mais bon enfin, ils causent du même sujet… Pour ceux qui avaient oublié de prendre des notes, ca fera un bon résumé !

On regrettera que le livre n’aborde pas les sujet suivants :

• media queries
• multicolonnage
• webfonts

Mais on peut penser que cela fera l’objet de prochains volumes, les media queries étant déjà annoncées dans le tome 4.

Le deuxième tome de la collection est sorti rapidement et la suite de la collection devrait se faire au même rythme, c’est l’avantage avec ces petits formats, rapide à lire, mais aussi à écrire, facile à transporter. J’ai pris l’habitude les lire dans le train, et de faire le billet dans la foulée… Mention spéciale si je ne l’avais pas déjà faite au raccourcisseur d’url utilsé spécialement pour le livre, très utile pour éviter de taper des urls à rallonge, avec l’url originale en note de bas de page ! A quand le QRcode ?

La collection

Les tomes suivants sont donc annoncés :

• 3 – The elements of content strategy – 8 mars 2011
• 4 – Responsive web design – printemps 2011

Dans cette jolie collection j’ai aussi envie de voir des livres sur l’ergonomie, l’accessibilité, Javascript, la typographie (micro & macro)…

Sur le même thème

• Livre : Pro Git
• Livre : HTML5 pour les webdesigners
• Livre : Réussir son blog professionnel
  3 exemplaires à gagner !
• Livre : Réussir son site web en 60 fiches
• Bien utiliser les feuilles de style (CSS)

Photo de harold.lloyd depuis Flickr

Pourquoi faire ?

Pourquoi fournir une API ? Si vous lisez cela vous devez déjà avoir une petite idée… Le principe d’Internet c’est le partage, et il existe une multitude de protocoles qui permettent ces échanges (http, ftp, p2p…).
Quel que soit votre activité, son but n’est pas de rester confidentielle, et vous souhaitez sûrement la partager avec le plus grand nombre, le meilleur moyen est de multiplier les manières d’utiliser votre travail.

Que votre webservice fournisse des données (statistiques par exemple) ou des services (calculs, paiement…), il doit trouver son public. En proposant un maximum de possibilités d’y accéder vous augmentez les usages possibles, et surtout vous donnez la possibilité aux utilisateurs de créer des usages auxquels vous n’avez même pas pensé. Votre application devient le vecteur d’usages innovants.

Choisir un format

Les architectures REST ou soap sont très répandues et leur usage est possible simplement via une foule de langages. Vous pouvez rendre votre réponse dans un format défini, mais n’hésitez pas à le rendre paramétrable pour fournir au choix du XML, du JSON ou même du YAML par exemple.
Plus vous proposerez d’options, plus votre API à des chances d’être utilisée ! Vous n’êtes certainement pas le seul à fournir ce genre de service, soyez le meilleur pour garder vos utilisateurs.

Attention à bien penser dès le début aux différentes pistes que vous souhaiter suivre afin de ne pas devoir modifier votre API par la suite et risquer de perdre des clients pour un problème de non compatibilité. Le cas échéant, prévenez les le plus tôt possible et accompagnez les dans la démarche.

Paramétrer

Et tout un tas d’options peuvent êtres ajoutées. Elles peuvent paraitre anodines mais seront d’un grand secours à vos clients. Vous pouvez par exemple leur fournir un compteur d’utilisation de l’API et pourquoi pas un historique des appels. Dans le cadre de prestataires de paiement par exemple, si un callback doit être fait, donnez une liste d’ip publiques afin que le client filtre les appels, donnez lui aussi la possibilité de choisir le nom des variables renvoyées, et pourquoi d’en ajouter… Si les données sont sensibles ajouter une clé secrète et un hashage des données pour certifier les données.

Ne mettez pas n’importe quoi mais restez à l’écoute des demandes, il y a sûrement des cas auxquels vous ne pensez pas, mais qui sont indispensables à vos utilisateurs.

Afin de gérer certaines options, l’accès à un back-office devient nécessaire, ca complique légèrement la tâche mais cela permet de faciliter les échanges avec votre cible. Vous pourrez ainsi collecter un email, attribuer une clé d’API, paramétrer l’API, communiquer avec l’utilisateur, lui fournir des infos statistiques sur son utilisation… Et récolter un maximum d’information pour améliorer votre service.

Sécuriser & tracer

La clé d’API à deux intérêts, limiter l’accès à certaines données ou services à certains clients, et tracer l’utilisation de chacun afin d’en extraire des données statistiques. Ces données vous seront utiles pour améliorer votre service en fonction des usages, mais aussi de mettre en place une stratégie de monétisation.

Une clé secrète permet également d’encoder les données afin de sécuriser les échanges pour qu’ils ne transitent pas en clair et de valider que les données en retour proviennent bien d’un tiers de confiance ayant connaissance de la clé.

Monétiser

Augmenter les usages et favoriser l’utilisation de votre API c’est bien, mais il peut devenir nécessaire de rentabiliser le service ou au moins de payer les frais d’infrastructure (serveur, maintenance, bande passante…). La clé d’API intervient encore ici pour permettre de facturer ou limiter les appels.

On peut imaginer une solution ou les 1000 premiers appels mensuels sont gratuits, au delà un abonnement permet de continuer à utiliser le service.

En plus de la clé d’API pensez à vérifier d’autres éléments comme l’ip pour éviter que des petits malins multiplient les comptes pour contourner le système !

Documenter

Avant d’utiliser un webservice, une phase d’analyse est nécessaire afin de cerner les possibilités et les limites de l’API. Cette phase est importante, c’est le premier contact du développeur avec votre produit. Il doit rapidement cerner si il pourra l’utiliser ou pas. Il en a probablement ciblé plusieurs, et ne les implémentera pas tous. Il faut donc le rassurer au plus vite, la documentation est là pour cela. Elle doit à la fois lui présenter le produit, l’API, des exemples, une FAQ… Tous les éléments dont il pourrait avoir besoin sans chercher à droite à gauche.

Pour commencer, une présentation de l’application, et des possibilités de l’API est indispensable pour dégrossir et permettre au lecteur de cerner le sujet rapidement. Ensuite, les pré-requis à l’utilisation de l’API sont nécessaires, avec pourquoi pas les différentes étapes de l’inscription au service. Le but est de faciliter l’implémentation de l’API, que ce soit pour un simple test ou pour un projet en production.

Donner des exemples

Le bla bla c’est bien, mais un exemple ca aide. Avec la mise en place de l’appel à l’API juste avec la documentation, on peut passer à côté d’une subtilité, surtout si le document n’est pas dans notre langue ou mal traduit.
Un exemple de code permet de tester rapidement et de s’assurer que l’appel fonctionne correctement. Les explications permettent ensuite de d’aller plus loin et de jouer avec les options. Je vous dirais bien de mettre cet exemple en PHP pour sa popularité et sa simplicité, mais identifiez bien votre cible afin de fournir les exemples dans les langages les plus susceptibles d’être utilisés.

Fournir une bibliothèque

Pour faciliter l’usage d’un webservice, certains fournissent directement une bibliothèque. Si l’API est complexe cela permet de manipuler facilement les objets et peut simplifier l’implémentation, à condition de répondre au besoin de l’utilisateur. Dans le cas contraire son encapsulation peut s’avérer fastidieuse. Cela peut aussi permettre de déplacer une partie de la logique métier sur le serveur client.
Certains service bancaires offrent la possibilité de compiler directement une extension PHP avec la clé d’API par exemple . On étend ainsi les possibilité du langage lui même et l’expérience utilisateur est excellente. De plus, la clé d’API ou le mot de passe ne sont plus accessibles directement au développeur. C’est un plus non négligeable pour certaines données sensibles.

Fournir un environnement de tests

C’est parfois nécessaire et souvent indispensable. On doit souvent tester l’utilisation dans des conditions similaires à l’environnement de production mais sans contraintes. Toujours avec l’exemple du paiement, l’utilisation d’un numéro de carte bancaire de test permet de simplifier les tests et de simuler les transactions. En règle générale un paramètre supplémentaire à l’appel de l’API permettra de changer de mode et de tester dans des conditions quasi réelles simple à mettre en oeuvre.

Pour conclure…

Les usages de Webservices sont variés, et ces conseils ne sont pas exhaustifs, votre expérience sûrement différente vous a apporté d’autres enseignements, partagez les avec nous !

Sur le même thème

• Opquast : Sites web, les bonnes pratiques
• Trouver un bon hebergeur web, quels critères ?
• Les générateurs de sprites CSS
• Participons à l’utopie web !
• Optimiser son site web

Depuis la première édition je me dis que je dois aller à paris web, que ce rassemblement correspond à mes attentes et mes valeurs, que les orateurs comme les « écouteurs » (Le mot n’est pas bien trouvé mais là je n’ai rien d’autre…) sont une espèce à part (des moutons à cinq pattes à ce qu’il paraît…). Mais mes priorités, probablement mal définies, ne m’ont permis de m’y rendre que cette année. Évidement c’est une erreur, mais je ne le sais que maintenant.

Je ne vais pas m’attarder sur les conférences, toutes intéressantes, certaines vraiment passionnantes, elles sont bien résumées sur le blog de Clever Age ou partout ailleurs, et disponibles en vidéo sur le site de paris web, il n’est donc pas trop tard pour voir les voir !

Je vais plutôt m’attarder sur ce qui tourne autour de Paris Web, cette ambiance particulière qui fait que depuis la fin, les tweets avec le tag #parisweb évoquent un manque, un vide laissé par cet évènement particulier, que désormais tout le monde n’en a plus que pour #sudweb, car personne ne veut attendre un an avant de recommencer !

Alors pourquoi c’est bien ?

Paris-Web c’est Un prix abordable, comparé à d’autres, surtout en pré-vente, de toutes façons vu la qualité, quel intérêt d’avoir le programme pour acheter ?

C’est aussi un lieu qui permet un accueil dans d’excellentes conditions, même avec les grèves, et un buffet excellent en quantité et en qualité et ce n’est pas un détail. Manger sur place est un plus essentiel pour favoriser les échanges, se mêler aux discussions ou faire le point sur les confs passées et à venir…

C’est encore l’accessibilité naturelle, pensée dans les moindres détails, avec des conférences anglaises intégralement et instantanément traduites en français, chapeau pour l’exercice réussi avec une maitrise parfaite, mais surtout des interprètes LSF et la vélotypie en direct.
Même si ce dernier système est perfectible, il dénote une volonté d’aller de l’avant, et ca mérite un grand bravo !

C’est également le choix des contenus, variés et tournés vers l’accessibilité, l’ergonomie, la méthodologie, les bonnes pratiques, les techniques de pointe…

Mais paris web ne serait pas paris web sans sa bonne humeur, son public, ses orateurs, toute cette énergie qui se dégage, lors de l’apéritif communautaire, ou en off… On peut discuter avec tout le monde, particulièrement les orateurs qui sont très ouverts au dialogue. Et boire une bière avec Monique Brunel, Christian Heilman, causer éthique avec Éric Daspet, performance scénique avec Anne-Sophie Fradier ou encore prendre le train et parler accessibilité avec Denis Boudreau, ca n’a pas de prix…

Finalement, j’ai pu échanger avec tous les orateurs avec qui je souhaitait prolonger un peu leur conférence avec quelques questions, ils m’ont tous apporté leurs réponses avec entrain et passion ! Un vrai bonheur !

J’en ai aussi profité pour rencontrer une petite dizaine de personnes que je connaissais indirectement, et les contacts réels, y’a pas à dire c’est quand même bien plus sympa… On se revoit quand ?

Si je devais me plaindre, je dirais que ca ne dure pas assez longtemps, ou que les badges sont écrit trop petit, en plus gros ca favoriserai encore plus le contact !

Voilà j’attends maintenant l’ouverture des réservations pour l’année prochaine, en attendant je vais voir certaines conférences que j’ai raté, et peut être en revoir certaines particulièrement bonnes.

Je suis tout seul dans ce cas ?

Et vous ? Qu’est ce qui vous plait à Paris web ? Êtes vous allé à Paris Web ? Quelle mauvaise excuse avez vous trouvé pour en pas y aller ?

Photo de Laurence Vagner depuis Flickr

Sur le même thème

• Paris Web 2010, j’y serai !
• Soirée connect, j’y serai !
• Webaaz, le développement web de A à Z !
• Twitter & autres…
• Première bougie !

Qui ne s’est jamais plaint de l’omniprésence des publicités, du manque d’ergonomie d’un site, de la laideur d’un autre, de règles floues en matière de gestion de nos données personnelles, d’abus de pouvoir dans les conditions de ventes d’un site en ligne…

Le web est une jungle, de nombreux sites ayant pignon sur rue n’ont que peu de considération pour les internautes… Il existe bien quelques règles, mais la plupart sont soit informelles soit facultatives et personne n’est là pour les faire respecter, alors nous subissons. En dehors du web c’est aussi bien souvent la même chose, les exemples sont partout, mais autant en dehors du web je n’y peut rien, autant sur le web, j’ai mon mot à dire !

En tant que développeur, je participe au web. Je peux donc au travers de mes sites, faire le web dont j’ai envie.

Photo de Castorp Republic’s depuis Flickr

J’envie toujours ceux qui luttent pour de nobles causes, ceux qui donnent de leur temps, ceux qui expriment leurs idées… A mon niveau j’ai souvent l’impression de ne pas faire grand chose, ou pas assez, ce qui suit n’est qu’un début, le sujet peut paraitre futile, c’est tout petit, ca n’empêchera pas d’autres actions plus concrètes, mais c’est déjà ca de pris…

Le web que j’aime…

Et des envies j’en ai plein…

• Un web, joli, bon c’est subjectif, mais j’essaie…
• Un web accessible, ce n’est pas toujours facile, mais avec un peu de travail on peut s’en approcher
• Un web innovant, je ne suis pas obligé de faire des sites « compatibles » avec les navigateurs, je fais des sites standards, chacun est libre d’utiliser un navigateur qui ne l’est pas…
• Un web honnête, mes conditions d’utilisation et de vente sont claires, compréhensibles, écrites dans un français lisible…
• Un web transparent, j’énonce clairement qui je suis, attention, je ne suis pas contre l’anonymat, mais quand je développe un site ou un service, le client doit savoir à qui il s’adresse.
• Un web respectueux, mes utilisateurs peuvent utiliser mon site sans donner d’informations inutiles, juste l’essentiel, et si ils suppriment leur compte, il ne reste rien. Je ne prends que les données qu’ils me donnent volontairement, et je leur permet de connaître ce que je sait d’eux.
• Un web moral, je n’essaie pas de faire de l’argent en me demandant ensuite avec quel contenu, mais j’essaie de monétiser une idée originale.
• Un web transparent, je ne vends pas un service sans le décrire dans ses moindres détails et sans laisser une période d’essai complètement fonctionnelle. Si l’utilisateur n’est pas content cela ne lui coûte rien, il part en connaissance de cause, pas fâché…

J’en oublie peut être, je complèterai au fur et à mesure…

Ce web, j’ai essayé de le créer avec mybabygame, je ne deviendrait probablement pas millionnaire avec mes méthodes qui feraient fuir tous les « rentabiliseurs » du web… D’ailleurs ce n’est pas le but, je voulais juste offrir un service, de la meilleure possible, rendre mes utilisateurs heureux, leur offrir une belle expérience. Évidement, j’en tire un potentiel bénéfice, et heureusement, il récompense mon travail, mais il me semble plus justifié, et, quand mon code sera un peu plus rodé, je pourrais envisager de partager des bouts de code, sous forme de tutoriels pour partager ces longues heures de dev.

Et votre web ? Il ressemble à quoi ?

J’espère que le résultat vous plaira, il reste encore certainement du travail à faire dans ce sens, vous avez certainement des idées pour aller plus loin, j’attends votre avis sur la question…

Sur le même thème

• Fournir un webservice et son API
• Le temps passe vite…
• Livre : Réussir son site web en 60 fiches
• Gandi & Webaaz vous offrent un nom de domaine !
• Recette & environnements de test

Paris Web c’est pour bientôt ! Il reste des places à tarif réduit jusqu’à fin août ! Mais dépêchez vous !

Je n’ai pas encore eu l’occasion de m’y rendre, juste beaucoup d’envie, et ce sera donc ma première participation. J’y vais pour me tenir au courant sur des sujets qui me tiennent à cœur, aussi personnellement que professionnellement. Des sujets qui me passionnent et qui seront au centre de l’évènement. Je peux donc le dire : Paris Web 2010, j’y serai !

Au passage j’ajoute qu’après avoir passé du temps en SSII ou l’on fait du web sans trop se préoccuper de ce qui me parait fondamental (qualité, standards, accessibilité, bonnes pratiques…) ou alors de façon superficielle, sans en comprendre l’essence même, je suis plutôt content de voir que Clever Age est partenaire officiel de Paris Web 2010.

Que vous soyez déjà inscrit ou prêt à le faire, j’espère vous y retrouver, laissez un commentaire qu’on trouve le moyen de se croiser et de discuter un peu web !

Photo de Reinante El Pintor de Fuego depuis Flickr

Sur le même thème

• Retour à la réalité après un premier paris web !
• Webaaz, le développement web de A à Z !
• Soirée connect, j’y serai !
• Twitter & autres…
• Participons à l’utopie web !

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

Pourtant avec le peu de recul que nous donne le web, des initiatives permettent de hausser un peu le niveau. Les normes du W3C par exemple permettent par leur respect de garantir que le document sera interprétable par tout les navigateurs. Les référentiels d’accessibilité permettent aux utilisateurs ayant une quelconque déficience de pouvoir surfer avec une contrainte moindre. Le projet Opquast propose un référentiel qualité web mais surtout un outil de suivi de la qualité des services en ligne.

Photo de flickrolf depuis Flickr

Présentation

La première version du référentiel à vu le jour fin juin 2004 avec la mise en ligne d’une liste de bonnes pratiques pour l’amélioration de la qualité des services en ligne.
A l’origine de ce projet, Elie Sloïm directeur de Temesis et Fabrice Bonny co-fondateur du site Openweb

C’est un formidable outil de formation, d’explication, et d’amélioration des sites.

Opquast permet de tester aussi bien la qualité de la conception que la qualité d’utilisation. Les techniques étant de plus en plus variées et complexes, une personne seule ne peut pas maitriser parfaitement toute la chaine de développement d’un site web. La liste des bonnes pratiques permet au développeur comme au décideur de vérifier les points principaux classés par domaine. Chaque bonne pratique est détaillée avec un objectif, des solutions techniques et des moyens de contrôle.

Et le petit plus, Opquast est publié sous licence Créative Commons BY-SA.

Voici les différents sites du projet Opquast :

• Opquast.com : OPen QUAlity STandards
• Checklist.opquast.com : Les bonnes pratiques de la qualité web
• Reporting.opquast.com : L’outil de reporting pour évaluer vos sites et communiquer
• Directory.opquast.com : L’annuaire des sites respectant le référentiel
• Opquast.org : L’atelier Opquast

Nouveautés

Le web évolue et la liste a donc été revue de fond en comble par les membres de l’atelier Opquast, qui ont débattu dans la bonne humeur et l’humour mais avec des avis bien tranchés, et toujours un maximum d’arguments. Un consensus nécessaire à donc fini par émerger, c’est la base de ce référentiel. Une période d’appel à commentaires publics à permis d’affiner un peu plus le travail.

Pour le côté pratique, les bonnes pratiques sont désormais filtrables en fonctions de différents critères :

• Modèle VPTCS : Visibilité, Perception, Technique, Contenus, Services
• Processus : prototypage, design, intégration, CMS et développements, rédaction, référencement
• Services : e-commerce, Espaces publics, Newsletter, Syndication
• Thème : Mobile, Internationalisation, Accessibilité, performance, Sécurité, Utilisabilité

Vous pouvez ainsi en extraire les bonnes pratiques d’utilisabilité spécifiques à la phase de prototypage par exemple.

La navigation par tags et le téléchargement des listes aux formats Excel, Open Office ou PDF sont aussi au programme.

Interview d’Élie Sloïm, directeur du projet

Opquast en vidéo

Des présentations du projet et des outils sont disponibles en vidéo :

• Opquast en vidéo sur Dailymotion

Mémento

• Sites web, les bonnes pratiques
• Dépliant 10×21 : 14 pages
• Éditeur : Eyrolles
• Édition : 2ème (22 janvier 2009)
• Collection : Mémento
• Langue : Français
• ISBN-13: 978-2212124569

Ce mémento est tiré de la première version des bonnes pratiques, mais est toujours d’actualité.

Suivre l’actualité d’Opquast

• Le blog Opquast
• Opquast sur Facebook
• Opquast sur Twitter

Mon avis

Utilisateur de la première version dès ses débuts, j’ai toujours été convaincu par ce projet et pas l’enthousiasme qui rayonne autour, et j’ai été très heureux de contribuer à l’élaboration de cette nouvelle version.

J’ai peut être un regard plus critique, avec l’expérience, je me rend compte que je ne suis pas à 100% d’accord avec toutes les propositions, et dans mes évaluations de sites, je garde mon libre arbitre pour décider ce qui me semble bon. Mais ce référentiel m’amène au minimum à me poser les bonnes questions, et c’est essentiel !

Je suis donc toujours convaincu que c’est un excellent outil et qu’il reste encore beaucoup de travail pour évangéliser les développeurs et les décideurs.

Et vous quels outils avez vous à disposition pour qualifier vos sites web et améliorer leur qualité ? Est-ce que l’on vous donne les moyens d’arriver à un résultat de qualité ? Que vous manque t’il pour y arriver ?

Sur le même thème

• Fournir un webservice et son API
• Livre : HTML5 pour les webdesigners
• Les générateurs de sprites CSS
• Veille techno Web de F à Z (partie 2)
• Optimiser son site web

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

Photo de Jean-Marc Hardy de 60questions.net

Présentation

La force de ce livre est à mon avis de s’adresser à tous les publics, aussi bien techniques que fonctionnels, MOE ou MOA, débutants ou expérimentés. C’est le résultat d’une écriture simple et d’explications claires. Les auteurs ne rentrent pas dans les détails techniques, mais expliquent les tenants et les aboutissants, et donnent les pistes pour en savoir plus sur le sujet. Le tout est accompagné d’exemples et de références précises.

La qualité Internet : Indispensable et fragile

Le livre tout en couleurs est agréable à lire, soit du début à la fin; idéal pour une première lecture, soit en cherchant le sujet qui nous intéresse grâce à un index précis.

On aborde ainsi aussi bien les performances web, que la qualité du contenu, du design ou l’impression des pages…

Chaque fiche présente ainsi :

• Une courte introduction
• Un conseil argumenté
• Des citations
• Des chiffres statistiques pour étayer le propos
• Une étude de cas comparée
• Des références & outils pour aller plus loin

La fin du livre est consacrée à une bibliographie de qualité et des références web complètes.

A la lecture on se pose des questions sur ses projets en cours, on prends des notes, on vérifie… Le livre aborde des sujets tellement variés qu’il y a forcément quelque chose à apprendre ou réapprendre. Devant la multitude, on passe souvent à côté points qui nous semblent plus ou moins anodins et il est bon de se les remémorer de temps à autre.

Mon seul bémol, des chiffres et références pas toujours à jour. Cela reste un détail puisque les tendances énoncées semblent bonnes, on aurait juste aimé des chiffres plus justes, de manière à être plus crédible si on doit les présenter à un client pour étayer un sujet.

Chapitrage

Le livre est découpé en 5 chapitres :

• Contenu
  (Écriture, utilité, crédibilité…)
• Navigation
  (Facilité de navigation, qualité de la recherche, liens…)
• Design graphique
  (Qualité de la charte graphique, typographie, multimédia…)
• Interactivité
  (Utilisabilité, , convivialité, contact…)
• Aspects techniques et fonctionnels
  (Performance, qualité du code, accessibilité, standardisation, sécurisation…)

Photo de Gaetano Palermo d’Expressions.be

Les auteurs

Jean-Marc hardy est consultant et formateur auprès des chefs de projets Internet, enseignant, il est également l’auteur du blog 60questions.net. Il a écrit la première version de ce livre en 2004.

Gaetano Palermo, diplômé en journalisme, est responsable de projets e-business, consultant, formateur, créateur de contenu et expert en ergonomie web, vous pouvez le retrouver sur son blog Expression.be. Il participe à la rédaction de ce livre depuis la seconde édition.

Interview des auteurs

Afin de mieux les connaitre, voici trois questions sur leur métier et leur façon de voir le web.

J’en veux un !

• Réussir son blog professionnel
• 200 conseils pratiques, 120 études de cas et 150 repères statistiques
• Broché : 151 pages
• Éditeur : Dunod
• Édition : 3ème (10 mars 2010)
• Collection : Cré@
• Langue : Français
• ISBN-13: 978-2100545650

Pour résumer, ce livre est un condensé de ce qu’il faut connaitre pour faire du web… Exactement la philosophie de mon blog ! la différence tient à l’exhaustivité du livre qui traite vraiment tous les sujets, mais je compte bien rattraper mon retard…

En attendant, Lisez le !

Sur le même thème

• Veille techno Web de A à F (partie 1)
• Livre : Réussir son blog professionnel
  3 exemplaires à gagner !
• Veille techno Web de F à Z (partie 2)
• Internationalisation & localisation
• Livre : HTML5 pour les webdesigners

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 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 ?

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

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

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 Pierre H. depuis Flickr

Les photos maison

La solution la plus simple aujourd’hui est encore de faire soit même une photo, de la retoucher et de l’utiliser. Surtout si vous êtes un photographe averti, le résultat sera tel que vous l’imaginiez, et vous pourrez l’afficher sur votre site avec une certaine fierté. Les avantages sont certains en termes de rapidité, de coûts et d’originalité. Cependant ce n’est pas la panacée si vous avez besoin d’une photo de la terre, d’un paquebot en pleine mer ou de votre star favorite. Ou tout simplement si vous êtes incapable de cadrer correctement une photo ou d’éviter les flous même avec un appareil numérique.

Les moteurs de recherche

Alors du coup on se tourne vers son moteur de recherche favori, la plupart proposent même une recherche spécifique pour les images. La recherche avancée permet de filtrer précisément, le type d’image, la taille, la couleur dominante et bien sûr le sujet… C’est effectivement assez pratique, même si les résultats ne sont pas de très grande qualité et souvent pollués par des images sans intérêt. Cependant ces images ne vous appartiennent pas et vous ne pouvez pas les utiliser sans une autorisation de leur auteur. Ce qui n’est pas impossible, mais certainement pas très facile, les crédits photos étant rarement cités sur le web et la photo probablement déjà une copie sans droits…

Les banques d’images

Les banques d’images proposent elles des photos de qualité, souvent de photographes professionnels ou d’amateurs avertis. Via un moteur de recherche interne au site vous trouverez rapidement votre bonheur tant la qualité et la quantité sont au rendez-vous… Les images sont disponibles en très haute définition, ce qui peut être très utile en cas de retouche ou d’utilisation sur un support papier en parallèle du web. Évidemment, tout ceci a un prix et ces magnifiques photographies risque d’être inaccessibles si votre budget est serré. Certains sites proposent ainsi des images à plusieurs centaines d’euros. Le prix est fonction du statut exclusif ou non de la photo, de sa résolution, et des droits qui y sont associés.
Certaines banques d’images proposent des prix cassés avec des photos basse définition, bien suffisant pour un usage web, a partir de un euro. Évidemment à ce prix vous risquez de retrouver cette photo ailleurs sur Internet…

Voici quelque unes des banques d’images les plus connues :

• Getty images
• Fotolia
• iStockPhoto
• Fotosearch
• Stockxpert

Et si votre besoin de photos est récurent la plupart de ces sites proposent des tarifs dégressifs sur abonnement.

Les banques d’images gratuites

Mais sur Internet on trouve très souvent tout ce que l’on cherche gratuitement à condition de savoir ou chercher. Vous trouverez donc également des banques d’images gratuites ! Le site Flickr permet de stocker ses photos pour le montrer à ses amis ou au monde entier, et une grande partie des utilisateurs laisse ses photos sous une licence assez simple et peu restrictive, la licence « Creative Commons« . La description de la licence explique que les droits sur les photos sont cédés gratuitement à l’utilisateur sous certaines conditions. On simplifie ainsi la réutilisation en s’affranchissant de la demande d’autorisation systématique à l’auteur du cliché.
Les différentes conditions imposent tout de même de citer obligatoirement l’auteur du contenu sous licence Creative Commons, et peut également imposer l’interdiction de modifier l’œuvre, l’interdiction de l’utiliser commercialement, et vous obligez à redistribuer l’œuvre sous la même licence.

Il y a actuellement plus de 100 millions de photos sous licence Créative Commons sur Flickr.

C’est ainsi que je trouve toutes les photos de ce blog, via le site Blue Moutains cité plus bas et son moteur de recherche, qui filtre les photos de Flickr en fonction de leur licence. Je préviens les auteurs des photos qui sont en général content et très fier de voir leur travail reconnu, et avec le lien vers Flickr tout le monde peut aller voir les autres photos de l’auteur. Et bien sûr dès que j’illustrerai mes articles avec mes propres photos je les distribuerai sur Flickr sous licence libre !

• Blue Moutains
• Stockxchange

Et les droits comment ça fonctionne

Pour avoir plus d’informations sur les droits d’auteur, je vous conseille de lire systématiquement les licences des photos que vous envisagez d’utiliser.

Pour des informations plus générales, le site du ministère de la culture présente un dossier sur les droits

N’oubliez pas que vous devez disposer directement ou indirectement des accords des personnes présentes sur vos photos pour les publier !

Liens utiles

Le petit truc en plus pour retrouver des copies d’une photo, c’est TinEye et le labo de Google qui proposent des fonctionnalités de recherche d’images similaires. Idéal pour savoir si une photo est unique ou pas, ou pour retrouver l’original d’une photo.

• Tin Eye
• Similar image sur Google labs

Pour plus d’informations sur le sujet je vous propose l’excellent article de Framasoft sur le sujet : La gestion des images dans Wikipédia.

Conclusion

Alors il n’y a pas une solution, mais des solutions, à chacun de trouver la sienne ou de les utiliser chacune pour ses avantages suivant les besoins du moment.

Et vous ? Ou trouvez vous vos photos ? Avez vous quelque site de référence sur le sujet qui mérite que l’on s’y arrête ? Comment trouvez vous les photos d’illustration de ce blog ? Je vous invite à lire tout mes articles si vous ne les avez pas encore vues !

Sur le même thème

• Les générateurs de sprites CSS
• Développer sous Ubuntu
• Maquettage avec Pencil Sketching
• Optimiser l’utilisation d’Eclipse
• Navigateur Web standard : Firefox

Photo de stéfan depuis Flickr

Pourquoi de la publicité ?

La rentabilité est bien entendu le but premier de la publicité. La nouvelle ère qu’a ouvert Internet est synonyme de gratuité pour les utilisateurs. Gratuité des services qui parait logique face à un mode virtuel, dématérialisé… La contrepartie se paie en images clignotantes. Rappelons nous des débuts du net ou l’on pouvait se connecter gratuitement à Internet en échange d’un bandeau de publicité. Désormais nous payons notre accès, mais les contenus monnayent leur valeur ajoutée avec des réclames de plus en plus ciblées, intrusives, consommatrices en bande passante…

Les régies publicitaires classiques

Il en existe une multitude, et elles proposent toutes la même chose, et l’afficheur est payé au clic sur la publicité ou au nombre d’affichages. Si la publicité est bien ciblée, le système au clic peut être rentable, sinon l’autre solution sera probablement meilleure.

Alors quand je dis que toutes les régies publicitaires du web proposent la même chose, c’est à peine vrai car déjà certaines se démarquent. La plus connue et la plus importante, Google Adsense, n’affiche que du texte avec un paramétrage des coloris qui permet d’intégrer simplement la publicité dans un design sans tout casser.

La plupart des autres régies proposent des bannières flash multicolores, de la vidéo, de la musique, du gif clignotant… Enfin tout ce qui fait que ca saute aux yeux, que parfois ca intrigue, mais qui finalement a surtout le don d’énerver l’internaute, surtout quand cette publicité vient à l’ouverture du site ou au premier plan et nous empêche de voir le contenu caché sous le flot de réclames…

Des sites commeAmazon Vous permettent également de toucher une commission sur les ventes générées par les liens que vous mettez sur votre site. C’est typiquement le cas d’un apport de valeur ajoutée positive pour l’internaute si vous ajoutez un lien vers un livre que vous citez et qu’il souhaite potentiellement acheter.

Peut on faire sans ?

Bien sûr, beaucoup de sites sur Internet s’en sortent sans la pub, les sites institutionnels (et encore pas tous), certaines pages perso ou blogs (quand ce n’est pas l’hébergeur qui ajoute lui même la publicité)… On en trouve finalement pas mal, et on peut arriver à trouver des contenus équivalents sur des sites plus agréables à lire… Certains sites débordent tellement de publicité que je n’y met plus les pieds, tant pis pour eux, je trouve mon bonheur ailleurs.

Certains sont même très fiers de ne pas arborer de publicité et le crient haut et fort ! Rassemblés en association, ils échangent sur un web meilleur et promettent de ne pas afficher de publicité sur leurs sites. L’APINC propose même d’héberger gratuitement les sites des membres de l’association.

Peut on faire différemment ?

Des initiatives existent et se développent, et des régies « éthiques » voient le jour. En voiçi deux qui méritent votre attention si vous ne m’avez pas abandonné au chapitre sur les régies classiques.

La publicité libre

Adbard est une toute nouvelle régie soutenue pas la FSF qui vise à promouvoir les logiciels libres. Elle ne diffuse que des publicités pour des produits libres, et uniquement sur des sites qui ont pour thème (au moins en partie) le monde du libre. Ce sont ces publicités que j’affiche sur mon site, plus pour soutenir l’initiative que pour le coté financier…

• Adbard

Les publicités comprennent une image et un texte court, les annonceurs sont choisis par vote des membres qui sélectionnent les publicité qui méritent ou non d’être affichées.

Et en toute transparence, la liste des afficheurs est visible de tous.

La publicité responsable

Une autre régie plus ancienne permet d’afficher des publicités liées au développement durable, et de ne promouvoir que des produits « utiles et responsables »

• Goodaction

Les arguments de Goodaction sont : Ciblez votre diffusion, faites une bonne action, valorisez votre image. En effet la publicité est ciblée et affichée sur des sites ou blogs traitant de sujets liés au développement durable. Vous ne touchez rien pour l’affichage, les bénéfices sont redistribués à des associations humanitaires ou environnementales, et bien sûr cela donne une bonne image de votre site en plus d’une bonne conscience…

Les bonnes pratiques

Alors quelle que soit la régie de publicité que vous allez choisir, ou pas, respectez vos lecteurs, la publicité, peut être utilisée comme une valeur ajoutée en étant ciblée et non intrusive. Profitez en et suivez ces quelques conseils :

• Afficher une publicité pertinente et en lien avec vos visiteurs
• Afficher de la publicité qui apporte une valeur ajoutée à votre contenu
• Montrer explicitement la publicité, ne pas la dissimuler dans le contenu pour tromper l’internaute qui croit cliquer sur un lien
• Éviter les publicités intrusives qui collectent des infos à l’insu des visiteurs
• Et pourquoi pas utiliser une régie publicitaire 100% éthique

Autres lectures sur le sujet

• Publicité éthique et coût par influence sur les blogs

Et vous ? Pensez vous qu’un web « éthique » verra le jour ? La discussion est lancée…

Sur le même thème

• Participons à l’utopie web !

Présentation

PHP est un acronyme récursif qui signifie « PHP Hypertext Preprocessor ». C’est un langage de scripts libre qui permet de générer des pages web de façon dynamique.
C’est un langage simple à apprendre, peu typé, il permet beaucoup de souplesse, ainsi il est très simple d’écrire du code PHP sans tout connaître du langage, mais c’est aussi une porte ouverte à un code simpliste et peu fiable. Bien utilisé en revanche, il est robuste, fiable et rapide.

• Le site officiel de PHP

En raison de sa richesse, PHP est plus considéré comme une plate-forme qu’un simple langage.

Sa mascotte est un « éléphpant » bleu créé par El roubio

Photo de Skoop depuis Flickr

Historique

PHP a été créé à partir de 1994 par Rasmus Lerdorf qui souhaitait présenter son CV sur Internet. A ce moment là, PHP/FI, signifie « Personal Home Page / Form Interpreteur ».
PHP va se développer à partir de la version 4 et l’arrivée de Andi Gutmans et Zeev Suraski qui vont réécrire le cœur du projet.
La professionnalisation viendra en 2004 avec la version 5, sobrement appelée PHP5, dont le moteur, Zend Engine en version 2 apporte son lot de nouveautés, parmi lesquelles, le support de la Programmation Orientée Objet.

PHP est aujourd’hui l’un des fers de lance du monde Open Source, présent sur plus de 30 millions de sites web. Cette philosophie d’excellence par le partage et l’entraide est présente à travers lui. En plus d’une belle idée, on associe un produit qui est fiable, stable, complet et multi plateforme.

La version 6 est un peu l’arlésienne de PHP, attendue depuis 2007, elle ne verra probablement pas le jour avant 2010. Elle est très attendue pour son support natif de l’unicode, qui oblige à une refonte assez complète de la plupart des fonctions PHP.

Zend

PHP ne serait pas PHP sans Zend Technologies et Zend n’existe que par PHP. Créée en 1999 la société est la base de l’écosystème PHP, ses ingénieurs participent au développement du langage, mais créent aussi des environnements de développements, de serveurs, des outils de monitoring, ou un encrypteur de code. Ils sont aussi à l’origine de Zend Framework, un framework MVC doté de multiples bibliothèques.

• Le site officiel de Zend >Technologies

Quelle version utiliser ?

Sortie depuis 2004 PHP5, apporte le support de la POO, une gestion simplifiée des fichiers XML, de la transformation XSL et du DOM. Suite au retard de la sortie de PHP6, les nouvelles fonctionnalités prévues comme la gestion des espaces de noms ont été intégrées directement dans PHP 5.3

PHP5 est donc aujourd’hui incontournable, d’autant plus que depuis l’été 2008 PHP n’est officiellement plus maintenu. La mise à jour des versions mineures ne posant aucun problème de compatibilité, il est fortement conseillé de suivre les nouvelles versions dès qu’elles sont disponibles afin de corriger les éventuels bugs.

Normes & bonnes pratiques

Il n’existe pas à proprement parler de normes, le respect de la syntaxe s’impose de lui même ! Par contre de bonnes pratiques vous permettront de développer avec plus dé sérénité et de qualité.

• Avoir de la rigueur !
• Indenter le code, utiliser la PHPDoc et écrire de commentaires dans le code
• Encoder vos fichiers source en UTF-8
• Ne pas réinventer le roue, utiliser les bibliothèques !
• Utiliser un framework et respecter l’architecture MVC pour des projets importants

A mon sens les trois premiers points sont les plus important, en particulier le premier. D’après moi,un bon développeur PHP est avant un développeur Java. Java ne permet pas la souplesse de PHP mais impose la rigueur. En passant à PHP, le programmeur habitué à la rigueur trouvera les avantages de la souplesse sans se laisser aller à la facilité.

Une initiative récente est tout de même intéressante à relever. The PHP standards initiative cherche à promouvoir un standard de développement pour PHP.

Comment apprendre ?

On trouve sur le sujet des milliers de « références » vous proposant d’apprendre PHP, une bonne partie est obsolète ou ne respecte pas les bonnes pratiques. C’est une des raisons qui fait que la plupart des sites web développés en PHP aujourd’hui ont des failles de sécurité. Mais ce n’est pas une fatalité, et il existe aussi d’excellents sites pour appréhender le langage.

Ma référence principale est la documentation officielle qui est vraiment bien faite et très complète. On y revient sans cesse et on y trouve très souvent les réponses que l’on cherche.

• Le manuel PHP
• Le guide des fonctions PHP

Vous trouverez également de l’aide sur les sites suivants :

• Apprendre PHP
• PHP Débutant
• Scripts PHP

Apprendre PHP est un site assez récent, mais qui propose des tutoriels très complets et un forum intérressant. Scriptsphp n’est plus du tout mis à jour, mais les quelques tutos présents sur le site sont de bonne qualité.

Bibliographie

Comme pour toute technique l’apprentissage est facilité par la lecture d’une « bible » de référence, pour PHP j’en ai trois :

• PHP 5 avancé d’Eric Daspet et Cyril Pierre de Geyer
• Sécurité PHP 5 et MySQL de Damien Seguy et Philippe Gamache
• Best practices PHP 5 de Guillaume Ponçon

Le premier en est à sa cinquième édition, et traite de tous les sujets de façon avancée mais abordable. Le second est très axé sur la sécurité et sera un bon complément pour développer des applications sensibles. Le dernier reprends PHP de façon plus globale afin de vous montrer toutes les facettes du développement d’un projet PHP dans les meilleurs conditions possibles. Il est réservé à l’utilisateur averti qui veux progresser dans les bonnes pratiques.

Et pour avoir toujours sous la main les références de base :

• Mémento PHP5 & SQL de Cyril Pierre de Geyer et Guillaume Ponçon

Les curieux pourront lire les quelques livres sortis sur PHP6 mais mieux vaux attendre la sortie de cette nouvelle mouture avant d’investir.

Références en vrac

• PHP Index, une FAQ d’une grande richesse
• PHP Classes, des centaines de classes très utiles

Flux RSS en vrac

Pour vous tenir informé de l’actualité de PHP, voici quelques flux pour votre agrégateur :

• Nexen : Toute l’information sur PHP
• PHP.net
• Professional PHP
• Dur comme faire : Revue de presse hebdomadaire

Et pour les plus curieux :

• Le blog de Zeev Suraski
• Le blog de Andrei Zmevski
• Le blog d’Andi Gutmans
• Le blog d’Ilia Alshanetsky

Et pour vraiment tout connaître sur PHP, se tenir informé, n’oubliez pas de passer par le Forum PHP tout les ans à Paris. Vous pourrez y rencontrer les principaux acteurs de PHP et MySQL et assister à leurs conférences. C’est un événement organisé par l’AFUP.

Comme en 2008, je serais présent au forum PHP 2009. Si vous y passez aussi, dites le moi !

La seconde partie de cet article traite des outils pour bien développer avec PHP

Sur le même thème

• Bien utiliser Zend Framework
• Les bons outils pour PHP (partie 2)
• Bien écrire HTML & XHTML
• Veille techno Web de F à Z (partie 2)
• Aide mémoire & antisèche : Les cheat sheets

Définition

• Définition de CSS

Photo de Courambel depuis Flickr

Historique

Les feuilles de style sont nées dès l’invention du web, mais elles étaient à l’origine destinées à l’internaute lui même qui pouvait ainsi faire sa propre mise en page pour son confort de lecture personnel. Plusieurs implémentations ont ensuite été proposées par les différents éditeurs de navigateurs web, puis à la création du W3C, La norme CSS1 est créée dès 1996. Les différents navigateurs de l’époque l’implémentent de manière partielle et faussée.
En 1998, le W3C publie la recommandation CSS2, elle aussi ne sera que partiellement utilisable et buggée notamment dans Internet Explorer 6.
A partir de 2001 une version CSS2.1 corrige les problème de la version précédente en intégrant les usages réels des navigateurs.

Aujourd’hui la norme 3.0 est en cours d’écriture, mais depuis 1999 ! Aucun module n’est fini et les navigateurs n’appliquent les nouvelles fonctionnalités que de manière expérimentale.

Pour plus d’information lisez l’historique complet des feuille de style en cascade sur Wikipédia.

A quoi ca sert

Les feuilles de style en cascade, souvent abréviées CSS, sont un langage informatique normalisé par le W3C qui permet de mettre en forme les document HTML et XML et donc XHTML de façon simple et homogène.

Le principe réside dans la séparation entre le contenu et la mise en forme. Il est ainsi très simple de changer la mise en forme sans toucher au contenu ou d’appliquer une même mise en forme sur une multitude de contenus. On peut ainsi écrire le contenu sans se soucier de la mise en forme et changer la mise en forme uniformément sur toutes les pages d’un site en ne modifiant que le fichier CSS.

Les styles peuvent être définis dans un fichier séparé du contenu HTML, au début d’un fichier HTML, ou directement dans les balises HTML. La première solution est la meilleure et permet une bonne séparation du contenu et de la mise en forme. L’héritage, permet aussi de définir des propriétés générales et d’autres plus précises qui héritent des propriétés générales de leurs parents, ainsi pas besoin de tout redéfinir pour chaque balise.

Les feuilles de style sont définissables par média. Ainsi vous pouvez définir une image pour un affichage sur un écran et ne pas l’afficher pour une impression sur papier. L’internaute vous en sera reconnaissant.

Un très bon exemple de l’utilisation que l’on peut faire des feuilles de style est sans conteste le site caméléon CSS Zen Garden, qui change complètement de style au gré des propositions de mise en page de contributeurs aux goûts divers et variés.

Comment apprendre ?

Bien sûr il faut connaître la référence française en la matière depuis déjà quelques années : Alsacréations, vous y trouverez toutes les informations nécessaires, des tutoriels, et un forum accueillant ou l’on vous aidera volontiers.

Je vous conseille aussi un bon tutoriel CSS de Joe Gillespie traduit par Pompage

Les normes

Les normes sont toutes accessibles sur le site du W3C, certaines sont traduites en français, je vous livre ici les principales à connaître ou à découvrir.

• La Voir norme CSS 2.1 officielle en anglais
• La norme CSS 2 traduite en français
• Voir les documents de travail de la norme CSS 3 en anglais

Les bonnes pratiques

• Utilisez tout le temps des feuilles de style, ne définissez jamais vos styles directement dans une page
• Valider les fichiers afin d’être sûr qu’il respectent les normes
• Utiliser les hacks avec parcimonie, respectez les standards, les navigateurs suivront
• Essayer d’avoir un seul fichier CSS par média sur un site en production, afin d’optimiser le temps de chargement des pages
• Utilisez une feuille de style par média afin de définir des propriétés spécifiques à chaque rendu
• Utilisez un framework ou un fichier « reset » pour gagner du temps, ne réinventez pas la roue à chaque nouveau site

Les outils

Validateur

Comme pour HTML, il est parfois bien utile d’avoir un avis rapidement sur la validité du code, afin de traquer les petites imperfections que l’on a pu laisser passer.

• Valider des feuilles de style

Frameworks

Pour vous faciliter la tâche, les frameworks CSS vous permettent aujourd’hui de gérer la base de votre feuille de style. Ils permettent d’initialiser les styles afin de les rendre similaires d’un navigateur à l’autre, ils définissent un layout générique utilisable facilement, le mot clé est la simplicité et la réutilisabilité.

• Blueprint
• Yahoo library CSS tools

A noter que pour les librairies Yahoo, vous pouvez faire un lien directement vers les serveurs de Yahoo et en pas héberger les scripts. Ainsi le fichier étant le même que celui de Yahoo et une multitude d’autres sites, il est probable que l’internaute visitant votre site l’ai déjà en cache dans son navigateur.

Extensions Firefox

• Web developper toolbar
• Firebug

La barre d’outil « developper toolbar » est un incontournable du développeur, elle permet bien plus que la manipulation des CSS, mais sur ce point qui nous intéresse, elle
autorise par exemple la désactivation des styles, ou le changement de feuille de style à la volée.
Firebug permet d’inspecter au plus profond des feuilles de style et d’ajouter, modifier ou supprimer des propriétés, de les visualiser graphiquement, là aussi cet outil vous réserve bien d’autre utilisations pour le code HTML et Javascript principalement.

Ces outils feront l’objet de prochains articles plus détaillés.

Bibliographie

Encore un excellent mémento, et un livre référence indispensable pour creuser le sujet.

• Mémento CSS de Raphaël Gotter
• CSS par Éric Meyer

Vous pourrez aussi approfondir le sujet avec un livre sur l’utilité des standards

• Design web : Utiliser les standards, CSS et XHTML

Ce dernier livre date peu être un peu, et est en rupture de stock, mais on le trouve d’occasion, et à la vitesse ou avancent HTML et CSS, et pour les principes qu’il défend, il est loin d’être dépassé.

Les sites de référence

• Alsacréations
• Tutoriel CSS sur Pompage.net

Pour aller plus loin avec les CSS

Une nouvelle approche des CSS fait désormais son apparition, CSS Orienté Objet ou OOCSS. Je vous laisse vous faire votre propre idée…

Vous avez vous aussi certainement des astuces et de bons outils pour travailler les CSS, j’attends vos remarques avec impatience pour partager avec vous sur ce sujet très intérressant.

Sur le même thème

• Bien écrire HTML & XHTML
• Les plugins Firefox : XRefresh
• Les générateurs de sprites CSS
• Livre : CSS3 pour les webdesigners
• Optimiser son site web