[French version Here]

[Update]
— Silenzio wins an FWA Site of the day for September 16th
— Silenzio wins a DopeAward !
— Silenzio wins a Papervision Showcase Award !

Announcing Silenzio — http://www.silenzio.fr

We are so proud to present the new version of leading movie advertising agency Silenzio Communication’s web site.

We have, for the occasion, gone all out.
It features a whole bunch of technological feats, that we have lovingly crafted and implemented specially for the occasion.

If we only mentioned just a few :

SWFAdress, that puts back the “back” & “forward” buttons where they belong, and allows to use them to navigate the site. You can also bookmark every page, including search results.

Papervision 3D, that we tuned to the extreme, in order to provide the performance we needed to make idea exist (animate more than 300 high quality images simultaneously within an 3D space, while also handling physical deformations for each)

Remoting, to insure a swift and reliable loading

Flex, for a perfect back-end (you won’t see this one)

CSS3D, for the iPhone version. We are quite proud of this one, since it may very well be the first production site to use 3D css on an iPhone, providing a nice Coverflow experience for the movie posters.

We will detail this specific part in a blog post, check out for it !

Meanwhile, you can see this work live on http://www.silenzio.fr/

And here are a few screenshots, for good measure :

[English version Here]

Silenzio — http://www.silenzio.fr

Nous sommes fiers de vous présenter la nouvelle version du site de l’une des plus grandes agences de publicité cinéma Françaises, Silenzio Communication.

Nous avons pour l’occasion sorti les habits d’apparat !
En effet, il comporte toute une série de petites fiertés technologiques que nous avons amoureusement préparées spécialement pour l’occasion.

Pour n’en citer que quelques-unes :

SWFAdress, qui rend les boutons “retour” opérationnels, et l’intégralité des pages du site bookmarkables, y compris la recherche.

Papervision 3D, optimisé à l’extrême pour supporter l’imposant besoin en ressources du concept créatif proposé (animer plus de 300 affiches en temps réel dans un espace 3D, tout en gérant les déformations de chacune)

Remoting, pour assurer une performance de premier plan au chargement du site

Flex, pour un back-end irréprochable

CSS3D, pour la version iPhone, et nous sommes fiers de proposer un site qui pour la première fois en production, propose une interface 3D à la Coverflow, présentant les affiches dans un mode ludique.

Nous détaillerons d’ailleurs bientôt cette technologie sur notre blog, revenez bientôt !

Vous pouvez voir tout ce travail en action sur http://www.silenzio.fr/

Voici quelques captures d’écran :

http://polcarstva.net/ est un jeu en ligne poétique et exploratoire, dans un superbe univers illustré.

Il est dommage que nous ne comprenions que peu les textes présentés, mais la douceur de les images devrait déja vous immerger dans un univers de qualité.

Oui mais alors c’est quoi un Sensible ?
Pas la moindre idée. Ca ressemble un peu a une langue, mais avec des yeux et des p’tites pattes mignonnes.

Pour en apprendre un peu plus sur cette race de petits n’animaux, trô mignons, rendez vous sur le site du NSS : Neglected Sensibles Shelter : Save Your Sensible

Une démo qui promet techniquement : à partir d’une simple feuille de papier Marquée, l’ajout en temps réel d’un personnage 3d au sein de VOTRE univers réel…

On en entendra parler rapidement.

Ca fonctionne sur la base de cette technologie :
ARToolkit

Un autre petit exemple de ce qui est possible :

Processing est un langage de programmation spécialement développé pour créer de l’image animée et statique,

Ce langage vient de “passer en version 1.0″, ce qui veut dire que les auteurs considèrent qu’il est complet et sans problèmes majeurs.

Mais quel intêrêt me direz-vous ?

Simplement de pouvoir, écrire un programme qui va créer automatiquement une vidéo telle que celle qui suit.
Celle-ci n’a pas été créée “a la main”, mais complètement automatiquement à partir de la bande son présentée.

via Make

Si vous lisez ce blog régulièrement (et vous le faites, n’est-ce pas ?), vous avez sûrement remarqué que nous y postons des vidéos régulièrement.

Parmi ces vidéos, vous avez du rencontrer certaines qui s’affichaient dans toute la largeur du site (Par exemple le teaser des Watchmen).

Et parmi celles-ci, vous avez enfin surement remarqué certaines qui provenaient de YouTube (Where the Hell is Matt en est un exemple.) et s’affichaient dans toute leur gloire en Haute Définition, c’est-à-dire en 1280×720.

En effet, depuis quelques jours il est possible, si vous avez envoyé sur youTube une vidéo en Haute Définition, de l’afficher dans toute sa splendeur

Pour faire ceci, voici les modifications à apporter :

Dans une page Youtube, si vous désirez que la vidéo soit diffusée en HD, ajoutez &fmt=22 à la suite de l’url.

Par exmple pour Where the Hell is Matt,
http://www.youtube.com/watch?v=zlfKdbWwruY
devient
http://www.youtube.com/watch?v=zlfKdbWwruY&fmt=22

Evidemment, si vous faites cela, la taille du pavé dans la page YouTube ne changera pas, mais si vous cliquez sur le bouton plein écran, vous verrez que la vidéo est bien en Haute Définition.

Mais le plus intéressant reste de pouvoir afficher le player YouTube ou bon vous semble, et dans la taille qui vous plaira.

Pour faire ceci, il vous sera nécessaire de rajouter le code “&ap=%2526fmt%3D22″ à votre vidéo.

<object width="1280" height="750" >
	<param name="movie" value="http://www.youtube.com/v/zlfKdbWwruY&amp;rel=0&amp;fs=1; />
	<param name="allowFullScreen" value="true"/>
	<param name="wmode" value="window" />
	<embed src="http://www.youtube.com/v/zlfKdbWwruY&amp;rel=0&amp;fs=1; type="application/x-shockwave-flash" allowfullscreen="true" width="1280" height="750" ></embed>
</object>

Le code suivant devient donc :

<object width="1280" height="750" >
	<param name="movie" value="http://www.youtube.com/v/zlfKdbWwruY&amp;rel=0&amp;fs=1&amp;ap=%2526fmt%3D22" />
	<param name="allowFullScreen" value="true" />
	<param name="wmode" value="window" />
	<embed src="http://www.youtube.com/v/zlfKdbWwruY&amp;rel=0&amp;fs=1&amp;ap=%2526fmt%3D22" type="application/x-shockwave-flash" allowfullscreen="true" width="640" height="389" ></embed>
</object>

Pas exactement ce à quoi vous pensez (quoi que vous pensiez), mais plutôt une bannière assez drôle pour vous faire économiser de l’énergie.

Kiwi + Fraises + Flash = Salade de Flash.
Dessinez avec des fruits !

Pour jouer avec l’experience, cliquez et déplaçez la souris.

Pas mal d’autres expériences sur WagnerPaula

Une présentation donnée chez Adobe, expliquant à un public de développeurs ce que peut être le “Wow factor”, à savoir l’intégration d’une réflexion sur l’expérience utilisateur dans le développement d’une application en ligne.