Documentation technique et guide de gestion
pour les album de PhotoTourFL
Pas besoin de continuer si on les fonctionnalités de Flickr ou Picasa vous suffisent pour publier des albums photos.
Le dispositif photoTourFL présente des photos, en y intercalant au besoin des pages( html),
agrémente la présentation de la page index : introduction, bas
de page, possibilité de compléter la bannière,
visualiser des panoramas qui se déplacent dans l'écran...
la possibilité de personnaliser l'index avec un éditeur html.
L'organisation des photos est faciltée par le groupement en "séries" avec des fonctionnalités
de création de séries à partir des mots-clefs, séries ultérieurement personnalisables
de déplacement de photos entre séries, de séries entre albums, de création scission, regroupement de séries
et de fonctionnaltés diverses pour ajouter les photos.
Les albums peuvent être publiés sur des sites privés ou à partir de
simple répertoire (sur clé USB par exemple )
et sans utiliser Flash (because Iphone) ni un serveur web.
Table des matières
Généralités
Vue générale des
repertoires, sous répertoires et fichiers
Vue
générale de l'utilisation
Précision
sur les fichiers et les photos
Mise en page de
l'index de l'album
Précisions sur les articles
Les 3 modes de présentation des planches de l'index ; mono, ouvert et onglets
Comment ...
installer les outils sur son PC et publier
créer une collection, créer un album
mettre à jour (MAJ) la mise en page d'un album
menu principal de mise à jour
zones éditables
menu associé à une photo
menu associé à une Série
récapitulatif : organiser les photos avec les séries
ajouter des photos
modification par l'utilisateur (via mail)
faire un album simple
personnaliser la présentation d'un album
Detail du code
Historique
Généralités
Vue générale des repertoires, sous
répertoires et fichiers haut
page
Une "collection"
correspond à un répertoire et comprend plusieurs "albums"
qui correspondent chacun à un sous-répertoire.
La "collection"
a généralement une page index général (fichier index.htm). Chaque album a normalement un bouton de retour à cette page.
Il y a aussi divers autres éléments pour la navigation entre
les albums ainsi que des compléments à la simple présentation des
photos.
Les éléments index général de la collection et ses
compléments sont créés en dehors des outils propres de PhotoTourFL.
La "collection" comprend aussi
2 Sous répertoires d'outils
- le sous-répertoire "lib" est nécessaire pour la consultation,
il comprend tous les icônes de navigation dans les albums, ainsi que
des fonctions (en javascript)
- le sous-répertoire "zeediteur" comprend des outils pour créer
et mettre en page des "albums"
ce sous-répertoire n'est pas
nécessaire pour la consultation,
on peut donc l'exclure du site
public une fois celui-ci mis sur le serveur accessible au public
si on a une version en local du site
publié on peut conserver ce sous-répertoire uniquement en local.
si on souhaite pouvoir intervenir
directement sur le site public, il doit être sur le serveur public,
( Il est alors très vivement
recommandé de protéger ce répertoire"zeediteur" par un login/password spécifique).
Chaque album
correspond à un ensemble de photos (et pages) présentées par
un fichier "index.htm",
avec un système de planches contacts et des éléments d'adaptation
standard (intoduction, bas de page)
on peut compléter cette
base par ajout dans le code html, par exempe entête spécifique avec
lien vers journal et pointgéo dans les voyages.
et un visualiseur "photoTour_FLc.htm"
(avec titre et commentaire de photo),
le répertoirecorrespondant à l'album (sous-répertoire de
la collection) comprend
- ces deux fichiers (index.htm, photoTour_FLc.htm) plus quelques
fichiers utilitaires (dont favicon.ico
et zoomPhoto.htm)
- un sous répertoire
"photos" qui contient les fichiers
des
photos (.jpg)
- un sous répertoire
"vignettes"qui contient un fichier vignette par photo pour
créér les planches contact.
- un fichier
"seriesPhotos.txt" qui décrit l'ordre de présentation des
photos, leur rassemblement en séries, leurs titres et commentaires
éventuels.
il retrace aussi
un intoduction éventuelle, un bas de page etc.. pour l'adaptation de
l'index.
A l'intérieur d'un album les photos sont regroupées en plusieurs "séries"
(cela est défini dans le fichier "seriesPhotos.txt");
dans la page index de l'album, on
ne présente qu'une planche de vignettes à la fois (sauf option de présentation particulière)
dans le viualiseur, on peut changer de
série ...
une série spécifique (nommée
_resume_) permet de mettre en introduction de la page index de l'album
une vignette par série
Ces regroupements logiques ne
sont visibles que par le fichier "seriesPhotos.txt"
et les pages qui utilise ce fichier.
Dans l'outil de mise en page des "albums" (MAJ), une série particulière "_ajoutables_" comprend les photos présentes sous le répertoire "photos"
et non visées par le fichier "seriesPhotos.txt", elle n'apparaît pas dans la page index. Cela permet de les intégrer dans la mise en page.
Vue générale de l'utilisation haut
page
Une consultation sur tout type de support : serveur web, micro, clef
USB.
La consultation (basée sur du html avec javascript),
ne nécessite qu'un navigateur et le contenu du répertoire de la collection.
On peut donc le mettre sur une clé USB, brancher la
clé sur n'importe quel micro et cliquer sur le fichier index.htm (c'est
tout).
A domicile ou au bureau, on peut mettre le
répertoire collection sur un
disque dur.
On peut aussi exporter le répertoire collection sur un espace web (sans
besoin de php, mysql ou autre outils).
Restrictions en fontion des navigateurs pour une utilisation en local (en cliquant sur le fichier index.htm d'un disque dur ou d'une clef
USB) :
- IE
8 restreint les contenus actifs , mais en cliquant sur le message
d'avertissement on peut "autoriser les contenus actifs"
-
pour Firefox, sauf paramétrage contraire, il n'y a qu'une restriction
en local, tous les fichiers annexes htm doivent être sous le répertire
dee l'album
donc y copier les "menu_h.htm" et "piedPage.htm" et y faire référence.
Si vous ne visez pas une utilisation en local
, cette restriction saute.
- Chrome est vérouillé en local .
Ces restrictions n'existent pas à partir d'un serveur web.
Donc si vous visez une édition sur le web sans usage 'en local', mais
que vous mettez au point en local,
il ne reste qu'une
précaution : passer par votre "locallhost" pour voir le résultat en
local .
Une création des albums nécessitant php et donc un serveur web.
(cf plus bas installer les outils sur le PC).
Avec du html pur et javascript, on ne peut rien
écrire sur un disque (sécurité oblige).
Les photos peuvent être mises dans le
répertoire ad hoc par copie ou FTP, et on peut créer les vignette avec
un utilitaire.
Mais ce qui importe c'est l'organistaion décrite par
le fichier seriesPhotos.txt qu'il faut pouvoir modifier et enregistrer
La gestion est assuré par des fichiers placés dans
le répertoire "zeediteur" (prononciation informatique : the éditeur).
Le point de départ est "RedacChef.php" qui permet de
choisir les grandes actions suivantes :
- choisir un album (répertoire) à
traiter ou créer un nouvel album dans la collection.
- ébaucher une première orgnaisation à
partir de l'exploration des photos présentes ,
cela
crée les vignettes, récupère titre
et commentaire présents dans le fichier jpeg (données IPTC), constitue des séries à partir des mot-clés.
- organiser la mise en page : ordre des
photos, titres, commentaires, organisation, titre et commentaire des
séries, introduction pour l'index etc...
- télécharger un nouveau fichier photo.
On peut installer assez facilement un serveur
web sur son PC, ce qui permet de préparer et modifier le site publié
sur le web.
Précision sur les fichiers et les photos
haut
page
Les fichiers des
photos (.jpg) sont dans le sous-répertoire "photos" du répertoire
de l'album traité;
par ailleurs, chaque photo doit avoir une
vignette correspondante avec le même nom dans le sous-répertoire " vignettes", (voir plus loin).
On peut remplir ce répertoire "photos" comme on veut uniquement avec du Jpeg.
Il est recommandé de réduire la taille, car l'affichage standard limite
la hauteur à environ 900 (écran HD de 1080 moins les menus et marges).
Conséquences : garder
les originaux dans un répertoire spécifique distinct et les réduire
pour l'album (utilitaire type "VSO Image Resizer")
( je les exporte depuis Lightroom avec une taille réduite 900
de hauteur max)
Zoom : des photos de plus grande taille peuvent donner lieu à affichage en pleine taille par le bouton zoom du visualiseur.
(bouton visible si l'affichage standard réduit en dessous de 80%, ce qui arrive avec un affichage dans une petite fenêtre).
Panorama : c'est une photo dont la largeur est égale à plus de 2 fois la hauteur , et qui ne tient pas en largeur dans l'écran.
le visualiseur ne la réduit que pour la faire tenir en hauteur, et la fait défiler.
Le fichier Jpeg peut contenir un titre, un commentaire, un motclef (actuellemetn gestion d'un unique mot clef par photo),
ces données sont utilisées par les fonction Ebauche, Télécharger (cf. plus bas)
et le sera lors de l'insertion (Fonction MAJ; cf plus bas, en cours de dév en sept.2012!)
Des pages html dans ce répertoires peuvent être utilisées comme des photos .
Titre et commentaire des photos
Le titre apparaît dans la page index sous la vignette de la photo, et, dans le visualiseur, sous la photo.
Le commentaire n'apparait pas en permanence dans la page index; il
apparaît dans une bulle quand le pointeur (fêche)= passe sur la photo.
Dans le visualiseur, le commentaire apparaît à gauche de la photo ou dessous suivant la place disponible.
Titre et commentaire sont facultatif.
Les vignettes doivent faire
au plus 120 x 120 pixels.
Le fichier de la vignette a le même nom que celui de la photo; seul la
taille change !
Ces vignettes peuvent être générées par l'outils "ebauche.php"
(voir plus loin), ou la fonction de téléchargement.
Si des fichiers photos sont mis dans le répertoire photos pour être
utilisée directemnet dans la fonction de mise en page (MAJ); alors il
faut créer les vignettes correspondantes.
(RAF : création des vignettes manquantes lors de la création de la série _ajoutables_)
Elles peuvent être créées par "VSO
Image Resizer" ou par tout autre logiciel
(j'ai souvent utilisé la fonction "créer un album photo" de Namo Web
Editor, qui a l'intéret de faire des vignettes ombrées !).
Remarque : pourquoi n'avoir pas utilisé les thumbnail (vignettes
embarquées dasn les fichiers jpg)?
- avec une consultation n'utilisant pas PHP (pas de traitemten sur le
serveur) pour la consultation.
cela évite de lire tous les fichiers photos (souvent
quelques centaines de K par photo) ce qui ralentirait énormément le
transfert.
- les vignettes ont la dimension cible (120 en H ou L) donc cela
allège le code javascript ...
Par contre les pages htmà utiliser comme les photos (diaporama) n'ont pas besoin de vignette.
L'organisation en séries, l'ordre, les titres,
commentaires etc... , sont définis dans un fichier nommé seriesPhotos.txt. (mode de création : voir
plus loin)
La présentation générale - avec la liste des diverses séries et
des "planches contacts" escamotables - est faite par la page principale
index.htm
ce fichier fait appel à des fonctions javascript et
des icônes de commandes contenues dans le sous-répertoire "lib".
Il est possible d'ajouter des éléments spécifiques dans ce fichier
index.htm; mais, il y a déjà plusieurs éléments facultatifs prévus dans
seriesPhotos.txt.
Le diaporama avec animation de panorama est géré par le
visualiseur photoTourFlc.htm (utilisant
le sous-répertoire "lib").
Il y a un ficher de gestion de zoom (zoomPhoto.htm
: ébauche à affiner).
Enfin, le fichier seriesPhotos.txt. peut prévoir un fichier htm spécifique pour l'introduction (avant et après la plache introduction) et en bas de
page ;
ce morceau de Html supplémentaires peut comprendre des images (ex : carte), pointer sur une/des pages
spéciales (lien externe ), ....
De même la bannière et le pied de page peuvent être definis par défaut,
adaptés dans le corps du fichier index.htm ou provenir d'un ficher htm
externe.
Précisions sur seriesPhotos.txt
Ce fichier précise tous les éléments à afficher dans la page
principale index.htm;
Il définit l'organisation en séries, les photos de chaque
série et leur ordre, les titres, commentaires de chaque
photo, le titre général, des inter-titres ...
Il est dans un format spécifique et son contenu est décrit ci-dessous.
Il peut être créé ou modifié par un éditeur de texte, (ou par tout
autre logiciel, j'avais au début un modèle excel pour le générer)
Il y a cependant deux outils de création :
un outils "ebauche.php"
pour en générer une première ébauche à partir des photsos
présentes dans le répertoire photos;
cette ébauche utilise les mots
clefs pour créer les séries, et génère les vignettes; il
récupère titres et commentaires présents dans les fichiers
jpeg
un éditeur "opéraTour.php" permet
de compléter le titre général, les intertitres,de modifier
l'ordre des photos, leurs titres, commentaires etc ..
ces deux outils nécessite php (voir plus
loin) et utilisent "save_json.php" pour enregistrerer le fichier seriesPhotos.txt
à chaque enregistrement, on renomme l'ancien fichier seriesPhotos.txt en ajoutant date/heure (en nombre
simple);
on se retrouve donc assez vite avec beaucoup de fichiers archives à supprimer.
Ces deux outils sont accédé par le fonction RedacChef.php de zeediteur
Mise
en page de l'index de l'album haut
page
L'index de l'album comprend plusieurs zones (notées Z1 à Z8
dans l'image ci-dessous)
3 zones sont particulières : le titre général (Z2), la planche introduction (Z4, optionnelle), les planches des séries (Z6).
Les autres, appelées articles (intercalaires), peuvent être définies directement dans le texte html de index.htm de l'album en cause
ou paramétrables (définies par le fichier seriesPhotos.txt. ) et modifiables par l'outil
d'organisation de la mise en page;
dans ce cas, il peut s'agir d'un texte ou d'un petit fichier html annexe.
La
bannière (Z1 = menu horizontal) et le pied de page (Z8) ont une valeur
par défaut, mais peuvent être adaptés directement dans le corps
du fichier index.htm
ou provenir d'un ficher htm externe, qui peut être déclaré par l'outil
d'organisation de la mise en page .
Les autres(Z3, Z6, Z7) n'apparaissent pas si elle ne sont pas définies.
Voir précisions au dessous
de l'image
Image
annotée d'une page "index" (tronquée pour une question de place)
Z1 - Bannière = menu horizontal : article "menu_h". La valeur par défaut comprend les 3 icônes clicables
(retour page précédente, dossier = index.htm de la
collection -répertoire supérieur-, et diaporama).
Article modifiable directement dans index.htm ou par l'onglet "General" de la mise en page en faisant appel à un ficher annexe.
voir précision sur les articles ci-dessous (<div id=menu_h ...>)
Dans l'exemple cette bannière contient en plus une icône "°geo" qui est lien vers une page de point géographique
Z2 - Titre général : modifiable par l'onglet "General"
de la mise en page; sert aussi à l'onglet du navigateur.
Si on veut modifier son apparence, intervenir directement sur le <div id=titre_general ...>
Z3 -
texte avant planche introduction :
Article modifiable directement dans index.htm (<div id=texteDebIntro ...>) ou par l'onglet "General" de la mise en page
Ce peut être directement du texte, ou le contenu html d'un fichier
annexe,
La saisie d'un petit texte d'intoduction est une facilité, dans l'exemple de l'image cette
zone ne contient que du texte.
Z4 -
Planche introduction : peut
être supprimée par l'onglet "General" de la mise en page
Une série spécifique (nommée
_resume_) permet de mettre en introduction de la page index de l'album
une planche avec vignette par série.
Cette série peut être modifiée
notamment avec l'onglet "Photo" de la mise en
page (suppprimer / ajouter des vignettes, déplacer, changer le titre
associée à la vignette ...)
Mais on n'affiche ni titre ni
commentaire de cette série, et elle doit rester en numéro 1 des séries.
Donc inutile de la gérer dans l'onglet "Serie"de la mise en page
Z5 -
texte après planche introduction :
modifiable par l'onglet "General" de la mise en page
Même gestion que pour Z3 - texte avant planche introduction
; (dans index.htm : <div id=texteFinIntro ...>)
dans l'exemple ci-dessus on a le
html d'un fichiert annexe (lienfamille.htm), ce qui permet notamment de mettre un lien.
Z6 - les "chapeaux" des planches des séries :
modifications par l'onglet "Serie" de la mise en page
Pour chaque série on affiche 2
icônes (ouverture ou fermeture de la planche, lancement d'un diaporama),
puis un titre (distinct du
nom interne de la série) et un commentaire (texte simple)
En général il y a en plus , pour une des série, la planche des vignettes correspondantes.
Cette planche aparait par clic sur
l'ivône d'ouverture (option de présentaion =mono) ou par le survol de
l'introduction (option onglet)
Z7 - html bas de page :
modifiable par l'onglet "General" de la mise en page,
Un texte ou le nom
d'un fichier html (avec extension), qui doit être présent sous le
répertoite, et correct..
Dans l'exemple le fichier cité (la_carte.htm), comprend un
paragraphe pour le titre et une référence à un un fichier image.
Z8
- pied de page définie
dans le code html du fichier index.htm ou modifiable comme la
bannière.
( <div
id="piedPage">) avec contenu par defaut
Toute ces zones ont pour largeur 930, et
sont centrés ... à respecter pour Z8 et Z9
Précisions sur les articles
(intercalaires)
A chaque article correspond une zone nommée (<div id =...>)dans le texte html de index.htm.
(la liste des identifiants correspondant est déclarée var listeArticles dans lib/indexAplanche.js )
Cette zone peut est remplie directement dans index.htm, dans ce cas il faut la laisser vide dans la mise en page.
Sinon elle est paramétrable dans la mise en page .
Ce peut être directement du texte, ou le contenu html d'un fichier
annexe,
Pour mettre le contenu html d'un fichier
annexe, fournir le nom du fichier avec son suffixe ".htm" (et non .html)
(on peut aussi le faire précéder de "htm=" exemple : htm=lienfamille.htm, obsolète)
le fichier cité doit être
présent sous le répertoire de l'album et contenir du code html correct
ou avec un chemin d'accès à partir du répertoire de l'album (ex: ../lib/menu_h.htm)
(RAF, gerer erreur au chargement, le jquery se contente de ne pas charger)
Le texte simple ne doit pas se terminer par ".htm" .
Mais il peut contenir des balises html simples
(<br> pour retour à la ligne, <i> italique </i>
et <b> gras</b>).
Pour certains articles, (bannière menu_h, titre titre_general, et pied de page piedPage),
des valeurs par defaut sont initialisées par la fonction "Ebauche", le titre est initialisé avec le nom du répartoire,
le répertoire lib contient 2 petits fichiers menu_h.htm, et piedPage.htm et "seriesPhotos.txt" créé par "Ebauche" y renvoie.
Préconisations:
Titre général : simple texte modifié avec l'outils
de mise à jour (MAJ).
Bannière et pied de page : adapter les ../lib/menu_h.htm et ../lib/piedPage.htm pour l'ensemble de la collection ;
pour spécialisation un de ces éléments par album :
copier le fichier de lib vers répertoire album, les adapter et mettre à jour la référence à ces fichers avec l'outils
de mise à jour (MAJ).
ou déclarer directement dans le code htm de index.htm (à l'intérieur des balises div ad hoc) en partant au besoin du contenu du fichier asous lib.
Textes avant et et après la planche
introduction : ils peuvent souvent être déclarés directement (avec des balises
html simples),
sinon opter pour un
fichier annexe, c'est par exemple cee que j'utilise pour mettre un lien
vers une autre page (cf Z5 dans l'exemple).
Pour le bas de page (dessous les planches
dépliables), j'utilise le plus souvent un fichier annexe, sinon rien.
Attention au chemin des petits fichiers htm :
Pour les articles, on va les chercher sous le répertoire album.
Alors que pour les pages traitées comme
des photos, les fchiers .htm sont dans le sous-répertoire photos du répertoire album.
Attention aux liens et photos dans les fichiers annexes .htm (articles ou pages traitées comme des photos)
en mode consultation on part du
répertoire album (fichier index.htm spécifique et operaTourFl.htm),
lesliens relatifs doivent partir de ce répertoire.
en mode mise à jour (MAJ), on part du répertoire parallèle zeediteur, donc les liens relatfs ne marchent pas
dans l'exemple ci-dessus le bas de
page vise le fichier "la_carte.htm" qui contient la référence à l'image
de la carte (<img src="carte_iles_grecques.jpg" ...)
cette carte n'apparait pas dans l'outils de mise à jour (MAJ) car cette image n'est pas sous le répertoire zeediteur
par
contre elle aparaitra dans les 2 modes si on utilise un chemin qui part de la
collection : <img src="../iles_grecques/carte_iles_grecques.jpg"
Les 3 modes de présentation des planches de l'index ; mono, ouvert et onglet.
mono : au départ, seul la planche d'introduction (_resume_) est affichée , cliquer sur un des boutons planche ouvre la planche.
Sert notamment quand
les zones articles sont bien remplies : on voit l'ensemble au départ.
La planche d'introduction est utile
ouvert : toutes les planches sont ouvertes dés le départ.
Cas d'un album réduit; La planche d'introduction inutile
Le code htm généré peut
alors servir à constituer un index.htm statique (suprimer
le terme onload="initialise();" de la balise <body ...).
onglet : au départ, pas de zone 6, mais survoler une vignette de la planche d'introduction entraîne l'ouverture de la planche détail correspondante.
La planche d'introduction est nécessaire.
Il est recommandé de
limiter à 5 séries, et de mettre pour titre de chaque vignette de la
planche d'introduction, le titre de la planche détail.
Comment
installer les outils sur son
PC et publier haut
page
La
consultation ne nécessite rien de spécial : juste un navigateur
et l'accès au répertoire de la collection (sur le web, disque dur, clé
usb, dvd ...)
La création et la gestion d'une collection et des albums nécessite PHP
et, pour publier, il faut passer par FTP.
Votre PC peut faire serveur interne web avec PHP. Seulemetn vous ne
pourriez y accéder que de votre PC.
Cela permet de créer et mettre à jour le site en local, pour le
diffuser il faut le copier sur un support autre, et notamment le mettre
sur un serveur web.
Pour transformer le PC en serveur interne web avec PHP, il y a
plusieurs dispositifs.
J'utilise "xampp" : il est gratuit, on le télécharge et l'
installe.
Cela crée un arborescence C:/xampp avec de nombreux répertoires
(à ne pas toucher pour l'essentiel).
Les données accessibles par navigateur sont sous le sous répertoire
C:\xampp\htdocs.
C'est là que l'on installe le(s) répertoire(s) de l'image du site.
Pour atteindre l'image du site sous C:\xampp\htdocs (par exemple voir
les voyages sous C:\xampp\htdocs\voyages), il faut :
- que le serveur interne soit en route; on le lance avant d'accéder par
le navigateur, puis on le laisse en route.
pour le lancer, il y a une fonction (icône sur le bureau,
fenêtre qui
restera ouverte même si cachée par d'autre) et on démarre apache et
mysql (boutons start).
- dire au navigateur que l'on vise le serveur interne : "localhost", (cela pointe
directement sur le contenu de htdocs).
dans l'exemple on tape "localhost/voyages"
pour consulter et "localhost/voyages/zeediteur/RedacChef.php" pour organiser:
On ne peut pas cliquer simplement sur le fichier dans
l'Explorer ! Si on clique simplement sur le fichier dans l'Explorer,
les fonctions php ne marchent pas.
Publier, après création ou après mise à jour en local.
Sur un support externe (disque dur, clé usb ..), il
suffit de copier le répertoire; mais il ne sera disponible qu'à la
consultation.
Sur un serveur Web.
Dés que l'on crée une collection,
un album, utiliser FTP (ex: FileZilla) ou tout autre dispositif
incluant FTP pour faire
ou mettre à jour une copie sur le serveur.
Choisir si l'on veut pouvoir
modifier directement quelque chose sur le site par un navigateur ou non
Si l'on ne
publie que pour de la consultation : ne pas transférer le
répertoire zeediteur , ou le
supprimer du serveur (mais laisser le répertoire lib).
Si on veut
pouvoir faire directement des mise à jour par navigateur sur le
site : y metttre le répertoire zeediteur
sous le répertoire de la collection.
Il
est très vivement
recommandé de protéger ce répertoire zeediteur par un login/password
spécifique !
Cela permettra de ne donner la permission de
modifier qu'à des utilisateur particuliers
Il faut alors taper le chemin complet ex: "www.flagarde.fr/voyages/zeediteur/RedacChef.php"
Comment créer une
collection et des albums haut
page
Pour créer une collection :
- Créer un répertoire ad hoc.
Si on l'installe dans un
répertoire existant correspondant au sujet, il faut savoir que le
bouton retour de l'index des albums renvoi à l'index du répertoire
supérieur.
- Copier les répertoires zeediteur
et lib sous le
répertoire de la collection.
Pour créer un album
1° Lancer l'éditeur par un navigateur avec "localhost/repertoire-de-la-collection/zeediteur/RedacChef.php"
( en remplaçant la partie repertoire-de-la-collection
par le nom réel du répertoire)
et utiliser la fonction "Nouvel Album (Répertoire)" pour créer le répertoire,
ainsi que les éléments obligatoires (sous-répertoires photos et vignettes, fichiers index.htm, photoTour_FLc.htm, zoom.htm).
2° Mettre des photos dans le sous répertoire "photos"
RECOMMANDATION : ne pas y mettre les
images sources (trop grandes en général) mais des images réduite à une
hauteur max de 900 pixels
pour réduire, il existe des
utilitaires comme VSO Image Resizer.
3° dans "RedacChef.php" utiliser la fonction "Ebauche" (option "ré(initialise")) pour créer une première mise en page
Choisir l'album puis actionner Ebauche après avoir fourni un titre.
Cela crée une première mise en page, (voir plus loin
pour éditer et organiser l'album).
Chaque mot-clé donne lieu à une série (nommée avec cemot-clé);
Le "titre" du Jpeg(données IPC) est récupéré; on récupère aussi
pour le "commentaire" la "légende" figurant dans le Jpeg
cette "légende"
est appelée "objet" par l'Exploreur Windows, et le "commentaire" de Exploreur est perdu !
Cela crée aussi les vignettes (à condition que le
répertoire existe !) dans la limite de 80 photos.
Si l'on a plus de 80 photos à traiter, recommencer l'appel de Ebauche !
4° Fournir un mode d'accès.
Cela peut se faire par la page index général de la collection (fichier index.htm du
répertoire principal de la collection),
pour ma part j'édite ce fichier
index (avec Komposer) en utilisant une vignette de l'album et un lien
vers le fichier index du sous répertoire.
Mais on peut se contenter de fournir l'adresse la page index de l'album "www .... /repertoire-de-la-collection/monAlbum/index.htm" .
5° dans "RedacChef.php" utiliser la fonction "Mise à jour (MAJ) de la mise en page"(voir ci-après)
Publier : tout ce qui précède se fait en local. Pour publier cf. plus haut
Comment mettre à
jour (MAJ) la mise en page d'un album haut
page
- Lancer l'éditeur par un navigateur avec "localhost/repertoire-de-la-collection/zeediteur/RedacChef.php"
( en remplaçant la partie repertoire-de-la-collection
par le nom réel du répertoire)
- Choisir l'album puis actionner MAJ (ne permet pas d'importer des
photos (voir partie ajouter
des photos )
une fenêtre s'ouvre avec 3 grandes parties
décrites un peu plus bas;
dans
l'onglet du navigateur la Fenêtre se nomme "MAJ : titre de l'album" ici "MAJ : Iles Grecques et Bodrum en bat.."
- ACTIVER la COMMANDE "Enregistrer"
au besoin et AVANT de fermer la fenêtre.
Tant que l'on n'a pas enregistré, rien n'est sauvegardé et il n'y a pas de message si on
ferme la fenêtre sans enregistrer
-
Toujours activer une photo en cliquant dessus (le fond de sa cellule
devient vert)... après avoir ouvert une planche, si besoin.
Image annotée
d'une page de mise à jour (MAJ) de la mise en page
Dans cet exemple on a cliqué sur
la 2 ème photo de la planche d'introduction, ce qui a fait aparaître un
menu associé
Par rapport à la présentation cible (voir exemple plus haut)
- en haut : un petit menu en plus (Z0),
- les zones articles intermédiares (Z1, 2, 3, 5, 7, 9) sont sur fond vert claire, signalant qu'elle sont éditables,
- les photos sont encadrées de barres verticales vertes pour les déplacement et copie (exemple en Z4),
- le titre de chaque photo, sur fond vert claire, est éditable ; un icône "commentaire" permet de l'éditer,
- pour les séries, l'icône "diaporama" est remplacé par l'icône "gestion série" qui déclenche un menu associé spécifique,
le titre et le commentaires de chaque série est sur fond vert claire, signalant qu'ils sont éditables,
- une série supplémentaire "photos ajoutables" (Z6_b) s'il y a des photos présentes sous le répertoire album/photo , mais non mises en page.
- en dessous : une zone supplémentaire pour télécharger des fichiers un par un (Z9)
Le menu Z0:
Bouton B1 : "Enregistrer" , pour enregistrer le fichier seriesPhotos.txt qui décrit la mis en page.
ce bouton est rouge s'il y a eu une modification non encore enregistrée.
Bouton B2 "voir index" : déclenche l'affichage en consultation,
il n'apparaît que si la mise en page est enregistrée.
Bouton B3 , retour arrière : annule la dernière modif (limité à 50 modifications) ,
Zone de message retrace le nom du fichier photo sélectionnée, ou le nom de la série sélectionnée ou un message en cas de déplacement /copie
Bouton B4 "articles intercalaires" pour y accéder
Choisir un des articles suivant :
bannière de menu horizontal( id = "menu_h")
titre général("titre_general")
texte avant planche introduction( id = "texteDebIntro")
(rappel: planche introduction = série "_resume_")
texte après planche introduction( id = "texteFinIntro")
nom fichier html bas page( id = "htmlbaspage")
pied de page( id = "piedpage")
Pour le titre général ne mettre qu'un
texte simple et court qui sera repris dans l'onglet du navigateur
le style est définit dans la balise <div ... id=titre_general...style=".. du fichier "index.htm" et du fichier "operaTourFl.php
Pour les autres : Ce peut être directement du texte, ou le contenu html d'un fichier
annexe,
pour cela il suffit de mettre un nom de fichier finissant par
".htm" (sans le l, donc pas de ".html") (exemple : lienfamille.htm)
il faut que le fichier cité soit
présent sous le répertoire de l'album et contienne un bon texte html .
Par contre il ne faut pas qu'un simple texte se termine par .htm !
Bouton B5 "Général" pour accéder à des options générales :
- Mode de présentation des planches :
Choisir un des modes suivant (précisions ci-dessus) :
mono = des entêtes de planches, ouvrables une à une
ouvert = toutes les planches ouvertes
onglet = affichage planche par click sur vignette Introduction
- "supprimer planche intro" est présent s'il y a une planche introduction (série "_resume_").
s'il n'y a pas de planche introduction,
cette planche est créée en comprenant la première photo de chaque série
avec pour titre de la photo le titre de la série.
Bouton B6 : "(?)" pour accéder à la présente documentation:
Les Zones éditables
Les
zones sur fond vert clair sont "éditables" : on clique dessus et un
petit panneau montre le contenu que l'on peu modifier.
Zone éditable simple (une ligne) :
Dans l'exemple on a cliqué sur la zone de titre (Delos, sous le vent)
de la 2ème photo de la planche introduction.
Le panneau bleu indique le type de texte, et a deux boutons,
l'un pour annule, l'autre pour valider.
On peut aussi faire "entrée" ou enter pour valider.
Cela concerne le titre général (Z2) , le titre des photos ,
le titre et le commentaire des séries.
|
|
Au départ titre et commentaire de photo sont récupérés (s'ils existent) du fichier Jpeg dans la fonction ébauche.
seul les titres apparait sous la vignette dans une planche.
le commentaire apparaît dans une bulle quand on survole
une vignette dans l'index (mais pas dans la mise à jour de cet
index)
il est affiché à gauche de la photo dans le visualiseur |
Zone éditable à lignes multiples (articles intermédiaires Z1, 3, 5, 7, 9 et commentaire de photos) se distinguent par une zone plus grande,
et par la nécessité d'utiliser le bouton de validation (la touche entrée fait passer à la ligne)
Attention : dans une zone éditable à lignes multiples le retour à la ligne fonctionne dans la zone de saisie,
mais n'a aucun effet sur l'affichage dans la page index ou le visualiseur,
il faut mettre des balises <br> pour marquer les sauts de ligne !
Attention : une modification du code html du fichier index.htm est ignorée par l'outil de mise en page (MAJ).
ainsi, dans les exemples ci dessus:
dans l'image annotée d'un page index, la bannière (Z1) comprent un
icone "Point Géo" à droite.
dans l'image annotée
d'une page de mise à jour (MAJ) de la mise en page cet icône est absent !
dans cet exemple
on a inscrit la référence à la bannière standard, mais on a mis
un contenu spécifique
dans la zone correspondante du fichier index.htm du répertoire
voir la partie "Comment personnaliser la présentation d'un album"
Menu associé à une Photo :
Cliquer (click gauche pas droit) pour faire apparaitre le menu
(Pour un page htm à la place d'une photo cliquer sur l'icone "page")
- Fermer : ne fait que fermer (masquer) le menu.
- Date (NOUVEAU pour album créé à partir de mars 2013) :
Permet de modifier la date de prise de vue
"Ebauche" récupère la date de prise de vue (de scan pour argentiques scannées).
Le visualiseur n'utilise pas la date de l'Exif, mais la date de "seriesPhotos.txt".
---------------------R.A.F. : faire option affichage
ou non de nom fichier et date avec bascule possible dans visualiseur
-----------------
- Délai : imposer le délai pour le diaporama : nombre de secondes ou le mot "stop" qui impose l'arrêt.
- Déplacer : la photo sélectionnée va être déplacée, il faut pointer sur la cible matérialisée par une barre verte entre chaque photo.
quand on a activé la fonction du menu, le curseur fait virer la barre du vert au bleu en passant dessus,
pour déplacer d'une série à l'autre : ouvrir la
planche de départ, sélectionner la photo à déplacer, ouvrir la planche
d'arrivée ety cliquer sur la cible.
(en ayant bien sélectionné la position d'arrivée : "avant" ou "après", cela avant de cliquer
(OK, c'est pas très beau, mais le glisser-déposer avec planches ouvrantes c'est plus coton à programmer !)
- Copier : seul différence d'avec "déplacer", la photo sera citée à 2 endroits
- Exclure : la photo (et sa vignette) reste sur le disque (ou autre support), mais on ne la présente pas;
elle aparaîtra dans la série
"photos ajoutables" à la prochaine activation de la mise en page.
Lorsqu'une série n'a plus qu'une photo, exclure cette photo supprime la série.
- Voir/Zoom : affiche la photo en taille réeelle dans une nouvelle fenêtre.
- Scinder Série : (sans effet sur première photo d'une série) : scinde la série en deux,
une nouvelle série est
créée avec la photo sélectionnée et les suivantes, qui sont exclues de
la série initiale
la fonction inverse est la fonction "Grouper série" du menu associé à une série.
Menu associé à une Serie haut
page
Cliquer sur l'icône "gestion série" d'une série pour activer le menu associé
- Fermer menu : ne fait que fermer (masquer) le menu.
- Renommer Série : chaque série a un "nom" identifiant pour les programme,
la
fonction "Ebauche" utilise les mots clefs figurant dans les fichiers
Jpeg
pour créer une série par mot-clé, avec comme nom ce mot-clé.
Lorsqu'on scinde une série le programme génère un nom (unique).
Si on renomme le série "_ajoutables_"; elle deviendra une série ordinaire,
cela permet de rajoutr les nouvelles photos dans un nouvelle série.
|
|
- Titre Série : même effet que de cliquer sur le zone éditable du titre .
le "titre" de la série peut être plus beau de le nom, mais pas trop long pour la liste déroulante du visualiseur;
- Commentaire : même effet que de cliquer sur le zone éditable du commentaire de la série .
- Nouvelle Série : crée une nouvelle série et y copie la première photo de la première série (souvent celle de planche intro).
il faut ensuite renseigner son titre, son commentaire, puis y mettre des photos.
on peut notamment déplacer des photos à partir de la série ajoutable.
- Déplacer Série : déplacer une série dans l'album ; la machine demande son rang : ne pas oublier que le rang 1 est réservé à la série "_resume_ "
On peut supprimer la série "_resume_ " : en utilisant la fonction ad hoc de l'onglet Général !
- Grouper Série : déplace toutes les photos de la série à la fin de la série précédente et supprime la série
- Transférer Série : déplace ou copie la série vers un autre album de la collection.
les fichiers photos et vignettes sont déplacés ou copiész dans l'autre album.
le déplacement supprime la série (et ses photos) dans l'album
source.
Pour réalisert le déplacement un
panneau ad hoc permet la sélection de l'album cible, et l'option
(copier/déplacer) ;
puis un programme (page) est activé
- N'oubliez pas de publier le résultat ( cf.
plus haut)
Mise à jour directement sur site : possible, mais alors, risque de divergence avec la version en local
Récapitulatif : organiser les photos avec les séries
A l'intérieur d'une série : déplacer une photo, cliquer sur la photo à déplacer puis sur la place cible.
Entre séries : déplacer une photo, cliquer sur la photo à déplacer
puis ouvrir le série cible et cliquer sur la place cible.
Regrouper deux séries ou scinder une série : Menu asssocié à une série pour la regrpouper avec la précédente,
pour scinder : cliquer sur la photo de début de la série à créer patr scission et "scinder série".
Déplacer les séries dans un album : Cliquer sur l'icône "gestion série" puis "Déplacer Série" et fournir le rang cible.
Déplacer les séries d' un album à l'autre : Cliquer sur l'icône "gestion série" puis "Transférer Série".
Comment ajouter des
photos haut
page
Plusieurs photos :
D'abord, mettre sous le répertoire photos de l'album les .jpg réduits à une
hauteur max de 900 pixels (cf. création collection / album)
et créer les vignettes si on ne veut pas utiliser la fonction "Ebauche"
Puis 2 possibilités :
- Utiliser la fonction "Ebauche" de "RedacChef.php" avec l'option "complète" (et non "(ré)initialise"),
Cela intègre les photos
présentes sous le répertoire photos et qui n'étaient pas référencée
dans "seriesPhotos.txt";
si la photo intégrée a un(des)
mot-clé déjà présent(s) commme nom de série, la photo est ajoutée à cette (ces)
série(s),
si le mot-clé de la photo
intégrée n'est pas déjà présent commme nom de série, une nouvelle série
est initialisée,
une absence de mot-clé est assimilé à la présence du mot clé "sans-mot-clé"
Les vignettes de
l'album sont générées.
Puis MAJ, pour déplacer les séries, les photos, les documenter ...
- Directement utilisée, la fonction MAJ crée une série supplémentairs "_ajoutables_" qui ne sera pas enregistrée.
Il suffit de déplacer une photo de la série _ajoutables_ vers une autre série existante
Ou de renommer la série _ajoutables_ (son nom et son titre)
Une (ou 2 ou 3 ...) photos:
Dans MAJ, utiliser le formulaire de téléchargement en bas de page ! APRES avoir enregistré !
Cela permet de télécharger une photo : n'importe quel fichier .jpg sur le poste client ;
réduit l'image si besoin, la place dans le répertoire "photos" et crée la vignette.
ATTENTION les premiers
tests montrent une restricion sur la taille de la source
A la fin du
téléchargement, un panneau propose : nouveau téléchargement / MAJ /
Ebauche / Enregistrer
La fonction "Télécharger" (panneau de RedacChef) est équivalente
Mise à jour directement sur site possible, même procédures
Comment permettre la modification par l'utilisateur (via mail) haut
page
Une option "autoriseMAJ" de "seriesPhotos.txt" est gérée par l'onglet général (case à cocher : "Autoriser mise à jour")
Cette option n'est utilisée que pour les albums utilisant un version de mars 2013 et après.
Quand cette option est activée,
- dans le visualiseur, deux icônes ( 
)apparaissent en bas de pages pour activer la saisie d'une modification de titre ou de commentaire.
- une fois la (ou les) modifications saisie(s), il
faut envoyer le message généré en activant le bouton rouge 
en haut à gauche. Cela
entraîne - normalement - l'ouverture du client de messagerie avec un message à envoyer .
ATTENTION (1/3/2013) : ne marche qu'à partir de Firefox et Chrome, pas à partir de IE8 sur le micro de l'auteur.
- le message de(s) modification(s) est reçu par l'auteur du site qui peut alors mettre à jour le site.
Mise à jour à partir du mail généré par un utilisateur :
Dans l'onglet général (image ci-dessous) :
- il faut coller le texte du mail reçu dans la zone au dessous de : "ci-dessous copier demande modif au format json"
- valider ce texte (bouton coche à droite de la zone de demande de modif).
Cela peut éventuellement générer
un message d'erreur (erreur de format, d'album, série ou photo non
trouvée); il apparaît en dessous de la zone de demande de modif.
Sinon le message cite le type de
texte (titre/commentaire), le signet (série_numPhoto) et l'ancien
texte, et sélectionne la vignette (en cours de mise au point).
dessous apparait le texte de titre ou commentaire
- valider la modif (bouton coche à droite de la zone de texte modifié).
cela conduit à la modif suivante si existe
- si plusieurs modifs, utiliser la flêche (
) pour aller à la modif suivante, réinitialiser si besoin avec le bouton coche à droite de la demande de modif.
- IL est possible d'éditer le texte de la demande (ex: modif du nom de la série) ou le texte
Comment faire un album simple haut
page
Un index avec une seule planche (et pas de séparation en plusieurs séries)
Ne pas avoir de mots cléfs : le plus souvent, il suffit de ne pas en déclarer !
Lancer la foncion Ebauche et ne pas changer le mode de présentation qui reste "mono"
Supprimer la planche Introduction (RedacChef / fonction MAJ / onglet Général ).
Renommer la série en "_resume_"(RedacChef / fonction MAJ / onglet Serie).
Très simple : aussi mettre un petit de texte d'introduction (MAJ / onglet Général ) ...
NE PAS OUBLIER D'ENREGISTRER
(ou un seul, toujours le même).
Comment personnaliser la présentation d'un album haut
page
Pour les articles, on peut créer du code Html
dans
un fichier annexe que l'on indique par l'outil de mise à jour
ou directement dans Index.htm .
Un éditeur ad hoc le permet (j'utilise KompoZer, gratuit)
Attention à l'encodage des caractères : en UTF-8 (Dans KompoZer : Affichage / Encodage des caractères)
(dans Notepad++ : Encodage / Convertir en UTF-8 et balise :<meta http-equiv="content-type" content="text/html; charset=UTF8"/>)
On peut changer le fichier favicon.ico, c'est l'icône qui aparait dans l'onglet du navigateur.
Modifier profondément la page index :
Principe = utiliser le code source généré de index.htm puis le modifier.
ouvrir la page index utiliser la fonction
"code source généré" de Firefox, puis copie et enregistrement avec un
éditeur dans le fichier index.htm
(on aura avant, par précaution, fait unr copie du fichier index initial).
Il faut garder toutes les balises <div id="..." de index.htm, correspondant aux zones Z1 à Z8 citées plus haut
mais si on met du contenu dans ces
balises (qui sont vide au départ), cecontenu ne sera pas modifié par le
programme.
Si on veut que le contenu viennent de ce qui est déclaré avec
l'outils (Maj) de mise en page, il faut et il suffit que la zone
<div correspondante soit vide.
Si on a copié tout le contenu généré, on peut supprimer
Utilisations possibles
- Intégrer les fichiers annexes des articles
- Modifier la planche d'introduction
Cette planche est un tableau avec une case par photo. on peut réagencer ces cases en gardant de contenu.
Ce contenu comprend l'appel du
fisualiseur (<a href="photoTour....) la référence de l'image
vignette et le titre
Remarque : dans le tableau généré
chaque case a une largeur de 180, et un style centré, avec fond blanc
si on garde le contenu, le visualiseur sera appelé par un click sur la vignette
- Modifier les entêtes des planches et
leur ordre
On a ainsi intégré les fichiers annexes et on peut modifier le fichier index.htm avec un éditeur
=> cela évite de
re-créer le contenu des articles et des titres des planches à
partir du fichier "seriesPhotos.txt" .
cela permet de modifier les titres des planches et
leur ordre
=> dans le mode de présentation "ouvert" cela évite de créer les planches à partir du fichier "seriesPhotos.txt" .
cela permet de modifier l'ordre et le
titre des photos dans les planches ...
mais les commentaires restent définis dans le fichier "seriesPhotos.txt"
Par contre, pour le visualiseur photoTourFlc.htm , l'ordre des séries (planches) et leur titre, l'ordre et le titre des photos restent définis par seriesPhotos.txt
Si on part de l'index généré en
On ne doit pas modifier seriesPhotos.txt, ni les <div id="..." de index.htm
Par précaution, faire d'abord une copie du fichier de départ.
Attention à l'encodage des caractères : en UTF-8.
Vérifier l'encodage du fichier (Notepad++ : Encodage / Encodage en UTF-8 )
et la balise
seriesPhotos.txt :
format et contenu :
format Json (cf : http://www.json.org/json-fr.html)
: 'nom entité':'contenu' ; contenu = texte
ou série ; série = liste séparée par virgule et encadré par [] etc ...
seriesPhotos.txt :
{
'planche' : 'mono',
(ou 'ouvert' ou 'onglet' mode de présentation)
'menu_h':'texte ou référence à un fichier .htm', (Facultatif menu horizontal haut, voir exemple de code html dans ../lib/menu_h.htm )
'titre':'XXXXXXXX', (titre du fichier index )
'texteDebIntro':'bla bla blabla ...',
(Facultatif
texte en dessous du titre (entre texteDebIntro et texteFinIntro,
planche spéciale "_resume_".)
'texteFinIntro':'bla bla blabla ...', (Facultatif texte en dessous de texteDebIntro et de planche spéciale "_resume_")
'series' : [
{ 'nom':'nom_serie', (
nom symbolique, identifiant de 3 à 20 caractères lettre, chiffre, _, sans accents;' _resume_' et '_ajoutables_' sont réservés)
'titre':'titre_serie',
(Facultatif, mais conseillé, rester court ( <25 car ))
'commentaire':'commentaire_serie', (Facultatifapparaît dans la liste des planches )
'photos':[
{'src':'photos/nom_fic',
'titre':'titre_photo' (Facultatif),'commentaires':'commentaire_photo'(Facultatif),'delai':'nbre secondes ou stop'(Facultatif)},
{'src':'photos/nom_fic',
'titre':'titre_photo' ,'commentaires':'commentaire_photo','delai':'nbre secondes ou stop'},
....
{'src':'photos/nom_fic',
'titre':'titre_photo' ,'commentaires':'commentaire_photo','delai':'nbre secondes ou stop'}
]
}
{
autre serie},
{
autre serie},
.....
{
autre serie}
],
'ficHtmBasPage':'htmlBasPage.html' , : portion de code html inseré en fin de page index Facultatif.
'piedPage':'texte ou référence à un fichier .htm' (Facultatif pied de page, voir exemple de code html dans ../lib/piedPage.htm )
}
Il existe un éditeur Json : http://www.jsoneditoronline.org/
cela permet de faire des retouches du code (lire dans notepad le
fichier seriesPhotos.txt ,
copier coller dans l'éditeur, éditer, retour copier coller dans notepad
puis sauvegarde !)
Précisions :
'planche' : 'mono', les planches sont
gérées dans un seul fichier index avec des entêtes de planches, ouvrables une à une
(autre version antérieure obsolète : un
fichier index de planche par série)
autres possibilités de planche : 'ouvert' ou 'onglet' voir Modes de présentation des planches
L'index affiche les éléments suivants dans l'ordre :
- 'menu_h':'texte ou référence à un fichier .htm' : menu horizontal haut, voir exemple de code html dans ../lib/menu_h.htm : Facultatif
- 'titre':'XXXXXXXX', titre du
fichier index sur la page et dans l'onglet du navigateur,
attention les accents sont affichés trés différemment : les éviter
!
- 'texteDebIntro':'texte ou référence à un fichier .htm', : texte apparaissant au dessous du titre : Facultatif
- la
planche spéciale introduction de la série "_resume_"
si
déclarée dans 'series' : [{'nom':'_resume_',(cf ci-desous dans description des séries,),,
- 'texteFinIntro':'texte ou référence à un fichier .htm', : texte apparaissant au dessous e plancje intro ou du TexteDebIntro
- zone des planches contacts correspondant aux séries (zones
repliées-dépliables par planche ou série ou autres modes de présentation
voir le définition des séries plus bas
- 'ficHtmBasPage':'htmlBasPage.html', : portion de code html inseré en fin de page index. On
peut utiliser un autre nom
- 'piedPage':'texte ou référence à un fichier .htm' : pied de page voir exemple de code html dans ../lib/piedPage.htm
textes exemple
: ' <br>cliquez ci dessous pour le
détail'
les textes tolèrent très bien
les accents (mais déclarés en html : &eactute;
etc...) et des sauts de ligne (<br>)
'series' : [{'nom':'nom_serie','titre':'titre_serie','commentaire':'commentaire_serie','photos':[
liste des photos ] }, { autre serie}, .....]
nom_serie est un nom symbolique
utilisé dans le code : pas d'accent, d'espace ni de caractères
spéciaux ... courte. Non visible par l'usager
titre_serie apparaît
dans la liste des planches (ou séries) de l'index , dans la liste
déroulante du visualiseur et dans l'onglet du navigateur.
rester court ( <25 car ),
accents tolérés mais sont affichés trés différemment dans
l'onglet et dans la liste
commentaire_serie : apparaît dans
la liste des planches (ou séries) de l'index, tolère accents et saut de
ligne <br>, taille plus importante.
Pour chaque photo : 'src':'photos/nom_fic',
'titre':'titre_photo' ,'commentaires':'commentaire_photo','delai':'nbre secondes ou stop'
'src':'photos/nom_fic'
: Les photos sont dans le sous-répertoire "photos", le nom_fic est
SANS le suffixe .jpg
il doit y avoir une
vignette correspondante avec le même nom dans le sous-répertoire vignettes.
titre_photo : titre apparaissant dans
la planche sous la vignette et dans le visualiseur : Facultatif.
commentaire_photo : commentaire éventuel apparaissant à côté de la photo ou
sous la photo : Facultatif.
(selon algorithme dépendant
des dimensions de la photo et de l'espace de visualisation)
n'apparaît pas pour les
panoramas.
tolère du html ex : 'commentaires':'<a href="photos/PICT0045.AVI"
target="_blank">petite vidéo</a>'
ce
commentaire est clicquable et amène sur une petite vidéo.
mais
attention au choix des quotes (pour Json) et double quotes pour
le html ... ou vice-versa
'delai':'nbre secondes ou stop': délai imposée à la photo dans le diaporama ou arrêt forcé du diaporama : Facultatif.
Mécanisme d'ouverture
de
l'index et de la planche spéciale "_resume_"
A) appel index.htm sans signet
(ou hash) :
- S'il y a une planche spéciale "_resume_" ,
elle est affichée sans titre ni commentaire entre texteDebIntro et texteFinIntro.
- S'il n'y a pas de planche spéciale "_resume_"
en première série, il y a ouverture de la première série.
B) appel index.htm avec un signet (ou
hash)
- Il doit correspondre à un nom de série (ou planche)
la planche corespondante
est alors affichée .
c'est un type d'appel fait par photoTourFlc.htm
avec le nom de la série de la photo en cour.
Mécanisme d'ouverture
du visualiseur photoTourFlc.htm, correspondant à l'appel par l'index.
Quand on clique sur l'icône diaporama en haut (centre) de l'index,
le visualiseur commence le diaporama à partir de la première photo de
la 1ère série (hors "_resume_")
cela correspond à un appel de photoTour_FLc.htm
sans complément.
Quand on clique sur une vignette d'une planche ordinaire de l'index, le
visualiseur affiche cette photo sans lancer de diaporama.
cela correspond à un appel de photoTour_FLc.htm
suivi d'un '#', du nom (et
pas le titre) de la série , d'un '_'
et du numero de la photo dans la série
exemple photoTour_FLc.htm#bateau_3
Quand on clique sur l'icône diaporama d'une planche d'une série
(ouverte ou fermée) , le diaporama commence à partir de la première
photo de la série.
cela correspond à un appel de photoTour_FLc.htm
suivi d'un '#', du nom (et
pas le titre) de la série (sans numero de photo)
exemple photoTour_FLc.htm#bateau
Quand on clique sur une vignette de la planche spéciale "_resume_"
, le visualiseur (photoTourFlc)
cherche la série correspondante, l'affiche et lance le mode diaporama à
partir de cette photo
cela correspond à un appel de photoTour_FLc.htm
suivi d'un '#', du nom (et
pas le titre) de la série '_resume_' , d'un '_' et du numero de la photo dans
la série '_resume_'
exemple photoTour_FLc.htm#_resume__3
=> Conseil :
Soit utiliser la planche spéciale "_resume_" pour afficher 5 ou
10 vignettes de presentation et le texte texteFinIntro
Soit créer une planche d'introduction avec 5 ou 10 vignettes de
presentation et ne pas renseigner texteFinIntro
PHP pour ebauche et operaTour
"ebauche.php" et "opéraTour.php"
permettent de créer et modifier le fichier seriesPhotos.txt
(qui détermine
l'organisation en séries, l'ordre, les titres ...)
C'est avec du HTML + Javascript. Or javascript ne permet pas d'écrire
(sécurité).
Poue écrire le seriesPhotos.txt créé ou modifié, on a besoin de php.
Le module proprement dit d'écriture est save_json.php
Il renomme lancien fichier seriesPhotos.txt
en ajoutant date/heure (en nombre
simple)
On se retrouve avec beaucoup de fichiers archives à supprimer.
Historique : haut
page
Bricolage avec Namo web éditor, génération de
codes Html avec excel et javascript pour animer des panorama sur
le Hoggar (début 2009)(
puis génération de
codes
avec Html+javascript pour modifier le seriesPhotos.txt , le résultat était affiché,
ce qui permettait de faire du copier-coller dans
le fichier ouvert sous notpad ou wordpad afin de l'enregistrer.
Nouvelle version avec javascript et jquery (début 2011) voir
notamment Eoliennes, Madagascar, Egypte...
Continuation de développements, car les diaporamas créés par PhotoShop
Elements utilient Flash et ne sont pas visibles sur mon Iphone
(because opposition Apple/Adob !)