| Les deux révisions précédentesRévision précédente | |
| issue185:inkscape [2022/10/04 18:13] – auntiee | issue185:inkscape [2022/10/05 17:29] (Version actuelle) – andre_domenech |
|---|
| 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 » (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. | 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. | 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. |
| 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 ! | 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. | 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. | 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. |
