SlideShare une entreprise Scribd logo
1  sur  16
Télécharger pour lire hors ligne
How to build a
offline webapp for
the iPhone ...
By Bert Timmermans
Bert Timmermans
Student Communicatie Multimedia & Design
Freelance - Nocus Communication - Hasselt

Web design / web development
iPhone web development projects:
    • Keypoint Beta 3
    • Checklist
    • ...
Mail:    me@berttimmermans.com
Twitter: @berttimmermans
Website: http://www.berttimmermans.com
Overview
    Main introduction
✤



    Step 1 The interface
✤



    Step 2 The database
✤



    Step 3 Making it available offline
✤
Introduction
    Mobile Safari
✤




    Html 5 & Javascript
✤




    Local database
✤




    Caching the webapp for offline use
✤
Example

Checklist
berttimmermans.com/checklist
Step 1 The interface
     Mobile interface
 ✤




     iPhone optimization
 ✤




          iPhone codes
     ✤



         <!-- iPhone codes -->
         <link rel=quot;apple-touch-iconquot; href=quot;image/icon.pngquot;/>
         <meta name=quot;viewportquot; content=quot;width=device-width; initial-scale=1.0;quot; />

         <meta name=quot;apple-mobile-web-app-capablequot; content=quot;yesquot; />
         <meta names=quot;apple-mobile-web-app-status-bar-stylequot; content=quot;blackquot; />
Step 1 The interface
      CSS 3 (-webkit-) support
  ✤




      Example

      #object {
        position:absolute;
        left: 0px;
        -webkit-transition-property: left;
        -webkit-transition-duration: 0.5s, 0.5s;
        }

      #object.class {
        left: 10px;
      }
Step 1 The interface
      Javascript solutions
  ✤




          jQuery, mootools, ...
      ✤




          Fixed header
      ✤




          Rotation detection
      ✤




          Location detection using free appstore app
      ✤




          ...
      ✤
Step 2 The database
     Clientside Javascript database
 ✤




     Safari and other webkit based browsers like Google Chrome
 ✤




     An option to sync with a online database
 ✤




     MYSQL commands
 ✤




     User can manage database using preferences
 ✤
Step 2 The database
 Example code

  var db;

  try {
     if (window.openDatabase) {
         db = openDatabase(quot;Checklistquot;, quot;1.0quot;, quot;HTML5 Database APIquot;, 200000);
         if (!db) {
            alert(quot;Failed to open the databasequot;);
        } else{
  
         var highestId = 0;
       }
     } else
         alert(quot;Couldn't open the database. Please try with a WebKitquot;);
  }
Step 3 Caching the webapp
     Firefox en iPhone safari
 ✤




     HTML 5 manifest file
 ✤




     Example of a manifest file
 ✤




     <html manifest=quot;main.manifestquot;>


     CACHE MANIFEST

     css/main.css
     images/main.png
     js/database.js
Step 3 Caching the webapp
     IMPORTANT !
 ✤




     The manifest file has to have a text/cache-manifest MIME
     type

     Solution a .htacces

       AddType text/cache-manifest .manifest
One more thing ...
 tinyurl.com/1morething
Tweetwall
Your mobile twitter wall
berttimmermans.com/tweetwall
The end
Barcamp Antwerp 2009 was sponserd by

Contenu connexe

Tendances

大众点评网 Web开发之路
大众点评网 Web开发之路大众点评网 Web开发之路
大众点评网 Web开发之路
alcoholwang
 
How I Learned to Stop Worrying and Love the Internet
How I Learned to Stop Worrying and Love the InternetHow I Learned to Stop Worrying and Love the Internet
How I Learned to Stop Worrying and Love the Internet
Noah Brier
 
My Learning Style Presentation
My Learning Style PresentationMy Learning Style Presentation
My Learning Style Presentation
guest16e403
 

Tendances (17)

Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
Drupal Day 2011 - Features: una vita felice
Drupal Day 2011 - Features: una vita feliceDrupal Day 2011 - Features: una vita felice
Drupal Day 2011 - Features: una vita felice
 
Mashup Talk Npox
Mashup Talk NpoxMashup Talk Npox
Mashup Talk Npox
 
Jump start php environment
Jump start php environmentJump start php environment
Jump start php environment
 
Mastermind 10th march full page cache
Mastermind 10th march   full page cacheMastermind 10th march   full page cache
Mastermind 10th march full page cache
 
Word camp raleigh presentation 11 23-13
Word camp raleigh presentation 11 23-13Word camp raleigh presentation 11 23-13
Word camp raleigh presentation 11 23-13
 
大众点评网 Web开发之路
大众点评网 Web开发之路大众点评网 Web开发之路
大众点评网 Web开发之路
 
Getting Started: The Installation
Getting Started: The InstallationGetting Started: The Installation
Getting Started: The Installation
 
Roel Hartman - HTML5 Widescreen
Roel Hartman - HTML5 WidescreenRoel Hartman - HTML5 Widescreen
Roel Hartman - HTML5 Widescreen
 
Prawn: Creating PDF in Ruby
Prawn: Creating PDF in RubyPrawn: Creating PDF in Ruby
Prawn: Creating PDF in Ruby
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the EnterpriseDoing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise
 
How I Learned to Stop Worrying and Love the Internet
How I Learned to Stop Worrying and Love the InternetHow I Learned to Stop Worrying and Love the Internet
How I Learned to Stop Worrying and Love the Internet
 
Chrome and Flash
Chrome and FlashChrome and Flash
Chrome and Flash
 
Importance of-website-backups
Importance of-website-backupsImportance of-website-backups
Importance of-website-backups
 
Web application intro
Web application introWeb application intro
Web application intro
 
My Learning Style Presentation
My Learning Style PresentationMy Learning Style Presentation
My Learning Style Presentation
 
Html5 inputs
Html5 inputsHtml5 inputs
Html5 inputs
 

En vedette

Blerta Interpreter 1
Blerta Interpreter 1Blerta Interpreter 1
Blerta Interpreter 1
Blerta
 
Innovation Benefits Realization for Industrial Research (Part-1)
Innovation Benefits Realization for Industrial Research (Part-1)Innovation Benefits Realization for Industrial Research (Part-1)
Innovation Benefits Realization for Industrial Research (Part-1)
Iain Sanders
 
Design Thinking in EFL Context
Design Thinking in EFL ContextDesign Thinking in EFL Context
Design Thinking in EFL Context
Debopriyo Roy
 
Kenenisa
KenenisaKenenisa
Kenenisa
rgana
 
Scientific Literacy, Attitudes towards Science, Religiosity and Superstitious...
Scientific Literacy, Attitudes towards Science, Religiosity and Superstitious...Scientific Literacy, Attitudes towards Science, Religiosity and Superstitious...
Scientific Literacy, Attitudes towards Science, Religiosity and Superstitious...
Eugen Glavan
 

En vedette (20)

Lee.Portfolio 09
Lee.Portfolio 09Lee.Portfolio 09
Lee.Portfolio 09
 
Convegno Polizie Locali Sicurezza Stradale Riccione 09 09
Convegno Polizie Locali Sicurezza Stradale Riccione 09 09Convegno Polizie Locali Sicurezza Stradale Riccione 09 09
Convegno Polizie Locali Sicurezza Stradale Riccione 09 09
 
Riskope 5 days course on Risk and Crisis Management for top managers and key ...
Riskope 5 days course on Risk and Crisis Management for top managers and key ...Riskope 5 days course on Risk and Crisis Management for top managers and key ...
Riskope 5 days course on Risk and Crisis Management for top managers and key ...
 
Play the game
Play the gamePlay the game
Play the game
 
Your powe2s
Your powe2sYour powe2s
Your powe2s
 
Blerta Interpreter 1
Blerta Interpreter 1Blerta Interpreter 1
Blerta Interpreter 1
 
kine
kinekine
kine
 
How To Avoid Alzheimers
How To Avoid AlzheimersHow To Avoid Alzheimers
How To Avoid Alzheimers
 
Innovation Benefits Realization for Industrial Research (Part-1)
Innovation Benefits Realization for Industrial Research (Part-1)Innovation Benefits Realization for Industrial Research (Part-1)
Innovation Benefits Realization for Industrial Research (Part-1)
 
Drenajes en cirugia biliopancreatica
Drenajes en cirugia biliopancreaticaDrenajes en cirugia biliopancreatica
Drenajes en cirugia biliopancreatica
 
Flowers
FlowersFlowers
Flowers
 
Communicating Bad News To Customers
Communicating Bad News To CustomersCommunicating Bad News To Customers
Communicating Bad News To Customers
 
IPCC2010-1
IPCC2010-1IPCC2010-1
IPCC2010-1
 
Tolerability and Decision Making Discussion
Tolerability and Decision Making DiscussionTolerability and Decision Making Discussion
Tolerability and Decision Making Discussion
 
Design Thinking in EFL Context
Design Thinking in EFL ContextDesign Thinking in EFL Context
Design Thinking in EFL Context
 
The Beatles
The BeatlesThe Beatles
The Beatles
 
Monica Cabbler - Profile
Monica Cabbler - ProfileMonica Cabbler - Profile
Monica Cabbler - Profile
 
Kenenisa
KenenisaKenenisa
Kenenisa
 
Nastas Lecture Graduate School of Business Michgan State University
Nastas Lecture Graduate School of Business Michgan State UniversityNastas Lecture Graduate School of Business Michgan State University
Nastas Lecture Graduate School of Business Michgan State University
 
Scientific Literacy, Attitudes towards Science, Religiosity and Superstitious...
Scientific Literacy, Attitudes towards Science, Religiosity and Superstitious...Scientific Literacy, Attitudes towards Science, Religiosity and Superstitious...
Scientific Literacy, Attitudes towards Science, Religiosity and Superstitious...
 

Similaire à iPhone offline webapps

7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
Nicole Sullivan
 
Ajax Tutorial
Ajax TutorialAjax Tutorial
Ajax Tutorial
oscon2007
 

Similaire à iPhone offline webapps (20)

What’s New in ASP.NET 4
What’s New in ASP.NET 4What’s New in ASP.NET 4
What’s New in ASP.NET 4
 
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
 
Going Live! with Comet
Going Live! with CometGoing Live! with Comet
Going Live! with Comet
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009
 
Internet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyInternet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian Thilmany
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
WebTest - Efficient Functional Web Testing with HtmlUnit and Beyond
WebTest - Efficient Functional Web Testing with HtmlUnit and BeyondWebTest - Efficient Functional Web Testing with HtmlUnit and Beyond
WebTest - Efficient Functional Web Testing with HtmlUnit and Beyond
 
ICEfaces and JSF 2.0 on GlassFish
ICEfaces and JSF 2.0 on GlassFishICEfaces and JSF 2.0 on GlassFish
ICEfaces and JSF 2.0 on GlassFish
 
Mobile web-debug
Mobile web-debugMobile web-debug
Mobile web-debug
 
Creating Rajanikant Powered Site
Creating Rajanikant Powered SiteCreating Rajanikant Powered Site
Creating Rajanikant Powered Site
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
 
Silver Light By Nyros Developer
Silver Light By Nyros DeveloperSilver Light By Nyros Developer
Silver Light By Nyros Developer
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
 
Website & Internet + Performance testing
Website & Internet + Performance testingWebsite & Internet + Performance testing
Website & Internet + Performance testing
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
 
Ajax Tutorial
Ajax TutorialAjax Tutorial
Ajax Tutorial
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
DODN2009 - Jump Start Silverlight
DODN2009 - Jump Start SilverlightDODN2009 - Jump Start Silverlight
DODN2009 - Jump Start Silverlight
 

Plus de Home (7)

Gotta code them all, a Pokémon and HTML5 love story!
Gotta code them all, a Pokémon and HTML5 love story!Gotta code them all, a Pokémon and HTML5 love story!
Gotta code them all, a Pokémon and HTML5 love story!
 
jQtouch, Building Awesome Webapps
jQtouch, Building Awesome WebappsjQtouch, Building Awesome Webapps
jQtouch, Building Awesome Webapps
 
Going the extra mile in designing for the web
Going the extra mile in designing for the webGoing the extra mile in designing for the web
Going the extra mile in designing for the web
 
Twitter voor beginners
Twitter voor beginnersTwitter voor beginners
Twitter voor beginners
 
iPhone and Appstore
iPhone and AppstoreiPhone and Appstore
iPhone and Appstore
 
55 ways to get more energy
55 ways to get more energy55 ways to get more energy
55 ways to get more energy
 
Keypoint Beta 3
Keypoint Beta 3Keypoint Beta 3
Keypoint Beta 3
 

Dernier

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
Enterprise Knowledge
 

Dernier (20)

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
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
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
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
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
 
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...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
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
 

iPhone offline webapps

  • 1. How to build a offline webapp for the iPhone ... By Bert Timmermans
  • 2. Bert Timmermans Student Communicatie Multimedia & Design Freelance - Nocus Communication - Hasselt Web design / web development iPhone web development projects: • Keypoint Beta 3 • Checklist • ... Mail: me@berttimmermans.com Twitter: @berttimmermans Website: http://www.berttimmermans.com
  • 3. Overview Main introduction ✤ Step 1 The interface ✤ Step 2 The database ✤ Step 3 Making it available offline ✤
  • 4. Introduction Mobile Safari ✤ Html 5 & Javascript ✤ Local database ✤ Caching the webapp for offline use ✤
  • 6. Step 1 The interface Mobile interface ✤ iPhone optimization ✤ iPhone codes ✤ <!-- iPhone codes --> <link rel=quot;apple-touch-iconquot; href=quot;image/icon.pngquot;/> <meta name=quot;viewportquot; content=quot;width=device-width; initial-scale=1.0;quot; /> <meta name=quot;apple-mobile-web-app-capablequot; content=quot;yesquot; /> <meta names=quot;apple-mobile-web-app-status-bar-stylequot; content=quot;blackquot; />
  • 7. Step 1 The interface CSS 3 (-webkit-) support ✤ Example #object { position:absolute; left: 0px; -webkit-transition-property: left; -webkit-transition-duration: 0.5s, 0.5s; } #object.class { left: 10px; }
  • 8. Step 1 The interface Javascript solutions ✤ jQuery, mootools, ... ✤ Fixed header ✤ Rotation detection ✤ Location detection using free appstore app ✤ ... ✤
  • 9. Step 2 The database Clientside Javascript database ✤ Safari and other webkit based browsers like Google Chrome ✤ An option to sync with a online database ✤ MYSQL commands ✤ User can manage database using preferences ✤
  • 10. Step 2 The database Example code var db; try { if (window.openDatabase) { db = openDatabase(quot;Checklistquot;, quot;1.0quot;, quot;HTML5 Database APIquot;, 200000); if (!db) { alert(quot;Failed to open the databasequot;); } else{ var highestId = 0; } } else alert(quot;Couldn't open the database. Please try with a WebKitquot;); }
  • 11. Step 3 Caching the webapp Firefox en iPhone safari ✤ HTML 5 manifest file ✤ Example of a manifest file ✤ <html manifest=quot;main.manifestquot;> CACHE MANIFEST css/main.css images/main.png js/database.js
  • 12. Step 3 Caching the webapp IMPORTANT ! ✤ The manifest file has to have a text/cache-manifest MIME type Solution a .htacces AddType text/cache-manifest .manifest
  • 13. One more thing ... tinyurl.com/1morething
  • 14. Tweetwall Your mobile twitter wall berttimmermans.com/tweetwall
  • 16. Barcamp Antwerp 2009 was sponserd by