SlideShare a Scribd company logo
1 of 67
Download to read offline
HTML5 and the dawn of rich
 mobile web applications
         @ jamespearce
Part II

jQuery Mobile
Sencha Touch
HTML5 and the dawn of rich mobile web applications pt 2
jQuery Mobile
http://jquerymobile.com/
“A unified user interface
system that works seamlessly
   across all popular mobile
      device platforms”
Key features

      Built on jQuery
      Modular library
Markup-driven configuration
 Progressive enhancement
HTML5 and the dawn of rich mobile web applications pt 2
<!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>
HTML5 and the dawn of rich mobile web applications pt 2
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 Sink




http://sencha.com/x/5e
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
<!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!'
	
  	
  	
  	
  	
  	
  	
  	
  });

	
  	
  	
  	
  }

});
HTML5 and the dawn of rich mobile web applications pt 2
Lists
var	
  list	
  =	
  new	
  Ext.List({
	
  	
  	
  	
  store:	
  store,
	
  	
  	
  	
  itemTpl:	
  '{firstName}	
  {lastName}',
	
  	
  	
  	
  grouped:	
  true,
	
  	
  	
  	
  indexBar:	
  true
});
Nested Lists
var	
  list	
  =	
  new	
  Ext.NestedList({
	
  	
  	
  	
  store:	
  store,
	
  	
  	
  	
  displayField:	
  'name',
	
  	
  	
  	
  title:	
  'My	
  List',
	
  	
  	
  	
  updateTitleText:	
  true,
	
  	
  	
  	
  getDetailCard:
	
  	
  	
  	
  	
  	
  	
  	
  function(record,	
  parent)	
  {..}
});
Carousels
var	
  carousel	
  =	
  new	
  Ext.Carousel({
	
  	
  	
  	
  direction:	
  'horizontal',
	
  	
  	
  	
  indicator:	
  true,
	
  	
  	
  	
  items:	
  [
	
  	
  	
  	
  	
  	
  	
  	
  ..
	
  	
  	
  	
  ]
});
Sheets
var	
  sheet	
  =	
  new	
  Ext.ActionSheet({
	
  	
  	
  	
  items:	
  [
	
  	
  	
  	
  	
  	
  	
  	
  {
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  text:	
  'Delete	
  draft',
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  ui:	
  'decline'
	
  	
  	
  	
  	
  	
  	
  	
  },	
  {
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  text:	
  'Save	
  draft'
	
  	
  	
  	
  	
  	
  	
  	
  },	
  {
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  text:	
  'Cancel',
	
  	
  	
  	
  	
  	
  	
  	
  }
	
  	
  	
  	
  ]
});

sheet.show();
Common patterns
      1
var	
  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
      2
var	
  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
Web
Compromise

             sites
                     Web
                     apps
                            Hybrid
                             apps
                                      Native
                                       apps

                                     Nativeness
Embrace the device
Hybrid apps
        UIWebView WebView




HTML
 CSS                        Stores
   JS




            Device APIs
e.g. PhoneGap

Accelerometer   File
Camera          Geolocation
Compass         Media
Contacts        Network
Device          Notification
Events          Storage
e.g. NimbleKit
http://sencha.com/x/cy
http://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.js
app/yelp.js
http://cdn.sencha.io/touch/1.1.0/sencha-­‐touch.js
http://maps.google.com/maps/api/js?sensor=true
http://maps.gstatic.com/intl/en_us/mapfiles/api-­‐3/6/4/main.js
theming/app.css

NETWORK:
*



http://github.com/jamesgpearce/confess
Embrace mobile
built with

Apps vs web technology
James Pearce
@ jamespearce

More Related Content

What's hot

Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Adam Lu
 
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...OPITZ CONSULTING Deutschland
 
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5Todd Anderson
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web AppsOperation Mobile
 
Ruby on Rails: Building Web Applications Is Fun Again!
Ruby on Rails: Building Web Applications Is Fun Again!Ruby on Rails: Building Web Applications Is Fun Again!
Ruby on Rails: Building Web Applications Is Fun Again!judofyr
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideMark Rackley
 
Local storage in Web apps
Local storage in Web appsLocal storage in Web apps
Local storage in Web appsIvano Malavolta
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5Robert Nyman
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint BeastMark Rackley
 
jQuery Mobile with HTML5
jQuery Mobile with HTML5jQuery Mobile with HTML5
jQuery Mobile with HTML5madhurpgarg
 
Intro to-html-backbone
Intro to-html-backboneIntro to-html-backbone
Intro to-html-backbonezonathen
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsMark Rackley
 
The Days of Web Standards "IA" 20070715
The Days of Web Standards "IA" 20070715The Days of Web Standards "IA" 20070715
The Days of Web Standards "IA" 20070715Takashi Sakamoto
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14Mark Rackley
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQueryMark Rackley
 

What's hot (20)

Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
ActiveDOM
ActiveDOMActiveDOM
ActiveDOM
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web Apps
 
Ruby on Rails: Building Web Applications Is Fun Again!
Ruby on Rails: Building Web Applications Is Fun Again!Ruby on Rails: Building Web Applications Is Fun Again!
Ruby on Rails: Building Web Applications Is Fun Again!
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
 
Local storage in Web apps
Local storage in Web appsLocal storage in Web apps
Local storage in Web apps
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
 
jQuery Mobile with HTML5
jQuery Mobile with HTML5jQuery Mobile with HTML5
jQuery Mobile with HTML5
 
Intro to-html-backbone
Intro to-html-backboneIntro to-html-backbone
Intro to-html-backbone
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
 
The Days of Web Standards "IA" 20070715
The Days of Web Standards "IA" 20070715The Days of Web Standards "IA" 20070715
The Days of Web Standards "IA" 20070715
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14
 
Mobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLsMobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLs
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
 

Similar to HTML5 and the dawn of rich mobile web applications pt 2

Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.jsTechExeter
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoRob Bontekoe
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckAnthony Montalbano
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and ImprovedTimothy Fisher
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibilityIan Stuart
 
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisPablo Garrido
 
Introduction to jQuery Mobile
Introduction to jQuery MobileIntroduction to jQuery Mobile
Introduction to jQuery Mobileejlp12
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsFelix Arntz
 
E3 appspresso hands on lab
E3 appspresso hands on labE3 appspresso hands on lab
E3 appspresso hands on labNAVER D2
 
E2 appspresso hands on lab
E2 appspresso hands on labE2 appspresso hands on lab
E2 appspresso hands on labNAVER D2
 
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressDesign Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressJesse James Arnold
 

Similar to HTML5 and the dawn of rich mobile web applications pt 2 (20)

Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages Suck
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
 
iWebkit
iWebkitiWebkit
iWebkit
 
One Size Fits All
One Size Fits AllOne Size Fits All
One Size Fits All
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibility
 
Xxx
XxxXxx
Xxx
 
JQuery Mobile UI
JQuery Mobile UIJQuery Mobile UI
JQuery Mobile UI
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveis
 
Polymer
PolymerPolymer
Polymer
 
Introduction to jQuery Mobile
Introduction to jQuery MobileIntroduction to jQuery Mobile
Introduction to jQuery Mobile
 
Jquery 5
Jquery 5Jquery 5
Jquery 5
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
E3 appspresso hands on lab
E3 appspresso hands on labE3 appspresso hands on lab
E3 appspresso hands on lab
 
E2 appspresso hands on lab
E2 appspresso hands on labE2 appspresso hands on lab
E2 appspresso hands on lab
 
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressDesign Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPress
 
Jquery mobile2
Jquery mobile2Jquery mobile2
Jquery mobile2
 

More from James Pearce

Mobile Device APIs
Mobile Device APIsMobile Device APIs
Mobile Device APIsJames Pearce
 
The City Bars App with Sencha Touch 2
The City Bars App with Sencha Touch 2The City Bars App with Sencha Touch 2
The City Bars App with Sencha Touch 2James Pearce
 
An Intro to Mobile HTML5
An Intro to Mobile HTML5An Intro to Mobile HTML5
An Intro to Mobile HTML5James Pearce
 
A mobile web app for Android in 75 minutes
A mobile web app for Android in 75 minutesA mobile web app for Android in 75 minutes
A mobile web app for Android in 75 minutesJames Pearce
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
 
Building a Mobile App with Sencha Touch
Building a Mobile App with Sencha TouchBuilding a Mobile App with Sencha Touch
Building a Mobile App with Sencha TouchJames Pearce
 
Cross platform mobile web apps
Cross platform mobile web appsCross platform mobile web apps
Cross platform mobile web appsJames Pearce
 
City bars workshop
City bars workshopCity bars workshop
City bars workshopJames Pearce
 
San Diego Hackathon
San Diego HackathonSan Diego Hackathon
San Diego HackathonJames Pearce
 
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapCreating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapJames Pearce
 
An Introduction to Sencha Touch
An Introduction to Sencha TouchAn Introduction to Sencha Touch
An Introduction to Sencha TouchJames Pearce
 
Source Dev Con Keynote
Source Dev Con KeynoteSource Dev Con Keynote
Source Dev Con KeynoteJames Pearce
 
Building Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsBuilding Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsJames Pearce
 
Building cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web appsJames Pearce
 
Building tomorrow's web with today's tools
Building tomorrow's web with today's toolsBuilding tomorrow's web with today's tools
Building tomorrow's web with today's toolsJames Pearce
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsJames Pearce
 
Sencha Touch for Rubyists
Sencha Touch for RubyistsSencha Touch for Rubyists
Sencha Touch for RubyistsJames Pearce
 
Serving Mobile Apps from Content Management Systems
Serving Mobile Apps from Content Management SystemsServing Mobile Apps from Content Management Systems
Serving Mobile Apps from Content Management SystemsJames Pearce
 

More from James Pearce (19)

Mobile Device APIs
Mobile Device APIsMobile Device APIs
Mobile Device APIs
 
The City Bars App with Sencha Touch 2
The City Bars App with Sencha Touch 2The City Bars App with Sencha Touch 2
The City Bars App with Sencha Touch 2
 
An Intro to Mobile HTML5
An Intro to Mobile HTML5An Intro to Mobile HTML5
An Intro to Mobile HTML5
 
A mobile web app for Android in 75 minutes
A mobile web app for Android in 75 minutesA mobile web app for Android in 75 minutes
A mobile web app for Android in 75 minutes
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
Building a Mobile App with Sencha Touch
Building a Mobile App with Sencha TouchBuilding a Mobile App with Sencha Touch
Building a Mobile App with Sencha Touch
 
Cross platform mobile web apps
Cross platform mobile web appsCross platform mobile web apps
Cross platform mobile web apps
 
City bars workshop
City bars workshopCity bars workshop
City bars workshop
 
San Diego Hackathon
San Diego HackathonSan Diego Hackathon
San Diego Hackathon
 
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapCreating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
 
Theming and Sass
Theming and SassTheming and Sass
Theming and Sass
 
An Introduction to Sencha Touch
An Introduction to Sencha TouchAn Introduction to Sencha Touch
An Introduction to Sencha Touch
 
Source Dev Con Keynote
Source Dev Con KeynoteSource Dev Con Keynote
Source Dev Con Keynote
 
Building Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsBuilding Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web Apps
 
Building cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web apps
 
Building tomorrow's web with today's tools
Building tomorrow's web with today's toolsBuilding tomorrow's web with today's tools
Building tomorrow's web with today's tools
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
 
Sencha Touch for Rubyists
Sencha Touch for RubyistsSencha Touch for Rubyists
Sencha Touch for Rubyists
 
Serving Mobile Apps from Content Management Systems
Serving Mobile Apps from Content Management SystemsServing Mobile Apps from Content Management Systems
Serving Mobile Apps from Content Management Systems
 

Recently uploaded

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 

Recently uploaded (20)

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 

HTML5 and the dawn of rich mobile web applications pt 2

  • 1. HTML5 and the dawn of rich mobile web applications @ jamespearce
  • 6. “A unified user interface system that works seamlessly across all popular mobile device platforms”
  • 7. Key features Built on jQuery Modular library Markup-driven configuration Progressive enhancement
  • 9. <!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>
  • 11. 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> ...
  • 12. 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> ...
  • 13. 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> ...
  • 14. 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> ...
  • 15. Transitions ... <body> <div data-role="page" id="home"> <a href="#products" data-transition="fade">Products</a> </div> <!-- slide, slideup, slidedown, pop, fade, flip --> </body> ...
  • 16. Dialogs ... <body> <div data-role="page" id="home"> <a href="#products" data-rel="dialog">Products</a> </div> </body> ...
  • 17. Themes ... <body> <div data-role="page" id="home" data-theme="b"> ... </div> </body> ...
  • 18. 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>
  • 19. 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>
  • 20. Fixed footer <div data-role="footer" data-position="fixed"> ... </div>
  • 21. Buttons <a href="index.html" data-role="button">Link button</a> <a href="index.html" data-role="button" data-icon="delete">Delete</a>
  • 22. 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>
  • 23. 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>
  • 24. Icons
  • 25. Forms
  • 26. 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>
  • 29. A JavaScript framework for building rich mobile apps with web standards
  • 33. Forms
  • 41. <!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>
  • 42. 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!'                });        } });
  • 44. Lists var  list  =  new  Ext.List({        store:  store,        itemTpl:  '{firstName}  {lastName}',        grouped:  true,        indexBar:  true });
  • 45. Nested Lists var  list  =  new  Ext.NestedList({        store:  store,        displayField:  'name',        title:  'My  List',        updateTitleText:  true,        getDetailCard:                function(record,  parent)  {..} });
  • 46. Carousels var  carousel  =  new  Ext.Carousel({        direction:  'horizontal',        indicator:  true,        items:  [                ..        ] });
  • 47. Sheets var  sheet  =  new  Ext.ActionSheet({        items:  [                {                        text:  'Delete  draft',                        ui:  'decline'                },  {                        text:  'Save  draft'                },  {                        text:  'Cancel',                }        ] }); sheet.show();
  • 48. Common patterns 1 var  list  =  new  Ext.List({        store:  store,        itemTpl:  '{firstName}  {lastName}',        grouped:  true,        indexBar:  true }); var  panel  =  new  Ext.Panel({        fullscreen:  true,        layout:  'fit',        items:  [list] });
  • 49. Common patterns 2 var  panel  =  new  Ext.Panel({        fullscreen:  true,        layout:  'fit',        items:  [{                xtype:  'list',                store:  store,                itemTpl:  '{firstName}  {lastName}',                grouped:  true,                indexBar:  true        }] });
  • 53. Web Compromise sites Web apps Hybrid apps Native apps Nativeness
  • 55. Hybrid apps UIWebView WebView HTML CSS Stores JS Device APIs
  • 56. e.g. PhoneGap Accelerometer File Camera Geolocation Compass Media Contacts Network Device Notification Events Storage
  • 64. $>  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.js app/yelp.js http://cdn.sencha.io/touch/1.1.0/sencha-­‐touch.js http://maps.google.com/maps/api/js?sensor=true http://maps.gstatic.com/intl/en_us/mapfiles/api-­‐3/6/4/main.js theming/app.css NETWORK: * http://github.com/jamesgpearce/confess
  • 66. built with Apps vs web technology