• Save
The current status of html5 technology and standard
Upcoming SlideShare
Loading in...5
×
 

The current status of html5 technology and standard

on

  • 11,633 views

The current status of HTML5 technology and standard

The current status of HTML5 technology and standard

Statistics

Views

Total Views
11,633
Views on SlideShare
9,104
Embed Views
2,529

Actions

Likes
13
Downloads
0
Comments
0

16 Embeds 2,529

http://wonsuk73.tistory.com 1199
http://www.wonsuk73.com 907
http://android.pe.kr 223
http://wonsuk73.com 72
http://www.android.pe.kr 43
http://pkcentum.tistory.com 38
http://www.bongsoo.pe.kr 11
http://www.hanrss.com 9
http://feeds.feedburner.com 8
http://markup.worklab.in 5
http://webcache.googleusercontent.com 3
http://static.slidesharecdn.com 3
http://192.168.1.44 3
http://bongsoo.pe.kr 3
http://resistan.net 1
http://www.slideshare.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

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

The current status of html5 technology and standard The current status of html5 technology and standard Presentation Transcript

  • The current status of HTML5 technology and standard
    2010. 07. 08
    Wonsuk Lee/ ETRI
    @wonsuk73
    http://www.wonsuk73.com/
  • 2
    HTML5 관련 최근 주요업계 동향은 ?
  • 3
    HTML5 vs (Flash vsSilverlight)
    View slide
  • 4
    View slide
  • 5
    <Source: http://www.apple.com/ipad/ready-for-ipad/ >
    <Source: http://www.apple.com/html5/ >
  • 6
  • 7
    <Source: http://mashable.com/2010/05/07/google-reader-adds-html5-support/>
  • 8
    <Source: http://www.computerworld.com/s/article/print/9178558/Google_to_use_HTML5_in_Gmail?taxonomyName=App+Development&taxonomyId=11 >
  • Google to use HTML5 in Gmail
    Speed is a feature
    Goal is to get Gmail to load in under a second
    Offline support
    HTML5's database standards
    New features
    downloadurl: a new data transfer protocol
    HTML6 ???
    Code size
    443,000 lines of JavaScript
    978,000 lines with comments
    9
  • Google I/O Conference
    Chrome Web Store
    an existing web app
    a serverless app
    10
  • Google I/O Conference
    HTML5 Tweetdeck App
    11
  • Google I/O Conference
    WebM Project
    12
  • 13
    <Source: http://www.html5rocks.com/>
  • 14
    < Source: http://thenextweb.com/apps/2010/03/04/internet-explorer-9-html5-compatible-microsoft-joining-antiflash-movement/>
  • IE9 : HTML5와 GPU
    15
    <Source: IE9 : HTML5와 GPU 발표자료 (황리건) >
  • MS IE9
    Preview #3까지 출시
    HTML5 비디오/오디오와 SVG 지원 예정
    GPU 활용한 랜더링 기능 지원
    IE9 공식 버전은 언제 출시 ???
    HTML5를 지원하는 모바일 브라우저 로드맵은???
    16
  • 17
  • 18
    H.264: 31% ( Q2/09 )  66% ( Q1/10 )
    Flash : 69% ( Q2/09 )   26% ( Q1/10 )
    <Source: Encoding.com via TechCrunch>
  • 19
    HTML5 표준 개요 및 특징은?
  • HTML Timeline
    20
    [ Source : Appleinsider ]
  • What is HTML5 ?
    21
    Structure and Semantic
    APIs
  • HTML Design Principles
    22
    <Source: http://www.w3.org/TR/html-design-principles/ >
  • Document Representations (문서 표현)
    HTML 5
    XHTML 5
    text/html
    application/xhtml+xml
    Document
    DOM
  • The DOCTYPE
    <!DOCTYPE html>
    Just 15 character
    HTML5 doc !!!
    Case-insensitive
    Backwards compatibility
    24
    How about Google page ? Is it based on the HTML5 ?
  • HTML5 Basic Structure
    Common structures
    Differentiation & Style. How about Semantic?
    What is the potential of new elements?
    E.g. Search engine, etc
    25
    [ HTML4]
    [ HTML5]
  • Example
    26
  • New Elements in HTML5
    New Markup Elements – for better structure
    New Media Elements – for media content
    The Canvas Element – for drawing
    New Form Elements and Input type attribute values
    27
  • New Markup Elements – for better structure
    <mark>
    for indicating text as marked or highlighted
    <time>
    for declaring the date and/or time within an HTML document. 
    28
  • New Markup Elements – for better structure
    <meter>
    for indicating a scalar measurement within a known range, or a fractional value
    <progress>
    for representing the progress of a task
    29
  • New Markup Elements – for better structure
    30
  • New Markup Elements – for better structure
    31
  • New Media Elements – for media content
    32
  • New Form Elements and Input type attribute values
    33
  • New Form Elements and Input type attribute values
    34
  • Web Forms
    Placeholder text
    An autofocus attribute
    35
  • Web Forms
    36
  • Form Demo
    HTML5 input UI support
    Payment form
    37
  • (Reference) HTML5 elements
    38
    28 New Elements are added
    &
    7 elements are changed
  • HTML5 Features
    39
    Canvas / SVG
    Video / Audio
    Geolocation
    Offline web apps
    Web Socket
    Local Storage
    More features …
    Web SQL Database
    Web Workers
  • Canvas
    What is Canvas ?
    Dynamic and interactive graphics
    Draw images using 2D drawing API
    Lines, curves, shapes, fills, etc.
    Useful for Graphs, Applications, Games, etc.
    40
    [ http://canvaspaint.org/ ]
    [http://www.liquidx.net/plotkit/ ]
    [http://www.benjoffe.com/code/demos/canvascape/]
  • Canvas
    • Example
    <canvas id="myDrawing" width="200" height="200">
    </canvas>
    <h1>Hello World!</h1>
    vardrawingCanvas = document.getElementById('myDrawing');
    var context = drawingCanvas.getContext('2d');
    // Create the yellow face
    context.strokeStyle = "#000000";
    context.fillStyle = "#FFFF00";
    context.beginPath();
    context.arc(100,100,50,0,Math.PI*2,true);
    context.closePath();
    context.stroke();
    context.fill();
    41
  • Canvas Demo
    Appspot
    RectangleWave
    Canvascape - "Experimenting With Textures“
    Depth of Field
    42
  • SVG
    What is SVG ?
    Scalable Vector Graphic
    HTML-like tags for drawing
    43
    <!DOCTYPE html>
    <html>
    <body>
    <svg width="200" height="200">
    <rect
    x="0" y="0"
    width="100" height="100"
    fill="blue" stroke="red"
    stroke-width="5px"
    rx="8" ry="8"
    id="myRect" class="chart" />
    </svg>
    </body>
    </html>
  • SVG Demo
    Photos
    SVG Filter
    44
  • Video / Audio
    HTML4에서 Flash 동영상 추가
    45
  • Video / Audio
    Embedding multimedia will get easier through the user of tags like <audio> and <video>
    46
    <Source: Dive into html5>
  • Video / Audio
    마크업
    <video> and <audio> as easy as <img>
    애트리뷰트
    src, width, height, controls, poster, autoplay, autobuffer, loop
    하나 이상의 미디어 타입 처리
    47
  • Video / Audio
    자바스크립트
    메소드
    play(), pause()
    애트리뷰트
    volume, muted, currentTime
    이벤트
    loadeddata, play, pause, timeupdate, ended
    48
  • Video Demo
    CanvasVideo
    Video Showcase (Apple)
    49
  • Geolocation
    Geolocation API
    brings browser-based location to your apps
    50
    navigator.geolocation.getCurrentPosition(
    function(position) {
    var lat = position.coords.latitude;
    varlon = position.coords.longitude;
    showLocation(lat, lon);
    }
    );
  • Offline Web Apps
    Web apps need to work everywhere
    Database and app cache store user data and app resources locally
    51
  • Offline Web Apps
    App Cache
    List resources that you want to take offline
    52
    cache.manifest file
    /static/stickies.html
    /media/deleteButton.png
    /media/deleteButtonPressed.png
    /css/stickies.css
    /js/stickies.js
    HTML file
    <body manifest="./cache.manifest">
    </body>
  • Web SQL Database
    Databases right in the browser
    Around 5MB per domain
    Accessible across tabs and windows
    Based on SQLite
    Features: Transaction, SQL queries
    53
    var db = window.openDatabase("NoteTest", "1.0“, "Example DB“, 200000);
    function saveMe(id, text, timestamp, left, top, zIndex) {
    db.transaction(
    function (tx) {
    tx.executeSql(
    "INSERT INTO WebKitStickyNotes "
    + "(id, note, timestamp, left, top, zindex) "
    + "VALUES (?, ?, ?, ?, ?, ?)",
    [id, text, timestamp, left, top, zIndex]);
    }
    );
    }
  • Web Storage
    Key/value pair (hash) storage
    Hash-based storage of strings (not objects).
    10 MB per zone.
    Two kinds:
    sessionStorage:
    Die when browser closes
    Not shared between tabs
    localStorage
    Crash-safe
    Shared BW tabs / windows and sessions – but not zones.
    54
  • Web Sockets
    TCP for the Web
    a next-generation bidirectional communication technology for web applications 
    55
    if ("WebSocket" in window) {varws = new WebSocket("ws://example.com/service");ws.onopen = function() { // Web Socket is connected. You can send data by send() method.ws.send("message to send"); .... };ws.onmessage = function (evt) { varreceived_msg = evt.data; ... };ws.onclose = function() { // websocket is closed. };} else {// the browser doesn't support WebSocket.}
  • Web Sockets
    구글 크롬 개발자 채널 버전 4.0.249.0.
    Web Socket을 기본기능으로 지원
    Web Socket extension for Apache HTTP Server
    pywebsocket
    testing or experimental purposes
    mod_pywebsocket
    mod_python
    mod_ssl for wss
    http://code.google.com/p/pywebsocket/
    jWebSocket
    http://jwebsocket.org/
    56
  • Web Sockets
    HTML5 Web Sockets and the Need for Speed!
    http://www.kaazing.com/blog/?p=301
    http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html ( Demo )
    57
    The Web Sockets experience is 55 times faster than XHR
  • Web Workers
    API for running background scripts
    Threads for Web apps
    Browser Support
    Firefox 3.5
    Safari 4
    Chrome 4
    Useful for gaming, graphics, crypto and etc.
    58
  • Web Workers
    Workers
    ‘parent’ page 접근 제한
    예제
    59
    The parent page
    <script>
    var worker = new Worker('worker.js');
    worker.onmessage = function (event) {
    console.log('Results: ' + event.data);
    };
    </script>
    worker.js
    function findPrimes() {
    // ... prime algorithm here
    postMessage(nextPrime);
    }
    findPrimes();
  • Web Workers and other Demos
    Motion Tracker (FF)
    Web Fonts
    File Drag and Drop (FF)
    60
  • W3C Device APIs
    61
  • 62
    HTML5 관련 주요 표준화 현황은?
  • HTML5의 표준의 범위
    Paul Cotton (HTML WG Co-chair) Interview
    기본 입장
    HTML 마크업내에서 활용되는 모든 API가 HTML5 표준의 범주
    W3C 관련 WG
    HTML WG
    Web Application WG
    Device API WG
    Geolocation WG
    Media Annotation WG ? …
    63
  • HTML5 표준화 현황
    W3C WGs related with HTML5
    HTML WG
    HTML5, HTML+RDFa, HTML Microdata, HTML Canvas 2D Context, HTML: The Markup Language, HTML5 diffs from HTML4, etc
    Web Applications WG
    Web Storage, Indexed Database API, File API, Server-Sent Event, Web Sockets API, Web Workers, Programmable HTTP Caching and Serving, Web SQL Database, etc
    Device APIs and Policy WG
    Calendar, Contact, Media Capture, Messaging, System Information, File Writer, Gallery, Powerbox, Application Launcher, etc
    Geolocation WG
    Geolocation API
    64
  • W3C HTML WG
    Milestones ( This schedule was removed )
    2007-05 HTML5 and Web Forms 2.0 specs adopted as basis for review
    2007-11 HTML Design Principles First Public Working Draft
    2008-02 HTML5 First Public Working Draft
    2010-01 HTML5 Last Call Working Draft
    2010-12? HTML5 Candidate Recommendation
    2012-01? HTML5 Proposed Recommendation
    2012-03? HTML5 Recommendation
    Participants
    407 group participants,
    407 in good standing,
    140 participants from 37 organizations
    267 Invited Experts
    65
  • W3C Device API 표준화
    66
    W3C Device API (국제표준)
    웹 기반 공통 API
  • Status of DAP Deliverables
    67
    (모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)
  • Status of DAP Deliverables
    68
    (모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)
  • 69
    브라우저별HTML5 지원 현황은?
  • Browser Support
    HTML5 is just W3C Working Draft. But Some core features are already supported by a lot of browsers
    70
    IE
  • Browser Support
    71
  • (Reference) HTML5 Validator
    http://validator.nu/
    72
  • 73
    HTML5 에 대한 전망
  • HTML5에 대한 이슈 및 전망
    이슈
    브라우저 호환성, 브라우저 처리 속도, 개발도구, W3C의 표준화일정 등
    전망
    브라우저 경쟁에 따른 빠른 HTML5 활성화 예상
    특히 모바일HTML5 앱 증가 예상
    E.g. HTML5 Yahoo! Mail web app
    다양한 애플리케이션 개발 시도
    E.g. noVNC: HTML5 VNC Client
    74
  • 이원석 (Wonsuk Lee)/선임연구원/Ph.D.
    ETRI 표준연구센터 서비스융합표준연구팀
    W3C 대한민국 사무국 코디네이터/모바일 웹2.0 포럼 HTML5 AG 의장
    W3C Media Annotation WG 에디터/ W3C Device API WG 에디터/
    W3C HTML WG / W3C Web Application WG 멤버
    Email: wslee@etri.re.kr, wslee@w3.org
    Phone: 042-860-4893, 010-5800-3997
    75
  • References
    [brad Neuberg] Introduction to HTML5,
    http://codinginparadise.org/presentations/intro_html5.pdf
    [Mark Pilgrim] Dive into HTML5, http://diveintohtml5.org/
    [Nabtron] New Elements introduced in HTML5,
    http://nabtron.com/new-elements-in-html5/1910/
    [W3C HTML WG], http://www.w3.org/html/wg/
    [W3C Web Applications WG], http://www.w3.org/2008/webapps/
    76