iPhone offline webapps

•

25 recomendaciones•8,512 vistas

Home

Tecnología Noticias y política

How to build a
ofﬂine 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 oﬄine
✤

Introduction
Mobile Safari
✤

Html 5 & Javascript
✤

Local database
✤

Caching the webapp for ofﬂine 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 ﬁle
✤

Example of a manifest ﬁle
✤

<html manifest=quot;main.manifestquot;>

CACHE MANIFEST

css/main.css
images/main.png
js/database.js

Step 3 Caching the webapp
IMPORTANT !
✤

The manifest ﬁle 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

Más contenido relacionado

La actualidad más candente

Frontend Crash CourseTJ Stalcup

Drupal Day 2011 - Features: una vita feliceDrupalDay

Mashup Talk NpoxMartijn Pannevis

Jump start php environmentAdrian Sandu

Mastermind 10th march full page cacheUnderstandingE

Word camp raleigh presentation 11 23-13Melodie Laylor

大众点评网 Web开发之路alcoholwang

Getting Started: The InstallationIbrahim Abdel Fattah Mohamed

Roel Hartman - HTML5 WidescreenGetting value from IoT, Integration and Data Analytics

Prawn: Creating PDF in RubyTom Klaasen

Doing Modern Web, aka JavaScript and HTML5 in the EnterpriseChris Love

How I Learned to Stop Worrying and Love the InternetNoah Brier

Chrome and FlashChristopher Casal

Importance of-website-backupsmymlmfinder

Web application introTobias Pfeiffer

My Learning Style Presentationguest16e403

Html5 inputsChris Love

La actualidad más candente (17)

Frontend Crash Course

Drupal Day 2011 - Features: una vita felice

Mashup Talk Npox

Jump start php environment

Mastermind 10th march full page cache

Word camp raleigh presentation 11 23-13

大众点评网 Web开发之路

Getting Started: The Installation

Roel Hartman - HTML5 Widescreen

Prawn: Creating PDF in Ruby

Doing Modern Web, aka JavaScript and HTML5 in the Enterprise

How I Learned to Stop Worrying and Love the Internet

Chrome and Flash

Importance of-website-backups

Web application intro

My Learning Style Presentation

Html5 inputs

Destacado

Lee.Portfolio 09leesalcone

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 ...Oboni Riskope Associates Inc.

Play the gameR. RAVINDRA KUMAR CHIEF MENTOR

Your powe2sR. RAVINDRA KUMAR CHIEF MENTOR

Blerta Interpreter 1Blerta

kinecaterina1989

How To Avoid AlzheimersHANISH BABU

Innovation Benefits Realization for Industrial Research (Part-1)Iain Sanders

Drenajes en cirugia biliopancreaticaRogelio Flores Valencia

FlowersBrian King

Communicating Bad News To CustomersMike Hickinbotham - SocialCorp.com.au

IPCC2010-1Debopriyo Roy

Tolerability and Decision Making DiscussionOboni Riskope Associates Inc.

Design Thinking in EFL ContextDebopriyo Roy

The Beatlessilvia shapiro

Monica Cabbler - ProfileMonica Cabbler

Kenenisargana

Nastas Lecture Graduate School of Business Michgan State UniversityThomas Nastas

Scientific Literacy, Attitudes towards Science, Religiosity and Superstitious...Eugen Glavan

Destacado (20)

Lee.Portfolio 09

Convegno Polizie Locali Sicurezza Stradale Riccione 09 09

Riskope 5 days course on Risk and Crisis Management for top managers and key ...

Play the game

Your powe2s

Blerta Interpreter 1

kine

How To Avoid Alzheimers

Innovation Benefits Realization for Industrial Research (Part-1)

Drenajes en cirugia biliopancreatica

Flowers

Communicating Bad News To Customers

IPCC2010-1

Tolerability and Decision Making Discussion

Design Thinking in EFL Context

The Beatles

Monica Cabbler - Profile

Kenenisa

Nastas Lecture Graduate School of Business Michgan State University

Scientific Literacy, Attitudes towards Science, Religiosity and Superstitious...

Similar a iPhone offline webapps

What’s New in ASP.NET 4Todd Anglin

IE 8 et les standards du Web - Chris Wilson - Paris Web 2008Association Paris-Web

Going Live! with CometSimon Willison

HTML5 on MobileAdam Lu

IPhone Web Development With Grails from CodeMash 2009Christopher Judd

Internet Explorer 8 for Developers by Christian ThilmanyChristian Thilmany

Ajax to the Moondavejohnson

7 Habits of Exceptional PerformanceNicole Sullivan

WebTest - Efficient Functional Web Testing with HtmlUnit and Beyondmguillem

ICEfaces and JSF 2.0 on GlassFishEduardo Pelegri-Llopart

Mobile web-debugFINN.no

Creating Rajanikant Powered Sitemarkandey

Mobile is slow - Over the Air 2013Jon Arne Sæterås

Silver Light By Nyros DeveloperNyros Technologies

Moving from Web 1.0 to Web 2.0Estelle Weyl

Website & Internet + Performance testingRoman Ananev

Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Doris Chen

Ajax Tutorialoscon2007

Html 5 in a big nutshellLennart Schoors

DODN2009 - Jump Start SilverlightClint Edmonson

Similar a iPhone offline webapps (20)

What’s New in ASP.NET 4

IE 8 et les standards du Web - Chris Wilson - Paris Web 2008

Going Live! with Comet

HTML5 on Mobile

IPhone Web Development With Grails from CodeMash 2009

Internet Explorer 8 for Developers by Christian Thilmany

Ajax to the Moon

7 Habits of Exceptional Performance

WebTest - Efficient Functional Web Testing with HtmlUnit and Beyond

ICEfaces and JSF 2.0 on GlassFish

Mobile web-debug

Creating Rajanikant Powered Site

Mobile is slow - Over the Air 2013

Silver Light By Nyros Developer

Moving from Web 1.0 to Web 2.0

Website & Internet + Performance testing

Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3

Ajax Tutorial

Html 5 in a big nutshell

DODN2009 - Jump Start Silverlight

Más de Home

Gotta code them all, a Pokémon and HTML5 love story!Home

jQtouch, Building Awesome WebappsHome

Going the extra mile in designing for the webHome

Twitter voor beginnersHome

iPhone and AppstoreHome

55 ways to get more energyHome

Keypoint Beta 3Home

Más de Home (7)

Gotta code them all, a Pokémon and HTML5 love story!

jQtouch, Building Awesome Webapps

Going the extra mile in designing for the web

Twitter voor beginners

iPhone and Appstore

55 ways to get more energy

Keypoint Beta 3

Último

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10

Why Teams call analytics are critical to your entire businesspanagenda

Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya

Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Principled Technologies

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j

The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous

GenAI Risks & Security Meetup 01052024.pdflior mazor

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

Real Time Object Detection Using Open CVKhem

From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez

Scaling API-first – The story of a global engineering organizationRadu Cotescu

Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

presentation ICT roal in 21st century educationjfdjdjcjdnsjd

Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer

iPhone offline webapps

1. How to build a ofﬂine 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 oﬄine ✤

4. Introduction Mobile Safari ✤ Html 5 & Javascript ✤ Local database ✤ Caching the webapp for ofﬂine use ✤

5. Example Checklist berttimmermans.com/checklist

6. Step 1 The interface Mobile interface ✤ iPhone optimization ✤ 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 ﬁle ✤ Example of a manifest ﬁle ✤ <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 ﬁle 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

15. The end

16. Barcamp Antwerp 2009 was sponserd by

iPhone offline webapps

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Destacado

Destacado (20)

Similar a iPhone offline webapps

Similar a iPhone offline webapps (20)

Más de Home

Más de Home (7)

Último

Último (20)

iPhone offline webapps