Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,821 views

Published on

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

Published in: Technology
  • You might get some help from ⇒ www.HelpWriting.net ⇐ Success and best regards!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. LOpen Web en tant que pierre angulaire dudéveloppement multi-objets @tbassetto
  2. 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. 3. Joshfire
  4. 4. Définitions
  5. 5. LOpen Web en tant que pierre angulaire dudéveloppement multi-objets
  6. 6. LOpen Web en tant que pierre angulaire dudéveloppement multi-objets
  7. 7. Objets connectés ?http://fuckyeahinternetfridge.tumblr.com
  8. 8. Multi-objets connectésOn ne laisse personne derrière (ordinateurs de bureau, ordinateurs portables, téléphones, tablettes,TVs, etc.)
  9. 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. 10. “Open Web”• Nous réalisons peu de sites Web• Principalement des applications ou objets basées sur HTML/CSS/JS (hybrides)
  11. 11. Le choix de l’hybride
  12. 12. Application hybride © trigger.io
  13. 13. Une fragmentation à plusieurs niveaux famille marque ... perfs input language Java .NET Objective-C JS C++
  14. 14. Pourquoi ce choix ?• Mutualisation des • Expérience plus compétences complète• Mutualisation du • Utilisation des code markets• Royalty Free • APIs disponibles
  15. 15. Expérience “bizarre”
  16. 16. Accès aux APIs
  17. 17. Qualité
  18. 18. Partage de code
  19. 19. Hybrides célèbres
  20. 20. Le natif ne fait pas tout
  21. 21. Problématiques évitées• SEO• Nombre de requêtes HTTP• Plus d’accès depuis un UA inconnu
  22. 22. Nouvelles problématiques • Validation pour entrer dans le market • Gestion de la perte de connexion • Resume/pause de l’application • Mise à jour
  23. 23. WRITE ONCE, RUN EVERYWHERE
  24. 24. Objectif• Adapter le layout et le comportement• Tout en partageant le même coeur applicatif, le même contenu
  25. 25. Responsive Web Design Le postulat de départ : même code HTML, changement de layout via des media-queries
  26. 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. 27. Feature detection• Par exemple, pour navigateur “moderne” : if(querySelector in document      && localStorage in window      && addEventListener in window) {      // victoire } else {      // ...     }
  28. 28. Feature detection: Modernizrif (Modernizr.localstorage) { // localstorage disponible} else { // on doit faire sans}
  29. 29. Les limites• Pas toujours suffisant• Pas de dégradation possible, expérience complète• Utilisation du RWD par type de familles
  30. 30. Outils• adapt.js• respond.js• formfactor.js• device.js
  31. 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. 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. 33. Frameworks UI• jQuery Mobile• Sencha Touch 2• Kendo UI Mobile• Jo
  34. 34. Frameworks• Backbone.js• Ember• Ender• Zepto
  35. 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. 36. Quelques considérationssur les différentes familles d’objets
  37. 37. Téléphones & Tablettes
  38. 38. PhoneGap/Cordova
  39. 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. 40. API disponibles• Calquées sur celle du W3C• Risque d’évolution en fonction de B2G
  41. 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. 42. Debug mobile
  43. 43. Weinre Mettre les lignes de commandes qui vont bien
  44. 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. 45. Simuler les événements touch• Options des nouveaux Chrome Dev Tools• Touch Bookmarklet: http:// louisremi.github.com/touch-devtool/
  46. 46. Un mot sur les touch events• Version W3C basée sur l’implémentation d’Apple• Bloquée par Apple• Version Microsoft
  47. 47. TVs
  48. 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. 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. 50. Samsung• SDK Windows• Leader incontesté• Basé sur un vieux Firefox (peut-être plus vrai en 2012)
  51. 51. Philips• Moteur web basé sur Opera• Site Web plein écran
  52. 52. LG• SDK Windows• Basé sur WebKit• On peut soumettre une URL à leur store
  53. 53. Google TV• Comme un Chrome (sauf le paradigme différent)• <meta name="gtv-autozoom" content="off" />
  54. 54. “Desktop”
  55. 55. Peu de solutions• QtWebKit• MacGap• AIR
  56. 56. Les objets ambiants
  57. 57. Juste un jeu d’API
  58. 58. Serveur d’API
  59. 59. BeagleBoneL’embarqué cible le developpeur système / C mais si on préinstalle node et cloud9 cela change la donne
  60. 60. Raspberry PI
  61. 61. Le Miroir
  62. 62. Le Miroir
  63. 63. Le Miroir• Micro-ordinateur• WebKit plein écran• Une app hybride pour en lancer d’autres
  64. 64. Canapé
  65. 65. Canapé• Arduino + RFID• Serveur node.js qui pilote une Google TV
  66. 66. La Borne
  67. 67. La Borne
  68. 68. La Borne• iPad + app hybride• Arduino + RFID pour passer le badge
  69. 69. Conclusion
  70. 70. Quelques souhaits• Plus d’implications dans les devices APIs• De meilleurs frameworks multi-objets
  71. 71. Two more things
  72. 72. Joshfire recrute !http://www.notaregularcompany.com
  73. 73. dotJS.fr — 30 Nov
  74. 74. + grande conférenceJavaScript en France
  75. 75. Mr doobTickets early birds: http://www.dotjs.fr
  76. 76. QUESTIONS ?

×