| Les deux révisions précédentesRévision précédente | |
| issue142:inkscape [2019/03/08 14:25] – auntiee | issue142:inkscape [2019/03/13 10:29] (Version actuelle) – andre_domenech |
|---|
| Au cours des quelques derniers mois, vous seriez pardonné si vous avez pensé que cette rubrique s'était transformée d'un tutoriel sur Inkscape en une série plus généraliste sur « le SVG dans le HTML ». En pratique, j'ai présenté quelques connaissances de base avant de plonger dans des fonctionnalités (limitées) du JavaScript qui sont déjà présentes dans Inkscape. Mais ceci réclame un peu plus d'information de fond sur le JavaScript lui-même, et son utilisation dans SVG sur le Web... | Au cours des quelques derniers mois, vous seriez pardonné si vous avez pensé que cette rubrique s'était transformée d'un tutoriel sur Inkscape en une série plus généraliste sur « le SVG dans le HTML ». En pratique, j'ai présenté quelques connaissances de base avant de plonger dans des fonctionnalités (limitées) du JavaScript qui sont déjà présentes dans Inkscape. Mais ceci réclame un peu plus d'information de fond sur le JavaScript lui-même, et son utilisation dans SVG sur le Web... |
| |
| JavaScript (JS) est de fait le langage de programmation utilisé dans les pages du Web. C'est une implémentation d'un langage appelé ECMAScript ; aussi, vous pourrez rencontrer occasionnellement une mention de ce terme. Ça n'a rien à voir avec le langage de programmation Java - ils partagent simplement un nom similaire grâce à quelqu'un du marketing de Netscape qui a, il y a pas mal d'années, décidé que la « notoriété commerciale » était plus importante que « d'éviter des années de confusion ». | JavaScript (JS) est de fait le langage de programmation utilisé dans les pages du Web. C'est une implémentation d'un langage appelé ECMAScript ; aussi, vous pourrez rencontrer occasionnellement une mention de ce terme. Ça n'a rien à voir avec le langage de programmation Java, ils partagent simplement un nom similaire grâce à quelqu'un du marketing de Netscape qui a, il y a pas mal d'années, décidé que la « notoriété commerciale » était plus importante que « d'éviter des années de confusion ». |
| |
| **Within a browser, JavaScript gives you the capability to write code that can modify the page and respond to interactions initiated by the user, or by external actions such as some data being pushed from a server. These triggers are referred to as ‘events’, and will form the core of the JS code we’ll be writing in this series. The basic approach is that we’ll use SVG to draw something to the browser window, then attach events to monitor for clicks, mouse movements, keypresses, and so on, each of which then triggers some JS code which can, in turn, modify the SVG. | **Within a browser, JavaScript gives you the capability to write code that can modify the page and respond to interactions initiated by the user, or by external actions such as some data being pushed from a server. These triggers are referred to as ‘events’, and will form the core of the JS code we’ll be writing in this series. The basic approach is that we’ll use SVG to draw something to the browser window, then attach events to monitor for clicks, mouse movements, keypresses, and so on, each of which then triggers some JS code which can, in turn, modify the SVG. |
| Because JavaScript can read keypresses from the user, and can talk to a server, it raises security concerns. You could, for example, use SVG to create a beautiful image, but as soon as the mouse moves over it, your JS could redraw the image to look like a legitimate username/password box has opened on the screen. Anything typed into the box could be sent back to your server and used for your own nefarious ends. As a technically aware reader of FCM, you may not be fooled by such an obvious scam, but a huge number of people will happily enter their credentials into such a dialog as an almost Pavlovian response.** | Because JavaScript can read keypresses from the user, and can talk to a server, it raises security concerns. You could, for example, use SVG to create a beautiful image, but as soon as the mouse moves over it, your JS could redraw the image to look like a legitimate username/password box has opened on the screen. Anything typed into the box could be sent back to your server and used for your own nefarious ends. As a technically aware reader of FCM, you may not be fooled by such an obvious scam, but a huge number of people will happily enter their credentials into such a dialog as an almost Pavlovian response.** |
| |
| Dans un navigateur, JavaScript vous donne la possibilité d'écrire du code qui peut modifier la page et répondre aux interactions initiées par l'utilisateur, ou par des actions externes, telles que des données envoyées depuis un serveur. Ces déclencheurs s'appellent des « events » (évènements) et formeront le cœur du code JS que nous écrirons dans cet article. En gros, l'approche va être d'utiliser SVG pour dessiner quelque chose dans la fenêtre du navigateur, puis d'y attacher des évènements pour gérer, notamment, des clics, des mouvements de la souris, des appuis au clavier, chacun d'eux déclenchant un peu de code JS qui peut, à son tour, modifier le SVG. | Dans un navigateur, JavaScript vous donne la possibilité d'écrire du code qui peut modifier la page et répondre aux interactions initiées par l'utilisateur, ou par des actions externes, telles que des données envoyées depuis un serveur. Ces déclencheurs s'appellent des « events » (événements) et formeront le cœur du code JS que nous écrirons dans cet article. En gros, l'approche va être d'utiliser SVG pour dessiner quelque chose dans la fenêtre du navigateur, puis d'y attacher des événements pour gérer, notamment, des clics, des mouvements de la souris, des appuis au clavier, chacun d'eux déclenchant un peu de code JS qui peut, à son tour, modifier le SVG. |
| |
| Comme JavaScript peut lire les appuis de l'utilisateur sur des touches, et peut converser avec un serveur, il pose des problèmes de sécurité. Vous pourriez, par exemple, utiliser SVG pour créer une belle image, mais, dès que la souris passe au-dessus, votre JS pourrait redessiner l'image pour qu'elle ressemble à une vraie boîte de dialogue pour identifiant et mot de passe qui s'est ouverte à l'écran. Tout ce qui serait saisi dans la boîte serait alors renvoyé au serveur et utilisé malheureusement à vos dépens. Comme vous êtes un lecteur techniquement averti du FCM, vous ne vous feriez pas avoir par une telle arnaque, mais un très grand nombre des gens entreraient gentiment leurs identifiants dans une telle boîte de dialogue, presque comme par un réflexe pavlovien. | Comme JavaScript peut lire les appuis de l'utilisateur sur des touches, et peut converser avec un serveur, il pose des problèmes de sécurité. Vous pourriez, par exemple, utiliser SVG pour créer une belle image, mais, dès que la souris passe au-dessus, votre JS pourrait redessiner l'image pour qu'elle ressemble à une vraie boîte de dialogue pour identifiant et mot de passe qui s'est ouverte à l'écran. Tout ce qui serait saisi dans la boîte serait alors renvoyé au serveur et utilisé malheureusement à vos dépens. Comme vous êtes un lecteur techniquement averti du FCM, vous ne vous feriez pas avoir par une telle arnaque, mais un très grand nombre des gens entreraient gentiment leurs identifiants dans une telle boîte de dialogue, presque comme par un réflexe pavlovien. |
| |
| SVG dans un <object> : | SVG dans un <object> : |
| C'est la façon normative du W3C pour inclure du contenu « étranger » dans une page Web - y compris du Flash, des applets Java, et d'autres codes potentiellement dangereux. Comme tel, il a toujours eu un ensemble de règles de sécurité plus souple que <img> et aucun développeur de site Web sensé n'autorise que du contenu téléversé par un utilisateur soit affiché dans un <object>. Ainsi donc, c'est considéré comme quelque chose qui est ajouté uniquement par une personne de confiance, et JavaScript est autorisé. | C'est la façon normative du W3C pour inclure du contenu « étranger » dans une page Web, y compris du Flash, des applets Java, et d'autres codes potentiellement dangereux. Comme tel, il a toujours eu un ensemble de règles de sécurité plus souple que <img> et aucun développeur de site Web sensé n'autorise que du contenu téléversé par un utilisateur soit affiché dans un <object>. Ainsi donc, c'est considéré comme quelque chose qui est ajouté uniquement par une personne de confiance, et JavaScript est autorisé. |
| |
| SVG dans une <iframe> : | SVG dans une <iframe> : |
| …except it won’t. Not unless the server has been configured correctly. Which is a whole other story of politics and pain in which countless users and developers suffer from an ideological disagreement at a technical level. Brace yourself, this is going to get petty!** | …except it won’t. Not unless the server has been configured correctly. Which is a whole other story of politics and pain in which countless users and developers suffer from an ideological disagreement at a technical level. Brace yourself, this is going to get petty!** |
| |
| Il y a une dernière façon d'afficher une image SVG dans un navigateur qui ne nécessite en aucune manière de l'incorporer dans un fichier HTML ; c'est de charger directement le fichier SVG. Si le fichier SVG est sur votre machine locale, vous avez juste à appuyer sur Ctrl-O pour le rechercher dans le sélecteur de fichier. Pour un fichier envoyé par un serveur Web, le champ pour l'URL dans le navigateur doit directement pointer sur l'image SVG et le navigateur la chargera de la même manière qui si vous pointiez sur une image PNG ou JPEG... | Il y a une dernière façon d'afficher une image SVG dans un navigateur qui ne nécessite en aucune manière de l'incorporer dans un fichier HTML ; c'est de charger directement le fichier SVG. Si le fichier SVG est sur votre machine locale, vous avez juste à appuyer sur Ctrl-O pour le rechercher dans le sélecteur de fichier. Pour un fichier envoyé par un serveur Web, le champ pour l'URL dans le navigateur doit directement pointer sur l'image SVG et le navigateur la chargera de la même manière que si vous pointiez sur une image PNG ou JPEG... |
| |
| ...sauf qu'il ne le fera pas. Sauf si le serveur a été configuré correctement. Ce qui est une toute autre douloureuse histoire de grands principes dans lesquels d'innombrables utilisateurs et développeurs ont souffert d'un désaccord idéologique au niveau technique. Accrochez-vous ; ça va devenir mesquin ! | ...sauf qu'il ne le fera pas. Sauf si le serveur a été configuré correctement. Ce qui est une toute autre douloureuse histoire de grands principes dans lesquels d'innombrables utilisateurs et développeurs ont souffert d'un désaccord idéologique au niveau technique. Accrochez-vous ; ça va devenir mesquin ! |
| |
| |
| Envoyer un fichier SVG n'est pas terriblement compliqué. Votre serveur Web doit être configuré pour envoyer le bon type MIME (une entête qui dit au navigateur quel est le type de fichier qu'il reçoit), mais c'est, en général, une petite modification de la configuration. Si vous avez le contrôle direct de la configuration du serveur, cherchez en ligne avec les termes appropriés (par ex., « Apache SVG MIME ») et vous devriez trouver des instructions convenables. Si votre serveur est géré par quelqu'un d'autre - ce qui est le cas typique pour un serveur hébergé par un FAI (Fournisseur d'Accès à l'Internet) - essayez d'abord de mettre votre image SVG sur votre propre site et d'y accéder, car il y a de bonnes chances que la configuration ait déjà été faite. Si le fichier apparaît comme du texte, si le navigateur essaie de le sauvegarder plutôt que de l'afficher, ou s'il y a un message suggérant que le navigateur le traite comme un document XML, vous devrez demander de l'aide à votre hébergeur. | Envoyer un fichier SVG n'est pas terriblement compliqué. Votre serveur Web doit être configuré pour envoyer le bon type MIME (une entête qui dit au navigateur quel est le type de fichier qu'il reçoit), mais c'est, en général, une petite modification de la configuration. Si vous avez le contrôle direct de la configuration du serveur, cherchez en ligne avec les termes appropriés (par ex. « Apache SVG MIME ») et vous devriez trouver des instructions convenables. Si votre serveur est géré par quelqu'un d'autre - ce qui est le cas typique pour un serveur hébergé par un FAI (Fournisseur d'Accès à l'Internet) - essayez d'abord de mettre votre image SVG sur votre propre site et d'y accéder, car il y a de bonnes chances que la configuration ait déjà été faite. Si le fichier apparaît comme du texte, si le navigateur essaie de le sauvegarder plutôt que de l'afficher, ou s'il y a un message suggérant que le navigateur le traite comme un document XML, vous devrez demander de l'aide à votre hébergeur. |
| |
| **Where it gets more complex is with SVGZ files – “compressed SVG” in Inkscape’s terms. These are literally just SVG files that have been compressed using the Gzip algorithm, and you can get the same effect by using the gzip program on your Linux box: | **Where it gets more complex is with SVGZ files – “compressed SVG” in Inkscape’s terms. These are literally just SVG files that have been compressed using the Gzip algorithm, and you can get the same effect by using the gzip program on your Linux box: |
| The first line creates a gzipped version of “image.svg” but doesn’t overwrite the original file (due to the -k switch). Gzip defaults to simply appending “.gz” to the filename, so the second line renames the file to the standard “.svgz” (this could also be done directly with the “--suffix” switch to gzip). The resultant file can be directly loaded into Inkscape for further editing – it’s indistinguishable from a “compressed SVG” file saved from Inkscape itself. On the surface, SVGZ seems like a great format, as it’s much smaller than an equivalent SVG file, but you can still open it in Inkscape, or even convert back and forth from the command-line if you do want to edit the XML content by hand. The problems come when you try to put an SVGZ file online.** | The first line creates a gzipped version of “image.svg” but doesn’t overwrite the original file (due to the -k switch). Gzip defaults to simply appending “.gz” to the filename, so the second line renames the file to the standard “.svgz” (this could also be done directly with the “--suffix” switch to gzip). The resultant file can be directly loaded into Inkscape for further editing – it’s indistinguishable from a “compressed SVG” file saved from Inkscape itself. On the surface, SVGZ seems like a great format, as it’s much smaller than an equivalent SVG file, but you can still open it in Inkscape, or even convert back and forth from the command-line if you do want to edit the XML content by hand. The problems come when you try to put an SVGZ file online.** |
| |
| Là où ça devienne plus compliqué c'est avec les fichiers SVGZ - « SVG compressé » en termes d'Inkscape. Ce ne sont en fait que de fichiers SVG qui ont été compressés avec l'algorithme Gzip ; vous pouvez obtenir le même résultat en utilisant le programme gzip sur votre appareil Linux : | Là où ça devient plus compliqué c'est avec les fichiers SVGZ - « SVG compressé » en termes d'Inkscape. Ce ne sont en fait que de fichiers SVG qui ont été compressés avec l'algorithme Gzip ; vous pouvez obtenir le même résultat en utilisant le programme gzip sur votre appareil Linux : |
| |
| gzip -k image.svg | gzip -k image.svg |
| But saying that is like stating that browsers support only uncompressed HTML or CSS. In practice you can send any supported format with on-the-fly Gzip compression, provided your web server correctly sets the “content-encoding” header. This also means that you can send a pre-compressed SVGZ file if you also provide that header – the browser just thinks you’ve sent an SVG file using on-the-fly compression. Once again, search online for the instructions for your web server, or raise a support request with your ISP if necessary.** | But saying that is like stating that browsers support only uncompressed HTML or CSS. In practice you can send any supported format with on-the-fly Gzip compression, provided your web server correctly sets the “content-encoding” header. This also means that you can send a pre-compressed SVGZ file if you also provide that header – the browser just thinks you’ve sent an SVG file using on-the-fly compression. Once again, search online for the instructions for your web server, or raise a support request with your ISP if necessary.** |
| |
| Le groupe de travail du W3G qui a créé SVG pensait, à juste titre, que la définition d'une forme compressée du format comme partie intégrante de la spécif. serait un ajout valable, surtout en 2001 quand l'espace de stockage et la bande passante étaient plus coûteuses. Le « g-zippage » du contenu à la volée était déjà une fonctionnalité classique du Web, et les navigateurs avaient déjà mis en place le code de décompression, faisant le choix évident de l'algorithme. Malheureusement, c'est là qu'une division idéologique a eu lieu : plutôt que de traiter SVGZ comme un format de plein droit, les fournisseurs de navigateurs n'optèrent nativement que pour le support du SVG non compressé. | Le groupe de travail du W3G qui a créé SVG pensait, à juste titre, que la définition d'une forme compressée du format comme partie intégrante de la spécif. serait un ajout valable, surtout en 2001 quand l'espace de stockage et la bande passante étaient plus coûteux. Le « g-zippage » du contenu à la volée était déjà une fonctionnalité classique du Web, et les navigateurs avaient déjà mis en place le code de décompression, faisant le choix évident de l'algorithme. Malheureusement, c'est là qu'une division idéologique a eu lieu : plutôt que de traiter SVGZ comme un format de plein droit, les fournisseurs de navigateurs n'optèrent nativement que pour le support du SVG non compressé. |
| |
| Mais dire cela, c'est comme faire état du seul support des HTML ou CSS non compressés dans les navigateurs. En pratique, vous pouvez envoyer n'importe quel format pris en charge avec une compression Gzip à la volée, à condition que votre serveur Web règle correctement l'entête « content-encoding » (codage du contenu). Cela signifie aussi que vous pouvez envoyer un fichier SVGZ pré-compressé si vous fournissez aussi l'entête - le navigateur pense simplement que vous avez envoyé un fichier SVG avec une compression à la volée. Une fois encore, recherchez en ligne les instructions pour votre serveur Web ou demandez de l'aide à votre FAI, si nécessaire. | Mais dire cela, c'est comme faire état du seul support des HTML ou CSS non compressés dans les navigateurs. En pratique, vous pouvez envoyer n'importe quel format pris en charge avec une compression Gzip à la volée, à condition que votre serveur Web règle correctement l'entête « content-encoding » (codage du contenu). Cela signifie aussi que vous pouvez envoyer un fichier SVGZ pré-compressé si vous fournissez aussi l'entête - le navigateur pense simplement que vous avez envoyé un fichier SVG avec une compression à la volée. Une fois encore, recherchez en ligne les instructions pour votre serveur Web ou demandez de l'aide à votre FAI, si nécessaire. |
| **Personally, I think the browser vendors are wrong on this one. JPEG images, for example, are essentially just arrays of pixels that are compressed using a “discrete cosine transformation” (DCT) algorithm. Yet browsers don’t insist on a “content-encoding: DCT” header to display a JPEG. The philosophical difference between a file that has been compressed using Gzip by the server, and one that has been natively stored in a gzipped format, is a subtle one. But the result is that users suffer from the complexity and confusion of not being able to directly load an SVGZ file into the browser, even though that format has been explicitly sanctioned by the SVG Working Group.** | **Personally, I think the browser vendors are wrong on this one. JPEG images, for example, are essentially just arrays of pixels that are compressed using a “discrete cosine transformation” (DCT) algorithm. Yet browsers don’t insist on a “content-encoding: DCT” header to display a JPEG. The philosophical difference between a file that has been compressed using Gzip by the server, and one that has been natively stored in a gzipped format, is a subtle one. But the result is that users suffer from the complexity and confusion of not being able to directly load an SVGZ file into the browser, even though that format has been explicitly sanctioned by the SVG Working Group.** |
| |
| Personnellement, je pense que les fournisseurs de navigateurs ont tort dans ce cas. Les images JPEG, par exemple, ne sont en gros que des tableaux de points qui sont compressés en utilisant un algorithme de « transformée en cosinus discrète ou TCD » (en anglais : DCT, Discrete Cosine Transform). Pourtant, les navigateurs n'exigent pas une entête « content-encoding: DCT » pour afficher un JPEG. La différence philosophique entre un fichier qui a été compressé avec Gzip par un serveur et un qui a été nativement stocké dans un format g-zippé est subtile. Mais le résultat est que les utilisateurs souffrent de la complexité et de la confusion de ne pouvoir charger directement un fichier SVGZ dans le navigateur, même si ce format a été explicitement approuvé par le groupe de travail du SVG. | Personnellement, je pense que les fournisseurs de navigateurs ont tort dans ce cas. Les images JPEG, par exemple, ne sont en gros que des tableaux de points qui sont compressés en utilisant un algorithme de « transformée en cosinus discrète ou TCD » (en anglais : DCT, Discrete Cosine Transform). Pourtant, les navigateurs n'exigent pas un entête « content-encoding: DCT » pour afficher un JPEG. La différence philosophique entre un fichier qui a été compressé avec Gzip par un serveur et un qui a été nativement stocké dans un format g-zippé est subtile. Mais le résultat est que les utilisateurs souffrent de la complexité et de la confusion de ne pouvoir charger directement un fichier SVGZ dans le navigateur, même si ce format a été explicitement approuvé par le groupe de travail du SVG. |
| |
| **To begin our journey into the world of Inkscape and JavaScript, I’ll assume that you are able to load an Inkscape-created SVG file into your web browser, either from a web server or from the local filesystem. Later on, we’ll look at some differences that apply when you use <object>, <iframe>, or inline SVG, but, right now, let’s keep things self contained in a simple SVG file. | **To begin our journey into the world of Inkscape and JavaScript, I’ll assume that you are able to load an Inkscape-created SVG file into your web browser, either from a web server or from the local filesystem. Later on, we’ll look at some differences that apply when you use <object>, <iframe>, or inline SVG, but, right now, let’s keep things self contained in a simple SVG file. |
| Pour commencer notre voyage dans le monde d'Inkscape et de JavaScript, je présume que vous êtes capable de charger un fichier SVG créé avec Inkscape dans votre navigateur Web, soit à partir d'un serveur Web, soit depuis un système de fichiers local. Par la suite, nous regarderons quelques différences qui s'appliquent quand vous utilisez <object>, <iframe>, ou un SVG en ligne, mais, pour l'instant, gardons les choses incorporées dans un simple fichier SVG. | Pour commencer notre voyage dans le monde d'Inkscape et de JavaScript, je présume que vous êtes capable de charger un fichier SVG créé avec Inkscape dans votre navigateur Web, soit à partir d'un serveur Web, soit depuis un système de fichiers local. Par la suite, nous regarderons quelques différences qui s'appliquent quand vous utilisez <object>, <iframe>, ou un SVG en ligne, mais, pour l'instant, gardons les choses incorporées dans un simple fichier SVG. |
| |
| Vous souvenez-vous des « events » du JavaScript dont j'ai parlé avant ? Utilisons Inkscape pour ajouter du code JS qui attend un évènement « clic » - le résultat du clic de l'utilisateur sur un objet de notre image. Créons une nouvelle image, dessinons un objet simple, puis faisons un clic droit dessus pour ouvrir le dialogue des Propriétés de l'objet. En bas de ce dialogue se trouve une série de champs, tous avec des étiquettes qui commencent avec les lettres « on ». S'ils ne sont pas visibles, vous devrez cliquer sur l'étiquette « Interactivité » pour les faire apparaître. Dans le champ « onclick » (lors d'un clic), entrez le code JavaScript suivant : | Vous souvenez-vous des « events » du JavaScript dont j'ai parlé avant ? Utilisons Inkscape pour ajouter du code JS qui attend un événement « clic » - le résultat du clic de l'utilisateur sur un objet de notre image. Créons une nouvelle image, dessinons un objet simple, puis faisons un clic droit dessus pour ouvrir le dialogue des Propriétés de l'objet. En bas de ce dialogue se trouve une série de champs, tous avec des étiquettes qui commencent avec les lettres « on ». S'ils ne sont pas visibles, vous devrez cliquer sur l'étiquette « Interactivité » pour les faire apparaître. Dans le champ « onclick » (lors d'un clic), entrez le code JavaScript suivant : |
| |
| alert('Clicked') | alert('Clicked') |
| Sauvegardez le fichier et chargez-le dans votre navigateur Web. Vous devriez voir l'objet que vous avez dessiné dans Inkscape. Cliquez dessus pour confirmer que le navigateur vous présente bien le dialogue qui contient le mot « Clicked ». Ce type de dialogue, qui s'appelle une alerte, est la forme de sortie la plus simple du JavaScript. Vous ne pouvez afficher qu'une simple chaîne, et vous ne pouvez pas changer l'aspect du dialogue ou l'étiquette du bouton. Mais même l'écriture de ce simplissime morceau de code est un premier pas utile dans toute application en JavaScript : il prouve qu'Inkscape, votre navigateur et votre serveur Web (si vous en avez un) fonctionnent tous comme prévu, et cela confirme que votre code peut répondre à des clics de la souris, ce qui est un besoin de base pour à peu près tous les sites interactifs. | Sauvegardez le fichier et chargez-le dans votre navigateur Web. Vous devriez voir l'objet que vous avez dessiné dans Inkscape. Cliquez dessus pour confirmer que le navigateur vous présente bien le dialogue qui contient le mot « Clicked ». Ce type de dialogue, qui s'appelle une alerte, est la forme de sortie la plus simple du JavaScript. Vous ne pouvez afficher qu'une simple chaîne, et vous ne pouvez pas changer l'aspect du dialogue ou l'étiquette du bouton. Mais même l'écriture de ce simplissime morceau de code est un premier pas utile dans toute application en JavaScript : il prouve qu'Inkscape, votre navigateur et votre serveur Web (si vous en avez un) fonctionnent tous comme prévu, et cela confirme que votre code peut répondre à des clics de la souris, ce qui est un besoin de base pour à peu près tous les sites interactifs. |
| |
| La simple ligne de code que vous avez écrite au-dessus fait une chose : elle appelle une fonction nommée alert() quand l'utilisateur clique avec le bouton gauche de la souris (ou fait une rapide frappe du doigt sur l'écran) sur l'objet auquel vous avez attaché votre code. La fonction reçoit un seul paramètre - une chaîne de caractères contenant le mot « Clicked » - qui est affichée sur votre écran dans le dialogue. Voyons comment ce code mis dans Inkscape se manifeste dans le fichier SVG. Ouvrez le fichier SVG dans un éditeur de texte et, vers le bas du fichier, vous devriez trouver quelque chose de similaire au code présenté à la page suivante, en haut à droite. | La simple ligne de code que vous avez écrite au-dessus fait une chose : elle appelle une fonction nommée alert() quand l'utilisateur clique avec le bouton gauche de la souris (ou fait une rapide frappe du doigt sur l'écran) sur l'objet auquel vous avez attaché votre code. La fonction reçoit un seul paramètre : une chaîne de caractères contenant le mot « Clicked », qui est affichée sur votre écran dans le dialogue. Voyons comment ce code mis dans Inkscape se manifeste dans le fichier SVG. Ouvrez le fichier SVG dans un éditeur de texte et, vers le bas du fichier, vous devriez trouver quelque chose de similaire au code présenté à la page suivante, en haut à droite. |
| |
| **You might have a different element than a <rect>, depending on what you drew – and therefore may have other attributes (the “rx” and “ry” attributes govern the roundedness of a rectangle’s corners, for example). I’ve also significantly abbreviated the “style” attribute. But the thing to note is the “onclick” attribute, which contains the JavaScript we typed into the dialog in Inkscape earlier. | **You might have a different element than a <rect>, depending on what you drew – and therefore may have other attributes (the “rx” and “ry” attributes govern the roundedness of a rectangle’s corners, for example). I’ve also significantly abbreviated the “style” attribute. But the thing to note is the “onclick” attribute, which contains the JavaScript we typed into the dialog in Inkscape earlier. |
| With those edits in place and saved, reload your page, and click on your object again. This time you should see a series of three alerts.** | With those edits in place and saved, reload your page, and click on your object again. This time you should see a series of three alerts.** |
| |
| Vous pourriez avoir un élément autre qu'un <rect>, selon ce que vous avez dessiné - et, en conséquence, avoir d'autres attributs (les attributs « rx » et « ry » gouvernent la rondeur des angles du rectangle, par exemple). J'ai aussi largement réduit l'attribut « style ». Mais ce qu'il faut noter est l’attribut « onclick » qui contient le JavaScript que nous avons saisi un peu plus tôt dans la boîte de dialogue d'Inkscape. | Vous pourriez avoir un élément autre qu'un <rect>, selon ce que vous avez dessiné, et, en conséquence, avoir d'autres attributs (les attributs « rx » et « ry » gouvernent la rondeur des angles du rectangle, par exemple). J'ai aussi largement réduit l'attribut « style ». Mais ce qu'il faut noter est l’attribut « onclick » qui contient le JavaScript que nous avons saisi un peu plus tôt dans la boîte de dialogue d'Inkscape. |
| |
| Il vaut mieux être à l'aise avec la façon dont le JavaScript apparaît dans le fichier. Alors que des champs avec une seule ligne de texte conviennent pour saisir de très courtes quantités de code, si vous avez besoin de quelque chose de plus conséquent, c'est souvent plus facile de modifier directement le SVG. Voici une version modifiée de mon objet (les attributs non concernés ont été éliminés), pour vous montrer comment gérer des lignes multiples : | Il vaut mieux être à l'aise avec la façon dont le JavaScript apparaît dans le fichier. Alors que des champs avec une seule ligne de texte conviennent pour saisir de très courtes quantités de code, si vous avez besoin de quelque chose de plus conséquent, il est souvent plus facile de modifier directement le SVG. Voici une version modifiée de mon objet (les attributs non concernés ont été éliminés), pour vous montrer comment gérer des lignes multiples : |
| |
| Ces modifications étant mises en place et sauvegardées, rechargez la page et cliquez à nouveau sur l'objet. Cette fois-ci, vous devriez voir une série de trois alertes. | Ces modifications étant mises en place et sauvegardées, rechargez la page et cliquez à nouveau sur l'objet. Cette fois-ci, vous devriez voir une série de trois alertes. |
| Malheureusement, les modifications faites ainsi ne se voient pas bien dans l'interface utilisateur d'Inkscape. Vos trois lignes seront présentes, mais toutes sur la même ligne et avec tout espace blanc que vous avez utilisé pour les aligner inclus sur cette ligne. Généralement, le plus facile est de modifier le code, soit dans un éditeur de texte, soit dans Inkscape, mais sans passer de l'un à l'autre. | Malheureusement, les modifications faites ainsi ne se voient pas bien dans l'interface utilisateur d'Inkscape. Vos trois lignes seront présentes, mais toutes sur la même ligne et avec tout espace blanc que vous avez utilisé pour les aligner inclus sur cette ligne. Généralement, le plus facile est de modifier le code, soit dans un éditeur de texte, soit dans Inkscape, mais sans passer de l'un à l'autre. |
| |
| Comme vous l'avez deviné en regardant l'interface d'Inkscape, il y a d'autres évènements sur lesquels réagir. Mais, dans la plupart des cas, l'utilisation de la fonction alert() vous empêchera de faire des tests correctement. Faisons un essai de l'option onmousemove, qui est supposée déclencher des évènements en permanence quand votre souris passe au-dessus de votre objet : dès que votre souris passera au-dessus de votre objet, vous recevrez une alerte que vous devrez rejeter avant de pouvoir continuer ; ensuite, une autre, puis une autre ; à chaque fois que votre souris passe au-dessus de l'objet, vous devrez rejeter l'alerte manuellement. Pas tout à fait le flux régulier d’évènements qui vous intéressait. | Comme vous l'avez deviné en regardant l'interface d'Inkscape, il y a d'autres événements sur lesquels réagir. Mais, dans la plupart des cas, l'utilisation de la fonction alert() vous empêchera de faire des tests correctement. Faisons un essai de l'option onmousemove, qui est supposée déclencher des événements en permanence quand votre souris passe au-dessus de votre objet : dès que votre souris passera au-dessus de votre objet, vous recevrez une alerte que vous devrez rejeter avant de pouvoir continuer ; ensuite, une autre, puis une autre ; à chaque fois que votre souris passe au-dessus de l'objet, vous devrez rejeter l'alerte manuellement. Pas tout à fait le flux régulier d’événements qui vous intéressait. |
| |
| **Back in the dim and distant past, debugging by throwing up alert messages was the de facto way to develop with JavaScript, but, thankfully, the tools have moved on a lot since then. Modern desktop browsers all have a developer toolbox which you can usually open by pressing F12. There are a variety of tools in here, but the one we’re interested in is the console – there should be a tab for it somewhere near the top of the toolbox. In Inkscape try adding a console.log('Mouse moved') call to the onmousemove section of the object properties: | **Back in the dim and distant past, debugging by throwing up alert messages was the de facto way to develop with JavaScript, but, thankfully, the tools have moved on a lot since then. Modern desktop browsers all have a developer toolbox which you can usually open by pressing F12. There are a variety of tools in here, but the one we’re interested in is the console – there should be a tab for it somewhere near the top of the toolbox. In Inkscape try adding a console.log('Mouse moved') call to the onmousemove section of the object properties: |
| That’s a very basic start to adding some interactivity to an Inkscape file. We’ll be exploring this topic a lot more over the coming months, so please do try the simple exercises above so that you’ve got a good basis to build on as we make our events do more interesting things than just printing some text to the screen. ** | That’s a very basic start to adding some interactivity to an Inkscape file. We’ll be exploring this topic a lot more over the coming months, so please do try the simple exercises above so that you’ve got a good basis to build on as we make our events do more interesting things than just printing some text to the screen. ** |
| |
| Ceci démontre l'autre énorme avantage de console.log() sur alert() - vous pouvez lui associer plusieurs paramètres et ils ne sont pas forcément des chaînes de caractères. | Ceci démontre l'autre énorme avantage de console.log() sur alert() : vous pouvez lui associer plusieurs paramètres et ils ne sont pas forcément des chaînes de caractères. |
| |
| Ceci est un début très basique pour l'ajout d'une interactivité à un fichier Inkscape. Nous explorerons ce sujet beaucoup plus dans les prochains mois ; aussi, essayez les exercices simples ci-dessus de sorte que vous disposerez d'une bonne base sur laquelle s'appuyer quand nous créerons des évènements pour faire des choses plus intéressantes qu'un simple affichage de texte à l'écran. | Ceci est un début très basique pour l'ajout d'une interactivité à un fichier Inkscape. Nous explorerons ce sujet beaucoup plus dans les prochains mois ; aussi, essayez les exercices simples ci-dessus de sorte que vous disposerez d'une bonne base sur laquelle s'appuyer quand nous créerons des événements pour faire des choses plus intéressantes qu'un simple affichage de texte à l'écran. |
| |
| **A blatant plug! | **A blatant plug! |
