Les langages des standards du Web

Les standards du web regroupe un ensemble de langage public pour diverses utilisations et fonctionnalités, (x)HTML, CSS, DOM, RDF, PNG, Javascript... nous allons au cours de ce tutorial en dresser le tableau et les descriptions.

HTML

HTML (Hypertext Markup Language) est un langage à balises qui permet de structurer sémantiquement le contenu d'une page Web. L'ensemble des balises qu'il contient permet de définir un esemble d'éléments de page tels que des titres (h2, h3...) des paragraphes (p), des éléments de listes (ul, ol, li, dl, dd, dt...) ou encore des images (img, object) ou ... grand luxe... des éléments multimédia (object). Le langage est arrivé aujourd'hui à la version 4.01 et l'évolution préconise plus une orientation vers le xHTML. En savoir plus...

Dans un premier temps il est important de prendre connaissance de l'ensemble des balises disponilbles afin de ne pas réinventer l'eau chaude sous forme d'une foison de balises <div> ou <span> tout autant inutiles que verbeuses. Vous pouvez également parcourir une liste et une présentation de HTML sur ce tutorial. Certes un peu trop complet et quasi exhaustif, l'ouvrage de C Musciano et B Kenedy, HTML & xHTML reste un incontournable.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Document sans nom</title>
	</head>
	<body>
	</body>
</html>

XHTML

xHTML est arrivé pour continuer la route ouverte par le HTML et lui apporter des compléments dans ses carences, extensibilité des balises, ainsi que pour renforcer sa syntaxe d'écrtiture. En savoir plus sur le xHTML 1.0 et en savoir plus sur le xHTML 1.1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Document sans nom</title>
	</head>
	<body>
	</body>
</html>

XML

XML (eXtensible Markup Language) est un méta-langage de structuration qui permet de créer des arborescences complexes. Ce langage permet l'utilisation de name space, ce qui étend encore plus les possibilités qu'il offre. Notament avec des langages comme MathML, SMIL, XSL, SVG....

Vous trouverez plétore d'ouvrage sur le vaste sujet que représente XML et n'aurez que l'embaras du choix pour vous décider sur un livre d'introduction. Le livre formation à XML de Michael J Young, reste un judicieux compromis entre découverte, utilisation pratique et ouverture vers des schémas plus complexes. Vous pourrez également trouver une introduction simplifiée sur ce tutorial de puce et media.

<?xml version="1.0" encoding="utf-8" ?>
<pubs>
    <pub>
        <accroche>Visitez les grands canyons.</accroche>
        <destination>Les grands Canyons</destination>
        <url>http://www.puce-et-media.com/creanum/XML_flux/GC.htm</url>
        <prix>1299 €</prix>
        <full href="file://canyon.jpg"></full>
        <bando>canyon_band.jpg</bando>
        <vignette>canyon_vign.jpg</vignette>
    </pub>
</pubs>

CSS

Complément indiscociable du HTML ou du xHTML, les CSS (Cascade Style Sheet), ou feuilles de styles en cascades, permettent d'apporter la mise en forme et l'accastillage visuel à du contenu structuré. Elles sont apparues pour la première fois au début des années 90 sous forme plus ou moins propriétaires et se sont vues recommandées sous CSS1 par le W3C en 96. Depuis ce moment là les navigateurs ont peinés afin d'intégrer l'ensemble des recommendations. Aujourd'hui la quasi totalité des principaux navigateurs intégrent les majeures parties de CSS2.

Il existe une multitude d'ouvrage sur les CSS, certains couvrant des aspects très techniques, d'autres des études de cas pratiques, certains sont de très bons dictionnaires, d'autres présentent des hacks et astuces... bref, la littérature est assez importante sur le sujet. Le CCS 2 de Raphaël Goetter reste un excellent choix, en plus en français dans le texte... que vouloir de plus... :). Vous trouverez également un tutorial simplifié sur les CSS et leur utilisation sur ce tutorial.

Voici quelques liens :

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	width: 900px;
}
#page {
	width: 100%;
}

XSL - XSLT

Les feuilles de style XSL (eXtensible Stylesheet Language), sont destinées à mettre en forme les documents XML. Ces feuilles de styles sont des modèles qui permettent au travers de l'utilisation de feuilles de styles CSS de restituer le document sous tout aspect, HTML, Text, WML.... Le lien suivant pointe vers un document XML doté d'une XSL, cliquez sur le lien puis vérifiez le code source, si le document n'est pas doté d'une XSL, le navigateur affiche alors l'arborescence du document comme vous pouvez le constater ici.

Le rendu est directement interprété par le navigateur. De ce fait seuls les navigateurs modernes (à partir de 6.0) peuvent rendre un tel résultat. Si votre parc internaute peut être amené à utiliser des navigateurs plus anciens, ou avoir besoin de visualiser le contenu sur d'autre type de device, téléphone, lecteur d'écran, etc... il est préférable alors d'envisager une solution serveur basée sur XSL-T, pour XSL Transformation. L'interprétation se fait donc coté serveur et le code renvoyé est directement interprétable par le périférique.

Il existe peut d'ouvrage qui soit référence sur le sujet, vous trouverez néanmoins l'excellent Comprendre XSLT de P Rigaux et B Amann, please en français dans le texte, et également deux articles paru chez Créanum, Dreamweaver avec XML, XSL et CSS et XSL dans le code.

<?xml version="1.0" encoding="iso-8859-1"?><!-- DWXMLSource="datas.xml" -->
<!DOCTYPE xsl:stylesheet  [
	<!ENTITY nbsp   "&#160;">
    ... 
]>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" encoding="iso-8859-1" doctype-public="-//W3C//DTD 
    XHTML 1.0 Transitional//EN" 
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title>Document sans nom</title>
                <link href="/../../medias/Styles/pageVignettes.css" rel="stylesheet" type="text/css" />
            </head>
            <body>
                <xsl:for-each select="catalogue/magasine">
                    <p><a href="/{lien}" class="texte">En savoir plus... </a></p>
                </xsl:for-each>  
            </body>
        </html>
    </xsl:template> 
</xsl:stylesheet>

PNG

Le PNG (Portable Network Graphics) est apparu dans le but de remplacer le Gif et d'apporter une alternative au format Tiff. C'est un format graphique de compression sans perte, permettant la transparence de plusieurs couleurs, soit par index (la couleur est transparente ou opaque), soit par couche alpha, (la couleur peut posséder plusieurs degrés d'opacité)...

Certains navigateurs, en fonction de leur versions, peuvent ne pas afficher correctement cette transparence. Internet explorer a connu quelques difficultés (en fonction des versions) pour gérer correctement ces transparence. Il y a eu à ce sujet une pétition demandant à Microsoft la prise en compte correcte de ce format. Mais cela est chose faite depuis la sortie de Internet Explorer 7.

L'ouvrage PNG the definitive guide de Roelofs, en anglais youps, reste une bonne référence sur le sujet.

Rendu et aperçu

Image au format PNG

L'image ci dessus est au format PNG, l'image possède un style CSS associé qui lui attribut un fond de couleur bleu, visible au travers de la transparence du PNG. Vous pouvez constater donc en fonction du navigateur que vous utilisez la bonne ou mauvaise représentation de celle ci. Si toutefois vous optenez un aperçu particulier, n'hésitez pas de nous faire parvenir une capture écran en n'oubliant pas de mentionner le type et la version du navigateur ainsi que le système d'exploitation.

Quelques liens :

RDF

Le RDF (Resource Description Framework) défini par le W3C, permet de structurer et d'échanger les métadonnées d'un document au format XML (déjà utilisé par exemple par Acrobat avec le XMP, voir à ce sujet le site de XML.com ). Une utilisation assez répendu de ces spécifications reste popularisé par les flux RSS.

L'idée de pouvoir ainsi permettre à des agents de directement communiquer avec les métadonnées contenues dans les documents permet de conforter l'idée d'un web sémantique issue des travaux engagés dès 1994 par Tim Berners Lee.

Parmis les livres sur le RDF, Creating the Semantic Web with RDF de J Heljm est une bonne référence pratique et efficace pour une entrée en matière de web sémantique.

Quelques liens :

<rdf:RDF
	xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	xmlns:dc="http://purl.org/metadata/dublin_core#"
>
		<rdf:Description about="http://www.dlib.org" 
			dc:Title="D-Lib Program - Research in Digital Libraries"
			dc:Description="The D-Lib program is ..."
			dc:Publisher="Corporation For National Research Initiatives"
			dc:Date="1995-01-07"
		/>
</rdf:RDF>

DOM

Le DOM (Document Object Model) est une recommandation du W3C qui permet de décrire la structuration d'un document arboré style HTML ou XML. Cette structuration basé sur un modèle orienté objet permet d'accéder à tout élément du document qui sera identifié par un attribut id="" au travers de la méthode getElementById();.

Le Dom Scripting consiste à programmer l'affichage du document et son interactivité depuis ECMAScript. Il y a quelques années cette technique était apparu sous le nom de DHTML. La différence avec cette époque vient justement du DOM. Alors il fallait s'adresser à deux DOM différents, celui de Netscape qui faisait appel à document.layers["id"] et celui de Internet Explorer qui lui se réferait à document.all["id"].

Le livre DOM Scripting de D Shea et J Keith apporte une présentation du DOM Scripting qui permet après une rapide description de ECMAScript de comprendre les mécaniques de cette technique et du Javascript non obstructive (Javascript Discret).

D'autres sources d'informations :

HTTP

Le protocole HTTP (Hypertext Transfer Protocol) reste le coeur de la puissance du web et devient de plus en plus une technologie courtisée par les applications qui utilisent AJAX. Le livre HTTP Programming Recipes for Java Bots bien qu'orienté sur Java permet de mieux comprendre la communication entre le serveur et le navigateur. Un petit tour du coté de la définition du dictionnaire en ligne Wikipédia sur les standards du Web

GET /appel.html HTTP/1.0  
Host: adresse_ip.com  
Referer: http://www.adresse_ip.com/  
User-Agent: CERN-LineMode/2.15 libwww/2.17b3

Puce et Média