Halloween semblant se fêter en janvier, il vaut mieux occuper son temps à autre chose, comme refaire les scripts de création des pages photos. Le but étant une meilleure navigation en utilisant des éléments souvent inutilisés de la specification HTML 4. Il y a encore quelques détails a regler, comme enlever les tables, surement pour la prochaine étape.
La première étape est l'ajout de descriptions dans les images, cette description est en RDF et utilise Dublin Core. Pour rajouter d'une façon simple les descriptions dans une série d'images, j'utilise RDFPic, voir les images, et être capable de ne pas taper trente fois la même chose est un avantage certain!
Une fois les descriptions prêtes, il faut maintenant mettre en page tout ça. Je voulais limiter le temps de chargement, donc éviter de mettre trop d'images d'un coup. Avoir 16 vignettes par page permet de tenir dans la majorité des érans. Comme il peut y avoir plusieurs pages de vignettes, j'ai ajoute une barre de navigation en bas. Cette barre utilise les traditionnels "précédent" / "suivant", j'hésite à passer aux numéros de page. Chaque vignette est contenue dans une case qui elle même contient aussi un <p> contenant le titre récupéré dans l'image ainsi qu'un lien vers le RDF contenu dans celle-ci. L'attribut "alt" de la vignette contient la description de l'image, provenant de la description en RDF.
En cliquant sur la vignette, on passe à l'image agrandie. Comme les photos sont en général d'une taille trop importante pour la plupart des écrans, l'image de la page individuelle est en fait une version réduite tenant dans 640x480 pixels. A l'usage, ça semble être une bonne valeur. La description est recopiée de l'image originale et comme dans la page d'index, l'attribut alt est correctement rempli. A noter que le titre répète le titre de la série et rajoute le titre de la photo.
La encore, il y a des barres de navigation. Mais il existe un autre moyen de naviguer dans les photos et les index. Si votre navigateur supporte l'élément <link>, chaque page contient un lien vers la page suivante, la precedente, la première, la dernière, la description et l'index. Les pages d'index elles aussi ont des liens vers les index suivants et precedents, mais aussi vers la page contenant la liste de toutes mes photos. Il est possible aussi d'exploiter ces relations pour definir des groupes de pages.
Une fois imprimée, il est impossible de cliquer sur les liens de navigation. J'ai donc rajouté dans le CSS une directive pour ne pas les afficher lors de l'impression.
@media print {
.navbar {
display: none;
}
}
Évidemment, tout ceci est loin d'étre parfait, je ne suis pas vraiment un designer ;) mais j'espère que cette page pourra donner des idées a d'autres personnes pour encourager l'utilisation plus complète des normes. J'ai déja parlé de l'utilisation de HTTP dans le cas des weblog et autres contenus changeants.
À lire, Photo metadata software/notes de Gerald (en anglais).