| Les deux révisions précédentesRévision précédente | Dernière révisionLes deux révisions suivantes |
| issue185:inkscape [2022/10/04 07:50] – d52fr | issue185:inkscape [2022/10/04 18:13] – auntiee |
|---|
| 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.** | 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 peux 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. | 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 | 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 autres. 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. | 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. | 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. |
| 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). | 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". | 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. | 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. |
| 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. | 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 » (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. | 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 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 page Inkscape réelle 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. | 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. |
| |
| |
| 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. | 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 le deuxième élément de votre sélection. 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. | 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. |
| |
| |
| 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). | 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. | 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. | Lorsque la page se charge dans le navigateur, vous remarquerez probablement qu'une partie de celle-ci est coupée. |
| 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. | 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 d'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. | 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. |
| |
| |
| 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.** | 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 assez facile de transformer une série de croquis au crayon en quelque chose d'assez interactif pour servir de démo de démonstration. 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. | 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. | 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. |
| |
