Re: defilement banniere photo

[koeklin]

Je pense avoir (en partie) compris : Autantpourmoi met en évidence le gros défaut d'iWeb : dans iWeb chaque page a ses propres fichiers dépendants (de style CSS, javascript, images et autres) qu'il ne partage pas avec les autres pages du site. Rares sont les fichiers communs : quelques scripts dont le menu de navigation (qui est une belle *©Ɵηη€®ᵎ€* cela dit en passant) - anecdotiques ces fichiers en commun mais c'est toujours ça à prendre.

Sur la plupart des sites créés avec d'autres logiciels, les pages ont en communs de nombreux fichiers (images du thèmes, CSS, javascript) qu'il ne sera pas nécessaire de rechargés en ouvrant une nouvelle page du site car ils sont dans le cache du navigateur, accélérant par la même l'ouverture des articles suivants du même site.
De plus les sites en PHP (pour ainsi dire tous et c'est le cas de Wordpress... hein Brigitte...) poussent le bouchon un peu plus loin en partageant les éléments qui font la structure même des pages : les pages de la plupart des sites en PHP sont constituées de plusieurs morceaux comme un mur de briques de lego
par ex. (et je reste très schématique et succint) :

• un fichier PHP pour afficher le contenu en head avec les metatag
  
• un fichier pour l'entête
  
• un fichier pour le menu
  
• un fichier pour le contenu principal et ses articles
  
• un fichier pour la barre latérale
  
• un fichier pour les commentaires
  
• un fichier pour le bas de page
  
• un fichier pour les assembler tous.

Ce qui permet de remplacer qu'un morceau de la page selon le role de celle-ci (par ex. on modifiera le fichier du contenu principal selon qu'il s'agit d'un sommaire où d'un article. Pour des articles différents les fichiers sont les mêmes, seules l'interrogation de la base de données nous permettra de montrer au visiteurs des pages différentes.
L'autre avantage de ce partage est de donner un style identique à chaque page du site, une homogénéité. je ne suis pas fan des sites iWeb qui mélangent plusieurs style de pages.

[AntoineS]

Bonjour à tous,

En ce qui me concerne j'aimerai que mon site ce présente de cette manière
:http://www.orchape.com/fr/index.php?lang=fr

C'est à dire, avoir une banque de photos qui défilent indéfiniment en haut de page, et je retrouve cet espace sur toutes mes pages. avec les mêmes photos ou éventuellement d'autres !

Est-ce réalisable ?
et si oui comment..?

HELP ! :-)

Merci pour votre aide !

Antoine.

[koeklin]

un ex. fait avec iweb et slideshow2! :
http://www.wyodor.net/iWebBlogTest/Wyodor_1/WebBanner.html

[AntoineS]

ok..

Il faut télécharger l'application c'est ça ?
c'est une application MAC ?

Merci !

[koeklin]

Super tuto : j'espère que JC apprécie, c'est cadeau ! ;)
ça serait bien de mettre ce tutoriel à part...

Ce n'est pas une application c'est plutôt un mini-site qu'il va falloir éditer :

1. Télécharger Slideshow2!
sur le site de Google : http://code.google.com/p/slideshow/downloads/list

2. Les images du Slideshow
il est préférable que vos images soient toutes de la même taille (et que leur largeur soit de la largeur de la page dans votre cas). Convertissez vos images au format jpg - qualité env 60% (par ex. avec aperçu)
nommez vos images 1 2 3 4 etc. restons simples
Mettez vos images dans le dossier images du dossier slideshow2! (logique)

3. Avec un éditeur de texte

Ouvrez la page index.html du dossier slideshow2! avec un éditeur de texte adapté pour le code ( par ex. Smultron* , textWrangler*, Textmate... éviter TextEdit , c'est pas fait pour ça)
* gratuit

a) Il faut enlever les vignettes au bas du slideshow (thumbnails) et les commandes (controller)
reperez la ligne

Code:

var myShow = new Slideshow('show', data, {controller: true, height: 300, hu: 'images/', thumbnails: true, width: 400});
     });

remplacer true par false
code]var myShow = new Slideshow('show', data, {controller: false, height: 300, hu: 'images/', thumbnails: false, width: 400});
});[/code]
Remplacer ci-dessus 300 ( hauteur) et 400 (largeur) par vos valeurs par la même occasion.

b) Reperer les lignes suivantes

Code:

var data = {
         '1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' },
         '2.jpg': { caption: 'A Ceibu tree.' },
         '3.jpg': { caption: 'The view from Volcano Maderas.' },
         '4.jpg': { caption: 'Beer and ice cream.' }
       };

et plus particulièrement cette partie là :

Code:

         '1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' },
         '2.jpg': { caption: 'A Ceibu tree.' },
         '3.jpg': { caption: 'The view from Volcano Maderas.' },
         '4.jpg': { caption: 'Beer and ice cream.' }

le slideshow n'affiche que 4 images par défaut. Mais vous pouvez en ajouter plus en ajoutant une ligne sous le même schéma.
Noter que toutes les lignes se ressemblent sauf une qui a une légère différence : toutes les lignes se terminent par une virgule sauf la dernière. Respectez cette règle
par ex.
code] '1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' },
'2.jpg': { caption: 'A Ceibu tree.' },
'3.jpg': { caption: 'The view from Volcano Maderas.' },
'4.jpg': { caption: 'Beer and ice cream.' },
'5.jpg': { caption: 'Ma nouvelle image.' }[/code]
Chaque ligne est constituée sous le schéma suivant :

Code:

              'nomdemonimage.jpg': { caption: 'Légende de ma photo.' },

à vous d'ajouter de modifier les légendes de vos photos.

c. Repérez la ligne :

Code:

<img src="images/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />

remplacer la légende entre guillemets par la légende de votre premiere image

Code:

<img src="images/1.jpg" alt="légende de ma première image." />

d. Sauvegarder votre page index.html est vérifier son bon fonctionnement en l'ouvrant dans un navigateur.


4. Publier sur son site
Si c'est ok
Publier votre dossier slideshow2 sur votre serveur : voir tuto ici
récupérer l'URL de votre page index.html du dossier slideshow2!


5. dans iWeb
dans un widget fragment HTML d'iWeb mettez le code d'une iframe :

Code:

<iframe height="300" width="400" allowTransparency="true" frameborder="0" scrolling="no" style="border:none" src="URLdelapageindexdudossierslideshow2">
</iframe>

remplacer dans ce code la hauteur 300 et la largeur 400 par les valeur précédente


Oui mais c'est plus compliqué qu'iWeb ça! Quelle galère!

Maintenant à vous il faut se lancer et ça ne sert à rien d'avoir peur des codes; Au moins essayez
Mais rassurez-vous Si ça ne vous sert pas ça cette fois, ça servira toujours à un autre.

[Madeline]

Cher Koeklin,
Tu es totalement génial... et si généreux

[koeklin]

Oh, je n'espèrais pas si vite un(e) volontaire!
J'attends de voir ton slideshow, Madeline

....Comment ça "pas le temps"? tatatatataaaa,

[AntoineS]

Merci infiniment! Je me lance ont verra bien! :-) merci pour le temps consacré! ;-)

[koeklin]

La partie délicate c'est l'édition de la page index.html si vous n'en avez jamais fait :

• la plupart des choses à éditer se trouvent entre des guillemets, n'allez pas effacer l'un de ces guillemets, ni remplacer un guillemet simple (') par un guillemet double (") ou vice-versa, ça risque de beaucoup moins bien marché. .
  
• je rappelle aussi de bien faire attention à la présence de la virgule à la fin de chaque ligne sauf de la dernière, dans la partie 3. b. du tuto. "Un homme avertit 2 fois en vaut 3"

[AntoineS]

Ok !
Est-il possible de ne pas mettre de légende ?
Je suppose que oui, mais dans ce cas doit-on effacer les parenthèses, virgules et autre guillemets ..? :-)

[koeklin]

mettez rien entre les guillemets.

[AntoineS]

Bon jusqu'à l'étape 4, niquel... Mais pour les étapes 4 et 5 ça ce complique..
Etant donné que je suis en train de créer mon site, il n'est pas encore publié !
Donc, est-il possible de le publier dans un dossier comme qd ont publie notre site complet dans un dossier pour vérifier son bon fonctionnement ?

[Madeline]

Oh, je n'espèrais pas si vite un(e) volontaire!
J'attends de voir ton slideshow, Madeline

....Comment ça "pas le temps"? tatatatataaaa,

Pas le temps avant le 10 juillet...
(Mais tu as Antoine !!!)

Après pas de problème sûr je me lance... je me trempe les doigts et le clavier dans le code !!!
euh... pas sans filet...
car...sachant que je peux compter sur ton aide

car j'aime bien ce genre de slide show...
Ryoichi Kurokawa un artiste japonais que j'adore... (dont je suis une fan inconditionnelle) (et qui donne des concerts audio-visuels live) en avait un super en bannière... mais il a supprimé... et refait son site... qui n'est pas mal du tout.. mais pas avec iweb... je pense...

question... combien de slide peut-on utiliser...

[koeklin]

A priori, autant que tu veux.

Ce qui a de pas mal dans ce slideshow c'est qu'on peut varier les effets (voir sur la page de slideshow2! les chapitres .examples et .demos)

Ps: le code du slideshow de Kurokawa est tout simple

[AntoineS]

Bon jusqu'à l'étape 4, niquel... Mais pour les étapes 4 et 5 ça ce complique..
Etant donné que je suis en train de créer mon site, il n'est pas encore publié !
Donc, est-il possible de le publier dans un dossier comme qd ont publie notre site complet dans un dossier pour vérifier son bon fonctionnement ?

Un petit peu d'aide ... ? :-) Sans vouloir abuser ...

[koeklin]

Déplacer le dossier slideshow2! dans votre dossier Sites de votre "petite maison" (petitemaison > Sites)
Allez dans les préférences système > Partage > Activer le partage web >
on vous donne une URL , un truc du genre

Code:

http://nomdevotremachine.home/~nomdutilisateur/

cette adresse correspond au dossier Sites de votre petite maison, l'adresse de votre page index.html qui doit être

Code:

http://nomdevotremachine.home/~nomdutilisateur/slideshow2!/index.html

Apres avoir vérifier que c'etait l'adresse correcte en l'ouvrant avec votre navigateur, mettez cette adresse dans le code l'iframe (chapitre 5.)

Si par contre vous entrez une adresse en files:/// etc. dans le code de l'iframe,

• on ne verra pas l'image du diaporama dans iWeb mais
  
• le diaporama sera visible et fonctionnel au sein de la page iWeb dans le navigateur.

[AntoineS]

Sans vos explications il est juste impensable de réussir cette entreprise par sois-même !

Qu'entendez vous par :
" Apres avoir vérifier que c'etait l'adresse correcte en l'ouvrant avec votre navigateur, mettez cette adresse dans le code l'iframe (chapitre 5.) " ?

le chapitre 5, c'est le point 5 dans la page html ?
Si c'est le cas, j'ai bien l'impression que rien ne ce passe .. :-(

[koeklin]

Le chapitre 5 de mon tuto

Comme il y a un espace dans le nom du dossier Slideshow 2! , il est préférable de renommer ce dossier "Slideshow" (sans guillemet) tout simplement.
ce qui donne un adresse du genre

Code:

http://nomdelordinateur/~nomdelutilisateur/Slideshow/index.html

Le slideshow fonctionne t-il au moins correctement quand vous ouvrez la page index.html avec un navigateur

[AntoineS]

excuser moi c'est tt nouveau pr moi..

En revanche, après avoir réaliser cela, voici ce qui s'affiche dans mon cas ...

"
Vous voyez cette page au lieu du site attendu ?

Vous voyez cette page parce que l'administrateur du site a modifié la configuration de ce serveur Web. Veuillez contacter l'administrateur du site concerné. La Fondation Apache (Apache Software Foundation), qui produit le logiciel Apache utilisé par ce site, n'a rien à voir avec la maintenance de ce site et ne peut intervenir sur sa configuration. "


:-(

[AntoineS]

Pardon j'avais louper votre msg..
Qu'entendez vous par navigateur ...?
Car il est vrai que mon adresse, apres avoir activer le partage web, est plus simple ...

Site web de mon ordinateur :
http: / / pleinsdechiffres /

Votre site web personnel :
http : / / pleinsdechiffres / ~nomdelutilisateur /

...