Conquérir l'internet des objets avec les technologies web. (Kiwi Party 2012)

Steren Giannini

Conquérir l'internet des objets

avec les technologies web

@Steren

Chef de produit chez Joshfire

2008

2010

2012

Objets connectés :

2010 2015 2020

5Mrd15Mrd

50Mrd

25$

Ubimedia

Exploiter n’importe quel objet ou surface

comme support de diffusion de contenuet source d’interaction avec leur

environnement.

Offrir la meilleureexpérience utilisateur

sur chaque objet.

type

marque

perfos

une fragmentation à plusieurs niveaux

fonctions

SDK Java .NET ObjectiveC JS C++

Web (ou Hybrid) apps(HTML, CSS, JavaScript)

adaptées à chaque type d'objet.

Solution

Adapter le style,le comportement,

le contenu.

Tout en partageant le même coeur applicatif,

les mêmes données.

Détecter le type d'objet

taille d'écran et feature detection

<script src="modernizr.js"></script> if(Modernizr.touch)

user-agent

https://github.com/3rd-Eden/useragent

var useragent = require("useragent"); var families = {

"iPad":"tablet","webOS TouchPad":"tablet",...

"Android":"phone","iPhone":"phone",...

"GoogleTV":"tv","PhilipsTV":"tv",...

}; var agent = useragent.parse(ua); var deviceType = agent ? families[agent.family] : "desktop";

(côté client ou serveur)

@media

@media (orientation: portrait) { .menu li .picto{ width: 50px; }}

Ajustements de style à l'aide des media queries

Outils

Applications riches coté client

Frameworks MVC :

Découpe du code :requireJS, LESS

Validation :

JS Hint

Frameworks mobiles insuffisants.

Debug à distance: Weinre

https://github.com/apache/incubator-cordova-weinre

<script src="http://192.168.1.66:8080/target/target-script-min.js#anonymous"></script>

Build to native:Cordova (Phonegap)

Limité aux objets avec navigateurs ? Faux.

Joshfire factory

Questions ?

templates data

preview deploy