|
||||||
 |
ADSL / WIFI
/ CPL Courant Porteur Location Ordinateur: Portable, Bureau, Vidéo Projecteur |
 |
|
||
| |||||||
|
|
Avant propos Je ne suis pas l'auteur de cet
article.
L'Internet enrichi ... et plus léger ! HTML est un langage de mise en forme et non de mise en page. Les instructions fondamentales qui le constituent ont l’avantage d’être très facilement assimilables, mais leur nombre réduit et leur universalité engendrent de sévères limitations. L’évolution des mœurs informatiques a fini par imposer un contenu multimédia et des pages à l’apparence toujours plus sophistiquée. Pour contourner les limites de HTML, les développeurs ont dû abuser de graphismes contribuant d’autant à la saturation du Web. Dans le précédent numéro, nous avons vu comment le format PNG et la version HTTP 1.1 constituaient deux innovations capitales destinées à désengorger le trafic Internet. Les Cascading Style Sheet et le Dynamic HTML représentent deux autres solutions de plus haut niveau répondant à la double nécessité d’allégement des données transférées et d’enrichissement des fonctions de mise en page. Popularisés par Internet Explorer 3.0, les Cascading Style Sheets (CSS) cherchent à dissocier le style d’un document de sa structure. Bien que des règles de style puissent être établies au sein même des documents HTML 3.0, il est plus avantageux de les incorporer dans un document HTML séparé : la feuille de style. L’idée est de séparer le style d’un élément HTML de l’élément lui-même, évitant ainsi le problème des navigateurs incapables d’interpréter ou d’afficher ces éléments. La police de caractère, les couleurs de fond, l’épaisseur de ligne, l’habillage des textes ne sont que quelques exemples de styles que les CSS contrôlent. Les CSS facilitent la création des pages et améliorent leur affichage sur le navigateur.
Les feuilles de style vous permettent de contrôler de nombreuses fonctions typographiques et de mise en page. Parmi elles, la gestion de la couleur des titres, celle des liens visités et non-visités, l’apparence des premières lignes et premières lettres, les marges, l’espacement inter-lettres et inter-mots, les familles, tailles et couleurs des polices. On pourra imposer, par exemple, que tous les titres de second niveau (le tag H2) soient de couleur bleue, en gras et de police Arial. Certes, HTML 3.0 (ou 3.2) permet déjà ce type de paramétrage. Mais les CSS vous laissent définir ce style en tête de document, de sorte que tous les éléments identiques (ici les H2) l’utiliseront par défaut. Cela assure une régularité dans la mise en forme, et évite au créateur de la page d’avoir à préciser le style pour chaque élément H2. De plus, il est possible de copier les définitions de style d’un document HTML à l’autre, éliminant le besoin de spécifier sans cesse tous ces attributs à travers les pages du site. En réalité, CSS va encore plus loin en vous laissant simplement pointer sur un document qui contient les styles que vous voulez : tous les documents qui pointent sur celui contenant les choix de styles originaux suivront automatiquement les mêmes définitions de style. Les feuilles de style peuvent être incluses dans le code HTML de quatre façons : soit par codage directement dans la section <BODY> du document; soit en utilisant l’attribut <STYLE> combiné aux tags <HTML> (ainsi on utilise <P STYLE=> au lieu de <P> pour définir un paragraphe); soit en utilisant une méthode plus efficace, en incluant un tag <STYLE></STYLE> dans la zone <HEAD> </HEAD>. On peut y définir le style de tous les éléments structurels, comme la couleur et la police des liens visités. Dernière solution, si vous avez déjà défini des feuilles de style dans un autre document, il suffit de les importer en utilisant la notation @import dans le tag <STYLE>. Si vous ne voulez pas importer une feuille de style mais si vous désirez que les éléments d’une page aient l’allure de ceux d’une autre, il faut utiliser l’élément LINK associé aux ancres <A> </A>. L’encadré Listing 1 illustre comment prédéfinir le style des titres de type H2 et H3 à l’aide d’une déclaration <STYLE> dans la zone <HEAD>. Il existe une méthode encore plus évoluée utilisant des “classes” de style. Les classes sont construites à l’intérieur d’un bloc <STYLE> placé dans la zone <HEAD>, avec un nom précédé d’un point. Plus loin dans le code HTML, il sera fait référence à cette classe comme un attribut associé à un tag de base. L’exemple suivant éclaircit cette définition. Supposons que nous souhaitions disposer de deux types différents de paragraphes. Le premier (appelé p1) est margé à gauche et à droite et en écriture noire. Le deuxième (appelé p2) est non justifié et en écriture rouge et grasse. Dans la section <HEAD> </HEAD> on définira deux classes de style : <STYLE> Il suffit ensuite lors de l’écriture du code HTML de la page d’associer la classe de style correspondant au tag <P> : <P CLASS=p1> Ce texte est
un paragraphe du premier type. Les avantages des CSS ne se limitent pas aux exemples ci-dessus. Les feuilles de style permettent aussi de définir des éléments flottants, des canvas, un formatage horizontal et vertical précis, et des “cascades” qui se rapportent à l’ordre dans lequel des règles de style conflictuelles sont résolues. C’est un point important, car plus d’une feuille de style peuvent être actives simultanément – d’autant que le concepteur comme l’utilisateur peut spécifier des styles via les options de son navigateur. Pour en savoir plus, les spécifications officielles des CSS sont accessibles sur le site du World Wide Web Consortium (W3C) à l’adresse www.w3.org/pub/ WWW/TR/WD-css1. Par ailleurs, le site de Microsoft propose de nombreux exemples dans sa rubrique “Site Builder”.
La philosophie originelle du Web impose que toutes les informations soient stockées sur le serveur, les utilisateurs recevant toute ou partie de celles-ci par des requêtes spécifiques à travers une série de transactions HTTP. En pratique, cela signifie que le client Web (le navigateur) n’accepte que des données statiques, et que tout changement doit être effectué par le serveur où l’information réside. Cela suffit et se comprend aisément dès lors que les changements sur les pages sont rares voire inexistants. Mais l’évolution du Web vers plus de multimédia, avec ses pages à menus et autres effets visuels, tourne résolument le dos à la philosophie de base. De ce constat est née l’idée de Dynamic HTML. Assez proche de l’initiative des CSS, Dynamic HTML a été conçu pour offrir un moyen de mettre à jour des pages Web, sans que le client n’ait à se reconnecter au serveur. Dynamic HTML veut transformer la nature statique des documents HTML reçus en incorporant des éléments qui modifient le document au vol. Ces éléments affectent le document côté client, c’est-à-dire au niveau de la machine locale. Le code provient d’un site déporté mais l’action se produit localement. Actuellement, Dynamic HTML, dans ses diverses déclinaisons, regroupe deux concepts : d’une part, la mise à jour dynamique en local de documents Web, comme nous venons de le décrire; d’autre part, un meilleur contrôle sur l’apparence du document et sur l’interface utilisateur pour plus d’interactivité. Dynamic HTML n’est pas la première tentative d’implantation de changements côté client. A un certain niveau, les client side image maps, en déplaçant les coordonnées de la carte sur le navigateur pour un résultat plus rapide et plus convivial, étaient déjà inspirées de cette philosophie. Java en est aussi un exemple, puisqu’il utilise le navigateur comme un lanceur d’applications, ces dernières s’exécutant entièrement en local. Mais Dynamic HTML prétend apporter interactivité et dynamisme tout en restant indépendant des différentes plates-formes et langages. Les styles de page, y compris les polices et la position des éléments, sont modifiables à la volée. Les éléments graphiques peuvent être déplacés sur la page, animés ou se voir appliquer toute une panoplie d’effets spéciaux ou de retouche (morphing, par exemple). Toutes ces modifications s’effectuent à la vitesse de l’ordinateur client et non à celle de la connexion au serveur. Il ne s’agit pas uniquement d’améliorations graphiques : les présentations de données se révèlent plus efficaces car les recherches et les tris s’opèrent plus rapidement. Et pourtant Dynamic HTML, contrairement aux applets Java ou aux contrôles ActiveX, ne consomme pas d’espace disque ni ne necessite de longs temps de téléchargement.
Dynamic HTML a fait son apparition avec les versions 4.0 des deux principaux navigateurs du marché (Netscape Navigator et Microsoft Internet Explorer). Mais, il fallait s’y attendre, son implémentation diffère notablement suivant les deux browsers. Si les deux parties s’accordent sur les bases fondamentales d’un contenu actif et d’interfaces du côté client, leur philosophie s’oppose sur la forme. Microsoft s’en tient aux standards du W3C, et s’appuie sur le positionnement tel que défini dans les CSS, alors que Netscape introduit un nouveau tag propriétaire de positionnement (<LAYER>). Le positionnement fait référence aux moyens mis à la disposition des concepteurs de page pour placer à un endroit spécifique de la page les différents éléments. Chaque élément peut avoir une position absolue dans la page (en x et y) ou une position relative (en x, y et z). Le positionnement absolu définit une zone rectangulaire dans laquelle l’élément HTML s’affichera. La position du rectangle dans le document demeurera toujours identique. Le positionnement relatif crée également une zone rectangulaire pour l’élément, mais le concepteur peut définir exactement où l’élément apparaîtra en premier et comment sa position évoluera à l’aide d’un simple script. On peut ainsi forcer un élément à se déplacer à travers la page, passant au-dessus et au-dessous d’autres objets, en ajustant sa position relative en quelques lignes de JavaScript ou VBScript. Par ailleurs, les deux types de positionnement peuvent-être associés en plaçant, par exemple, un élément avec une position absolue dans un autre en position relative. Les principales différences entre les implémentations Dynamic HTML de Netscape et Microsoft reposent sur le système de positionnement. Netscape utilise le tag <LAYER>, qui offre un positionnement tridimensionnel, alors que Microsoft utilise les contrôles de positionnement proposés par W3C. Par ailleurs, Netscape adopte des feuilles de style basées sur JavaScript, alors que Microsoft s’appuie sur des contrôles ActiveX pouvant être définis par scripts. Dans les deux cas, l’idée principale demeure d’offrir un positionnement dynamique des éléments HTML. Mais chacun des deux acteurs n’adoptant pas les technologies de l’autre, les concepteurs devront choisir leur camp. En réalité, il existe une stratégie privilégiant la compatibilité : opter pour la technologie Microsoft sans faire appel aux contrôles ActiveX, mais en utilisant le positionnement et les scripts disponibles via le standard CSS1 (Cascading Style Sheet Level 1).
Toutefois, Dynamic HTML ne se limite pas au positionnement d’éléments. Les styles peuvent être programmés pour se modifier au vol, ce qui favorise la création d’interface utilisateur proche de celle de nos applications bureautiques. Un exemple typique est la dissimulation d’éléments. En utilisant les attributs adéquats, les concepteurs de pages peuvent spécifier quand un élément sera affiché et quand il sera affiché en transparence (autrement dit, caché). Il est possible de lier les modifications des éléments HTML aux actions de l’utilisateur, par exemple afficher un élément en fonction de la position de la souris ou du clic d’un bouton. Dynamic HTML utilise des effets visuels similaires à ceux trouvés dans les logiciels de présentation (comme PowerPoint). Cela offre différentes sortes de transitions – entre les éléments d’une page ou entre plusieurs pages – et permet la création d’animations, sans recourir au GIF animé. Les possibilités de manipulation de données de Dynamic HTML sont tout aussi spectaculaires. Les tableaux peuvent être changés sans aucune transaction client/serveur. Les tableaux HTML peuvent être liés à des bases de données, avec des requêtes générant de nouvelles tables à la volée, sans que le concepteur de la page n’ait à prédéterminer la mise en page précise des lignes et colonnes. Cette fonction peut être réalisée uniquement côté navigateur, si le jeu d’informations est minimal, ou en combinant une interactivité client/serveur pour des jeux de données plus importants. La base des données est gérée à travers ActiveX pour Internet Explorer et à travers JavaScript pour Navigator, mais l’idée est la même : il n’est plus nécessaire de retourner au serveur pour régénérer un tableau, ce qui offre une plus grande liberté dans les mécanismes d’affichage des informations. En déportant certaines tâches sur le client et en limitant l’importance des transferts, CSS et DHTML contribuent donc à désengorger le Web. Mais pour les concepteurs de pages, ces deux technologies constituent avant tout une panoplie d’outils plus sophistiqués facilitant la création d’interfaces plus conviviales, interactives et dynamiques. Un confort qui s’accompagne toutefois d’un véritable casse-tête eu égard aux incompatibilités entre les deux navigateurs ténors.
Par Thierry Derouet |
Les Bons Plans Gratuits
