Le blog d’Erwan

(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. Cet article est une traduction de How does Internet work? écrit par Jonathan Lane. N’hésitez pas à me faire part de vos remarques si vous voyez des incohérences avec le texte original!)

Introduction

De temps en temps, on vous permet de regarder “sous le capot” pour comprendre comment quelque chose fonctionne, pour en saisir tout les rouages. Aujourd’hui c’est votre jour de chance. Je vais être votre guide pour partir à la découverte d’une des technologies les plus en vogue, et avec laquelle vous êtes peut-être déjà familier: le World Wide Web. Action!

Cette article décrit les technologies sous jacentes au World Wide Web afin de lui permettre de fonctionner:

• Hypertext Markup Language (HTML)
• Hypertext Transfer Protocol (HTTP)
• Domain Name System (DNS)
• Serveur Web et navigateurs web
• Contenu statique et dynamique

Ce sont tous les fondamentaux du web-Bien que la plupart d’entre eux ne vous permettrons pas à construire un meilleur site web, cela vous permettra d’avoir le bon niveau de langage lorsque vous parlerez d’internet avec des clients, ou à d’autres personnes. C’est un peu comme le disait si bien la religieuse devenue gouvernante dans La Mélodie du Bonheur: “Lorsque l’on apprend à lire on commence par A-B-C. Lorsque l’on apprend à chanter on commence par Do Re Mi.”. Dans cet article, on décrira rapidement le mode de communication entre ordinateurs utilisant HTTP et TCP/IP, ensuite on s’intéressera aux différents langages qui, utilisés ensemble, permettent de créer les pages qui constitues l’Internet. Cet article se décompose de la manière suivante:

• Comment les ordinateurs communiquent sur Internet?
  • Analyse d’un cycle de requête/réponse
• Types de contenu
  • Texte seul
  • Standards Web
  • Pages web dynamiques
  • Formats nécessitant l’usage d’applications externes ou de plug-ins
• Sites web statiques ou dynamiques
• Synthèse
• Exercice

Comment les ordinateurs communiquent sur Internet?

Heureusement, les choses sont simples pour les ordinateurs. Sur le World Wide Web, la plupart des pages sont écrites avec un langage commun, le HTML, qui est diffusé en utilisant un protocole commun-HTTP (hypertext transfer protocol). HTTP est le patois d’internet (spécification), qui permet par exemple à une machine sous windows de chanter en harmonie avec une machine tournant sous la dernière et meilleure version de Linux (Do Re Mi!). Grace à l’usage d’un navigateur internet-Un logiciel qui comprend HTTP et affiche le HTML dans un format lisible par les humains-les pages internet écrites en HTML stockées sur n’importe quel ordinateur peuvent être lues n’importe où, y compris sur un téléphone portable, un PDA ou même une console de jeu.

Bien que parlant un langage commun, ces périphériques connectés à Internet doivent respecter certaines règles de communication-tout comme il faut lever sa main pour poser une question en classe. HTTP définit ces règles de base pour Internet. Grace à ces règles, une machine cliente (comme votre ordinateur) sait qu’elle doit initier la demande de page en envoyant une requête à un serveur. Un serveur est un ordinateur où sont stocké les sites web-lorsque vous tapez une adresse dans votre navigateur, un serveur reçoit une requête, trouve la page désirée, et l’envoi à votre navigateur pour qu’il vous l’affiche à l’écran.

Analyse d’un cycle de requête/réponse

Après avoir décrit brièvement tous les éléments mis en oeuvre pour permettre aux ordinateurs de communiquer sur Internet, nous allons regarder en détail un cycle de requête / réponse HTTP. La séquence ordonnée ci-dessous me permet de vous introduire efficacement tous les concepts:

1. Chaque cycle commence en saisissant  une URL (ou Universal Resource Locator) dans la barre d’adresse de son navigateur, par exemple http://dev.opera.com. Ouvrez une fenêtre / onglet de navigateur et entrez une adresse.
   Bon, ce que vous ne savez probablement pas c’est que votre navigateur n’utilise pas directement cette adresse pour envoyer une requête sur un serveur; il fait appelle au protocole Internet (IP ou Internet Protocol) ou adresse IP (qui sont simplement comme des numéros de téléphone ou des adresses postales qui identifie les serveurs). Par exemple, l’adresse IP de http://dev.opera.com est 213.236.208.98.
2. Dans un nouvel onglet de navigateur, entrez http://www.apple.com dans la barre d’adresse et validez; ensuite entrez http://17.149.160.10/ et validez-vous arriver au même endroit. De même, essayez avec http://213.236.208.98-et vous voilà au même endroit qu’à l’étape 1, bien que vous aurez une erreur 403 “Access Denied”-C’est parce que vous n’avez pas les droits d’accès à la racine de ce serveur.
   http://www.apple.com est tout simplement un alias pour http://17.149.160.10/, mais pourquoi et comment ça marche? Tout d’abord parce qu’il est plus facile de retenir des mots qu’une suite de numéros. Ensuite, le mécanisme qui permet de faire fonctionner les alias s’appelle un Système de Noms de Domaine (ou Domain name system-DNS), qui est un annuaire de toutes les machines connectées à internet. Lorsque vous entrez http://dev.opera.com dans la barre d’adresse, cette adresse est envoyez à un serveur de noms qui essaye de lui associer une IP. Comme il y a des millions de machines connectées à Internet, les serveurs DNS n’ont pas de liste exhaustive des machines en ligne, il y a donc un système qui permet de router votre demande au bon serveur afin de traiter votre demande.
   Ainsi, le DNS recherche le site www.opera.com, le localise à l’adresse  17.149.160.10, et renvoie l’adresse IP au navigateur web.
   Votre machine envoie ensuite une requête à la machine ayant l’adresse IP spécifiée et attend pour la réponse. Si tout va bien, le serveur envoie un court message au client lui indiquant que tout est OK (voir Figure 1,) suivi de la page demandée. Ce type de message est contenu dans un en-tête HTTP.
   

   Figure 1: Dans ce cas, tout va bien, et le serveur retourne la page demandée.

   Si quelque chose se passe mal, par exemple si l’URL saisie est invalide, alors vous obtiendrez une erreur HTTP renvoyée au navigateur-la tristement célèbre erreur 404 “page not found” est l’exemple le plus connu que vous rencontrerez.

3. Essayez de demander la page http://dev.opera.com/joniscool.html-Elle n’existe pas, vous avez alors une erreur 404. Essayez avec plusieurs pages inexistantes, sur différent sites web, vous aurez en réponse une grande variété de pages d’erreur renvoyées. Certains développeurs on laissé leur serveur renvoyer la page d’erreur par défaut, et d’autre ont modifiés ces pages d’erreur. Cette technique avancée ne sera pas traiter dans cet article mais sera bien évidemment dans un autre article de la série.
   Terminons par une remarque sur les URLs-Normalement la première URL sur laquelle vous allez n’a suivi d’un nom de fichier (par exemple, http://www.mysite.com/), et les pages que vous visitez ensuite en ont un mais pas tout le temps. Vous accédez toujours à des fichiers, mais quelque fois le développeur a configuré le serveur pour qu’il n’affiche pas le nom du fichier-Et ceci afin de rendre les URLs plus nettes et facile à retenir, ce qui tend à offrir une meilleure expérience de navigation aux utilisateurs de votre site. Nous ne couvrirons pas non plus ce sujet dans cet article; nous couvrirons l’envoi de fichier vers un serveur et la structure de l’arborescence serveur dans un article ultérieur.

Types de contenu

Après avoir étudié le cycle d’échange HTTP, nous allons nous concentrer sur les différents types de contenu que vous pourrez rencontrer sur Internet. Je les ai regroupés en quatre catégories-texte seul, standards web, pages dynamique, et les formats nécessitant l’usage d’applications externes ou de plug-ins.

Texte seul

Au tout début de l’Internet, avant même l’apparition des standards ou des plug-ins, il y avait principalement que des images et des fichiers texte ayant une extension .txt ou similaire.  Lorsque ce type de fichier est rencontré sur Internet, le navigateur l’affiche tel quel sans aucun traitement. Vous avez encore beaucoup de page de ce type sur les sites universitaires.

Standards Web

Les trois principaux piliers du World Wide Web sont les standards-HTML (ou XHTML, j’utiliserai l’un ou l’autre de manière interchangeable), CSS et JavaScript.

Hypertext Markup Language sert, comme son nom l’indique, à communiquer. HTML est ce qui est utilisé pour découper un document, spécifier son contenu et sa structure, et définir le sens sémantique de chacun de morceaux (qui contiennent tout le texte, etc. que vous pouvez voir sur les sites). Il utilise des éléments pour identifier les différents composants d’une page.

Les feuilles de style CSS (Cascading Style Sheets) vous donne les moyens de contrôler l’affichage d’un élément. Il est très simple, en seulement quelques instructions, de modifier tous les paragraphes pour qu’ils aient un interligne double (line-height: 2em;), ou bien de faire en sorte que tous les titres de niveau 2 soit en vert (color: green;). Il y a des milliers d’avantages à séparer la structure de la forme, nous y reviendrons dans un autre article. La figure 2 nous permet de démontrer la puissance de HTML et CSS utilisés ensemble: sur la gauche vous avez du texte HTML simple, sans formatage, sur la droite, le même fichier HTML mais avec des styles CSS appliqués dessus.

Figure 2: Fichier HTML seul à gauche, HTML avec des CSS à droite.

Enfin, JavaScript fournit le comportement dynamique de votre site. Vous pouvez écrire de petits programmes en JavaScript qui seront exécutés sur l’ordinateur client, et ne nécessitant l’installation d’aucun logiciel particulier sur le serveur. JavaScript vous permet de spécifier des fonctionnalités basiques ainsi que d’ajouter de l’interactivité à votre site, cependant il y a certaines des limitations, qui peuvent être contournées en utilisant des langages de programmation qui seront, eux, exécutés sur le serveur et ainsi réaliser des pages web dynamiques.

Pages web dynamiques

Parfois, lorsque l’on navigue sur Internet, on peut aller sur des pages qui n’ont pas d’extension .html-Elles ont par exemple une extension du type .php, .asp, .aspx, .jsp, ou tout autre nom d’extension bizarre. Ce sont tous des exemples de technologie peuvant être utilisées pour créer des pages dont certaines sections sont dynamiques-le contenu affiché dépend des paramètres d’entrée récupérés depuis une base de données, depuis un formulaire, ou une autre source de données. Nous couvrirons ce sujet dans la section Sites web statiques ou dynamiques ci-dessous.

Formats nécessitant l’usage d’applications externes ou de plug-ins

Les navigateurs web ne sont équipés par défaut que d’outils qui leur permettent d’interpréter et d’afficher certaines technologies, comme les standards web (html, css…). Si vous faites un requête vers une URL  qui pointe sur un fichier dans un format complexe, ou sur une page qui contient des éléments utilisant des technologies non standards, alors soit votre navigateur vous proposera de télécharger le contenu, soit il sera affiché en ayant recourt aux plug-ins installés. Par exemple:

1. Si vous rencontrez un document Word, Excel, PDF, compressé (ZIP, ou SIT par exemple) ou un fichier d’image complexe comme Photoshop PSD, ou autre que le navigateur ne comprend pas, alors par défaut il vous proposera de le télécharger ou d’ouvrir le fichier. Ces deux options reviennent au même, si ce n’est que la dernière va télécharger le contenu puis l’ouvrir avec une application qui la comprend, si elle est installée.
2. Si vous rencontrez une page contenant un film Flash, un MP3 ou un autre format de musique, un fichier MPEG ou un autre format vidéo, le navigateur va l’ouvrir en utilisant le plug-in adéquat, s’il est installé. Si ce n’est pas le cas, soit vous aurez un lien pour télécharger le plug-in manquant, soit le fichier sera téléchargé, le système cherchera une application pour l’ouvrir.

Bien sûr, de il y a des zones d’ombres-par exemple SVG (Scalable Vector Graphics) est un standard web qui est affiché par défaut dans certains navigateurs, comme Opera, mais pas dans d’autres, comme Internet Explorer qui a besoin d’un plug-in pour lire les SVG. Certains navigateurs sont livrés avec un ensemble de plug-ins préinstallés, ce qui fait que vous ne pourrez pas savoir si le contenu est lu par un plug-in ou bien nativement par le navigateur.

Sites web statiques ou dynamiques

Alors, quelle est la différence entre un site web statique et un site dynamique? En apparence rien, tout est dans le détail:

Un site web statique est un site ou le contenu, fichiers HTML et images, est statique-c’est à dire qu’il est identique pour tous les visiteurs, à moins que la personne qui a créé le site ne décide de manuellement mettre à jour le contenu du site-Exactement comme ce que nous avons vu au cours de cette article.

Par contre sur un site web dynamique, le contenu sur le serveur est le même, mais au lieu d’être du simple HTML, il y a aussi du code dynamique, qui peut faire varier les informations affichées en fonction des données envoyées au serveur. Prenons un exemple-naviguez sur http://www.amazon.com dans votre navigateur, et faites une recherche pour 5 produits différents. Le résultat qu’Amazon vous retourne ne sont pas 5 pages différentes; mais une seule et même page envoyée 5 fois, mais avec à chaque fois un contenu différents. Ces différentes informations sont sauvegardées dans une base de données, qui renvoie l’information qu’on lui demande, afin qu’elle puisse être ajoutée à la page par le serveur web.

De plus, pour créer des sites web dynamiques, il est nécessaire d’ajouter un logiciel sur le serveur. Alors que les fichiers HTML statiques standards sont stockés avec l’extension .html, les fichiers contenant du code dynamique en plus du HTML sont stockés avec des extensions de fichiers spéciales afin de prévenir le serveur web qu’ils nécessitent un traitement supplémentaire avant d’être envoyés aux clients (par exemple ajouter de l’information provenant d’une base de données)-Les fichiers PHP portent par exemple une extension .php.

Il y a pleins de langages différents-J’ai déjà mentionné PHP, mais il y a aussi par exemple Python, Ruby on Rails, ASP.NET et Coldfusion. Finalement, tous ces langages offrent tous les mêmes fonctionnalités, comme communiquer avec une base de données, valider les informations saisies dans un formulaire, etc. mais ils le font de manière légèrement différentes, et ont des avantages et inconvénients. Il ne vous reste plus qu’à choisir celui qui vous convient le mieux.

On ne couvrira pas les langages dynamiques dans ce cours, mais voici une liste de ressources à lire si vous voulez approfondir le sujet:

• Rails: Fernandez, Obie. (2007), The Rails Way. Addison-Wesley Professional Ruby Series.
• Rails screencasts
• PHP: Powers, David (2006), PHP Solutions: Dynamic web development made easy, friends of ED.
• PHP Online documentation
• ASP.NET: Lorenz, Patrick. (2003). ASP.NET 2.0 Revealed. Apress.
• ASP.NET: online ASP.NET documentation and tutorials.

Synthèse

Et voilà, s’en est fini avec notre aperçu des rouages de l’Internet. Cet article ne traite que superficiellement l’ensemble des concepts couverts, mais il fait suffisamment car il les mets tous en perspective, et montre bien comment ces concepts interagissent entre eux. Il reste encore pleins de choses à apprendre à propos de la syntaxe des langages HTML, CSS et JavaScript, et c’est ce dont nous allons parler dans le prochain article-le prochain article mettra le focus sur le modèle de développement web utilisant les standards HTML, CSS et JavaScript, et jette un oeuil sur le code d’une page web.

Exercice

• Fournir une brève description de HTML et HTTP en décrivant les différences entre les deux.
• Définir la fonction d’un navigateur web.
• Faites un tour sur Internet pendant 5 à 10 minutes et essayer de trouver différents types de contenu-texte, images, HTML, pages dynamiques comme PHP et .NET (.aspx), PDFs, documents word, animation Flash etc. Visualisez-les et interrogez vous sur la façon dont votre navigateur les affiche.
• Quelle est la différence entre une page web statique et dynamique?
• Trouver une liste des codes d’erreur HTTP, listez en 5, et expliquer à quoi ils correspondent.

(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. Cet article est une traduction de The history of the Internet and the web, and the evolution of web standards écrit par Mark Norman Francis). N’hésitez pas à me faire part de vos remarques si vous voyez des incohérences avec le texte original!)

Introduction

“Plaise à votre majesté, où dois-je commencer?”

“Commencez au commencement” dit le roi d’un ton grave, “et continuez jusqu’à ce que vous arriviez à la fin; ensuite, arrêtez-vous”

Alice au pays des merveilles; Lewis Caroll

Il faut bien commencer quelque part, alors nous allons commencer notre initiation avec une leçon d’histoire. Ci-dessous, je vais vous donner un bref aperçu de la création d’internet, du world wide web, et des “Standards web” qui sont le sujet du reste de cette série d’articles. Il est utile et intéressant de connaître les origines de l’Internet, cela sera suffisamment condensé pour que vous ne soyez pas submergé par l’information, on ne s’arrêtera que sur certains détails. Si certains termes ne sont pas clairs, ne vous inquiétez pas; s’ils sont important pour apprendre le développement web alors ils seront définis plus tard, lorsqu’ils seront abordés en détail. Vous pouvez aussi faire une recherche sur Google! Si vous êtes déjà familiers avec l’histoire d’Internet ou du world wide web, vous pouvez aller directement sur la partie à propos des standards. Cet article se compose de la manière suivante:

• Les origines de l’Internet
• La création du world wide web
  • La guerre des navigateurs
• L’émergence des standards web
  • La création du W3C
  • Le web standards project
  • La montée des standards web
• Synthèse
• A lire
• Exercice

Les origines de l’Internet

Le 4 octobre 1957, a eu lieu un événement qui changera le monde. L’union soviétique a réussi à lancer le premier satellite en orbite. Appelé “Spoutnik 1″, cela a choqué le monde entier, et plus particulièrement les Etats-Unis d’Amérique, qui avaient, eux aussi, un programme de lancement satellitaire en cours, mais pas encore prêt.

Cet événement à directement entrainé la création d’ARPA (Advanced Research Projects Agency) au sein du département de la défense américaine, en réponse à un besoin reconnu d’une organisation qui ait les moyens d’effectuer des recherches et de développer des idées avancées et technologiquement en avance sur son temps. Leur projet le plus connu (et certainement le plus largement utilisé) a certainement été la création de l’Internet.

En 1960, le psychologue et informaticien Joseph Licklider a publié un article titré “Man-Computer Symbiosis” (Symbiose homme-ordinateur), qui développe l’idée d’un réseau d’ordinateur pouvant former une solution de stockage et de recherche d’information avancée. En 1962, alors qu’il travaillait pour l’ARPA en tant que chef du programme de recherche en informatique, il crée un groupe pour pousser la recherche vers son idée, mais quitte le groupe avant que le moindre travail n’ai commencé.

Le programme de création de ce réseau d’ordinateurs (qui sera appelé “ARPANET”) a été présenté en Octobre 1967, et en Décembre 1969 le premier réseau, composé de quatre ordinateurs, était opérationnel. Le principal problème dans la création d’un réseau était de trouver une solution pour interconnecter des sous réseaux tout en ne monopolisant pas les ressources en créant des liens constants. La technique utilisée pour résoudre ce problème est la transmission par paquets et implique que les échanges de données soit découpés en petit morceaux (”paquets”), qui pourront être traités rapidement sans bloquer la communication d’autres tiers du réseau-ce principe est toujours mis en oeuvre pour faire marcher l’Internet aujourd’hui.

Ce concept a été largement adopté, avec la naissance de multiple réseaux qui utilise le même principe de transmission par paquet-par exemple, X.25 (développé par l’Union Internationale des Télécommunication) créé sur les cendres de l’ancien réseau universitaire JANET du royaume uni (permettant aux universités anglaises d’envoyer et de recevoir des fichiers et des emails) ou le réseau public américain CompuServe (une entreprise commerciale qui permettait aux petites entreprises ou aux particuliers d’avoir accès à des ressources informatiques partagées, et ainsi, plus tard, Internet). Ces réseaux, bien que très utilisés, sont principalement des réseaux privés que l’Internet d’aujourd’hui.

Cette prolifération de multiple protocole réseau est rapidement devenue un problème lorsqu’il a fallu interconnecter tous ces réseaux ensemble. Cependant, une solution était en vue-Robert Kahn, qui travaillait sur un projet de réseau satellitaire pour ARPA, avait commencé à définir des règles pour mettre en place une architecture plus ouverte et remplacer le protocole en cours d’utilisation au sein d’ARPANET. Il a ensuite été rejoint par Vinton Cerf de l’université de Stanford, et ils ont créés ensemble un système qui masque les différences entres les protocoles réseau en développant un nouveau standard. Dans la publication du brouillon des spécifications en Décembre 1974, ce standard a été appelé “Internet Transmission Control Program” (programme de contrôle des transmissions internet).

Cette spécification a réduit le rôle du réseau et déplacé la gestion de l’intégrité des transmissions à l’ordinateur hôte. Grâce à cela, il a été finalement possible d’interconnecter une grande majorité de réseaux ensemble. ARPA a financé le développement du logiciel, et en 1977 une démonstration réussie de trois différents réseaux communiquant ensemble a été conduite. En 1981, la spécification a été finalisée, publiée et adoptée; et en 1982 les connections d’ARPANET en dehors des Etats-Unis ont été adaptées pour utiliser le nouveau protocole “TCP/IP”. L’internet tel que nous le connaissons est né.

La création du world wide web

Gopher était un protocole de recherche de l’information utilisé au début des années 90, il fournissait des méthodes pour consulter l’information organisée sous la forme d’une arborescence de menus hiérarchiques. Ces menus pouvaient sortir de l’ordinateur pour aller sur l’Internet rechercher des menus depuis d’autres systèmes. Il a été très populaire dans le milieu universitaire afin de diffuser des informations sur l’ensemble du campus et les grosses entreprises qui ont cherchées à centraliser le stockage et la gestion de l’information.

Gopher fût créé par l’université du Minnesota. En Février 1993, elle a annoncé qu’elle envisageait de faire payer de licences pour toutes utilisations de leur implémentation de référence du serveur Gopher. En conséquence, beaucoup d’entreprise ont commencées à chercher une alternative à Gopher.

Le conseil européen en recherche nucléaire (CERN), basé en Suisse, possédait une alternative. Tim Berners-Lee avait travaillé sur un système de gestion de l’information, dans lequel un texte pouvait contenir des références ou liens vers d’autres travaux, permettant ainsi à l’utilisateur de rapidement passer d’un document à l’autre. Il a créé un serveur permettant la publication de ce style de documents (appelé hypertexte) ainsi qu’un programme en permettant la lecture. Il baptisa ce système le “WorldWideWeb”. Ce logiciel a été publié pour la première fois en 1991, cependant, il a fallu deux événements pour provoquer l’explosion de sa popularité et ainsi remplacer Gopher.

Le 13 Avril 1993, le CERN donna le code source du WorldWideWeb au domaine publique, afin que tout le monde puissent l’utiliser et construire des logiciels sans charges de licence.

Ensuite, plus tard dans la même année, le National Center for Supercomputing Applications (NCSA) publia Mosaic qui était à la fois un navigateur web et un client Gopher. A l’origine, il était uniquement disponible sur Unix et sous forme de code source, mais en Décembre 1993 Mosaic fournit une nouvelle version avec des installeurs pour Macintosh d’Apple et Microsoft Windows. La popularité de Mosaic a rapidement cru, et avec elle, le web.

Le nombre de navigateur web disponible a fortement augmenté, la plupart issu de projets de recherche universitaire, ou d’entreprise, comme Telenor (une entreprise norvégienne de télécommunication) qui a créé la première version d’Opéra en 1994.

La guerre des navigateurs

La popularité grandissante du web commença à susciter des intérêts commerciaux. Marc Andreessen quitta NCSA et fonda Mosaic Communications avec Jim Clark, qui sera renommé plus tard Netscape Communications Corporation, et commença à travailler sur ce qui deviendra la version 1.0 de Netscape Navigator qui sera publiée en Décembre 1994.

Spyglass Inc. (La branche commerciale de la NCSA) a vendu la technologie Mosaic à Microsoft pour créer la base d’Internet Explorer. La version 1.0 sera disponible en Aout 1995.

Une rapide montée en charge à suivie, avec Netscape et Microsoft essayant chacun de trouver des innovations en terme de fonctionnalités supportées afin d’attirer les développeurs. C’est à ce moment qu’a commencé la “guerre des navigateurs”. Opera a maintenu une petite mais solide présence durant cette période, et a essayé d’innover et d’adopter les standards web aussi bien que possible.

L’émergence des standards web

Durant la guerre des navigateurs, Microsoft et Netscape ont privilégié le développement de nouvelles fonctionnalités propriétaires ou en compétition frontale avec celles existantes dans les autres navigateurs, mais implémentées de manière incompatible, plutôt que de corriger celles déjà existantes.

Les développeurs ont dû faire avec, soit en ajoutant de la confusion en créant des sites web identiques, mais spécifiquement conçus pour chacun des navigateurs principaux, soit en ne choisissant de ne supporter qu’un seul navigateur et en bloquant les autres utilisateurs. Cete façon de travailler ne convenait pas aux développeurs, si bien qu’une contre-attaque de leur part était sur le point d’arriver.

La création du W3C

En 1994, Tim Berners-Lee fonda le World Wide Web Consortium (W3C) au Massachusetts Institute of Technology, avec le support du CERN, DARPA (le nouveau nom d’ARPA) et la Commission Européenne. La vision du W3C était de standardiser les protocoles et les technologies utilisées pour construire le web afin de rendre le contenu accessible au plus grand nombre.

Durant les années qui ont suivies, le W3C a publié plusieurs spécifications (appelées “recommandations”) telles que HTML 4.0, le format d’images PNG, et les feuilles de styles CSS versions 1 et 2.

Cependant, le W3C n’impose pas ses recommandations. Les éditeurs ne doivent se conformer aux documents du W3C que s’ils souhaitent indiquer que leurs produits sont compatibles avec les standards du W3C. Or, ce n’est pas un argument de vente car la grande majorité des utilisateurs ne savent pas qui est le W3C, ni ne s’en préoccupe. Par conséquent, la “guerre des navigateurs” a continuée comme si de rien était.

Le  Web Standards Project

En 1998, le marché du navigateur était dominé par Internet Explorer 4 et Netscape Navigator 4. Une version béta d’Internet Explorer 5 est publiée, elle embarque une nouvelle version propriétaire de DHTML (Dynamic HTML). Ce qui impliquait que les développeurs web se devaient de connaître 5 façons différentes d’écrire du JavaScript.

En réponse à cela, un groupe de développeurs et designers web professionnels se sont regroupés au sein du “Web Standards Project” (WaSP). Ils se sont dit qu’en appelant “standards” les documents publiés par le W3C plutôt que “recommandations”, alors ils pourront plus facilement convaincre Microsoft et Netscape de les supporter.

La première méthode utilisée pour diffuser l’appel à l’action a été d’utiliser une technique publicitaire traditionnelle appelée “roadblock” (rue bloquée), qui consiste à publier une publicité sur tous les canaux de diffusion au même moment, ainsi tous les lecteurs auront le même message, indépendamment de la façon dont ils naviguent entre les différents canaux. Le WaSP a publié simultanément sur différents sites web de développement tels que builder.com, Wired online, et quelques mailing listes populaires.

L’autre technique qu’ils ont utilisés a été de ridiculiser les entreprises qui rejoigne le W3C (au tout autre organisme de standardisation) mais qui se concentre ensuite plus sur la création de nouvelles fonctionnalités, plutôt que de mettre en place les bases qu’ils ont validées comme point de départ.

Tout cela semble bien négatif, mais le WaSP n’est pas resté assis à critiquer les gens-Ils les ont aussi aidés. Sept membres ont formé les “Samourai du CSS”, qui ont identifiés le top 10 des problèmes liés à CSS dans Opera et Internet Explorer (Opera les a corrigé, contrairement à Microsoft).

La montée des standards web

En 2000, Microsoft publia Internet Explorer 5 pour Macintosh. C’est une étape importante, car il s’agissait à l’époque du navigateur installé par défaut sur Mac OS, et qu’il avait un niveau correct de support des recommandations du W3C. En ajoutant à cela le bon niveau de support de CSS et HTML d’Opera, cela a contribué au mouvement général, où les développeurs et designers ont commencé à se sentir à l’aise dans l’utilisation des standards du web.

Le WaSP a persuadé Netscape de décalé la sortie de la version 5.0 de Netscape Navigator jusqu’à ce qu’elle soit bien plus compatible (ce travail est à la base de ce qui est maintenant Firefox, un navigateur très en vogue). Le WaSP a aussi créé la “Dreamweaver Task Force” pour encourager Macromedia (maintenant Adobe) a modifier leur outils de création de site web afin d’encourager et supporter la création de site web respectueux des standards.

Le fameux site sur le développement web “A List Apart” a été refait au début de l’année 2001 et a décrit le pourquoi du comment, je cite:

Dans six mois, un an, ou deux tout au plus, tous les sites seront conçus avec ces standards. [...] On peut laisser ces connaissances devenir obsolètes, ou commencer à apprendre les techniques basées sur les standards dès maintenant.

C’était un tout petit peu optimiste-Certains sites, même en 2008, n’utilisent pas encore les standards web. Mais de nombreuses personnes ont écouté. La part de marché des vieux navigateurs a baissée, et deux autres site en vue on changé leur design pour utiliser les standards: Wired magazine en 2002, et ESPN en 2003 et sont devenu leaders du domaine en supportant les standards web et mettant en oeuvre les nouvelles techniques.

Encore en 2003, Dave Shea lança un site appelé “CSS Zen Garden”, afin d’avoir un impact encore plus important sur la population des professionnels du web, en montrant en pratique que le design complet d’un site peu changer en ne modifiant que la feuille de style de la page; le contenu quand à lui étant identique.

Depuis ce temps, l’utilisation des standards web est de rigueur pour les professionnels du web. Dans cette série, nous vous donnerons d’excellentes bases pour appliquer ces techniques afin que vous soyez à votre tour capable de développer des sites web aussi propres, sémantiques, accessibles et respectueux des standards que ceux des grandes entreprises.

Synthèse

Dans cet article, j’ai développé comment l’Internet moderne avait était développé grâce à la course vers l’espace; comment Tim Berners-Lee a définit hypertexte et comment les intérêts commerciaux de deux entreprises ont causés la plus violente réaction des développeurs jamais vu. Le terme “standards web” est maintenant plus largement utilisé par les professionnels du web que tout autres termes introduit par le W3C (si bien que maintenant même le W3C utilise ce terme dans ses pages), c’est ce que nous allons vous apprendre-la façons standards de développer des sites web.

A lire

Si vous voulez en savoir plus, vous pouvez visiter les sites suivants:

• L’histoire de l’Internet (wikipedia)
• L’histoire du World Wide Web (wikipedia)
• L’histoire du W3C
• Le Web Standards Project, et leur histoire
• A List Apart
• CSS Zen Garden

Exercice

Vous souhaitez peut-être poursuivre les recherches en répondant à ces quelques questions:

• Quels sont les navigateurs disponibles sur Internet pour les utilisateurs de Windows, Mac OS X et Linux?
• Quelle est la part de marché de ces navigateurs?
• Quels sont les navigateurs des périphériques mobiles?
• Combien de standards le W3C a publié, lesquels sont largement supportés par le navigateurs internet aujourd’hui?

(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:

1. 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.
2. 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!
3. 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.
4. 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.
5. 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.

1. 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.
2. 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?
3. “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.
4. “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.
5. 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:

1. 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.
2. 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.
3. 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.
4. Formateur dans les entreprises: C’est une façon idéal de fournir une formation peu chère aux employés.
5. 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

1. Introduction par Chris Mills- C’est ce qui vous êtes en train de lire

Introduction aux standards du World Wide Web

1. Histoire de l’Internet et du Web, évolution des standards, par Mark Norman Francis
2. Comment Internet fonctionne?, par Jonathan Lane
3. Le model des standards web-HTML, CSS et JavaScript, par Jonathan Lane
4. 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.

1. Architecture de l’information-planifier un site web, par Jonathan Lane
2. De quoi a besoin une bonne page internet?, par Mark Norman Francis
3. La théorie des couleurs, par Linda Goin
4. Construire un squelette (ndt: wireframe) de site, par Linda Goin
5. Arrangement des couleurs et design de maquette, par Linda Goin
6. Typographie sur le web, par Paul Haine

Base du HTML

1. Les bases du HTML, par Mark Norman Francis
2. L’élément HTML <head>, par Christian Heilmann
3. Choisir le bon doctype pour vos documents HTML, par Roger Johansson

Le corps du HTML

1. Baliser le contenu texte en HTML, par Mark Norman Francis
2. Les listes en HTML, par Ben Buchanan
3. Les Images en HTML, par Christian Heilmann
4. Les liens en HTML-Construisons une toile! par Christian Heilmann
5. Les tableaux en HTML, par Jen Hanen
6. Les formulaires HTML-les bases, par Jen Hanen
7. Les éléments sémantiques moins connus, par Mark Norman Francis
8. Les conteneurs génériques-Les éléments div et span, par Mark Norman Francis
9. Créer plusieurs pages avec un menu de navigation, par Christian Heilmann
10. Valider votre HTML, par Mark Norman Francis

Accessibilité

1. Bases de l’accessibilité, par Tom Hughes-Croucher
2. Tester l’accessibilité, par Benjamin Hawkes-Lewis

CSS

1. Bases du CSS, par Christian Heilmann
2. Héritage et cascade, par Tommy Olsson
3. Styler du texte en CSS, par Ben Henick
4. Le modèle d’agencement - boites, bordures, marges internes et externes, par Ben Henick
5. Images de fond en CSS, par Nicole Sullivan
6. Styler les listes et les liens, par Ben Buchanan
7. Styler les tables, par Ben Buchanan
8. Styler les formulaires, par Ben Henick
9. Positionnement flottant et remise à zéro, par Tommy Olsson
10. Positionnement statique et relatif en CSS, par Tommy Olsson
11. Postionnement fixe et absolu en CSS, par Tommy Olsson

Pratique avancée du CSS

1. En-têtes, pieds, colonnes et templates, par Ben Henick

Connaissances de base en JavaScript

1. Programmation - les vraies bases!, par Christian Heilmann
2. Que peut-on faire avec JavaScript?, par Christian Heilmann
3. Premier apercu deJavaScript, par Christian Heilmann
4. Les bonnes pratiques JavaScript (en cours de réalisation)
5. Les principes du JavaScript non-intrusifs, par PPK
6. Fonctions en JavaScript, par Mike West
7. Objets en JavaScript, par Mike West
8. Naviguer dans le DOM, par Mike West
9. Créer et modifier le HTML, par Stuart Langridge
10. Style dynamique - manipulation CSS en JavaScript, par Greg Schechter
11. Manipulation d’événements en JavaScript, par Robert Nyman
12. Animation JavaScript, par Stuart Langridge
13. Dégradation élégante et amélioration progressive, par Christian Heilmann

Articles supplémentaires

1. Mettre son contenu en ligne, par Craig Grannell
2. Plus d’information à propos de la balise <head>, par Chris Heilmann
3. 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.

1. 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.
2. 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.
3. 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.
4. Les autres: Craig Saila, Sara Dodd, John Allsopp, Roan Lavery, Bruce Lawson, Alan White. J’espère n’avoir oublié personne.
5. 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.