HTML5 소개 및 배우기- HTML5 Open Conference

19,080 views

Published on

Published in: Technology
6 Comments
25 Likes
Statistics
Notes
No Downloads
Views
Total views
19,080
On SlideShare
0
From Embeds
0
Number of Embeds
7,410
Actions
Shares
0
Downloads
2,250
Comments
6
Likes
25
Embeds 0
No embeds

No notes for slide

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

×