Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Multi screen HTML5

11 862 vues

Publié le

Learn how to design responsive HTML5 websites and applications, and learn how to choose the right tool for the job.

Publié dans : Technologie
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ▲▲▲ https://tinyurl.com/rockhardxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  •  https://tinyurl.com/rockhardxxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Multi screen HTML5

  1. 1. MULTI-SCREEN HTML5 Ron Reiter
  2. 2. Who am I? •  Ron Reiter •  HTML5 Google Developer Expert •  HTML5-IL •  Consultant, Freelancer
  3. 3. HTML5 != WEB •  HTML5 is a platform for writing applications •  Browser + Server = Web !=  
  4. 4. Why mobile web? •  Global mobile traffic now represents roughly 13% of Internet traffic •  Gartner research: In 2013 more than half of users will surf the web via smartphones •  Nearly 1/3 of UK page views are from mobiles and tablets BECAUSE YOU NEED TO DO IT
  5. 5. Why HTML5? •  Cross platform development •  FirefoxOS •  PhoneGap •  Desktops run JavaScript with great performance •  Devices are only getting stronger (Zuckerberg, kiss my *ss)
  6. 6. Why NOT HTML5? •  Millisecond grade interaction and animations •  HTML5 is not quite there yet
  7. 7. Why Multi-screen?
  8. 8. OK, I WANT MULTISCREEN
  9. 9. CSS Media Queries
  10. 10. CSS Media Queries - Before $(window).resize(  function()  {          if  ($(window).width()  <  480)  {              document.body.className  =  “smartphone”;          }  else  if  ($(window).width()  >=  480  &&  $(window).width()  <  940)  {              document.body.className  =  “tablet”;          }  else  {              document.body.className  =  “desktop”;          }    });  
  11. 11. CSS Media Queries - After @media  (max-­‐width:  479px)  {    }    @media  (min-­‐width:  480px)  and  (max-­‐width:  939px)  {    }    @media  (min-­‐width:  940px)  {    }      
  12. 12. CSS Media Queries - After <link  rel="stylesheet"        type="text/css"  media="screen"  href="sans-­‐serif.css">    <link  rel="stylesheet"        type="text/css"  media="print"  href="serif.css">  
  13. 13. CSS Media Queries - After @import  url(responsive-­‐retina.css)  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  1.5),  (min-­‐resolution:  144dpi);  
  14. 14. Important media queries •  print  /  screen  •  orientation  •  min-­‐width  •  max-­‐width  •  min-­‐device-­‐width  •  max-­‐device-­‐width  •  -­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio    /  min-­‐resolution    
  15. 15. Why is this better? •  Declarative CSS allows hardware acceleration •  Browser Optimizations •  Less ugly
  16. 16. Viewport meta tag •  This viewport tag disables mobile viewport resizing: <meta  name="viewport”  content=”          width=device-­‐width,  initial-­‐scale=1.0,  maximum-­‐scale=1.0,  user-­‐scalable=no   ”>  •  Use it when you build responsive interfaces
  17. 17. http://mediaqueri.es
  18. 18. App or mobile web? •  You already have your website, and now you want to support mobile devices. •  Website –  Easier maintenance •  Application –  More abilities
  19. 19. What are my options? •  Change your current website to a responsive web site •  Your original website + Special website for tablets and smartphones •  Just make an app (HTML5, native, etc).
  20. 20. Responsive web UI Frameworks Responsive  Web  Sites   Mobile  First   Twi$er  Bootstrap   jQuery  Mobile  
  21. 21. HTML5 Mobile First Applications
  22. 22. Mobile First Web Applications •  Make a mobile website •  Mobile application development platform UI  Frameworks   jQuery  Mobile   Sencha  Touch   jqMobi  DOM  ManipulaMon  Frameworks   jQuery,  Zepto  MVC  Frameworks   Backbone.js   Ember.js   Angular.js  
  23. 23. jQuery Mobile •  Amazing mobile framework •  Themable •  Cross Platform •  Around for a while
  24. 24. jQuery Mobile Prototyping - Codiqa
  25. 25. How to start •  Create a new HTML page with: <link  rel="stylesheet"  href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-­‐1.3.0.min.css"  />  <script  src="http://code.jquery.com/jquery-­‐1.8.2.min.js"></script>  <script  src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-­‐1.3.0.min.js"></script>  •  Or use Codiqa to download your app
  26. 26. How to use jQuery Mobile
  27. 27. What can jQuery Mobile do?
  28. 28. jQuery Mobile •  What can I do with jQuery mobile? •  Go to http://view.jquerymobile.com/1.3.0/ using your smartphone or tablet
  29. 29. Responsive Applications
  30. 30. Responsive Applications
  31. 31. Responsive Applications
  32. 32. Reflow Tables (web)
  33. 33. Reflow Tables (mobile)
  34. 34. jQuery Mobile Architecture & Navigation
  35. 35. jQuery Mobile Architecture AJAX  /  Preloaded Web  NavigaMon  One  HTML,  Two  pages   Two  HTMLs,  Two  pages  
  36. 36. AJAX Navigation •  Instead of changing the document location, we use $.mobile.navigate (saves history) $(“a”).on(“click”,  function(  event  )  {    event.preventDefault();    $.mobile.navigate  (  this.attr(“href”)  );  });  
  37. 37. AJAX Navigation •  Once we navigate, a “navigate” event is fired  $(window).on(“navigate”,  function(event,  data)  {          //  load  new  content  using  AJAX  });  
  38. 38. Navigating between loaded pages JavaScript:  $.mobile.changePage(“#page2”,  “pop”,  false,  true);  $.mobile.back();  HTML:  <div  data-­‐role=“page”  id=“page1”></div>  <div  data-­‐role=“page”  id=“page2”></div>  
  39. 39. Creating a page dynamically JavaScript:    $(document.body).append(<div  data-­‐role="page"  id=”page2"><div  data-­‐role="content">  +  content  +  </div></div>);  $.mobile.initializePage();  $.mobile.changePage(“#page2”,  “pop”,  false,  true);  
  40. 40. jQuery Mobile + MVC •  Angular –  https://github.com/tigbro/jquery-mobile-angular- adapter •  Backbone – we need a special router –  https://github.com/azicchetti/jquerymobile-router •  Ember + jQuery Mobile is a bit harder since both frameworks utilize a fair amount of voodoo
  41. 41. OK, I want an app! •  PhoneGap / Apache Cordova – Gives native API access from JavaScript •  PhoneGap was bought by Adobe, so that non- Adobe development is done in Cordova
  42. 42. PhoneGap Build •  Removes the need for compiling to all platforms
  43. 43. Desktop?
  44. 44. Responsive Web Design
  45. 45. Responsive Web Design •  Web sites with a simple UI need to adapt to multiple screen form factors •  Web sites are less complicated than web applications, but still very similar •  jQuery mobile is also a tool for responsive web design –  http://view.jquerymobile.com/1.3.0/docs/intro/ rwd.php
  46. 46. Twitter Bootstrap
  47. 47. Twitter Bootstrap •  UI framework is more straightforward than jQuery Mobile •  The UI elements are not as good for mobile as jQuery Mobile •  Mobile browsers do not behave well with advanced Bootstrap UI elements like jQuery Mobile does
  48. 48. How to make Bootstrap responsive? •  Add this to your Bootstrap app: <meta  name="viewport"  content="width=device-­‐width,  initial-­‐scale=1.0">  <link  href="assets/css/bootstrap-­‐responsive.css"  rel="stylesheet">  •  And you’re ready to go!
  49. 49. Twitter Bootstrap Grid <div  class=“container”>      <div  class=“row”>  <!-­‐-­‐  columns  must  sum  up  to  12  -­‐-­‐>          <div  class=“span4”>  …  content  …  </div>          <div  class=“span4”>  …  content  …  </div>                  <div  class=“span4”>  …  content  …  </div>      </div>  </div>  
  50. 50. Bootstrap Grid (web) span4   span4   span4  
  51. 51. Bootstrap Grid (mobile) span4   span4   span4  
  52. 52. Example (web)
  53. 53. Example (mobile)
  54. 54. Initializr
  55. 55. Responsive Design Bookmarklet http://responsive.victorcoulon.fr/
  56. 56. Viewport Resizerhttp://lab.maltewassermann.com/viewport-resizer/
  57. 57. THANK YOU!

×