En gros, la conférence designertopia était une vitrine pour Microsoft des produits de sa suite Expression, de son système d'exploitation Vista et de la nouvelle couche de présentation/développement Windows Presentation Foundation.

De ce que j'ai entendu de mes compatriotes (pour la plupart issus du milieu graphique ou de la publicité) le contenu des conférences "Créatives" était toujours un peu le même.

Pour ma part, j'ai suivi les sessions "Techniques" et les démonstrations (surtout Carrie Longson) m'ont impressionnées. Pas la démonstration des pages tournantes pour la British Library - qu'on a déjà vu dix mille fois en flash, mais plutôt les applications mêlant des données en temps réel, des graphismes efficaces et des animations 3D (l'application pour le Métro de Londres entre autres) ou le lecteur du New York Times qui permet de consulter son journal d'une manière tout à fait nouvelle.

C'est clair que les Rich Desktop Application (comme dirait Fred Cavazza) ont de beaux jours devant elles. Et j'attends vivement de voir de mes yeux les premières applications Apollo d'Adobe pour vraiment comparer (hein pimz ?). C'est clair que Microsoft profite vraiment de l'accélération graphique et processeur pour les applications WPF mais, le fait de ne pouvoir être exécuté que sous WinXP SP2, Win2003 et Vista, est, pour moi, un frein. J'aurais voulu que ces applications tournent sur mon vieux Win2000 (PII 450Mhz - 512Mb) ou encore sur Windows Mobile et mon Qtek 8310.

D'un point de vue technologique, qu'ai-je appris ?

WPF vs WPF/E

WPF est une technologie pour créer les applications Desktop tournant sous le framework .NET 3.0 (donc pour WinXP SP2, Win2003 et Vista). Elle profite au mieux de l'usage du processeur et de la carte graphique pour afficher des animations en trois dimensions en temps réel.
WPF/E est le nom de code d'un plugin pour votre navigateur qui permet d'afficher des animations prévues à cet effet. Il sera disponible sur Mac et Windows (IE, FF, Opera, Safari).

XAML

Les deux technologies sont basées sur le langage XAML, pour extensible application markup language, lui-même une sous définition d'XML.

En gros, tous les éléments graphiques d'une application sont définis en XAML. Une illustration vectorielle pourra être transcrite en fichier XML à l'aide d'un plugin d'exportation de votre logiciel d'illustration. Le même processus pourra être effectué avec des fichiers 3D. WPF et WPF/E ne gèreront que du code XML... (je me demande encore comment ils vont convertir des bitmaps en XAML).

Expression Studio.

La suite de Expression de Microsoft est prévue pour toute la chaîne de production d'applications WPF-WPF/E. De la gestion des médias à la création de pages web. Cette suite de logiciel est bien sur à compléter par des applications côté serveur (de préférence en .NET 3) sous Visual Studio. Cette suite comprend :

Expression Web (déjà disponible).

Est le logiciel de Microsoft destiné à remplacer FrontPage et à concurrencer Dreamweaver sur le terrain de développement de pages internet. Il se focalise avant tout sur du code respectant les règles du W3C. Je suis en train de le tester. La gestion des stylesheets est originale ainsi que le wysiwyg qui permet d'ajouter du padding et des margin avec sa souris. Il a un validateur de code et d'accessibilité ! Par contre il est assez peu intuitif à l'usage, il est livré avec un cd tutorial de Lynda.com.

Expression Design (encore en beta).

Permet au designer de créer (comme Adobe Illustrator) des illustrations vectorielles prêtes à être exportées en XAML. Un des plus que j'ai vu, c'était la possibilité de créer des sortes de librairies de styles à réemployer (mais je ne suis pas assez callé en Illustrator pour savoir si une telle fonctionnalité n'est pas aussi dans le logiciel vectoriel d'Adobe).

Expression Media (disponible en version d'essais).

Est un logiciel de post production vidéo. Je n'y connais rien dans ce type de logiciels mais apparemment les possibilités d'éditer les vidéos à la suite (batch) et les exports de vignettes (thumbnails) et la possibilité d'ajouter des génériques de début et de fin étaient ses atouts majeurs. Pour moi, ce logiciel doit être bien pour automatiser le traitement de fichier vidéo en ligne pour des services comme YouTube Viddler (ou Proximus Moblogs v3 ^^)

Expression Blend (disponible en version beta).

C'est le logiciel d'intégration pour toutes les applications WPF-WPF/E. On y importe les éléments graphiques en XAML, on leur donne des comportements soit avec une ligne du temps ou des événements (fort proche de Flash tout cela). Le gros avantage est l'intégration avec les applications .NET. En effet, les développeurs créent leurs méthodes, fonctions et services web de leur côté, sous Visual Studio, et c'est à l'intégrateur de brancher les connecteurs adéquats sur les différents composants de l'interface de l'application WPF. Les designers sont contents parce qu'ils ne voient pas de code, les développeurs sont contents parce qu'ils ne doivent pas toucher aux composants graphiques. Les deux mondes peuvent continuer à travailler en parallèle tout bénéfice pour les intégrateurs qui seraient en mal de boulot .

Designer à gauche, programmeurs au droite et intégrateurs au centre. MS, c'est Funky

Remerciements

Ce petit séjour à Londres, m'a permis de voir pas mal de choses (la vision de Microsoft entre autres), de rencontrer beaucoup de personnes intéressantes. Je remercie encore Geert Desager de m'avoir invité.

Liens relatifs

• Exemples d'applications WPF
• Les photos designertopia sur Flickr
• Mes photos sur Proximus moblogs
• Vous avez d'autres exemples ?

© Marin for Gatellier.be, 2007. | Permalink | 4 comments | Add to del.icio.us
Post tags:

Format XML OpenSearch

Les définitions des différents éléments composant un XML OpenSearch nous aident à composer notre propre plugin de recherche.
Pour une installation standard de Firefox, vous trouverez les plugins déjà installés dans le répertoire C:\Program Files\Mozilla Firefox\searchplugins. Normalement ce répertoire ne contient que des fichiers .xml qui sont les définitions des plugins. Prenons-en un, le fichier amazon.xml

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>Amazon.com</ShortName>
<Description>Amazon.com Search</Description>
<InputEncoding>ISO-8859-1</InputEncoding>
<Image width="16" height="16">data:image/x-icon;base64,iVBORw0KGgoA...=</Image>
<Url type="text/html" method="GET" template="http://www.amazon.com/exec/obidos/external-search/">
	<Param name="field-keywords" value="{searchTerms}"/>
	<Param name="mode" value="blended"/>
	<Param name="tag" value="mozilla-20"/>
	<Param name="sourceid" value="Mozilla-search"/>
</Url>
<SearchForm>http://www.amazon.com/</SearchForm>
</SearchPlugin>

SearchPlugin

Définition du namespace des différents nodes du fichier xml (dans ce cas-ci, on parle de la définition de Firefox)

ShortName

Nom du plugin de recherche

Description

Description du plugin de recherche

InputEncoding

Encodage des caractères du formulaire

Image

Définition de l’icône qui sera ajoutée dans l’interface de recherche encodée en Base64

Url

Contient les différents attributs du formulaire de recherche

type

Format dans lequel les données sont envoyées au serveur

method

GET ou POST méthode d’envoi des données au serveur

template

C’est l’ACTION du formulaire de recherche

Param

Les différents champs qui sont passées au formulaire. Le champ sur lequel se fait la requête doit avoir la value="{searchTerms}". C’est les termes qui seront entrés dans le formulaire de recherche de Firefox

SearchForm

C’est le lien vers les soumissions de formulaires vides iront.

Analyse d’un formulaire à convertir en plugin.

Pour un premier exemple, je me suis basé sur la page d’accueil de Tutmaks.com (excellente ressource de tutoriels). Le moteur de recherche du site ne fonctionnant pour l’instant que sur des pages /index.php et pas sur les pages de détail /story.php.

A l’aide de l’Inspector de Firebug, j’ai facilement repéré que le nom du champ du formulaire était “search” l’action est vide (d’où l’erreur ci-dessus).

<InputEncoding>ISO-8859-1</InputEncoding>
<Url type="text/html" method="GET" template="http://tutmarks.com/index.php">
	<Param name="search" value="{searchTerms}"/>
</Url>

Pour un second exemple, j’ai pris la recherche inversée de numéros de téléphone sur 1307.be.

Il y a plusieurs champs cachés dans ce formulaire-ci. J’ai repris les nom et valeurs de ces champs en tant que Param de mon XML

<InputEncoding>ISO-8859-1</InputEncoding>
<Url type="text/html" method="POST" template="http://1307.be/fr/servlets/ReverseServlet">
	<Param name="number" value="{searchTerms}"/>
	<Param name="iso_language" value="fr"/>
	<Param name="template" value="1x07be"/>
</Url>

Ajout de l’icône du plugin de recherche.

J’ai repris les favicônes des sites repectifs. Je les ai enregistrées sur mon ordinateur et je les ai converties en base64 avec cet outil. De ce fait, les images sont transformées en code et sont plus facilement transportable d’un environnement à un autre (les images sont incluses dans le fichier XML sous forme de code).

La documentation OpenSearch précise qu’on peut aussi mettre une url vers une icône de favori ou autre image.

<Image height="16" width="16" type="image/x-icon"><br />
http://example.com/favicon.ico<br />
</Image><br />

Code à rajouter dans les pages html.

Pour que le plugin soit à la disposition de tout le monde, il faut l’insérer dans les pages de votre site.

Cela se fait aisément en ajoutant une balise link real="search" dans le header de la page html.

<link rel="search" type="application/opensearchdescription+xml" title="Tutmarks.com" href="/chemin-vers/définition.xml">

Ajouter les plugins créés à Firefox 2.

Quand un plugin de recherche a été trouvé par Firefox, l’icône de la liste des moteurs de recherche prend un fond bleuté.

En cliquant sur cette icône, on peut voir la liste des plugins de recherche. Dans le bas du menu, on peut rajouter les différents plugins de recherches.

L’ordre des moteurs de recherche peut être modifié et on peut aussi en supprimer via l’interface de gestion des plugins de recherche

Le plugin de recherche Tutmarks pour Firefox 2 prêt à l’usage.

Liens relatifs

• l’organisation OpenSearch
• Documentation sur le site Mozilla des plugin OpenSearch
• Tutorial pour les extensions Firefox avant la version 2
• Encoder et décoder en Base64 en ligne

© Marin for Gatellier.be, 2006. | Permalink | 17 comments | Add to del.icio.us
Post tags:

On peut maintenant parcourir la mappemonde Google Earth à la recherche d'une destination exotique et trouver directement l'aéroport et un hôtel le plus proche.

Convergence.

J'aime vraiment bien la convergence entre un support désormais traditionnel (site web) et une application beaucoup plus orientée utilisateur, visiteur (Google Earth). Cela permet aux bourlingueurs de voir une carte de manière conventionnelle et de directement trouver de l'information relative.

Les points faibles.

Le gros point faible reste quand même le processus d'enregistrement des vols ( "booking engine" ) qui est toujours pénible.

Une autre possibilité d'amélioration ce serait d'employer un fichier XML dynamique (plutôt que le fichier statique actuel) dans lequel des offres promotionnelles ponctuelles seraient mises à jour automatiquement.

A quand l'intégration avec GPS et Google Maps sur les téléphones mobiles?

Liens relatif

• British Airways et sa page pour télécharger le fichier kmz en question
• Google Earth
• Google Maps sur les téléphones mobiles
• via : vnunet

© Marin for Gatellier.be, 2006. | Permalink | No comment | Add to del.icio.us
Post tags:

Liens relatifs :

• Le blog officiel d'Emakina
• Le blog web2.0 d'Emakina

© Marin for Gatellier.be, 2006. | Permalink | 3 comments | Add to del.icio.us
Post tags:

Un an après, j'ai enfin trié les quelques 1000 photos que j'avais prises là-bas. Elles seront mises en ligne au fur et à mesure.

Un peu de technique quand même: le diaporama en flash est créé via SlideshowPro. Une version xml lisible est aussi disponnible.

Si vous voulez des photos, faites moi signe !

Liens relatifs:

• le diaporama en flash (première partie sur quatre) de notre voyage au Japon,
• la version lisible xml du diaporama (le fichier employé par le diaporama),
• l'article sur les diaporamas,
• l'article sur les xml lisibles,
• Slideshowpro

© Marin for Gatellier.be, 2006. | Permalink | 4 comments | Add to del.icio.us
Post tags:

Il y a plusieurs solutions possible:

• une page html reprenant avec des vignettes à cliquer qui pointe vers, à chaque fois, vers une autre page reprenant le détail de la photo.
  
  Avantage: un très bon référencement.
  Inconvéniant: peut-être compliqué parce que si on n'emploie pas d'outils pour générer ces pages, le travail peut être fastidieux. -> employer une base de donnée et une technologie server-side
  l'ergonomie de l'interface est assez limitée.
  
  ex: pupius, photos tchorski
• un diaporama en javascript permet de visualiser toutes les images sur un seul écran
  
  Avantage: l'interface peut être plus ergonomique; toutes les images peuvent tenir dans un écran
  Inconvéniant: portabilité cross-platform/cross-media, la mise en oeuvre peut-être plus complexe pour des novices.
  
  ex: couloir.org
• un diaporama en flash bien construit pourrait-être la solution idéale. J'ai essayé slideshowpro.net et, à vrai dire, j'aime bien
  
  Avantage: l'interface est complètement modulable, les images sont gérés par un fichier xml, les pages sont "bookmarkables", le player flash est disponible sur beaucoup de plateformes, etc
  Inconvéniant: slideshowpro.net est une solution payante ($20) et elle requiert le logiciel Macromedia Flash

Verdict? personnellement, je vote pour la solution flash. Et vous?

© Marin for Gatellier.be, 2006. | Permalink | 12 comments | Add to del.icio.us
Post tags:

La fin de l'année passée a été fournie en mises-à-jour de quelques de mes logiciels employés:

• le 29 novembre 2005: Firefox 1.5 est sorti
• le 31 décembre 2005: WordPress 2.0 est sorti

Comme j'ai pas mal de boulot, la mise-à-jour de WordPress attendra un petit peu.

Par contre, comme j'emploie tout le temps Firefox et que sa mise-à-jour a changé quelque peu la gestion d'extension, j'ai été un peu embêté de voir qu'une de mes extension préférée ne fonctionnait plus: l'extension GOUP.

Cette extension permet, à l'instar du bouton "navigate to parent directory" de la barre d'outils Google pour MS Internet Explorer, de remonter automatiquement d'un niveau sur un site web lorsque l'on clique sur son icône. Très pratique lors d'erreurs 404 et/ou pour visiter les blogs.

J'ai donc effectué une petite recherche sur le web pour voir comment on pourrait modifier une extension Firefox: je suis tombé sur ce site explicatif: Roachfiend.com.

Rien de plus simple à partir de ce lien.

Le fichier xpi que l'on peut télécharger est en peut être ouvert avec avec Winzip ou Winrar. C'est une archive contenant un fichier install.rdf, contenant lui-même les informations concerant l'installation de l'extension, et un folder contenant lui meme une archive .jar, qui contient toutes les informations concernant le fonctionnement de cette extension.

Le problème se situait dans l'id de l'extension:

Clav n'avait pas spécifié un guid valide d'où l'erreur affichée lors de l'installation de l'extension:

Toujours en suivant le site Roachfiend.com, j'ai trouvé un générateur de guid et j'ai corrigé l'extension erronnée.

Après avoir archivé les fichiers modifiés, j'ai enfin pu installer cette extension que je mets à votre disposition !

Cet article vous a plu? Réagissez

© Marin for Gatellier.be, 2006. | Permalink | 3 comments | Add to del.icio.us
Post tags:

A quoi servent-ils? A suivre de l'information rapidement sans devoir charger tout un site.

Normalement, on emploie un aggrégateur de flux pour les parcourir d'un coup d'oeil. Il en existe de nombreux logiciels ou sous forme de site web.

Grâce à mon aggrégateur préféré, je surveille presque quotidiennement une bonne 50taine de sites grâce à leurs rss. Un titre m'article m'intéresse? Hop, je clique et je lis.

Un RSS lisible

Là où le bât blesse, c'est quand un utilisateur non-confirmé clique un lien pointant vers le fichier rss. Il se trouve confronté à une page incompréhesible faite de code. Ce sera une expérience vraiment mauvaise.

© Marin for Gatellier.be, 2005. | Permalink | 4 comments | Add to del.icio.us
Post tags: