Last month, I looked at the Web > Interactive Mockup extension using a simple website mock-up. I demonstrated how you can use this to create a demo that works well on a specific screen size. But even though SVG files are scalable by their very nature, this extension doesn’t do a great job of producing demos that will work across a variety of devices. This is a limitation we’ll try to address this month, following on with the same file I created last time, so make sure you’ve read last month’s column before pressing on with this one. First, I need to manage your expectations. Although we’ll be trying to make our presentation work better on different screen sizes, there is a limit to what can be done with this simple extension or the small amount of code we’ll be writing. All we’re aiming to do is to make the output scalable – we’re not going to be creating a fully responsive mock-up where parts of the design move around or change appearance in order to suit mobile, tablet, and PC displays from a single file. Think of it instead as creating a file that will work on both a laptop and desktop PC, even if the screens are slightly different sizes.
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.
Let’s begin by exposing the problem we have. Last month we created a mock-up that was specifically sized at 1920px × 1080px – the dimensions of a high-definition screen. To display at that size we loaded the file into a web browser and pressed the F11 key in order to remove the browser UI and render the content full-screen. But let’s see what the same file looks like before the F11 button is pressed, when the available resolution for the SVG content is smaller. Vertically we can no longer see the bottom of the page. The available space to draw the image has been reduced by the browser’s UI, by the window’s title bar, and by the top and bottom panels of my Mate desktop environment. Horizontally all the content fits, because the browser isn’t showing any scrollbars and the window theme has thin borders, so almost the whole width of the monitor is available when drawing the content. If I were to resize the window, however, or open the developer tools to one side, the right-hand side of the image would be cut off.
Commençons par exposer le problème que nous rencontrons. Le mois dernier, nous avons créé une maquette spécifiquement dimensionnée à 1920 px × 1080 px - les dimensions d'un écran haute définition. Pour afficher cette taille, nous avons chargé le fichier dans un navigateur Web et appuyé sur la touche F11 pour supprimer l'interface utilisateur du navigateur et afficher le contenu en plein écran. Mais voyons à quoi ressemble le même fichier avant d'appuyer sur la touche F11, lorsque la résolution disponible pour le contenu SVG est plus petite.
Verticalement, nous ne pouvons plus voir le bas de la page. L'espace disponible pour dessiner l'image a été réduit par l'interface utilisateur du navigateur, par la barre de titre de la fenêtre et par les panneaux supérieur et inférieur de mon environnement de bureau Mate.
Horizontalement, tout le contenu tient, parce que le navigateur n'affiche pas de barres de défilement et que le thème de la fenêtre a des bords fins, de sorte que presque toute la largeur de l'écran est disponible pour dessiner le contenu. Cependant, si je devais redimensionner la fenêtre ou ouvrir les outils de développement d'un côté, le côté droit de l'image serait coupé.
To make it easier to experiment with different screen sizes, we’re going to use the browser’s developer tools to simulate the page’s behaviour across a range of screen sizes. These instructions are for Firefox, but all modern browsers have similar tools available, and even the keyboard shortcuts tend to be common between them. • Open the Developer Tools via the menu, or by pressing F12. • Switch to Responsive Design Mode using the button at the top of the developer tools (it looks like a couple of rectangles, representing a phone and a tablet), or by pressing Ctrl-Shift-M. • The screen content should switch to some sort of mobile view. You can use the controls at the top to select specific devices to emulate, and to switch between landscape and portrait mode. For our purposes, however, just drag the handle at the bottom-right corner of the screen around to quickly try the page in various sizes and aspect ratios. On Chrome and Chromium, the handle may not be visible: in that case you first need to select “Responsive” from the pop-up menu at the top of the page area.
Pour faciliter le test avec différentes tailles d'écran, nous allons utiliser les outils de développement du navigateur pour simuler le comportement de la page sur une gamme de tailles d'écran. Ces instructions concernent Firefox, mais tous les navigateurs modernes disposent d'outils similaires et même les raccourcis clavier tendent à être communs à tous. ••Ouvrez les Outils du développeur via le menu ou en appuyant sur F12. ••Passez en mode Vue adaptative à l'aide du bouton situé en haut des outils de développement (il ressemble à deux rectangles, représentant un téléphone et une tablette), ou en appuyant sur Ctrl-Maj-M. ••Le contenu de l'écran devrait basculer vers une sorte de vue mobile.
Vous pouvez utiliser les contrôles en haut de l'écran pour sélectionner les appareils spécifiques à émuler et pour passer du mode paysage au mode portrait. Cependant, pour nos besoins, il suffit de faire glisser la poignée située dans le coin inférieur droit de l'écran pour essayer rapidement la page dans différentes tailles et différents rapports d'aspect. Sur Chrome et Chromium, la poignée peut ne pas être visible : dans ce cas, vous devez d'abord sélectionner « Responsive » dans le menu contextuel situé en haut de la zone de la page.
Now it should be pretty clear that the content of the file is not scaling to suit the window, and is being cut off along the right or the bottom (or both) depending on the size of the content area. The reason for this is pretty straightforward. Inkscape requires us to specify a page size when we create a document, and in this case we set it to our target size of 1920px × 1080px. When loading the image into a web browser, however, it’s trying to honour those dimensions still, meaning that if the available document size isn’t large enough, the excess will just get cut off. What we need is to replace the width and height in the file with something more dynamic – something like “100%” or “auto”. Or even to remove those fixed values altogether and just let the browser do the right thing. Unfortunately none of these approaches work within Inkscape’s Document Properties dialog.
Il est clair que le contenu du fichier ne s'adapte pas à la fenêtre et qu'il est coupé à droite ou en bas (ou les deux) en fonction de la taille de la zone de contenu.
La raison de ce phénomène est assez simple. Inkscape nous demande de spécifier une taille de page lorsque nous créons un document et, dans ce cas, nous l'avons fixée à notre taille cible de 1920 px × 1080 px. Toutefois, lors du chargement de l'image dans un navigateur Web, Inkscape essaie de respecter ces dimensions, ce qui signifie que si la taille du document disponible n'est pas suffisante, l'excédent sera coupé. Ce qu'il faut, c'est remplacer la largeur et la hauteur dans le fichier par quelque chose de plus dynamique - quelque chose comme « 100 % » ou « auto ». Ou même de supprimer complètement ces valeurs fixes et de laisser le navigateur faire ce qu'il faut. Malheureusement, aucune de ces approches ne fonctionne dans la boîte de dialogue des propriétés du document d'Inkscape.
Although “%” appears as a unit in many of Inkscape’s unit pickers, the size pop-up in the Document Properties dialog isn’t one of them. Don’t get fooled by the “pc” unit – that’s “picas” (1/8th of an inch). Trying to clear the Width or Height fields, or typing “auto” into them, results in them being populated with a value of 0.00001 instead. Typing “100%”, with the units appended to the number, just gets converted to a value of 100, using whatever units are selected in the pop-up. Although we can’t set the values we want via the Document Properties dialog, there are other options open to us. If you’re familiar with editing XML or HTML then you could load the SVG file into a text editor and remove or change the “width” and “height” attributes on the <svg> element directly. Alternatively you can achieve the same via Edit ‣ XML Editor, by selecting the top entry in the left-hand pane (the <svg> element), and then editing the attributes in the other pane. Both these approaches work, but they also have a drawback. If you have reason to go into the Document Properties dialog and edit other fields in there, you may find that these attributes return with their original values, leaving you playing a constant game of cat-and-mouse, having to remember to check or edit them just before saving each time you edit the file.
Bien que « % » apparaisse comme une unité dans de nombreux sélecteurs d'unités d'Inkscape, la fenêtre pop-up de taille dans la boîte de dialogue Propriétés du document n'en fait pas partie. Ne vous laissez pas berner par l'unité « pc » - il s'agit de « picas » (1/8e de pouce). Si vous essayez d'effacer les champs Largeur ou Hauteur, ou si vous tapez « auto » dans ces champs, la valeur 0,00001 y est remplie. La saisie de « 100 % », avec les unités ajoutées au nombre, est convertie en une valeur de 100, en utilisant les unités sélectionnées dans la fenêtre contextuelle.
Bien que nous ne puissions pas définir les valeurs que nous souhaitons via la boîte de dialogue Propriétés du document, d'autres options s'offrent à nous. Si vous êtes familier avec l'édition en XML ou en HTML, vous pouvez charger le fichier SVG dans un éditeur de texte et supprimer ou modifier directement les attributs « width » et « height » de l'élément <svg>. Vous pouvez également réaliser la même chose via Édition ‣ Éditeur XML, en sélectionnant l'entrée supérieure dans le volet de gauche (l'élément <svg>), puis en modifiant les attributs dans l'autre volet.
Ces deux approches fonctionnent, mais elles ont aussi un inconvénient. Si vous avez des raisons d'aller dans la boîte de dialogue Propriétés du document et d'y modifier d'autres champs, vous pouvez constater que ces attributs reviennent à leurs valeurs d'origine, vous laissant jouer constamment au jeu du chat et de la souris, en ayant à vous rappeler de les vérifier ou de les modifier juste avant de faire une sauvegarde, chaque fois que vous modifiez le fichier.
Instead I propose a more elegant solution. We know Inkscape wants some ‘real’ units to define its page size. But we also know that we want to change those units to something more abstract when the page is viewed in a web browser. My solution, therefore, is to dynamically make that change when the image is loaded into the browser, by including a small snippet of JavaScript in the Inkscape file. Don’t worry, it’s not as tricky as it sounds… • Open File ‣ Document Properties. • Switch to the “Scripting” tab. • Within that, switch to the “Embedded scripts” tab. • There will probably already be an entry for “inkwebjs” which you can ignore. • Click on the “+” button to create a new embedded script. It will appear in the list with a random ID. • Select the new entry in the list. • Put the cursor into the “Content” field, then enter the lines of code below.
À la place, je vous propose une solution plus élégante. Nous savons qu'Inkscape veut des unités « réelles » pour définir la taille de sa page. Mais nous savons aussi que nous voulons changer ces unités en quelque chose de plus abstrait lorsque la page est visualisée dans un navigateur Web. Ma solution consiste donc à effectuer ce changement de façon dynamique lorsque l'image est chargée dans le navigateur, en incluant un petit bout de JavaScript dans le fichier Inkscape. Ne vous inquiétez pas, ce n'est pas aussi compliqué que ça en a l'air… ••Ouvrez le fichier ‣ Propriétés du document. ••Passez à l'onglet « Programmation ». ••Dans cet onglet, basculez vers l'onglet « Programmes intégrés ». ••Il y aura probablement déjà une entrée pour « inkwebjs » que vous pouvez ignorer. ••Cliquez sur le bouton « + » pour créer un nouveau script intégré. Il apparaîtra dans la liste avec un ID aléatoire. ••Sélectionnez la nouvelle entrée dans la liste. ••Placez le curseur dans le champ « Contenu », puis entrez les lignes de code ci-dessous.
The code itself consists of two nearly identical lines. We need to access the <svg> element first: since this is the main container for the whole file, it can be accessed as “document.documentElement” in JS (make sure you type in the right case). We then need to call the setAttribute() method, telling it the name of the attribute we wish to set or update (“width” or “height”), together with the new value it should have (“100%”). The complete code, therefore, looks like this: document.documentElement.setAttribute(“height”, “100%”); document.documentElement.setAttribute(“width”, “100%”); Because that code isn’t inside a function, it will automatically run when the page loads in the browser. Job done, and we don’t need to keep remembering to adjust any values each time we save an edit to the file. 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 :
document.documentElement.setAttribute(“height”, “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.
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).
The reason for this is that our new width and height values tell the browser how to size the main content (the bit inside the viewBox), but the browser will happily render anything outside that area, if there’s space on the screen to do so. We’re simply seeing the parts of our document that fall outside the current viewBox region. There’s an obvious and easy fix for this: just move the pages further apart in the original document. If they’re way outside the bounds of the viewBox then they’re far less likely to appear on screen when they shouldn’t. This is, of course, something of a band-aid. Although it works in most practical cases, there will always be some extreme aspect ratio which is sufficient for the other pages to just creep in at the edge. For most situations it’s probably good enough, but it would be better if we could have a solution that caters for all cases. 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 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.
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.
To simplify the code we have to write, we’ll also move all the layers back onto the canvas, stacking them on top of each other. That means you’ll have to turn them on and off in order to edit the content, but it also means our JS code only has to deal with the visibility of the layers, not with also moving the viewBox around. The code itself is a little more complex than the two lines we created earlier, though not by much. We’ll want a function that accepts a layer ID, and which turns off all of the layers before turning on the one we’ve provided. We’ll also need to call that function when the page loads to ensure the first layer is visible. Finally we’ll call that function from each of the “interactive” elements in our mock-up, by attaching the function call to an onclick event or one of the other interactivity events we’ve seen before. 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 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 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 (montré ci-dessous - encore une fois, rappelez-vous qu'il est sensible à la casse).
The first line in the body of this function uses the querySelectorAll() method to search the document for any elements that match the supplied CSS selector. The gobbledegook in quotes actually means “find any <g> elements that have an attribute called ‘groupmode’ (in any namespace), with a value of ‘layer’, but only if they’re an immediate child of an <svg> element”. This is good enough to pull out only our top-level layers, without accidentally catching any sub-layers or other <g> elements. The second line then iterates over the collection we’ve just created, hiding each of them by setting their CSS “display” property to “none”. The last two lines are similar, but only deal with a single element. This time we use querySelector() (without the “All”) to just find an element with an id that matches the one we’ve provided. In CSS terms an ID starts with a “#” character, so we’ll add that to construct the selector, meaning we can just supply a page name, such as “home”, rather than having to pass “#home”. The last line sets the CSS display property for this one element back to “inline” in order to make it visible. Now we need to add another line that will call this function to make one layer visible by default when we load the file into the browser. This needs to happen after a short delay (we’re using 100ms) to give the page a chance to load and settle down before we start poking with it. Append a line like this at the end, after the closing curly brace, replacing “home” with the name of your own initial layer. setTimeout(() => showLayer("home"), 100);
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.
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.
setTimeout(() => showLayer("home"), 100);
To avoid any visible glitching, it’s also worth ensuring that your default page is the topmost layer within Inkscape, and is not hidden. Now all that remains is to add a call to this function to each of our interactive elements. We’ll have to do this one-by-one, without the convenient shortcuts we had when using the extension for adding multiple items at once. That makes it a little more fiddly, but I think it’s worth it for the better end result. • Select an interactive element. • Open the Object ‣ Object Properties dialog. • Expand the “Interactivity” section, if necessary. • Choose the field for the type of interactivity you want (usually “onclick”). • If there’s already code in there from the Interactive Mockup extension, remove it (this will be a call to the InkWeb.moveViewbox() function). We don’t actually need anything from this extension any more! • Type in a call to the showLayer() function, using the ID of the layer that should be displayed when the element is clicked – e.g. showLayer(“home”) • 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 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. ••Sélectionnez un élément interactif. ••Ouvrez la boîte de dialogue Objet > Propriétés de l'objet. ••Développez la section « Interactivité », si nécessaire. ••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 ! ••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.
Save the file and load it into your browser. If you’ve done everything correctly you should now have an interactive mock-up that scales correctly for any screen size, and doesn’t suffer from other pages peeking into view. All it took was a few lines of JavaScript, and a single function call added to each interactive element. And to clarify, this is a replacement for the Interactive Mockup extension, not an enhancement of it: you can add this JS to a new Inkscape file to create interactive mock-ups without ever going near the extension. Using the extension is definitely simpler, especially if you’re not comfortable with JavaScript. If you know you only have to target one specific screen size, then that’s probably the approach for you. But if you need the flexibility of scaling to suit any screen size, or prefer to keep all your pages stacked in layers rather than distributed across the canvas, these few lines of JS may be just what you need to create an interactive demo that suits your needs.
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 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.