0
Web Apps
    KOIS
  2010.08.18
Web App vs Native App
• Web App            ?
  web app
  web app                    iTunes App Store

  Object-C


• Nativ...
Web App vs Native App
            Web App                                         Native App

          HTML, CSS, Javascr...
HTML5                               ?


•
                 iPhone, Android
                   HTML5
    WebKit

•
    iOS,...
HTML5   ?
HTML5   ?
HTML5                                                           ?


•   Even Google was not rich enough to support all of ...
HTML5 Key Elements for Mobile


• Offline        : LocalStorage, Web Database,
    App Cache

•               : Video, Audi...
HTML5 on Mobile

•             HTML5

•
•    Moblie      HTML5

•
HTML5 = HTML + CSS3 + JS API
JS API
• Client Side Storage
  - Web SQL Database
  - App Cache (cache-manifest)
  - Web Storage (localStorage, sessionSto...
HTML
• Semantics (New tags, Link Relations,
  Microdata)
• Accessibility (ARIA roles)
• Web Forms 2.0 (Input Fields)
• Mul...
CSS

• Typography
• Visuals
• Transitions, Transforms & Animations
iPhone Web App

•           iPhone
    - App Store
    - App + Web Hybrid
    - iPad               Web App
    - DashCode
...
Web App
• Online Web Application


• Offline Enabled Web Application
Web App
• Offline Web Application


• Hybrid Web Application
Web Apps On iPhone
iPhone Web App                                                          1

•                css
    <link rel=”stylesheet”...
iPhone Web App                                                            2
•   iPhone Browser         & viewport
    iPho...
iPhone Web App                                                        3
•   Safari UI (URL Bar, Button Bar)
    <meta name...
iPhone Web App                                                         4

•                (57x57)
    <link rel=”apple-to...
iPhone Web App                                                5
•                    Orientation
    function checkOrienta...
iPhone Web App   6
iPhone Web App   6
iPhone Web App   6
iPhone Web App   6
iPhone Web App   6
iPhone Web App                           7
• iPhone style UI library
  * jQTouch - http://jqtouch.com
  * iUI - http://iui...
iPhone Web App                                                           8
•
    <style type=”text/css” media=”screen”>@im...
iPhone Web App                                                        9
•   View
    <div id=”home”>
       <div class=”to...
iPhone Web App   10
Web app
Web app
Web app
Web app
Web app
Web app
Web app
Upcoming SlideShare
Loading in...5
×

Web app

3,783

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,783
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
93
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide



































  • Transcript of "Web app"

    1. 1. Web Apps KOIS 2010.08.18
    2. 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. 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. 4. HTML5 ? • iPhone, Android HTML5 WebKit • iOS, Android, Blackberry, , Windows Mobile, Windows Phone 7
    5. 5. HTML5 ?
    6. 6. HTML5 ?
    7. 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. 8. HTML5 Key Elements for Mobile • Offline : LocalStorage, Web Database, App Cache • : Video, Audio, Cnavas • : Advanced Forms • : GeoLocation
    9. 9. HTML5 on Mobile • HTML5 • • Moblie HTML5 •
    10. 10. HTML5 = HTML + CSS3 + JS API
    11. 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. 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. 13. CSS • Typography • Visuals • Transitions, Transforms & Animations
    14. 14. iPhone Web App • iPhone - App Store - App + Web Hybrid - iPad Web App - DashCode • Safari - Add to Home Screen
    15. 15. Web App • Online Web Application • Offline Enabled Web Application
    16. 16. Web App • Offline Web Application • Hybrid Web Application
    17. 17. Web Apps On iPhone
    18. 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. 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. 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. 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. 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. 23. iPhone Web App 6
    24. 24. iPhone Web App 6
    25. 25. iPhone Web App 6
    26. 26. iPhone Web App 6
    27. 27. iPhone Web App 6
    28. 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. 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. 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. 31. iPhone Web App 10
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×