SlideShare a Scribd company logo
1 of 16
Download to read 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

More Related Content

What's hot

Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash CourseTJ Stalcup
 
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 feliceDrupalDay
 
Jump start php environment
Jump start php environmentJump start php environment
Jump start php environmentAdrian Sandu
 
Mastermind 10th march full page cache
Mastermind 10th march   full page cacheMastermind 10th march   full page cache
Mastermind 10th march full page cacheUnderstandingE
 
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-13Melodie Laylor
 
大众点评网 Web开发之路
大众点评网 Web开发之路大众点评网 Web开发之路
大众点评网 Web开发之路alcoholwang
 
Prawn: Creating PDF in Ruby
Prawn: Creating PDF in RubyPrawn: Creating PDF in Ruby
Prawn: Creating PDF in RubyTom Klaasen
 
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 EnterpriseChris Love
 
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 InternetNoah Brier
 
Importance of-website-backups
Importance of-website-backupsImportance of-website-backups
Importance of-website-backupsmymlmfinder
 
My Learning Style Presentation
My Learning Style PresentationMy Learning Style Presentation
My Learning Style Presentationguest16e403
 

What's hot (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
 

Viewers also liked

Lee.Portfolio 09
Lee.Portfolio 09Lee.Portfolio 09
Lee.Portfolio 09leesalcone
 
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 09Oboni Riskope Associates Inc.
 
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 ...Oboni Riskope Associates Inc.
 
Blerta Interpreter 1
Blerta Interpreter 1Blerta Interpreter 1
Blerta Interpreter 1Blerta
 
How To Avoid Alzheimers
How To Avoid AlzheimersHow To Avoid Alzheimers
How To Avoid AlzheimersHANISH BABU
 
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 ContextDebopriyo Roy
 
Monica Cabbler - Profile
Monica Cabbler - ProfileMonica Cabbler - Profile
Monica Cabbler - ProfileMonica Cabbler
 
Kenenisa
KenenisaKenenisa
Kenenisargana
 
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 UniversityThomas Nastas
 
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
 

Viewers also liked (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...
 

Similar to Build offline iPhone webapps

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 4Todd Anglin
 
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 2008Association Paris-Web
 
Going Live! with Comet
Going Live! with CometGoing Live! with Comet
Going Live! with CometSimon Willison
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on MobileAdam Lu
 
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 2009Christopher Judd
 
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 ThilmanyChristian Thilmany
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moondavejohnson
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan
 
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 Beyondmguillem
 
Mobile web-debug
Mobile web-debugMobile web-debug
Mobile web-debugFINN.no
 
Creating Rajanikant Powered Site
Creating Rajanikant Powered SiteCreating Rajanikant Powered Site
Creating Rajanikant Powered Sitemarkandey
 
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 2013Jon Arne Sæterås
 
Silver Light By Nyros Developer
Silver Light By Nyros DeveloperSilver Light By Nyros Developer
Silver Light By Nyros DeveloperNyros Technologies
 
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.0Estelle Weyl
 
Website & Internet + Performance testing
Website & Internet + Performance testingWebsite & Internet + Performance testing
Website & Internet + Performance testingRoman Ananev
 
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 & CSS3Doris Chen
 
Ajax Tutorial
Ajax TutorialAjax Tutorial
Ajax Tutorialoscon2007
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
DODN2009 - Jump Start Silverlight
DODN2009 - Jump Start SilverlightDODN2009 - Jump Start Silverlight
DODN2009 - Jump Start SilverlightClint Edmonson
 

Similar to Build offline iPhone 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
 

More from Home

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!Home
 
jQtouch, Building Awesome Webapps
jQtouch, Building Awesome WebappsjQtouch, Building Awesome Webapps
jQtouch, Building Awesome WebappsHome
 
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 webHome
 
Twitter voor beginners
Twitter voor beginnersTwitter voor beginners
Twitter voor beginnersHome
 
iPhone and Appstore
iPhone and AppstoreiPhone and Appstore
iPhone and AppstoreHome
 
55 ways to get more energy
55 ways to get more energy55 ways to get more energy
55 ways to get more energyHome
 
Keypoint Beta 3
Keypoint Beta 3Keypoint Beta 3
Keypoint Beta 3Home
 

More from 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
 

Recently uploaded

Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 

Recently uploaded (20)

Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 

Build offline iPhone 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