MULTI-SCREEN HTML5	      Ron Reiter
Who am I?	•  Ron Reiter	•  HTML5 Google Developer   Expert	•  HTML5-IL	•  Consultant, Freelancer
HTML5 != WEB	•  HTML5 is a platform for writing applications	•  Browser + Server = Web	                   !=	  
Why mobile web?	•  Global mobile traffic now represents roughly 13% of Internet traffic	•  Gartner research: In 2013 more th...
Why HTML5?	•  Cross platform development	•  FirefoxOS	•  PhoneGap	•  Desktops run JavaScript with great   performance	•  D...
Why NOT HTML5?	•  Millisecond grade interaction and animations	•  HTML5 is not quite there yet
Why Multi-screen?
OK, I WANT MULTISCREEN
CSS Media Queries
CSS Media Queries - Before	$(window).resize(	  function()	  {	  	  	  	  	  if	  ($(window).width()	  <	  480)	  {	  	  	 ...
CSS Media Queries - After	@media	  (max-­‐width:	  479px)	  {	  	  }	  	  @media	  (min-­‐width:	  480px)	  and	  (max-­‐w...
CSS Media Queries - After	<link	  rel="stylesheet"	  	  	  	  type="text/css"	  media="screen"	  href="sans-­‐serif.css">	...
CSS Media Queries - After	@import	  url(responsive-­‐retina.css)	  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:	  1.5),	  (m...
Important media queries	•  print	  /	  screen	  •  orientation	  •  min-­‐width	  •  max-­‐width	  •  min-­‐device-­‐width...
Why is this better?	•  Declarative CSS allows hardware acceleration	•  Browser Optimizations	•  Less ugly
Viewport meta tag	•  This viewport tag disables mobile viewport   resizing:	  <meta	  name="viewport”	  content=”	    	  	...
http://mediaqueri.es
App or mobile web?	•  You already have your website, and now you   want to support mobile devices.	•  Website	   –  Easier...
What are my options?	•  Change your current website to a responsive   web site	•  Your original website + Special website ...
Responsive web UI Frameworks	 Responsive	  Web	  Sites	      Mobile	  First	    Twi$er	  Bootstrap	           jQuery	  Mob...
HTML5 Mobile First Applications
Mobile First Web Applications	•  Make a mobile website	•  Mobile application development platform	 UI	  Frameworks	      j...
jQuery Mobile	•    Amazing mobile framework	•    Themable	•    Cross Platform	•    Around for a while
jQuery Mobile Prototyping - Codiqa
How to start	•  Create a new HTML page with:	<link	  rel="stylesheet"	  href="http://code.jquery.com/mobile/1.3.0/jquery.m...
How to use jQuery Mobile
What can jQuery Mobile do?
jQuery Mobile	•  What can I do with jQuery mobile?	•  Go to http://view.jquerymobile.com/1.3.0/   using your smartphone or...
Responsive Applications
Responsive Applications
Responsive Applications
Reflow Tables (web)
Reflow Tables (mobile)
jQuery Mobile Architecture &        Navigation
jQuery Mobile Architecture	  AJAX	  /	  Preloaded	            Web	  NavigaMon	  One	  HTML,	  Two	  pages	     Two	  HTMLs...
AJAX Navigation	•  Instead of changing the document location, we    use $.mobile.navigate (saves history)		$(“a”).on(“clic...
AJAX Navigation	•  Once we navigate, a “navigate” event is fired		  $(window).on(“navigate”,	  function(event,	  data)	  {	...
Navigating between loaded pages	JavaScript:	  $.mobile.changePage(“#page2”,	  “pop”,	  false,	  true);	  $.mobile.back();	...
Creating a page dynamically	JavaScript:	  	  $(document.body).append(<div	  data-­‐role="page"	  id=”page2"><div	  data-­‐...
jQuery Mobile + MVC	•  Angular	   –  https://github.com/tigbro/jquery-mobile-angular-      adapter	•  Backbone – we need a...
OK, I want an app!	•  PhoneGap / Apache Cordova – Gives   native API access from JavaScript	•  PhoneGap was bought by Adob...
PhoneGap Build	•  Removes the need for compiling to all   platforms
Desktop?
Responsive Web Design
Responsive Web Design	•  Web sites with a simple UI need to adapt to   multiple screen form factors	•  Web sites are less ...
Twitter Bootstrap
Twitter Bootstrap	•  UI framework is more straightforward than   jQuery Mobile	•  The UI elements are not as good for mobi...
How to make Bootstrap responsive?	•  Add this to your Bootstrap app:	<meta	  name="viewport"	  content="width=device-­‐wid...
Twitter Bootstrap Grid	<div	  class=“container”>	  	  	  <div	  class=“row”>	  <!-­‐-­‐	  columns	  must	  sum	  up	  to	 ...
Bootstrap Grid (web)	span4	        span4	     span4	  
Bootstrap Grid (mobile)	           span4	             span4	             span4	  
Example (web)
Example (mobile)
Initializr
Responsive Design Bookmarklet        http://responsive.victorcoulon.fr/
Viewport Resizerhttp://lab.maltewassermann.com/viewport-resizer/
THANK YOU!
Upcoming SlideShare
Loading in...5
×

Multi screen HTML5

6,867

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,867
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
72
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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!
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×