designertopia: démos wpf

Ces un et deux février 2007 se tenait à Londres, la conférence Designertopia de Microsoft. J'y étais invité par Microsoft Belgique par l'intermédiaire de Geert Desager en tant que représentant d'une des (grosses) agences web en Belgique ainsi que Philip Schiebold d'Ogilvy, Petra Sell d'i-Merge, Michael Thuy de DuvalGuillaume|E, Geert Feytons de AtmosphereBBDO, Johan Wuyckens de D.A.D., Talia Hendlisz et Tanguy De Kelver de McCann-Erickson.

Microsoft vision to the future

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.

London Metro Rich Desktop Application

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).

Defining 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 ;) .

webteam by MS
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

Plugin de recherche OpenSearch pour Firefox 2

Firefox version 2 supporte le standard de formatage de données de recherche OpenSearch. Grâce à cela, on peut créer des petits plugins de recherche très utiles pour son navigateur préféré.

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.

Ecran de recherche Tutmarks.com

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.

Ecran de recherche inversée de numéros de téléphone 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é.

Un plugin de recherche a été trouvé par Firefox

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.

Ajout de plusieurs plugins de recherche dans Firefox

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

écran pour ranger les plugin de recherche sur Firefox

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

Le plugin de recherche sur Tutmaks est prêt à l'usage

Liens relatifs

British Airways fait des promos sur Google Earth

British Airways, la compagine aérienne Britannique, emploie Google Earth pour mettre en avant des offres de nuits d'hôtels et de vols vers les destinations qu'elle déssert.

Destination Tokyo - Google Earth et British Airways

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.

Les offres de British Airways sur Google Earth Septembre 2006

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

Le blog officiel d’Emakina

le blog d'Emakina

ÿa y est, Emakina sort son blog. Une version customisée du thème par défaut de wordpress. Bon, il reste encore des petits bugs d'affichage dans la sidebar mais, l'essentiel est déjà là.

Les catégories actuelles

Il y a des flux RSS par catégorie d'articles (une par département avec chacune sa couleur). Et ces flux RSS sont lisibles par les humains sans lecteur de flux. (pour l'instant pas encore grand chose mais, j'espère que le contenu sera pertinant) Et vous, vous en pensez quoi ?

Liens relatifs :

Voyage au Japon – 1 an après

Le 16 mai 2005, nous partions pour un voyage au Japon. Au menu du programme: rendre visite à Laureline (et ses bombyx), découvrir le Pays du Soleil Levant, Tokyo, Kyoto, Suzuka, Hiroshima, Tsukuba, Nagoya, ...

écolières japonnaises dans les rues de Tokyo

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:

Next Page →