Débuter sur iWeb : upload de fichiers tiers

Upload de fichiers

9 mai 10

Les codes que l’on utilise dans les widgets fragments HTML nécessitent parfois l’utilisation de fichiers tiers (par ex. 2 images pour un rollover). Mais comment mettre ces fichiers sur votre serveur (MobileMe ou serveur FTP) ? Voici quelques méthodes que j’utilise.

Ex. Rollover :

il peut être obtenu par un code à ajouter dans un fragment HTML (voir plus bas) et de deux images présentes sur votre serveur. Mais il faudra bien mettre ces deux images en ligne d’une manière ou d’une autre.

Passer le curseur sur l’image ci-dessus pour voir la corbeille remplie (effet rollover)

La méthode que j'utilise le plus souvent est de faire sur ma page un lien vers un fichier :

Sélection d'un mot dans une zone de texte ou d'une image > Inspecteur > inspecteur de liens > lier vers... choisir "vers un fichier " > choisir le fichier dans le Finder.

Le mot sélectionné prend le nom du fichier au sein de la zone de texte, je renomme ce nom de ce lien pour qu'il soit plus discret (par ex. un simple point) pour que personne n'ait l'idée de cliquer dessus. Avec l’onglet Format de l’inspecteur de lien, j'empêche le rollover des couleurs en en choisissant pour les 4 états la couleur du texte.

En images

1. Sélectionnez un mot, un point dans une zone de texte (ici le mot lien)

inspecteur > inspecteur de lien > Onglet Lien > Activer comme lien :

2. Lier vers un fichier > choisir le fichier désiré au sein de votre Finder ici (ici 1.png) > Le nom du lien a changé dans votre zone de texte

3.Renommez ce lien, dans mon cas j’ai choisi un simple point (c’est discret).

4. Dans l’onglet format, pensez à donner aux quatre états de votre lien les mêmes couleurs que le reste du texte pour éviter qu’il n’attire l’attention. Personne n’est censé cliquer sur ce lien, même s’il existe.

5.L’avantage de cette méthode, c’est que le fichier et le fragment HTML vont se retrouver dans le même dossier; pour la plupart des codes, le chemin utilisé pour ce fichier se résumera au seul nom du fichier.
Prenons par ex. le code d’un Rollover :

<img src="1.jpg" width="128" height="128" onmouseout="src='url_de_l_image_1.jpg';" onmouseover="src='url_de_l_image_ 2.jpg';" />

faisons 2 liens (que je ne cherche pas à cacher pour les besoins de cet article) :
1.jpg
2.jpg

Dans ces conditions url_de_l_image_1.png et url_de_l_image_2.png s’écrivent simplement du nom des fichiers respectifs :

<img src="1.jpg" width="128" height="128" onmouseout="src='1.jpg';"
onmouseover="src='2.jpg';" />

Par contre, le contenu de ce widget ne sera pas parfaitement visible dans iWeb , uniquement en ligne avec votre navigateur (cf image ci-dessous : un widget fragment HTML bien vide dans iWeb et pourtant il s’agit de la capture du widget qui affiche le rollover de la corbeille en haut de cette page).

un widget fragment HTML bien vide dans iWeb

Pour ceux qui voudraient voir ces images même dans iWeb , il est nécessaire de mettre les adresses absolues de ces deux images à savoir :
http://iweb.debutersurmac.com/siteiweb/Blog/Entrees/2010/5/9_Upload_de_fichiers_files/1.jpg
et
http://iweb.debutersurmac.com/siteiweb/Blog/Entrees/2010/5/9_Upload_de_fichiers_files/2.jpg

<img src="http://iweb.debutersurmac.com/siteiweb/Blog/Entrees/2010/5/9_Upload_de_fichiers_files/1.jpg" width="128" height="128" onmouseout="src=’http://iweb.debutersurmac.com/siteiweb/Blog/Entrees/2010/5/9_Upload_de_fichiers_files/1.jpg';"
onmouseover="src='http://iweb.debutersurmac.com/siteiweb/Blog/Entrees/2010/5/9_Upload_de_fichiers_files/2.jpg';" />

il est possible, sur une autre page iWeb de votre site,

‣de glisser le fichier désiré (par ex. une image) ou
‣de faire un lien vers un fichier

selon la nature du fichier.

Cette page, personne n'aura l’idée de la visiter, car elle ne sera pas ajoutée au menu de navigation : son but est d'uploader des images ou autres fichiers (fichier SWF , vidéo FLV etc.) sur votre serveur, rien de plus.

Après publication, rendez vous sur cette page avec votre navigateur * : un clic droit sur le fichier et copier l'adresse de cette image ou de ce fichier. Utiliser cette adresse dans le code de votre widget fragment HTML.

* Faites un lien accessible sur votre site vers cette page, visitez votre site et cette page conservez son URL puis effacer le lien pour qu’aucun autre que vous ne puisse y accéder.

Ces méthodes sont indispensables si vous uploadez des dossiers avec une arborescence de sous-dossiers.

a. Abonnés MobileMe :

Dans la barre de menu du Finder :

Finder > Préférences > Appareils > Vérifiez que la case iDisk est cochée, sinon cochez-la.

Barre latérale du Finder :

Aller dans le dossier Sites du dossier Web de votre iDisk (à ne pas confondre avec l'autre fichier à la racine de l'iDisk : iDisk > Sites )

iDisk > Web > Sites

Dans ce dossier Sites (3) se trouve déjà votre site iWeb avec

- sa page index.hml

-son dossier "Nom_du_site", par défaut il s'appelle "Site" sauf si vous avez renommé le nom du site dans la colonne latérale d'iWeb (nom à côté de l'icône MobileMe) ou dans le panneau de publication d'iWeb.

Le nom du site dans la colonne latérale (1) ou dans les réglages de publication (2) détermine le nom du dossier nom_du_site (par défaut son nom est Site) publié sur votre serveur.

Par un simple glisser-déposer depuis votre Finder vers l’iDisk, copiez le dossier contentant vos fichiers dans ce dossier Sites (iDisk > Web > Sites ) à côté de la page index.html et du dossier sitename.

Ex. : ici mon dossier uploadé par simple glisser-déposer s'appelle Mediaplayer

Si vous préférez, pour une question d'ordre, créez un nouveau dossier d'un nom simple ( "upload" par ex. sans guillemets) dans ce dossier Sites et glisser dedans les dossiers et les fichiers qui vous seront utiles.

S'il vous faut récupérer les URL des fichiers contenus dans ces dossiers :

clic droit sur le fichier uploadé sur l'iDisk (menu contextuel) > Lire les informations

Copiez la ligne Serveur : vous obtenez une URL du type

http://idisk.mac.com/votre_pseudo//Web/Sites/nomdudossier/nomdufichier.extension

Remplacez

http://idisk.mac.com/votre_pseudo//Web/Sites/

par son URL public à savoir

http://web.me.com/votre_pseudo/

vous obtenez ainsi une URL du genre

http://web.me.com/votre_pseudo/nomdudossier/nomdufichier.extension

Alternatives, autre moyens pour se connecter à votre dossier iDisk/Web/Sites

a) Les clients Web-DAV

Si vous configurez un Client-FTP/Web-DAV pour qu'il publie sur votre compte MobileMe, il vous donnera les adresses de vos fichiers commençant par http://web.me.com. CyberDuck est le plus facile à utiliser, il n'y a (presque) rien à faire.

Voir la page dédiée aux "clients FTP/Web-DAV (Transmit & CyberDuck) et MobileME".

b) Se connecter au serveur (cmd K)

Finder > Barre de menu > Aller > Se connecter au serveur ou

Finder > cmd K

et entrez http://idisk.me.com/votre_pseudo_mobileme/Web/Sites/

b. sur un serveur-FTP :

Pour un FTP il s'agit d'utiliser un client-FTP et d'uploader le dossier ou le fichier en question à la racine de votre FTP (dossier www, ou web ou public_html) ou dans un sous-dossier de son arborescence.

Voir le tutoriel sur la publication FTP d’iWeb ’06 et’08, le principe est le même, même s’il ne s’agit pas des mêmes dossiers à uploader

Un clic droit sur le fichier au sein du client-FTP pour avoir son URL et utiliser celle-ci dans un widget «fragment HTML».

Copier l’URL de votre fichier grâce au menu contextuel (Transmit 4)

Mais pour obtenir une URL correcte , il faut préalablement indiquer l'URL de votre dossier racine (= «Root URL», généralement du type http://www.votrenomdedomaine.com) sinon c'est le chemin du fichier sur le FTP qui va être copié à la place de l'URL et ça risque de moins bien marcher ( disons «pas du tout» pour être précis )