SlideShare ist ein Scribd-Unternehmen logo
1 von 50
Downloaden Sie, um offline zu lesen
Mobile Web Development with HTML5

Roy Clarkson and Josh Long
SpringSource, a division of VMware

@royclarkson & @starbuxman




© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Agenda

•   Introduction
•   Define the Problem
•   Mobile Browsers
•   Hardware Concerns
•   Simulators and Emulators
•   HTML5
•   JavaScript Frameworks




2
Introduction
    The mobile web refers to the use of web sites or web based
    applications by non-traditional devices or appliances that may
    not have the same capabilities as a modern desktop browser.




3
What problem are we trying to solve?

• Mobile devices have become ubiquitous in our every day
  lives.
• Many people are spending more time on mobile devices
  than on traditional computers.
• How do we present our web sites in a manner that is
  accessible to as many of these different devices as
  possible?




4
What is the solution?

• Most HTML5 features are available on all modern smart
  phones and tablet devices.




5
Why does it matter?

• More people are consuming web sites through their mobile
  devices than through traditional desktop browsers




6
Mobile Browsers




7
Support across browsers
•   Compatibility tables for support of HTML5, CSS3, SVG and more in desktop
    and mobile browsers. -caniuse.com




8
Support across browsers
•   Compatibility tables for support of HTML5, CSS3, SVG and more in desktop
    and mobile browsers. -caniuse.com




9
Hardware Concerns

•    Screen resolution
•    Network connectivity
•    Hardware acceleration
•    Cache size
•    Processor speed
•    Memory




10
Simulators and Emulators




11
Simulators and Emulators




12
Simulators and Emulators




13
Simulators and Emulators




14
HTML5

     Semantics
     Offline Storage
     Device Access
     Connectivity
     Multimedia
     3D, Graphics & Effects
     Performance & Integration
     CSS3 Styling




15
Semantics

• Rich set of tags
• Microdata
• Microformats




16
Rich set of Tags

       <!DOCTYPE html>
       <html>
       <body>
       	      <header>HEADER</header>
       	      <section>
       	      	       <hgroup>
       	      	       	       <h1>title</h1>
       	      	       </hgroup>
       	      	       <article>some text</article>
       	      </section>
       	      <footer>FOOTER</footer>
       </body>
       </html>




17
Microformats




18
Offline Storage

•    Application Cache
•    Local Storage
•    Web SQL
•    Online/Offline Events




19
Application Cache




20
Application Cache

• Specify a cache

     <html manifest="myCustomCache.appcache">
      ...
     </html>


• List out cacheable assets
      CACHE MANIFEST
      index.html
      stylesheet.css
      images/logo.png
      scripts/main.js




21
window.sessionStorage and window.localStorage
 • setItem(string name, string value)
   add or update a value in the store

 • getItem(string name)
   get a named value from the store

 • removeItem(string name)
   remove a named value from the store

 • length
   number of values stored

 • key(long index)
   name of the key at the index

 • clear()
   clear the store
22
Online and Offline Events
document.body.addEventListener("offline", function () {  
          ...
       }, false);  

document.body.addEventListener("online", function () {  
           ...
       }, false);  




23
Online and Offline Events (jQuery)



$(window).bind("offline", function() {

 ...

 }); 




24
Web SQL

     var db = window.openDatabase(
        "Spring Test", "1.0",
        "HTML5 Database API example", 200000);

     db.transaction(function (transaction) {
       var sql = ... ;
       transaction.executeSql(
         sql , [], nullDataHandler, errorHandler);

     }) ;




25
Multimedia

• Audio
• Video




26
Audio Tags

      <audio controls preload="auto" autobuffer>
       <source src="le_long_de_la_route.mp3" />
       <source src="le_long_de_la_route.ogg" />
      </audio>

Browser          Ogg Vorbis   MP3       WAV
Android                X            X
Opera Mobile                        X
Firefox Mobile         X                      X
iOS Safari                          X         X


 27
Video Tags

      <video width="320" height="240" controls="controls">
       <source src="movie.mp4" type="video/mp4" />
       Your browser does not support the video tag.
      </video>



Browser               MP4/H.264           3GP/MPEG4
iOS                            X
Android                        X                  X
Blackberry                     X                  X
Older devices                                     X


 28
Device Access
•    Geolocation*
•    Camera
•    Microphone
•    Contacts




29
Geolocation




30
Geolocation




31
Geolocation


 navigator.geolocation.getCurrentPosition(
  function(position){

     var longitude = position.coords.longitude,
        latitude = position.coords.latitude ;

     ...

 }, errorHandler);




32
(PhoneGap) Camera API

 function onSuccess(imageURI) {
     var image = document.getElementById('myImage');
     image.src = imageURI;
 }

 function onFail(message) {
     alert('Failed because: ' + message);
 }

 navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
     destinationType: Camera.DestinationType.FILE_URI });




33
(PhoneGap) Microphone API
     // capture callback
     var captureSuccess = function(mediaFiles) {
        var i, path, len;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {
          path = mediaFiles[i].fullPath;
          // do something interesting with the file
        }
     };

     // capture error callback
     var captureError = function(error) {
        navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
     };

     // start audio capture
     navigator.device.capture.captureAudio(captureSuccess, captureError, {limit:
     2});



34
(PhoneGap) Find Contact API
 function onSuccess(contacts) {
    alert('Found ' + contacts.length + ' contacts.');
 };

 function onError(contactError) {
    alert('onError!');
 };

 // find all contacts with 'Bob' in any name field
 var options = new ContactFindOptions();
 options.filter="Bob";
 var fields = ["displayName", "name"];
 navigator.contacts.find(fields, onSuccess, onError, options);


35
Connectivity

• Web Sockets *
• Server-Sent Events (don’t bother)




36
Web Sockets

     if ("WebSocket" in window) {

       var ws = new WebSocket("ws://localhost:9998/echo");

          ws.onopen = function() {
             ws.send("Message to send");
          };

          ws.onmessage = function (evt) {
            var receivedMessage = evt.data;
          };
          ws.onclose = function(){
            alert("Connection is closed...");
          };
      }



37
3D, Graphics, & Effects

•    Canvas
•    CSS3 3D features
•    WebGL *
•    SVG *




38
Canvas




39
Performance & Integration

• XMLHttpRequest 2




40
Styling

•    CSS3
•    2D/3D Transformations
•    Transitions
•    WebFonts




41
CSS3 Media Queries

     @media only screen and (max-device-width: 480px) {
         ...

     	     div#header h1 {
     	     	     font-size: 140%;
     	     }

         ...
     }




42
CSS3 Transformations




43
CSS3 Transformations

     #id_of_element {
     	 -webkit-transition: all 1s ease-in-out;
     	 -moz-transition: all 1s ease-in-out;
     	 -o-transition: all 1s ease-in-out;
     	 -ms-transition: all 1s ease-in-out;
     	 transition: all 1s ease-in-out;
     }




44
JavaScript Frameworks

•    jQuery Mobile
•    Sencha Touch
•    Jo
•    jQTouch
•    xui
•    Lawnchair
•    EmbedJS




45
jQuery Mobile

• Touch-optimized web framework for smart phones and
  tablets
• Built on jQuery
• Supports iOS, Android, Blackberry, Windows Phone,
  webOS, symbian, bada, and MeeGo
• 1.0 RC1 released September 29
• jquerymobile.com




46
Sencha Touch

•    HTML5 Mobile Web App Framework
•    Supports iPhone, Android, and Blackberry
•    Version 1.1.1 released October 12
•    2.0.0 Preview Release 1 released on October 11
•    sencha.com/products/touch




47
Jo

• Designed for apps, not web sites.
• Supports iOS, Android, webOS, Blackberry, Chrome OS
• Version 0.4.1




48
Additional Resources

• http://www.w3.org/Mobile
• http://www.html5rocks.com
• http://www.mobilexweb.com/emulators




49
Q&A




50   © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.

Más contenido relacionado

Was ist angesagt?

Intro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile ApplicationsIntro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile ApplicationsSasha dos Santos
 
Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!Matheus Cardoso
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)ejlp12
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with IonicMorris Singer
 
Cordova 3, apps para android
Cordova 3, apps para androidCordova 3, apps para android
Cordova 3, apps para androidDroidcon Spain
 
Cross-platform development frameworks
Cross-platform development frameworksCross-platform development frameworks
Cross-platform development frameworksCarlo Bernaschina
 
Getting started with Google Android - OSCON 2008
Getting started with Google Android - OSCON 2008Getting started with Google Android - OSCON 2008
Getting started with Google Android - OSCON 2008sullis
 
Wikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGapWikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGapTed Chien
 
Ionic 2: Mobile apps with the Web
Ionic 2: Mobile apps with the WebIonic 2: Mobile apps with the Web
Ionic 2: Mobile apps with the WebMike Hartington
 
IONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App DevelopmentIONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App DevelopmentMalan Amarasinghe
 
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesIonic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesJacob Friesen
 
Angularjs Tutorial for Beginners
Angularjs Tutorial for BeginnersAngularjs Tutorial for Beginners
Angularjs Tutorial for Beginnersrajkamaltibacademy
 
Cordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstCordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstRaymond Camden
 
Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.Matheus Cardoso
 
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium IntroNicholas Jansma
 

Was ist angesagt? (20)

Intro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile ApplicationsIntro to Ionic for Building Hybrid Mobile Applications
Intro to Ionic for Building Hybrid Mobile Applications
 
Intro to PhoneGap
Intro to PhoneGapIntro to PhoneGap
Intro to PhoneGap
 
Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
 
Hybrid app development with ionic
Hybrid app development with ionicHybrid app development with ionic
Hybrid app development with ionic
 
Cordova 3, apps para android
Cordova 3, apps para androidCordova 3, apps para android
Cordova 3, apps para android
 
Cross-platform development frameworks
Cross-platform development frameworksCross-platform development frameworks
Cross-platform development frameworks
 
Getting started with Google Android - OSCON 2008
Getting started with Google Android - OSCON 2008Getting started with Google Android - OSCON 2008
Getting started with Google Android - OSCON 2008
 
Revue des annonces WWDC2015
Revue des annonces WWDC2015Revue des annonces WWDC2015
Revue des annonces WWDC2015
 
Wikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGapWikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGap
 
Ionic 2: Mobile apps with the Web
Ionic 2: Mobile apps with the WebIonic 2: Mobile apps with the Web
Ionic 2: Mobile apps with the Web
 
IONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App DevelopmentIONIC - Hybrid Mobile App Development
IONIC - Hybrid Mobile App Development
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Apache cordova
Apache cordovaApache cordova
Apache cordova
 
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesIonic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
 
Angularjs Tutorial for Beginners
Angularjs Tutorial for BeginnersAngularjs Tutorial for Beginners
Angularjs Tutorial for Beginners
 
Cordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstCordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirst
 
Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.
 
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium Intro
 

Ähnlich wie Mobile Web Development with HTML5

Firefox OS - The platform you deserve - Athens App Days - 2013-11-27
Firefox OS - The platform you deserve - Athens App Days - 2013-11-27Firefox OS - The platform you deserve - Athens App Days - 2013-11-27
Firefox OS - The platform you deserve - Athens App Days - 2013-11-27Frédéric Harper
 
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...Frédéric Harper
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on MobileAdam Lu
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bendRaj Lal
 
Android lessons you won't learn in school
Android lessons you won't learn in schoolAndroid lessons you won't learn in school
Android lessons you won't learn in schoolMichael Galpin
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Pravasini Sahoo
 
An Introduction to webOS
An Introduction to webOSAn Introduction to webOS
An Introduction to webOSKevin Decker
 
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...IndicThreads
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Adam Lu
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 
APIs, now and in the future
APIs, now and in the futureAPIs, now and in the future
APIs, now and in the futureChris Mills
 
HTML for the Mobile Web, Firefox OS
HTML for the Mobile Web, Firefox OSHTML for the Mobile Web, Firefox OS
HTML for the Mobile Web, Firefox OSAll Things Open
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010Patrick Lauke
 
Codestrong 2012 breakout session introduction to mobile web and best practices
Codestrong 2012 breakout session   introduction to mobile web and best practicesCodestrong 2012 breakout session   introduction to mobile web and best practices
Codestrong 2012 breakout session introduction to mobile web and best practicesAxway Appcelerator
 
Web dev tools review
Web dev tools reviewWeb dev tools review
Web dev tools reviewChanghyun Lee
 

Ähnlich wie Mobile Web Development with HTML5 (20)

Firefox OS - The platform you deserve - Athens App Days - 2013-11-27
Firefox OS - The platform you deserve - Athens App Days - 2013-11-27Firefox OS - The platform you deserve - Athens App Days - 2013-11-27
Firefox OS - The platform you deserve - Athens App Days - 2013-11-27
 
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Android lessons you won't learn in school
Android lessons you won't learn in schoolAndroid lessons you won't learn in school
Android lessons you won't learn in school
 
Html5 on mobile
Html5 on mobileHtml5 on mobile
Html5 on mobile
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
An Introduction to webOS
An Introduction to webOSAn Introduction to webOS
An Introduction to webOS
 
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
 
VizEx View HTML5 workshop 2017
VizEx View HTML5 workshop 2017VizEx View HTML5 workshop 2017
VizEx View HTML5 workshop 2017
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
APIs, now and in the future
APIs, now and in the futureAPIs, now and in the future
APIs, now and in the future
 
HTML for the Mobile Web, Firefox OS
HTML for the Mobile Web, Firefox OSHTML for the Mobile Web, Firefox OS
HTML for the Mobile Web, Firefox OS
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
 
Codestrong 2012 breakout session introduction to mobile web and best practices
Codestrong 2012 breakout session   introduction to mobile web and best practicesCodestrong 2012 breakout session   introduction to mobile web and best practices
Codestrong 2012 breakout session introduction to mobile web and best practices
 
Html5
Html5Html5
Html5
 
Web dev tools review
Web dev tools reviewWeb dev tools review
Web dev tools review
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 

Último

Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 

Último (20)

Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 

Mobile Web Development with HTML5

  • 1. Mobile Web Development with HTML5 Roy Clarkson and Josh Long SpringSource, a division of VMware @royclarkson & @starbuxman © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
  • 2. Agenda • Introduction • Define the Problem • Mobile Browsers • Hardware Concerns • Simulators and Emulators • HTML5 • JavaScript Frameworks 2
  • 3. Introduction The mobile web refers to the use of web sites or web based applications by non-traditional devices or appliances that may not have the same capabilities as a modern desktop browser. 3
  • 4. What problem are we trying to solve? • Mobile devices have become ubiquitous in our every day lives. • Many people are spending more time on mobile devices than on traditional computers. • How do we present our web sites in a manner that is accessible to as many of these different devices as possible? 4
  • 5. What is the solution? • Most HTML5 features are available on all modern smart phones and tablet devices. 5
  • 6. Why does it matter? • More people are consuming web sites through their mobile devices than through traditional desktop browsers 6
  • 8. Support across browsers • Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. -caniuse.com 8
  • 9. Support across browsers • Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. -caniuse.com 9
  • 10. Hardware Concerns • Screen resolution • Network connectivity • Hardware acceleration • Cache size • Processor speed • Memory 10
  • 15. HTML5 Semantics Offline Storage Device Access Connectivity Multimedia 3D, Graphics & Effects Performance & Integration CSS3 Styling 15
  • 16. Semantics • Rich set of tags • Microdata • Microformats 16
  • 17. Rich set of Tags <!DOCTYPE html> <html> <body> <header>HEADER</header> <section> <hgroup> <h1>title</h1> </hgroup> <article>some text</article> </section> <footer>FOOTER</footer> </body> </html> 17
  • 19. Offline Storage • Application Cache • Local Storage • Web SQL • Online/Offline Events 19
  • 21. Application Cache • Specify a cache <html manifest="myCustomCache.appcache"> ... </html> • List out cacheable assets CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js 21
  • 22. window.sessionStorage and window.localStorage • setItem(string name, string value) add or update a value in the store • getItem(string name) get a named value from the store • removeItem(string name) remove a named value from the store • length number of values stored • key(long index) name of the key at the index • clear() clear the store 22
  • 23. Online and Offline Events document.body.addEventListener("offline", function () {   ...        }, false);   document.body.addEventListener("online", function () {   ...        }, false);   23
  • 24. Online and Offline Events (jQuery) $(window).bind("offline", function() {  ...  });  24
  • 25. Web SQL var db = window.openDatabase( "Spring Test", "1.0", "HTML5 Database API example", 200000); db.transaction(function (transaction) { var sql = ... ;   transaction.executeSql( sql , [], nullDataHandler, errorHandler); }) ; 25
  • 27. Audio Tags <audio controls preload="auto" autobuffer> <source src="le_long_de_la_route.mp3" /> <source src="le_long_de_la_route.ogg" /> </audio> Browser Ogg Vorbis MP3 WAV Android X X Opera Mobile X Firefox Mobile X X iOS Safari X X 27
  • 28. Video Tags <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> Your browser does not support the video tag. </video> Browser MP4/H.264 3GP/MPEG4 iOS X Android X X Blackberry X X Older devices X 28
  • 29. Device Access • Geolocation* • Camera • Microphone • Contacts 29
  • 32. Geolocation navigator.geolocation.getCurrentPosition( function(position){ var longitude = position.coords.longitude, latitude = position.coords.latitude ; ... }, errorHandler); 32
  • 33. (PhoneGap) Camera API function onSuccess(imageURI) {     var image = document.getElementById('myImage');     image.src = imageURI; } function onFail(message) {     alert('Failed because: ' + message); } navigator.camera.getPicture(onSuccess, onFail, { quality: 50,     destinationType: Camera.DestinationType.FILE_URI }); 33
  • 34. (PhoneGap) Microphone API // capture callback var captureSuccess = function(mediaFiles) { var i, path, len; for (i = 0, len = mediaFiles.length; i < len; i += 1) { path = mediaFiles[i].fullPath; // do something interesting with the file } }; // capture error callback var captureError = function(error) { navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error'); }; // start audio capture navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 2}); 34
  • 35. (PhoneGap) Find Contact API function onSuccess(contacts) { alert('Found ' + contacts.length + ' contacts.'); }; function onError(contactError) { alert('onError!'); }; // find all contacts with 'Bob' in any name field var options = new ContactFindOptions(); options.filter="Bob"; var fields = ["displayName", "name"]; navigator.contacts.find(fields, onSuccess, onError, options); 35
  • 36. Connectivity • Web Sockets * • Server-Sent Events (don’t bother) 36
  • 37. Web Sockets if ("WebSocket" in window) { var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { ws.send("Message to send"); }; ws.onmessage = function (evt) { var receivedMessage = evt.data; }; ws.onclose = function(){ alert("Connection is closed..."); }; } 37
  • 38. 3D, Graphics, & Effects • Canvas • CSS3 3D features • WebGL * • SVG * 38
  • 40. Performance & Integration • XMLHttpRequest 2 40
  • 41. Styling • CSS3 • 2D/3D Transformations • Transitions • WebFonts 41
  • 42. CSS3 Media Queries @media only screen and (max-device-width: 480px) { ... div#header h1 { font-size: 140%; } ... } 42
  • 44. CSS3 Transformations #id_of_element { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } 44
  • 45. JavaScript Frameworks • jQuery Mobile • Sencha Touch • Jo • jQTouch • xui • Lawnchair • EmbedJS 45
  • 46. jQuery Mobile • Touch-optimized web framework for smart phones and tablets • Built on jQuery • Supports iOS, Android, Blackberry, Windows Phone, webOS, symbian, bada, and MeeGo • 1.0 RC1 released September 29 • jquerymobile.com 46
  • 47. Sencha Touch • HTML5 Mobile Web App Framework • Supports iPhone, Android, and Blackberry • Version 1.1.1 released October 12 • 2.0.0 Preview Release 1 released on October 11 • sencha.com/products/touch 47
  • 48. Jo • Designed for apps, not web sites. • Supports iOS, Android, webOS, Blackberry, Chrome OS • Version 0.4.1 48
  • 49. Additional Resources • http://www.w3.org/Mobile • http://www.html5rocks.com • http://www.mobilexweb.com/emulators 49
  • 50. Q&A 50 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.