The current status of HTML5 technology and standard HTML5 관련 최근 주요업계 동향은 ?

22 HTML5 vs (Flash vs Silverlight)

33 44

55 66 77 88 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

99 Google I/O Conference

Chrome Web Store  an existing web app  a serverless app

1010 Google I/O Conference

HTML5 Tweetdeck App

1111 Google I/O Conference

WebM Project

1212 1313 < Source: http://thenextweb.com/apps/2010/03/04/internet-explorer-9-html5-c ompatible-microsoft-joining-antiflash-movement/ > 1414 IE9 : HTML5와 GPU

1515 MS IE9

Preview #3까지 출시
HTML5 비디오/오디오와 SVG 지원 예정
GPU 활용한 랜더링 기능 지원
IE9 공식 버전은 언제 출시 ???
HTML5를 지원하는 모바일 브라우저 로드맵은 ???

1616 1717 H.264: 31% ( Q2/09 )  66% ( Q1/10 )

Flash : 69% ( Q2/09 )  26% ( Q1/10 )

1818 HTML5 표준 개요 및 특징은?

1919 HTML Timeline

2020 [ Source : Appleinsider ] What is HTML5 ?

Structure and Semantic APIs

2121 HTML Design Principles

2222 Document Representations (문서 표현)

HTML 5 XHTML 5 Document application/xhtml+xml text/html

DOM The DOCTYPE

 Just 15 character  HTML5 doc !!!  Case-insensitive  Backwards compatibility

How about Google page ? Is it based on the HTML5 ?

2424 HTML5 Basic Structure

Common structures
Differentiation & Style. How about Semantic?
What is the potential of new elements?  E.g. Search engine, etc

[ HTML4] 2525 [ HTML5] Example

2626 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

2727 New Markup Elements – for better structure

 for indicating text as marked or highlighted

 for declaring the date and/or time within an HTML document.

2828 New Markup Elements – for better structure

 for indicating a scalar measurement within a known range, or a frac tional value

 for representing the progress of a task

2929 New Markup Elements – for better structure

Tag Description For external content, like text from a news-article, blog, forum, or any ot

her content from an external source For content aside from the content it is placed in. The aside content shoul

d be related to the surrounding content A button, or a radiobutton, or a checkbox

For describing details about a document, or parts of a document

A caption, or summary, inside the details element

For grouping a section of stand-alone content, could be a video

The caption of the figure section For a footer of a document or section, could include the name of the auth

or, the date of the document, contact information, or copyright informati on

For an introduction of a document or section, could include navigation

For a section of headings, using

to

, where the largest is the mai

n heading of the section, and the others are sub-headings 3030 New Markup Elements – for better structure

Tag Description

For text that should be highlighted

For a measurement, used only if the maximum and minimum values are k nown

For a section of navigation The state of a work in progress For ruby annotation (Chinese notes or characters) For explanation of the ruby annotation What to show browsers that do not support the ruby element

For a section in a document. Such as chapters, headers, footers, or any ot

her sections of the document

For defining a time or a date, or both

3131 New Media Elements – for media content

Tag Description

For media resources for media elements, defined inside video or audio ele ments

For embedded content, such as a plug-in

3232 New Form Elements and Input type attribute values

Tag Description

Generate keys to authenticate users

For different types of output, such as output written by a script

3333 New Form Elements and Input type attribute values

Type Description tel The input value is of type telephone number search The input field is a search field url The input value is a URL email The input value is one or more email addresses

datetime The input value is a date and/or time date The input value is a date month The input value is a month week The input value is a week time The input value is of type time datetime-local The input value is a local date/time number The input value is a number range The input value is a number in a given range

color The input value is a hexadecimal color, like #FF8800 3434 Web Forms

Placeholder text

An autofocus attribute

3535 Web Forms

3636 Form Demo

HTML5 input UI support
Payment form

3737 (Reference) HTML5 elements

28 New Elements are added & 7 elements are changed

3838 HTML5 Features

Canvas / SVG Local Storage

Video / Audio Web Socket

Geolocation Web Workers

Offline web apps More features …

Web SQL Database

3939 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.

[http://www.liquidx.net/plotkit/ ] [ http://canvaspaint.org/ ] [http://www.benjoffe.com/code/demos/canvascape/]

4040 Canvas

 Example

Hello World!

var drawingCanvas = 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(); 4141 Canvas Demo

Appspot
RectangleWave
Canvascape - "Experimenting With Textures“
Depth of Field

4242 SVG

What is SVG ?  Scalable Vector Graphic  HTML-like tags for drawing

4343 SVG Demo

Photos
SVG Filter

4444 Video / Audio

HTML4에서 Flash 동영상 추가

4545 Video / Audio

Embedding multimedia will get easier through the user of tags like

4646 Video / Audio

마크업 

 애트리뷰트 •src, width, height, controls, poster, autoplay, autobuffer, loop

 하나 이상의 미디어 타입 처리

4747 Video / Audio

자바스크립트

 메소드 •play(), pause()

 애트리뷰트 •volume, muted, currentTime

 이벤트 •loadeddata, play, pause, timeupdate, ended

4848 Video Demo

CanvasVideo
Video Showcase (Apple)

4949 Geolocation

Geolocation API  brings browser-based location to your apps

navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } );

5050 Offline Web Apps

Web apps need to work everywhere

Database and app cache store user data and app resources locally

5151 Offline Web Apps

App Cache  List resources that you want to take offline cache.manifest file

/static/stickies.html /media/deleteButton.png /media/deleteButtonPressed.png /css /stickies.css /js/stickies.js

HTML file

5252 Web SQL Database

Databases right in the browser
Around 5MB per domain
Accessible across tabs and windows
Based on SQLite
Features: Transaction, SQL queries

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]); } ); 5353} 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.

5454 Web Sockets

TCP for the Web
a next-generation bidirectional communication technology for web applications

if ("WebSocket" in window) { var ws = 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) { var received_msg = evt.data; ... }; ws.onclose = function() { // websocket is closed. }; } else { // the browser doesn't support WebSocket. }

5555 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/

5656 Web Sockets

HTML5 Web Sockets and the Need for Speed!

The Web Sockets experience is 55 times faster than XHR

http://www.kaazing.com/blog/?p=301
http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html ( Demo ) 5757 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.

5858 Web Workers

Workers  ‘parent’ page 접근 제한

예제

The parent page worker.js function findPrimes() { // ... prime algorithm here postMessage(nextPrime); } findPrimes(); 5959 Web Workers and other Demos

Motion Tracker (FF)

Web Fonts

File Drag and Drop (FF)

6060 W3C Device APIs

6161 HTML5 관련 주요 표준화 현황은?

6262 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 ? …

6363 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

6464 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 6565 267 Invited Experts W3C Device API 표준화

6666 Status of DAP Deliverables

API 이름 설 명 (이슈사항은 2010년 3월 기준) 개발주체

디바이스의 일정 정보에 접근하기 위한 API 프랑스 텔레콤, Calendar 이슈사항 : 일정 정보의 보안 이슈, 음력 및 국제화 지원 (현재는 RIM iCal, vCalendar 지원) 디바이스의 주소록 정보에 접근하기 위한 API Contact 이슈사항 : 멀티 디바이스 주소록, SIM 주소록 및 인터넷 주소 프랑스 텔레콤 록(페이스북, 트위터)와의 연동

디바이스 내 오디오, 이미지, 비디오 기능에 접근하기 위한 API 인텔, 노키아, Capture 이슈사항 : Geolocation API 와의 연동 도이치 텔레콤

디바이스의 SMS, MMS, email 기능에 접근하기 위한 API 텔레포니카, 오페라 Messaging 이슈사항 : MMS 메시징 생성 방식, 메시징 로그 접근 방식 , 에릭슨

디바이스의 기본적인 속성에 대한 API(배터리 용량, 네트워크 System 대역폭, CPU부하, 저장 용량, 입/출력 기기) 인텔, 오페라 Information 이슈사항 : DCO와의 연동, 센서 기능 추가

디바이스에 파일을 쓰기 위한 API File Writer 이슈사항 : 스트링으로부터 BLOB 생성 및 파일 쓰기에 대한 이 구글 벤트 모델 6767 (모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사) Status of DAP Deliverables

API 이름 설 명 (이슈사항은 2010년 3월 기준) 개발주체

디바이스 내에 있는 미디어 갤러리(media gallery)에 접근하 Gallery 는 API. ETRI 이슈사항 : 갤러리 메타데이터 속성, 갤러리 검색 메소드 이름

사용자 개인 리소스를 브라우저에서 요청하기 위한 웹 기반 전 Powerbox 달 방식 구글 이슈사항 : 유사 방식(Open Provider)와의 모델 차이

Application 디바이스에 인스톨된 어플리케이션 (Native Application) 에 접 ETRI Launcher 근하기 위한 API

디바이스 내에 저장된 업무(task) 관리(업무 추가, 삭제, 수정) Tasks API - 를 위한 API

Application 웹 어플리케이션의 설정(사용자의 선호도나 환경설정)을 변경 - Configuration 하기 위한 API

서로 다른 플랫폼에서도 사용자가 웹 어플리케이션을 더욱 수 User Interaction - 월하게 조작할 수 있도록 하는 API의 집합 Communication 디바이스 내 전화, 문자의 기록(log)의 내용물 및 메타데이터에 - Log 접근하기 위한 API 6868 (모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사) 브라우저별 HTML5 지원 현황은?

6969 Browser Support

HTML5 is just W3C Working Draft. But Some core features are already supported by a lot of browsers 

IE

7070 Browser Support

7171 (Reference) HTML5 Validator

http://validator.nu/

7272 HTML5 에 대한 전망

7373 HTML5에 대한 이슈 및 전망

이슈

 브라우저 호환성, 브라우저 처리 속도, 개발도구, W3C의 표준화 일정 등

전망

 브라우저 경쟁에 따른 빠른 HTML5 활성화 예상

 특히 모바일 HTML5 앱 증가 예상 •E.g. HTML5 Yahoo! Mail web app

 다양한 애플리케이션 개발 시도 •E.g. noVNC: HTML5 VNC Client 7474 이원석 (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: [email protected] , [email protected] Phone: 042-860-4893, 010-5800-3997 7575 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/

7676