Archive pour la catégorie ‘Webdesign’

Slide, spring slide

mercredi 23 mars 2005 | Webdesign

Petite mise à jour du viewer Flash permettant de faire défiler des images (annonce initiale). Il est désormais possible d'utiliser quelques options pour personnaliser son comportement, notamment pour faire défiler les images automatiquement et pour s'affranchir de l'interface proposée par défaut.

Il est toujours conseillé d'afficher des images JPEG dont les proportions sont multiples de 500x375, 640x480, 800x600, et ainsi de suite pour éviter les bavures, et de toujours dimensionner l'objet dans ces proportions. Les options supplémentaires sont passées en argument, tout comme les noms des fichiers à faire défiler. L'adresse devient très longue, il faudra peut-être envisager de passer par un fichier externe (.ini) à l'avenir.

  • bg=off (on par défaut) : n'affiche pas le fond.
  • buttons=off (on par défaut) : n'affiche pas les boutons suivant/précédent.
  • auto=X (off par défaut) : passe automatiquement à l'image suivante toutes les X secondes.
  • fullscreen=on (off par défaut) : affiche l'image au maximum de la taille de l'objet, pas de cadre ni de textes.

Exemple :

<object type="application/x-shockwave-flash" data="dewslider.swf?img=img1.jpg,img2.jpg
&fullscreen=on&buttons=off&auto=5" width="520" height="420"> <param name="movie" value="dewslider.swf?img=img1.jpg,img2.jpg
&fullscreen=on&buttons=off&auto=5" /> <param name="bgcolor" value="#ffffff" /> </object>

Je rappelle aussi que vous pouvez l'adapter à la couleur de fond de votre site en modifiant le paramètre <param name="bgcolor" value="#XXXXXX" /> puisque le cadre est un PNG transparent.

Edit : Mise jour et dernière version par ici.

Amaztype, c'est amazing

samedi 19 mars 2005 | Webdesign

Amaztype

Un nouveau moteur de recherche typographique a vu le jour : Amaztype, produit par Amazon comme son nom l'indique.

Il est bien sûr axé sur la recherche littéraire et musicale, ainsi que tout ce qui est vidéo ou DVD. Amazon oblige.

Mais sa plus grande originalité est de proposer le résultat sous la forme du mot cherché, composé d'une mosaïque d'aperçus des produits trouvés sur laquelle il est possible de zoomer et d'obtenir quelques infos de résumé. Pas mal pour se composer un petit titre artistique.

Amaztype

Wget, le tournevis à octets

lundi 14 mars 2005 | Webdesign

Bien connu des linuxiens et autres amoureux de la ligne de commande, wget est peu répandu sous windows bien qu'il soit aussi distribué pour cette plate-forme. Pourtant, cet outil conçu à la base pour télécharger des fichiers en FTP ou HTTP peut se révéler utile si l'on ne veut pas "s'encombrer" d'un gestionnaire de téléchargement ou que l'on souhaite juste s'occuper de quelques liens rapidement.

wget

Mais là où wget ravira les c0derz fous, c'est dans les quelques possibilités de modifier son comportement grâce aux arguments passés en plus de l'adresse du fichier ou de la page à rapatrier.

  • -i : télécharge une liste d'URLS contenues dans un fichier texte
  • HTTP
    • --http-user=USER : spécifie l'utilisateur HTTP (équivalent $PHP_AUTH_USER)
    • --http-passwd=PASS : spécifie le mot de passe HTTP (équivalent $PHP_AUTH_PW)
    • --referer=URL : envoie un référant spécifique (URL de la page précédemment visitée, équivalent $HTTP_REFERER)
    • --user-agent=AGENT : envoie un identificateur de navigateur spécifique (équivalent $HTTP_USER_AGENT)
    • --header=HDR : envoie le header HDR
  • Cookies
    • --load-cookies=FILE : lit les cookies à envoyer dans un fichier
    • --save-cookies=FILE : sauve les cookies reçus dans un fichier
  • POST
    • --post-data=STRING : envoie des données via la méthode POST
    • --post-file=FILE : envoie un contenu de fichier

Et bien d'autres options à découvrir avec wget --help. On l'aura compris, wget est bien pratique lorsque l'on veut tester un script avec des valeurs différentes de ce que le navigateur envoie par défaut, voire même pour un petit test de débit en FTP ou HTTP.

Télécharger wget 1.9.1b pour windows. A placer dans un répertoire système (ou répertoire contenu dans la variable d'environnement PATH) pour le rendre accessible depuis n'importe où.

Slideshow d'images en Flash

samedi 12 mars 2005 | Webdesign

Dans la lignée des petites animations utiles, voici le dewslider (yeah wanégaine). C'est dans la même veine que l'animation pour lire les mp3, mais cette fois-ci il s'agit de faire défiler des images choisies de façon minimaliste.

Edit : Mise à jour et nouvelle version par ici : Dewslider

Les images sont chargées dynamiquement, au fur et à mesure du défilement, et sont redimensionnées automatiquement. La taille standard est multiple de 640x480, 1024x768, 1600x1200... (un classique rapport de 1.33), les autres formats étant ajustés au plus proche sans être déformés.

Pour plus de souplesse, la liste des fichiers à afficher est passée en argument de cette façon dans le code HTML : ?img=image1.jpg,image2.jpg et ainsi de suite. Il est possible de préciser des chemins relatifs. Voici le code exemple (attention il y a 2 endroits où spécifier les adresses des images séparées par des virgules, ceci suppose que vous placez le fichier swf dans le même répertoire que les images) :

<object type="application/x-shockwave-flash" data="dewslider.swf?img=img1.jpg,img2.jpg,img3.jpg" width="520" height="420"> <param name="movie" value="dewslider.swf?img=img1.jpg,img2.jpg,img3.jpg" /> </object>

Vous pouvez l'adapter à la couleur de fond de votre site par l'utilisation de <param name="bgcolor" value="#ffffff" /> (ici du blanc).

Flash ou le spectre du spyware

samedi 5 mars 2005 | Webdesign

Les développeurs Flash redoutent que leur langage fétiche ne soit pendu haut et court pour avoir été distribué avec la barre d'outils Yahoo. L'installation de ce composant pour IE est facultative, mais jusqu'à quand ? Macromedia ne fait donc pas assez de bénéfices ? Sont-ils obligés d'arrondir leurs fins de mois avec d'éventuels spywares alors qu'une licence de développement Flash n'est déjà pas donnée... Quelques sites s'en font déjà l'écho :

Les programmeurs pourraient alors s'orienter vers Java qui ne propose pas de programme tiers à l'installation. Les navigateurs non-IE ne sont pas concernés pour l'instant, chose qui est visible sur la page de téléchargement du plugin proposant la barre Yahoo pour Internet Explorer :

Téléchargement de Flash pour Internet Explorer

...et qui s'abstient lorsqu'il s'agit d'un autre navigateur :

Téléchargement de Flash pour navigateurs alternatifs

Une option qui compte sur le laxisme des internautes pour se laisser faire, sans compter les contrats de licence à accepter spécifiques à Yahoo, et la taille du téléchargement qui passe de 680 Ko à 880 Ko. Quelques compagnies râlent et menacent de revoir leur choix pour se tourner vers des technologies alternatives (SVG wouhou, où es-tu SVG ?). Flash est déjà sur la corde raide puisque de nombreuses bannières publicitaires profitent de ce moyen - contournant les popups - pour saturer encore un peu plus les pages visitées.

Un membre de la team Macromedia précise tout de même "No Macromedia installer has any Yahoo code installed." (L'installeur - pour les autres navigateurs - ne contient pas de code spécifique à Yahoo). Ouf. Finalement ce n'est qu'un éternel recommencement : on conquiert 99% du marché puis on impose de nouvelles contraintes aux internautes pour accroître les marges.

Des alternatives ? Rares et peu viables tellement l'emprise du plug-in est forte : GPLFlash est un player OpenSource en cours de développement. Les spécifications du format SWF - pourtant fournies librement par Macromedia - sont tellement vastes qu'on peut douter que l'implémentation soit totale dans un futur proche.

Dans un autre style, l'extension Flashblock pour Mozilla et Firefox permet de désactiver le chargement des animations Flash (et Shockwave) et d'attendre que l'utilisateur clique sur la zone en question pour afficher le contenu (screenshot illustratif).

Ca devient une mauvaise habitude de changer en douce l'environnement de l'utilisateur à l'installation de nouveaux softs (ex : MSN Messenger).

Une petite annonce qui a du style

vendredi 4 mars 2005 | Webdesign

Logo Alsa

Oyez, oyez. Raphaël Goetter cherche un emploi.

Dissaïdors frétillants toujours à la recherche de la perle rare, c'est aujourd'hui l'offre à ne pas manquer. L'idole des jeunes skyblogueurs vous est enfin accessible. Dans la force de l'âge, celui-ci ne vous décevra pas. De bonnes dents, un mental à toute épreuve, un CV à faire pâlir Steve Jobs, il ne tombera pas enceinte. C'est une affaire à ne pas louper mesdames et messieurs. Ce véritable surhomme plein de <class> au service de votre activité pourra accroître vos bénéfices jusqu'à 200% ! Il n'y en aura pas pour tout le monde.

C'est aujourd'hui ou jamais, profitez-en avant que la concurrence ne s'approprie cet atout d'envergure internationale. De plus, il est peu regardant sur le salaire beau, ne parle pas le SMS mais comprend quand même le dialecte alsacien. Précipitez-vous avant qu'il ne parte sur eBay pour 3.000.000$.

Piles non fournies.

Alsacreations

lundi 28 février 2005 | Webdesign

Ravalement de façade pour Alsacreations : Raphaël m'a prêté les pinceaux et après deux ou trois incisions, la magie de la chirurgie esthétique a révélé l'alsapotentiel dans toute la splendeur de son <style>. Avec la diversification des activités (blog, tutoriels, forum, faq...), le souhait d'Alsa-man était d'harmoniser un peu le tout sous la même charte graphique - le forum suivra sous peu (todew). Alsa' est donc maintenant un véritable portail passant de la pommade aux standards du web. Le site repose sur une osmose de Dotclear et Plume avec ambiance très fruitée et très <select>. Voici donc les ébauches reprises par Raphaël, un nouveau logo agrume et une interface :

Logo Alsacreations
Interface Alsacreations

Vous pourrez constater par vous-même le résultat. Sans oublier la FAQ, les tutoriels et le forum qui a dépassé les 1000 membres il y a peu de temps.

Et dire qu'il n'y a même pas eu de teasing... Quel pressé ce Raph (à force de côtoyer les citrons... Bof. Je laisse ou j'enlève ? Allez je laisse.)

Player Flash MP3 léger comme une plume

mercredi 16 février 2005 | Webdesign

Flash!

Edit : Mise jour et dernière version par ici

Macromedia Flash offre la possibilité de lire des sons à la demande. Dans certains cas, il peut être utile d'intégrer à des pages web des animations permettant de prévisualiser (préauditer plutôt) un son au format mp3. Bon nombre de ces animations disposent d'interfaces peu attrayantes ou bien trop lourdes. N'ayant pas vraiment trouvé de player simple d'utilisation et surtout léger, il ne me restait plus qu'à coder le ... dewplayer (Tadam! Pas d'objection, j'aurais pu le nommer dewflashmp3lightplayer, mais je suis ouvert à toute suggestion de nom). Il n'a rien de sorcier, de complexe ou de mystérieux. Son principal avantage, outre sa légèreté, réside en sa capacité à télécharger le contenu du son à la demande et non au moment du chargement de la page, car le fichier audio n'est pas contenu dans l'animation mais appelé dynamiquement lorsque l'on clique sur play. Exemple en action :

Extrait de 20 secondes : Le Hussard sur le Toit - Jean-Claude Petit

Son utilisation est simple car il suffit d'utiliser le code HTML classique pour une animation flash, en spécifiant dans l'url le nom du fichier comme un argument (typiquement ?son=...). Cela permet aussi de générer des listes de fichiers audio sur un serveur, par exemple dans une page web via un script PHP, et de proposer des aperçus en utilisant le même code et le même fichier swf. Ici un exemple avec votre_son.mp3 en supposant qu'il se trouve dans le même répertoire (sinon le chemin relatif passe aussi mais évitez d'utiliser des espaces ou caractères accentués). :

<object type="application/x-shockwave-flash" data="dewplayer.swf?son=votre_son.mp3" width="200" height="20"> <param name="movie" value="dewplayer.swf?son=votre_son.mp3" /> </object>

Autoplay : Il est possible de lancer automatiquement la lecture avec l'option autoplay (ou autostart ça va aussi) et la valeur 1, true ou yes. Exemple : "dewplayer.swf?son=test.mp3&autoplay=1"

Couleur de fond : Vous pouvez modifier la couleur de fond pour l'adaper à votre site grâce à deux petits bouts de code :
- rajoutez bgcolor="#xxxxxx" dans le tag object
- <param name="bgcolor" value="#xxxxxx"> avec les autres paramètres
Vous devriez obtenir ainsi (#xxxxxx est à remplacer par la couleur de votre choix, par exemple #003366 pour du bleu) :

<object type="application/x-shockwave-flash" data="dewplayer.swf?son=votre_son.mp3" width="200" height="20" bgcolor="#xxxxxx"> <param name="movie" value="dewplayer.swf?son=votre_son.mp3" /> <param name="bgcolor" value="#xxxxxx"> </object>

NB : J'ai reçu des dizaines de mails avec des suggestions et des questions, mais je n'ai pas encore pu répondre à tous ni faire les modifications souhaitées. Merci de ne pas demander le .fla :)

Edit : Mise jour et dernière version par ici

Musicolégalité

samedi 5 février 2005 | Webdesign

Ceci n'est pas un avocat

Une question récurrente ne trouve toujours pas de réponse fiable : puis-je proposer un extrait sonore (ex : mp3 ou ogg) sur mon site, à défaut d'y proposer des morceaux complets, libres de droits ?

Comme à l'accoutumée, on prend des risques vis-à-vis de la justice sans trop savoir si on ne va pas froisser un distributeur en mal de procès. Quelques Indiana Jones du popup ont essayé Radioblog, un couplage script/Flash permettant de diffuser en semi-streaming une sélection de fichiers, mais qui reste illégal malheureusement. BloOg.net avance :

Du point de vue de la propriété intellectuelle ce script ne semble pas trop trop illégal vu que les sons sont de qualité médiocre, que peu de titres en sont en ligne sur chaque blogue, qu'il n'y a pas de possiblité de téléchargement et que le tout reste dans le cadre de la copie privée.

Je doute que la justice se montre aussi magnanime. Certes, peu de titres sont proposés mais cela ne compte pas. Est-ce vraiment de la copie privée ? Il n'y a pas possibilité de téléchargement direct mais cela se contourne facilement en analysant le fonctionnement du script ou des paquets transmis (par exemple avec Ethereal). Cependant aucun procès n'a encore été intenté contre un utilisateur de Radioblog (à ma connaissance).

Pirate

Dans ce cas, pourquoi ne pas proposer uniquement des extraits sur le fondement des articles L. 211-3 et 122-5 (du Code de la Propriété Intellectuelle) prévoyant l'exception de courte citation ? Oui, mais à partir de quelle durée l'extrait est-il considéré comme une citation implicitement légale ? La notion est floue. Contrairement à ce que son nom pourrait laisser croire, le droit de citation n'est pas un droit mais une tolérance. Un magistrat a eu l'occasion de juger qu'une durée de 30 secondes n'était pas suffisamment courte, compte tenu de la durée totale du morceau. Pour être légale, la citation ne devrait représenter que quelques secondes du morceau. De l'avis général, 8 à 10 secondes ne représentent pas un "extrait significatif", à 15 secondes, on commence à tenter le diable et à 30 secondes, on a des raisons de croire que l'on est en contravention avec la loi. Il y a également possibilité d'insérer un extrait sur le fondement de son caractère informatif. Dans ce cas là, un lien relativement étroit devra exister entre le contenu de la page, la mise en ligne de l'extrait et l'information diffusée.

Vous n'avez pas ce droit :

  • Si vous n'avez pas obtenu l'autorisation de le faire de toutes les parties concernées par l'oeuvre (auteur, compositeur, interprètes, éditeur).

En revanche, vous pouvez tenter le diable si :

  • Il ne s'agit que d'un court extrait de l'oeuvre : celui-ci doit être suffisamment long pour que l'oeuvre soit identifiable et suffisamment court pour ne pas porter ombrage à la distribution de l'oeuvre complète.
  • L'extrait ne peut être confondu avec l'oeuvre. Certains sites décident alors de diffuser l'extrait en mono et/ou dans un échantillonnage revu à la baisse.
  • L'écoute de l'extrait ne peut se faire que si l'auditeur a été informé des noms des créateurs, interprètes et distributeurs de l'oeuvre.
  • L'existence de la citation est justifiée par le caractère critique ou d'information dans lequel elle se trouve.
  • Vous vous engagez, sur simple indication d'une des parties concernées, à retirer un extrait contesté.

D'un autre point de vue, est-ce que le fait d'héberger son site hors de France permet de s'affranchir de ces contraintes ? Le débat reste ouvert...

Typo typique

vendredi 4 février 2005 | Webdesign

Robotype

A défaut de jongler avec les mots, il s'agit d'être adroit avec les lettres. C'est sur Robotype que les Léonards de la cédille pourront laisser leur empreinte dans la galerie.

Toujours dans le domaine des lettres, Libération se préoccupe de l'avenir de l'orthographe dans notre langue : Des élèves de plus en plus nuls en dictée, à qui la faute ?

De 28 % d'élèves en 2000 qui ont eu zéro à la dictée du brevet de 1988, la proportion est passée à 56 % en 2004.

Question subsidiaire : sur ces 56%, combien ont un skyblog ?