HTML5 and the dawn of rich mobile web applications         @ jamespearce
Part IIjQuery MobileSencha Touch
jQuery Mobile
http://jquerymobile.com/
“A unified user interfacesystem that works seamlessly   across all popular mobile      device platforms”
Key features      Built on jQuery      Modular libraryMarkup-driven configuration Progressive enhancement
<!DOCTYPE html><html>    <head>        <title>jQuery Mobile</title>        <script src="jq.js"></script><script src="jqm.j...
Page...<body>    <div data-role="page" id="home">          <div data-role="header">              ...          </div>      ...
Multiple Pages...<body>    <div data-role="page" id="home">        <a href="#products">Products</a>    </div>    <div data...
Disable AJAX...<body>    <div data-role="page" id="home">          <a href="#products" data-ajax="false">Products</a>     ...
Back buttons...<body>    <div data-role="page" id="home">          <a href="#products">Products</a>    </div>    <div data...
Transitions...<body>    <div data-role="page" id="home">          <a href="#products" data-transition="fade">Products</a> ...
Dialogs...<body>    <div data-role="page" id="home">          <a href="#products" data-rel="dialog">Products</a>    </div>...
Themes...<body>    <div data-role="page" id="home" data-theme="b">        ...    </div></body>...
Toolbars<div data-role="header" data-position="inline">!   <a href="index.html" data-icon="delete">Cancel</a>!   <h1>Edit ...
Footer<div data-role="footer" class="ui-bar">    <a   href="delete.html"   data-icon="delete" >Remove</a>    <a   href="ad...
Fixed footer<div data-role="footer" data-position="fixed">    ...</div>
Buttons<a href="index.html" data-role="button">Link button</a><a href="index.html" data-role="button"    data-icon="delete...
Grouped buttons<div data-role="controlgroup">    <a href="yes.html"   data-role="button">Yes</a>    <a href="no.html"    d...
Grouped buttons 2<div data-role="controlgroup" data-type="horizontal">    <a href="yes.html"   data-role="button">Yes</a> ...
Icons
Forms
Lists<ul data-role="listview">!   <li><a href="acura.html">Acura</a></li>!   <li><a href="audi.html">Audi</a></li>!   <li>...
jQuery Mobile Demo
Sencha Touch
A JavaScript framework       for building    rich mobile apps  with web standards
http://sencha.com/touch
Components
Data access & MVC
Forms
Scrolling
Touch Events
Theming
Charts
Kitchen Sinkhttp://sencha.com/x/5e
<!DOCTYPE	  html><html>	  	  <head>	  	  	  	  	  	  <title>Hello	  World</title>	  	  	  	  <script	  src="lib/touch/senc...
new	  Ext.Application({	  	  	  	  launch:	  function()	  {	  	  	  	  	  	  	  	  new	  Ext.Panel({	  	  	  	  	  	  	  	...
Listsvar	  list	  =	  new	  Ext.List({	  	  	  	  store:	  store,	  	  	  	  itemTpl:	  {firstName}	  {lastName},	  	  	  ...
Nested Listsvar	  list	  =	  new	  Ext.NestedList({	  	  	  	  store:	  store,	  	  	  	  displayField:	  name,	  	  	  	 ...
Carouselsvar	  carousel	  =	  new	  Ext.Carousel({	  	  	  	  direction:	  horizontal,	  	  	  	  indicator:	  true,	  	  ...
Sheetsvar	  sheet	  =	  new	  Ext.ActionSheet({	  	  	  	  items:	  [	  	  	  	  	  	  	  	  {	  	  	  	  	  	  	  	  	  	...
Common patterns      1var	  list	  =	  new	  Ext.List({	  	  	  	  store:	  store,	  	  	  	  itemTpl:	  {firstName}	  {la...
Common patterns      2var	  panel	  =	  new	  Ext.Panel({	  	  	  	  fullscreen:	  true,	  	  	  	  layout:	  fit,	  	  	 ...
Sencha Touch Demo
Closing thoughts
Embrace hybrid
WebCompromise             sites                     Web                     apps                            Hybrid        ...
Embrace the device
Hybrid apps        UIWebView WebViewHTML CSS                        Stores   JS            Device APIs
e.g. PhoneGapAccelerometer   FileCamera          GeolocationCompass         MediaContacts        NetworkDevice          No...
e.g. NimbleKit
http://sencha.com/x/cyhttp://sencha.com/x/de
Embrace the tools
http://phonegap.github.com/weinre
Embrace responsiveness
http://sencha.com/x/cv
Embrace o ine
$>	  phantomjs	  confess.js	  http://mysite.com/CACHE	  MANIFEST#	  This	  manifest	  was	  created	  by	  confess.js#	  	...
Embrace mobile
built withApps vs web technology
James Pearce@ jamespearce
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
Upcoming SlideShare
Loading in...5
×

HTML5 and the dawn of rich mobile web applications pt 2

4,326

Published on

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

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

No notes for slide

HTML5 and the dawn of rich mobile web applications pt 2

  1. 1. HTML5 and the dawn of rich mobile web applications @ jamespearce
  2. 2. Part IIjQuery MobileSencha Touch
  3. 3. jQuery Mobile
  4. 4. http://jquerymobile.com/
  5. 5. “A unified user interfacesystem that works seamlessly across all popular mobile device platforms”
  6. 6. Key features Built on jQuery Modular libraryMarkup-driven configuration Progressive enhancement
  7. 7. <!DOCTYPE html><html> <head> <title>jQuery Mobile</title> <script src="jq.js"></script><script src="jqm.js"></script> <link rel="stylesheet" href="jqm.css" /> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Hello World</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Continents</li> <li><a href="na.html">North America</a></li> <li><a href="sa.html">South America</a></li> <li><a href="eu.html">Europe</a></li> </ul> </div> </div> </body></html>
  8. 8. Page...<body> <div data-role="page" id="home"> <div data-role="header"> ... </div> <div data-role="content"> ... </div> <div data-role="footer"> ... </div> </div></body>...
  9. 9. Multiple Pages...<body> <div data-role="page" id="home"> <a href="#products">Products</a> </div> <div data-role="page" id="products"> ... </div> <div data-role="page" id="about"> ... </div></body>...
  10. 10. Disable AJAX...<body> <div data-role="page" id="home"> <a href="#products" data-ajax="false">Products</a> <a href="http://google.com" rel="external">Google</a> </div> <div data-role="page" id="products"> ... </div></body>...
  11. 11. Back buttons...<body> <div data-role="page" id="home"> <a href="#products">Products</a> </div> <div data-role="page" id="products"> <a href="#home" data-rel="back">Home</a> </div></body>...
  12. 12. Transitions...<body> <div data-role="page" id="home"> <a href="#products" data-transition="fade">Products</a> </div> <!-- slide, slideup, slidedown, pop, fade, flip --></body>...
  13. 13. Dialogs...<body> <div data-role="page" id="home"> <a href="#products" data-rel="dialog">Products</a> </div></body>...
  14. 14. Themes...<body> <div data-role="page" id="home" data-theme="b"> ... </div></body>...
  15. 15. Toolbars<div data-role="header" data-position="inline">! <a href="index.html" data-icon="delete">Cancel</a>! <h1>Edit Contact</h1>! <a href="index.html" data-icon="check">Save</a></div>
  16. 16. Footer<div data-role="footer" class="ui-bar"> <a href="delete.html" data-icon="delete" >Remove</a> <a href="add.html" data-icon="plus" >Add</a> <a href="up.html" data-icon="arrow-u">Up</a> <a href="down.html" data-icon="arrow-d">Down</a></div>
  17. 17. Fixed footer<div data-role="footer" data-position="fixed"> ...</div>
  18. 18. Buttons<a href="index.html" data-role="button">Link button</a><a href="index.html" data-role="button" data-icon="delete">Delete</a>
  19. 19. Grouped buttons<div data-role="controlgroup"> <a href="yes.html" data-role="button">Yes</a> <a href="no.html" data-role="button">No</a> <a href="maybe.html" data-role="button">Maybe</a></div>
  20. 20. Grouped buttons 2<div data-role="controlgroup" data-type="horizontal"> <a href="yes.html" data-role="button">Yes</a> <a href="no.html" data-role="button">No</a> <a href="maybe.html" data-role="button">Maybe</a></div>
  21. 21. Icons
  22. 22. Forms
  23. 23. Lists<ul data-role="listview">! <li><a href="acura.html">Acura</a></li>! <li><a href="audi.html">Audi</a></li>! <li><a href="bmw.html">BMW</a></li> ...</ul>
  24. 24. jQuery Mobile Demo
  25. 25. Sencha Touch
  26. 26. A JavaScript framework for building rich mobile apps with web standards
  27. 27. http://sencha.com/touch
  28. 28. Components
  29. 29. Data access & MVC
  30. 30. Forms
  31. 31. Scrolling
  32. 32. Touch Events
  33. 33. Theming
  34. 34. Charts
  35. 35. Kitchen Sinkhttp://sencha.com/x/5e
  36. 36. <!DOCTYPE  html><html>    <head>            <title>Hello  World</title>        <script  src="lib/touch/sencha-­‐touch.js"></script>        <script  src="app/app.js"></script>                <link  href="lib/touch/resources/css/sencha-­‐touch.css"                      rel="stylesheet"  type="text/css"  />        </head>    <body></body></html>
  37. 37. new  Ext.Application({        launch:  function()  {                new  Ext.Panel({                        fullscreen:  true,                        dockedItems:  [{xtype:toolbar,  title:My  First  App}],                        layout:  fit,                        styleHtmlContent:  true,                        html:  <h2>Hello  World!</h2>I  did  it!                });        }});
  38. 38. Listsvar  list  =  new  Ext.List({        store:  store,        itemTpl:  {firstName}  {lastName},        grouped:  true,        indexBar:  true});
  39. 39. Nested Listsvar  list  =  new  Ext.NestedList({        store:  store,        displayField:  name,        title:  My  List,        updateTitleText:  true,        getDetailCard:                function(record,  parent)  {..}});
  40. 40. Carouselsvar  carousel  =  new  Ext.Carousel({        direction:  horizontal,        indicator:  true,        items:  [                ..        ]});
  41. 41. Sheetsvar  sheet  =  new  Ext.ActionSheet({        items:  [                {                        text:  Delete  draft,                        ui:  decline                },  {                        text:  Save  draft                },  {                        text:  Cancel,                }        ]});sheet.show();
  42. 42. Common patterns 1var  list  =  new  Ext.List({        store:  store,        itemTpl:  {firstName}  {lastName},        grouped:  true,        indexBar:  true});var  panel  =  new  Ext.Panel({        fullscreen:  true,        layout:  fit,        items:  [list]});
  43. 43. Common patterns 2var  panel  =  new  Ext.Panel({        fullscreen:  true,        layout:  fit,        items:  [{                xtype:  list,                store:  store,                itemTpl:  {firstName}  {lastName},                grouped:  true,                indexBar:  true        }]});
  44. 44. Sencha Touch Demo
  45. 45. Closing thoughts
  46. 46. Embrace hybrid
  47. 47. WebCompromise sites Web apps Hybrid apps Native apps Nativeness
  48. 48. Embrace the device
  49. 49. Hybrid apps UIWebView WebViewHTML CSS Stores JS Device APIs
  50. 50. e.g. PhoneGapAccelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storage
  51. 51. e.g. NimbleKit
  52. 52. http://sencha.com/x/cyhttp://sencha.com/x/de
  53. 53. Embrace the tools
  54. 54. http://phonegap.github.com/weinre
  55. 55. Embrace responsiveness
  56. 56. http://sencha.com/x/cv
  57. 57. Embrace o ine
  58. 58. $>  phantomjs  confess.js  http://mysite.com/CACHE  MANIFEST#  This  manifest  was  created  by  confess.js#                    Time:  Wed  Sep  14  2011  10:14:45  GMT-­‐0700  (PDT)#        User-­‐agent:  Mozilla/5.0  ...CACHE:app/app.jsapp/yelp.jshttp://cdn.sencha.io/touch/1.1.0/sencha-­‐touch.jshttp://maps.google.com/maps/api/js?sensor=truehttp://maps.gstatic.com/intl/en_us/mapfiles/api-­‐3/6/4/main.jstheming/app.cssNETWORK:*http://github.com/jamesgpearce/confess
  59. 59. Embrace mobile
  60. 60. built withApps vs web technology
  61. 61. James Pearce@ jamespearce
  1. Gostou de algum slide específico?

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

×