Développement « Blog N-square

Archive pour la catégorie ‘Développement’

Du lubrifiant dans vos sites !

Lundi 26 mars 2012

Ou comment une jeune entreprise a su développer son image grâce à ses sites Internet…

Anthone, société fondée en 2010, et spécialisée dans le domaine de la lubrification et de l’assemblage par collage, a décidé comme toute enseigne qui se respecte, de créer son propre site Internet (http://www.anthone.fr), ainsi que les sites présentant les produits destinés à la vente (http://chemicalromance.fr/).

- Et alors ? Me direz-vous. Qu’y-a-t-il d’original à cela ?

Pas grand-chose de très affriolant en apparence, je le conçois, et pourtant :

les sites sont réalisés en HTML5, ce qui a permis, entre autres choses, de mettre en exergue la balise canvas et ses multiples opportunités ;
mise à contribution également de règles propres aux CSS3 ;
fluidité de la navigation à travers les différentes sections grâce à des effets de parallaxe (sur les sites produits) ;
qualité exceptionnelle de l’iconographie;
mise en valeur de leur image sur les réseaux sociaux ;
mais surtout, et voici la cerise sur le gâteaux : mise sur la touche des vieux navigateurs tels que IE 6,7,8 (comment ? ils ont osés ?).

Cette petite mise en bouche mérite bien une petite explication, alors allons-y :

Mais enfin, pourquoi se donner tant de mal ?

En fait, le but avoué de la direction, était de donner une image moderne et décalée, considérant leurs clients potentiels à leur image : attirés par les dernières évolutions du web et tirant parti des médias sociaux tels que Facebook, viadéo ou twitter…

Qu’ont-ils fait des navigateurs un peu à la traîne ?

Il est tout bonnement impossible de consulter le site via ces navigateurs. Le message, dès lors qu’on arrive sur les sites de la marque est clair :

« Anthone, la version de votre navigateur est trop ancienne… Merci de mettre à jour votre navigateur pour voir ce site».

Ce message est alors suivi d’une page colorée en rouge.

HTML5 et balise , CSS3, parallaxe et sobriété des pages intérieures…

Outre l’utilisation du HTML5 et des effets propres aux CSS3 comme les transitions, le site met à profit certaines techniques, qui à mon humble avis, ne sont pas là pour jeter de la poudre aux yeux à qui veut bien s’émouvoir, mais réellement mettre en valeur leurs produits. Et pour cause, Anthone n’est autre qu’une société spécialisée dans la lubrification, et qui dit lubrification, dit huile. Or, quoi de plus léger que de voir des vaguelettes d’huile onduler dans leur container…

Le footer et la balise :

Cette balise, qui à l’aide du langage Javascript, permet de créer des formes, des dessins et des animations, est utilisée dans le but de faire onduler le footer au survole :

Parallaxe :
Les sites produits (http://chemicalromance.fr/) sont réalisés sous forme de parallaxe, ce qui donne encore une fois une sensation de légèreté et de navigation bien huilée.
CSS3 :
Leur esprit d’initiative leur a valu un prix décerné par Prix Cssdesignaward.com . Pour info, les critères pour faire partie de la liste des nominés sont les suivants :
- un haut niveau de créativité visuelle ;
- un code CSS professionnellement irréprochable ;
- un bon fonctionnement des scripts ;
- la validation W3C (souhaitable mais non obligatoire).
Sobriété des pages internes du site corporate : http://www.anthone.fr
Sur fond blanc, le texte est écrit en gris clair (#666666). Rien à voir avec les fioritures des pages des sites produits. La mise en page est sobre, laissant place à des textes de présentation et des fiches techniques. Le tout agrémenté de visuels triés sur le volet.

Un petit bémol cependant ! Au niveau du site Corporate, on peut regretter le manque de balisage en HTML5. Je pense notamment aux balises structurelles telles que <section>, <article>, <header> et <footer>…

Réseaux sociaux et popularité

Outre une politique résolument moderne et décalée, et par conséquent, prônant tout naturellement pour une ouverture vers les médias sociaux, le prix décerné par Cssdesignaward a également joué un rôle en faveur de leur popularité croissante sur les différents médias :

visualisation du site dans près de 100 pays ;
présence sur Facebook, Twitter, Viadeo, LinkedIn…

Et les téléphones mobiles

A priori, une version d’Anthone sur Smartphone (et tablettes certainement) est prévue. Notamment pour la diffusion de tutoriels supportés par Youtube. Quant aux techniques types media queries, chères au Responsive Web Design, il n’y a pas de traces actuellement sur les sites… A suivre donc.

Iconographie

L’une des grandes forces de la marque réside dans le choix des visuels. Ils ont réussi à allier humour (noir parfois), décalage et esthétisme. D’autre part, les prises de vues en mode macro de pièces totalement anodines tels qu’un écrou, une chaîne ou un engrenage prennent vie sous le joug de l’objectif. Voici un petit échantillon :

Source visuels : site Internet Anthone

Petit mot de fin

Milieu peu connu du grand public, cette entreprise toute jeune (faisant néanmoins partie du Groupe Aifranis, fondé en 1954), à l’image des membres constituant l’équipe (consulter la présentation de la société), a su en moins de 2 ans s’offrir une place de choix au sein de la planète Web. Bravo donc. D’autant que le décalage, se fait rare dans les sites d’entreprises… Saluons donc leur esprit d’initiative !

Sources et liens utiles :
- le magazine Webdesign n°34 (p18), dont cet article s’est inspiré ;
- www.anthone.fr / http://chemicalromance.fr ;
- http://blackthornsdesign.com/ : création du site ;
- Cssdesignaward.

Sylvère Visiedo

Catégorie : Design, Développement | Aucun commentaireMots-clefs : site web, webdesign

IE10 : Développer des pages optimales en HTML5 et CSS3 (1ère partie)

Lundi 20 février 2012

1. Brève introduction à l’HTML5

Depuis quelques temps, on entend parler ici et là de HTML5 ou XHTML5, ce format de données développé par W3C et WHATWG, révision majeure du moteur HTML, est conçu pour représenter les pages Web. Ce nouveau standard intègre une couche applicative donnant accès à de nombreuses API et à de nouvelles balises HTML, supportées par la plupart des navigateurs modernes.

Actuellement, HTML5 est toujours en développement par le W3C, et l’on attend une finalisation des spécifications prévue pour 2014. Mais le W3C encourage les développeurs Web à implémenter cette technologie dès maintenant, car aujourd’hui rien ne les empêche d’utiliser le DOCTYPE HTML5 dans leurs projets Web.

Bien sûr, le but du jeu sera d’utiliser les nouvelles balises HTML5 (canvas, section, aside, footer, header, article, video, audio, etc. ) et pas seulement le DOCTYPE HTML5.

En revanche, toutes ces implémentations ne sont pas supportées nativement par certains navigateurs du marché, pour ne pas les citer IE6 , IE7, IE8, etc.

Il existe cependant certaines astuces permettant d’implémenter les nouvelles balises ou de simuler les nouveaux comportements des API HTML5 en utilisant des plugins Javascript (ex : Api drag & drop). Cette tendance commence à s’inverser car la plupart des navigateurs modernes fournissent de plus en plus de compatibilité avec ces nouvelles balises et API.

En voici une liste non exhaustive de ces nouveaux User Agent :

IE 9,
IE 10 bientôt sur Windows 7 et Windows 8,
Firefox 3.6,
Firefox 4+,
OPERA 11,
Safari 5+,
Chrome,
Ipad,
Iphone,
Android,
Windows Phone IE 9 mobile.

Pour plus d’information, je vous invite à lire cet excellent article sur HTML 5.

Pour connaître la liste des fonctionnalités supportées par les différents navigateurs du marché sur les technos HTML5 / CSS3 voici quelques sites intéressants :
Une présentation détaillée de HTML5
HTML5 et CSS3 par l’exemple
Lecture des HTML5 et CSS3 dans les navigateurs

2. HTML5 et CSS3 : une paire indissociable ?

Beaucoup de gens pense que HTML5 rime avec CSS3 mais c’est faux, CSS3 est juste une mise à jour majeure des feuilles de style de la version CSS2.1. Son développement a débuté dès 1999, mais la plupart de ces implémentations ne sont toujours pas supportées par tout les navigateurs modernes.

Cependant une multitude de nouveautés accompagnent CSS3 :

Effets visuels : border-radius, text-shadow, font-face…
Sélecteurs : nth-child(odd)
De nouveaux outils : Media Queries, Column-count, Grid layout

Quelques navigateurs tentent par ailleurs de changer la donne, en faisant de leur mieux pour respecter les spécifications du W3C. Pour cela, lorsqu’ils implémentent de nouvelles propriétés expérimentales, ils ajoutent un préfixe aux attributs des propriétés CSS.

Voici une liste non exhaustive de ces préfixes :

-moz- : Firefox
-webkit- : Chrome,Safari,Iphone,Android
-o- : Opera
-ms- : Internet explorer
etc.

Pour plus d’informations sur ces nouvelles implémentations CSS3, je vous invite à consulter les sites suivants :
Présentation et stylisation du CSS3
Support du HTML5 et du CSS3 selon les navigateurs, comparatif et indispensable
Can I use ? Bonnes pratiques du couple HTML5/CSS3

3. HTML5 et CSS3 dans IE10

Entrons maintenant dans le vif du sujet car Microsoft nous dévoile sa nouvelle mouture d’ Internet Explorer IE 10 Platform Preview. La version définitive de IE 10 est prévue pour le second semestre de l’année et elle ne sera compatible que sur les machines tournant sur Windows 7 et Windows 8.

Après avoir propulsé plusieurs versions d’Internet Explorer(IE6, IE7, IE8) respectant peu les standards W3C du Web, Microsoft arrive enfin avec une version aboutie de son navigateur IE 10. En effet IE 10 sera totalement compatible HTML 5 et CSS 3 , il embarquera toutes les nouvelles implémentations validées par le W3C à ce jour et plein d’autres propriétés en cours de validation.

Pour tester toutes ces innovations majeures de IE 10, je vous conseille de faire un tour sur ce site qui les récapitulent Test Drive Site Map.

Bien sûr, munissez-vous d’une machine tournant sur Windows 7 ou sur Windows 8 Developper Preview et installez respectivement IE 10 Platform Preview 2 ou IE 10 Platform Preview 4.

Cas pratique dans le navigateur IE10

Je vais maintenant vous présenter une propriétés CSS3 assez intéressante, pour l’instant disponible uniquement sur IE 10 Grid Layout -ms-grid-, mais qui ne tardera pas à être implémentée sur Mozilla et Chrome 19.

CSS3 Grid layout et Metro

Et oui, après XBOX 360, Windows Phone, Windows 8, IE 10 nous offre la possibilité de designer des interfaces Web intuitives de type Metro grâce à la propriété -ms-grid. Le concept de Grid layout est de créer une grille virtuelle composée de lignes et de colonnes sur la page Web. Ainsi on pourra facilement disposer des éléments sur cette grille , les aligner, les centrer et les superposer de façon intuitive ; le tout sans structure HTML nécessitant un balisage particulier comme le faisait auparavant la balise Table.

Démonstration

Prenons un exemple concret : je vais représenter une partie de l’interface Metro de Windows 8 sur une page Web avec la propriété Grid Layout.

Explication

Nous allons créer une page Web dans laquelle la div principale #main de type Grid constituée de 2 colonnes de largeur automatique et de 6 lignes de hauteur automatique qui contiendra plusieurs logos que l’on placera à divers endroits :

Logo 1 est placé à la colonne 1 et à la ligne 1 disposé sur toute la largeur
Logo 2 est placé à la colonne 1 et à la ligne 2
Logo 3 est placé à la colonne 2 et à la ligne 2
Logo 4 est placé à la colonne 1 et à la ligne 3 disposé sur toute la largeur

Feuille de style – css.css

body{ background:green; display:-ms-grid;   -ms-grid-columns:auto; -ms-grid-rows:1;   }   div {margin: 2px 0px 2px 0}

#main{  display:-ms-grid;/* Affichage de type Grid*/   -ms-grid-column:1; -ms-grid-row:1;   -ms-grid-columns:auto auto;   -ms-grid-rows:(auto)[6]; }

#b1{ -ms-grid-column:1;   -ms-grid-column-span:2;   -ms-grid-row:1; background:url(i/1.png);   width:252px;    height:120px; }

#b2{ -ms-grid-column:1;   -ms-grid-row:2;    background:url(i/2.png);    width:126px;   height:126px;   }

#b3{ -ms-grid-column:2; -ms-grid-row:2; background:url(i/3.png); width:126px; height:126px; }

#b4{ -ms-grid-column-span:2;   -ms-grid-column:1;   -ms-grid-row:3;   background:url(i/8.png);   width:252px;   height:120px; }

Code html 5 – index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<divid= »b1« ></div>

</div>

</body>

</html>

Résultat

Voilà, la partie 1 sur HTML5 et CSS3 est terminée. Nous avons vu une infime partie des nouveautés supportées par IE 10, que ce soit au niveau CSS3 ou balisage HTML5.

La seconde partie se concentrera plus sur les nouveautés du côté de l’API HTML 5.

Pour plus d’infos, consulter :

http://ie.microsoft.com/testdrive/Views/SiteMap/ sur IE 10 Preview 2 (avec Windows 7)
http://ie.microsoft.com/testdrive/Views/SiteMap/ sur IE 10 Preview 4 (avec Windows 8 Developper Preview )

Christophe Rafina

Catégorie : Développement, HTML5 | Aucun commentaireMots-clefs : CSS3, html5, IE10, mobile, Windows

PhoneGap 1.3 compatible Windows Phone

Vendredi 6 janvier 2012

Open source et multi-OS

PhoneGap est une framework open source permettant aux développeurs mobiles de créer des applications natives sur les différents OS mobiles du marché.

Cette framework allie à la fois les technologies web (HTML,CSS et JS) et les fonctionnalités natives des mobiles comme l’accéléromètre, la géolocalisation, les contacts, la caméra, les réseaux…

Voici la liste des fonctionnalités supportées par les différentes plateformes mobiles :

Créer une application de type PhoneGap avec le SDK PhoneGap sur Windows phone

Tout d’abord, il vous faudra installer le SDK Windows Phone ainsi que la Framework PhoneGap. Copier ensuite les templates PhoneGap callback-phonegap-b81151f\Windows Phone\ PhoneGapStarter.zip dans le dossier template de Visual Studio 2010.

C:\Users\[USERNAME]\Documents\Visual Studio 2010\Templates\ProjectTemplates\
PhoneGap

Vous êtes maintenant prêt à créer un projet de type PhoneGap.

Architecture d’un projet PhoneGap

Un projet PhoneGap est constitué d’une dll WP7GapClassLib en référence et d’ un dossier www contenant notre projet Web :

index.html (notre page web)
master.css (notre feuille de style)
phonegap-1.3.0.js (le js PhoneGap).

Exemple de geolocalisation via PhoneGap

Voici un exemple de geolocalisation via l’API PhoneGap sur le mobile Windows Phone .

Au clic, sur le bouton Où suis-je, on appelle la méthode de géolocalisation de la framework PhoneGap navigator.geolocation.watch

Position qui nous renvoie la position actuelle de votre mobile via une Alerte Box.

Comme l’illustration ci-dessous le montre, on couple le développement Web aux fonctionnalités du mobile ici la géolocalisation et la notification par alerte.

Le code source de la page HTML

<!DOCTYPE html>
 <html>
 <head>
 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>PhoneGap WP7</title>
<link rel="stylesheet" href="master.css" type="text/css"  media="screen" title="no title" charset="utf-8"/>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"> </script>
<script type="text/javascript" charset="utf-8" src="jquery-1.7.1.min.js"> </script>
<script type="text/javascript">
 document.addEventListener("deviceready", onDeviceReady,false);
// une fois le mobile chargé
function onDeviceReady(){
//on bind l'évènement click sur le bouton #position
$("#position").click(function(){
 navigator.geolocation.watchPosition (geolocationSuccess, geolocationError, { maximumAge:3000, timeout:5000, enableHighAccuracy:true});
});
 document.getElementById("welcomeMsg").innerHTML += "PhoneGap est lancée version="+ window.device.phonegap;
}
function geolocationError(error){
var data ="";
if(error.code == PositionError.PERMISSION_DENIED)
 data = error.message;
else if(error.code == PositionError.POSITION_UNAVAILABLE)
 data = error.message;
else if(error.code == PositionError.TIMEOUT)
 data = error.message;
 $("#welcomeMsg").html(data);
}
function geolocationSuccess(position){
var result ='Latitude: '+ position.coords.latitude +'\r\n'+
'Longitude: '+ position.coords.longitude +'\r\n'+
'Altitude: '+ position.coords.altitude +'\r\n'+
'Accuracy: '+ position.coords.accuracy +'\r\n'+
'Timestamp: '+new Date(position.timestamp)+'\r\n';
 navigator.notification.alert(result);
}
</script>
 <style type="text/css">
 #position
 {
 height: 36px;
 width: 115px;
 }
 </style>
 </head>
 <body>
  <h1>
  Hello NSQUARE</h1>
  <button id="position">
 Où Sus je ?</button>
 <div id="welcomeMsg">
 </div>
</body>
</html>

Complète et incontournable

PhoneGap est une framework absolument incontournable pour le développement mobile Web, car elle fournit un accès des plus complets aux fonctionnalités natives de son smartphone via une interface Web.

Accessible sur la plupart des OS mobiles du marché, elle dispose aussi d’un bon support, d’une documentation détaillée et de nombreux exemples de codes sur l’utilisation des APIs de sa framework.

Le point négatif, s’il faut en trouver un, est que certaines fonctionnalités ne sont pas accessibles sur divers OS (sur IOS le compas ne dispose pas d’API).

Hormis ce point, je conseille cette API à tout bon développeur mobile Web désirant apporter à son appli mobile Web des fonctionnalités personnalisées à son mobile.

Aller plus Loin

Le site PhoneGap
La liste des APIs
Le support PhoneGap

- Christophe Rafina.

Catégorie : Développement, Mobilité | Aucun commentaireMots-clefs : application, framework, mobile, open-source, OS, PhoneGap, smartphone, Windows phone

HTML5 : la table périodique des balises

Mercredi 30 novembre 2011

Implacable Josh Duck : hormis un blog qui rosse les yeux, Josh Duck est un développeur-programmeur qui mérite un petit coup d’œil sur ses projets. Sa table périodique HTML5 est sans doute à ce jour, son meilleur outil.

Josh Duck, développeur australien, propose une table périodique des éléments HTML5, qui reprend l’ensemble des balises standards du langage : des éléments « racine » aux métadonnées, en passant par les éléments de contenus embarqués, d’interactivité, et aux différents niveaux sémantiques.

Découpée selon le célèbre modèle de la table périodique des éléments chimiques, conçue par Dimitri Mendeleïev, chimiste russe du 19e siècle, cette table permet, au-delà de l’intérêt pour la synthétisation, très pratique et plutôt bien faite, de s’interroger encore sur les principes de visualisation.

Relayé massivement sur Twitter, sa table est l’occasion de découvrir le développeur et ses travaux, mais davantage encore de s’arrêter sur la modélisation et sa méthode, agencement intuitif d’éléments pour une visualisation plus globale et une mémorisation plus instantanée des éléments.

- Charlene Lefoulon.

Catégorie : Design, Développement, HTML5 | Aucun commentaireMots-clefs : balises, blog, développement, html5, josh duck, outil, table périodique

La « foire aux vins » sur Smartphone

Mercredi 28 septembre 2011

Depuis quelques années, différentes enseignes agro-alimentaires ont pris l’habitude de lancer à tour de rôle des « foires aux vins ».

Malgré la crise économique, la montée des prix des grands Bordeaux, la disparition des bonnes affaires, et surtout la montée en puissance des ventes en ligne, ces foires remportent un grand succès. Ainsi, en 2010, l’enseigne Leclerc a vendu près de 13 millions de bouteilles dans l’ensemble de ses magasins, ce qui représente une hausse de 13% de chiffre d’affaire par rapport à la foire aux vins de 2009.

A l’heure où l’évolution des Smartphones est exponentielle, tout le monde veut «son» application. Pas étonnant, donc, de voir les grandes enseignes développer, avec ce marché florissant, leur application spéciale « vin », voire « foires aux vins ».

Ces dernières ont pour but d’orienter et de faciliter l’achat des perles rares à des prix (très) compétitifs. Elles peuvent s’avérer très utiles pour les amoureux du vin et de la bonne affaire, que l’on soit connaisseur ou profane.

A titre d’exemple, voici un comparatif des applications « foire aux vins » lancées pour les enseignes Intermarché, Carrefour et Franprix :

1 - L’application Carrefour : un large choix

- Les onglets sont nombreux mais cela ne gêne pas la manipulation.
- La recherche se fait par région ou par type de vin, et offre également une localisation du magasin le plus proche.
- Le point négatif est l’absence de fiche descriptive, même sur les vins dits « conseillé ». Pas de problème pour les connaisseurs, mais les amateurs seront perdus…
- Il n’est pas non plus possible de scanner un article.

2 - L’application Franprix : exhaustive et efficace

- un tableau récapitulatif des millésimes en fonction des types de vins,
- des conseils pour les associations de mets, système d’avis pour partager ses trouvailles…
- En revanche les descriptions sont trop succinctes,
- les prix ne sont pas indiqués sur l’application (il faut scanner la bouteille),
- les régions ne sont pas bien répertoriées,
- bref, le choix est insuffisant.

3 - L’application Intermarché : intuitive et complète

Après avoir localisé le magasin le plus proche, on consulte :

- les coups de cœur des professionnels,
- les fiches techniques des différentes cuvées, très détaillées.
- Il est possible de scanner une bouteille afin d’obtenir instantanément la description du produit.
- Une très bonne ergonomie facilite la recherche, avec un moteur de recherche très efficace.
Les autres poids lourds de l’agro-alimentaire (Auchan, Leclerc etc.) n’ont pas développé d’application particulière pour leur foire aux vins, mais l’ont intégrée dans leur application globale. Leclerc a par exemple mis en place le système « scan 2d » qui permet, a l’aide d’un petit logiciel et en prenant une photo d’un «code carré blanc» sur un prospectus, d’accéder à des informations complémentaires sur le produit concerné.

Vu le chiffre d’affaires réalisé par les différentes enseignes grâce aux foires aux vins, et les applications qui ne cessent de gagner en fonctionnalités, la vente de vins au moyen de cet outil a de beaux jours devant elle.

- Simon Marais.

Catégorie : Développement, Innovation, Mobilité | Aucun commentaireMots-clefs : application, application mobile, Carrefour, foires aux vins, Franprix, Intermarché, outil, scan 2d, smartphone, vin

Réalité Augmentée : « superposer le virtuel au réel »

Jeudi 4 août 2011

Source

Le 8 juillet dernier, à La Cantine, se déroulait le premier atelier sur « l’Etat des lieux de la Réalité Augmentée ». L’idée de fédérer autour de la thématique et de sa problématique associée avait pour elle d’être novatrice : à mi-chemin entre progression fulgurante et tendance à confirmer, la réalité augmentée se voudrait moins en quête de modèles, qu’expérimentale sur de nombreux points. Bref retour sur cette soirée, qui attend déjà sa suite dès la rentrée.

La réalité augmentée, ou l’art de « superposer le virtuel au réel, de manière interactive et en respectant les perspectives », trouve autant de champs d’extension, selon que l’on aborde différents domaines comme le marketing, l’éducation, le divertissement, ou encore la Défense. La table ronde organisée à La Cantine offrait un panel des plus variés pour le rappeler, puisque Aurelien Fache (OWNI), Laurent Allias (Cabarey Communication), Yohan Bentolila (Previznet), et Jean-François Chianetta (Augmentedev) s’étaient donnés rendez-vous.

Le sujet touche différents domaines, comme la géolocalisation, qui semble la première s’être emparer du phénomène : par le truchement du couplage de différentes technologies – GPS, marquage, capteurs – il est possible de faire apparaître des informations numériques, des données virtuelles sur un espace réel, comme un plan de quartier, une carte de zone. Avec ou sans marqueurs, cette technologie paraît aujourd’hui stable et rapide, et l’ensemble des professionnels l’utilisant et la diffusant semblent s’accorder sur son efficacité.

L’aspect palpable de la réalité augmentée se définit aussi par ses supports. Pour la rendre efficiente, des travaux de recherche sont effectués sur les objets : lunettes, verres de contact (on parle de « miniaturisation de l’informatique ») ou encore implants sur le nerf optique… Autant d’éléments servant à la réflexion des limites, aussi, du canevas.

Les animateurs de la soirée ont rappelé que la Réalité Augmentée est toujours indissociable de la réalité. Son implémentation – jeux vidéo, médias, marketing expérientiel, urbanisme , site Web – devrait faire l’objet d’une seconde rencontre, prévue en septembre, toujours à l’atelier de La Cantine.

- Charlene Lefoulon.

Catégorie : Design, Développement, e-commerce/web Marketing, Réalité Augmentée | Aucun commentaireMots-clefs : géolocalisation, GPS, interactive, jeux vidéos, médias, réalité augmentée, réel, site web, virtuel

Focus sur la télévision connectée : quelle valeur ajoutée ?

Mercredi 6 juillet 2011

La télévision connectée est la possibilité d’avoir son téléviseur branché sur Internet pour profiter de divers services comme la visioconférence, les jeux en ligne, ou encore la vidéo en ligne (catch up, youtube etc.).

Aujourd’hui, en France, cela représente environ 10% du parc des téléviseurs, soit environ 775 000 appareils vendus sur le sol français.

Une étude, réalisée par Havas Digital et Ipsos City, a permis d’identifier plusieurs familles de consommateurs de ce type d’appareil, allant des personnes totalement convaincues par ce nouveau support, et d’autres beaucoup plus sceptiques (enthousiaste : 1/4, winnable : 1/4 et sceptique : 1/2) car aujourd’hui la TV connectée n’apporte pas de valeur ajoutée.

Nous pouvons profiter pleinement d’Internet sur PC, Smartphones et plus récemment sur tablettes. L’utilisation de deux écrans (TV + appareil se connectant à internet) est largement répandue à l’heure actuelle, et représente de fait quelque 31% des 18 – 49 ans.

Malgré des points positifs comme l’accès rapide à Internet, l’utilisation de services comme la catch up ou la VOD, l’un des gros défauts de ce support reste la navigabilité via une télécommande « standard ».

C’est donc un nouveau défi pour les constructeurs, FAI, fournisseurs de services, que de trouver le modèle économique le mieux adapté afin de rendre ce support indispensable pour les années à venir.

- Fabrice Poreaux.

Catégorie : Développement, Innovation, Vidéo | Aucun commentaireMots-clefs : FAI, internet, pc, smartphone, tablette, télévision connectée, VOD

Google Swiffy, l’alternative pour lire du Flash sur iPhone et iPad

Mardi 5 juillet 2011

Voici un outil dévoilé par Google qui pourrait être une solution pour les terminaux Apple. Développé par un stagiaire de Google Labs, cet outil convertit facilement les fichiers Flash au format HTML.

Google Swiffy convertit plus particulièrement les fichiers SWF au format HTML5. Cependant, l’outil présenté est une version béta et fonctionne avec quelques contraintes.

Pour le moment, Swiffy supporte uniquement les fichiers Flash réalisés en ActionScript et ActionScript2.0. Afin de profiter pleinement de cet outil, il est indispensable de posséder un navigateur Webkit tel que Google Chrome ou alors Mobile Safari. Le rendu est satisfaisant sur les publicités et autres animations Flash à ce jour.

Le procédé est le suivant : Swiffy analyse les différents éléments graphiques du fichier SWF, il les réécrit au format SVG (langage de dessin vectoriel) et ensuite les affiche avec du code standard HTML5 et CSS3. En ce qui concerne les scripts écrits au langage ActionScript 1&2, ils sont reproduits en JavaScript. Ainsi, le contenu Flash sera lisible sur des terminaux qui ne le permettent pas.

L’autre avantage de Swiffy, c’est qu’il génère un code très difficile à déchiffrer, ce qui lui confère une grande sécurité.
Voici le lien qui permet de tester vos propres applications Flash, vous pourrez aussi jeter un coup d’œil à la galerie dédiée.

- Constant Edmund.

Catégorie : Développement, Flash, Google, HTML5, Mobilité | Aucun commentaireMots-clefs : Apple, Flash, google, google chrome, google swiffy, html5, outil, safari, swf

Alstom Open de France : la version tournoi par n²

Lundi 4 juillet 2011

Source

Pour cette 95^ème édition de l’Alstom Open de France, qui se déroulait du 30 juin au 3 juillet 2011, sur le parcours de l’Albatros, à Saint-Quentin en Yvelines, n² accompagne la Fédération Française de Golf dans la mise en ligne d’une version tournoi du site Alstom Open de France.

L’internaute pourra retrouver le live scoring – classement des joueurs – et suivre en direct l’une des compétitions de l’année en France.

Pour les mobinautes, n² a pensé également à eux, en leur proposant un mini site mobile : où ils pourront profiter des informations comme le direct, le live scoring et le parcours.

- Fabrice Poreaux.

Catégorie : Développement, Innovation | Aucun commentaireMots-clefs : Alstom, Alstom Open de France, Fédération Française de Golf, mini-site, mobile, n²

Google+ : un futur concurrent de Facebook ?

Vendredi 1 juillet 2011

Le numéro Un mondial des moteurs de recherche a révélé, le 28 juin, les contours de son futur réseau social, un secteur où il a toujours essayé de s’imposer. Il y a déjà eu Google Buzz, Google Wave mais aussi Google Latitude, qui n’ont pas connu le succès.

Google+ - ou Google Plus - permettrait à la firme de rivaliser face au géant du réseau social : Facebook.
Pour le moment en phase de test, Google+ est disponible uniquement sur invitation et très peu d’utilisateurs ont eu la chance de le tester. On y retrouve les caractéristiques de base d’un réseau social, telles que : le partage de photo, la possibilité de mettre à jour son statut, publier des liens.

Mais la firme y ajoute une notion de segmentation, qui reste tout de même très proche des groupes d’amis Facebook. En effet, l’utilisateur possède des « cercles » qui lui permettent de classer ses relations : amis proches, familles ou encore collègues de travail. Viennent ensuite les « déclics », un système de partage de contenus et de liens, basés sur les intérêts de chacun. Parallèlement, ces cercles bénéficieront d’un système de chat vidéo (intitulé « bulle ») pouvant rassembler jusqu’à 10 personnes.

Déjà disponible en version Web (desktop et mobile), sur l’Android Market, Google+devrait bientôt voir le jour sur l’AppStore.

Le petit +, c’est que Google+ promet de mieux protéger les informations personnelles de ses utilisateurs.

Voici une vidéo qui présente les différentes fonctionnalités de ce nouvel outil :

Prenez votre invit’ !
- Constant Edmund.

Catégorie : Développement, Google, Réseaux sociaux | Aucun commentaireMots-clefs : facebook, fonctionnalités, google, google plus, réseaux sociaux

Polices exotiques : Cufon et Font-face

Mercredi 30 mars 2011

Il existe un nombre restreint de polices sécurisées web, c’est à dire qui sont installées par défaut sur toutes les machines (pc et mac), on a:

Georgia
Times New Roman
Andale Mono
Arial
Arial Black
Impact
Trebuchet MS
Verdana
Webdings
Comic Sans MS
Courier New

polices web sécurisées non-officielles (ne pas oublier de déclarer une police alternative):

Century Gothic
Lucida
Palatino
Tahoma

Mais comme il est rare que les designers n’utilisent que ces polices pour le design, on va s’attarder sur 2 méthodes d’intégration des polices exotiques:

font-face: qui est une propriété css3.

@font-face{ /*On donne un nom (au choix) à la police téléchargée */ font-family: "NomDeLaPolice"; /*On indique le chemin du fichier à télécharger */ src: url("police.otf"); }

h2.title{ font-family: "NomDeLaPolice", Arial, sans-serif; }

inconvénients:

télécharger les polices qui peuvent être assez lourdes et télécharger les différents formats:
* TrueType Fonts pour Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
* EOT fonts pour Internet Explorer 4+
* WOFF fonts pour Firefox 3.6+, Internet Explorer 9+, Chrome 5+
* SVG fonts pour iPad and iPhone
Dégradation de la police lors de la déclinaison dans les différents formats; certaines polices supportent mal la transformation et ne sont pas faites pour être déclinées.
Modifier le mode de lissage des polices qui par défaut est en « standard » sur windows XP au lieu d’etre en « ClearType »

http://www.fontsquirrel.com est un site qui se chargera de transformer votre police aux différents formats.

cufon: javascript qui génère des images à la volée.

<script type="text/javascript" src="/js/cufon-yui.js" type="text/javascript"></script> <script type="text/javascript" src="/js/GeosansLight_500.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h3'); </script>

Sur ie, on a un temps de latence désagréable avant que le traitement s’effectue, pour cela il faut ajouter avant la fermeture du body
``

inconvénients:

Pollution du code.

<h1><cufon alt="/ Diversity " style="width: 116px; height: 24px;"> <canvas width="142" height="30" style="width: 142px; height: 30px; top: -5px; left: -2px;"></canvas> <cufontext>/ Diversity </cufontext></cufon> </h1>

Actuellement la version 1.09i permet de gérer l’état « hover » mais pas l’état « activ » de la font, ce qui peut être gênant utilisé sur un menu.

Avantages:

Rendu impeccable sur tous les navigateurs.
Poids.

Dans les 2 cas, il faut être sûr d’avoir les droits de distribution pour pouvoir utiliser font-face ou Cufon.

SEO : Etant donné que les moteurs de recherche n’utilisent pas le javascript pour parser les pages, les 2 solutions ne posent pas de problèmes de référencement.

jlc

Catégorie : Développement, Typographie | 2 commentairesMots-clefs : développement, font, polices, polices sécurisées, SEO, typographie, web

À la découverte de Windows Phone 7

Mercredi 23 mars 2011

Windows Phone 7

À la découverte de la plateforme Windows Mobile de Microsoft : Windows Phone 7

Pour les non initiés, Windows Phone 7 est le nouvel OS pour smartphone de Microsoft sorti en aux USA le 17 octobre 2010 et en Europe le 21 octobre 2010.

Cette nouvelle plate forme mobile rime avec clarté, convivialité et sobriété.

Oui on peut le dire c’est une refonte complète de la plateforme mobile de Microsoft car l’une des particularités de cette refonte est la mise en avant de l’expérience utilisateur.

En effet Microsoft a abandonné le concept de portage de son environnement graphique Windows sur smartphone car cela avait peu de sens sur un terminal mobile.

De plus, cette refonte s’accompagne de nouveautés au niveau Hardware, OS et au niveau du modèle applicatif.

- Couche Hardware

Tous les mobiles destinés à la plateforme WP7 auront le même hardware.

Sous le capot:

Processeur embarqué ARMv7 : cortex, scorpion ou autre
256 Mo de RAM et 8 Go de ROM ou plus
Un GPU qui supporte au moins la version DirectX 9
Des spécifications multimédia communes incluant une accélération hardware des codecs

L’habitacle:

Un appareil photo 5 méga pixel / flash/un bouton pour prendre une photo
Plusieurs capteurs : A-GPS (technologie de géolocalisation), boussole, luminosité et de proximité
3 boutons hardware: démarrer, recherche et Windows
2 résolutions : WVGA (800*400) et HVGA (480*320)
Un écran capacitif supportant au moins 4 point de contacts

- Couche OS

Cette nouvelle architecture renouvelée, resserrée et performante est basée sur Windows Embedded CE 6.0 R3.

Pour information :

La seule intégration qui est laissée au fabricant du terminal est la couche basse des drivers, celle directement en contact avec le silicium, qui peut varier d’un téléphone à l’autre (par exemple, tous les fabricants n’utilisent pas la même référence de capteur de mouvement : pourtant, vu du système, il doit s’adresser de la même manière). Cela permet d’avoir une API unifiée pour les capteurs, mais aussi pour les couches radios, graphiques, multimédia

- Couche modèle applicatif

Ce modèle applicatif comprend trois sous couches

1. App Model :

Cette couche permet la gestion des applications (installation/désinstallation), des licences, des paginations mémoire, des mises à jour etc…

2. UI Model:

Le shell frame est le modèle graphique qui offre des modèles de composition spécifique tels qu’une navigation spécifique, intuitive, cohérente et surtout accélérée graphiquement.

3. Cloud intégration:

Et enfin la troisième couche permet l’accès aux services de Cloud :

Notification par push
Géolocalisation
Intégration du Xbox Live (possibilité de se connecter au Xbox live, de créer et gérer son avatar, de voir ces trophées, de communiquer avec ces amis etc…)
Bing
Windows Live ID

- Couche SDK

Les applications développées pour WP7 pourront être portées sur différents SDK (Frameworks) :

Silverlight (Framework pour les Applications WP7)
XNA (Framework de jeux pour PC : Windows 7, XBOX et Smartphone)
HTML/JavaScript

- Metro : nom de code de l’interface Mobile de WP7

Auparavant, créer une interface soignée sur Windows Mobile 6 s’avérait fastidieux et souvent le résultat était décevant. Ce n’est plus le cas avec la nouvelle interface Metro.

En effet Microsoft s’est inspiré au maximum de la signalétique des villes du monde qui est assez intuitive pour grand nombre d’entre nous et l’a appliquée à son Mobile. L’interface se veut soignée, sobre, intuitive et fonctionnelle.

2/ WP7 Les développeurs en action

Windows Phone 7 ouvre de nouveaux horizons au niveau des technologies utilisées.

Fini Visual Studio 2005, il vous faudra les outils suivants :

Visual Studio 2010 Professional ou Visual Studio 2010 Express en version gratuite
Windows Phone Emulator (émulateur mobile )
Silverlight (Framework pour les applications)
XNA Game Studio 4.0 (Framework pour les jeux)
Microsoft Expression Blend for Windows Phone (Outils de design et d’intégration pour les designers ou développeurs)
.Net framework 4.0

Tout ces outils sont disponibles à travers ces jolis packages All in one

Download and install the Windows Phone Developer Tools (Release Notes)

Download and install the Windows Phone Developer Tools January 2011 Update (Release Notes)

Download and install the Windows Phone Developer Tools Fix

Voilà cette mini présentation de WP7 est terminée j’espère que vous aurez une idée globale de la nouvelle plateforme mobile de Microsoft et je vous invite à consulter le site officiel français http://msdn.microsoft.com/fr-fr/windowsphone.

Catégorie : Développement, Mobilité | Aucun commentaireMots-clefs : application mobile, développement, Microsoft, mobile, OS smartphone, smartphone, Windows, Windows Mobile, Windows phone, Windows Phone 7, WP7

Conférence Microsoft sur le HTML5

Mardi 8 mars 2011

Microsoft organise le 16 mars 2011 un workshop dont l’objectif est de faire un état des lieux sur les balises exploitables, sur les outils et framework existant et de découvrir tout le potentiel de HTML5 : l’événèment sur le site MSDN Microsoft.

Catégorie : Développement, HTML5, Technologie | Aucun commentaireMots-clefs : développement, html5, Microsoft, technologie

Mutation dans l’écosystème de l’application mobile

Vendredi 4 mars 2011

La multiplication des plateformes mobiles (iOS, Android, Blackberry, WP7, WebOS…) ne va-t-elle pas inévitablement conduire à la mutation de l’écosystème de l’application ?

L’apparition de nombreux frameworks applicatifs, basés sur les dernières technologies du web (HTML5, CSS3, JavaScript) viendrait-elle confirmer cette tendance ? L’expérience utilisateur, initiée par l’iPhone, est en train de trouver une possible continuité au travers d’un site mobile intégrant ce type de framework.

Comme l’évoque certains leaders du marché, au vu des coûts générés par le portage d’une application sur chaque plateforme mobile, il est de plus en plus judicieux, car plus rentable, de concevoir un site web « applicatif » mobile en lieu et place d’une voir de plusieurs applications.

La conception d’une application mobile pâtit ainsi d’un certain nombre d’inconvénients que l’on ne retrouve pas dans l’univers du web mobile. En voici quelques exemples :

a) Maintenance impossible

Une fois une application livrée, les bogues éventuels ne peuvent être corrigés que dans le cadre d’une nouvelle release. À la livraison, l’application doit donc être particulièrement léchée et aboutie. Ceci entraine alors une longue phase de tests, de recette et d’optimisations.

b) Les inconvénients de la multiplication des versions d’une même application

Si une plateforme comme iOs, informe les utilisateurs que la mise à jour d’une application est disponible, rien ne force ces derniers à l’installer. Dans le cas d’une application connectée, ceci provoque alors une multiplication des versions à maintenir : chaque flux de données ou connexion doit alors être maintenu pour le bon fonctionnement des versions antérieures. Une problématique d’exploitation que chaque éditeur éviterait bien volontiers.

c) Une multiplication des versions d’un même système d’exploitation

Les systèmes d’exploitation évoluent eux aussi. Cependant, afin de ne pas rester emprisonné dans le modèle d’Apple, nombre d’iPhone sont jailbreakés. Malheureusement, la publication des jailbreaks stables et de leur mode d’emploi ne suit pas le rythme des mises à jour d’iOs. Il n’est alors pas rare de trouver encore des iPhones en version 3.1.x – soit une version non multitâche de l’OS. Ceci a un véritable impact pour les équipes de développement, car c’est tout le fonctionnement de l’application qui est remis en cause. Ainsi, l’application en cours d’utilisation sera fermée si l’on bascule vers une autre application – ex : Safari, Youtube, etc. L’architecte logiciel doit donc prendre en compte les contraintes relatives à chaque version de chaque système d’exploitation s’il veut assurer l’universalité de son application.

d) Une ergonomie à repenser pour chaque plateforme

Il est impératif pour l’ergonome, les graphistes puis l’équipe de développement, d’anticiper toutes les tailles d’écran à supporter (y compris pour iOS : iPhone+iPad+écrans Retina), de respecter au mieux les guidelines des différentes plateformes – même si ces dernières peuvent présenter des divergences (ex : tabbar en haut pour Android et en bas pour iOs), etc.

e) Le casse-tête de la bascule portrait/paysage

La gestion de la bascule portrait/paysage (vertical/horizontal) conduit nécessairement à la création de deux versions de chaque maquette afin d’optimiser les zoning dans chaque disposition – sans parler de la complexité que représente le calcul du repositionnement des blocs lors de la bascule d’une disposition à l’autre. Ce problème est particulièrement présent sur les tablettes. Le blocage de l’effet de bascule est possible mais est-ce véritablement respecter les guidelines ?

f) Les contraintes de la mesure analytique

L’analytique est particulièrement complexe à implémenter, incertain à l’usage et peut donc se révéler onéreux et peu fiable au final.

Une connexion à internet est indispensable pour communiquer les informations de tracking au serveur. Malheureusement, la couverture réseau n’est pas constante et peut se révéler indisponible à un instant ‘t’. Idéalement, une implémentation asynchrone de l’analytique doit alors être réalisée. L’intégration d’une API tierce peut alors simplifier cette implémentation.

C’est dans cette logique qu’un éditeur comme BlackBerry vient d’annoncer la mise à disposition d’outils analytiques : http://tinyurl.com/5r4lx4n

Il faut aussi signaler que certaines régies font payer un forfait supplémentaire pour l’activation du taggage mobile.

g) Une gestion complexe de la publicité (bannières et prérolls inclus)

L’équipe de développement devant une nouvelle fois faire face aux mêmes problématiques de tracking et de couverture que pour l’analytique, l’intégration d’une API dédiée est quasiment obligatoire pour répondre aux besoins d’un adserver. Charge ensuite aux ingénieurs de programmer les appels requis pour chaque fonctionnalité de l’application.

La création d’une application mobile est donc bien plus complexe que ne peut l’être celle d’un site web mobile. Un salut possible pour les AppAgencies et les SSII résiderait alors dans une bascule de l’application mobile sous forme de site web mobile – inclus dans une webview ou non. De nombreuses boites à outil, basées sur le HTML5 et/ou des frameworks Javascript, le permettent désormais. Ils proposent alors une transposition de l’expérience utilisateur des applications sur le web mobile. Cette tendance va-t-elle se confirmer ? Les annonceurs vont-ils (enfin) apporter de l’importance à l’universalité de leurs applications mobiles ? Les marques vont-elles continuer à s’enfermer dans l’écosystème d’Apple ? À suivre…

Jean-Charles Clément.

Quelques exemples de frameworks mobiles :
- un des plus intéressants (JQuery): http://jquerymobile.com/demos/1.0a3
- 18 solutions différentes présentées :
http://iphoneized.com/2009/11/18-mobile-frameworks-development-tools-creating-iphone-apps/

Catégorie : Développement, Ergonomie, Mobilité | Aucun commentaireMots-clefs : analytique, application, application mobile, ergonomie, mobile, mobilité, publicité

Flash Player 11 : Adobe révolutionne la 3D du Web

Mercredi 2 mars 2011

Après avoir lancé récemment la version 10.2 de son player Flash, Adobe nous donne l’eau à la bouche avec la version 11 qui prendra en charge le support de l’accélération matérielle 3D. La version bêta est dès à présent disponible :
http://labs.adobe.com/downloads/flashplatformruntimes_incubator.html

Cette version intègre l’API révolutionnaire Molehill qui tire partie de l’accélération matérielle. Par conséquent, les ressources de la carte graphique seront elles aussi sollicitées, pour pouvoir nous offrir une expérience 3D impressionnante. Le résultat est bluffant puisque l’on arrive à une qualité très proche de nos consoles de jeux vidéos de salon (Xbox360,PS3… )

La 3D dans le navigateur sera bientôt à portée de main, à condition d’avoir mis à jour le Flash Player et de posséder une carte graphique compatible DirectX9 sous Windows, de l’OpenGL 1.3 sous Linux ou bien OpenGL 2.0 ES sous un appareil mobile.

Catégorie : Développement, Flash, Gaming/Jeux en ligne, Innovation, Technologie | Aucun commentaireMots-clefs : 3D, adobe, API, développement, Flash, Flash Player 11, technologie

La guerre des plateformes vidéos

Jeudi 20 mai 2010

Récemment, les trois grands acteurs de la lecture vidéo en ligne se sont offerts des liftings.

Vimeo

C’est Vimeo qui s’est lancé le premier dans le lifting de son player. Comme pour la version précédente, le player reste très sobre et très efficace. On sait où cliquer et l’ergonomie y est très bonne.

Dailymotion

Dailymotion a suivi, très peu de temps après, avec une inspiration certainement puisée dans le player Vimeo. Comparé à la version précédente, le player est beaucoup plus axé sur le partage via réseaux sociaux (Twitter et Facebook)

Youtube

Pour finir, on en vient à la mise à jour la plus intéressante en terme d’innovation, le player Youtube. Son interface n’a que légèrement évolué, le player est moins imposant et les différents types de fonctionnalités sont mieux séparés.

Outre les changements visuels, on pourra remarquer l’ajout de nouvelles fonctionnalités (pour l’instant en version beta). Il est en effet possible, via la technologie Google Voice de transcrire en temps réel le flux audio de façon à avoir des sous-titres « dynamiques ». Bien entendu, à cette fonctionnalité s’ajoute la possibilité de pouvoir traduire ce contenu dans de nombreuses langues. Il y a bien évidemment certaines imperfections à ce système, notamment si les bruits de fond sont trop présents.

Mais quel intérêt à innover ?

Accessibilité

Actuellement, en France, on estime que le nombre de personnes atteintes de défiances auditives (profonde ou totale) atteindrait les 303 000. Des données recueillies lors d’une étude du British MRC Institute of Hearing Research indiquent que plus de 700 millions de personnes devraient souffrir de déficience auditive en 2015 et 900 millions d’ici 2025. L’accessibilité est donc un problème auquel les plateformes vidéos devront répondre dans les années à venir.

Traduction

On peut aussi y voir un autre bénéfice important… Les allergiques à la langue de Shakespeare pourront enfin comprendre (via l’outil de traduction des sous-titres) le contenu des vidéos sans trop de problèmes.

Référencement

Jusqu’à alors le référencement de vidéos était toujours un sujet sensible. Il était indispensable de les accompagner d’une transcription / description suffisamment riche et informative pour leur donner la visibilité qu’elles méritent. L’arrivée du sous-titrage automatique permet d’imaginer une meilleure valorisation des contenus YouTube dans les pages de résultats de la plateforme mais aussi de Google. Cette innovation permettra l’ajout de description texte qui seront indexées par les moteurs de recherche.

Dans la course aux nouvelles fonctionnalités à laquelle se livrent les ténors du marché, la plateforme Youtube prend donc une bonne longueur…

Catégorie : Développement, Flash, Innovation, Motion, Technologie, Vidéo | Aucun commentaireMots-clefs : Dailymotion, développement, Flash, google, Innovation, motion, plateformes, plateformes vidéos, référencement, vidéos, Viméo, Youtube

L’art génératif, ou la représentation des données en mode visuel

Vendredi 12 février 2010

visual_compexity

Manuel Lima, Nokia Londres, designer d’interaction, nous propose Visualcomplexity.com dont le sujet est basé sur ce qu’on appelle « art génératif ».

Les points de départ sont souvent les informations structurelles de la société qui déterminent les tendances culturelles et les modèles émergents aujourd’hui.
http://www.visualcomplexity.com/vc/
Les résultats visuels sont assez beaux, très graphiques

Art génératif, la représentation des données :

John Maeda avait ouvert la voie mais il est vrai qu’on voit apparaitre plein de projets créatifs notamment autour de la galaxie processing :
http://processing.org/exhibition

Un autre Cador sur le sujet : Aaron Koblin
http://www.etapes.com/actus/video-interview-de-aaron-koblin
http://www.aaronkoblin.com/work.html

Catégorie : Art, Design, Développement, Graphisme, Innovation | Aucun commentaireMots-clefs : art génératif, data, Design, graphisme, interactive, processing, tendances

Un coup d’oeil sur les interfaces expérimentales, avec Bestiario

Jeudi 8 octobre 2009

Ce site n’est pas « tout neuf, tout neuf », mais il référence un certain nombre de sites aux interfaces surprenantes et parfois impressionnantes, toutefois l’ergonomie n’est pas toujours de la partie, mais à voir.
http://bestiario.org/

Il me fait également penser à de l’art génératif et au travaux d’Aaron Koblin
http://www.etapes.com/actus/video-interview-de-aaron-koblin
http://www.aaronkoblin.com/work.html

Catégorie : Développement, Flash, Graphisme, Innovation | Aucun commentaireMots-clefs : art génératif, Design, développement, ergonomie, expérience utilisateur, interface, Koblin

Interface cachée, interface objet

Jeudi 1 octobre 2009

Une tendance semble se dessiner. Les interfaces deviennent de plus en plus transparentes, se dématérialisent au sens propre comme au sens figuré. Que se soit OS X leopard, PLASMA KDE sur LINUX, Windows VISTA et son remplaçant SEVEN, tous ces systèmes d’exploitations tendent à adopter des environnements graphiques (GUI) qui reproduisent l’aspect du verre dépoli surtout dans la représentation des fenêtres mais aussi celles de nombreux éléments de l’interface, sans compter la généralisation du support multitouch.

pile (stack) apple Mac OSX / Iphone

Le système des icônes placées dans une fenêtre semble vivre ses dernières années. Les icônes deviennent le contenu du document qu’ils représentent et ne sont plus une reproduction symbolique associée à un nom de fichier comme cela a été le cas ces dernières décennies. Nous passons d’une représentation abstraite du document numérique à une représentation figurative. Les dernières innovations permettent d’agrandir l’icône et de prévisualiser le contenu du document. Les dossiers ne sont plus représentés tels qu’ils l’étaient mais empreintent le concept de pile de documents (ou stack) comme on empilerait nos documents sur un bureau réel. Les interfaces mobiles (aux écrans de tailles réduites) préfigure semble t’ il la généralisation de ses principes.

Si nous poussons la logique jusqu’au bout, c’est l’interface elle même qui disparaît au profit de l’objet intelligent, l’interface étant cachée dans l’objet lui même. Microsoft imagine dans le futur que l’interface soit totalement transparente et qu’elle se mélange à notre environnement immédiat. Cf vidéo ci-dessous
L’objet devient alors l’interface.

http://www.officelabs.com

Par conséquent, nous nous retrouvons avec l’impression que les interfaces vont se multiplier dans un avenir proche mais que les standards ne sont absolument pas établis. J’ai envie de dire que nous vivons la phase la plus excitante de se genre d’innovation.

Pourquoi parle t’on de standard ? Tout simplement parce que, qui dit interface dit aussi apprentissage de cette interface. Même si ces interfaces se veulent intuitives, on sent bien qu’au travers des différentes démonstrations des prototypes, ces innovations requièrent un apprentissage gestuel et cognitif.

Plus ces interfaces semblent transparentes, plus elles mettent en jeu des techniques complexes. Nous, nous dirigeons alors vers encore plus d’opacité technique (même si l’interface est intuitive elle n’en demeure pas moins mystérieuse / magique et techniquement de plus en plus complexe à comprendre pour le quidam et par conséquent elle nous échappe)

Quelques liens et vidéos sur le sujet

Touch (multipoint)

http://www.perceptivepixel.com

perceptive pixel / jeff hann

Apprentissage des interfaces, des gestes

Table Windows SURFACE
http://www.youtube.com/watch?v=ZlWCgWCoeOg
Interconnexion des objets entre eux (généralisation du sans fil)

Piloter un ordinateur avec des gestes

L’histoire du multitouch
http://www.billbuxton.com/multitouchOverview.html

Grape, votre bureau de demain ?

http://www.mac4ever.com/news/43093

grape pour OS X, permet d

Intuition
Manipulation / la main / disparition du pointeur
On avait symboliser la main par le pointeur de la souris, aujourd’hui, la main n’a plus besoin d’être représentée puisqu’elle c’est elle même qui agit sur l’interface

bureau virtuel en 3D

BumpTop 1.0 – 3D Desktop Zen

http://www.engadget.com/2009/04/08/video-bumptop-gives-windows-7-touchscreen-pcs-purpose/#continued

bumptop, prototype de bureau 3D

BumpTop est un bureau virtuel en 3D facile à utiliser qui imite notre comportement et face à un bureau réel. Selon le site, cette interface innovante vous permettrait d’être plus productif.
Ce bureau Windows organise visuellement vos fichiers, permet le rangement de dossiers, de zoomer sur des photos etc..
L’attrait de Bumtop réside dans l’aspect ludique et high-tech des commandes de votre ordinateur. Il reproduit à merveilles les documents qu’on empile sur son bureau pour les avoir sous la main.

On peut se demander toutefois si ces interfaces sont réellement efficientes. Certes l’expérience semble très amusante, divertissante, visiblement on éprouve beaucoup de plaisir à manipuler les informations aux bouts des doigts mais, nous pouvons nous demander si les interfaces de type Bump top sont adaptées à manipuler un grand nombre de documents et si on pourra un jours travailler réellement avec.

Les précurseurs

DIGITAL DESK
Pierre WELLENER 1991

Représentation d’une interface avec des objets réels

Et pour finir l’amusante pub pour google chrome

Frisco

Catégorie : Développement, Innovation, Mobilité | Aucun commentaireMots-clefs : Design, interface, interface objet, Linux, mobile, Office Labs, OS, tendances, Windows