01 août 2008
Personnaliser Yahoo! Babelfish
Etiquettes: babelfish, traduction, yahoo
Mise à jour 20 janvier 2009
Je viens de constater un souci que je ne m'explique pas encore avec ce tuto: si je recrée un nouveau code les traductions n'ont pas l'air de fonctionner correctement, pourtant mon code exemple de ce tuto fonctionne parfaitement, alors qu'il est basé sur exactement la même chose.
Si vous avez essayé d'utiliser ce tuto, merci de me faire part de vos retours.
Yahoo Babelfish est un service de traduction automatique.
Il propose un outil à insérer dans son site, pour proposer à ses visiteurs de traduire directement la page sur laquelle ils sont.
Evidemment, cet outil a tous les défauts d'un traducteur automatique, au mot par mot. Mais ça peut servir quand même.
Côté design, c'est pas folichon, Yahoo propose une seule apparence par défaut, celle-ci:
Et c'est là que vous me remerciez d'exister car je vais vous dire comment personnaliser tout ça pour mieux l'intégrer à votre site :)
Cela va se faire en plusieurs étapes:
1) Récupérer le fichier à personnaliser
2) Modifier le fichier et les images
3) Héberger le nouveau fichier
4) Modifier le code de l'outil
1) Récupérer le fichier à personaliser
Pour insérer cet outil, Yahoo nous donne le code suivant à mettre dans nos pages html:
<script type="text/javascript" charset="UTF-8" language="JavaScript1.2" src="http://fr.babelfish.yahoo.com/free_trans_service/babelfish2.js?from_lang=fr®ion=fr"></script>
Et c'est quoi là-dedans qu'on va pouvoir personnaliser, hein?
Là, pas grand chose. Mais dans le fichier javascript qui est appelé par ce script, plein de choses.
Donc, première étape, récupérer le fichier babelfish2.js, surtout son contenu. Vous embêtez pas, je l'ai fait pour vous.
document.write('<div style="background:#7F9DB9;width:131px;padding-bottom:1px"> <img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/b/bf_badge2.gif" border="0"> <div style="background:#FFF;margin:0 1px 0px 1px;padding:2px;"> <div style="font:12px arial">Choisissez une <b>langue de traduction</b></div> <img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif" border="0"> <br> <select name="to_lang" onchange="trurl=location.href; lp=this.options[this.selectedIndex].value; if(lp!=\'\') window.location=\'http://fr.babelfish.yahoo.com/translate_url?doit=done&fr=bf-badge&trurl=\'+trurl+\'&lp=\'+lp;" style="font:11px arial;width:127px" align="center"> <option value=\'\'>Choisir la langue</option><option value="en_en">anglais</option><option value="en_de">allemand</option><option value="en_el">grec</option><option value="en_es">espagnol</option><option value="en_it">italien</option><option value="en_nl">néerlandais</option><option value="en_pt">portugais</option> </select> </div></div>')<!-- fe01.bff.search.re1.yahoo.com uncompressed/chunked Fri Aug 1 12:29:11 PDT 2008 -->
Si vous tenez à savoir comment faire: vous vous rendez à l'adresse http://fr.babelfish.yahoo.com/free_trans_service/babelfish2.js qui est indiquée dans le code de Yahoo, et vous faites afficher la source.
2) Modifier le fichier et les images
On voit dans ce fichier babelfish2.js qu'il génère en fait un code html, celui qui va faire afficher l'outil de traduction.
Voici ce code, mis en forme:
<div style="background:#7F9DB9;width:131px;padding-bottom:1px">
<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/b/bf_badge2.gif" border="0">
<div style="background:#FFF;margin:0 1px 0px 1px;padding:2px;">
<div style="font:12px arial">Choisissez une <b>langue de traduction</b>
</div>
<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif" border="0"><br>
<select name="to_lang" onchange="trurl=location.href; lp=this.options[this.selectedIndex].value; if(lp!=\'\') window.location=\'http://fr.babelfish.yahoo.com/translate_url?doit=done&fr=bf-badge&trurl=\'+trurl+\'&lp=\'+lp;" style="font:11px arial;width:127px" align="center">
<option value=\'\'>Choisir la langue</option>
<option value="en_en">anglais</option>
<option value="en_de">allemand</option>
<option value="en_el">grec</option>
<option value="en_es">espagnol</option>
<option value="en_it">italien</option>
<option value="en_nl">néerlandais</option>
<option value="en_pt">portugais</option>
</select>
</div>
</div>
Et voilà la structure en image:
Le logo Yahoo, c'est http://us.i1.yimg.com/us.yimg.com/i/us/bf/b/bf_badge2.gif.
L'image du poisson, c'est http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif.
Pour changer ces images, il suffit de modifier les adresses pour mettre celles de ses propres images.
On peut aussi purement et simplement les supprimer en supprimant les codes correspondants<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/b/bf_badge2.gif" border="0"> et<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif" border="0"><br>
Mais on peut aller plus loin. En effet, vous remarquerez qu'un attribut style est déclaré dans chaque div, on va pouvoir modifier ces attributs, en enlever, en ajouter... Il suffit de connaître un peu le css.
Je vous conseille de créer un fichier html où vous copierez le code, en l'ouvrant avec votre navigateur vous verrez directement ce que ça donne. Vous pouvez ainsi faire tous vos essais en local.
Pour l'exemple, voici le code que j'ai utilisé (en gras ce qui est modifié):
<div style="background:#324B65;width:150px;padding:1px 0 1px 0;">
<img src="http://sd-1.archive-host.com/membres/up/152282661762569155/yahoo_babelfish/babelfish.png" border="0">
<div style="background:#F7F9FF;margin:0px 2px 2px 2px;padding:2px;">
<div style="font:12px arial">Traduire en:
</div>
<!--<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif" border="0"><br>--image supprimée-->
<select name="to_lang" onchange="trurl=location.href; lp=this.options[this.selectedIndex].value; if(lp!=\'\') window.location=\'http://fr.babelfish.yahoo.com/translate_url?doit=done&fr=bf-badge&trurl=\'+trurl+\'&lp=\'+lp;" style="font:11px arial;width:127px" align="center">
<option value=\'\'>Choisir la langue</option>
<option value="fr_en">english</option>
<option value="fr_de">deutsch</option>
<option value="fr_el">ελληνικός</option>
<option value="fr_es">español</option>
<option value="fr_it">italiano</option>
<option value="fr_nl">nederlands</option>
<option value="fr_pt">portugueses</option>
</select>
</div>
</div>
Note: pour que les caractères spéciaux (grec, lettres accentuées) apparaissent bien, il faut que votre fichier soit encodé en UTF-8, chose totalement impossible avec le bloc-note basique de windows. C'est (entre autres) pour ça que pour tout ce qui est développement web, il faut utiliser un bloc-note plus évolué (personnellement j'utilise Notepad++).
Une fois que vous avez fait vos modifications, vous mettez tous sur une seule ligne (important) et vous ajoutez document.write(' au début et ') à la fin, et vous enregistrez ce nouveau fichier avec une extension .js.
Voilà ce que ça donne pour moi:
document.write('<div style="background:#324B65;width:150px;padding:1px 0 1px 0;"> <img src="http://sd-1.archive-host.com/membres/up/152282661762569155/yahoo_babelfish/babelfish.png" border="0"> <div style="background:#F7F9FF;margin:0px 2px 2px 2px;padding:2px;"><div style="font:12px arial">Traduire en:</b></div> <select name="to_lang" onchange="trurl=location.href; lp=this.options[this.selectedIndex].value; if(lp!=\'\') window.location=\'http://fr.babelfish.yahoo.com/translate_url?doit=done&fr=bf-badge&trurl=\'+trurl+\'&lp=\'+lp;" style="font:11px arial;width:127px" align="center"> <option value=\'\'>Choisir la langue</option> <option value="fr_en">anglais</option> <option value="fr_de">allemand</option> <option value="fr_el">grec</option> <option value="fr_es">espagnol</option> <option value="fr_it">italien</option> <option value="fr_nl">néerlandais</option> <option value="fr_pt">portugais</option> </select> </div></div>')
3) Héberger le nouveau fichier
Il faut maintenant héberger ce nouveau fichier sur un hébergement qui nous permette d'avoir une adresse directe. Pour les utilisateurs de Canalblog, ça marche très bien avec l'insertion de fichier (voir d'autres solutions ici).
4) Modifier le code de l'outil
Enfin, il ne reste plus qu'à mettre l'adresse de notre nouveau fichier dans le code du script de Yahoo.
Par exemple, pour moi:
<script type="text/javascript" charset="UTF-8" language="JavaScript1.2" src="http://sd-1.archive-host.com/membres/up/152282661762569155/yahoo_babelfish/w_babelfish.js?from_lang=fr&region=fr"></script>
Et voilà le résultat:
23 juillet 2008
Lightbox 2 en français et personnalisation
Etiquettes: images, lightbox, photos
Note: article basé sur la version 2.04
Vous avez sans doute déjà croisé Lightbox JS dans vos balades sur le web.
Il s'agit d'une application en Javascript permettant d'agrandir une image par-dessus la page en cours, avec un effet d'animation.
Si vous ne savez pas encore ce que c'est, rien de tel qu'un petit tour sur le site officiel.
La meilleure façon de se familiariser avec cet outil est de le télécharger, de décompresser l'archive zip et d'ouvrir le fichier index.html avec votre navigateur.
Vous allez avoir cette page. Et là "argh, mon dieu, tout est en anglais!"
J'ai donc pensé à nos amis anglophobe, et fait une version en français, en ajoutant les exemples du site officiel pour les groupes d'images.
Vous pouvez la télécharger ici:
lightbox 2 en français
Dézipper l'archive et ouvrez le fichier index_fr.html avec votre navigateur, vous aurez cette page.
Les autres fichiers sont à ouvrir avec un bloc-note.
Les fichier css/lightbox.css et js/lightbox.js sont commentés afin que vous puissiez repérer quelques possibilités de personnalisation basique.
Je vais les détailler quand même un peu ici. Ceci est juste une sélection d'éléments facilement modifiables et visibles et n'a pas la prétention d'être exhaustif.
Commençons par les images de chargement, de liens suivant, précédent et fermer.
Dans ma version, par défaut vous aurez ça:
Chargement: loading.gif
Précédent: prevlabel.gif
Suivant: nextlabel.gif
Fermer: closelabel.gif
Vous pouvez vous créer vos propres images avec les mêmes noms ou pas, l'essentiel étant de bien les référencer dans le fichier lightbox.css et lightbox.js.
Vous pouvez modifier la taille des images chargement, précédent et suivant sans problème. Par contre, si vous modifier la largeur de l'image "fermer", il y aura une valeur à modifier dans le css.
Le fichier lightbox.css
justement, parlons en de ce css.
Il défini l'apparence de la lightbox.
Prenons les éléments qui vont nous intéresser dans l'ordre du fichier (en gras les valeurs à modifier si besoin).
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
ici, on va pouvoir changer la couleur des bordures de la photo.
#imageContainer{ padding: 10px; }
Ici, c'est la largeur de la bordure de la photo. Si on change cette valeur, il faudra également la changer dans le fichier lightbox.js.
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
Ici, ce sont les liens précédent et suivant qui apparaissent sur les côtés de la photo, au survol de la souris.
Il faudra vérifier que l'url de l'image est correct.
En changeant la valeur 15%, on déplace ce lien verticalement. La valeur est prise depuis le haut de l'image, donc plus le % sera élevé, plus le lien apparaîtra vers le bas.
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
Ici, il s'agit de la zone d'information sous l'image (celle qui contient la légende, le numéro de la photo et le bouton "fermer").
On pourra en changer la police (font), la couleur (background-color).
#imageData{ padding:0 10px; color: #666; }
Défini les marges intérieur du cadre d'information, et du même coup la position des textes. Ici on a 0 px en haut et en bas et 10 px à droite et à gauche.
Est définie également la couleur du texte. A noter qu'on peut mettre une couleur différente à la légende et au numéro d'image en ajoutant un attribut color à #imageData #caption (légende) ou à #imageData #numberDisplay (numéro).
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
Il faudra changer la largeur (width) si vous modifiez la largeur de l'image "fermer", les 2 doivent être égales.
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Ici on peut modifier la couleur de l'ombre. La transparence se règle dans le fichier lightbox.js.
Le fichier lightbox.js
De même prenons les éléments qui vont nous intéresser dans l'ordre du fichier (en gras les valeurs à modifier si besoin).
Vers le début du fichier:
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
Ce sont les adresses des images de chargement et du bouton "fermer". Vérifiez l'exactitude de ces adresses.
overlayOpacity: 0.8,
Défini l'opacité du fond qui recouvre la page. 0 = transparent, 1 = opaque
animate: true,
Active l'animation. Je ne vous conseille pas de la désactiver, j'ai constaté des problèmes de mise en page (photo pas au bon endroit). Si vous souhaitez accélérer l'agrandissement de la photo, augmentez plutôt la valeur ci-dessous.
resizeSpeed: 7,
Contrôle la vitesse de l'animation (1= le plus lent et 10= le plus rapide)
borderSize: 10,
Si vous changez le padding dans le CSS, il faut mettre à jour cette variable pour qu'elle soit la même
labelImage: "Image",
labelOf: "sur",
Dans un groupe d'image cela est utilisé pour afficher: Image # sur #.
Changer les labels pour le personnaliser ;)
Vers le milieu du fichier (ligne 231), vous trouverez ceci:
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
Cela calcule la marge en haut du cadre de la photo.
En fait, ça récupère la zone d'affichage du navigateur et la divise par le nombre en gras pour définir la marge. Donc, plus ce nombre sera grand, plus la marge sera petite. Si on mettait 2, le haut de la photo apparaîtra à la moitié de la fenêtre.
Maintenant que vous l'avez bien personnalisé, vous êtes prêts à intégrer lightbox dans Canalblog.
22 mai 2008
Lecteur mp3 de Neolao
Etiquettes: mp3
Mode: normal ou avancé
Ce qui suit est destiné à un public plutôt averti, c'est-à-dire ayant déjà des bases en html / css.
Neolao est un développeur qui met gentiment à disposition quelques unes de ses créations sous licence libre.
Parmi elles, on trouve un lecteur mp3 en flash extrêmement intéressant.
L'utilisation de ce lecteur implique qu'on dispose d'un hébergement pour le stocker ainsi que les fichiers de configuration et les mp3. Il est d'ailleurs important que le fichier du lecteur .swf et les fichiers de configuration soient hébergés au même endroit, sinon cela risque de ne pas fonctionner. Si vous n'avez pas d'hébergement, vous pouvez lire ceci.
Il en existe plusieurs versions, mais seules les maxi et multi continuent d'évoluer (je ne parlerais pas de la version Javascript que je n'utilise pas).
La version maxi est un lecteur pour un morceau, la version multi gère une playlist.
Le grand avantage de ce lecteur est la possibilité d'en personnaliser l'apparence de façon plus ou moins poussée, par diverses méthodes. Cela permet de l'intégrer de la meilleure façon possible au design d'un site.
Il y a plusieurs façons de le configurer:
- directement dans le code html (je ne vous le conseille pas, lourd à gérer)
- par un fichier externe au format xml
- par un fichier externe au format txt
Personnellement j'ai choisi le fichier .txt très simple d'utilisation et qui ne nécessite aucune connaissance d'un langage particulier.
Dans ce fichier on défini une foule de paramètres concernant le comportement du lecteur et l'aspect.
Je vous laisse vous référer à la documentation sur le site du lecteur, que ce soit pour le maxi ou le multi.
Vous trouverez également des information utiles sur ce site.
Je vais m'attarder sur la personnalisation de l'apparence.
On peut simplement modifier les couleurs.
On peut appliquer une image au format jpg, un skin, qui habillera le lecteur. Cette image sera utilisée en lieu et place des couleurs de fond. La taille de cette image n'étant pas variable, il ne sera pas possible de modifier la taille du lecteur sans modifier l'image.
On peut placer le lecteur sur une image de fond.
Ci-dessous, figurent 4 exemples avec le lecteur multi, illustrant 4 possibilités, avec pour chacune des liens pour voir le code html et Le fichier de configuration correspondant.
1) Le lecteur avec configuration des couleurs
Voir le code html (dans une nouvelle fenêtre)
fichier de configuration texte correspondant (dans une nouvelle fenêtre)
2) Le lecteur avec un fichier image pour skin:
Voir le code html (dans une nouvelle fenêtre)
fichier de configuration texte correspondant (dans une nouvelle fenêtre)
L'image du skin (note: l'image doit avoir la même taille que le lecteur):
3) Le même lecteur qu'en 1), inclus dans un bloc ayant une image de fond et placé par des marges
Voir le code html (dans une nouvelle fenêtre)
fichier de configuration texte correspondant (dans une nouvelle fenêtre)
4) Le lecteur placé dans un bloc ayant une image de fond avec transparence, avec un fichier image concordant pour skin
Voir le code html (dans une nouvelle fenêtre)
fichier de configuration texte correspondant (dans une nouvelle fenêtre)
L'image du skin:
Je sais, les images sont moches, elles ont été faites vite fait pour l'exemple ;P
Un petit exemple d'intégration sur mon blog, où j'ai juste utilisé la configuration des couleurs (exemple 1).
25 avril 2008
Hébergement gratuit de fichiers
Etiquettes: hébergement
Mise à jour 15 octobre juillet 2008: Dedikam n'est pas gratuit, il s'agit en fait d'une période d'essai.
Sur Canalblog, on peut héberger ces images et fichiers, mais le système, bien que suffisant dans la plupart des cas, a ses limites:
- Taille maximale de fichier de 4 Mo pour les images et de 1 Mo pour les autres
- Impossible de remplacer un fichier par un autre en gardant la même URL
- Pas de possibilité de créer des sous-dossiers
Donc, pour les mp3 par exemple, ou les videos, Canalblog ne sera pas suffisant.
Ou alors pour des images de template ou autre qu'on souhaite pouvoir changer par la suite, sans avoir à modifier les url dans le code.
Il va donc falloir trouver une autre solution.
La première à laquelle il faut penser, c'est l'espace page persos de son FAI. En effet, tous propose un hébergement gratuit, mais celui-ci peut avoir des limites: capacité totale, taille de fichiers maximale, débit en téléchargement descendant (genre Free qui culmine à 30ko/s en journée, suffisant pour des mp3 à 128kbps, mais pas génial pour la video).
Si l'espace page perso de son FAI n'est pas suffisant, il va falloir se tourner vers des solutions sur des sites internet.
Pour la musique et les videos, il existe pas mal de sites qui propose l'hébergement de ces fichiers (type Deezer, Dailymotion). Ensuite, ils fournissent un code pour insérer un lecteur flash lisant ce fichier. Mais on n'a pas le choix du lecteur (tout au plus peut-on changer les couleurs) et on n'a rarement (pour ne pas dire jamais) l'adresse directe du fichier (nécessaire pour les musiques sur les diaporamas de Canalblog, où si on veut installer son propre lecteur).
En fouillant un peu la toile, j'ai trouvé quelques solutions gratuites que j'ai testé rapidement et en ai retenu 4 qui ont l'avantage de fournir une url directe et fixe pour les fichiers transférés:
Fileden - Google pages creator - Archive-Host - dedikam
Fileden (lien)
Ce site propose plusieurs offres, dont une gratuite, dont voici les caractéristiques:
- espace de 1 Go
- taille de fichier maximale de 50 Mo
- bande passante de 5Go par mois
Voici donc une offre intéressante pour héberger images, musiques et petites videos. On s'inscrit sur le site de façon classique en donnant un identifiant, mot de passe et ses coordonnées.
Une fois passer les 3 pages de pub quand on se connecte, on a alors un espace ou on peut créer et gérer des dossiers, télécharger des fichiers dans le dossier de son choix, et faire toutes les opérations de bases sur les fichiers (déplacer, renommer, supprimer...). Faut juste s'habituer à l'interface que je ne trouve pas très intuitive, à grand coup de clic droit. On peut obtenir directement les codes BBcode, html, ou l'adresse directe pour chaque fichier.
On peut aussi uploader des fichiers en nombre, en les zippant au préalable et en demandant le dezippage lors du téléchargement
Par contre, même si en théorie il est possible de remplacer un fichier, cela semble capricieux, je n'ai pas réussi à remplacer certains fichiers, même en les supprimant auparavant, c'est toujours la version envoyée en premier qui revenait.
Le site se présente également comme un site communautaire, avec profil d'utilisateur, amis, forum, fonction de partage, possibilité de créer des albums photos (pas testé)... Mais tout en anglais.
Les +
- Espace (1Go) et taille de fichier maximale (50Mo) intéressants
- Véritable explorateur de fichier
- Débit descendant correct même si limité à 100ko/s, cette valeur semble généralement atteinte
- Possibilité d'envoi groupé
Les -
- Remplacement de fichier fonctionne mal
- 3 pages de pub à passer à chaque connexion
- Tout en anglais
- Suppression du compte et des fichiers si pas de connexion au service au bout d'un certain temps (mais mail d'avertissement)
- Données personnelles à fournir à l'inscription (nom, adresse postale)
Google pages creator (lien)
Un service Google en phase de test et disponible en anglais.
Il s'agit ni plus ni moins que d'un service d'hébergement et création de site web, avec une interface en WYSIWYG. Il faut avoir un compte Google dont on utilise les identifiants pour se connecter.
On dispose alors d'un espace de 100Mo sur lequel on peut créer des pages en utilisant différents modèles. Mais ce qui nous intéresse, c'est qu'on peut y héberger tout type de fichier, à condition qu'ils fassent moins de 10 Mo.
Une solution plutôt réservée à des mp3 donc.
Il y a dans l'interface d'administration un menu dans la colonne de droite nommé "uploaded stuff" et un petit bouton [upload]. C'est par là qu'on va pouvoir envoyer nos fichiers, qui vont simplement se classer ensuite par ordre alphabétique, on ne dispose pas de gestion de dossiers, et la seule opération possible est la suppression. Les fichiers apparaissent en lien direct, un clic gauche ouvre le fichier ou la fenêtre de téléchargement, par un clic droit on obtient l'adresse directe qui de toutes façons est très simple puisque tu type http://pseudo.googlepages.com/nomdufichier.ext.
Pour remplacer un fichier, il suffit d'uploader un fichier du même nom que celui à remplacer, l'ancien sera automatiquement écrasé.
A noter qu'on peut créer 3 sites avec un même compte et donc disposer de 3 x 100 Mo. Et rien ne nous empêche de créer plusieurs comptes ;).
Les +
- Simplicité d'utilisation
- Débit descendant excellent (chargement d'un mp3 de 4Mo en 2 secondes environ)
- remplacement de fichier sans souci
Les -
- Espace (100Mo) et taille de fichier (10Mo) limités
- Pas de gestionnaire de dossier
- Pas d'opération possible sur les fichiers hormis la suppression
- Tout en anglais
Archive-Host (lien)
Un service similaire à Fileden, qui propose plusieurs offres dont une gratuite avec:
- 100Mo d'espace de stockage
- Taille de fichier maximale de 40Mo
Voici donc une offre très intéressante pour peu qu'on ait pas besoin de trop d'espace. Mais bon, comme seule une adresse mail est demandée pour s'inscrire, rien n'empêche d'ouvrir plusieurs comptes avec différentes adresses.
On dispose par défaut de 3 dossiers: fichiers, images, musiques, ayant chacun leur limite de taille de fichier acceptée. 40Mo pour fichiers, 3Mo pour images, 10Mo pour musiques, on a donc de quoi faire, d'autant qu'on n'est pas obligé de télécharger une musique dans le répertoire musique.
On a ici un gestionnaire de dossier complet où on peut créer des sous-dossiers, déplacer les fichiers, les renommer, les supprimer...
Pour le remplacement de fichier, cela doit se faire en 2 temps. Si on upload un fichier ayant le même nom qu'un autre, il sera automatiquement renommé lors du transfert. En re-renommant le dernier fichiers uploadé, il écrasera le premier. Ou alors il faut supprimer le fichier qu'on souhaite remplacer auparavant. L'adresse ne changera pas, car elle est composée d'un partie fixe dépendant du numéro ID du compte suivi d'une partie classique /dossier/nom_de_fichier.ext.
Pour tous les fichiers, le site propose divers codes. Les classiques codes html, BBcode, le lien direct mais aussi des codes de lecteur mp3 (avec 2 types de lecteur (dewplayer et jw player) et différentes versions) et de lecteur video flv (flash) (jw player et l'excellent player de neolao dont je compte bien reparler dans un billet futur).
Les +
- Taille de fichier maximale (40Mo) intéressante
- Débit descendant bon (constaté 200 à 800ko/s sur un fichier de 20Mo)
- Véritable explorateur de fichier
- codes proposés y compris insertions de lecteurs
- Envoi de plusieurs fichiers à la fois possible (mais nombre et taille globale limitée)
- interface en français
- forum de support et documentation en français
- une adresse mail suffit à l'inscription
Les -
- Espace (100Mo) limité
Mise à jour 15 octobre 2008:
Ce service n'est pas gratuit, il s'agit en fait d'une période d'essai de 30 jours.
Ceci n'est pas mentionné clairement sur le site.
Ensuite, le compte et les fichiers sont supprimés si on ne passe pas sur une formule payante (minimum 15€ / an, à ce prix là autant se payer un vrai hébergement)
Encore un site qui propose plusieurs offres dont une gratuite avec:
- 1Go d'espace de stockage
- Taille de fichier maximale de 250Mo
Là, on voit tout de suite l'intérêt pour des gros fichiers, et donc des videos plus particulièrement.
L'interface en java est plutôt claire et agréable et en français. Comme pour archive-host, on a un vrai gestionnaire de dossiers où on peut créer, renommer et supprimer dossiers, sous-dossiers et fichiers.
Comme pour archive-host, le remplacement de fichier n'est pas automatique. Si on upload un fichier ayant le même nom qu'un autre, il sera automatiquement renommé lors du transfert. En re-renommant le dernier fichiers uploadé, il écrasera le premier. Ou alors il faut supprimer le fichier qu'on souhaite remplacer auparavant. L'adresse ne changera pas.
Par clic droit sur le nom d'un fichier ou dossier, on accède à la fonction "renommer".
Il y a également une fonction "clé de partage". Inutile(*) pour un fichier seul (car l'adresse du fichier suffit), elle est pratique si on veut partager un dossier complet (mais les sous-dossiers ne sont pas inclus dans le partage).
Pour les dossiers, on a une fonction très intéressante, "compresser". Cela permet de créer un archive zip du dossier et de ses sous-dossiers directement en ligne. A l'inverse, quand on a un fichier zip, on a une fonction "décompresser", qui permet donc de décompresser l'archive en ligne, en conservant toute le structure des dossiers.
Par contre cet espace est dédié au partage, il n'est pas possible d'ouvrir un fichier directement en ligne, il doit forcément être téléchargé (même si c'est dans les dossiers temporaires). Donc il n'est pas possible par exemple d'y héberger des pages html. Par contre on peut sans problème faire appel à un fichier par son adresse dans une page ou une application web (lecteur media par exemple), on pourra donc l'utiliser par exemple pour des videos ou mp3 à insérer dans un lecteur flash.
(*) Pour obtenir l'adresse direct de téléchargement du fichier, il faut désactiver javascript, pour l'avoir par clic droit sur le fichier. En effet, sans ça le clic droit donne le menu de Dedikam au lieu du menu contextuel normal. En désactivant javascript, on retrouve le menu ontextuel normal mais on n'a plus le menu Dedikam.
Les +
- Espace 1Go et taille de fichier maximale (250Mo) très intéressants
- Débit descendant bon (constaté 200 à 700 ko/s sur un fichier de 20Mo)
- Véritable explorateur de fichier
- Fonction de compression / décompression (mais limité au format zip)
- interface en français
- forum de support et documentation en français
- sytème de partage des dossiers
- une adresse mail suffit à l'inscription
Les -
- Période d'essai de 30 jours, obligation de passer sur une formule payante pour continuer à bénéficier du service (et conserver ces fichiers)
- Pas de possibilité d'ouverture des fichiers directement en ligne
- Pas de possibilité d'envoi groupé (2 fichiers simultanés maximum)
- obliger de désactiver javascript pour accéder à l'adresse directe du fichier
- Les service semble jeune, perennité?
Voilà, sans avoir testé en profondeur, j'écarte Fileden trop désagréable à utiliser (pub, connexion régulière obligatoire).
Ma solution préférée est celle de Archive-Host qui malgré l'espace limité offre de très bonnes prestations.
Reste l'inconnue de taille avec ce genre de service, c'est la pérennité, même si pour Google on peut supposer qu'ils ne vont pas disparaître du jour au lendemain ;).
08 avril 2008
travailler en local
Etiquettes: méthodes
Tout d'abord, 2 petites définitions rapides.
Local: ce qui est sur son propre ordinateur.
Distant: ce qui est ailleurs sur le réseau, dans le cas d'un site web, ce qui est sur le serveur du site.
Quand on crée un site internet, il est préférable de travailler en local, donc uniquement sur son PC, pour faire tous les tests qu'on veut, sans avoir à transférer les fichiers sur le site distant à chaque modification pour voir ce que ça donne.
Dans le cas de Canalblog, cela va nous éviter de devoir modifier les fichiers dans l'administration et prévisualiser ou valider à chaque fois. De plus, la zone de texte de cette interface est plutôt réduite et pas très pratique.
Travailler en local est beaucoup plus souple, on peut annuler des modifications facilement, on peut conserver plusieurs versions d'un même fichier, un simple rafraichissement de la page va nous montrer les modifications.
Concrètement, comment faire?
Il suffit de copier / coller le code qu'on veut modifier dans son bloc-note préféré et d'enregistrer le fichier avec l'extension .html pour les pages ou .css pour la feuille de style.
Pour voir le résultat dans son navigateur préféré, il faudra taper dans la barre d'adresse le chemin du fichier .html.
Par exemple, si le fichier de ma page d'accueil sur mon ordinateur se trouve à ce chemin:
E:\canalblog\monblog\index.html
Pour le voir dans le navigateur, je vais entrer l'adresse suivante:
file:///E:/canalblog/monblog/index.html
Dans Notepad++ il y a une fonction pratique qui permet par un raccourci clavier de visualiser directement le fichier ouvert dans Firefox ou Internet Explorer.
Une fois que les modifications faites nous conviennent, pour les mettre en ligne il suffit de tout sélectionner et de tout copier dans l'administration de Canalblog, à la place des pages voulues.
Là ou on va avoir un petit souci, c'est que les pages Canalblog utilisent des blocs et balises spécifiques, qui appellent des routines en php pour afficher les blocs de lien, les dates et titres de messages, les commentaires, le calendrier, etc.
Quand on va travailler en local, ces balises ne seront évidemment pas interprétées et apparaîtront sur la page sous la forme de leur code.
Pour réaliser le design général du site, ce n'est pas très gênant.
Si après on veut vraiment travailler sur une page en voyant ce que ça donne avec les messages et tout, il suffira d'afficher la page de son blog (celle distante), de récupérer le code source et de le copier / coller dans le bloc-note, pour travailler avec ce nouveau fichier.
Par contre un point sur lequel il faudra faire attention, c'est le lien vers la feuille de style.
En effet, ce lien est sous cette forme:
<link rel="stylesheet" href="<$BlogCSSURL$>" type="text/css" />
Où <$BlogCSSURL$> est le code appelant l'adresse distante de la feuille de style.
En local, il faudra penser à remplacer <$BlogCSSURL$> par style.css (si votre feuille de style s'appelle style.css et qu'elle est dans le même répertoire que le fichier html), puis à nouveau mettre <$BlogCSSURL$> quand on copiera le code en distant.
A noter que pour la page d'accueil, et uniquement celle-là, on peut laisser style.css, cela fonctionne.
05 avril 2008
Les outils du bricolo
Etiquettes: méthodes, outils
Tout bricoleur doit avoir ses outils et ses méthodes.
Je vais vous présenter les miens.
Tout d'abord, je précise que mon OS est Windows, donc tout ce que je dis est valable sous windows, et pas forcément ailleurs.
L'outil indispensable du développeur web est le bloc-note.
Bon oubliez celui intégré à Windows, qui est trèèèèès limité.
On va plutôt choisir un bloc-note qui, au minimum, dispose de la coloration syntaxique.
Kézako? Suivant l'extension du fichier, le bloc-note en déduit le langage utilisé et va reconnaître les différents éléments (balises, texte, commentaires...) et va donner une couleur différente à chaque type d'élément.
Résultat: on retrouve beaucoup mieux ses petits.
A vue de nez, ça a l'air plus clair à droite de l'image non?
Personnellement j'utilise Notepad++, mais il en existe d'autres. Ce que j'apprécie dans celui-là c'est l'ouverture de plusieurs fichiers dans des onglets dans une même fenêtre et pouvoir travailler sur 2 fichiers côté à côte.
Nous voici donc avec l'outil essentiel.
Ce qui suit n'est pas indispensable mais tellement pratique:
L'extension Web Developer pour Firefox.
Cette extension ajoute une barre d'outils à Firefox
Elle permet de faire une foule de chose comme avoir toutes les informations sur les différents éléments de la page, redimensionner la fenêtre de Firefox à une résolution donnée (pour voir comment s'affiche le site dans cette résolution), innspecter le structure du document, etc.
Une des fonctions que j'utilise le plus, c'est l'édition des CSS de n'importe quelle page, avec prévisualisation immédiate. Très utile pour faire des tests rapides.
