Présentation faire à SudWeb 2012 décrivant l'utilisation faite de HTML

1. L'Open Web en tant que
pierre angulaire du
développement multi-objets
@tbassetto

2. Mon parcours
• Développeur Front-End chez
• Développeur JavaScript chez
• Paris Hackers, ParisJS, PhoneGap Paris
• Représentant français pour Mozilla
WebFWD

3. Joshfire

4. Définitions

5. L'Open Web en tant que
pierre angulaire du
développement multi-objets

6. L'Open Web en tant que
pierre angulaire du
développement multi-objets

7. Objets connectés ?
http://fuckyeahinternetfridge.tumblr.com

8. Multi-objets connectés
On ne laisse personne derrière (ordinateurs de
bureau, ordinateurs portables, téléphones,
tablettes,TVs, etc.)

9. Multi-objets connectés
• Multi-touch • Push
• GPS • Bluetooth / RFID
• Accéléromètre • Capteurs de
• Orientation proximité
• Microphone • Capteurs de
luminosité
• Capture video &
image • Gyroscope

10. “Open Web”
• Nous réalisons peu de sites Web
• Principalement des applications ou objets
basées sur HTML/CSS/JS (hybrides)

11. Le choix de l’hybride

12. Application hybride
© trigger.io

13. Une fragmentation à
plusieurs niveaux
famille
marque ...
perfs
input
language Java .NET Objective-C JS C++

14. Pourquoi ce choix ?
• Mutualisation des • Expérience plus
compétences complète
• Mutualisation du • Utilisation des
code markets
• Royalty Free • APIs disponibles

15. Expérience “bizarre”

16. Accès aux APIs

17. Qualité

18. Partage de code

19. Hybrides célèbres

20. Le natif ne fait pas tout

21. Problématiques évitées
• SEO
• Nombre de requêtes HTTP
• Plus d’accès depuis un UA inconnu

22. Nouvelles problématiques
• Validation pour entrer dans le market
• Gestion de la perte de connexion
• Resume/pause de l’application
• Mise à jour

23. WRITE ONCE, RUN
EVERYWHERE

24. Objectif
• Adapter le layout et le comportement
• Tout en partageant le même coeur
applicatif, le même contenu

29. Responsive Web Design
Le postulat de départ : même code HTML,
changement de layout via des media-queries

30. Responsive Web Design
@media screen and (max-width:480px)
@media screen and (max-width:999px)
{
{
#nav
#extras
{
{
float: none;
clear: left;
width: auto;
float: none;
}
margin: 0 0 0 225px;
width: 550px;
#extras
}
{
}
float: none;
width: auto;
margin: 0;
}
.feature-image { display: none; }
}

31. Feature detection
• Par exemple, pour navigateur “moderne” :
if('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window) {
// victoire
} else {
// ...
}

32. Feature detection:
Modernizr
if (Modernizr.localstorage) {
// localstorage disponible
} else {
// on doit faire sans
}

33. Les limites
• Pas toujours suffisant
• Pas de dégradation possible, expérience
complète
• Utilisation du RWD par type de familles

34. Outils
• adapt.js
• respond.js
• formfactor.js
• device.js

35. (function() {
formfactor.js
/* contents of tv.js */
formfactor.register({tv: [
"tv",
function() { return navigator.indexOf("Samsung") > 0; },
(navigtor.indexOf("Samsung") > 0)
]
})();
var formfactor = formfactor.detect([
{
formfactor : "tv",
resources: ["/style/tv.css", "/style/fullscreen.less",
"/script/ambientsounds.js", "/script/fx.coffee" ],
callbacks: function() { alert("Look mum, I am on TV!"); }
},
},
// default callback when nothing matches.
{
"resources": ["/style/plain.css", "script/plain.js"],
"callbacks": function() { alert("In plain mode.");}
}
);

36. device.js
<link rel="alternate" href="http://foo.com" id="desktop"
media="only screen and (touch-enabled: 0)">
<link rel="alternate" href="http://m.foo.com" id="phone"
media="only screen and (max-device-width: 640px)">
<link rel="alternate" href="http://tablet.foo.com"
id="tablet" media="only screen and (min-device-width:
641px)">
<script src="device.js"></script>

37. Frameworks UI
• jQuery Mobile
• Sencha Touch 2
• Kendo UI Mobile
• Jo

38. Frameworks
• Backbone.js
• Ember
• Ender
• Zepto

39. Créer son framework
• “Joshfire Framework 2”
• Basé sur Backbone.js + Require.js
• Sur GitHub, dans une branche (pas master)
mais sans documentation

40. Quelques considérations
sur les différentes familles
d’objets

41. Téléphones & Tablettes

42. PhoneGap/Cordova

43. Principe
• Même APIs pour accéder aux capteurs
quelque soit le matériel
• Système de plugin qui permet quand même
d’appeler toutes les fonctions du SDK
officiel

44. API disponibles
• Calquées sur celle du W3C
• Risque d’évolution en fonction de B2G

45. Exemple
navigator.camera.getPicture(onSuccess, onFail, { quality: 50 });
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
}

46. Debug mobile

47. Weinre
Mettre les lignes de
commandes qui vont bien

48. Weinre
• $ sudo npm -g install weinre
• Insérer <script src="http://a.b.c:8081/
target/target-script-min.js"></script>
• http://debug.phonegap.com

49. Simuler les événements
touch
• Options des nouveaux Chrome Dev Tools
• Touch Bookmarklet: http://
louisremi.github.com/touch-devtool/

50. Un mot sur les touch
events
• Version W3C basée sur l’implémentation
d’Apple
• Bloquée par Apple
• Version Microsoft

51. TVs

52. En commun
• Un paradigme entièrement différent
• Contexte connu (contrairement aux
téléphones)
• La télécommande s’utilise comme un
clavier moins souvent comme une souris
• Domaine des jeux et des médias vidéos

53. Problèmes
<link rel="stylesheet" media="screen" href="...">
<link rel="stylesheet" media="tv" href="...">
User Agent String d’une LG Smart TV 2012:
Mozilla/5.0 (DirectFB; Linux; ko-KR)
AppleWebKit/534.26+ (KHTML, like
Gecko) Version/5.0 Safari/534.26+

54. Samsung
• SDK Windows
• Leader incontesté
• Basé sur un vieux Firefox (peut-être plus
vrai en 2012)

55. Philips
• Moteur web basé sur Opera
• Site Web plein écran

56. LG
• SDK Windows
• Basé sur WebKit
• On peut soumettre une URL à leur store

57. Google TV
• Comme un Chrome (sauf le paradigme
différent)
• <meta name="gtv-autozoom"
content="off" />

58. “Desktop”

59. Peu de solutions
• QtWebKit
• MacGap
• AIR

60. Les objets ambiants

61. Juste un jeu d’API

62. Serveur d’API

63. BeagleBone
L’embarqué cible le developpeur système / C
mais si on préinstalle node et cloud9 cela
change la donne

64. Raspberry PI

65. Le Miroir

66. Le Miroir

67. Le Miroir
• Micro-ordinateur
• WebKit plein écran
• Une app hybride pour en lancer d’autres

68. Canapé

69. Canapé
• Arduino + RFID
• Serveur node.js qui pilote une Google TV

70. La Borne

71. La Borne

72. La Borne
• iPad + app hybride
• Arduino + RFID pour passer le badge

73. Conclusion

74. Quelques souhaits
• Plus d’implications dans les devices APIs
• De meilleurs frameworks multi-objets

75. Two more things

76. Joshfire recrute !
http://www.notaregularcompany.com

77. dotJS.fr — 30 Nov

78. + grande conférence
JavaScript en France

79. Mr doob
Tickets early birds: http://www.dotjs.fr

80. QUESTIONS ?