• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 를 이용한 하이브리드앱 제작
 

HTML5 를 이용한 하이브리드앱 제작

on

  • 14,638 views

HTML5 를 이용한 하이브리드앱 제작

HTML5 를 이용한 하이브리드앱 제작

@ohmyzany
http://zany.kr

Statistics

Views

Total Views
14,638
Views on SlideShare
12,592
Embed Views
2,046

Actions

Likes
27
Downloads
0
Comments
1

28 Embeds 2,046

http://home.zany.kr 681
http://webkebi.zany.kr:9003 358
http://www.androidside.com 268
http://l2j.co.kr 261
http://webkebi.zany.kr 147
http://pheadra.tistory.com 125
http://blog.kinorama.com 53
http://heej.net 46
http://pkcentum.tistory.com 36
http://duraboys.tistory.com 22
http://www.heej.net 17
http://webcache.googleusercontent.com 4
url_unknown 4
http://www.bookgrapher.com 3
http://androidside.com 3
http://www.hanrss.com 3
http://www.sayallapp.com 2
http://www.forcert.com 2
http://wiim.org 2
http://1.234.79.105 1
http://localhost 1
http://blog.naver.com 1
http://twitter.com 1
http://www.koreaside.com 1
http://badaside.com 1
http://www.badaside.com 1
http://api6.forcert.com 1
http://www.l2j.co.kr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

HTML5 를 이용한 하이브리드앱 제작 HTML5 를 이용한 하이브리드앱 제작 Presentation Transcript

  • W3 iP ho ne C ery bile HTML5 jQu 5 MoPh Lon TM (@ohmyzany) eG ap
  • HTML5 ...
  • HISTORY OF HTML
  • HISTORY OF HTML1989 Tim Berners-Lee, HTML Tags CERN1994 May The First WWW conference Geneva1994 Sep IETF sets up HTML working group1995 Nov HTML 2.0 IETF1997 Jan HTML 3.2 W3C1997 Dec HTML 4.0 W3C1999 Dec HTML 4.01 W3C2000 XHTML 1.0 W3C2002 XHTML 2.0 W3C2004 Web Applications 1.0 WHATWG2007 HTML5 Working Group W3C2010 Oct HTML5 Last Call Working Draft W3C
  • HISTORY OF HTML
  • HISTORY OF HTML
  • HTML5 Junehttp://beta.html5test.com November
  • HTML5 IE7 IE8 IE9 FireFox 4.0b7 Opera 11 Alpha Chrome 8.0 Safari 5.0 iOS 4.2.1 Android 2.2 0 50 100 150 200 250 300 Junehttp://beta.html5test.com November
  • HTML5 0 IE7 27 IE8 0 IE9 139 FireFox 4.0b7 129 Opera 11 Alpha 202 Chrome 8.0 212 Safari 5.0 125 iOS 4.2.1 178 Android 2.2 0 50 100 150 200 250 300 Junehttp://beta.html5test.com November
  • HTML5 0 IE7 17 27 IE8 27 0 IE9 80 139 FireFox 4.0b7 249 129 Opera 11 Alpha 223 202 Chrome 8.0 252 212 Safari 5.0 220 125 iOS 4.2.1 198 178 Android 2.2 178 0 50 100 150 200 250 300 Junehttp://beta.html5test.com November
  • HTML5✤ HTML5 - http://bit.ly/chh79p✤ - http://beta.html5test.com (http:// html5test.com)
  • HTML5✤ HTML5 - http://bit.ly/chh79p✤ - http://beta.html5test.com (http:// html5test.com)
  • HTML5 OVERVIEW
  • DOCTYPE <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!DOCTYPE html>
  • STRUCTURAL ELEMENTSBefore After http://html5doctor.com/designing-a-blog-with-html5/
  • <article> <mark> <aside> <meter><command> <nav> <details> <progress><summary> <ruby> <figure> <rt><figcaption> <rp> <footer> <section> <header> <time> <hgroup> <wbr>
  • For multimedia content, sounds, music or<audio> other audio streams. For video content, such as a movie clip or<video> other video streams. For media resources for media elements,<source> defined inside video or audio elements.<embed> For embedded content, such as plug-in.
  • FORM<canvas> For making graphics with a script.<datalist> A list of options for input values.<keygen> Generate keys to authenticate users. For different types of output, such as<output> output written by a script.
  • INPUT TYPE tel week search time url datetime-local email numberdatetime range date color month
  • HTML5 Web Form Web SQL Database Canvas / SVG Local Storage Audio / Video Web Workers Geolocation Web SocketOffline web apps
  • HTML5 Web Form Web SQL Database Canvas / SVG Local Storage Audio / Video Web Workers Geolocation Web SocketOffline web apps ● ● ● ● ●
  • DEVICE APIS AND POLICY WORKING Calendar Contacts Address-book Camera Messaging and microphone (SMS, MMS, Emails) System info Device Interfaces (CPU, Network, etc) Application Launcher (KangChan Lee, WonSuk Lee) ● ● ●
  • DEVICE APIS AND POLICY WORKING Calendar Contacts Address-book Camera Messaging and microphone (SMS, MMS, Emails) System info Device Interfaces (CPU, Network, etc) Application Launcher (KangChan Lee, WonSuk Lee) ● ● ● Device APIs and Policy Working Group Meeting The DAP WG is planning to have a F2F in Seoul, South Korea on March 15-18 2011, hosted by ETRI.
  • HTML + NATIVE SDKHYBRID APP
  • ?✤ , Native SDK .✤ , Native SDK .
  • ✤ iPhone Safari http://splax.net/m http://www.touchapp.co.uk/iphone
  • ✤ , . . .✤ . Native .
  • Native SDK HTML, CSS, JavaScript (iPhone SDK, Android SDK...) Native SDK (Native Native )Native Browser Native
  • HTML, CSS, JavaScript
  • HTML, CSS, JavaScript JQTouch, JQueryMobile
  • Native Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • iPhone SDK Android SDKNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • iPhone SDK Android SDK Native AppNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • iPhone SDK Android SDK Native AppNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • iPhone SDK Android SDK Native App App StoreNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • iPhone SDK Android SDK Native App App StoreNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • iPhone SDK Android SDK Native App App StoreNative Framework HTML, CSS, JavaScript JQTouch, JQueryMobile
  • ✤ (iPhone, Android, Blackberry, Tablet PC...)✤ iPhone / iPad Native SDK Macintosh .✤ Android Windows, Mac, Linux .✤ Blackberry Windows . Macintosh .
  • ✤ Xcode 3.2.4 iOS4✤ Eclipse Galileo✤ PhoneGap Framework✤ JQuery Framework (for JQueryMobile)✤ JQueryMobile or JQTouch Framework✤ Android SDK & Blackberry SDK
  • PHONEGAPBUILDING CROSS-PLATFORM MOBILE APPS IN HTML, CSS AND JAVASCRIPT
  • PHONEGAP ?✤ HTML, CSS, JavaScript . .✤ HTML5 . , .
  • PHONEGAP
  • PHONEGAP - IPHONE
  • PHONEGAP - IPHONE
  • PHONEGAP - ANDROID
  • JQUERY MOBILE TOUCH-OPTIMIZED WEB FRAMEWORK FOR SMARTPHONES & TABLETS
  • JQUERY MOBILE✤ JavaScript Framework.✤ UI Layout . Theme .✤ Event . Tap, Swipe, Orientation, Scroll...✤ JQuery Framework Ajax, Animation, Transitions, Dialogs...
  • JQUERY HYBRID APP DEMO
  • JQUERY HYBRID APP DEMO
  • JQUERY HYBRID APP DEMO
  • JQUERY HYBRID APP DEMO
  • JQUERY HYBRID APP DEMO
  • HTML5 WEBSOCKET A TECHNOLOGY PROVIDING FOR BI-DIRECTIONAL, FULL-DUPLEX COMMUNICATIONS CHANNELS,OVER A SINGLE TRANSMISSION CONTROL PROTOCOL (TCP) SOCKET
  • ?✤ TCP Socket IETF .✤ 1 TCP .✤ , , .✤ JavaScript setInterval() Reverse Ajax (Comet) .
  • CASE #1. WAS .
  • CASE #2. WAS
  • WebSocket Client API Working Draft
  • WebSocket Client API Editor’s Draft
  • WebSocket Client Sample
  • WebSocket ServerOpening handshake