D'abord la démo par ici.
Avant de commencer, faites une copie de sauvegarde de votre dossier LibraryBox de votre clef USB, sinon, travaillez en local avant de recopier vers la clef. >> lire mon article sur Wamp.
Et n'oubliez pas, l'informatique, c'est comme la cuisine, si on respecte la recette et les techniques, on finit par se régaler !
Bon je déteste cuisiner, mais j'aime bien la bidouille informatique.
Le principe est de proposer au public une série de "post-its" (des peintures pour ma part, tombées dans le domaine public). Chacun pourra cliquer sur un post-it est accéder à la fiche descriptive de l'oeuvre, avec un lien vers un zoom ou un download.
Ici je vous propose le même principe qu'avec les Vidéos, j'utilise Ant Movie Catalog.
Ci-dessous les étapes à suivre pour créer un catalogue d'images pour la LibraryBox.
Voici mon exemple :
Je crée le catalogue depuis Ant Movie Catalog
J'utilse Bootply pour que ma page soit adaptative à toute taille d'écran (Responsive Web)
ETAPE 1 : installation de Ant Movie Catalog
On télécharge AntMovieCatalog et on l'installe :
Ant Movie Catalog : http://www.antp.be/software/moviecatalog/fr
Version 4.2.0.2 -Programme complet avec installation (recommandé)
J'évite la version portable.
ETAPE 2 : Prise en main de Ant Movie Catalog
Je ne vais pas faire un cours la-dessus, il y a un très bon blog pour cela, merci à l'auteur : http://lapensinemutine.eklablog.com/ok-computer-c23405117/1
ETAPE 3 : Exporter le catalogue d'images
Ant movie Catalog est fourni avec des modèles HTML pour REMPLIR votre catalogue.
Il y a aussi des modèles d'exportation, ce sont eux qui nous intéressent, plus particulièrement celui que je mettrai à votre disposition plus loin.
Donc si tout va bien vous avez appris à remplir des champs, ajouter des images, et donc créer votre premier catalogue d'images.
Passons à l'étape suivante : exporter un fichier html pour la LibraryBox.
Utiliser le bouton Exporter (CTRL+E) pour utiliser le bouton vert d'importation de la barre des menus :
Puis sélectionnez HTML dans la fenêtre qui vient de s'ouvrir. Vous obtenez le fichier par défaut. C'est lui que j'ai modifié à l'aide de Bootply pour obtenir une page adaptative à toutes tailles d'écran (responsive web) : smartphone, tablette, pc bureau.
Je détaillerai dans l'étape 4, ce dont a besoin mon modèle.
Puis nous exporterons notre catalogue que j'ai nommé catalog_image.html dans la clef usb de la LibraryBox dans LibraryBox\Content\Shared\image, dossier que j'ai créé.
Je copie ici toutes mes images du catalogues d'images.
ETAPE 4 : Mon modèle mod_cat_image.html
Suivez scrupuleusement mes instructions et tout devrait bien se passer. Respectez la casse des mots...
J'ai d'abord listé les informations que je souhaitai afficher, puis j'ai paramétré mon formulaire Ant Movie Catalog avec de nouveaux champs personalisés.
Pour ajouter des champs personalisés dans le logiciel AMC (voir le blog de La pensine mutine : http://lapensinemutine.eklablog.com/ok-computer-c23405117/1)
Si vous souhaitez obtenir mon catalogue, je vous invite à créer les mêmes champs personnalisés, puis à l'étape 5, récupérer mes fichiers.
Respectez bien les noms des étiquetttes, car ce sont eux qu'iront chercher les fichiers de paramétrages.
Mes champs ajoutés sont :
NomFichier
NomFichierVignette
Date
Lieu d'exposition
Source de la description
Ci-dessous, les champs utilisés.
NomdeFichier : Ici le lien vers la taille réelle de l'image.
NomFichierVignette : mes images au format vignette
Date : date qui peut être approcimative, donc j'ai préféré la personalisé plutôt que d'utiliser celle du logiciel.
Auteur
Lieu d'exposition
Source de la description
Quand vous aurez fini de tout paramétrer, rien ne vous empêchera d'ajouter vos propres champs personalisés et de les intégrer dans votre modèle HTML, depuis le menu "Insérer une balise spéciale/Champs personalisés" de Ant Movie Catalog.
ETAPE 6 : création de votre propre modèle
J'ai pas mal potassé Bootstrap et utilisé Bootply pour créer mon modèle, puis, par de simples copier-collers de l'en-tête et du pied de page de Librarybox\content\index.html, j'ai finalisé mon modele.
ETAPE 7 : Simplifiez-vous la vie en utilisant mon modèle
Prés-requis : maîtrise de Ant Movie Catalog (facile), d'un outil de décompression de fichier,
et connaître les principes de l'explorateur de fichier, du copier-coller.
Je vous propose d'installer les fichiers ci-dessous directement, à vous ensuite d'y ajouter votre touche personnelle (couleur par exemple, champs personnaliés...) :
Les images que j'ai utlisée dans mon exemple sont à copier sur votre clef USB dans LibraryBox\Content\Shared\image (dossier à créer), vous pouvez les récupérer sur le site du musée https://www.rijksmuseum.nl/
Le fichier zippé suivant correspond aux vignettes des peinture récupérées sur le site du musée.
Décompressez ces vignettes au même endroit que les images à taille réelle, c'est à dire ici : LibraryBox\Content\Shared\image.
J'ai utilisé une nouvelle icône "image.ico" à copier dans LibraryBox\Content\img >> à récupérer ici (il s'agit de l'icône qui apparaît dans l'onglet de votre navigateur.
Mon catalogue, il se divise en deux parties : mon_catalog_image.xml et mon_catalog_image_indviduel, sont à placer où vous le souhaitez sur votre PC, puis dans Ant Movie Catalog, faites fichier/ouvrir et allez chercher le premier fichier. (attention il est compressé donc à décompresser).
Le 1er correspond à l'affichage de la première page, composée de "post-its"
Le second fichier correspond à chaque fiche descriptive des images.
Voilà c'est presque fini !
Ouvrez Ant Movie Catalog, ouvrez le fichier mon_catalogue_image.xml. Il se peut que Ant Movie Catalog ne trouve pas les vignettes, il suffit de lui indiquer le chemin en allant chercher les vignettes dans la clef usb (Content/Shared/image).
Cliquer sur le bouton Exporter (CTRL+E), puis cliquez sur le bouton Html dans la fenêtre qui vient de s'ouvrir. Si votre fichier "modèle" (mod_cat_image.html) n'apparaît pas, il faut utiliser le bouton "parcourir" pour aller le chercher (simplifiez-vous la vie en enregistrant son chemin dans les préférences/fichiers de Ant Movie Catalog.
Cliquez enfin sur Exporter en bas à droite et indiquer lui le chemin LibraryBox\Content\ et le nom du fichier catalog_image.html, SURTOUT PAS INDEX.HTML, sinon, vous allez écraser la page d'acceuil de la LibraryBox
Ajoutez votre chemin Image dans le fichier LibraryBox\Content\index.html pour qu'il pointe vers catalog_image.html.
Enfin, ouvrez votre page http://LibraryBox.lan
Alors alors ??? ça a marché ???
Si oui tant mieux, sinon, je peux essayer de vous aider ! @apallois
(j'attends vos remarques sur ma doc, il y a sûrement des choses qui ne marcheront pas, c'est de l'informatique, ne l'oublions pas)