HTML5 and the dawn of rich mobile web applications pt 2

  • 4,164 views
Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,164
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
89
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. HTML5 and the dawn of rich mobile web applications @ jamespearce
  • 2. Part IIjQuery MobileSencha Touch
  • 3. jQuery Mobile
  • 4. http://jquerymobile.com/
  • 5. “A unified user interfacesystem that works seamlessly across all popular mobile device platforms”
  • 6. Key features Built on jQuery Modular libraryMarkup-driven configuration Progressive enhancement
  • 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. 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. 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. 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. 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. 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. Dialogs...<body> <div data-role="page" id="home"> <a href="#products" data-rel="dialog">Products</a> </div></body>...
  • 14. Themes...<body> <div data-role="page" id="home" data-theme="b"> ... </div></body>...
  • 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. 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. Fixed footer<div data-role="footer" data-position="fixed"> ...</div>
  • 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. 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. 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. Icons
  • 22. Forms
  • 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. jQuery Mobile Demo
  • 25. Sencha Touch
  • 26. A JavaScript framework for building rich mobile apps with web standards
  • 27. http://sencha.com/touch
  • 28. Components
  • 29. Data access & MVC
  • 30. Forms
  • 31. Scrolling
  • 32. Touch Events
  • 33. Theming
  • 34. Charts
  • 35. Kitchen Sinkhttp://sencha.com/x/5e
  • 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. 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. Listsvar  list  =  new  Ext.List({        store:  store,        itemTpl:  {firstName}  {lastName},        grouped:  true,        indexBar:  true});
  • 39. Nested Listsvar  list  =  new  Ext.NestedList({        store:  store,        displayField:  name,        title:  My  List,        updateTitleText:  true,        getDetailCard:                function(record,  parent)  {..}});
  • 40. Carouselsvar  carousel  =  new  Ext.Carousel({        direction:  horizontal,        indicator:  true,        items:  [                ..        ]});
  • 41. Sheetsvar  sheet  =  new  Ext.ActionSheet({        items:  [                {                        text:  Delete  draft,                        ui:  decline                },  {                        text:  Save  draft                },  {                        text:  Cancel,                }        ]});sheet.show();
  • 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. Common patterns 2var  panel  =  new  Ext.Panel({        fullscreen:  true,        layout:  fit,        items:  [{                xtype:  list,                store:  store,                itemTpl:  {firstName}  {lastName},                grouped:  true,                indexBar:  true        }]});
  • 44. Sencha Touch Demo
  • 45. Closing thoughts
  • 46. Embrace hybrid
  • 47. WebCompromise sites Web apps Hybrid apps Native apps Nativeness
  • 48. Embrace the device
  • 49. Hybrid apps UIWebView WebViewHTML CSS Stores JS Device APIs
  • 50. e.g. PhoneGapAccelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storage
  • 51. e.g. NimbleKit
  • 52. http://sencha.com/x/cyhttp://sencha.com/x/de
  • 53. Embrace the tools
  • 54. http://phonegap.github.com/weinre
  • 55. Embrace responsiveness
  • 56. http://sencha.com/x/cv
  • 57. Embrace o ine
  • 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. Embrace mobile
  • 60. built withApps vs web technology
  • 61. James Pearce@ jamespearce