Blup!

Dewslider permet de réaliser des slideshows d'images en Flash.

Mise à jour : nouvelle version disponible ici : Dewslider

La principale nouveauté réside dans l'utilisation d'un fichier XML pour stocker la liste des images à afficher, ainsi que dans l'ajout d'options pour personnaliser les couleurs, le style et l'ombrage du cadre (qui reste facultatif). La taille de l'animation s'adapte désormais automatiquement aux proportions, sans déformer les images. Elle est modifiable librement dans les options et influe sur les positions des boutons, du cadre et de la légende, ce qui fait qu'au final l'ensemble est beaucoup plus souple à utiliser et peut convenir à n'importe quelle mise en page. L'autre petite correction mineure figurant au programme est la désactivation du mode automatique lorsqu'un des boutons est pressé.

Voici un fichier XML exemple, à nommer dewslider.xml par défaut et à placer dans le même répertoire que le fichier swf :

<?xml version="1.0" ?>
<album
 width="500"
 height="375"
 bgcolor="0x336699"
 framecolor="0xffffff"
 padding="10"
 margin="10"
 shadow="8"
 shadowopacity="20%"
 shadowcolor="0x000000"
 showbuttons="on"
 buttonstyle="transparent"
 showtxt="on"
 txtcolor="0xffffff"
 auto="5"
 fullscreen="off">
  <img src="photo1.jpg" title="Légende de la photo 1" />
  <img src="photo2.jpg" title="Légende de la photo 2" />
  <img src="photo3.jpg" title="Légende de la photo 3" />
</album>

Et voici le détail de ces options :

width="500" height="375"

Largeur et hauteur, en pixels, des images à afficher. Cela doit correspondre à la zone affichant les JPG, pas aux dimensions totales de l'animation SWF qui peut être beaucoup plus grande (en comptant les marges par exemple).

bgcolor="0x336699"

Couleur de fond de l'animation. Il s'agit du même code hexadécimal que pour les couleurs HTML, sans # mais précédé de 0x. Exemple : 0x336699 au lieu de #336699.

framecolor="0xffffff"

Couleur de fond du cadre (Ici du blanc).

padding="10"

Espace entre les bords du cadre et des photos. Il suffit de le mettre à 0 pour ne pas utiliser de cadre.

margin="10"

Marge entre les bords du cadre et ceux de l'animation. En général ce chiffre doit être supérieur ou égal à la taille de l'ombrage.

shadow="8"

Taille de l'ombre sous le cadre. Mettre à 0 pour désactiver.

shadowopacity="15%"

Opacité de l'ombrage. Des valeurs faibles sont recommandées.

shadowcolor="0x000000"

Couleur de l'ombrage. (Ici du noir).

showbuttons="on"

Montrer les boutons suivant/précédent. Mettre à off pour les masquer.

buttonstyle="transparent"

Style des boutons. Il est possible de choisir entre default, transparent et flat.

showtxt="on"

Afficher la légende (attribut title dans le fichier XML) des photos s'il y a lieu et leur numérotation. Mettre à off pour désactiver.

txtcolor="0xffffff"

Couleur de la légende, indiquée de la même façon que la couleur de fond. Ici du blanc.

auto="5"

Délai. Mettre à off ou 0 pour désactiver.

fullscreen="off"

Mode plein écran : l'image remplira toute l'animation, sans marges, masquant cadre, boutons et légende. A réserver pour les cas particuliers.

Le tout est suivi de la liste des images à l'aide de tags img complétés par les attributs src et title, choisis par ressemblance avec le HTML de base pour faciliter la vie à tout le monde. Il est recommandé de se servir de l'Unicode pour constituer ce fichier XML sinon les titres comportant des caractères accentués seront affichés aléatoirement. Voici un exemple sans couleur de fond ni cadre (padding à 0), avec des boutons de style flat :

Je rappelle le code HTML pour se servir de l'animation :

<object type="application/x-shockwave-flash" data="dewslider.swf" width="640" height="480">
<param name="bgcolor" value="#ffffff" />
<param name="menu" value="false" />
<param name="movie" value="dewslider.swf" />
</object>

NB : le paramètre bgcolor du code HTML peut être modifié lui aussi pour être cohérent avec celui du fichier XML, c'est même recommandé. Par contre les dimensions width (largeur) et height (hauteur) spécifiées ci-dessus seront celles de l'animation Flash dans la page, et donc indépendantes de leurs homologues XML, décrivant elles la taille des images à afficher dans l'animation elle-même. Il est possible d'utiliser un nom de fichier XML différent, via l'argument ?xml=nom_du_fichier.xml :

<object type="application/x-shockwave-flash" data="dewslider.swf?xml=arf.xml" width="640" height="480">
<param name="bgcolor" value="#ffffff" />
<param name="menu" value="false" />
<param name="movie" value="dewslider.swf?xml=arf.xml" />
</object>

Breaking News : Opera arrêtera de s'identifier en tant qu'Internet Explorer

C'est une bonne nouvelle pour tous ceux qui tentent d'établir proprement des statistiques d'usage de navigateurs. La décision a été motivée par la montée des navigateurs alternatifs dont Firefox et Safari/Konqueror font partie, obligeant les créateurs de sites à ne plus ignorer ou refuser l'accès à des moteurs non-IE. Opera compte entre 10 et 15 millions d'utilisateurs, ce qui n'est pas négligeable et représente un fort potentiel de support fiable des standards. Les dernières releases internes d'Opera sont proches de la perfection au test Acid2 qui vise à évaluer la conformité du rendu CSS des navigateurs. Gecko, le moteur de Mozilla, Firefox et Camino (entre autres) s'en sort très moyennement, et il ne vaut mieux pas parler d'IE qui s'écrase dans la soupe de tags en éclaboussant partout.

Inkscape est récemment sorti en version 0.42 pour Windows, Linux et Mac OS X. Ce projet open-source de dessin vectoriel en SVG est plutôt bien avancé et disponible en français. C'est un fork de Sodipodi qui bénéficie d'une énergie d'évolution plus soutenue que son homologue.

Côté Win, l'intégration est nettement mieux réussie que Gimp, bien que l'affichage des fenêtres et palettes ne soit pas très optimisé et que l'agencement des boîtes de dialogue puisse dérouter. GTK oblige. Mais pour une première impression, je dois dire que c'est plutôt réussi.

Quelques features majeures sont programmées pour les prochaines versions, hormis l'objectif naturel de toujours perfectionner l'implémentation de SVG et des outils de dessin :

• import et export PDF
• import Adobe Illustrator
• support de l'animation (pour concurrencer Flash)
• intégration de Cairo
• amélioration du presse-papiers
• meilleur support des polices

La roadmap en dévoile bien plus à ce sujet, et une documentation très claire (en français) permet de se familiariser avec les bases du dessin vectoriel. Pour avoir un meilleur aperçu, un certain nombre de screenshots dévoilent en image les possibilités créatives d'Inkscape.

Voici un essai, dans l'esprit de saison pour tous ceux qui sont assignés à geeker devant un wallpaper loin de la plage et de Leonardo : Da beach comme on dit chez nous.

Dispo 1024x768 1152x864 1280x960 1600x1200 et la source plage.svg

Prévu à l'origine pour Enemy Territory, Strategy Mapper est une application Flash permettant de disposer sur une carte des symboles et des commentaires, puis de la sauver sur le serveur.

Les 6 cartes de base d'Enemy Territory (battery, fueldump, goldrush, oasis, radar, railgun) sont incluses par défaut, ainsi que quelques symboles de classes et d'objectifs. Pour voir/tester/détruire en live : Démo Strategy Mapper, l'exemple est en lecture seule.

Des screenshots de vues aériennes 3D sont aussi utilisables en fond de carte. Il est possible de télécharger strategy.fla avec les images et scripts associés permettant d'interagir avec les fichiers de map. Au-delà de l'intérêt purement stratégique pour les équipes s'adonnant à ce genre de FPS, cela peut servir d'exemple pour manipuler des fichiers en passant par une interface PHP simplifiée et la méthode LoadVars, pour y stocker des objets créés dynamiquement ainsi que leur disposition. C'est en beta, libre et sous licence Creative Commons.

Quelques petits logos qui ne serviront jamais...

Servez-vous, c'est sous licence Creative Commons. Versions haute résolution & vectorielles disponibles sur demande. (NB : noms purement fictifs à modifier. Idée de base axée sur un thème audiovisuel et communicant donc si vous souhaitez vendre des tomates avec, il vaut mieux éviter. Quoique... Apple vend bien des iPod avec une granny smith.)

Après une sortie dont une majorité de sites attachés aux standards se sont fait l'écho, il convient de faire un point modeste sur le livre de l'été.

CSS 2 : Pratique du design web, c'est un peu comme un best-seller de Nadine de Rothshild concernant le savoir-vivre médiéval du 21e siècle, mais sans Nadine. Ce qui est déjà un bon début. Là aussi le bonheur de séduire et l'art de réussir vous attendent au tournant, mais avec le très stylé Raphaël de Goetter qui ne vous parlera pas des arts de la <table>.

Je ne peux faire de comparaison objective car je n'ai pas lu d'autre bouquin sur les feuilles de style. Peu de gens s'amusent à acheter, lire et relire de multiples livres sur le même sujet. C'est pourquoi il est intéressant de toujours choisir le bon. Inutile aussi de faire long et de reprendre le sommaire qui est désormais connu et qui donne un aperçu de la vastitude* des sujets abordés. Inutile de le placer comme la Bible indispensable à courir acheter (surtout que je ne suis pas encore arrivé à négocier une commission avec Raphaël sur les liens sponsorisés vers Amazon). Et pourtant, tout webmaster ou tout rémouleur qui s'adonne aux joies de la création de sites en amateur ne pourra qu'en ressortir Gandi grandi.

Pour un débutant ou un utilisateur confirmé, il y a toujours quelque chose à découvrir, et ce dans chaque chapitre. C'est donc un investissement qui en vaut la peine car il prodigue une réelle valeur ajoutée, sans subir de torture avec les spécifications. L'exploration des CSS se fait dans le détail. On en fait le tour, de façon fluide, avec de nombreux cas pratiques (peut-être trop, mais chacun en jugera par soi-même).

On peut se dire aussi : tout est déjà disponible sur le net, pourquoi chercher plus loin ? Simplement parce que ce livre est la somme de l'expérience de quelqu'un qui a déjà fait les recherches et le tri pour vous, en français de surcroît; un recueil fiable de connaissances à portée de main, qui regroupe l'essentiel, le meilleur de ce qui existe et même plus que l'essentiel du meilleur parce qu'il le vaut bien ($commission++).

Avec ce livre dans les mains à la plage, tout le monde sera à vos pieds.

* oui, ça existe.

Quelques webmasters alsaciens, ont le plaisir de vous annoncer l'organisation d'une rencontre (culinaire) qui a été nommée <web-in-stras /> et qui se tiendra le vendredi 1er juillet à Strasbourg à 20h30. De nombreux thèmes seront abordés, entre autres :

• Comment bien nettoyer un tag HTML sur un mur avec Tidy ?
• Faut-il considérer les utilisateurs de Frontpage comme des satanistes ?
• Faut-il avoir peur de se montrer trop Strict avec le Transitionnal ?
• Une feuille de style peut-elle servir lorsqu'on n'a plus de papier ?

Ce sera l'opportunité de rencontrer les geeks qui ont du <style> et d'échanger, de partager les retours d'expérience et les points de vue... et accessoirement de manger un bout.

Un sujet a été ouvert sur le Forum Alsacreations, afin de recueillir les participations et les commentaires.

La description d'interfaces graphiques en XML donne lieu à des conflits souterrains dont on ne soupçonne pas toujours l'existence. Macromedia (Adobe inside) souhaite imposer le MXML avec Flex, concurrent direct de XUI, XForms/SVG.RCC, XAML (Microsoft) et surtout de XUL, à prononcer Zool, qui lui est dans les mains de la fondation Mozilla.

Ce sont des langages permettant de concevoir, ou plutôt de décrire, des fenêtres d'applications, avec une large gamme de composants tels que des boutons, des listes déroulantes, des champs texte etc. Généralement ces langages de description de contenu sont associés à un langage de script (JavaScript dans le cas de XUL, ActionScript dans le cas de Macromedia) pour répondre aux événements, comme un clic de souris.

Exemple MXML affichant un simple Hello World :

<?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
  <mx:Label text="Hello World!"/>
 </mx:Application>


Dans le cas de Flex, quand une application est compilée, les instructions MXML sont converties en ActionScript et regroupées en un fichier SWF qui est envoyé au lecteur Flash pour être exécuté. Les composants Flex vont du simple bouton ou de la case à cocher à des outils plus complets comme le calendrier, les grilles de données (tabulaires ou non), les graphiques, les boîtes de dialogues, les arborescences, et les onglets. Une démo très esthétique d'un catalogue d'achat, baptisée FlexStore, permet de se faire une idée sur les améliorations pouvant être apportées à l'expérience des acheteurs sur internet; plus sobre, un aggrégateur RSS illustre la flexibilité vis-à-vis du XML et des sources de données distantes.

On retrouve une synthèse de tous ces langages et d'autres sur la page du challenge XUL 2004 visant à reproduire la même application (un compteur) avec chaque méthode et à constater laquelle est la plus simple à mettre en oeuvre. C'est un enjeu important car il est probable que toutes les UI du futur reposeront sur ces langages interprétés.

Pour en savoir plus :

• XULfr.org
• XUL Planet
• Macromedia Flex
• Exemples Flex
• 01net : Les clients riches XML remplaceront-ils les interfaces HTML ? (PDF)

Hors sujet et fait plus étrange dans le contexte actuel, Macromedia dispose de FlashPaper, une technologie basée sur Flash et concurrente du PDF pour produire des documents universels destinés à l'impression ou à la consultation (principalement à partir de Word, Excel et Powerpoint). Maintenant qu'Adobe a racheté Macromedia, on peut s'interroger sur l'avenir d'une telle solution.

La prochaine version majeure de Flash (8), nom de code Maelstrom, compte tout emporter sur son passage.

Les précédentes versions se sont vite imposées et revendiquent à juste titre le statut de plug-in le plus répandu, disponible pour tous les navigateurs modernes et tous les systèmes d'exploitation. Il n'est plus la peine de présenter ce langage jusqu'à présent très orienté web pour produire des interfaces riches et des animations vectorielles.

Macromedia estime qu'il s'écoule environ 12 mois entre la sortie de chaque nouvelle version et une conquête de 80% du marché.

Même si plane encore la menace du "flashcapucaypaslibre", l'accent est désormais mis sur l'accessibilité avec le support de lecteurs d'écran, et la communication publique des spécifications du format SWF, donnant la possibilité à des dizaines de programmes indépendants de produire des animations. Flash s'appuie aussi sur des standards tels qu'ActionScript (validé par l'ECMA), JPEG pour l'image, MP3 pour l'audio, H.263 pour la vidéo, XML et SOAP, HTTP et HTTPS.

Outre son domaine de prédilection, Macromedia tente de développer son utilisation dans les entreprises en tant qu'applications à part entière, ainsi que sur les périphériques nomades avec Flash Lite qui est un lecteur destiné aux mobiles (280 Ko contre 1 Mo pour la version standard) supportant même le SVG-T et une version d'ActionScript du niveau de Flash 4.

Maelstrom (Flash 8) compte donc offrir :

• nouvelles possibilités graphiques sur les bitmaps
• meilleures performances à l'affichage
• meilleure lisibilité des polices
• amélioration de la qualité des vidéos
• support de la transparence des vidéos
• support du téléchargement et de l'envoi de fichiers (une animation peut demander à un utilisateur de sélectionner un fichier sur son disque dur pour l'envoyer sur le serveur, ou de sélectionner un emplacement pour sauver un fichier téléchargé)

Revenons aux nouveaux effets disponibles sur les images, qui manquaient cruellement jusqu'à présent. A l'origine, Macromedia Flash est un outil conçu pour des animations vectorielles légères. Ce n'est qu'avec le haut débit et sa conquête croissante des sites pro et design que l'emploi de vidéos et de bitmaps est devenu courant. Les filtres et effets d'ombrages, de flous, etc (la panoplie complète des habitués de Photoshop, Paint Shop Pro, ou Gimp) n'étaient réalisables qu'avec ces outils de retouche. Il fallait donc par exemple réaliser image par image un texte devenant flou et l'incorporer dans l'animation avec l'inconvénient du poids des bitmaps et de l'anti-souplesse. Ceci sera désormais possible en Actionscript, dynamiquement, sur les formats GIF/PNG/JPEG.

Web-pour-tous est ouvert depuis quelque temps déjà. Ce site se veut être une passerelle entre les acteurs du handicap et les acteurs du Web pour qu'ensemble nous puissions faire avancer l'accessibilité pour tous les types de handicaps. Merci à Knarf de m'avoir fait confiance pour le design, dont voici un aperçu de la suggestion originale :