HTML5 Standard             Sigong Media &             KAIST 소프트웨어 대학원             김평화 20113833             2012-04-04
HTML5 StandardTable of contents              • Overview                 –   HTML5 ?                 –   History           ...
HTML5 StandardOverview• HTML5 ?  – New standard of WWW core markup language  – Reducing Plug-in dependence and supporting ...
OverviewHistory• History of HTML   –   1991, HTML   –   1994, HTML2   –   1996, CSS1, Javascript   –   1997, HTML4   –   1...
OverviewCharacteristics • REALTIME / COMMUNICATION                • OFFLINE / STORAGE                    • FILE / HARDWARE...
OverviewComposition         = Markup + Javascript API + CSS3                     -5-
HTML5 StandardRenewed Points           • Markup             – Downward Compatibility             – Simplification         ...
Renewed PointsMarkup• Downward Compatibility   – 현재 브라우저의 작동 방식 또는 개발 상황을 수용        ⇒   cf. XHTML 2.0• Simplification   – ...
Renewed PointsMarkup• Contents Model   –   Flow : Most of   –   Heading : hgroup, h1, …   –   Sectioning : article, aside,...
Renewed PointsMarkup• Semantics Markup   – Structural Elements        ⇒   nav, article, section, aside, header, footer    ...
Renewed PointsMarkup• Graphics & Multimedia Markup   – embed, audio, video       ⇒   ogg/theora vs. WebM vs. H.264       ⇒...
Renewed PointsMarkup• Form Control Markup   – input       ⇒   Various types       ⇒   autofocus, placeholder, required, et...
Renewed PointsMarkup• Interactive Markup   – progress, meter   – datalist   – details, summary                        - 12 -
HTML5 StandardRenewed Points           • Markup           • Javascript API             – Offline / Storage             – R...
Renewed PointsJavascript API• Offline / Storage   – Web Storage       ⇒   LocalStorage, SessionStorage   – Web SQL Databas...
Renewed PointsJavascript API• Realtime / Communication   – Web Workers   – WebSocket       ⇒   HTTP의 한계   – Notifications ...
Renewed PointsJavascript API• File / Hardware Access   – Native Drag & Drop   – Desktop Drag-In/Out (File API)   – FileSys...
Renewed PointsJavascript API• Nuts & Bolts   – New Selectors       ⇒   Finding elements by class (DOM)       ⇒   Finding e...
HTML5 StandardRenewed Points            • Markup            • Javascript API            • CSS3                    - 18 -
Renewed PointsCSS3• Programming-liked factors• Webfonts• Various Effects & Animations   – http://slides.html5rocks.com/#cs...
HTML5 StandardWeb Standard• HTML5 W/G           • Web Applications W/G  –   HTML5                –   Server-sent Events  –...
HTML5 StandardArchitecture• 기존               - 21 -
HTML5 StandardArchitecture• HTML5-based                - 22 -
HTML5 StandardReferences• Standard Documents   – http://www.w3.org/TR/html5/ : HTML5 Working draft by W3C   – http://www.w...
HTML5 StandardReferences• Showcases   – http://html5gallery.com/ : HTML5 Set of showcase   – http://www.apple.com/html5/ :...
Upcoming SlideShare
Loading in...5
×

HTML5 표준 소개

1,618

Published on

HTML5에 대한 간단한 소개

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,618
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 표준 소개

  1. 1. HTML5 Standard Sigong Media & KAIST 소프트웨어 대학원 김평화 20113833 2012-04-04
  2. 2. HTML5 StandardTable of contents • Overview – HTML5 ? – History – Characteristics – Composition • Renewed Points – Markup – Javascript API – CSS3 • Architecture • References -1-
  3. 3. HTML5 StandardOverview• HTML5 ? – New standard of WWW core markup language – Reducing Plug-in dependence and supporting desktop experience through web – Previous Standard ⇒ HTML 4.01 ⇒ XHTML 1.0 ⇒ DOM Level 2 HTML -2-
  4. 4. OverviewHistory• History of HTML – 1991, HTML – 1994, HTML2 – 1996, CSS1, Javascript – 1997, HTML4 – 1998, CSS2 – 2000, XHTML1 – 2004, 새로운 HTML 표준 착수 (W3C) – 2005, W3C vs. Browser companies ⇒ WHATWG(Web Hypertext Application Technology Working Group) 민간 기구로 독립 – 2007, 다시 병합 ⇒ 다섯 개의 주요 브라우저 회사 모두 참여 – 2008, First public working draft – 2009, Last call for HTML5 working draft – 2012, CR(Candidate Recommendation) 예정 – 2022, PR(Proposed Recommendation) 예정 – ? , REC(Recommendation) -3-
  5. 5. OverviewCharacteristics • REALTIME / COMMUNICATION • OFFLINE / STORAGE • FILE / HARDWARE ACCESS • BOLTS & NUTS • CSS3 STYLING • MULTIMEDIA • 3D GRAPHICS / EFFECTS • SEMANTICS -4-
  6. 6. OverviewComposition = Markup + Javascript API + CSS3 -5-
  7. 7. HTML5 StandardRenewed Points • Markup – Downward Compatibility – Simplification – Content Model – Semantics – Graphics / Multimedia – Form Control – Interactive • Javascript API • CSS3 -6-
  8. 8. Renewed PointsMarkup• Downward Compatibility – 현재 브라우저의 작동 방식 또는 개발 상황을 수용 ⇒ cf. XHTML 2.0• Simplification – HTML5 DTD ⇒ <!DOCTYPE html> – Character set ⇒ Encoding priority 1. HTTP header 2. Unicode BOM(Byte Order Mark) 3. Meta element ⇒ <meta charset=“UTF-8”> – style, script의 default type -7-
  9. 9. Renewed PointsMarkup• Contents Model – Flow : Most of – Heading : hgroup, h1, … – Sectioning : article, aside, … – Embedded : video, canvas, … – Phrasing : br, time, … – Interactive : button, details, … – Metadata : command, meta, … – Palpable : header, footer, … -8-
  10. 10. Renewed PointsMarkup• Semantics Markup – Structural Elements ⇒ nav, article, section, aside, header, footer (과거 : div, span, id, calss) ⇒ hgroup, h1~h6 – Descriptive link relations – Microdata, RDFa -9-
  11. 11. Renewed PointsMarkup• Graphics & Multimedia Markup – embed, audio, video ⇒ ogg/theora vs. WebM vs. H.264 ⇒ source 태그의 다중 선언 – canvas : Bitmap – svg : Vector – webgl : 3D - 10 -
  12. 12. Renewed PointsMarkup• Form Control Markup – input ⇒ Various types ⇒ autofocus, placeholder, required, etc. – No server connection ⇒ Error checking ⇒ Event generating - 11 -
  13. 13. Renewed PointsMarkup• Interactive Markup – progress, meter – datalist – details, summary - 12 -
  14. 14. HTML5 StandardRenewed Points • Markup • Javascript API – Offline / Storage – Realtime / Communication – File / Hardware Access – Nuts & Bolts • CSS3 - 13 -
  15. 15. Renewed PointsJavascript API• Offline / Storage – Web Storage ⇒ LocalStorage, SessionStorage – Web SQL Database – IndexedDB – Application Cache - 14 -
  16. 16. Renewed PointsJavascript API• Realtime / Communication – Web Workers – WebSocket ⇒ HTTP의 한계 – Notifications - 15 -
  17. 17. Renewed PointsJavascript API• File / Hardware Access – Native Drag & Drop – Desktop Drag-In/Out (File API) – FileSystem APIs ⇒ Sandboxed file system – Geolocation – Device Orientation – Speech Input - 16 -
  18. 18. Renewed PointsJavascript API• Nuts & Bolts – New Selectors ⇒ Finding elements by class (DOM) ⇒ Finding elements by CSS syntax – Custom data-* attributes ⇒ Define, store, and retrieve custom data on the DOM – Element.classList ⇒ document.querySelector(#main).classList; – History API ⇒ Remember event states from users - 17 -
  19. 19. HTML5 StandardRenewed Points • Markup • Javascript API • CSS3 - 18 -
  20. 20. Renewed PointsCSS3• Programming-liked factors• Webfonts• Various Effects & Animations – http://slides.html5rocks.com/#css3-title - 19 -
  21. 21. HTML5 StandardWeb Standard• HTML5 W/G • Web Applications W/G – HTML5 – Server-sent Events – Canvas 2D – Web Socket – Microdata – Web Storage – RDFa – Web SQL DB – App-Cache – Indexed DB – Geo-location - 20 -
  22. 22. HTML5 StandardArchitecture• 기존 - 21 -
  23. 23. HTML5 StandardArchitecture• HTML5-based - 22 -
  24. 24. HTML5 StandardReferences• Standard Documents – http://www.w3.org/TR/html5/ : HTML5 Working draft by W3C – http://www.w3.org/TR/html5-author/ : HTML5 Working draft for web developers by W3C – http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html : HTML Living Standard by WHATWG• Resources & Learning – http://www.html5rocks.com/en/ : HTML5 Resources by Google – http://hacks.mozilla.or.kr/ : HTML5 Resources by Mozilla hacks – http://webstandards.or.kr/html5 : HTML5 Resources by Web Standards Korea – http://slides.html5rocks.com/ : HTML5 Presentation by Google – http://html5demos.com/ : HTML5 Demo and Examples – http://www.w3schools.com/ : Web Tutorials - 23 -
  25. 25. HTML5 StandardReferences• Showcases – http://html5gallery.com/ : HTML5 Set of showcase – http://www.apple.com/html5/ : Showcase by Apple – http://ie.microsoft.com/testdrive/ : IE10 Showcase by Microsoft• Tests & Accessibility – http://www.findmebyip.com/litmus/ : Browser support – http://html5accessibility.com/ : Browser accessibility (Assistive technology based) – http://html5test.com/ : Current browser scores and check lists – http://rng.io/ : Current mobile bowser test (Ringmark)• CSS3 Design Tools – http://www.sencha.com/products/animator/ : Sencha Animator – http://labs.adobe.com/technologies/edge/ : Adobe Edge Preview - 24 -

×