Your SlideShare is downloading. ×
0
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,239

Published on

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

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,239
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. LOpen Web en tant que pierre angulaire dudé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. LOpen Web en tant que pierre angulaire dudéveloppement multi-objets
  • 6. LOpen Web en tant que pierre angulaire dudéveloppement multi-objets
  • 7. Objets connectés ?http://fuckyeahinternetfridge.tumblr.com
  • 8. Multi-objets connectésOn 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
  • 25. Responsive Web Design Le postulat de départ : même code HTML, changement de layout via des media-queries
  • 26. 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; } }
  • 27. Feature detection• Par exemple, pour navigateur “moderne” : if(querySelector in document      && localStorage in window      && addEventListener in window) {      // victoire } else {      // ...     }
  • 28. Feature detection: Modernizrif (Modernizr.localstorage) { // localstorage disponible} else { // on doit faire sans}
  • 29. Les limites• Pas toujours suffisant• Pas de dégradation possible, expérience complète• Utilisation du RWD par type de familles
  • 30. Outils• adapt.js• respond.js• formfactor.js• device.js
  • 31. (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.");}});
  • 32. 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>
  • 33. Frameworks UI• jQuery Mobile• Sencha Touch 2• Kendo UI Mobile• Jo
  • 34. Frameworks• Backbone.js• Ember• Ender• Zepto
  • 35. Créer son framework• “Joshfire Framework 2”• Basé sur Backbone.js + Require.js• Sur GitHub, dans une branche (pas master) mais sans documentation
  • 36. Quelques considérationssur les différentes familles d’objets
  • 37. Téléphones & Tablettes
  • 38. PhoneGap/Cordova
  • 39. 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
  • 40. API disponibles• Calquées sur celle du W3C• Risque d’évolution en fonction de B2G
  • 41. Exemplenavigator.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);}
  • 42. Debug mobile
  • 43. Weinre Mettre les lignes de commandes qui vont bien
  • 44. 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
  • 45. Simuler les événements touch• Options des nouveaux Chrome Dev Tools• Touch Bookmarklet: http:// louisremi.github.com/touch-devtool/
  • 46. Un mot sur les touch events• Version W3C basée sur l’implémentation d’Apple• Bloquée par Apple• Version Microsoft
  • 47. TVs
  • 48. 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
  • 49. 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+
  • 50. Samsung• SDK Windows• Leader incontesté• Basé sur un vieux Firefox (peut-être plus vrai en 2012)
  • 51. Philips• Moteur web basé sur Opera• Site Web plein écran
  • 52. LG• SDK Windows• Basé sur WebKit• On peut soumettre une URL à leur store
  • 53. Google TV• Comme un Chrome (sauf le paradigme différent)• <meta name="gtv-autozoom" content="off" />
  • 54. “Desktop”
  • 55. Peu de solutions• QtWebKit• MacGap• AIR
  • 56. Les objets ambiants
  • 57. Juste un jeu d’API
  • 58. Serveur d’API
  • 59. BeagleBoneL’embarqué cible le developpeur système / C mais si on préinstalle node et cloud9 cela change la donne
  • 60. Raspberry PI
  • 61. Le Miroir
  • 62. Le Miroir
  • 63. Le Miroir• Micro-ordinateur• WebKit plein écran• Une app hybride pour en lancer d’autres
  • 64. Canapé
  • 65. Canapé• Arduino + RFID• Serveur node.js qui pilote une Google TV
  • 66. La Borne
  • 67. La Borne
  • 68. La Borne• iPad + app hybride• Arduino + RFID pour passer le badge
  • 69. Conclusion
  • 70. Quelques souhaits• Plus d’implications dans les devices APIs• De meilleurs frameworks multi-objets
  • 71. Two more things
  • 72. Joshfire recrute !http://www.notaregularcompany.com
  • 73. dotJS.fr — 30 Nov
  • 74. + grande conférenceJavaScript en France
  • 75. Mr doobTickets early birds: http://www.dotjs.fr
  • 76. QUESTIONS ?

×