• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 and the dawn of rich mobile web applications pt 2
 

HTML5 and the dawn of rich mobile web applications pt 2

on

  • 4,113 views

 

Statistics

Views

Total Views
4,113
Views on SlideShare
4,080
Embed Views
33

Actions

Likes
1
Downloads
84
Comments
0

3 Embeds 33

http://lanyrd.com 15
http://paper.li 12
http://a0.twimg.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 and the dawn of rich mobile web applications pt 2 HTML5 and the dawn of rich mobile web applications pt 2 Presentation Transcript

    • 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.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>
    • 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>...
    • 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>...
    • 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>...
    • 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>...
    • Transitions...<body> <div data-role="page" id="home"> <a href="#products" data-transition="fade">Products</a> </div> <!-- slide, slideup, slidedown, pop, fade, flip --></body>...
    • Dialogs...<body> <div data-role="page" id="home"> <a href="#products" data-rel="dialog">Products</a> </div></body>...
    • 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 Contact</h1>! <a href="index.html" data-icon="check">Save</a></div>
    • 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>
    • 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">Delete</a>
    • 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>
    • 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>
    • Icons
    • Forms
    • 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>
    • 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/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>
    • 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!                });        }});
    • Listsvar  list  =  new  Ext.List({        store:  store,        itemTpl:  {firstName}  {lastName},        grouped:  true,        indexBar:  true});
    • Nested Listsvar  list  =  new  Ext.NestedList({        store:  store,        displayField:  name,        title:  My  List,        updateTitleText:  true,        getDetailCard:                function(record,  parent)  {..}});
    • Carouselsvar  carousel  =  new  Ext.Carousel({        direction:  horizontal,        indicator:  true,        items:  [                ..        ]});
    • Sheetsvar  sheet  =  new  Ext.ActionSheet({        items:  [                {                        text:  Delete  draft,                        ui:  decline                },  {                        text:  Save  draft                },  {                        text:  Cancel,                }        ]});sheet.show();
    • 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]});
    • Common patterns 2var  panel  =  new  Ext.Panel({        fullscreen:  true,        layout:  fit,        items:  [{                xtype:  list,                store:  store,                itemTpl:  {firstName}  {lastName},                grouped:  true,                indexBar:  true        }]});
    • Sencha Touch Demo
    • Closing thoughts
    • Embrace hybrid
    • WebCompromise sites Web apps Hybrid apps Native apps Nativeness
    • Embrace the device
    • Hybrid apps UIWebView WebViewHTML CSS Stores JS Device APIs
    • e.g. PhoneGapAccelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storage
    • 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#                    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
    • Embrace mobile
    • built withApps vs web technology
    • James Pearce@ jamespearce