Gatellier.be » emakina

Pipi, caca, et madame pipi

Marin — Mon, 22 Oct 2007 10:08:30 +0000

Un petit site viral, à l'humour bien belge (il n'y a qu'en Belgique qu'on voit des madame Pipi), pour une banque, ça change !

voir le site viral I-NeedToGo

Concept Tichke évidemment et réalisé par Emakina.

Nouveau site pour Emakina

Marin — Mon, 23 Apr 2007 09:34:48 +0000

Le nouveau site d'Emakina est en ligne depuis vendredi soir (20 avril 2007).

Il est encore en phase de débogage-peaufinement. (En bêta comme dit le logo).

Vous en pensez quoi ?

Globalement, je le trouve mieux que l'ancien point de vue graphique, je trouve qu'il manque vraiment de contraste entre les couleurs de texte et de fond et que la(les) navigation(s) sont un peu confuses. Les vidéos sont pas mal mais elles rament sur des vieux ordis.

Mais, ce n'est que mon avis.

[edit]: j'oublie de signaler que je figure dans le site pour ceux qui ne me connaitraient pas. Photo prise par XVIII et retouchée par AFO (pour les crédits)

[edit2]: Je viens de rajouter des captures d'écran de l'ancien et du nouveau site Emakina sur mon compte Flickr:

L'ancien design de la page historique d'Emakina
Et le nouveau design de la page historique d'Emakina

designertopia: démos wpf

Marin — Sun, 11 Feb 2007 22:52:18 +0000

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.

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

Meilleurs vœux 2007

Marin — Mon, 22 Jan 2007 15:38:56 +0000

Reçu récemment à la réception d'Emakina : la carte de vœux d'Anysurfer.be.

Même si je n'ai pas tout compris (et si quelqu'un peut m'aider...), j'ai trouvé la démarche vraiment sympatique.

Il s'agit en fait d'un cécogramme comme on peut en envoyer sur le site Braillepost. Notre carte de remerciement est bien sûr passée par ce service.

C'est clair que maintenant, je suis concerné. J'en reparlerai.

Liens relatifs :

Le service d'envoi de cécogrammes.
Les directives pour obtenir le label Anysurfer.
à étudier : OpenWeb pour les Standard du web.
à mettre en favori : le blog de Webatou (coucou Monique !)

Utilisabilité et flash : menus contextuels (m.à.j.)

Marin — Sat, 20 Jan 2007 16:49:39 +0000

Ceci est une mise à jour de mon article sur les liens utilisables dans flash à l'aide de menus contextuels.

Un développeur flash d'Emakina a remanié mon script, avec une classe ActionScript 2, pour faciliter l'intégration des menus contextuels sur les liens dans les animations flash.

Voici l'exemple :

Exemple de menu contextuel sur les liens en flash avec une classe ActionScript 2

Exemple qui, si vous cliquez avec le bouton droit de la souris sur l'un des trois derniers boutons, devrait donner ceci.

Utilisation :

Cette fois-ci, c'est encore plus simple :

Vous importez un fichier actionscript dans votre fichier .fla et, lorsque vous avez un lien, au lieu d'appeler la fonction .getURL(), vous employez la classe new addContextMenuLink() avec deux paramètres.

le nom de l'instance d'un movieclip ou d'un bouton,
l'url qui sera appelée lors du clic du lien.

Exemple :

Voici le code source de l'exemple ci-dessus :

import addContextMenuLink.as;
new addContextMenuLink(advancedButton,"http://www.google.be");
new addContextMenuLink(advancedButton2,"http://www.gatellier.be/blog/");
new addContextMenuLink(advancedButton3,"http://blog.sakanadesign.com");

Les trois boutons derniers boutons de l'animation ont été nommés respectivement advancedButton, advancedButton2 et advancedButton3. Chacun de ces trois boutons aura la série de liens contextuels pour ouvrir les url vers laquelle ils pointent, dans la même fenêtre, dans une nouvelle fenêtre et pour copier cette url dans votre clipboard.

Liens relatifs :

Téléchargez les fichiers source de cet article.
Le blog de Sakanadesign qui a écrit la classe actionscript.

Si vous avez des remarques ou des améliorations à apporter, n'hésitez pas à m'en faire part au travers des commentaires.

Reblog de Proximus Moblogs via XMLRPC

Reblog — Tue, 28 Nov 2006 19:31:49 +0000

view this picture on my Proximus Moblog

Ajax: Reconnaissance de caractères japonais

Marin — Tue, 31 Oct 2006 14:57:14 +0000

Via Fabrice de Reviewing the Kanji et d'Emakina, je suis tombé sur une application de reconnaissance de caractères japonais en Ajax

Bon, même si les explications sont en japonais et que mon court séjour là-bas l'année passée ne m'a pas permis d'apprendre toutes les subtilités de la langue, le concept est très intéressant.

Une interface de dessin gérée via javascript enregistre les points qui ont été tracés.

Un post en Ajax vers le serveur permet de récupérer les différents caractères qui ont été compris par le serveur.

Utilisation d'Ajax appropriée.

L'utilisation d'Ajax est tout à fait appropriée dans ce cas-ci. Le visiteur dessine à l'écran (en créant des span ayant une certaine class). Si la page avait été rafraîchie lors de la soumission du formulaire, le serveur aurait du retourner: soit une image générée avec les coordonnées des points, soit la liste des points qui auraient du être retraités pour redessiner le dessin (ouf)...

Il ne me reste qu'à m'exercer sur mes Kanjis avant de retourner voir Linou au Japon.

Liens relatifs

Je (re)découvre Firebug ou le débogage facile

Marin — Wed, 11 Oct 2006 16:11:26 +0000

En préparant un petit article, je suis tombé sur cette vidéo qui montre comment déboguer avec Firebug.

Je suis presque tombé de ma chaise. Je ne connaissais pas la moitié des capacités de cette merveilleuse extension de débogage pour FireFox, que j'emploie quand même depuis un bout de temps (v0.2 si les souvenirs sont bons).

Avant, je ne l'employais que pour tracer mes appels Ajax et les réponses du serveur et tester des variables et fonctions, le tout dans la console.

Je n'avais pas vraiment vu la puissance du débogueur.

Une petit explication s'impose.

Pour que Firebug s'arrête à chaque erreur, il faut que l'option soit activée. (onglet "Debugger", menu "Options").

Je pensais que toutes les options étaient regroupées à un seul endroit. Soit, je m'encroûte, soit l'interface n'est pas super parlante.

Bon maintenant regardons tout ce que l'on peut faire avec ce débogueur.

Le principe est le suivant : on appelle des méthodes de l'objet console en lui passant des paramètres.

console.log("message" [,objects])
console.debug("message" [,objects])
console.info("message" [,objects])
console.warn("message" [,objects])
console.error("message" [,objects])
etc...

La liste complète des méthodes de Firebug est bien évidemment disponible en ligne.

Vraiment bien fait ces petites méthodes (surtout celles qui permettent d'évaluer le temps qu'un javascript met).

Adopté par toute l'équipe des intégrateurs, et certains développeurs. Merci Joe Hewitt !

Liens relatifs :

Firebug, l'extension de débogage pour Firefox
Le blog du développeur de l'extension Firefox
La vidéo explicative - qui m'a révélé le potentiel de Firebug
Un autre article intéressant sur Firebug

Voter, c’est important

Marin — Tue, 10 Oct 2006 13:33:58 +0000

Je ne parlerais pas du rachat de YT par G (déjà réchauffé)

Ce weekend était jour d'élections en Belgique, j'ai eu une dispense de ma tâche civile d'assesseur (que j'aurais quand même bien voulu accomplir) pour cause de travail.

Dans un mois, il y a aussi des élections aux États-Unis.

En allant faire le tour des places connues sur Google Earth (l'événement Burning Man 2006 [kmz] entre autres), je me suis rendu compte que des petites étoiles décoraient les différents états de la Confédération.

A première vue, je me suis dit: Chouette des infos géographiques (pour mieux gagner à Géosense) puis, j'ai cliqué une de ces étoiles.

C'est une bonne chose que Google rappelle aux Américains du Nord que, bien que le vote n'est pas obligatoire chez eux, c'est important de voter !

Pour ceux qui n'en n'ont rien à faire: ces petites étoiles peuvent êtres désactivées dans la partie "layers" (couches) de l'interface de Google Earth

Liens relatifs

Le post de Soph sur ces élections belges
Le site qui m'a bien (en tout cas beaucoup) tenu occupé ce dernier mois

Le blog officiel d’Emakina

Marin — Thu, 24 Aug 2006 16:44:39 +0000

ÿ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à.

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 :

German Kid’s Angry-gram

Marin — Fri, 18 Aug 2006 23:10:31 +0000

Les services vidéo ont le vent en poupe ces derniers temps. On se souvient tous des fameux Starwar Kid et Numa-Numa Guy. La dernière vidéo en vogue est le German Angy Kid.

Les derniers temps n'ont pas été trop durs pour l'équipe de flasheurs chez Emakina ces derniers temps puis qu'ils ont profité de leur temps "on the beach" (entre deux épisodes de vwescape.tv) pour réaliser une adapation virale à leur manière: le German Kid's Angry-gram qui vous donne la possibilité de mettre un sous-titre personnel à la vidéo.

But du mini-site? Passer ses temps libres en se formant et pourquoi pas, recruter des petits nouveaux.

[edit 20070117] Note pour les grincheux sous linux: on sait que ça ne marche pas parce que le plugin Adobe Flash Player sous leur système d'exploitation est resté à la version 7. Adobe vient de sortir le plugin flash version 9 pour les systèmes Linux [/edit]

Créer son logo Web2.0 en ligne

Marin — Thu, 17 Aug 2006 11:38:27 +0000

On pouvait déjà créer ses boutons en ligne, maintenant, on peut aussi créer son logo très Web2.0 (couleurs pastel, réflexion, transparence).

Ils sont tout beaux, ils sont tous brillants, mais, pour le sens du logo je vous laisserai seuls juges.

liens relatifs

[edit]: je viens de mettre à jour l'adresse du site - 20070516[/edit]

Cartes géographiques sur son portable: Google Maps pour téléphones mobiles.

Marin — Wed, 26 Jul 2006 10:02:39 +0000

Google Maps pour téléphones mobiles vient d'être mis à jour. Je me suis empressé de tester tout cela ce matin (en attendant toujours l'arrivée de ma puce gps).

Je me suis connecté avec mon gsm (Qtek 8310) en wifi sur le site Google Maps pour téléphones mobiles où j'ai téléchargé l'application. Une fois installée sur mon gsm smartphone, tout marchait directement.

Résultats : impressionnant

Google Maps pour téléphones mobiles est une petite application java qui s'installe sur le gsm:

capture d'écran de la liste d'applications java une fois Google Maps pour téléphones mobiles installé

Google Maps pour téléphones mobiles fonctionne comme son frêre sur internet : avec le curseur de votre gsm vous pouvez vous déplacer sur la carte, zoomer en avant et en arrière.

capture d'écran de la vue de Bruxelles sur Google Maps pour mobiles

On peut calculer des itinéraires entre deux points entrés sur la carte, Google Maps vous donnera le chemin avec des indications (c'est assez précis : l'application tient compte des sens interdits... juste quelques petites imprécisions.)

capture d'écran de l'itinéraire entre Emakina et chez moi sur Google Maps pour mobiles

Le résumé de l'itinéraire est assez précis : le temps et la distance calculée sont à peu près le temps et la distance que je mets pour me rendre au boulot. (ces itinéraires peuvent être sauvegardés - on accède à ses sauvegardes via la touche * du téléphone)

capture d'écran du résumé de l'itinéraire entre Emakina et chez moi sur Google Maps pour mobiles

On peut aussi faire des recherches locales, les résultats seronts affichés sur la carte.

Conclusion :

Google m'impressionne encore par l'intuitivité de ses application. Google Maps pour téléphones mobiles pousse encore la convergence entre internet et les pda/smartphones. Attention quand même à la facture si vous utilisez Google Maps via une autre connection que le wifi !

Liens relatifs:

JSTween “diggé”

Marin — Wed, 10 May 2006 19:09:30 +0000

Je n'avais jamais visité en détail le site digg.com jusqu'à cet après-midi, au moment où PIMz vient me montrer les log Google Analytics d'un de ses blogs.

Le site JStween est une simple page reprennant une étude que Philippe Maegerman a réalisée. Le concept de l'étude est le portage en javascript de classes de tween (motion, color, opacity,...) qu'il avait créé pour Actionscript (right Pim?). Le tout avec sources et exemples à l'appuis ! Je connaissais l'effet Slashdot (définition en anglais sur Wikipedia) à cause duquel plusieurs sites se sont retrouvés inaccessibles : voici l'effet Digg !

visites et vues de pages explosées

venant devinez d'où ?

et partout dans le monde

et finalement un pagerank qui booste.

A qui le tour ?

Peut-être à vous si vous publiez du contenu intéressant et cela... passionément. Félicitations Pim !

Liens relatifs

Casting télévision en ligne et en flash: EscapeTV

Marin — Tue, 09 May 2006 18:55:21 +0000

Je ne suis plus trop fan de sites en Flash mais la, il n'y a pas à dire, ils ne pouvaient pas faire autrement.

Vous aussi vous pouvez participer à ce petit concept: il s'agit d'un casting pour une émission diffusée sur internet EscapeTV. Grâce à FlashComm Server, votre vidéo sera sauvée et accessible aux visiteurs du site. Les vidéos les mieux côtées seront sélectionnées (j'imagine). Techniquement et visuellement, c'est bien fait.

J'ai trouvé bien sympa le fait de voir ma tête sur les moniteurs dans la salle d'enregistrement.

Evidemment, il faut un pc récent, le flash player 8, et une webcam pour participer. Un bon site de marketing viral quoi!

Il s'agit d'une publicité, n'oubliez donc pas de lire les informations légales.

Lien relatif:

EscapeTV.be

Ajax à la rescousse de l’Information Contextuelle

Marin — Thu, 04 May 2006 21:06:32 +0000

Je ne sais pas depuis combien de temps la fonctionnalité existe, mais je suis impressionné par le système d'information contextuelle du site du Wall Street Journal.

En selectionnant un mot ou une phrase, puis en cliquant avec le bouton droit de votre souris dans n'importe quelle page du site, une fenêtre s'affiche proposant aux visiteurs de consulter des articles sur la même thématique que le mot/phrase qu'ils ont surligné. Les browsers ont tous un menu contextuel (clic-droit de la souris ou +clic sur les Macs sans MightyMouse) qui permet d'afficher différentes actions possibles pour un élément (ici une page web). Dans ces actions, il existe souvent une possibilité de faire une recherche sur le mot sélectionné. La bonne idée qui est mise en oeuvre ici est de faire remonter de l'information sur un sujet qui intéresse le visiteur.

Ajax et DHTML

Côté technique, un bon vieux javascript interroge un serveur web sur le terme séléctionné via Ajax. Le serveur retourne des informations relative à la requête. Ces informations sont ensuite parsées et affichées dans un layer via DHTML.

"Unobtrusive"

Un autre exemple d'information contextuelle existe déjà depuis quelques temps: les IntelliTXT

Un idée qui était très intéressante à la base (pour afficher des informations contextuelles) mais évidemment, la pub s'en est mêlée et maintenant, j'assimile ces intelliTXT à du spam. (que j'ai combattu en ajoutant leur domaine dans ma liste de filtres AdBlock)

Un vrai concept Web2.0.

On y retrouve Ajax, des intéractions vraiment intelligentes avec le surfeur, le tout sans forcer la main de l'utilisateur. Il ne reste plus qu'à optimiser le positionnement et la taille de la fenêtre d'affichage ("overLayer" - dans notre jargon) de ces informations contextuelles et appliquer cette techniques à d'autres sites (a-t-on légalement le droit de reprendre de tels concepts?) et on aura vraiment un meilleur web!!! Un tout grand merci à mon collègue, Adrien Noterdaem d'Emakina, qui m'a fait découvrir ceci.

Liens relatifs:

Information contextuelle sur le Wall Street Journal - la page exemple
En espérant que ce ne soit pas détourné vers un IntelliTXT de VibrantMedia
du javascript à tout va

Emakina 2.0

Marin — Mon, 01 May 2006 16:41:03 +0000

Non, il ne n'agit pas d'une nouvelle entité suite au rachat de 50% de B. on The Net par Emakina. Ni d'une annonce pour son blog web2.0 (dont je ne suis pas un grand fan - rapport aux posts qui sont vraiment très orientées buzz).

C'est malgré tout une image bien d'actualité: plein de personnes (compétentes et sympathiques) engagées (networking), des locaux réaménagés (géolocalisation), une évolution des processus internes (RIA - Rich Interface Internal Application Approach) et le tout dans un esprit bon enfant.

Il s'agissait des images d'annonce du déménagement d'Emakina de la Tour ITT à la rue de Middelbourg à Boisfort en avril 2002 et tout ça date déjà d'il y a 4 ans. Liens relatifs: