SlideShare ist ein Scribd-Unternehmen logo
1 von 52
Downloaden Sie, um offline zu lesen
Cross-platform
mobile web apps

   @ jamespearce
Sir Isaac Newton
Three Laws of Motion

(the universe works as we might expect it to)
Albert Michelson   Edward Morley
Light Travels at a
        Constant Speed
(the universe doesn’t work as we thought it would)
Cross platform mobile web apps
Relativistic Mechanics   Exploration



  Classical Mechanics    Familiarity



 Quantum Mechanics       Exploration
The Web Today
    is like
Physics in 1900
Mobile
is our Michelson-Morley
       Experiment
Mobile Context?
     One Web?
 Responsive Design?
   Apps or Sites?
(an inability to answer these questions does
 not constitute an excuse not to innovate)
Single device            Multi device
Sedentary user            Mobile user
                                 *


Declarative               Imperative
Thin client               Thick client
Documents                Applications

         * or supine, or sedentary, or passive, or...
A badge for all these ways
   the web is changing
Cross-platform
mobile web apps
What is an app?
Consumption vs Creation
      Linkability
    User Experience
     Architecture
Web
Compromise


             sites

                     Web
                     apps

                             Native
                              apps

                            Nativeness
Cross platform mobile web apps
HTML5 is a new version of HTML4,
 XHTML1, and DOM Level 2 HTML
 addressing many of the issues of
 those specifications while at the
  same time enhancing (X)HTML
to more adequately address Web
          applications.
                       - WHATWG Wiki
WebFont        Video      Audio     Graphics
Device Access
  Camera                   CSS Styling & Layout                Network
  Location                                                      HTTP
                                  JavaScript
  Contacts                                                      AJAX

    SMS                        Semantic HTML                   Events

 Orientation                                                   Sockets
                File Systems      Workers &
                                                  Cross-App
    Gyro         Databases         Parallel                     SSL
                                                  Messaging
                App Caches        Processing



        (all the elements of a modern application platform)
The web is now as much
         a stack
   as it is a medium
Cross platform mobile web apps
Cross platform mobile web apps
Cross-platform
mobile web apps
MS
        RIM
                        Symbian

     Apple


              Android



Top European Smartphone Platforms
   July 2011, comScore MobiLens
.NET
           J2ME
                            C++

        Obj-C


                   Java



Native programming languages you’ll need
               July 2011
IE
    WebKit

                      WebKit

WebKit


             WebKit



Browser platforms to target
         July 2011
There is no WebKit on Mobile
                        - @ppk
But at least we are using
     one language,
      one markup,
    one style system
IE 10 PR   Chrome 10   Safari 5   Firefox 4   iOS4.31   Playbook   Honeycomb
            @font-face
                 Canvas
HTML5 Audio & Video
          rgba(), hsla()
        border-image:
        border-radius:
          box-shadow:
         text-shadow:
                opacity:
Multiple backgrounds
   Flexible Box Model
      CSS Animations
         CSS Columns
        CSS Gradients
      CSS Reflections
   CSS 2D Transforms
   CSS 3D Transforms
       CSS Transitions
      Geolocation API
 local/sessionStorage
    SVG/SVG Clipping
                   SMIL
             Inline SVG
        Drag and Drop
           hashchange
X-window Messaging
 History Management
     applicationCache
         Web Sockets
         Web Workers
   Web SQL Database
                 WebGL
            IndexedDB
100%
Support




          Browsers




                     Capabilities & specifications
100%
Support




          Browsers         Polyfills Frameworks




                     Capabilities & specifications
Cross platform mobile web apps
<!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>
Cross platform mobile web apps
<!DOCTYPE html>
<html>
    <head>
        <title>Sencha Touch</title>
        <script src="st.js"></script>
        <link rel="stylesheet" href="st.css" />
        <script type="text/javascript" charset="utf-8">

            new Ext.Application({
                launch: function() {
                    var continents = new Ext.data.Store({
                        model: Ext.regModel('', {fields: ['name', 'link']}),
                        data: [
                            {name: 'North America', link:'na'},
                            {name: 'South America', link:'sa'},
                            {name: 'Europe', link:'eu'}
                        ]
                    });
                    new Ext.Panel({
                        fullscreen: true,
                        dockedItems: [{
                            xtype: 'toolbar', title: 'Hello World',
                        }],
                        items: [{
                            xtype: 'list', store: continents, itemTpl: '{name}'
                        }]
                    });
                }
            });

        </script>
    </head><body></body>
</html>
Cross platform mobile web apps
Myth busting
HTML5 apps can’t
  run o ine


(hybrid, appcache, and localStorage...)
HTML5 apps can’t match
  native performance


       (true, sometimes)
HTML5 apps can’t be
   monetized


  (is this a technology problem?)
HTML5 apps can’t access
  device functionality


    (weren’t you listening to Brian?)
Web
Compromise


             sites
                     Web
                     apps
                            Hybrid
                             apps
                                      Native
                                       apps

                                     Nativeness
Camera       WebFont        Video      Audio     Graphics
                                                              HTTP
 Location
                         CSS Styling & Layout                 AJAX
 Contacts
                                                             Events
   SMS                          JavaScript
                                                             Sockets
Orientation
                             Semantic HTML                    SSL
   Gyro

              File Systems      Workers &
                                                Cross-App
               Databases         Parallel
                                                Messaging
              App Caches        Processing
WebView
 Camera       WebFont        Video      Audio     Graphics
                                                              HTTP
 Location
                         CSS Styling & Layout                 AJAX
 Contacts
                                                             Events
   SMS                          JavaScript
                                                             Sockets
Orientation
                             Semantic HTML                    SSL
   Gyro

              File Systems      Workers &
                                                Cross-App
               Databases         Parallel
                                                Messaging
              App Caches        Processing
Native Wrapper

                                         WebView
 Camera       WebFont        Video      Audio     Graphics
                                                              HTTP
 Location
                         CSS Styling & Layout                 AJAX
 Contacts
                                                             Events
   SMS                          JavaScript
                                                             Sockets
Orientation
                             Semantic HTML                    SSL
   Gyro

              File Systems      Workers &
                                                Cross-App
               Databases         Parallel
                                                Messaging
              App Caches        Processing
Cross platform mobile web apps
Native app stores
have a dirty secret
Cross platform mobile web apps
built with

Apps vs web technology
Cross platform mobile web apps
Well-established hierarchies are not easily uprooted;

Closely held beliefs are not easily released;

So ritual enthralls generation after generation.



                                    Tao Te Ching; 38 Ritual
James Pearce
@ jamespearce

Weitere ähnliche Inhalte

Was ist angesagt?

Cordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstCordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstRaymond Camden
 
Native Mobile Apps, Xamarin, and PhoneGap
Native Mobile Apps, Xamarin, and PhoneGapNative Mobile Apps, Xamarin, and PhoneGap
Native Mobile Apps, Xamarin, and PhoneGapSasha Goldshtein
 
Cross platform mobile development with xamarin and office 365
Cross platform mobile development with xamarin and office 365Cross platform mobile development with xamarin and office 365
Cross platform mobile development with xamarin and office 365SoHo Dragon
 
MAUI Blazor - One App that runs everywhere
MAUI Blazor - One App that runs everywhereMAUI Blazor - One App that runs everywhere
MAUI Blazor - One App that runs everywhereJose Javier Columbie
 
Native i os, android, and windows development in c# with xamarin 4
Native i os, android, and windows development in c# with xamarin 4Native i os, android, and windows development in c# with xamarin 4
Native i os, android, and windows development in c# with xamarin 4Xamarin
 
Building your first android app using Xamarin
Building your first android app using XamarinBuilding your first android app using Xamarin
Building your first android app using XamarinGill Cleeren
 
Cross-Platform Mobile App Development
Cross-Platform Mobile App DevelopmentCross-Platform Mobile App Development
Cross-Platform Mobile App DevelopmentJosue Bustos
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instrumentsIvano Malavolta
 
C# everywhere: Xamarin and cross platform development
C# everywhere: Xamarin and cross platform developmentC# everywhere: Xamarin and cross platform development
C# everywhere: Xamarin and cross platform developmentGill Cleeren
 
Highlights from the Xamarin Evolve 2016 conference
Highlights from the Xamarin Evolve 2016 conferenceHighlights from the Xamarin Evolve 2016 conference
Highlights from the Xamarin Evolve 2016 conferenceChristopher Miller
 
Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationMuhammad Hakim A
 
Developing Cross-platform Native Apps with Xamarin
Developing Cross-platform Native Apps with XamarinDeveloping Cross-platform Native Apps with Xamarin
Developing Cross-platform Native Apps with Xamarindanhermes
 
State of Union: Xamarin & Cross-Platform .NET in 2016 and Beyond
State of Union: Xamarin & Cross-Platform .NET in 2016 and BeyondState of Union: Xamarin & Cross-Platform .NET in 2016 and Beyond
State of Union: Xamarin & Cross-Platform .NET in 2016 and BeyondNick Landry
 
Cross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVMCross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVMJim Bennett
 
Android Development...Using Web Technologies
Android Development...Using Web TechnologiesAndroid Development...Using Web Technologies
Android Development...Using Web TechnologiesCommonsWare
 

Was ist angesagt? (20)

Cordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstCordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirst
 
Native Mobile Apps, Xamarin, and PhoneGap
Native Mobile Apps, Xamarin, and PhoneGapNative Mobile Apps, Xamarin, and PhoneGap
Native Mobile Apps, Xamarin, and PhoneGap
 
Cross platform mobile development with xamarin and office 365
Cross platform mobile development with xamarin and office 365Cross platform mobile development with xamarin and office 365
Cross platform mobile development with xamarin and office 365
 
MAUI Blazor - One App that runs everywhere
MAUI Blazor - One App that runs everywhereMAUI Blazor - One App that runs everywhere
MAUI Blazor - One App that runs everywhere
 
State of the Platforms
State of the PlatformsState of the Platforms
State of the Platforms
 
Native i os, android, and windows development in c# with xamarin 4
Native i os, android, and windows development in c# with xamarin 4Native i os, android, and windows development in c# with xamarin 4
Native i os, android, and windows development in c# with xamarin 4
 
Building your first android app using Xamarin
Building your first android app using XamarinBuilding your first android app using Xamarin
Building your first android app using Xamarin
 
Cross-Platform Mobile App Development
Cross-Platform Mobile App DevelopmentCross-Platform Mobile App Development
Cross-Platform Mobile App Development
 
TypeScript
TypeScriptTypeScript
TypeScript
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instruments
 
C# everywhere: Xamarin and cross platform development
C# everywhere: Xamarin and cross platform developmentC# everywhere: Xamarin and cross platform development
C# everywhere: Xamarin and cross platform development
 
Highlights from the Xamarin Evolve 2016 conference
Highlights from the Xamarin Evolve 2016 conferenceHighlights from the Xamarin Evolve 2016 conference
Highlights from the Xamarin Evolve 2016 conference
 
Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native Application
 
Developing Cross-platform Native Apps with Xamarin
Developing Cross-platform Native Apps with XamarinDeveloping Cross-platform Native Apps with Xamarin
Developing Cross-platform Native Apps with Xamarin
 
State of Union: Xamarin & Cross-Platform .NET in 2016 and Beyond
State of Union: Xamarin & Cross-Platform .NET in 2016 and BeyondState of Union: Xamarin & Cross-Platform .NET in 2016 and Beyond
State of Union: Xamarin & Cross-Platform .NET in 2016 and Beyond
 
React Native
React NativeReact Native
React Native
 
Cross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVMCross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVM
 
Android Development...Using Web Technologies
Android Development...Using Web TechnologiesAndroid Development...Using Web Technologies
Android Development...Using Web Technologies
 
Introduction to Xamarin
Introduction to XamarinIntroduction to Xamarin
Introduction to Xamarin
 
Xamarin.Forms
Xamarin.FormsXamarin.Forms
Xamarin.Forms
 

Andere mochten auch

Cross-platform mobile development: choices and limitations [IndicThreads Mob...
Cross-platform mobile development: choices and limitations  [IndicThreads Mob...Cross-platform mobile development: choices and limitations  [IndicThreads Mob...
Cross-platform mobile development: choices and limitations [IndicThreads Mob...IndicThreads
 
White paper native, web or hybrid mobile app development
White paper  native, web or hybrid mobile app developmentWhite paper  native, web or hybrid mobile app development
White paper native, web or hybrid mobile app developmentIBM Software India
 
Building Cross Platform Mobile Apps
Building Cross Platform Mobile AppsBuilding Cross Platform Mobile Apps
Building Cross Platform Mobile AppsShailendra Chauhan
 
The 10 Golden Principles for Successful Web Apps
The 10 Golden Principles for Successful Web AppsThe 10 Golden Principles for Successful Web Apps
The 10 Golden Principles for Successful Web Appsfredwilson
 
Native vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App DevelopmentNative vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App DevelopmentSenthil Kumar Kaliathan
 
Cross Platform Mobile Development with Xamarin
Cross Platform Mobile Development with XamarinCross Platform Mobile Development with Xamarin
Cross Platform Mobile Development with Xamarinbryan costanich
 
03 cross platform design
03 cross platform design03 cross platform design
03 cross platform designmemeapps
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application developmentsaritasingh19866
 
IBM MobileFirst - Hybrid App Development
IBM MobileFirst - Hybrid App DevelopmentIBM MobileFirst - Hybrid App Development
IBM MobileFirst - Hybrid App DevelopmentWim Tobback
 
360 Flex Atlanta
360 Flex Atlanta360 Flex Atlanta
360 Flex Atlantartretola
 
Cross platform mobile developement introduction
Cross platform mobile developement   introductionCross platform mobile developement   introduction
Cross platform mobile developement introductionMarcel de Vries
 
Cross Platform Mobile Application Development Using Xamarin and C#
Cross Platform Mobile Application Development Using Xamarin and C#Cross Platform Mobile Application Development Using Xamarin and C#
Cross Platform Mobile Application Development Using Xamarin and C#EastBanc Tachnologies
 

Andere mochten auch (14)

Cross-platform mobile development: choices and limitations [IndicThreads Mob...
Cross-platform mobile development: choices and limitations  [IndicThreads Mob...Cross-platform mobile development: choices and limitations  [IndicThreads Mob...
Cross-platform mobile development: choices and limitations [IndicThreads Mob...
 
White paper native, web or hybrid mobile app development
White paper  native, web or hybrid mobile app developmentWhite paper  native, web or hybrid mobile app development
White paper native, web or hybrid mobile app development
 
Hybrid HTML5 Apps
Hybrid HTML5 AppsHybrid HTML5 Apps
Hybrid HTML5 Apps
 
Building Cross Platform Mobile Apps
Building Cross Platform Mobile AppsBuilding Cross Platform Mobile Apps
Building Cross Platform Mobile Apps
 
The 10 Golden Principles for Successful Web Apps
The 10 Golden Principles for Successful Web AppsThe 10 Golden Principles for Successful Web Apps
The 10 Golden Principles for Successful Web Apps
 
Native vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App DevelopmentNative vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App Development
 
Cross Platform Mobile Development with Xamarin
Cross Platform Mobile Development with XamarinCross Platform Mobile Development with Xamarin
Cross Platform Mobile Development with Xamarin
 
03 cross platform design
03 cross platform design03 cross platform design
03 cross platform design
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application development
 
IBM MobileFirst - Hybrid App Development
IBM MobileFirst - Hybrid App DevelopmentIBM MobileFirst - Hybrid App Development
IBM MobileFirst - Hybrid App Development
 
360 Flex Atlanta
360 Flex Atlanta360 Flex Atlanta
360 Flex Atlanta
 
Cross platform mobile developement introduction
Cross platform mobile developement   introductionCross platform mobile developement   introduction
Cross platform mobile developement introduction
 
Most Popular Cross Platform Mobile Development Tools
Most Popular Cross Platform Mobile Development ToolsMost Popular Cross Platform Mobile Development Tools
Most Popular Cross Platform Mobile Development Tools
 
Cross Platform Mobile Application Development Using Xamarin and C#
Cross Platform Mobile Application Development Using Xamarin and C#Cross Platform Mobile Application Development Using Xamarin and C#
Cross Platform Mobile Application Development Using Xamarin and C#
 

Ähnlich wie Cross platform mobile web apps

A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionJames 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
 
An Intro to Mobile HTML5
An Intro to Mobile HTML5An Intro to Mobile HTML5
An Intro to Mobile HTML5James 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 cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web appsJames 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
 
Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshopJames 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
 
An Introduction to Sencha Touch
An Introduction to Sencha TouchAn Introduction to Sencha Touch
An Introduction to Sencha TouchJames Pearce
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptBuilding Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptSencha
 
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)Shreeraj Shah
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 
Shreeraj-Hacking_Web_2
Shreeraj-Hacking_Web_2Shreeraj-Hacking_Web_2
Shreeraj-Hacking_Web_2guest66dc5f
 
HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものMicrosoft
 
Evaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devicesEvaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devicesMario Gonzalez
 
Application Development Approaches
Application Development ApproachesApplication Development Approaches
Application Development ApproachesOsman Celik
 
about:HTML&Firefox
about:HTML&Firefoxabout:HTML&Firefox
about:HTML&Firefoxdynamis
 
Shreeraj - Hacking Web 2 0 - ClubHack2007
Shreeraj - Hacking Web 2 0 - ClubHack2007Shreeraj - Hacking Web 2 0 - ClubHack2007
Shreeraj - Hacking Web 2 0 - ClubHack2007ClubHack
 
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionFragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionBelen Barros Pena
 

Ähnlich wie Cross platform mobile web apps (20)

A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
 
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
 
An Intro to Mobile HTML5
An Intro to Mobile HTML5An Intro to Mobile HTML5
An Intro to Mobile HTML5
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building 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 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
 
Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshop
 
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
 
An Introduction to Sencha Touch
An Introduction to Sencha TouchAn Introduction to Sencha Touch
An Introduction to Sencha Touch
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptBuilding Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
 
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
 
What is HTML5
What is HTML5What is HTML5
What is HTML5
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Shreeraj-Hacking_Web_2
Shreeraj-Hacking_Web_2Shreeraj-Hacking_Web_2
Shreeraj-Hacking_Web_2
 
HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすもの
 
Evaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devicesEvaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devices
 
Application Development Approaches
Application Development ApproachesApplication Development Approaches
Application Development Approaches
 
about:HTML&Firefox
about:HTML&Firefoxabout:HTML&Firefox
about:HTML&Firefox
 
Shreeraj - Hacking Web 2 0 - ClubHack2007
Shreeraj - Hacking Web 2 0 - ClubHack2007Shreeraj - Hacking Web 2 0 - ClubHack2007
Shreeraj - Hacking Web 2 0 - ClubHack2007
 
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionFragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fiction
 

Mehr von 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
 
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 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2James 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
 
Create a mobile web app with Sencha Touch
Create a mobile web app with Sencha TouchCreate a mobile web app with Sencha Touch
Create a mobile web app with Sencha TouchJames 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
 
Source Dev Con Keynote
Source Dev Con KeynoteSource Dev Con Keynote
Source Dev Con KeynoteJames 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
 
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
 

Mehr von James Pearce (14)

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
 
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 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
 
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
 
Create a mobile web app with Sencha Touch
Create a mobile web app with Sencha TouchCreate a mobile web app with Sencha Touch
Create a mobile web app with Sencha Touch
 
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
 
Source Dev Con Keynote
Source Dev Con KeynoteSource Dev Con Keynote
Source Dev Con Keynote
 
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
 
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
 

Kürzlich hochgeladen

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
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
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
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
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
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
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
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
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 

Kürzlich hochgeladen (20)

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
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)
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
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.
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
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 )
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
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
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 

Cross platform mobile web apps

  • 3. Three Laws of Motion (the universe works as we might expect it to)
  • 4. Albert Michelson Edward Morley
  • 5. Light Travels at a Constant Speed (the universe doesn’t work as we thought it would)
  • 7. Relativistic Mechanics Exploration Classical Mechanics Familiarity Quantum Mechanics Exploration
  • 8. The Web Today is like Physics in 1900
  • 10. Mobile Context? One Web? Responsive Design? Apps or Sites? (an inability to answer these questions does not constitute an excuse not to innovate)
  • 11. Single device Multi device Sedentary user Mobile user * Declarative Imperative Thin client Thick client Documents Applications * or supine, or sedentary, or passive, or...
  • 12. A badge for all these ways the web is changing
  • 14. What is an app?
  • 15. Consumption vs Creation Linkability User Experience Architecture
  • 16. Web Compromise sites Web apps Native apps Nativeness
  • 18. HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those specifications while at the same time enhancing (X)HTML to more adequately address Web applications. - WHATWG Wiki
  • 19. WebFont Video Audio Graphics Device Access Camera CSS Styling & Layout Network Location HTTP JavaScript Contacts AJAX SMS Semantic HTML Events Orientation Sockets File Systems Workers & Cross-App Gyro Databases Parallel SSL Messaging App Caches Processing (all the elements of a modern application platform)
  • 20. The web is now as much a stack as it is a medium
  • 24. MS RIM Symbian Apple Android Top European Smartphone Platforms July 2011, comScore MobiLens
  • 25. .NET J2ME C++ Obj-C Java Native programming languages you’ll need July 2011
  • 26. IE WebKit WebKit WebKit WebKit Browser platforms to target July 2011
  • 27. There is no WebKit on Mobile - @ppk
  • 28. But at least we are using one language, one markup, one style system
  • 29. IE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb @font-face Canvas HTML5 Audio & Video rgba(), hsla() border-image: border-radius: box-shadow: text-shadow: opacity: Multiple backgrounds Flexible Box Model CSS Animations CSS Columns CSS Gradients CSS Reflections CSS 2D Transforms CSS 3D Transforms CSS Transitions Geolocation API local/sessionStorage SVG/SVG Clipping SMIL Inline SVG Drag and Drop hashchange X-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB
  • 30. 100% Support Browsers Capabilities & specifications
  • 31. 100% Support Browsers Polyfills Frameworks Capabilities & specifications
  • 33. <!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>
  • 35. <!DOCTYPE html> <html> <head> <title>Sencha Touch</title> <script src="st.js"></script> <link rel="stylesheet" href="st.css" /> <script type="text/javascript" charset="utf-8"> new Ext.Application({ launch: function() { var continents = new Ext.data.Store({ model: Ext.regModel('', {fields: ['name', 'link']}), data: [ {name: 'North America', link:'na'}, {name: 'South America', link:'sa'}, {name: 'Europe', link:'eu'} ] }); new Ext.Panel({ fullscreen: true, dockedItems: [{ xtype: 'toolbar', title: 'Hello World', }], items: [{ xtype: 'list', store: continents, itemTpl: '{name}' }] }); } }); </script> </head><body></body> </html>
  • 38. HTML5 apps can’t run o ine (hybrid, appcache, and localStorage...)
  • 39. HTML5 apps can’t match native performance (true, sometimes)
  • 40. HTML5 apps can’t be monetized (is this a technology problem?)
  • 41. HTML5 apps can’t access device functionality (weren’t you listening to Brian?)
  • 42. Web Compromise sites Web apps Hybrid apps Native apps Nativeness
  • 43. Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  • 44. WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  • 45. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  • 47. Native app stores have a dirty secret
  • 49. built with Apps vs web technology
  • 51. Well-established hierarchies are not easily uprooted; Closely held beliefs are not easily released; So ritual enthralls generation after generation. Tao Te Ching; 38 Ritual