Débuter sur iWeb : Dewtube

Dewtube sur un site iWeb

31 mars 10

introduction

Dewtube est un joli lecteur vidéo flash (vidéos au format flv). Mais pour en profiter pleinement, encore faut-il savoir l’installer sur une page iWeb. Je présenterais deux méthodes : une traditionnelle (en 4 étapes) et une plus facile, plus rapide (si vous ne souhaitez utiliser dewtube qu’une seule fois ou éviter d'utiliser un client FTP).

Avertissement :

1) dewtube nécessite d’avoir flash player sur sa bécane : il est donc certifié de mon label «jolie brique bleue» anti-iPad, anti-iPhone.

2) Ce tutoriel ne concerne que les utilisateurs d’iWeb, logiciel de création de site internet d’Apple, si vous utilisez un autre logiciel pour créer vos sites Web, il y a peu de chance que ce tutoriel vous soit utile.

Menu :

Première méthode :
● Étape 1 : sur votre navigateur
● Étape 2 : Dans votre Finder
● Étape 3 : Placer le dossier en ligne
● Étape 4 : sur iWeb
Seconde méthode : alternative plus simple
Remerciements.

Première méthode (traditionnelle) :

Les différentes étapes sont :

1. Sur votre navigateur :

Télécharger dewtube sur le site d'alsacreations > téléchargement

Il y a un gros bouton , on ne peut pas le louper

2. Dans Votre Finder :

vous obtenez un dossier dewtube

Dans ce dossier dewtube se trouvent une page dewtube.html, un fichier dewtube.swf, une vidéo et une image.

Et quand on ouvre la page un navigateur dewtube.html, on voit ... ben en fait, on ne voit rien sauf dewtube qui se lance pas !

Si vous voulez que ça marche il faudra éditer le code html de la page avec un éditeur de texte et remplacer video.flv par moskau.flv, sauvegardez puis rafraîchissez la page dewtube.html dans votre navigateur.

1.placer votre video au format flv portant un nom simple* ex. video.flv
3.placer une image de même dimension de même nom ex. video.jpg

*C’est quoi un nom simple ? C’est un nom sans espace, sans accent, sans caractère à la noix. Simplicité, efficacité!

Donc pas de vidéo au nom poétique de ma glace à la fraise.flv .
Préférez plutôt maglacealafraise.flv voire même glace.flv.

3. Placer le dossier en ligne :

Placer ce dossier dewtube

•dans le dossier Sites de MobileMe (iDisk > Web > Sites) via le Finder.
•dans le dossier racine (www, web ou public_html) de votre FTP, via un client FTP (CyberDuck, Transmit, FileZilla).

Vous devriez obtenir des adresses de fichiers de ce type : (les variables à remplacer sont

www.votrenomdevotredomaine.com , video.flv, votrepseudo)

Nom de domaine :

http://www.votrenomdevotredomaine.com/dewtube/video.flv

http://www.votrenomdevotredomaine.com/dewtube/dewtube.swf

http://www.votrenomdevotredomaine.com/dewtube/dewtube.html

MobileMe :

http://web.me.com/votrepseudo/dewtube/video.flv

http://web.me.com/votrepseudo/dewtube/dewtube.swf

http://web.me.com/votrepseudo/dewtube/dewtube.html

Orange :

http://pagesperso-orange.fr/votrepseudo/dewtube/video.flv

http://pagesperso-orange.fr/votrepseudo/dewtube/dewtube.swf

http://pagesperso-orange.fr/votrepseudo/dewtube/dewtube.html

free :

http://votrepseudo.free.fr/dewtube/video.flv

http://votrepseudo.free.fr/dewtube/dewtube.swf

http://votrepseudo.free.fr/dewtube/dewtube.html

Pour vérifier que les adresses son bonnes, ouvrez la page dewplayer.html située sur votre serveur (FTP ou MobileMe), Si vous voyez au moins l’image du lecteur apparaître au sein de votre navigateur, vous êtes en bonne voie pour continuer, sinon vérifiez le chemin de la page (pas la peine de cliquer sur le bouton de l’image ci-dessous, c’est une image (capture d’écran) du lecteur dewplayer et non le lecteur lui même).

Certains préférerons des adresses relatives. Voici partiellement ce que ça donne :

adresses relatives :

Donner une position relative est assez compliqué dans iWeb, ça dépend du type de page sur laquelle vous utilisez le fragment HTML.

Le plus souvent, c’est ça (Pages de modèles Bienvenue, Fiche personnelle ou vide)

../../../dewtube/video.flv

../../../dewtube/dewtube.swf

Mais pour les entrées d’un Blog et de podcast c’est plutôt ça :

../../../../../../dewtube/video.flv

../../../../../../dewtube/dewtube.swf

et encore, c’est pas fini... restent les autres pages. Résumons ma pensée les adresses relatives c’est «prise de tête» :D .

4. Enfin iWeb :

Dans un Fragment HTML placer le code suivant

</object>

remplacer

‣urldufichierdewtube.swf (2 fois ligne 1 et ligne 3) par sa vraie url
‣urlddelavideo.flv (1fois) par sa vraie url
‣la largeur (ici 512) et la hauteur (384)

Enlever &autostart=1 si vous souhaitez pas que la vidéo se lance automatiquement.

Publier

Publiez visitez votre site, vérifiez le bon fonctionnement de ce player

5. Autre méthode :

Si vous voulez utiliser dewtube qu’une seule fois sur votre site iWeb, voici une méthode simple , d’ailleurs ça va aller très vite :

Téléchargez dewtube

Dans iWeb, sur une même page, faites 3 liens vers un fichier : (sélectionner un item quelconque dans une zone de texte puis inspecteur > inspecteur de liens > lier vers : choisir «fichier» > choisissez un fichier dans votre l’arborescence de votre finder)

‣faites un lien vers le fichier dewtube.swf
‣faites un lien vers le fichier vidéo par ex. video.flv
‣faites un lien vers le fichier image video.jpg

Débrouillez-vous pour rendre ces liens discrets et que personne ne clique dessus

Mettez le code suivant dans un fragment HTML de la page : il n’est plus necessaire de mettre un chemin particulier pour chacun des fichiers dans le code puisque tous vos fichiers ainsi que la page du fragment HTML (widget_markup.html) se trouvent dans le même dossier (nomdelapage_files)

</object>

Changez le nom de la video dans le code ( ici video.flv) ainsi que la largeur et la hauteur.
Enlever &autostart=1 si vous souhaitez pas que la vidéo se lance automatiquement.

Publiez.

Voilà c’est fini!

6. Pour finir :

Un grand merci à Dew de blup! et Alsacreations pour ce joli player,

ainsi qu’à Mario pour son aimable participation (Super Mario Galaxy 2 sur Wii, sortie prévue en juin 2010 sans doute) et au site jeuxvideo.com.