| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue186:inkscape [2022/11/01 14:39] – auntiee | issue186:inkscape [2022/11/02 17:08] (Version actuelle) – andre_domenech |
|---|
| Le mois dernier, j'ai examiné l'extension Web > Maquette Web interactive à l'aide d'une simple maquette de site Web. J'ai montré comment vous pouvez l'utiliser pour créer une démo qui fonctionne bien sur une taille d'écran spécifique. Mais même si les fichiers SVG sont évolutifs de par leur nature même, cette extension ne permet pas de produire des démos qui fonctionneront sur une variété d'appareils. C'est une limitation que nous allons essayer de résoudre ce mois-ci, en utilisant le même fichier que celui que j'ai créé la dernière fois ; ainsi, assurez-vous d'avoir lu la chronique du mois dernier avant de poursuivre avec celle-ci. | Le mois dernier, j'ai examiné l'extension Web > Maquette Web interactive à l'aide d'une simple maquette de site Web. J'ai montré comment vous pouvez l'utiliser pour créer une démo qui fonctionne bien sur une taille d'écran spécifique. Mais même si les fichiers SVG sont évolutifs de par leur nature même, cette extension ne permet pas de produire des démos qui fonctionneront sur une variété d'appareils. C'est une limitation que nous allons essayer de résoudre ce mois-ci, en utilisant le même fichier que celui que j'ai créé la dernière fois ; ainsi, assurez-vous d'avoir lu la chronique du mois dernier avant de poursuivre avec celle-ci. |
| |
| Tout d'abord, je dois gérer vos attentes. Bien que nous essayions de faire en sorte que notre présentation fonctionne mieux sur différentes tailles d'écran, il y a une limite à ce qui peut être fait avec cette simple extension ou la petite quantité de code que nous allons écrire. Tout ce que nous visons, c'est de rendre la sortie évolutive - nous n'allons pas créer une maquette entièrement réactive où des parties de la conception se déplacent ou changent d'apparence pour s'adapter aux écrans de mobiles, de tablettes et de PC à partir d'un seul fichier. Il s'agit plutôt de créer un fichier qui fonctionnera à la fois sur un ordinateur portable et un ordinateur de bureau, même si les écrans ont des tailles légèrement différentes. | Tout d'abord, je dois gérer vos attentes. Bien que nous essayions de faire en sorte que notre présentation fonctionne mieux sur différentes tailles d'écran, il y a une limite à ce qui peut être fait avec cette simple extension ou la petite quantité de code que nous allons écrire. Tout ce que nous visons, c'est de rendre la sortie évolutive, nous n'allons pas créer une maquette entièrement réactive où des parties de la conception se déplacent ou changent d'apparence pour s'adapter aux écrans de mobiles, de tablettes et de PC à partir d'un seul fichier. Il s'agit plutôt de créer un fichier qui fonctionnera à la fois sur un ordinateur portable et un ordinateur de bureau, même si les écrans ont des tailles légèrement différentes. |
| |
| |
| That solves one problem: our content now scales to suit the width and height of the browser, while still maintaining its original aspect ratio. But it also exposes another issue with the way this extension works. You may have already seen the problem when playing with the resize handle in the responsive view: if the window size is tall enough, then we can also see some corners of the other pages in our mock-up (outlined in red in this image).** | That solves one problem: our content now scales to suit the width and height of the browser, while still maintaining its original aspect ratio. But it also exposes another issue with the way this extension works. You may have already seen the problem when playing with the resize handle in the responsive view: if the window size is tall enough, then we can also see some corners of the other pages in our mock-up (outlined in red in this image).** |
| |
| Le code lui-même se compose de deux lignes presque identiques. Nous devons d'abord accéder à l'élément <svg> : comme il s'agit du conteneur principal de l'ensemble du fichier, on peut y accéder par « document.documentElement » en JS (assurez-vous de respecter la casse). Nous devons ensuite appeler la méthode setAttribute(), en lui indiquant le nom de l'attribut que nous souhaitons définir ou mettre à jour (« width » ou « height »), ainsi que la nouvelle valeur qu'il doit avoir (« 100% »). Le code complet ressemble donc à ceci : | Le code lui-même se compose de deux lignes presque identiques. Nous devons d'abord accéder à l'élément <svg> : comme il s'agit du conteneur principal de l'ensemble du fichier, on peut y accéder par « document.documentElement » en JS (assurez-vous de respecter la casse). Nous devons ensuite appeler la méthode setAttribute(), en lui indiquant le nom de l'attribut que nous souhaitons définir ou mettre à jour (« width » ou « height »), ainsi que la nouvelle valeur qu'il doit avoir (« 100 % »). Le code complet ressemble donc à ceci : |
| |
| document.documentElement.setAttribute("height", "100%"); | document.documentElement.setAttribute("height", "100%"); |
| document.documentElement.setAttribute("width", "100%"); | document.documentElement.setAttribute("width", "100%"); |
| |
| Comme ce code n'est pas à l'intérieur d'une fonction, il s'exécutera automatiquement lorsque la page sera chargée dans le navigateur. Le travail est fait, et nous n'avons pas besoin de nous rappeler d'ajuster les valeurs à chaque fois que nous enregistrons une modification du fichier. | Comme ce code n'est pas à l'intérieur d'une fonction, il s'exécutera automatiquement lorsque la page sera chargée dans le navigateur. Le travail est fait et nous n'avons pas besoin de nous rappeler d'ajuster les valeurs à chaque fois que nous enregistrons une modification du fichier. |
| |
| Cela résout un problème : notre contenu s'adapte désormais à la largeur et à la hauteur du navigateur, tout en conservant son format d'origine. Mais cela met également en évidence un autre problème lié au fonctionnement de cette extension. Vous avez peut-être déjà constaté le problème en jouant avec la poignée de redimensionnement dans la vue réactive : si la taille de la fenêtre est suffisamment grande, nous pouvons également voir certains coins des autres pages de notre maquette (soulignés en rouge dans cette image). | Cela résout un problème : notre contenu s'adapte désormais à la largeur et à la hauteur du navigateur, tout en conservant son rapport d'aspect d'origine. Mais cela met également en évidence un autre problème lié au fonctionnement de cette extension. Vous avez peut-être déjà constaté le problème en jouant avec la poignée de redimensionnement dans la vue réactive : si la taille de la fenêtre est suffisamment grande, nous pouvons également voir certains coins des autres pages de notre maquette (soulignés en rouge dans cette image). |
| |
| |
| What we require is some more JavaScript that hides all the pages in our mock-up except the one we’re currently viewing. This requires us to have some simple way to define what counts as a “page” – and it strikes me that simply putting each page onto a separate layer is the easiest way to do that. Yes, I know Inkscape 1.2 has multi-page support, but using layers will work for older releases as well. In the case of our demo file, we need three top-level layers, one for each page. These will all be direct children of the <svg> element. To make our code more readable, we’ll change the IDs for the layers to “home”, “about” and “contact” using the XML editor.** | What we require is some more JavaScript that hides all the pages in our mock-up except the one we’re currently viewing. This requires us to have some simple way to define what counts as a “page” – and it strikes me that simply putting each page onto a separate layer is the easiest way to do that. Yes, I know Inkscape 1.2 has multi-page support, but using layers will work for older releases as well. In the case of our demo file, we need three top-level layers, one for each page. These will all be direct children of the <svg> element. To make our code more readable, we’ll change the IDs for the layers to “home”, “about” and “contact” using the XML editor.** |
| |
| La raison en est que nos nouvelles valeurs de largeur et de hauteur indiquent au navigateur comment dimensionner le contenu principal (celui qui se trouve à l'intérieur de la boîte de visualisation), mais le navigateur rendra volontiers tout ce qui se trouve en dehors de cette zone, s'il y a de la place à l'écran pour le faire. Nous voyons simplement les parties de notre document qui se trouvent en dehors de la zone de visualisation actuelle. Il existe une solution simple et évidente à ce problème : il suffit de déplacer les pages les unes par rapport aux autres dans le document d'origine. Si elles se trouvent en dehors des limites de la fenêtre d'affichage, elles risquent moins d'apparaître à l'écran alors qu'elles ne le devraient pas. | La raison en est que nos nouvelles valeurs de largeur et de hauteur indiquent au navigateur comment dimensionner le contenu principal (celui qui se trouve à l'intérieur de la boîte de visualisation), mais le navigateur rendra volontiers tout ce qui se trouve en dehors de cette zone, s'il y a de la place à l'écran pour le faire. Nous voyons simplement les parties de notre document qui se trouvent en dehors de la zone de visualisation actuelle. Il existe une solution simple et évidente à ce problème : il suffit de déplacer les pages plus loin les unes par rapport aux autres dans le document d'origine. Si elles se trouvent en dehors des limites de la fenêtre d'affichage, elles risquent moins d'apparaître à l'écran alors qu'elles ne le devraient pas. |
| |
| Il s'agit, bien entendu, d'une solution de fortune. Bien que cela fonctionne dans la plupart des cas pratiques, il y aura toujours un rapport d'aspect extrême qui sera suffisant pour que les autres pages se glissent sur le bord. Dans la plupart des cas, c'est probablement suffisant, mais il serait préférable de disposer d'une solution qui réponde à tous les cas. | Il s'agit, bien entendu, d'une solution de fortune. Bien que cela fonctionne dans la plupart des cas pratiques, il y aura toujours un rapport d'aspect extrême qui sera suffisant pour que les autres pages se glissent sur le bord. Dans la plupart des cas, c'est probablement suffisant, mais il serait préférable de disposer d'une solution qui réponde à tous les cas. |
| |
| Nous avons besoin d'un peu plus de JavaScript pour masquer toutes les pages de notre maquette, à l'exception de celle que nous sommes en train de visualiser. Pour cela, il nous faut un moyen simple de définir ce qui est considéré comme une « page » - et il me semble que le fait de placer chaque page sur un calque distinct est le moyen le plus simple de le faire. Oui, je sais qu'Inkscape 1.2 prend en charge les pages multiples, mais l'utilisation de calques fonctionnera également pour les versions plus anciennes. Dans le cas de notre fichier de démonstration, nous avons besoin de trois calques de haut niveau, un pour chaque page. Elles seront toutes des enfants directs de l'élément <svg>. Pour rendre notre code plus lisible, nous changerons les ID des couches en « home », « about » et « contact » en utilisant l'éditeur XML. | Nous avons besoin d'un peu plus de JavaScript pour masquer toutes les pages de notre maquette, à l'exception de celle que nous sommes en train de visualiser. Pour cela, il nous faut un moyen simple de définir ce qui est considéré comme une « page » - et il me semble que le fait de placer chaque page sur un calque distinct est le moyen le plus simple de le faire. Oui, je sais qu'Inkscape 1.2 prend en charge les pages multiples, mais l'utilisation de calques fonctionnera également pour les versions plus anciennes. Dans le cas de notre fichier de démonstration, nous avons besoin de trois calques de haut niveau, un pour chaque page. Elles seront toutes des enfants directs de l'élément <svg>. Pour rendre notre code plus lisible, nous changerons les ID des calques en « home », « about » et « contact » en utilisant l'éditeur XML. |
| |
| | |
| Let’s begin by adding the function we need. Once again open the Document Properties dialog, select the “Scripting” tab, the “Embedded scripts” tab, and then the script we created earlier. Append a blank line or two, then add the following code (shown below - again, remember it’s case-sensitive)** | Let’s begin by adding the function we need. Once again open the Document Properties dialog, select the “Scripting” tab, the “Embedded scripts” tab, and then the script we created earlier. Append a blank line or two, then add the following code (shown below - again, remember it’s case-sensitive)** |
| |
| Pour simplifier le code à écrire, nous allons également replacer tous les calques sur la toile, en les empilant les uns sur les autres. Cela signifie que vous devrez les activer et les désactiver afin de modifier le contenu, mais cela signifie également que notre code JS ne doit s'occuper que de la visibilité des calques, et non du déplacement de la viewBox. | Pour simplifier le code à écrire, nous allons également replacer tous les calques sur le canevas, en les empilant les uns sur les autres. Cela signifie que vous devrez les activer et les désactiver afin de modifier le contenu, mais cela signifie également que notre code JS ne doit s'occuper que de la visibilité des calques, et non du déplacement de la viewBox. |
| |
| Le code lui-même est un peu plus complexe que les deux lignes que nous avons créées précédemment, mais pas beaucoup. Nous avons besoin d'une fonction qui accepte un ID de couche, et qui désactive toutes les couches avant d'activer celle que nous avons fournie. Nous devrons également appeler cette fonction au chargement de la page pour nous assurer que la première couche est visible. Enfin, nous appellerons cette fonction à partir de chacun des éléments « interactifs » de notre maquette, en attachant l'appel de fonction à un événement onclick ou à l'un des autres événements d'interactivité que nous avons vus précédemment. | Le code lui-même est un peu plus complexe que les deux lignes que nous avons créées précédemment, mais pas de beaucoup. Nous avons besoin d'une fonction qui accepte un ID de calque et qui désactive tous les calques avant d'activer celle que nous avons fournie. Nous devrons également appeler cette fonction au chargement de la page pour nous assurer que le premier calque est visible. Enfin, nous appellerons cette fonction à partir de chacun des éléments « interactifs » de notre maquette, en attachant l'appel de fonction à un événement onclick ou à l'un des autres événements d'interactivité que nous avons vus précédemment. |
| |
| Commençons par ajouter la fonction dont nous avons besoin. Ouvrez à nouveau la boîte de dialogue des propriétés du document, sélectionnez l'onglet « Programmation », l'onglet « Programmes intégrés », puis le script que nous avons créé précédemment. Ajoutez une ou deux lignes vides, puis ajoutez le code suivant (illustré ci-dessous - encore une fois, rappelez-vous qu'il est sensible à la casse) | Commençons par ajouter la fonction dont nous avons besoin. Ouvrez à nouveau la boîte de dialogue des propriétés du document, sélectionnez l'onglet « Programmation », l'onglet « Programmes intégrés », puis le script que nous avons créé précédemment. Ajoutez une ou deux lignes vides, puis ajoutez le code suivant (montré ci-dessous - encore une fois, rappelez-vous qu'il est sensible à la casse). |
| |
| |
| <nowiki> setTimeout(() => showLayer("home"), 100); </nowiki> ** | <nowiki> setTimeout(() => showLayer("home"), 100); </nowiki> ** |
| |
| La première ligne du corps de cette fonction utilise la méthode querySelectorAll() pour rechercher dans le document tous les éléments qui correspondent au sélecteur CSS fourni. Le charabia entre guillemets signifie en fait « trouver tous les éléments <g> qui ont un attribut appelé « groupmode » (dans n'importe quel espace de nom), avec une valeur de « layer » (calque), mais seulement s'ils sont un enfant immédiat d'un élément <svg> «. Ceci est suffisant pour extraire uniquement nos couches de premier niveau, sans attraper accidentellement les sous-couches ou autres éléments <g>. La deuxième ligne itère ensuite sur la collection que nous venons de créer, en masquant chacun d'entre eux en définissant leur propriété CSS « display » sur « none ». | La première ligne du corps de cette fonction utilise la méthode querySelectorAll() pour rechercher dans le document tous les éléments qui correspondent au sélecteur CSS fourni. Le charabia entre guillemets signifie en fait « trouver tous les éléments <g> qui ont un attribut appelé « groupmode » (dans n'importe quel espace de nom), avec une valeur de « layer » (calque), mais seulement s'ils sont un enfant immédiat d'un élément <svg> «. Ceci est suffisant pour extraire uniquement nos calques de premier niveau, sans attraper accidentellement les sous-calques ou autres éléments <g>. La deuxième ligne itère ensuite sur la collection que nous venons de créer, en masquant chacun d'entre eux en définissant leur propriété CSS « display » sur « none ». |
| |
| Les deux dernières lignes sont similaires, mais ne traitent qu'un seul élément. Cette fois, nous utilisons querySelector() (sans le « All ») pour trouver un élément dont l'ID correspond à celui que nous avons fourni. En CSS, un ID commence par un caractère « # », nous l'ajouterons donc pour construire le sélecteur, ce qui signifie que nous pouvons simplement fournir un nom de page, tel que « home », plutôt que de devoir passer « #home ». La dernière ligne définit la propriété d'affichage CSS de cet élément sur « inline » afin de le rendre visible. | Les deux dernières lignes sont similaires, mais ne traitent qu'un seul élément. Cette fois, nous utilisons querySelector() (sans le « All ») pour trouver un élément dont l'ID correspond à celui que nous avons fourni. En CSS, un ID commence par un caractère « # », nous l'ajouterons donc pour construire le sélecteur, ce qui signifie que nous pouvons simplement fournir un nom de page, tel que « home », plutôt que de devoir passer « #home ». La dernière ligne définit la propriété d'affichage CSS de cet élément sur « inline » afin de le rendre visible. |
| |
| Nous devons maintenant ajouter une autre ligne qui appellera cette fonction pour rendre une couche visible par défaut lorsque nous chargerons le fichier dans le navigateur. Cela doit se produire après un court délai (nous utilisons 100 ms) pour donner à la page une chance de se charger et de s'installer avant que nous commencions à la manipuler. Ajoutez une ligne comme celle-ci à la fin, après l'accolade de fermeture, en remplaçant « home » par le nom de votre propre couche initiale. | Nous devons maintenant ajouter une autre ligne qui appellera cette fonction pour rendre un calque visible par défaut lorsque nous chargerons le fichier dans le navigateur. Cela doit se produire après un court délai (nous utilisons 100 ms) pour donner à la page une chance de se charger et de s'installer avant que nous commencions à la manipuler. Ajoutez une ligne comme celle-ci à la fin, après l'accolade de fermeture, en remplaçant « home » par le nom de votre propre calque initial. |
| |
| <nowiki> setTimeout(() => showLayer("home"), 100); </nowiki> | <nowiki> setTimeout(() => showLayer("home"), 100); </nowiki> |
| • Repeat for each interactive element on each page. Hint: you don’t need to close and reopen the dialog, it’ll update as you select each element.** | • Repeat for each interactive element on each page. Hint: you don’t need to close and reopen the dialog, it’ll update as you select each element.** |
| |
| Pour éviter tout problème visible, il convient également de s'assurer que votre page par défaut est le calque le plus haut dans Inkscape et qu'elle n'est pas cachée. | Pour éviter tout problème visible, il convient également de s'assurer que votre page par défaut est le calque le plus haut dans Inkscape et que cette page n'est pas cachée. |
| |
| Il ne reste plus qu'à ajouter un appel à cette fonction à chacun de nos éléments interactifs. Nous devrons le faire un par un, sans les raccourcis pratiques dont nous disposions en utilisant l'extension pour ajouter plusieurs éléments à la fois. C'est un peu plus compliqué, mais je pense que cela en vaut la peine pour le meilleur résultat final. | Il ne reste plus qu'à ajouter un appel à cette fonction à chacun de nos éléments interactifs. Nous devrons le faire un par un, sans les raccourcis pratiques dont nous disposions en utilisant l'extension pour ajouter plusieurs éléments à la fois. C'est un peu plus compliqué, mais je pense que cela en vaut la peine pour le meilleur résultat final. |
| ••Sélectionnez un élément interactif. | ••Sélectionnez un élément interactif. |
| ••Ouvrez la boîte de dialogue Objet ‣ Propriétés de l'objet. | ••Ouvrez la boîte de dialogue Objet > Propriétés de l'objet. |
| ••Développez la section « Interactivité », si nécessaire. | ••Développez la section « Interactivité », si nécessaire. |
| ••Choisissez le champ correspondant au type d'interactivité que vous souhaitez (généralement « onclick »). | ••Choisissez le champ correspondant au type d'interactivité que vous souhaitez (généralement « onclick »). |
| ••S'il y a déjà du code provenant de l'extension Maquette Web interactive, supprimez-le (il s'agit d'un appel à la fonction InkWeb.moveViewbox()). Nous n'avons plus besoin de cette extension ! | ••S'il y a déjà du code provenant de l'extension Maquette Web interactive, supprimez-le (il s'agit d'un appel à la fonction InkWeb.moveViewbox()). Nous n'avons plus besoin de cette extension ! |
| ••Tapez un appel à la fonction showLayer(), en utilisant l'ID de la couche qui doit être affichée lorsque l'élément est cliqué - par exemple, showLayer("home"). | ••Tapez un appel à la fonction showLayer(), en utilisant l'ID du calque qui doit être affiché lorsque l'élément est cliqué - par exemple, showLayer("home"). |
| ••Répétez l'opération pour chaque élément interactif sur chaque page. Conseil : vous n'avez pas besoin de fermer et de rouvrir la boîte de dialogue, elle se met à jour au fur et à mesure que vous sélectionnez chaque élément. | ••Répétez l'opération pour chaque élément interactif sur chaque page. Conseil : vous n'avez pas besoin de fermer et de rouvrir la boîte de dialogue, elle se met à jour au fur et à mesure que vous sélectionnez chaque élément. |
| |
| Enregistrez le fichier et chargez-le dans votre navigateur. Si vous avez fait tout ce qu'il fallait, vous devriez maintenant disposer d'une maquette interactive qui s'adapte correctement à toutes les tailles d'écran et qui ne souffre pas de la présence d'autres pages. Il a suffi de quelques lignes de JavaScript et d'un seul appel de fonction ajouté à chaque élément interactif. Et pour clarifier, il s'agit d'un remplacement de l'extension Maquette Web interactive, et non d'une amélioration de celle-ci : vous pouvez ajouter ce JS à un nouveau fichier Inkscape pour créer des maquettes interactives sans jamais toucher à l'extension. | Enregistrez le fichier et chargez-le dans votre navigateur. Si vous avez fait tout ce qu'il fallait, vous devriez maintenant disposer d'une maquette interactive qui s'adapte correctement à toutes les tailles d'écran et qui ne souffre pas de la présence d'autres pages. Il a suffi de quelques lignes de JavaScript et d'un seul appel de fonction ajouté à chaque élément interactif. Et pour clarifier, il s'agit d'un remplacement de l'extension Maquette Web interactive, et non d'une amélioration de celle-ci : vous pouvez ajouter ce JS à un nouveau fichier Inkscape pour créer des maquettes interactives sans jamais toucher à l'extension. |
| |
| L'utilisation de l'extension est définitivement plus simple, surtout si vous n'êtes pas à l'aise avec JavaScript. Si vous savez que vous ne devez viser qu'une seule taille d'écran spécifique, c'est probablement l'approche qui vous convient. Mais si vous avez besoin de la flexibilité d'une mise à l'échelle pour vous adapter à n'importe quelle taille d'écran, ou si vous préférez que toutes vos pages soient empilées en couches plutôt que réparties sur le canevas, ces quelques lignes de JS peuvent être exactement ce dont vous avez besoin pour créer une démo interactive adaptée à vos besoins. | L'utilisation de l'extension est définitivement plus simple, surtout si vous n'êtes pas à l'aise avec JavaScript. Si vous savez que vous ne devez viser qu'une seule taille d'écran spécifique, c'est probablement l'approche qui vous convient. Mais si vous avez besoin de la flexibilité d'une mise à l'échelle pour vous adapter à n'importe quelle taille d'écran, ou si vous préférez que toutes vos pages soient empilées en calques plutôt que réparties sur le canevas, ces quelques lignes de JS peuvent être exactement ce dont vous avez besoin pour créer une démo interactive adaptée à vos besoins. |
| |
