| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue187:inkscape [2022/11/28 12:09] – d52fr | issue187:inkscape [2022/11/30 18:37] (Version actuelle) – andre_domenech |
|---|
| Au cours des deux derniers articles, j'ai présenté l'extension Web > Maquette Web interactive, puis j'ai montré comment il est possible de créer le même effet - et avec moins de problèmes - avec une quantité minimale de JavaScript. Cette fois-ci, je vais terminer ce projet en ajoutant un peu plus de code qui démontrera quelques capacités supplémentaires de maquettage qui ne sont tout simplement pas possibles en utilisant l'extension. | Au cours des deux derniers articles, j'ai présenté l'extension Web > Maquette Web interactive, puis j'ai montré comment il est possible de créer le même effet - et avec moins de problèmes - avec une quantité minimale de JavaScript. Cette fois-ci, je vais terminer ce projet en ajoutant un peu plus de code qui démontrera quelques capacités supplémentaires de maquettage qui ne sont tout simplement pas possibles en utilisant l'extension. |
| |
| Pour rappel, jusqu'à présent, j'ai créé une maquette composée de trois calques, chacune représentant une page différente d'un site Web (qui aurait tout aussi bien pu être la conception d'une application, d'un tutoriel ou d'une présentation). En empilant les calques les uns sur les autres, le code JS doit simplement masquer toutes les calques, puis réafficher le bon lorsque l'on clique sur la maquette de l'interface utilisateur. Ce code est stocké dans le document Inkscape, et on y accède via Fichier > Propriétés du document, puis l'onglet Programmation, l'onglet Programmes incorporés, et enfin en cliquant sur l'ID du script généré aléatoirement dans la liste. Votre code apparaîtra dans le volet Contenu au bas de la boîte de dialogue - qui n'est malheureusement pas redimensionnable (vous pouvez copier/coller entre Inkscape et un éditeur de texte pour faciliter la modification du code). Après les ajouts du mois dernier, le code ressemble à celui illustré ci-dessus. | Pour rappel, jusqu'à présent, j'ai créé une maquette composée de trois calques, chacune représentant une page différente d'un site Web (qui aurait tout aussi bien pu être la conception d'une application, d'un tutoriel ou d'une présentation). En empilant les calques les uns sur les autres, le code JS doit simplement masquer tous les calques, puis réafficher le bon lorsque l'on clique sur la maquette de l'interface utilisateur. Ce code est stocké dans le document Inkscape, et on y accède via Fichier > Propriétés du document, puis l'onglet Programmation, l'onglet Programmes incorporés, et enfin en cliquant sur l'ID du script généré aléatoirement dans la liste. Le code apparaîtra dans le volet Contenu au bas de la boîte de dialogue - qui n'est malheureusement pas redimensionnable (vous pouvez copier/coller entre Inkscape et un éditeur de texte pour faciliter la modification du code). Après les ajouts du mois dernier, le code ressemble à celui illustré ci-dessus. |
| |
| |
| Notre première étape consiste donc à diviser le fichier en un seul calque principal, plus un calque supplémentaire pour chaque page. Le calque principal contiendra tous les éléments communs, et les autres ne contiendront que les parties spécifiques à la page. Nous voulons donc que notre calque principal se trouve en bas de la pile z et qu'il reste visible à tout moment. Voici comment nos trois calques existants sont divisés en quatre calques dont nous avons maintenant besoin (en haut à gauche). | Notre première étape consiste donc à diviser le fichier en un seul calque principal, plus un calque supplémentaire pour chaque page. Le calque principal contiendra tous les éléments communs, et les autres ne contiendront que les parties spécifiques à la page. Nous voulons donc que notre calque principal se trouve en bas de la pile z et qu'il reste visible à tout moment. Voici comment nos trois calques existants sont divisés en quatre calques dont nous avons maintenant besoin (en haut à gauche). |
| |
| À gauche, nous avons les trois pages précédentes. À droite, nous avons maintenant notre calque principal en bas, avec les trois calques de contenu au-dessus. J'ai ajouté une bordure verte autour de chacune des couches de contenu pour indiquer leur étendue : elles ont toutes un arrière-plan transparent ; sans cela, leur lien avec leurs positions dans les anciennes pages ne serait pas très clair. Ces bordures vertes sont un ajout temporaire pendant le développement de la maquette, et sont retirées avant que les calques ne soient réellement utilisés. En outre, bien que j'aie étalé les pages sur cette image, dans la pratique, elles sont toutes empilées les unes sur les autres dans la fenêtre du document, comme auparavant. | À gauche, nous avons les trois pages précédentes. À droite, nous avons maintenant notre calque principal en bas, avec les trois calques de contenu au-dessus. J'ai ajouté une bordure verte autour de chacune des couches de contenu pour indiquer leur étendue : elles ont toutes un arrière-plan transparent ; sans cela, leur lien avec leurs positions dans les anciennes pages ne serait pas très clair. Ces bordures vertes sont un ajout temporaire pendant le développement de la maquette, et seront retirées avant que les calques ne soient réellement utilisés. En outre, bien que j'aie étalé les pages sur cette image, dans la pratique, elles sont toutes empilées les unes sur les autres dans la fenêtre (viewBox) du document, comme auparavant. |
| |
| En affichant le calque principal, plus un des autres à la fois, nous pouvons donc reproduire la même apparence que les trois calques de l'ancienne version. Il ne nous reste plus qu'à modifier notre code pour qu'il fasse la même chose à notre place. Pour rendre le nouveau code un peu plus lisible, nous allons d'abord utiliser l'éditeur XML pour changer l'ID du nouveau calque en « main » (principal), de la même manière que nous avons changé les ID des calques précédemment. Dans l'éditeur XML, le niveau supérieur de notre document ressemble maintenant à l'illustration ci-dessus. | En affichant le calque principal, plus un des autres à la fois, nous pouvons donc reproduire la même apparence que les trois calques de l'ancienne version. Il ne nous reste plus qu'à modifier notre code pour qu'il fasse la même chose à notre place. Pour rendre le nouveau code un peu plus lisible, nous allons d'abord utiliser l'éditeur XML pour changer l'ID du nouveau calque en « main » (principal), de la même manière que nous avons changé les ID des calques précédemment. Dans l'éditeur XML, le niveau supérieur de notre document ressemble maintenant à l'illustration ci-dessus. |
| En regardant notre fichier JavaScript de tout à l'heure, nous voulons toujours que notre fonction effectue la même tâche de base : masquer tous les calques, puis afficher un calque spécifique. Sauf que maintenant, nous voulons aussi qu'elle affiche un deuxième calque en même temps. Ce sont ces deux lignes qui sont responsables du réaffichage du calque spécifié dans le code existant : | En regardant notre fichier JavaScript de tout à l'heure, nous voulons toujours que notre fonction effectue la même tâche de base : masquer tous les calques, puis afficher un calque spécifique. Sauf que maintenant, nous voulons aussi qu'elle affiche un deuxième calque en même temps. Ce sont ces deux lignes qui sont responsables du réaffichage du calque spécifié dans le code existant : |
| |
| const layerToShow = document.querySelector("#" + id) ; | const layerToShow = document.querySelector("#" + id); |
| |
| layerToShow.style.display = "inline" ; | layerToShow.style.display = "inline"; |
| |
| Nous pourrions simplement ajouter une paire de lignes similaires, en codant en dur l'ID dans l'appel querySelector() comme « #main ». Cela ferait l'affaire, mais ce n'est pas très souple. Que faire si nous voulons afficher deux calques « principaux » plus tard, peut-être pour séparer le texte des éléments graphiques ? Pour nous donner cette flexibilité supplémentaire, créons un tableau des calques que nous voulons afficher, puis bouclons sur ceux-ci pour les activer tous. Si vous n'êtes pas un programmeur, vous n'êtes peut-être pas familier avec les tableaux : pour nos besoins, vous pouvez les considérer comme un type spécial de variable qui peut contenir une liste de choses. Pour cette simple maquette, notre liste contiendra toujours « main » et l'id qui a été passé dans la fonction, mais vous devriez être capable de deviner comment vous pourriez l'étendre pour inclure « main-text » et « main-graphics » : | Nous pourrions simplement ajouter une paire de lignes similaires, en codant en dur l'ID dans l'appel querySelector() comme « #main ». Cela ferait l'affaire, mais ce n'est pas très souple. Que faire si nous voulons afficher deux calques « principaux » plus tard, peut-être pour séparer le texte des éléments graphiques ? Pour nous donner cette flexibilité supplémentaire, créons un éventail (« array ») des calques que nous voulons afficher, puis bouclons sur ceux-ci pour les activer tous. Si vous n'êtes pas un programmeur, vous n'êtes peut-être pas familier avec les « arrays » : pour nos besoins, vous pouvez les considérer comme un type spécial de variable qui peut contenir une liste de choses. Pour cette simple maquette, notre liste contiendra toujours « main » et l'id qui a été passé dans la fonction, mais vous devriez être capable de deviner comment vous pourriez l'étendre pour inclure « main-text » et « main-graphics » : |
| |
| const layersToDisplay = ["main", id] ; | const layersToDisplay = ["main", id] ; |
| So far, so good. But on trying out your interactive mock-up, you may have noticed that the mouse pointer doesn’t change to indicate that elements are clickable. It’s a minor visual thing, but we can definitely improve it. There are various ways to tackle this, but they all end up with us needing a line of CSS that tells the browser what cursor type to use. We want this to apply to all the elements with an ‘onclick’ handler. In our SVG, these are all implemented using ‘onclick’ attributes directly in the XML content – which means we should be able to add a style rule using an ‘[onclick]’ selector (matches any element with an ‘onclick’ attribute). That sounds like a perfect use for Inkscape’s ‘Selectors and CSS dialog’, right?** | So far, so good. But on trying out your interactive mock-up, you may have noticed that the mouse pointer doesn’t change to indicate that elements are clickable. It’s a minor visual thing, but we can definitely improve it. There are various ways to tackle this, but they all end up with us needing a line of CSS that tells the browser what cursor type to use. We want this to apply to all the elements with an ‘onclick’ handler. In our SVG, these are all implemented using ‘onclick’ attributes directly in the XML content – which means we should be able to add a style rule using an ‘[onclick]’ selector (matches any element with an ‘onclick’ attribute). That sounds like a perfect use for Inkscape’s ‘Selectors and CSS dialog’, right?** |
| |
| Maintenant, nous devons parcourir le tableau, en extrayant un élément à la fois pour travailler avec. Au fur et à mesure que nous extrayons chacun d'entre eux (en utilisant une boucle forEach()), nous pouvons affecter la valeur à une variable. En nommant cette variable « id », nous pouvons réutiliser notre code existant pour trouver et afficher la couche. Le résultat final est très similaire au code qui se trouvait précédemment à la fin de la fonction showLayer(), mais avec un peu plus d'habillage (voir ci-dessus). | Maintenant, nous devons parcourir l'éventail, en extrayant un élément à la fois pour travailler avec. Au fur et à mesure que nous extrayons chacun d'entre eux (en utilisant une boucle forEach()), nous pouvons affecter la valeur à une variable. En nommant cette variable « id », nous pouvons réutiliser notre code existant pour trouver et afficher le calque. Le résultat final est très similaire au code qui se trouvait précédemment à la fin de la fonction showLayer(), mais avec un peu plus d'habillage (voir ci-dessus). |
| |
| La dernière chose que nous devons faire est de nous assurer que tous les éléments cliquables appellent toujours la fonction showLayer(), en passant l'ID correct, après le remaniement des calques que nous avons fait plus tôt. Il est particulièrement important de revérifier tous les éléments que vous avez déplacés vers le calque principal. Une fois que vous êtes satisfait, chargez la page dans un navigateur Web et vérifiez que chaque élément fonctionne comme prévu lorsque vous cliquez dessus - si ce n'est pas le cas, vérifiez le code qui lui est associé. | La dernière chose que nous devons faire est de nous assurer que tous les éléments cliquables appellent toujours la fonction showLayer(), en passant l'ID correct, après le remaniement des calques que nous avons fait plus tôt. Il est particulièrement important de revérifier tous les éléments que vous avez déplacés vers le calque principal. Une fois que vous êtes satisfait, chargez la page dans un navigateur Web et vérifiez que chaque élément fonctionne comme prévu lorsque vous cliquez dessus - si ce n'est pas le cas, vérifiez le code qui lui est associé. |
| |
| Jusqu'ici, tout va bien. Mais en essayant votre maquette interactive, vous avez peut-être remarqué que le pointeur de la souris ne change pas pour indiquer que les éléments sont cliquables. Il s'agit d'un problème visuel mineur, mais nous pouvons certainement l'améliorer. Il existe plusieurs façons d'aborder ce problème, mais elles aboutissent toutes à la nécessité d'une ligne de CSS qui indique au navigateur le type de curseur à utiliser. Nous voulons que cette ligne s'applique à tous les éléments dotés d'un gestionnaire « onclick ». Dans notre SVG, ces éléments sont tous implémentés à l'aide d'attributs « onclick » directement dans le contenu XML, ce qui signifie que nous devrions être en mesure d'ajouter une règle de style à l'aide d'un sélecteur « [onclick] » (correspondant à tout élément avec un attribut « onclick »). Cela semble être une utilisation parfaite de la boîte de dialogue « Sélecteurs et CSS » d'Inkscape, n'est-ce pas ? | Jusqu'ici, tout va bien. Mais en essayant votre maquette interactive, vous avez peut-être remarqué que le pointeur de la souris ne change pas pour indiquer que les éléments sont cliquables. Il s'agit d'un problème visuel mineur, mais nous pouvons certainement l'améliorer. Il existe plusieurs façons d'aborder ce problème, mais elles aboutissent toutes à la nécessité d'une ligne de CSS qui indique au navigateur le type de curseur à utiliser. Nous voulons que cette ligne s'applique à tous les éléments dotés d'un attribut « onclick ». Dans notre SVG, ces éléments sont tous implémentés à l'aide d'attributs « onclick » directement dans le contenu XML, ce qui signifie que nous devrions être en mesure d'ajouter une règle de style à l'aide d'un sélecteur « [onclick] » (correspondant à tout élément avec un attribut « onclick »). Cela semble être une utilisation parfaite de la boîte de dialogue « Sélecteurs et CSS » d'Inkscape, n'est-ce pas ? |
| |
| |
| alert("You are now signed out");** | alert("You are now signed out");** |
| |
| Tout ce que nous devons faire maintenant, c'est d'appeler la fonction showMenu() à partir du gestionnaire de clic du menu hamburger qui se trouve sur la couche Main. Nous n'appelons pas la fonction showLayer() existante, de sorte qu'aucun des calques existants n'est caché. Tout ce qui se passe, c'est que le calque Menu est affiché en plus des autres qui étaient déjà visibles - exactement ce que nous voulions. | Tout ce que nous devons faire maintenant, c'est d'appeler la fonction showMenu() à partir l'attribut onclick du menu hamburger qui se trouve sur la couche Main. Nous n'appelons pas la fonction showLayer() existante, de sorte qu'aucun des calques existants n'est caché. Tout ce qui se passe, c'est que le calque Menu est affiché en plus des autres qui étaient déjà visibles, exactement ce que nous voulions. |
| |
| En l'état actuel des choses, la maquette est suffisamment bonne pour servir de démonstration, mais peut-être un peu maladroite par endroits. Lorsque le menu est « ouvert », par exemple, il n'y a aucun moyen de le « fermer » autrement qu'en naviguant vers l'une des pages. Une amélioration possible serait d'ajouter un rectangle presque transparent à cette couche, derrière le contenu principal. Une fonction closeMenu() appropriée, et un gestionnaire de clic ajouté au rectangle, vous permettraient de cliquer en dehors du menu pour le fermer. Je laisse au lecteur le soin de s'exercer sur ce point. | En l'état actuel des choses, la maquette est suffisamment bonne pour servir de démonstration, mais peut-être un peu maladroite par endroits. Lorsque le menu est « ouvert », par exemple, il n'y a aucun moyen de le « fermer » autrement qu'en naviguant vers l'une des pages. Une amélioration possible serait d'ajouter un rectangle presque transparent à cette couche, derrière le contenu principal. Une fonction closeMenu() appropriée et un gestionnaire de clic ajouté au rectangle, vous permettraient de cliquer en dehors du menu pour le fermer. Je laisse au lecteur le soin de s'exercer sur ce point. |
| |
| Et qu'en est-il de l'option « Déconnexion » ? Vous pourriez créer un autre calque contenant une maquette de dialogue de déconnexion, mais est-ce vraiment nécessaire ? Une fois que vous êtes à l'aise avec l'affichage et la dissimulation des éléments en JavaScript, il est toujours tentant d'aller un peu trop loin et de transformer votre « maquette interactive » en quelque chose qui s'approche d'une démonstration complète de l'interface utilisateur. Cela peut parfois être approprié, mais il est souvent préférable de faire le strict minimum pour aider les gens à visualiser le fonctionnement du site Web ou de l'application finale. Trop de détails ou de fonctionnalités peuvent en fait constituer une distraction, voire inhiber les discussions ou les idées ultérieures. Dans ce cas, donc, l'option « Déconnexion » sera simplement dotée d'un gestionnaire onclick contenant ceci : | Et qu'en est-il de l'option « Déconnexion » ? Vous pourriez créer un autre calque contenant une maquette de dialogue de déconnexion, mais est-ce vraiment nécessaire ? Une fois que vous êtes à l'aise avec l'affichage et la dissimulation des éléments en JavaScript, il est toujours tentant d'aller un peu trop loin et de transformer votre « maquette interactive » en quelque chose qui s'approche d'une démonstration complète de l'interface utilisateur. Cela peut parfois être approprié, mais il est souvent préférable de faire le strict minimum pour aider les gens à visualiser le fonctionnement du site Web ou de l'application finale. Trop de détails ou de fonctionnalités peuvent en fait constituer une distraction, voire inhiber les discussions ou les idées ultérieures. Dans ce cas, donc, l'option « Déconnexion » sera simplement dotée d'un attribut onclick contenant ceci : |
| |
| alert("You are now signed out") ; | alert("You are now signed out") ; |
| En outre, chaque élément cliquable de la page dispose d'un appel de fonction unique dans le champ « onclick » de la section « Interactivité » au bas de la boîte de dialogue Objet > Propriétés de l'objet. Dans la plupart des cas, il s'agit simplement d'un appel à la fonction showLayer(), avec le nom de la page à afficher (par exemple, showLayer("contact")). Dans le cas du menu hamburger, il s'agissait d'un appel à la fonction showMenu(). Enfin, nous avons ajouté un appel à la fonction intégrée alert() du navigateur pour l'option « Déconnexion ». | En outre, chaque élément cliquable de la page dispose d'un appel de fonction unique dans le champ « onclick » de la section « Interactivité » au bas de la boîte de dialogue Objet > Propriétés de l'objet. Dans la plupart des cas, il s'agit simplement d'un appel à la fonction showLayer(), avec le nom de la page à afficher (par exemple, showLayer("contact")). Dans le cas du menu hamburger, il s'agissait d'un appel à la fonction showMenu(). Enfin, nous avons ajouté un appel à la fonction intégrée alert() du navigateur pour l'option « Déconnexion ». |
| |
| Lorsque l'on prend un peu de recul et que l'on y regarde de plus près, on s'aperçoit qu'il y a vraiment beaucoup de fonctionnalités dans cette maquette interactive, pour une quantité minime de code. Mais nous en avons terminé avec ceci - et avec la « maquette interactive » qui est la dernière des nouvelles extensions - et nous en avons terminé avec les fonctionnalités qui ont été ajoutées à Inkscape 1.x. Le mois prochain, je commencerai ce qui sera certainement une longue série sur les nouvelles fonctionnalités et les ajouts dans Inkscape 1.2.x. | Lorsque l'on prend un peu de recul et que l'on y regarde de plus près, on s'aperçoit qu'il y a vraiment beaucoup de fonctionnalités dans cette maquette interactive, pour une quantité minime de code. Mais nous en avons terminé avec cela - et avec la « maquette interactive » qui est la dernière des nouvelles extensions - et nous en avons terminé avec les fonctionnalités qui ont été ajoutées à Inkscape 1.x. Le mois prochain, je commencerai ce qui sera certainement une longue série sur les nouvelles fonctionnalités et les ajouts dans Inkscape 1.2.x. |
| |
