Web app
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Web app

  • 4,376 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,376
On Slideshare
4,376
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
92
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide



































Transcript

  • 1. Web Apps KOIS 2010.08.18
  • 2. Web App vs Native App • Web App ? web app web app iTunes App Store Object-C • Native App ? Object-C iTunes App Store
  • 3. Web App vs Native App Web App Native App HTML, CSS, Javascript Objective-C(iPhone), Java(Android) XCode(iPhone), Eclipse(Android) , iUI, jQTouch... Cocoa Touch(iPhone), UI Framework(Android) Mac Mac (iPhone), Android App $99(iPhone) or $35(Android) - / ... App Store/Market / & (iPhone) Android/Blackberry
  • 4. HTML5 ? • iPhone, Android HTML5 WebKit • iOS, Android, Blackberry, , Windows Mobile, Windows Phone 7
  • 5. HTML5 ?
  • 6. HTML5 ?
  • 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
  • 9. HTML5 on Mobile • HTML5 • • Moblie HTML5 •
  • 10. HTML5 = HTML + CSS3 + JS API
  • 11. 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
  • 12. 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)
  • 13. CSS • Typography • Visuals • Transitions, Transforms & Animations
  • 14. iPhone Web App • iPhone - App Store - App + Web Hybrid - iPad Web App - DashCode • Safari - Add to Home Screen
  • 15. Web App • Online Web Application • Offline Enabled Web Application
  • 16. Web App • Offline Web Application • Hybrid Web Application
  • 17. Web Apps On iPhone
  • 18. 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) {}
  • 19. 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
  • 20. iPhone Web App 3 • Safari UI (URL Bar, Button Bar) <meta name=”apple-mobile-web-app-capable” content=”yes” /> / <meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> * * URL Bar window.addEventListener(‘load’, function() { setTimeout(scrollTo, 0, 0, 1); }, false); * status-bar-style: default, black, black-translucent( ) * UI Fullscreen if (navigator.standalone) { alert(‘ ’); }
  • 21. iPhone Web App 4 • (57x57) <link rel=”apple-touch-icon” href=”apple-touch-icon.png” /> <link rel=”apple-touch-icon” href=”apple-touch-icon-precomposed.png” /> • Startup <link rel=”apple-touch-startup-image” href=”/startup.png” /> * Home
  • 22. 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’); } }
  • 23. iPhone Web App 6
  • 24. iPhone Web App 6
  • 25. iPhone Web App 6
  • 26. iPhone Web App 6
  • 27. iPhone Web App 6
  • 28. iPhone Web App 7 • iPhone style UI library * jQTouch - http://jqtouch.com * iUI - http://iui-js.org * WebApp.Net - http://webapp-net.com
  • 29. iPhone Web App 8 • <style type=”text/css” media=”screen”>@import “jqtouch.min.css”;</style> <style type=”text/css” media=”screen”>@import “themes/apple/ theme.min.css”;</style> <script src=”jquery.1.3.2.min.js” type=”text/javascript” charset=”utf-8”></ sript> <script src=”jqtouch.min.js” type=”text/javascript” charset=”utf-8”></ script> <script type=”text/javascript”> var jQT = $.jQTouch({ icon: ‘icon.png’, statusBar: ‘black’ }); </script>
  • 30. iPhone Web App 9 • View <div id=”home”> <div class=”toolbar”> <h1>CPCGUARD</h1> </div> <ul> <li class=”arrow”><a href=”#content”>CPCGUARD </a></li> <li class=”arrow”><a href=”#content”>S-POPUP</a></li> <li class=”arrow”><a href=”#content”>S-ON</a></li> </ul> </div> <div id=”content”> <div class=”toolbar”> <h1>CONTENT</h1> <a class=”button back” href=”#”>Back</a> </div> </div>
  • 31. iPhone Web App 10