• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 표준 소개
 

HTML5 표준 소개

on

  • 1,548 views

HTML5에 대한 간단한 소개

HTML5에 대한 간단한 소개

Statistics

Views

Total Views
1,548
Views on SlideShare
1,324
Embed Views
224

Actions

Likes
2
Downloads
0
Comments
0

2 Embeds 224

http://heiswed.tistory.com 223
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

    HTML5 표준 소개 HTML5 표준 소개 Presentation Transcript

    • HTML5 Standard Sigong Media & KAIST 소프트웨어 대학원 김평화 20113833 2012-04-04
    • HTML5 StandardTable of contents • Overview – HTML5 ? – History – Characteristics – Composition • Renewed Points – Markup – Javascript API – CSS3 • Architecture • References -1-
    • 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-
    • 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-
    • OverviewCharacteristics • REALTIME / COMMUNICATION • OFFLINE / STORAGE • FILE / HARDWARE ACCESS • BOLTS & NUTS • CSS3 STYLING • MULTIMEDIA • 3D GRAPHICS / EFFECTS • SEMANTICS -4-
    • OverviewComposition = Markup + Javascript API + CSS3 -5-
    • HTML5 StandardRenewed Points • Markup – Downward Compatibility – Simplification – Content Model – Semantics – Graphics / Multimedia – Form Control – Interactive • Javascript API • CSS3 -6-
    • 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-
    • 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-
    • 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-
    • Renewed PointsMarkup• Graphics & Multimedia Markup – embed, audio, video ⇒ ogg/theora vs. WebM vs. H.264 ⇒ source 태그의 다중 선언 – canvas : Bitmap – svg : Vector – webgl : 3D - 10 -
    • Renewed PointsMarkup• Form Control Markup – input ⇒ Various types ⇒ autofocus, placeholder, required, etc. – No server connection ⇒ Error checking ⇒ Event generating - 11 -
    • Renewed PointsMarkup• Interactive Markup – progress, meter – datalist – details, summary - 12 -
    • HTML5 StandardRenewed Points • Markup • Javascript API – Offline / Storage – Realtime / Communication – File / Hardware Access – Nuts & Bolts • CSS3 - 13 -
    • Renewed PointsJavascript API• Offline / Storage – Web Storage ⇒ LocalStorage, SessionStorage – Web SQL Database – IndexedDB – Application Cache - 14 -
    • Renewed PointsJavascript API• Realtime / Communication – Web Workers – WebSocket ⇒ HTTP의 한계 – Notifications - 15 -
    • 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 -
    • 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 -
    • HTML5 StandardRenewed Points • Markup • Javascript API • CSS3 - 18 -
    • Renewed PointsCSS3• Programming-liked factors• Webfonts• Various Effects & Animations – http://slides.html5rocks.com/#css3-title - 19 -
    • 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 -
    • 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.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 -
    • 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 -