html5 browser api_support

SIGONG me-dia 스마트연구소 안상길 대리2012 . 07 . 18

HTML5 API ,

HOW IS SUPPORTED BROWSER?

AND Mobile

목차1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)

TypeName Browser Type

1. FROM Element

목차1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)

Input Type : COLOR

<input type=“color” name=“favcolor” />

Example

TypeName Supproted

Color X X O X O

Date X X O O O

Datetime X X O O O

Input type Extends function

HTML5 has several new input types for forms. These new fea-tures allow better input control and validation.

TypeName Supproted

Datetime-local X X O O O

Email X O O X O

Month X X O O O

Number X X O O O

reange X X O O O

Search X X O O X

Tel X X X X X

Time X X O O O

url X O O X O

Week X X O O O

1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)

2. Video / DOM

<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag.</video>

Example

Video Tag

HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

Video Formats And Browser Support

Browser MP4 WebM Ogg

Internet Explorer 9

Yse No No

Firefox 4.0 No Yse Yse

Google Chrome 6

Yse Yse Yse

Apple Safari 5 Yse No No

Opera 10.6 No Yse Yse

Video Tag

Test link page : http://html5demos.com/video

:Web Browser :Mobile Browser

http://html5demos.com/video

3. Audio

<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element.</audio>

Example

Audio Tag

defines a new element which specifies a standard way to em-bed an audio file on a web page: the <audio> element.

Audio Formats And Browser Support

Browser MP4 WebM Ogg

Internet Explorer 9

Yse No No

Firefox 4.0 No Yse Yse

Google Chrome 6

Yse Yse Yse

Apple Safari 5 Yse No No

Opera 10.6 No Yse Yse

Audio Tag

Link Page : http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all


http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all

4. Drag and Drop

Drag and Drop개체를 다른 위치로 이동시키는 일반적인 기능 , 표준으로 재정 되고 있으나 어떠한 속성은 drag-gable 될 가능성이 있음 .

Browser Support

Browser Yes/No

Internet Explorer 9

Yse

Firefox 4.0 Yse

Google Chrome 6

Yse

Apple Safari 5 Yse

Opera 10.6 Yse

Make an Element DraggableFirst of all: To make an element draggable, set the draggable attribute to true:

<img draggable="true" />

Note : Internet Explorer 8 및 이전 버전에서는 지원 하지 않음

Drag and DropExample Code

<!DOCTYPE HTML><html><head><style type="text/css">#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style><script type="text/javascript">function allowDrop(ev) {

ev.preventDefault();}

function drag(ev) {ev.dataTransfer.setData("text",ev.target.id);

}

function drop(ev) {ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));

}</script></head><body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /><img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />

</body></html>

Link Page : http://html5demos.com/drag

http://html5demos.com/drag

Drag and Drop


5. Canvas

CanvasHTML5 Canvas Element is web page use to draw graphics하나의 캔버스는 사각형구역이며 , 그픽셀 하나하나를 제어 할 수 있습니다 .

Browser Support

Browser Yes/No

Internet Explorer 9

Yse

Firefox 4.0 Yse

Google Chrome 6

Yse

Apple Safari 5 Yse

Opera 10.6 YseNote : Internet Explorer 8 및 이전 버전에서는 지원 하지 않음

CanvasExample Code

Create a CanvasCanvas Element 를 이용한 그리기 width, height 를 이용함

<canvas id="myCanvas" width="200" height="100"></canvas>

Draw With JavaScriptJavaScript 를 이용한 그리기

<script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);

</script>

Link Page : http://paperjs.org/examples/hit-testing/ http://slides.html5rocks.com/#canvas-2d-example

http://paperjs.org/examples/hit-testing/

http://slides.html5rocks.com/


Canvas

6. GeoLocation

GeoLocationHTML5 Geolocation API is used to get the georaphical position of a user. ( 단 , 개인정보이기 때문에 사용자가 승인한 경우만 사용할 수 있습니다 .)

Browser Support

Browser Yes/No

Internet Explorer 9

Yse

Firefox 4.0 Yse

Google Chrome 6

Yse

Apple Safari 5 Yse


Link Page : http://html5demos.com/geo http://slides.html5rocks.com/#geolocation

http://html5demos.com/geo


GeoLocation


7. Web Storage

Web StorageWith HTML5, web pages can store data locally within the user's browser.

Browser Support

Browser Yes/No

Internet Explorer 8

Yse

Firefox 4.0 Yse

Google Chrome 6

Yse

Apple Safari 5 Yse


Link Page : http://www.

Web StorageExample CodeStorage,check browser support for localStorage&sessionStorage LocalStorage/SessionStorage 확인

if(typeof(Storage)!=="undefined“) { // Yes! localStorage and sessionStorage support! // Some code.....} else { // Sorry! No web storage support..}

<!DOCTYPE html><html><body>

<div id="result"></div><script>if(typeof(Storage)!=="undefined“) { localStorage.lastname="Smith"; document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;} else { document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";}</script>

</body></html>

Link Page : http://slides.html5rocks.com/#web-storage


Web Storage


8. App cache

App CacheHTML5 에서는 Cache 를 개발자에 의해 임의적인 Control 이 가능

Browser Support

Browser Yes/No

Internet Explorer No

Firefox 4.0 Yse

Google Chrome 6

Yse

Apple Safari 5 Yse

Opera 10.6 Yse

Note : Internet Explorer 지원 하지 않음

Link Page : http://slides.html5rocks.com/#app-cache


App Cache


9. Web Worker

Web WorkerJavaScript 구동 시에 JS 파일을 background 에서 독립적으로 Once Thread 에서 Multi Thread 로 구동 할 수 있다 .

Browser Support

Browser Yes/No


Firefox 4.0 Yse

Google Chrome 6

Yse

Apple Safari 5 Yse

Opera 10.6 Yse

Note : Internet Explorer 지원 하지 않음 실행 할 때는 JS 파일로 만들어서 사용해야 함


Web Worker


10. Server Sent Event

Server Sent Event사용자의 웹페이를 자동 업데이트 하기 위한 기능

Browser Support

Browser Yes/No


Firefox 4.0 Yse

Google Chrome 6

Yse

Apple Safari 5 Yse

Opera 10.6 Yse

Note : Internet Explorer 지원 하지 않음


Server Sent Event


Etc. 부록Canvas VS SVG

부록 . Canvas VS SVG


Canvas SVG

해상도 의존적 해상도에 독립적Event Handler 지원안함 Event Handler 지원

좋지않은 덱스트 렌더링 거대한 렌더링이 필요한 어플리케이션에 적합 (google Map)

결과를 png 나 jpg 로 저장가능 복작해질경우 랜더링이 느림많은 객체가 주주 다시 그려져야 함으로

그래픽 집약적인것에 적함게임어플리 케이션으로 부적함

Reference Site Listhttp://slides.html5rocks.com*http://html5please.com/http://www.html5rocks.com/en/*http://caniuse.com/#search=canvas*http://html5demos.com/http://html5test.comhttp://www.w3schools.com/

Sample Source Code Linkhttps://github.com/mycup/html5Lab


http://html5please.com/

http://www.html5rocks.com/en/

http://caniuse.com/

http://html5demos.com/

http://html5test.com/

http://www.w3schools.com/

https://github.com/mycup/html5Lab

Thank You.

html5 browser api_support

Technology