Les technologies client (executées par le navigateur)
Coté client, pendant des années la guerre des navigateurs a fait rage. Chacun essayant de grignoter des parts de marché sur l'autre, en proposant par exemple des balises HTML propriétaires (non recommandées par le w3c) comme la fameuse <blink> de Netscape qui permaittait de faire clignoter le contenu.... ou encore des langages basés sur JavaScript comme le JScript de Microsoft que beaucoup confondent avec le JavaScript. Bref, le temps a passé et aujourd'hui tous semblent vouloir s'entendre autour des standards, de ce fait les navigateurs de dernieres générations sont tous capables d'interpréter, plus ou moins de la même manière, les diverses technologies client. Nous pouvons, en dresser une liste, non exhaustive qui permet de mieux entrevoir qui est qui et qui fait quoi...
Le HTML, le xHTML et le XML
On ne peut pas commencer à parler de technologies client sans aborder le HTML et le xHTML. Bon commencons par le HTML. Il s'agit d'un héritier du SGML mais très largement simplifié. En fait c'est un langage à balise qui permet de découper et structurer de l'information à destination du Web. Les principales balises sont des balises de titre <h2>, <h3>... des paragraphes <p>, des listes <ul><li>..., des images <img>, des applications multrimedia <object>.... mais quand même ce jeux de balises est relativement limité et ne permet pas de couvrir l'ensemble des besoins du web d'aujourd'hui. De plus au fil des années le langage c'est banalisé et l'ensemble des navigateurs est capable d'interpréter tout et n'importe quoi... par exemple si vous céez une page html avec le code suivant :
<title>Ici un titre </head> ... et ici du contenu... <html>
Enregistrez ce document en un fichier html (vous pouvez le téléchargez le ici, ou en visualisez le rendu le ici) , et vous constaterez que l'ensemble des navigateurs est capable de l'interpréter correctement. C'est à dire que la fenêtre du navigateur affichera bien le titre Ici un titre, et le contenu de la page sera "... et ici du contenu...". En fait afin de préserver des part des marché les éditeurs de navigateurs ont surgonflés les moteurs de leur navigateurs afin de les rendre aptes à interpréter l'ensemble des mal faàons que les développeurs peuvent créér. Le problème vient qu'à l'heure de l'inter portabilité, et de la miniaturisation des postes client (téléphgonie mobile, PDA, écran domotique, etc...) de tel navigateurs surgonflés pèseront trop lourd pour le peu de mémoire disponible. Il faut donc résoudre deux problèmes.... l'extensibilité de la pauvresse du langage HTML en terme de balise et la riguer d'écriture de sa syntaxe. C'est là qu'intervient le xHTML.
le xHTML est un savant mélange de XML et de HTML. En gros on pourrait dire que c'est un HTML qui préserve l'ensemble des balises de bases pour la mise en page de contenu, et qui a la syntaxe rigoureuse et extensible à souhait du XML., Mais bon en réalité, dessous la surface, cela est bien plus que cela, suivez le tutorial prévu à cet effet dans la rubrique langage... pour l'instant nous dirons qu'il s'agisse de HTML, de xHTML ou de XML, que nous avons à faire à des langages de découpage et de structuration de contenu pour des pages visualisées depuis le web.
XSL et CSS
De plus en plus, lors de la construction de site web et de contenu à destination de l'internet, l'idée est de séparer le contenu de la mise en forme et de l'affichage. D'un coté le contenu est découpé soit au travers d'un document HTML ou XML (comme nous l'avons vu précédemment, et d'un autre coté la mise en forme et les propriété de l'affichage sont définis dans des documents CSS ou XSL. Il y a deux types d'approche, une première plus classique qui consiste à structurer le document suivant les standards HTML et xHTML, (on aura alors plutôt à faire à des pages de contenus dievers et variés) ou en utilisant du XML, (dans ce cas nous aurons plutôt à faire à des fiches de présentation, du catalogue )... en fonction des ces choix, nous utiliserons soit des feuilles de styles CSS, très bien adpatés à la mise en relation de balises avec des propriétés d'affichage, soit à des feuilles de styles de type XSL, qui ajouteront un étape suplémentaire en présentant une transformation du document (coté client pour les navigateurs plus récent) ou coté serveur afin d'assurer une meilleure compatibilité. Vous pouvez vous rapprocher soit d'articles (rubriques articles) soit de tutoriaux dans la rubrique langages pour approfondir ces approches.
Pour l'instant nous dirons simplement que les CSS et XSL sont les langages qui permettent de définir la mise en forme de document coté client, c'est à dire interprétés directement par le navigateur. Les CSS mettent en relation des sélecteurs avec des balises de document pour en définir l'aspect, alors que les XSL redéfinissent au travers de jeux d'instruction la structuration du document HTML. Les XSL peuvent également s'appuyer sur des feuilles de styles CSS.
Le JavaScript, ECMA, DHTML, DOM, AJAX
Souvent confondu avec Java, le JavaScript est un langage de programmation mis en place par Netscape en 1995 afin de répondre à des besoins d'interactivités légères sur des pages Web (image rollover, effet de menu, animation de calques...). Microsoft de son coté a développé sa propre version qui porte le nom de JScript et bien sur qui ne reste interprété que par Internet Explorer. Bien que les deux langages soient très proches ils comportent quand même quelques différences qu'il est bon de prendre en compte lors du développement de vos pages web, Cette publication de Sybex permet d'en avoir un aperçu, et ce retour d'expérience parle de lui-même.
Bien que souvent qualifié de limité, l'interaction apporté par Javascript peut permettre de considérablement faire évoluer l'expérience utilisateur. Couplée à une utilisation judicieuse des CSS et du HTML l'interactivité de Javascript donne naissance au DHTML (pour dynamic HTML)... en fait le terme dynamique porte souvent à confusion... il faut entendre par cela, que la présentation d'une page peut se modifier sans que celle ci se recharge et non une quelconque interaction avec le serveur. L'exemple le plus classique peut être le cas du menu déroulant, ou l'affichage / masquage de certaines partie de la page lors d'un survol particulier. De ce coté là et pour accroître les possibilités, chaque navigateurs propose à JavaScript de pouvoir communiquer avec le modèle objet des documents, mais..., de manière propriétaire... par exemple document.layers[ ] pour Netscape et document.all[ ] pour IE... bref... on comprend vite que cela peut devenir complexe lorsqu'on souhaite développer du DHTML compatible avec tous les navigateur. Le W3C a alors fait la recommendation du DOM (Document Object Model) qui permet de décrire un document indépendament des langages et navigateurs. Aujourd'hui l'ensemble des navigateurs de dernières générations implémentent cette recommendation.
En parrallèele, Javascript propose depuis quelques années (d'abord sous ie sous forme d'active X puis ensuite s'est progressivement répendu sur l'ensemble des autres navigateurs) l'implémentation de l'objet XMLHttpRequest. Cet objet permet d'obtenir des données (texte, HTML ou XML) depuis le serveur. Ceci permet en utilisant conjointement le DOM et les CSS de remplacer ou modifier certaines parties du document actuellement affichées. En 2005, pour la première fois, l'utilisation conjointes de l'ensemble de ces technologies, c'est à dire du Javascript, du DOM, des CSS et de l'objet XMLHttpRequest, ont donné naissance à l'achronyme AJAX (Asynchronous JavaScript and XML). Depuis AJAX est utilisé pour définir plus une méthode de développement d'interface utilisateur. Voir par exemple le fameux GoogleMap.
