(Cette série d’articles est une traduction de la série Introduction to The Web Standards Curriculum publiée sur le site d’Opera Software. Cette série a été initiée par Chris Mills. N’hésitez pas à me faire part de vos remarques si vous voyez des incohérences avec le texte original!)
Introduction
(Par Chris Mills) Il y a quelques temps j’ai eu un rêve. Depuis 8 ou 9 ans mon travail s’est principalement concentré sur la formation, que ce soit lorsque l’on m’a demandé d’écrire des livres techniques pour aider les gens à faire des trucs cools, ou pour former les nouveaux employés des différentes compagnies pour lesquelles j’ai travaillé, ou lorsque que j’ai édité et écrit des articles pour aider les personnes à utiliser les outils d’Opéra. Je suis aussi passionné par le web, et un grand adepte des standards web ouverts. Je voulais apporter ma pierre à l’édifice pour faire un web meilleur, toujours grâce à la formation, en apprenant aux gens à collaborer et à respecter l’autre, ou en leur apprenant à faire des sites internet fonctionnant quelque soit le système et le média d’affichage, et accessible aux personnes handicapées. Pour cela, les standards du web sont indispensables, j’ai donc décidé d’essayer de donner de mon temps et de mon énergie dans quelques choses qui aidera à l’adoption des standards sur l’Internet. Cela fait quelques temps que cela me trotte dans la tête, et cela se réalise enfin chez opera - Je remercie infiniement mes employeurs de me permettre de faire cela! Un de mes rêves c’est enfin réalisé.
Dans cet article je vais vous présenter le fruit du travail fournit durant les derniers mois (par moi-même, ainsi que pleins d’autres personnes) - Le programme de formation aux standards du web, un cours conçu pour fournir à quiconque une solide base dans le design/développement web. Il est libre d’utilisation, accessible et part du principe que vous n’avez pas de connaissances particulières dans ce domaine. Je vise principalement les universités, car je pense que les formations sur les standards du web manquent dans beaucoup d’entre elle. J’ai entendu parler d’étudiants avoir été sous évalué pour avoir utilisé les standards web afin de réaliser leurs travaux car les barèmes de notations sont complètement dépassés; de plus j’ai aussi entendu parler d’employés se plaindre que les étudiants qui postulent pour des postes en rapport avec l’Internet n’ont pas la moindre idée de ce qu’est le vrai développement web. Si vous faites partie d’une université qui enseigne ces standards, alors je vous tire mon chapeau - rentrons en contact! De quoi allons-nous parler ici:
- Pourquoi les standards internet? Je vais brièvement décrire les avantages de l’utilisation des standards, les raisons qui font qu’ils ne sont pas adoptés comme ils le devraient, et en quoi ce cours s’attaquera à ces problèmes
- Comment ce cours est-il structuré? Comme on pourrait le penser, cette section parle de la façon dont le cours est structuré et indique comment naviguer dedans afin de l’utiliser de la manière la plus optimale.
- A qui s’adresse ce cours? Quand je dis à tout le monde, qu’est ce que je veux dire par “tout le monde”?
- Table des matières. Vous pouvez sauter ce passage si vous en avez marre de me lire et si vous voulez aller directement au cours
- Remerciements
- Me contacter
Pourquoi des standards?
Bien que les principales raisons d’utiliser des standards dans le développement ou le design de votre application/site web seront développées dans le quatrième article, je vais rapidement les aborder ici afin de planter le décor. L’utilisation des standards web permet de bénéficier des avantages suivants:
- Un code efficace: comme vous aller le voir dans ce cours, les bonnes pratiques qui découlent de l’utilisation des standards web tournent, en grande majorité, sur une réutilisation du code-il est possible de séparer le contenu HTML des styles (CSS) et du comportement (JavaScript) afin de limiter le poids des fichiers, et de n’écrire le code qu’une seule fois et ainsi en permettre la réutilisation partout où cela est nécessaire.
- Maintenance simplifiée: Conséquence immédiate du point précédent-si vous n’écrivez le code html qu’une seule fois en lui appliquant les styles et le comportement grâce aux classes de styles et aux appels de fonctions JavaScript, alors si vous avez besoin de change quelques choses, cette modification ne doit être appliquée qu’à un seul endroit pour qu’elle soit appliquée sur l’intégralité du site, au lieu d’avoir à être appliquer partout où c’est nécessaire!
- Accessibilité: Les deux prochains sont fortement liés-un des gros problèmes du web c’est de rendre les sites accessibles à tous, sans tenir compte du matériel, logiciel, la culture, la situation géographique, les facultés intellectuelles ou physiques (ndt: no matter who they are, regardless of circumstance). Cela inclus la création de sites web utilisables par des personnes atteintes d’handicap visuel ou aveugle ainsi que les personnes souffrant d’handicaps moteur (i.e., des personnes ayant de mouvement limité, et qui ne sont pas capables d’utiliser leurs mains du tout ou partiellement). L’utilisation des standards internet et des bonnes pratiques associées, permet la création de sites web accessibles par ce segment de la population sans coût supplémentaire.
- Interopérabilité: Par cela, je veux dire s’assurer que votre site web fonctionnera non seulement quelque soit la plateforme-i.e., Windows, Mac, Linux- mais aussi quelque soit le terminal d’accès, ce qui de nos jours peut-être un téléphone portable, une télévision ou encore une console de jeux. Ces terminaux ont des limitations telles que la taille de l’écran, la puissance, les mécanismes de validation. La bonne nouvelle c’est qu’une fois de plus l’utilisation des bonnes pratiques et des standards, garantis en grande partie que votre site fonctionnera sur la plupart d’entres eux. Il y a plus de téléphone portable que de PC dans le monde, la plupart permettent de naviguer sur internet, pouvez-vous ou vos clients vous permettre de ne pas couvrir ce marché? Pour plus d’information sur le développement mobile, n’hésitez pas à consulter les articles dédiés à ce sujet sur dev.opera.com.
- Moteur d’indexation (ndt: Web crawlers)/moteur de recherche: Et plus exactement ce que l’on appelle l’optimisation pour les moteurs de recherche (ou SEO - Search Engine optimization)-C’est à dire s’assurer que le site web est aussi accessible que possible par les moteurs d’indexation qui parcourt le web, et ainsi un meilleur classement de recherche sur des sites comme Google. Cette optimisation est une science à par entière (voir les articles sur le SEO, par exemple Intelligent site structure for better SEO! ou Semantic HTML and Search Engine Optimization) mais, une fois de plus, l’utilisation des standards rendra votre site bien plus visible sur Google, Yahoo!, etc., ce qui est bon pour les affaires.
Malgré tous ces avantages, une majorité de site sur internet ne respectent pas ces standards, et une majorité des développeurs web utilisent des pratiques dépassées et mauvaises. “Pourquoi?” me dirai-vous. Il y a plein de raisons pour ça-On pourra citer le manque de formation, règlements interne, inutilité de les mettre en oeuvre car on est payer de toutes manières, trop compliqué, supports inégaux des standards dans les navigateurs… regardons en détails chacune des ces raisons, et regardons ensuite le contre-argument afin de se débarrasser une bonne fois de toutes les excuses qui justifie de ne pas adopter/apprendre les standards.
- Manque d’éducation: C’est un réel problème, et c’est une des principales raison qui ont motivé la création de ce cours. Beaucoup d’universités n’enseignent pas les standards web dans les cours dédiés à Internet, et une grande majorité de cursus contiennent se base sur des méthodes dépassées, et sont difficiles à changer pour des raisons administrative. Les livres et les formations sont chers. Mais attendez! Maintenant que nous avons fournit un cours gratuit qui est donné aux universités pour les aider à changer leur programme, il n’y plus vraiment d’excuse maintenant.
- Politique d’entreprise: Il ne fait aucun doute que certaines entreprises/institutions ont encore des sites internet vieux et dépassés. Elles ont certainement des politiques qui forcent leurs employés à utiliser des navigateurs dépassés, mais cela s’arrange, surtout que maintenant il y a un cours gratuit qui détaille comment appliquer les standards facilement. Mettre à jour un site en utilisant les standards modernes encourage les entreprises à mettre à jour leurs navigateurs car ces sites s’affichent de manière dégradée dans les vieux navigateurs (bien qu’ils fonctionneront). Les entreprises doivent encourager leurs clients à mettre, eux aussi, leurs navigateurs à jour. Il y a aussi un bénéfice sur le plan métier-les sites qui utilisent les standards ont un meilleur référencement et seront accessibles aux personnes handicapées ou aux personnes qui utilisent des plateformes alternatives-Est-ce qu’une entreprise peut se permettre d’ignorer cette population?
- “Je n’ai pas besoin de les apprendre!“: Je sais que certains développeurs vont camper sur leur position et vont dire “J’utilise des pratiques dépassées et je suis payé-alors pourquoi je dois m’ennuyer avec des nouveaux trucs?”. Tout simplement car, comme vu plus haut, cela rend le code plus efficace, facile à écrire, et facile à maintenir. Et surtout cela permet d’écrire un code moderne qui sera accessible sur des plateformes alternatives-ça n’est pas motivant? Cela va aussi vous aider à construire des connaissances plus en adéquation avec le futur, et vous permettre de gagner plus. De nombreuses compagnies recherchent de profils compétents dans les standards web en ce moment.
- “C’est trop compliqué à apprendre!“: Foutaise. Après avoir lu quelques morceaux de ce cours, vous vous rendrez compte à quel point il est facile d’intégrer les bases de l’utilisation des standards, que vous soyez débutant en développement, ou design, de site web ou expérimenté. C’est à peu prêt aussi compliqué que les vielles, dépassées et mauvaises méthodes, et qui cela permet de bénéficier de nombreux avantages par rapports à elles.
- Support des standards dans les navigateurs: Ce support a grandement varié d’un navigateur à l’autre, ce qui rend cauchemardesque la réalisation d’un site compatible avec tous les navigateurs. Mais de nos jours, tous les navigateurs modernes supportent correctement ces standards. Des ajustements sont toujours nécessaires pour les navigateurs anciens qui n’ont pas un bon niveau de gestion des standards, mais l’utilisation des ces méthodes modernes permets de s’assurer que les utilisateurs de ces navigateurs pourront, quand même, avoir un confort d’utilisation convenable.
Comme vous pouvez le voir, il n’y a pas vraiment de raison de ne pas adopter les standards web dans vos développements. L’avantage, si vous aborder ce cours en étant débutant, c’est que vous partez du bon pied et vous apprendrez les meilleurs pratiques dès le début, au lieu d’avoir à oublier les mauvaises.
OK, on parle des mauvaises pratiques à demi-mot, comme s’il y avait un plan secret contre l’étoile noir, ou autre. Nous ne couvrirons pas ces pratiques en détail dans ce cours, car nous ne pensons pas que cela soit utile; nous pensons que vous ne devez suivre que le bon chemin pour commencer. Vous vous demandez certainement en quoi elle consiste, alors je vais rapidement vous en parler. Il y a quelques temps, les gens avait pour habitude pour de mettre en page leur site avec des tableaux gigantesques, en utilisant les cellules pour positionner les images, textes etc. (ce n’est pas le but des tableaux, et cela ajoute du code inutile). Ils utilisaient aussi des images invisibles, appelées spacer GIFs, pour calibrer le positionnement des éléments de la page (ce n’est pas le but des images, et cela ajoute du code superflu). Ils écrivaient du JavaScript pour générer les menus etc. à la volée (ce qui n’est pas bien pour les personnes qui ont désactivés JavaScript dans leur navigateur, ou les personnes qui ont un handicap visuel et qui utilise un navigateur à synthèse vocale, qui sont perdus avec ce genre de scripts) ou travaillait sur un seul navigateur (qu’en est-il des personnes qui utilisent un autre navigateur?). Ils avaient l’habitude d’insérer des informations à propos du style directement dans le HTML en utilisant la balise <font> (horrible pour la maintenance, et ajoute du code inutile). Et pleins d’autres crimes contre le développement web. La pire des choses c’est que je dis “il y a quelques temps” alors qu’il y a encore pleins de personnes qui utilisent ces pratiques!
Structure du cours
Ce cours est composé de plusieurs articles - plus de 50 pour la base - et chacun d’entre eux font quelques milliers de mots. Chaque article traite spécifiquement d’un sujet restreint, et si besoin, contient l’histoire en rapport avec le sujet, la théorie nécessaire, des exemples pratiques ainsi que des explications sur les tutoriaux à suivre, et des questions pour tester ces connaissances. En plus de tout cela, un tutorial complet sera disponible dans le futur, il vous fera passer par toutes les étapes de la création d’un site internet. La manière la plus logique d’enseigner ce cours est regarder le nombre de sessions que vous avez de disponible pour cela et de le diviser par le nombre d’articles. Avant chaque cours, faites lire aux étudiants le ou les articles qui seront couvert. Durant chaque cours faites des exercices pratiques et préparer des questions auxquelles ils devront répondre après le cours. Normalement, en respectant ces conseils, une heure devrait être suffisante pour parcourir l’ensemble des concepts d’un article. Il y a donc environ 50 heures de cours à prévoir, et 50 heures de lectures. Evidemment, vous pouvez ajuster le temps disponible pour chaque article ainsi que les sujets abordés, mais la pratique est la clé du problème.
A qui se destine ce cours?
C’est un cours sur les standards du web découpé en plusieurs articles, destiné à tous ce qui veulent apprendre le développement de sites web respectueux des standards. Le seul pré requis est que le lecteur soit familier avec la navigation sur internet. Ce cours lui fournira les compétences de bases en HTML et CSS, ainsi qu’en JavaScript et il expliquera comment tout est imbriqué. Cela devrait lui apporter suffisamment de connaissance pour entrer dans le marché de l’emploi avec confiance (évidemment l’expérience ne peut être enseignée). Qui est visé? Je le veux utilisable par toutes les personnes voulant apprendre le design web:
- Etudiants ou enseignants: Je l’ai déjà dit-cet ensemble d’articles est idéal pour créer un cours, ou pour aller en supplément à un cours existant. Pour tous les étudiants suivants des courses à propos du web, vous devez utiliser ce support en complément de vos connaissances, et faire du lobbying auprès de vos professeurs pour qu’ils le prennent en compte eux aussi! Je recommande aux professeurs d’y jeter un oeuil aussi, pour s’assurer que les techniques enseignées dans leurs cours soient bien les bonnes pratiques du moment.
- Lycéens/Etudiants: Bien que ce cours ait été écrit à destination des adultes, il n’y a pas de raisons que les plus jeunes ne peuvent pas en bénéficier-Allez-y et voyons comment vous vous en sortez.
- Développeurs et designers existants: Il y a des développeurs et/ou designers web qui n’utilisent pas les standards web ni les bonnes pratiques, il y en a d’autres qui utilisent des guides de références facilement accessible pour y rechercher des informations ou parfaire ses connaissances. Je conseille vivement aux premiers de donner une chance à ce cours afin de se rendre compte à quel point l’adoption des standards est facile et indispensable (ndt: valuable). Aux autres, je suis sûr que vous trouverez ce cours utile pour aider les autres, parfaire vos connaissances, rechercher des principes compliqué à retenir, et trouver des arguments pour vous aider à convaincre vos patrons et clients que des choses comme l’accessibilité sont sensées.
- Formateur dans les entreprises: C’est une façon idéal de fournir une formation peu chère aux employés.
- N’importe qui d’autre: Si vous êtes quelqu’un qui souhaite apprendre quelque chose à propos du design et du développement web alors, pour vous aussi, c’est une façon peu onéreuse de réaliser vos envies.
Je ne m’attends pas à ce que les gens payent ce cours-il est publié sous une license Creative Commons, donc accessible à tous librement à tout ceux qui veulent l’utiliser, tant que l’on nous (ndt: opera software) cite comme auteur.
Table des matières
Le commencement
- Introduction par Chris Mills- C’est ce qui vous êtes en train de lire
Introduction aux standards du World Wide Web
- Histoire de l’Internet et du Web, évolution des standards, par Mark Norman Francis
- Comment Internet fonctionne?, par Jonathan Lane
- Le model des standards web-HTML, CSS et JavaScript, par Jonathan Lane
- Beau rêve, mais quel est la réalité? par Jonathan Lane
Concept du design web
Cette section ne rentre pas dans le détail du code ni du balisage, mais est une introduction au processus de design qui à lieu avant d’écrire du code ou de créer des images, mais aussi aux concepts du Web Design tels que l’architecture de l’information, la navigation, l’utilisabilité etc.
- Architecture de l’information-planifier un site web, par Jonathan Lane
- De quoi a besoin une bonne page internet?, par Mark Norman Francis
- La théorie des couleurs, par Linda Goin
- Construire un squelette (ndt: wireframe) de site, par Linda Goin
- Arrangement des couleurs et design de maquette, par Linda Goin
- Typographie sur le web, par Paul Haine
Base du HTML
- Les bases du HTML, par Mark Norman Francis
- L’élément HTML
<head>, par Christian Heilmann - Choisir le bon doctype pour vos documents HTML, par Roger Johansson
Le corps du HTML
- Baliser le contenu texte en HTML, par Mark Norman Francis
- Les listes en HTML, par Ben Buchanan
- Les Images en HTML, par Christian Heilmann
- Les liens en HTML-Construisons une toile! par Christian Heilmann
- Les tableaux en HTML, par Jen Hanen
- Les formulaires HTML-les bases, par Jen Hanen
- Les éléments sémantiques moins connus, par Mark Norman Francis
- Les conteneurs génériques-Les éléments div et span, par Mark Norman Francis
- Créer plusieurs pages avec un menu de navigation, par Christian Heilmann
- Valider votre HTML, par Mark Norman Francis
Accessibilité
- Bases de l’accessibilité, par Tom Hughes-Croucher
- Tester l’accessibilité, par Benjamin Hawkes-Lewis
CSS
- Bases du CSS, par Christian Heilmann
- Héritage et cascade, par Tommy Olsson
- Styler du texte en CSS, par Ben Henick
- Le modèle d’agencement - boites, bordures, marges internes et externes, par Ben Henick
- Images de fond en CSS, par Nicole Sullivan
- Styler les listes et les liens, par Ben Buchanan
- Styler les tables, par Ben Buchanan
- Styler les formulaires, par Ben Henick
- Positionnement flottant et remise à zéro, par Tommy Olsson
- Positionnement statique et relatif en CSS, par Tommy Olsson
- Postionnement fixe et absolu en CSS, par Tommy Olsson
Pratique avancée du CSS
- En-têtes, pieds, colonnes et templates, par Ben Henick
Connaissances de base en JavaScript
- Programmation - les vraies bases!, par Christian Heilmann
- Que peut-on faire avec JavaScript?, par Christian Heilmann
- Premier apercu deJavaScript, par Christian Heilmann
- Les bonnes pratiques JavaScript (en cours de réalisation)
- Les principes du JavaScript non-intrusifs, par PPK
- Fonctions en JavaScript, par Mike West
- Objets en JavaScript, par Mike West
- Naviguer dans le DOM, par Mike West
- Créer et modifier le HTML, par Stuart Langridge
- Style dynamique - manipulation CSS en JavaScript, par Greg Schechter
- Manipulation d’événements en JavaScript, par Robert Nyman
- Animation JavaScript, par Stuart Langridge
- Dégradation élégante et amélioration progressive, par Christian Heilmann
Articles supplémentaires
- Mettre son contenu en ligne, par Craig Grannell
- Plus d’information à propos de la balise <head>, par Chris Heilmann
- Complément: Entité courante utilisées pour la typographie, par Ben Henick
Remerciements
Le nombre de personnes m’ayant aider à réaliser ce cours sont trop nombreuses pour être citées en détails, mais j’inclues évidemment tout le monde ici. Ce sont des personnes formidables alors renseignez-vous sur elle-aller à leur conférence, lisez leur blog, ou faites n’importe quoi d’autre pour les soutenir. Je vous transmet toute mon admiration et ma gratitude.
- Les auteurs: je remercie infiniement Ben Buchanan, Tom Hughes-Croucher, Mark Norman “Norm” Francis, Linda Goin, Paul Haine, Jen Hanen, Benjamin Hawkes-Lewis, Ben Henick, Christian Heilmann, Roger Johansson, Peter-Paul Koch, Jonathan Lane, Tommy Olsson, Nicole Sullivan, and Mike West. Sans vous, ce cours ne serait rien.
- L’équipe d’Opéra: Amitiés à Jan Standal, David Storey, l’ensemble de mon équipe, et tout le monde à Opera pour croire dans cette idée, et m’avoir aidé à la réaliser.
- Les partenaires: Merci à tous ceux de chez Yahoo (les auteurs, et Sophie Major pour m’aider dans l’organisation et la promotion), Le WaSP (et plus particulièrement Gareth Rushgrove, Stephanie Troeth et Aarron Walter), le Britpack, les gens de Geekup, et tous les universitaires qui ont montrés de l’interêt dans ce cours et qui ont aidé à le développer.
- Les autres: Craig Saila, Sara Dodd, John Allsopp, Roan Lavery, Bruce Lawson, Alan White. J’espère n’avoir oublié personne.
- Les lecteurs: salutations à vous pour montrer de l’interet pour créer des sites web de la bonne manière, et de prendre du temps pour lire ce cours!
Me contacter
Je cherche en permanence à améliorer ce cours, et faire en sorte qu’il soit adopté par le plus grand nombre. Si vous avez des suggestions d’amélioration, ou des commentaires, ou me parler de la manière de l’adopter, alors contactez moi. Mon email est cmills [at] opera [dot] com.