SlideShare uma empresa Scribd logo
1 de 62
Get Ahead With HTML5
On Mobile

Markus Kobler
Overview
Offline Storage

Graphics

Networking

Tooling
1) Useable Today
1) Useable Today
1) Useable Today
1) Useable Today
2) Works Offline
3) Immersive & Engaging
4) No Permission Needed
5) Evolving Fast
Simple Sudoku Demo
j.mp/sudokuapp
Simple Sudoku Demo
j.mp/sudokuapp
Offline Storage
AppCache very simple to add...

1) List all your resources in a manifest file
AppCache very simple to add...

1) List all your resources in a manifest file




2) Reference your manifest file in the <html> tag
Update Manifest file EVERY time ANY required resource changes
Update Manifest file EVERY time ANY required resource changes

If resources fail to download, app will not update!
Update Manifest file EVERY time ANY required resource changes

 If resources fail to download, app will not update!

 Your old version will always start first
   (Browser does not know if it has a connection initially)

window.applicationCache.addEventListener('updateready', function(e) {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      window.applicationCache.swapCache();
      window.location.reload();
  }
}, false);
Web Storage
 A Simple Key/Value store for strings
                  localStorage.setItem("bar", foo);

                  localStorage["bar"] = foo;
Web Storage
 A Simple Key/Value store for strings
                  localStorage.setItem("bar", foo);

                  localStorage["bar"] = foo;


 But nothing to stop you from encoding JSON, image data, etc
Web Storage
 A Simple Key/Value store for strings
                   localStorage.setItem("bar", foo);

                   localStorage["bar"] = foo;


 But nothing to stop you from encoding JSON, image data, etc




 Tied to a browser session or longer (similar to cookies)
Web SQL Database
  Power of a client side RDBS
  var db = openDatabase('example', '1.0', 'Checkins', 8192);
  db.transaction(function(tx) {
    tx.executeSql("create table if not exists " +
       "checkins(id integer primary key asc, time integer, latitude float,longitude float)"
    );
  });

  db.transaction(function(tx) {
    tx.executeSql(
       "insert into checkins (time, latitude, longitude) values (?,?,?);",
       [checkin.time, checkin.latitude, checkin.longitude],
       onSuccessHandler, onErrorHandler
    );
  });
Web SQL Database
  Power of a client side RDBS
  var db = openDatabase('example', '1.0', 'Checkins', 8192);
  db.transaction(function(tx) {
    tx.executeSql("create table if not exists " +
       "checkins(id integer primary key asc, time integer, latitude float,longitude float)"
    );
  });

  db.transaction(function(tx) {
    tx.executeSql(
       "insert into checkins (time, latitude, longitude) values (?,?,?);",
       [checkin.time, checkin.latitude, checkin.longitude],
       onSuccessHandler, onErrorHandler
    );
  });



  That’s both good and bad
Web SQL Database
  Power of a client side RDBS
  var db = openDatabase('example', '1.0', 'Checkins', 8192);
  db.transaction(function(tx) {
    tx.executeSql("create table if not exists " +
       "checkins(id integer primary key asc, time integer, latitude float,longitude float)"
    );
  });

  db.transaction(function(tx) {
    tx.executeSql(
       "insert into checkins (time, latitude, longitude) values (?,?,?);",
       [checkin.time, checkin.latitude, checkin.longitude],
       onSuccessHandler, onErrorHandler
    );
  });



  That’s both good and bad
  Effectively a JavaScript wrapper around SQLite...
Web DB set to be replaced

          New initiative around IndexedDB

          An indexed object store instead of
          SQL

          Early implementations in Chrome &
          Firefox

          But no support on mobile yet...
Graphics
Bling
Web’s performance is getting quicker every day
If you still need convincing check out

            http://ro.me/

And other demos at www.chromeexperiments.com
Range of technologies to choose from

  CSS3
  - Mostly well supported and might get you a long way
Range of technologies to choose from

  CSS3
  - Mostly well supported and might get you a long way

  Canvas and SVG
  - Canvas is great for pixel perfect changes
  - SVG if vectors are a better fit
Range of technologies to choose from

  CSS3
  - Mostly well supported and might get you a long way

  Canvas and SVG
  - Canvas is great for pixel perfect changes
  - SVG if vectors are a better fit

  WebGL
  - Not there yet for mobiles and tablets but coming soon...
Think carefully about how you build your app
    Avoid excessive browser reflows wherever possible
Think carefully about how you build your app
    Avoid excessive browser reflows wherever possible
Think carefully about how you build your app
    Avoid excessive browser reflows wherever possible


    Avoid using setTimeout() loops
   - Use requestAnimationFrame() instead
Think carefully about how you build your app
    Avoid excessive browser reflows wherever possible


    Avoid using setTimeout() loops
   - Use requestAnimationFrame() instead

    3D CSS transforms can speed up Desktop/iOS apps but
    Android still has poor support
Think carefully about how you build your app
    Avoid excessive browser reflows wherever possible


    Avoid using setTimeout() loops
   - Use requestAnimationFrame() instead

    3D CSS transforms can speed up Desktop/iOS apps but
    Android still has poor support


               Check out Paul Irish’s great blog posts for more info
           http://paulirish.com/2011/dom-html5-css3-performance/
Network Effects
Websocket Demo
Tooling
Familiar syntax for web developers

Built on top of jQuery

Provides useful mobile widgets

It might be all you need...
Familiar syntax for web developers

           Built on top of jQuery

           Provides useful mobile widgets

           It might be all you need...

complex apps typically demand more
Sencha Touch                      SproutCore
- Both modern Open Source projects
- Designed with pure JS mobile apps in mind
- Backed by two well financed startups
Google Web Toolkit

   Java (& XML) at core

   Mature and fully featured

   Works well with teams of Dev’s

   Aggressively optimised

   But will not be to everyone’s taste
Summing up
HTML5 is still a bit of a jungle...




                 Tropic Thunder © 2008 DreamWorks Pictures
...all new technologies can cause initial pain




                                     Tropic Thunder © 2008 DreamWorks Pictures
Don’t forget to test throughout the development process
and on as many platforms as possible
It’s never been a better
It’s never been a better
time to get started
Thank you for listening

Feedback appreciated
@markuskobler




distinctive.co
Useful Links
    Spec’s
     - http://www.whatwg.org/specs/web-apps/current-work/multipage/
     - http://www.w3.org/TR/html5/offline.html
     - http://www.w3.org/TR/webstorage/
     - http://www.w3.org/TR/IndexedDB/
     - http://www.w3.org/TR/websockets/

    Frameworks
     - http://jquerymobile.com/
     - http://www.sencha.com/products/touch/
     - http://www.sproutcore.com/
     - http://code.google.com/webtoolkit/

    Useful Links
     - http://www.html5rocks.com/
     - http://caniuse.com/
     - http://html5demos.com/
     - http://www.browserscope.org/
Image Credits

  Annie Mole - http://www.flickr.com/photos/anniemole/2424372024/sizes/l/in/photostream/
  Yaniv Golan - http://www.flickr.com/photos/yghelloworld/4964999147/sizes/l/in/photostream/
  Achew *Bokehmon* - http://www.flickr.com/photos/achew/3987039984/in/photostream/
  Liam Johnson - http://www.flickr.com/photos/livelavalove/4899123302/sizes/l/in/photostream/
  Cdevers - http://www.flickr.com/photos/cdevers/4602805654/sizes/l/in/photostream/
  Melvin Schlubman - http://www.flickr.com/photos/pauldineen/4871132100/sizes/l/in/photostream/
  Melvin Schlubman - http://www.flickr.com/photos/pauldineen/4871130172/in/photostream/
  Afagen - http://www.flickr.com/photos/afagen/4913607219/sizes/l/in/photostream/
  Langley Research Center - Nasa http://grin.hq.nasa.gov/ABSTRACTS/GPN-2000-001907.html
  Ming Xia - http://www.flickr.com/photos/xiaming/476229544/

Mais conteúdo relacionado

Mais procurados

HTML5 vs Silverlight
HTML5 vs SilverlightHTML5 vs Silverlight
HTML5 vs SilverlightMatt Casto
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"Chris Mills
 
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service WorkerChang W. Doh
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseAaron Silverman
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
 
Webpack packing it all
Webpack packing it allWebpack packing it all
Webpack packing it allCriciúma Dev
 
Web Development with NodeJS
Web Development with NodeJSWeb Development with NodeJS
Web Development with NodeJSRiza Fahmi
 
The Future of CSS with Web Components
The Future of CSS with Web ComponentsThe Future of CSS with Web Components
The Future of CSS with Web ComponentsColdFusionConference
 
#NoXML: Eliminating XML in Spring Projects - SpringOne 2GX 2015
#NoXML: Eliminating XML in Spring Projects - SpringOne 2GX 2015#NoXML: Eliminating XML in Spring Projects - SpringOne 2GX 2015
#NoXML: Eliminating XML in Spring Projects - SpringOne 2GX 2015Matt Raible
 
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesSimon Willison
 
PWA 與 Service Worker
PWA 與 Service WorkerPWA 與 Service Worker
PWA 與 Service WorkerAnna Su
 
Node.js Crash Course
Node.js Crash CourseNode.js Crash Course
Node.js Crash CourseDavid Neal
 
Going Node At Netflix
Going Node At NetflixGoing Node At Netflix
Going Node At NetflixRyan Anklam
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for MobileRemy Sharp
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Libraryjeresig
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsStoyan Stefanov
 
PWA 應用 - 實現網站離線瀏覽
PWA 應用 - 實現網站離線瀏覽PWA 應用 - 實現網站離線瀏覽
PWA 應用 - 實現網站離線瀏覽Anna Su
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Webphilogb
 

Mais procurados (20)

HTML5 vs Silverlight
HTML5 vs SilverlightHTML5 vs Silverlight
HTML5 vs Silverlight
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"
 
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service Worker
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
Webpack packing it all
Webpack packing it allWebpack packing it all
Webpack packing it all
 
Web Development with NodeJS
Web Development with NodeJSWeb Development with NodeJS
Web Development with NodeJS
 
The Future of CSS with Web Components
The Future of CSS with Web ComponentsThe Future of CSS with Web Components
The Future of CSS with Web Components
 
#NoXML: Eliminating XML in Spring Projects - SpringOne 2GX 2015
#NoXML: Eliminating XML in Spring Projects - SpringOne 2GX 2015#NoXML: Eliminating XML in Spring Projects - SpringOne 2GX 2015
#NoXML: Eliminating XML in Spring Projects - SpringOne 2GX 2015
 
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
 
PWA 與 Service Worker
PWA 與 Service WorkerPWA 與 Service Worker
PWA 與 Service Worker
 
Node.js Crash Course
Node.js Crash CourseNode.js Crash Course
Node.js Crash Course
 
Going Node At Netflix
Going Node At NetflixGoing Node At Netflix
Going Node At Netflix
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
 
PWA 應用 - 實現網站離線瀏覽
PWA 應用 - 實現網站離線瀏覽PWA 應用 - 實現網站離線瀏覽
PWA 應用 - 實現網站離線瀏覽
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 

Destaque

Destaque (10)

Yeah
YeahYeah
Yeah
 
Avoiding Technical Bankruptcy
Avoiding Technical BankruptcyAvoiding Technical Bankruptcy
Avoiding Technical Bankruptcy
 
D:\mis documentos\trabajo de imformatica por javi gu
D:\mis documentos\trabajo de imformatica por javi guD:\mis documentos\trabajo de imformatica por javi gu
D:\mis documentos\trabajo de imformatica por javi gu
 
YQL
YQLYQL
YQL
 
Buyback Refresher
Buyback RefresherBuyback Refresher
Buyback Refresher
 
Five lessons
Five lessonsFive lessons
Five lessons
 
Usher
UsherUsher
Usher
 
Meeting Presentation
Meeting PresentationMeeting Presentation
Meeting Presentation
 
Microformats
MicroformatsMicroformats
Microformats
 
Content marketing-playbook
Content marketing-playbookContent marketing-playbook
Content marketing-playbook
 

Semelhante a Get Ahead with HTML5 on Moible

openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010Patrick Lauke
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010Patrick Lauke
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....Patrick Lauke
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5Chris Mills
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5smueller_sandsmedia
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS UniverseStefano Di Paola
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 mayLuciano Amodio
 
Survive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and TricksSurvive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and TricksJuho Vepsäläinen
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Doris Chen
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-airbrucelawson
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineRicardo Silva
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Session on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaSession on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaAgile Testing Alliance
 
Introduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightPeter Gfader
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application developmentzonathen
 

Semelhante a Get Ahead with HTML5 on Moible (20)

openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may
 
Survive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and TricksSurvive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and Tricks
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Session on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaSession on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh Gundecha
 
Introduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and Silverlight
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
Node js introduction
Node js introductionNode js introduction
Node js introduction
 
Web assembly with PWA
Web assembly with PWA Web assembly with PWA
Web assembly with PWA
 

Último

Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 

Último (20)

Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 

Get Ahead with HTML5 on Moible

  • 1. Get Ahead With HTML5 On Mobile Markus Kobler
  • 3.
  • 4.
  • 10. 3) Immersive & Engaging
  • 16. AppCache very simple to add... 1) List all your resources in a manifest file
  • 17. AppCache very simple to add... 1) List all your resources in a manifest file 2) Reference your manifest file in the <html> tag
  • 18.
  • 19.
  • 20. Update Manifest file EVERY time ANY required resource changes
  • 21. Update Manifest file EVERY time ANY required resource changes If resources fail to download, app will not update!
  • 22. Update Manifest file EVERY time ANY required resource changes If resources fail to download, app will not update! Your old version will always start first (Browser does not know if it has a connection initially) window.applicationCache.addEventListener('updateready', function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {       window.applicationCache.swapCache(); window.location.reload();   } }, false);
  • 23. Web Storage A Simple Key/Value store for strings localStorage.setItem("bar", foo); localStorage["bar"] = foo;
  • 24. Web Storage A Simple Key/Value store for strings localStorage.setItem("bar", foo); localStorage["bar"] = foo; But nothing to stop you from encoding JSON, image data, etc
  • 25. Web Storage A Simple Key/Value store for strings localStorage.setItem("bar", foo); localStorage["bar"] = foo; But nothing to stop you from encoding JSON, image data, etc Tied to a browser session or longer (similar to cookies)
  • 26. Web SQL Database Power of a client side RDBS var db = openDatabase('example', '1.0', 'Checkins', 8192); db.transaction(function(tx) { tx.executeSql("create table if not exists " + "checkins(id integer primary key asc, time integer, latitude float,longitude float)" ); }); db.transaction(function(tx) { tx.executeSql( "insert into checkins (time, latitude, longitude) values (?,?,?);", [checkin.time, checkin.latitude, checkin.longitude], onSuccessHandler, onErrorHandler ); });
  • 27. Web SQL Database Power of a client side RDBS var db = openDatabase('example', '1.0', 'Checkins', 8192); db.transaction(function(tx) { tx.executeSql("create table if not exists " + "checkins(id integer primary key asc, time integer, latitude float,longitude float)" ); }); db.transaction(function(tx) { tx.executeSql( "insert into checkins (time, latitude, longitude) values (?,?,?);", [checkin.time, checkin.latitude, checkin.longitude], onSuccessHandler, onErrorHandler ); }); That’s both good and bad
  • 28. Web SQL Database Power of a client side RDBS var db = openDatabase('example', '1.0', 'Checkins', 8192); db.transaction(function(tx) { tx.executeSql("create table if not exists " + "checkins(id integer primary key asc, time integer, latitude float,longitude float)" ); }); db.transaction(function(tx) { tx.executeSql( "insert into checkins (time, latitude, longitude) values (?,?,?);", [checkin.time, checkin.latitude, checkin.longitude], onSuccessHandler, onErrorHandler ); }); That’s both good and bad Effectively a JavaScript wrapper around SQLite...
  • 29.
  • 30. Web DB set to be replaced New initiative around IndexedDB An indexed object store instead of SQL Early implementations in Chrome & Firefox But no support on mobile yet...
  • 32. Bling
  • 33. Web’s performance is getting quicker every day
  • 34. If you still need convincing check out http://ro.me/ And other demos at www.chromeexperiments.com
  • 35. Range of technologies to choose from CSS3 - Mostly well supported and might get you a long way
  • 36. Range of technologies to choose from CSS3 - Mostly well supported and might get you a long way Canvas and SVG - Canvas is great for pixel perfect changes - SVG if vectors are a better fit
  • 37. Range of technologies to choose from CSS3 - Mostly well supported and might get you a long way Canvas and SVG - Canvas is great for pixel perfect changes - SVG if vectors are a better fit WebGL - Not there yet for mobiles and tablets but coming soon...
  • 38. Think carefully about how you build your app Avoid excessive browser reflows wherever possible
  • 39. Think carefully about how you build your app Avoid excessive browser reflows wherever possible
  • 40. Think carefully about how you build your app Avoid excessive browser reflows wherever possible Avoid using setTimeout() loops - Use requestAnimationFrame() instead
  • 41. Think carefully about how you build your app Avoid excessive browser reflows wherever possible Avoid using setTimeout() loops - Use requestAnimationFrame() instead 3D CSS transforms can speed up Desktop/iOS apps but Android still has poor support
  • 42. Think carefully about how you build your app Avoid excessive browser reflows wherever possible Avoid using setTimeout() loops - Use requestAnimationFrame() instead 3D CSS transforms can speed up Desktop/iOS apps but Android still has poor support Check out Paul Irish’s great blog posts for more info http://paulirish.com/2011/dom-html5-css3-performance/
  • 44.
  • 47.
  • 48. Familiar syntax for web developers Built on top of jQuery Provides useful mobile widgets It might be all you need...
  • 49. Familiar syntax for web developers Built on top of jQuery Provides useful mobile widgets It might be all you need... complex apps typically demand more
  • 50.
  • 51. Sencha Touch SproutCore - Both modern Open Source projects - Designed with pure JS mobile apps in mind - Backed by two well financed startups
  • 52. Google Web Toolkit Java (& XML) at core Mature and fully featured Works well with teams of Dev’s Aggressively optimised But will not be to everyone’s taste
  • 54. HTML5 is still a bit of a jungle... Tropic Thunder © 2008 DreamWorks Pictures
  • 55. ...all new technologies can cause initial pain Tropic Thunder © 2008 DreamWorks Pictures
  • 56. Don’t forget to test throughout the development process
  • 57. and on as many platforms as possible
  • 58. It’s never been a better
  • 59. It’s never been a better time to get started
  • 60. Thank you for listening Feedback appreciated @markuskobler distinctive.co
  • 61. Useful Links Spec’s - http://www.whatwg.org/specs/web-apps/current-work/multipage/ - http://www.w3.org/TR/html5/offline.html - http://www.w3.org/TR/webstorage/ - http://www.w3.org/TR/IndexedDB/ - http://www.w3.org/TR/websockets/ Frameworks - http://jquerymobile.com/ - http://www.sencha.com/products/touch/ - http://www.sproutcore.com/ - http://code.google.com/webtoolkit/ Useful Links - http://www.html5rocks.com/ - http://caniuse.com/ - http://html5demos.com/ - http://www.browserscope.org/
  • 62. Image Credits Annie Mole - http://www.flickr.com/photos/anniemole/2424372024/sizes/l/in/photostream/ Yaniv Golan - http://www.flickr.com/photos/yghelloworld/4964999147/sizes/l/in/photostream/ Achew *Bokehmon* - http://www.flickr.com/photos/achew/3987039984/in/photostream/ Liam Johnson - http://www.flickr.com/photos/livelavalove/4899123302/sizes/l/in/photostream/ Cdevers - http://www.flickr.com/photos/cdevers/4602805654/sizes/l/in/photostream/ Melvin Schlubman - http://www.flickr.com/photos/pauldineen/4871132100/sizes/l/in/photostream/ Melvin Schlubman - http://www.flickr.com/photos/pauldineen/4871130172/in/photostream/ Afagen - http://www.flickr.com/photos/afagen/4913607219/sizes/l/in/photostream/ Langley Research Center - Nasa http://grin.hq.nasa.gov/ABSTRACTS/GPN-2000-001907.html Ming Xia - http://www.flickr.com/photos/xiaming/476229544/