Your SlideShare is downloading. ×
  • Like
HTML5 and the dawn of rich mobile web applications pt 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5 and the dawn of rich mobile web applications pt 2

  • 4,198 views
Published

 

Published 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,198
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