Interactive Mockup is the only remaining new extension that arrived with version 1.0 for me to discuss in this series. But what I initially thought was going to be a simple topic to cover has thrown up a few questions and issues which will stretch this topic out to more than one article. To start with, though, let’s take a look at this extension, what it does, and how to use it. Web > Interactive Mockup This extension is intended to let you use Inkscape to create user interface mock-ups with some limited interactivity. It could also be used to create a simple slideshow, a basic adventure game, or more. It does this by injecting some simple JavaScript into your document, so the final file has to be loaded into a web browser in order to produce the interactivity suggested by its name. But let’s start with a quick definition: the “interactive” mock-ups I’m referring to here are little more than a series of static images containing clickable regions that let you navigate between them. If you were mocking up a series of dialog boxes to form a “wizard” type of interface, you could use this extension to detect a click on the “forward” and “back” buttons in your images. Each click would switch to another image in the sequence, allowing you to demonstrate how your potential user interface might work before you actually start to code it.
Maquette Web interactive est la seule nouvelle extension arrivée avec la version 1.0 dont je vais parler dans cette série. Mais ce que je pensais initialement être un sujet simple à couvrir a soulevé quelques questions et problèmes qui vont étendre ce sujet à plus d'un article. Pour commencer, jetons un coup d'œil à cette extension, ce qu'elle fait et comment l'utiliser.
Web > Maquette Web interactive
Cette extension est destinée à vous permettre d'utiliser Inkscape pour créer des maquettes d'interface utilisateur avec une interactivité limitée. Elle peut également être utilisée pour créer un diaporama simple, un jeu d'aventure basique, ou plus encore. Pour ce faire, quelques JavaScript simples sont injectés dans votre document, de sorte que le fichier final doit être chargé dans un navigateur Web pour produire l'interactivité suggérée par son nom.
Mais commençons par une définition rapide : les maquettes « interactives » auxquelles je fais référence ici ne sont guère plus qu'une série d'images statiques contenant des régions cliquables qui vous permettent de naviguer entre elles. Si vous créez une série de boîtes de dialogue pour former une interface de type « assistant », vous pouvez utiliser cette extension pour détecter un clic sur les boutons « avant » et « arrière » de vos images. Chaque clic permettrait de passer à une autre image de la séquence, ce qui vous permettrait de montrer comment votre interface utilisateur potentielle pourrait fonctionner avant de commencer à la coder.
Another example is when mocking up a website. Perhaps you’ve got a series of images, one for each page in the final site, created using a design tool or from a scanned sketch, but not yet turned into actual HTML code. Using this extension, you could combine those images into a working demonstration of how the page might operate, complete with clickable menus and links for moving between the different pages. I’m going to use this latter example to show you how this extension operates, by mocking-up a very simple 3-page website. Just make sure you understand that this approach could be used to let you link any series of images together, and isn’t restricted to websites. The reason it’s found in the Extensions ‣ Web submenu is solely because the final result is a file that has to be opened in a web browser in order to work. Let’s start with the main home page for my website. This will be the starting content when the document is loaded into a browser, and will define the physical size for the whole presentation. In this case, I’m going to demo the site using an HD monitor, with the browser set to fullscreen mode (by pressing F11), meaning I’ll have every one of those 1920×1080 pixels to play with. To begin with, therefore, I’ll open the Document Properties and set my document up as follows: Display units: px Page Size: Video HD 1080p (1920 × 1080px) Scale x: 1.0 Viewbox x, y, width, height: 0, 0, 1920, 1080 (these should be set automatically)
Un autre exemple est celui de la création d'un site Web. Vous disposez peut-être d'une série d'images, une pour chaque page du site final, créées à l'aide d'un outil de conception ou à partir d'un croquis scanné, mais pas encore transformées en code HTML réel. En utilisant cette extension, vous pouvez combiner ces images en une démonstration fonctionnelle du fonctionnement de la page, avec des menus cliquables et des liens permettant de se déplacer entre les différentes pages.
Je vais utiliser ce dernier exemple pour vous montrer comment fonctionne cette extension, en créant un site Web très simple de trois pages. Assurez-vous de bien comprendre que cette approche pourrait être utilisée pour vous permettre de lier n'importe quelle série d'images entre elles, et qu'elle n'est pas limitée aux sites Web. La raison pour laquelle elle se trouve dans le sous-menu Extensions ‣ Web est uniquement due au fait que le résultat final est un fichier qui doit être ouvert dans un navigateur Web pour fonctionner.
Commençons par la page d'accueil principale de mon site Web. Ce sera le contenu de départ lorsque le document sera chargé dans un navigateur, et il définira la taille physique de toute la présentation. Dans ce cas, je vais faire la démonstration du site sur un écran HD, avec le navigateur réglé en mode plein écran (en appuyant sur F11), ce qui signifie que je pourrai jouer avec chacun de ces 1920×1080 pixels. Pour commencer, je vais donc ouvrir les propriétés du document et configurer mon document comme suit : Unités d'affichage : px Taille de la page : Vidéo HD 1080p (1920 × 1080px) Échelle x : 1.0 Boîte de visualisation x, y, largeur, hauteur : 0, 0, 1920, 1080 (ces paramètres devraient être définis automatiquement).
The last two items aren’t so important, but ensuring we have a scale value of 1.0 means that we can use specific pixel dimensions in our page design, since there’s a 1:1 mapping between each pixel in our drawing, and the corresponding pixel on-screen once the page is rendered by the browser. Now to add some content to the page, starting with a home page. It won’t win any design awards, but it will do the job for demonstrating this extension (above). The key part of the design is the section at the top right. That’s where I want to have links to navigate between pages. Those are the elements that will become clickable in order to move from page to page in my mock-up. Of course, in order to be able to do this, we actually need some pages to move to! Time to create the second entry in my mock-up: the “About” page. This is where things start to get a little tricky. We need our new page to have the same dimensions as the first one. If we were creating these as completely separate files, that would be simple enough - just create a new document with the same properties as the first. In practice, I’d probably just use File > Save As… on the first document, then edit the content to suit, but either approach would create multiple files, each with the same basic page properties. But this extension doesn’t link between separate documents, so that approach is no good.
Les deux derniers éléments ne sont pas si importants, mais le fait de s'assurer que nous avons une valeur d'échelle de 1,0 signifie que nous pouvons utiliser des dimensions de pixels spécifiques dans notre conception de page, puisqu'il existe une correspondance 1:1 entre chaque pixel de notre dessin et le pixel correspondant à l'écran une fois la page rendue par le navigateur.
Nous allons maintenant ajouter du contenu à la page, en commençant par une page d'accueil. Elle ne gagnera pas de prix de design, mais elle fera l'affaire pour la démonstration de cette extension (ci-dessus).
L'élément clé de la conception est la section en haut à droite. C'est là que je veux avoir des liens pour naviguer entre les pages. Ce sont les éléments qui deviendront cliquables afin de se déplacer d'une page à l'autre dans ma maquette. Bien sûr, pour pouvoir faire cela, nous avons besoin de pages vers lesquelles nous pouvons nous déplacer ! Il est temps de créer la deuxième entrée de ma maquette : la page « À propos ».
C'est là que les choses commencent à se compliquer. Notre nouvelle page doit avoir les mêmes dimensions que la première. Si nous les créions en tant que fichiers complètement séparés, ce serait assez simple - il suffirait de créer un nouveau document avec les mêmes propriétés que le premier. En pratique, je me contenterais probablement d'utiliser Fichier > Enregistrer sous… sur le premier document, puis de modifier le contenu en conséquence, mais l'une ou l'autre de ces approches créerait plusieurs fichiers, chacun avec les mêmes propriétés de base de la page. Mais cette extension ne permet pas de créer des liens entre des documents séparés, donc cette approche n'est pas bonne.
Another sensible method would be to create each image on a separate layer. That way all the images share the same document properties, by definition. But this extension doesn’t work with layers, either. What it actually does is inject some JavaScript that will change the viewBox attribute on the <svg> element. This is an approach that has been discussed in this column in the past, with respect to “SVG sprites” (part 79, in FCM #139). More specifically, the extension actually only changes the first two numbers in the viewBox – the ones that define the top-left corner of the view. The other two numbers – those that define the width and height - remain fixed, so it’s pretty much essential that all our mock-up pages are the same size. I find that the easiest way to do this is to enable the snap-to-page option and then draw a rectangle from the top-left corner of the page to the bottom-right. Alternatively, you could simply draw a rectangle anywhere and then set its width and height to the correct dimensions via the tool control bar. In either case, you want to end up with a rectangle that is the same size as your main document page, but you should then drag it outside of the page boundary. Repeat this for each frame you will require in your mock-up, so that the new ‘pages’ are distributed around the real Inkscape page, and don’t overlap. It doesn’t matter if they’re arranged in a row, column, grid, or randomly placed, so don’t get unnecessarily caught up in the positioning of each page.
Une autre méthode judicieuse consisterait à créer chaque image sur un calque distinct. De cette façon, toutes les images partagent les mêmes propriétés du document, par définition. Mais cette extension ne fonctionne pas non plus avec les calques.
Ce qu'elle fait en fait, c'est injecter du JavaScript qui modifiera l'attribut viewBox de l'élément <svg>. Il s'agit d'une approche qui a déjà été abordée dans cette rubrique par le passé, à propos des « sprites SVG » (la partie 79, dans le FCM n° 139). Plus précisément, l'extension ne modifie en fait que les deux premiers chiffres de viewBox - ceux qui définissent le coin supérieur gauche de la vue. Les deux autres chiffres, ceux qui définissent la largeur et la hauteur, restent fixes. Il est donc essentiel que toutes nos pages de maquette aient la même taille.
Le moyen le plus simple d'y parvenir est d'activer l'option « snap-to-page », puis de tracer un rectangle du coin supérieur gauche de la page au coin inférieur droit. Vous pouvez également dessiner un rectangle n'importe où, puis régler sa largeur et sa hauteur sur les bonnes dimensions via la barre de contrôle des outils. Dans les deux cas, vous devez obtenir un rectangle de la même taille que la page principale de votre document, mais vous devez ensuite le faire glisser en dehors des limites de la page. Répétez cette opération pour chaque image dont vous aurez besoin dans votre maquette, afin que les nouvelles « pages » soient réparties autour de la véritable page Inkscape et ne se chevauchent pas. Peu importe qu'elles soient disposées en ligne, en colonne, en grille ou de manière aléatoire, ne vous souciez pas inutilement du positionnement de chaque page.
Now you can draw the content of each image within the confines of its rectangle. As you are likely to need some sort of background color in your mock-up (even if that color is only white), I suggest giving each rectangle a solid fill and then locking it, or the layer it lives on, to avoid it being accidentally moved when drawing on top of it. Following this approach, the selection of pages in my mock-up website ends up looking like the image on the previous page, bottom right. Now that we have some pages in place, we can start adding a little interactivity using the extension. The first thing I’m going to do is to ensure that the “About” link on the Home page connects to the About page. The extension requires you to have two elements selected: in this case I’ll select the “About” text element on my Home page, then hold Shift as I click on the background rectangle that encloses the About page. With those two items selected, I can click on Extensions > Web > Interactive Mockup, to be presented with this rather underwhelming dialog. As you can see, there’s nothing but a Help tab and an “Action” pop-up. The latter offers various ways in which interacting with the first element in your selection will switch the viewBox to point to the second element in your selection. Most of the time you will probably want to leave this set as “click”. In almost all cases, therefore, there’s nothing for you to do here but to click on the “Apply” button and close the dialog.
Vous pouvez maintenant dessiner le contenu de chaque image dans les limites de son rectangle. Comme vous aurez probablement besoin d'une couleur d'arrière-plan dans votre maquette (même si cette couleur n'est que du blanc), je suggère de donner à chaque rectangle un remplissage solide et de le verrouiller, ou de verrouiller le calque sur lequel il se trouve, pour éviter qu'il ne soit déplacé accidentellement lorsque vous dessinez par-dessus.
En suivant cette approche, la sélection de pages de ma maquette de site Web ressemble à l'image de la page précédente, en bas à droite.
Maintenant que nous avons quelques pages en place, nous pouvons commencer à ajouter un peu d'interactivité en utilisant l'extension. La première chose que je vais faire est de m'assurer que le lien « À propos » sur la page d'accueil se connecte à la page À propos. L'extension exige que deux éléments soient sélectionnés : dans ce cas, je vais sélectionner l'élément de texte « À propos » de ma page d'accueil, puis je maintiendrai la touche Maj tout en cliquant sur le rectangle d'arrière-plan qui entoure la page À propos. Une fois ces deux éléments sélectionnés, je peux cliquer sur Extensions > Web > Maquette Web interactive, pour voir apparaître cette boîte de dialogue plutôt décevante.
Comme vous pouvez le constater, il n'y a rien d'autre qu'un onglet Aide et une fenêtre contextuelle « Action ». Cette dernière propose différentes manières d'interagir avec le premier élément de votre sélection pour faire basculer la viewBox vers son deuxième élément. La plupart du temps, vous voudrez probablement laisser ce paramètre sur « clic ». Dans presque tous les cas, vous n'avez donc rien d'autre à faire que de cliquer sur le bouton « Appliquer » et de fermer la boîte de dialogue.
Nothing will have changed visibly in your page, but the extension has added some JavaScript to the first element in your selection. Open the Object > Object Properties dialog and expand the “Interactivity” section; you’ll notice a small piece of JavaScript has been added to one of the fields (you may also notice that the list of fields available in this dialog maps suspiciously closely to the options in the pop-up within the extension dialog). I’ll look at the JavaScript itself in future, but for now it’s sufficient to know that this is what is ultimately responsible for changing the viewBox when the first selected element is interacted with (i.e. clicked on, in this case). At this point you can save the file as a normal Inkscape SVG document and load it directly into a web browser. Browsers don’t actually make this capability terribly obvious these days, but you can either drag the file directly into the browser window, or hit Ctrl-O to bring up an Open File dialog, just as you might in any other program. When the page loads in the browser you’ll probably notice that some of it is cut-off.
Rien n'aura visiblement changé dans votre page, mais l'extension a ajouté un peu de JavaScript au premier élément de votre sélection. Ouvrez la boîte de dialogue Objet > Propriétés de l'objet et développez la section « Interactivité » ; vous remarquerez qu'un petit morceau de JavaScript a été ajouté à l'un des champs (vous remarquerez également que la liste des champs disponibles dans cette boîte de dialogue est étrangement proche des options de la fenêtre contextuelle de la boîte de dialogue de l'extension).
J'examinerai plus tard le JavaScript lui-même, mais, pour l'instant, il suffit de savoir que c'est ce qui est responsable de la modification de la boîte de vue lorsque le premier élément sélectionné fait l'objet d'une interaction (c'est-à-dire lorsqu'on clique dessus, dans ce cas). À ce stade, vous pouvez enregistrer le fichier comme un document Inkscape SVG normal et le charger directement dans un navigateur Web. Les navigateurs ne rendent pas cette possibilité très évidente de nos jours, mais vous pouvez soit faire glisser le fichier directement dans la fenêtre du navigateur, soit appuyer sur Ctrl-O pour faire apparaître une boîte de dialogue Ouvrir un fichier, comme vous le feriez dans n'importe quel autre programme.
Lorsque la page se charge dans le navigateur, vous remarquerez probablement qu'une partie de celle-ci est coupée.
This might seem a little strange, given that we’re working with a scalable image, but it boils down to the fact that we set a specific width and height for the file, in pixels, in the Document Properties dialog. You may recall that the intention was for it to fit the dimensions of an HD screen when the browser is switched to fullscreen mode. Press F11, therefore, and our mock web page fits perfectly! Now we can test the interactivity. Click on the “About” link and, as expected, the view switches to the relevant mock page in our document. At this point, however, no other links have been set up, so we can’t click the “Home” button to return to the previous view. Neither can you use the Back button (or keyboard shortcut) within the browser, since the URL hasn’t actually changed – the JavaScript has just dynamically updated the content of our page in order to set the new viewBox. Let’s return to Inkscape and fix some of these issues by adding more links. First we need to add a connection going from the “About” link on the Contacts page to the rectangle of the About page itself, in just the same way that we did with the previous link from the Home page. With that in place it’s now possible to jump to the About page from either of the others. As this shows, it’s okay for the same element to be the target of several different links.
Cela peut sembler un peu étrange, étant donné que nous travaillons avec une image évolutive, mais cela revient à dire que nous définissons une largeur et une hauteur spécifiques pour le fichier, en pixels, dans la boîte de dialogue Propriétés du document. Vous vous souvenez peut-être que l'objectif était de faire en sorte que le fichier s'adapte aux dimensions d'un écran HD lorsque le navigateur passe en mode plein écran. Appuyez donc sur F11, et notre page Web fictive s'adapte parfaitement !
Nous pouvons maintenant tester l'interactivité. Cliquez sur le lien « À propos » et, comme prévu, la vue passe à la page fictive correspondante de notre document. À ce stade, cependant, aucun autre lien n'a été configuré, de sorte que nous ne pouvons pas cliquer sur un bouton « Accueil » pour revenir à la vue précédente. Vous ne pouvez pas non plus utiliser le bouton Retour (ou le raccourci clavier) dans le navigateur, puisque l'URL n'a pas réellement changé ; le JavaScript a simplement mis à jour de manière dynamique le contenu de notre page afin de définir la nouvelle viewBox.
Revenons à Inkscape et corrigeons certains de ces problèmes en ajoutant d'autres liens. Tout d'abord, nous devons ajouter une connexion allant du lien « À propos » de la page Contacts au rectangle de la page À propos elle-même, de la même manière que nous l'avons fait avec le lien précédent de la page Accueil. Une fois ce lien en place, il est maintenant possible de passer à la page À propos depuis l'une des autres pages. Comme le montre cet exemple, un même élément peut être la cible de plusieurs liens différents.
We also want both the Home and About pages to link to the Contacts page. We could connect each link item individually, as we’ve been doing so far, but the extension offers a small shortcut that can help us. If you call the extension with more than two objects selected, the last one is used as the target, and all the others are linked to it. This means that we just have to select the first “Contact” element (on the Home page), then hold Shift while we click on the second one (on the About page), and continue to hold it while we click on the target background rectangle for the Contacts page. With all three items selected we’ll now use another little shortcut, offered by Inkscape itself. We know we don’t have to change the single parameter within the extension dialog, so we can just use Extensions > Previous Extension to run the extension directly, without having to interact with the dialog. The JavaScript is added to both our menu links as one step. This approach makes it quick and easy to finish all the remaining links between our three pages. With that done, all that remains is to save the file, reload it in the browser, switch to full-screen (F11) if needed, and click the fake links to switch between all three pages of our mocked-up website. Pretty cool stuff, right?
Nous souhaitons également que les deux pages Accueil et À propos soient liées à la page Contacts. Nous pourrions connecter chaque élément de lien individuellement, comme nous l'avons fait jusqu'à présent, mais l'extension offre un petit raccourci qui peut nous aider. Si vous appelez l'extension avec plus de deux objets sélectionnés, le dernier est utilisé comme cible, et tous les autres sont liés à lui. Cela signifie qu'il nous suffit de sélectionner le premier élément « Contact » (sur la page d'accueil), puis de maintenir la touche Maj pendant que nous cliquons sur le deuxième élément (sur la page À propos), et de continuer à la maintenir pendant que nous cliquons sur le rectangle d'arrière-plan cible de la page Contacts.
Une fois les trois éléments sélectionnés, nous allons maintenant utiliser un autre petit raccourci, proposé par Inkscape lui-même. Nous savons que nous n'avons pas à modifier le paramètre unique dans la boîte de dialogue de l'extension, nous pouvons donc simplement utiliser Extensions > Extension précédente pour exécuter l'extension directement, sans avoir à interagir avec la boîte de dialogue. Le JavaScript est ajouté à nos deux liens de menu en une seule étape. Cette approche permet de terminer rapidement et facilement tous les liens restants entre nos trois pages.
Cela fait, il ne reste plus qu'à enregistrer le fichier, à le recharger dans le navigateur, à passer en plein écran (F11) si nécessaire, et à cliquer sur les faux liens pour passer d'une page à l'autre de notre site Web fictif. C'est plutôt cool, non ?
Of course this is all well and good if you’ve created your mock-ups within Inkscape. You can easily select the individual objects that are to act as triggers. But what if your “page” is actually a bitmap image, exported from a paint program or scanned from a sketch on a napkin? Or it might be a more complex Inkscape image, with your objects nested deeply inside a range of groups, making it tricky to select both the trigger and the target element at the same time. In those cases, there’s a simple little trick that can help you out: just draw fresh elements over the top of your page which will act as your triggers and/or destinations. Start with a simple shape with a colored fill that covers your trigger item completely. It doesn’t even need to be a rectangle, if your design calls for something more complex. Give it a little opacity so you can see what you’re doing as you start to add more of them to cater for every possible link in your mock-up. Use the extension to add the interactivity then, just before saving, set the opacity way down on these new shapes. You can set it to zero to ensure they’re not visible on the page at all, but that does make it trickier to re-select them for editing later. A useful trick is to set their opacity to 1: this is usually so transparent that there’s no hint of them on the final page, but they’re much easier to select in Inkscape itself if they need to be modified in future.
Bien sûr, tout cela est très bien si vous avez créé vos maquettes dans Inkscape. Vous pouvez facilement sélectionner les objets individuels qui serviront de déclencheurs. Mais qu'en est-il si votre « page » est en fait une image bitmap, exportée d'un programme de peinture ou scannée à partir d'une esquisse sur une serviette de table ? Ou bien il s'agit d'une image Inkscape plus complexe, avec des objets imbriqués profondément dans une série de groupes, ce qui rend difficile la sélection simultanée du déclencheur et de l'élément cible. Dans ces cas-là, il existe une petite astuce simple qui peut vous aider : dessinez simplement des éléments frais en haut de votre page qui serviront de déclencheurs et/ou de destinations.
Commencez par une forme simple avec un remplissage coloré qui couvre complètement votre élément déclencheur. Il n'est même pas nécessaire que ce soit un rectangle, si votre conception exige quelque chose de plus complexe. Donnez-lui un peu d'opacité pour que vous puissiez voir ce que vous faites lorsque vous commencez à en ajouter pour couvrir tous les liens possibles dans votre maquette. Utilisez l'extension pour ajouter l'interactivité puis, juste avant de l'enregistrer, réduisez considérablement l'opacité de ces nouvelles formes. Vous pouvez la régler sur zéro pour qu'elles ne soient pas du tout visibles sur la page, mais il sera alors plus difficile de les resélectionner pour les modifier ultérieurement. Une astuce utile consiste à régler leur opacité sur 1 : cette valeur est généralement si transparente qu'elles ne sont pas visibles sur la page finale, mais elles sont beaucoup plus faciles à sélectionner dans Inkscape si elles doivent être modifiées ultérieurement.
With this approach, it’s fairly trivial to turn even a series of pencil sketches into something that’s interactive enough to work as a proof-of-concept demo. Want to improve the UI of your favourite Open Source application? Before wading in with a code editor, you could take some screenshots, edit them in The GIMP, and use this extension to test out your ideas on other users first. I’m sure you can see how this simple extension makes it very quick and easy to create interactive mock-ups. For a lot of situations, this may be all that you need, but next time I’ll take a look at some of the problems presented by such a simple system, and how they can be addressed with just a little extra effort.
Avec cette approche, il est plutôt facile de transformer une série de croquis au crayon en quelque chose d'assez interactif pour servir de démo comme preuve du concept. Vous voulez améliorer l'interface utilisateur de votre application Open Source préférée ? Avant de vous lancer dans un éditeur de code, vous pourriez faire quelques captures d'écran, les modifier dans GIMP et utiliser cette extension pour tester vos idées sur d'autres utilisateurs.
Je suis sûr que vous pouvez voir comment cette simple extension rend très rapide et facile la création de maquettes interactives. Dans de nombreuses situations, c'est peut-être tout ce dont vous avez besoin, mais, la prochaine fois, j'examinerai certains des problèmes posés par un système aussi simple et comment ils peuvent être résolus avec un petit effort supplémentaire.