| Les deux révisions précédentesRévision précédente | |
| issue186:inkscape [2022/11/01 18:10] – 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. |
| |
| |
| 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. | 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 toutes 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. | 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). | 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). |
| 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 »). |
