This document compares web apps and native apps for mobile devices. It discusses that web apps are developed with HTML, CSS and JavaScript and can be accessed through any web browser, while native apps are developed through platforms like iOS and Android using languages like Objective-C and Java. It also mentions that HTML5 aims to make web apps work more like native apps by adding features like offline storage, multimedia playback and geolocation to web browsers. Finally, it provides examples of how to make web apps for iPhone that utilize features like touch icons, viewport settings and JavaScript libraries to mimic the look and feel of native iPhone apps.
7. HTML5 ?
• Even Google was not rich enough to support all of the different mobile
platforms from Apple’s AppStore to those of the BlackBerry, Windows
Mobile, Android and the many variations of the Nokia platform
- Vic Gundotra, Google Engineering VP
• 2010년 6월 24일에 공지된 행정안전부 고시 “제 2010-40호”
국민들이 다양한 모바일 기기를 사용할 수 있도록 ‘모바일 앱(App)’ 방
식보다 ‘모바일 웹(Web)‘ 방식을 표준으로 권고
모바일 웹 방식 서비스 개발을 위한 기술 표준지침 마련
3
8. HTML5 Key Elements for Mobile
• Offline : LocalStorage, Web Database,
App Cache
• : Video, Audio, Cnavas
• : Advanced Forms
• : GeoLocation
12. JS API
• Client Side Storage
- Web SQL Database
- App Cache (cache-manifest)
- Web Storage (localStorage, sessionStorage)
• Communication
- Web Sockets
- Web Workers
• Desktop experience
- Notifications
- Drag & Drop API
• Geolocation
13. HTML
• Semantics (New tags, Link Relations,
Microdata)
• Accessibility (ARIA roles)
• Web Forms 2.0 (Input Fields)
• Multimedia (Audio Tag,Video Tag)
• 2D & 3D drawing (Canvas, WebGL, SVG)
19. iPhone Web App 1
• css
<link rel=”stylesheet” type=”text/css” href=”iphone.css” media=”only
screen and (max-width: 480px)” />
<link rel=”stylesheet” type=”text/css” href=”desktop.css” media=”screen
and (min-width: 481px)” />
• User Agent
Mozilla/5.0 (iPad; U CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML,
like Gecko) Version 3.0 Mobile/4A93 Safari/419.3
Mozilla/5.0 (iPhone; U CPU like Mac OS X; en) AppleWebKit/420+
(KHTML, like Gecko) Version 3.0 Mobile/1A543 Safari/419.3
Mozilla/5.0 (iPod; U CPU OS 3_2 like Mac OS X; en) AppleWebKit/
531.21.10 (KHTML, like Gecko) Version 4.0.4 Mobile/7B334B Safari/531.21
javascript : if((navigator.userAgent.match(/iPhone/i)) {}
php : if(strpos($_SERVER[‘HTTP_USER_AGENT’], ‘iPod’) !== false) {}
20. iPhone Web App 2
• iPhone Browser & viewport
iPhone : 320 x 480px
Status Bar : 20px
URL Bar : 60px
: 320x356px
Viewport : 980px
<meta name=‘viewport‘
content=‘width=device-width;
initial-scale=1.0;
user-scalable=no’ />
Button Bar : 44px
23. iPhone Web App 5
• Orientation
function checkOrientation() {
switch (window.orientation) {
case 0: alert(‘Orientation: Portrait’); break;
case 90:
case -90: alert(‘Orientation: Landscape’); break;
}
}
• Online
function checkOnline() {
if (navigator.onLine) {
alert(‘There is a network connection’);
else {
alert(‘There is no network connection’);
}
}