Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 소개 및 배우기- HTML5 Open Conference

19,442 views

Published on

Published in: Technology

HTML5 소개 및 배우기- HTML5 Open Conference

  1. 1. 요즘 Adobe랑 사이가 안 좋다며?
  2. 2. HTML5 때문에
  3. 3. 그거 먹는거야? 나도몰라 ㅋㅋㅋ
  4. 4. Web Hypertext Application Technology Working Group
  5. 5. DOCTYPE HTML 4.01 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html>
  6. 6. 구조적 마크업 div id=“header” div id=“nav” div id=“content” div id=“menu” div id=“footer” id=“footer”
  7. 7. <header> <nav> <article> <aside> <footer>
  8. 8. Video
  9. 9. Canvas
  10. 10. WebGL
  11. 11. Web Workers
  12. 12. 웹서비스 시대 (1990년대 중반) CGI <html> <title> <?=$title?> </title> Internet <body> DB <font size=2>Hello! World</font> <?=mysql_query(“SELECT name…)?> DB </body> </html> Plug-in
  13. 13. 웹 표준 시대 (2000년대 중반) ET ing uts M S .N S pr Str Model Internet DB DB View Plug-in <! DOCTYPE XHTML…> <title>$title</title> XHT ML Structure <body> <h1>Hello, Wolrd</h1> </body> </html> ay o ut Presentation body { font-size: 9pt;} SL h1 {color:blue;} CS Function popup(url) { cr ipt Behavior } window.open(url); MS DO Controller
  14. 14. 웹2.0의 시대 (2000년대 후반) Internet Model DB DB Plug-in View Structure {"Name": "Cheeso", Ajax OpenAPI "Rank": 7} Presentation ails O nR ery by jQu Ru Controller Behavior
  15. 15. HTML5의 시대 (2010년대 초반) a ge S tor b We as C anv Local Local Plug-in Storage nd ra Storage asa ase L e C Hb We bG a ch pC Ap NoSQL Internet ML 5 Structure HT Ajax RESTful {"Name": "Cheeso", disk disk t "Rank": 7} o ck e bS We CS S3 Presentation I Cloud rAP e cto Computing Se l n tio Behavior Ge ol oca WS z ur e rop nA MS A g &D m azo Dra A
  16. 16. HTML5인 것과 아닌 것 HTML5 W/G Web Apps W/G – HTML5 – Server-Sent Events – Canvas 2D – WebSocket – Microdata – Web Storage – RDFa – Web SQL Database – AppCache – IndexedDB – Geolocation
  17. 17. kr.html5doctor.com
  18. 18. html5gallery.com
  19. 19. html5test.com
  20. 20. Modernizr
  21. 21. html5demos.com
  22. 22. html5rocks.com
  23. 23. hacks.mozilla.or.kr
  24. 24. webstandards.or.kr/html5
  25. 25. Books
  26. 26. Community
  27. 27. Canvas √ √ √ √ √ √ √ √ Video √ √ √ √ √ √ √ √ (Geolocation) √ √ √ √ √ √ iPhone √ √ App Cache √ √ √ √ √ √ √ √ mobile Database √ √ √ √ √ √ √ √ mobile Workers √ √ √ √ √ √ √ √ mobile
  28. 28. Speaking from personal experience, I've had a lot more fun writing an HTML5 application based on CSS3, the database API, and jQuery that runs out of the box on all of the hot mobile platforms than I ever would have had writing some silly Objective C app for a locked down App Store (or Java for an open one).
  29. 29. HTML 5 + CSS 3 + Apps Cache + Database API

×