SlideShare uma empresa Scribd logo
1 de 16
Baixar para ler offline
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

Mais conteúdo relacionado

Mais procurados

大众点评网 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
 

Mais procurados (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
 

Destaque

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
 

Destaque (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...
 

Semelhante a 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
 

Semelhante a 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
 

Mais 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
 

Último

Último (20)

🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
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...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
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
 
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
 
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
 
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
 
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
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
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...
 
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
 
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...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
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
 

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