JavaScript ] qq

Cette section décrit brièvement le langage JavaScript, utilisé non seulement dans la partie HTML du prototype, mais également au sein des fichiers VRML. Les notions sont ici reprises de l'ouvrage de David Flanagan (1998).

Javascript a été initialement développé par Netscape et s'appelait à l'époque « LiveScript ». Adopté à la fin de l'année 1995, par la firme Sun (qui a aussi développé Java), il prit alors son nom actuel de Javascript. Javascript n'est pas propre aux navigateurs de Netscape; Microsoft l'a d'ailleurs aussi adopté à partir de son Internet Explorer 3. On le retrouve, de façon améliorée, dans Explorer 5, mais de nombreuses incompatibilités entre navigateurs posent encore de nombreux problèmes lors de l'écriture d'un script. Cet aspect sera développé plus loin.

JavaScript est un langage de programmation interprété avec de capacités orientées objet. Pour les puristes, JavaScript n'est pas à proprement parler un langage orienté objet tel que C++ ou Java. On dira plutôt que JavaScript est un langage basé sur les objets. En effet, en bon internaute, nous voyons tous s’afficher une page Web sur notre écran. Javascript va diviser cette page en objets et surtout va permettre d'accéder à ces

objets, d'en retirer des informations et de les manipuler. Ceci est particulièrement important, étant donné que l’interactivité exige que les éléments individuels d’un document soient manipulables. Par exemple (figure 6), une page web s'affiche dans une fenêtre, il s'agit de l’objet fenêtre. Dans cette fenêtre, il y a un document HTML. C'est l'objet document. Autrement dit (et c'est là que l'on voit apparaître la notion de la hiérarchie des objets JavaScript), l’objet fenêtre contient l’objet document. Dans ce document, on trouve, par exemple, un formulaire au sens HTML. C'est l'objet formulaire. Ainsi, l'objet fenêtre contient un objet document qui lui contient un objet formulaire. Dans ce dernier, on peut trouver un boutons « radio », un boutons « classique » et une zone de texte. Ce sont respectivement l'objet radio, l’objet bouton, l'objet texte. L'objet fenêtre contient donc l'objet document qui contient l'objet formulaire qui contient à son tour l'objet radio, l'objet bouton et enfin, l'objet texte.

Pour accéder à un objet, il faudra donner le chemin complet de l'objet en allant du contenant le plus extérieur à l'objet à l'objet référencé. Soit par exemple pour le bouton radio «non»; (window).document. form.radio[l J. L'objet window est mis entre parenthèses

car comme il occupe la première place dans la hiérarchie, il est repris par défaut par JavaScript et devient donc facultatif.

Il s’agit d’un langage de programmation qui permet d'apporter des améliorations au langage HTML en permettant d’exécuter des commandes. Le coeur de ce langage a été intégré aux navigateurs web tels que Netscape ou Internet Explorer, le code JavaScript est inclus directement dans la page HTML. Ce qui permet à tout internaute de voir le code (via l'option Affichage - Source de son navigateur). Tout programme JavaScript est de fait un « morceau de logiciel » libre. Le code du script n'est toutefois pas visible dans la fenêtre même du navigateur car il est compris entre des balises (ou tags) spécifiques qui signalent au navigateur qu'il s'agit d'un script écrit en langage JavaScript. Les balises annonçant un code JavaScript sont les suivantes:

<SCRIPT language= « Javascript »> Code du script

</SCRIPT>

Toutefois, d'anciens navigateurs, créés avant l'arrivée du JavaScript, ne connaissent pas ces balises et donc les ignorent. Le code du JavaScript risque donc de s'afficher sur la page Web et de gâcher le travail. L'astuce contournant ce problème consiste à ajouter des balises de commentaires à l'intérieur même des balises de script. Ainsi les anciens navigateurs ignoreront tout simplement l'intégralité du script, tandis que les navigateurs récents l'interpréteront (comme il se doit) comme du Javascript. Voici ce que donne le script une fois « masqué » pour les anciens navigateurs:

<SCRIPT language= « Javascript » >

Ci-

Code du script //-->

</SCRIPT>

A noter également qu’il ne faut pas confondre les balises de commentaires du langage HTML (destinées à masquer le script pour certains browsers) et les caractères de commentaires JavaScript (permettant de documenter son script). Par ailleurs, il faut veiller

à ne pas imbriquer des commentaires, au risque de provoquer une erreur lors de l'exécution du code. Pour écrire des commentaires, JavaScript utilise les conventions utilisées en langage C et C++. Pour mettre en commentaires tout une ligne on utilise le double slash :

Il Tous les caractères derrière le // sont ignorés

Pour mettre en commentaire une partie du texte (éventuellement sur plusieurs lignes) on utilise le /* et le */:

/* Toutes les lignes comprises entre ces repères sont ignorées par l'interpréteur de code */

JavaScript est donc une extension du code HTML des pages Web. Les scripts, qui s'ajoutent ici aux balises HTML, peuvent en quelque sorte être comparés aux macros d’un traitement de texte. Le code JavaScript faisant partie de la page HTML, il est téléchargé en même temps que celle-ci sur le poste de l'internaute. Il est ensuite interprété par le navigateur : les différents scripts sont gérés et exécutés par le browser lui-même sans devoir faire appel aux ressources du serveur. Cette mise en oeuvre est pratique mais l'interprétation de code est toujours plus lente que l'exécution de code compilé.

La syntaxe de ce langage ressemble à du C, C++ et Java à la fois, avec des constructions programmatiques telles que l'énoncé if, les boucles while et l’opérateur &&. La similarité s'achève cependant avec la syntaxe : JavaScript est un langage non typé, c'est-à-dire que le type des variables n’est pas spécifié. Les objets en JavaScript se rapprochent plus des tableaux associatifs de Péri que des structures en C ou des objets en C++ et Java. Les mécanismes d’héritage orienté objet de JavaScript diffère également de Java; JavaScript propose des objets préexistants, mais il ne permet pas la création de classe d'objets. Il est vrai que JavaScript, tout comme Java fournit des contenus exécutables dans un navigateur Web, cependant, la nomenclature similaire ne provient que d’une manœuvre de marketing. JavaScript peut contrôler le comportement d’un navigateur mais ne peut pas, comme le fait Java, générer des objets graphiques par exemple. D'autre part l'applet Java (le programme) doit être lancé à chaque chargement

de la page, d'où un important ralentissement pour les applets Java contrairement au JavaScript. Le tableau de la figure 7 résume les différences entre Java et JavaScript.

Figure 7 : Comparaison entre JavaScript et Java - Accessibilité du code ASCII

JavaScript Java

Code intégré dans la page Html Module (applet) distinct de la page HTML Code interprété par le browser au

moment de l'exécution

Code source compilé avant son exécution Codes de programmation simples mais

pour des applications limitées

Langage de programmation beaucoup plus complexe mais plus performant

Permet d'accéder aux objets du navigateur

N'accède pas aux objets du navigateur

Accessibilité du code Code source compilé - Confidentialité du

code Liaisons dynamiques: les références des objets sont vérifiées au chargement

Liaisons statiques: Les objets doivent exister au chargement (compilation)

Les versions de JavaScript se sont succédées avec les différentes versions de Nefscape : JavaScript pour Netscape 2, JavaScript 1.1 pour Netscape 3 et JavaScript 1.2 pour Netscape 4 . Ce qui n'est pas sans poser certains problèmes de compatibilité, selon le browser utilisé, des pages comportant du code JavaScript. La figure 8 résume les compatibilités entre les différentes versions de JavaScript et des navigateurs. Le nom JavaScript est possédé par Netscape et l'implémentation Microsoft est officiellement connue en tant que JScript. JavaScript a été standardisé par ECMA (European Computer Manufacturer Association), sous la norme ECMA-262. A l’heure actuelle, JavaScript 1.3 est sensé être supporté par les deux navigateurs Netscape et Internet Explorer. Il reste tout de même laborieux d’adapter les scripts pour les deux navigateurs. L'avenir de JavaScript est en réalité entre les mains de ces deux grands navigateurs du Web et en partie lié à la guerre que se livrent Microsoft et AOL. Le tableau suivant résume les versions de JavaScript supportées par Netscape et Internet Explorer. Les compatibilités sous Netscape 6 n'ont pas été testées ni sous internet Explorer 6. On s'accordera à prédire un avenir prometteur à ce langage surtout de par son indépendance vis à vis des ressources du serveur.

Figure 8 : Navigateurs et compatibilités (Flanagan, 1998)

Version du navigateur Netscape Microsoft Internet Explorer

2 JavaScript 1.0

3 JavaScript 1.1 JavaScript 1.0

4

4.6

JavaScript 1.2- ne répond pas tout à fait à la norme ECMA-262

JavaScript 1.3

JavaScript 1.2- ne répond pas tout à fait à la norme ECMA-262

5 JavaScript 1.3

3.3.4 SVG (Scalable Vector Graphie)

SVG (Scalable Vector Graphie) est un standard reconnu par le W3C et en constant développement. SVG 1.0 a été présenté le 2 août 2000, comme une spécification officielle. Le W3C, l'organisme chargé de fixer les formats du Web, vient d’ailleurs, en date du 4 septembre 2001, d’annoncer la recommandation officielle du SVG (W3C, 4 septembre 2001, Annexe B). SVG est une application du XML (eXtented Markup Language) dont l’objet est la description d’objets graphiques en deux dimensions. Au moyen d’un langage de script, dans notre cas, JavaScript, il est possible d’avoir accès au

DOM (Document Object Mode!) et de réaliser des images dynamiques offrant de

nombreuses fonctionnalités (W3C, 1 novembre 2001, Annexe B). Le DOM est un modèle objet de documents: il s'agit d'une norme définissant une interface de programmation (indépendante de tout langage) qui permet d'accéder à une représentation « orientée objet » des documents. En utilisant DOM, les développeurs peuvent manipuler et parcourir de façon arborescente un document - lequel est constitué de noeuds. Un nœud est un point d’un arbre d'où partent une ou plusieurs branches. Dans un arbre DOM, un noeud correspond à un objet. DOM est bien adapté pour traiter les langages de balisage tels que HTML et XML. La norme DOM est notamment implémentée sous la forme d'analyseurs XML. Des API analysant et décodant les balises d'un document XML afin de permettre à l'application utilisant cet analyseur de traiter» facilement » des données au format XML.

Le SVG permet de gérer trois types d'objets graphiques : les formes vectorielles (courbes, lignes, polygones par exemple), les textes et les images. Ces objets graphiques peuvent être groupés, transformés, et être dotés de styles. Le SVG permet d'écrire des applications interactives et dynamiques. Il est en effet possible d'accéder au SVG DOM par un langage de script (en l'occurrence javaScript), et donc de modifier les objets

graphiques, leurs attributs et leurs propriétés, et même d'en créer de nouveaux. Le SVG gère également les évènements de type onclick (clic de la souris), onmouseover (survol de la souris), etc. , et ce pour chaque objet graphique. Concrètement, un fichier SVG se présente de la manière suivante :

<?xml version="1.0" encoding="iso-8859-1"?>

<svg width="96px" height="76px" viewBox="0 0 9600 7600">

<rect id="guide" x="3200" y="3200" width="3200" height-’3200" style="fill:red;fill- opacity:0.3"/>

</svg>

Dans cet exemple, le document contient un carré rouge transparent : <rect id="guide" x="3200" y="3200" width="3200" height="3200" style="fill:red;fill-opacity:0.37>. Le fichier SVG est enchâssé (embed) dans un fichier HTML. Un plugin est nécessaire afin que le navigateur puisse afficher le fichier SVG. Celui développé par Adobe est téléchargeable gratuitement du site d’Adobe. Le plugin d’Adobe fonctionne avec Internet Explorer et Netscape Navigator, aussi bien sur Windows que sur Mac (sauf les cartes dynamiques avec Internet Explorer pour Macintosh. Par contre, aucun plugin n’a encore été développé pour la dernières version de Netscape (v. 6 ).

Les fonctionnalités et avantages offerts par SVG sont multiples; parmi elles on retrouve : une très haute qualité de reproduction graphique; un format texte permettant de lire et de modifier les fichiers SVG par de très nombreux outils; des fichiers légers et très compressibles par rapport aux formats JPEG ou GIF; le format vectoriel d’où aucune pixellisation de l’image lors d'un zoom; la possibilité d’effectuer une recherche ou une sélection au sein du fichier, à l’opposé des formats bitmap traditionnels; des graphiques interactifs et animés sophistiqués; la compatibilité avec les technologies Java; tous les avantages du XML; ou encore, plus particulièrement, la gestion de plusieurs couches d'objets graphiques, avec contrôle interactif de la visibilité des couches; l’association de données externes aux objets graphiques (dénomination, données statistiques); l’affichage de ces données au moyen d'un clic sur l'objet graphique; des fonctions de zoom et de pan (panoramique) par drag & drop sur une vue miniature de l'image; l’affichage d'un repère sur un objet graphique sélectionnée dans une liste (SUN Microsystems, 2001, Annexe B).

Par ailleurs, la plupart des formats graphiques traditionnels sont souvent des formats binaires propriétaires, peu documentés, qui sont générés via des fonctions d'exportation de programmes graphiques particuliers. C'est pourquoi ils ne correspondent pas au principe de source ouverte qui caractérise Internet. Les formats binaires présentent d'autant plus d'inconvénients qu'ils ne peuvent être édités et corrigés sans le programme d’origine. Or, n'importe quel projet devrait intégrer cette capacité d'édition : particulièrement, les mécanismes d'interactivité et d'affichage nécessitent souvent d'être adaptes « a la main », et modifiés par la suite, afin d'intégrer de nouveaux éléments. C’est dans cet esprit qu’il a été tenté de travailler au travers de cette recherche, malgré le penchant personnel pour le logiciel Flash de Macromedia, actuel concurrent du SVG. Il est à souligner cependant que Macromedia, sentant sans doute venir les limites de Flash, est lui-même entré dans le groupe de travail chargé de développer le format SVG, ce qui laisse supposer une introduction de la technologie SVG chez Macromedia tôt ou tard. Comme quoi, quand l'orgueil ne touche pas les éditeurs, ce sont les utilisateurs qui en profitent (W3C, 11 février 1999, Annexe B).

Les styles graphiques, tels que nous les connaissons dans les logiciels graphiques, peuvent être définis avec SVG par les CSS, afin de doter de caractéristiques identiques un groupe d’objets graphiques. De la même façon, il est possible de modifier l'apparence de plusieurs objets. Grâce à la compatibilité du langage de style, les fichiers SVG peuvent être intégrés simplement dans des documents web. L'intégration du SVG dans le DOM permet de contrôler et de modifier les éléments SVG par les interfaces habituelles JavaScript/Java. S'agissant d’interactivité, le SVG propose une riche palette d'événements qui sont employés de la même façon que pour les éléments HTML traditionnels. Chaque élément peut être animé en modifiant certaines de ses caractéristiques (couleur, forme, opacité, position ou autres) (W3C, 4 septembre 2001, Annexe B) . La syntaxe utilisée est conforme à SMIL, le standard du W3C qui définit un langage d'intégration d'éléments multimédia (séquences de textes, séquences d'images fixes, diaporama, son, vidéo ...) dans une structure Web.

La norme SVG est développée et soutenue (en particulier via leurs produits) par les principaux acteurs du graphisme informatique intervenant sur le Web : Adobe, Apple, AutoDesk, Bit-Flash, Corel, HP, IBM, ILOG, Inso, Kodak, Macromedia, Microsoft, Netscape, Oasis, Open Text, Oxford University, Quark, RAL, Sun Microsystems, W3C et Xerox (W3C, 4septembre 2001, Annexe B). Cela garantit dans un avenir proche de larges possibilités

d'importation et d'exportation, ainsi que le développement de visionneuse et de convertisseurs. Étant donné que le SVG est un standard XML bien documentée et ouvert, chacun est en mesure de produire et de convertir ses propres scénarios ou programmes. On peut s’attendre à ce que le SVG, par son utilisation dans d'importants projets Web, devienne un format général d'échange dans le domaine graphique. A côté d'Adobe lllustrator et du PDF, le SVG est l'un des rares formats graphiques en ASCII bien documentés. En comparaison des deux premiers, il offre même plus de possibilités. Le plugin d'Adobe est actuellement nécessaire, cependant les prochaines versions des navigateurs intégreront cette fonctionnalité, cette intégration est également possible avec l'applet java du CSIRO (Australiens Commonwealth Scientific and Industrial Research Organisation http://www.cmis.csiro.au/svg/).

L'adjectif « scalable » dans l'expression « Scalable Vector Graphies » signifie en premier lieu que l'échelle de représentation des vecteurs peut varier, notion qui paraît évidente pour un architecte. Pour le W3C, son sens est cependant plus large, en particulier il signifie que le rendu du document varie automatiquement selon le périphérique de sortie (écran ou imprimante) en matière de résolution et de mise en page. Ce n'est pas le cas pour les autres plugins, qui sont également dans l’incapacité d'imprimer des pages à base d'images, lorsqu'elles ont été modifiées par des scripts. Seules les pages dans leur version initiale peuvent alors être imprimées(W3C, 4 septembre 2001, Annexe B).

Les applications du SVG s'étendent du simple affichage/masquage d'objets, à la modification des attributs graphiques, la réaction aux événements de souris, la liaison de fenêtres, le déplacement interactif, la modification d'échelle ou la rotation d'éléments, ou la création petits programmes, comme la possibilité offerte à l'utilisateur de sauver ses propres données sur le serveur en vue d'une future utilisation. Avec l’aide de scripts CGI, d'applets ou de servlets Java, il est possible d'établir une liaison avec des bases de données (W3C, 4 septembre 2001, Annexe B ). Comme VRML, SVG offre la possibilité de réutiliser des éléments précédemment décrits et clairement identifiés au moyen d’un ID, d’un identificateur. Cela permet de prédéterminer des objets graphiques complexes ou des groupes, puis de les réutiliser, éventuellement après les avoir transformés. L'extensibilité est une des particularités les plus importantes du SVG, comme c’est le cas avec toutes les spécifications compatibles DOM/XML. Comme SVG lui-même est défini en XML, une autre norme également définie en XML peut être enchâssée et accessible en SVG. Pour des raisons de temps, il a malheureusement été impossible d'exploiter cette perspective très prometteuse.

SVG, la nouvelle norme vectorielle d’Internet permet enfin de dépasser les problèmes rencontrés jusqu'ici au niveau du format graphique interactif. Il permettra aux architectes de se consacrer pleinement au contenu et aux capacités d’interactivité qu’offrent, par exemple, des plans sur ordinateur. Le caractère ouvert d'Internet, avec le succès du modèle de l'open source, offrent de nouveaux débouchés à la CAO, ce qui ne sera pas sans conséquence dans certains secteurs, comme le traitement de données ou leur distribution, entre autres.

Chapitre 4 : Description et évaluation du prototype