Html5 browser api_support

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

HTML5 API ,

HOW IS SUPPORTED
BROWSER?

AND Mobile

목차
1. FROMS
2. Video / DOM
3. Audio
4. Drag and Drop
5. Canvas
6. Geolocation
7. Web Storage
8. App Cache
9. Web Workers
10.SSE(Server Sent Event)

Input type Extends function
HTML5 has several new input types for forms. These new
features allow better input control and validation.

Example

Input Type : COLOR

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

TypeName Supproted

Color X X O X O
Date X X O O O
Datetime X X O O O

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. FROMS
2. Video / DOM
3. Audio
4. Drag and Drop
5. Canvas
6. Geolocation
7. Web Storage
8. App Cache
9. Web Workers
10.SSE(Server Sent Event)

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

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

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

Audio Tag
defines a new element which specifies a standard way to
embed an audio file on a web page: the <audio> element.
Example

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

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


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

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

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

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

<img draggable="true" />

Drag and Drop
Example 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

Drag and Drop


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

Browser Support

Browser Yes/No
Firefox 4.0 Yse
Google Chrome 6 Yse
Apple Safari 5 Yse
Opera 10.6 Yse


Canvas
Example Code

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

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

Draw With JavaScript
JavaScript를 이용한 그리기

<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

Canvas


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

Browser Support

Browser Yes/No
Firefox 4.0 Yse
Google Chrome 6 Yse
Apple Safari 5 Yse
Opera 10.6 Yse


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

GeoLocation


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

Browser Support

Browser Yes/No
Firefox 4.0 Yse
Google Chrome 6 Yse
Apple Safari 5 Yse
Opera 10.6 Yse


Link Page : http://www.

Web Storage
Example Code
Storage,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


App Cache
HTML5에서는 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


Web Worker
JavaScript 구동 시에 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

실행 할 때는 JS파일로 만들어서 사용해야 함


Web Worker


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

Browser Support

Browser Yes/No
Firefox 4.0 Yse
Google Chrome 6 Yse
Apple Safari 5 Yse
Opera 10.6 Yse



Server Sent Event


부록. Canvas VS SVG
Canvas SVG
해상도 의존적 해상도에 독립적
Event Handler 지원안함 Event Handler 지원
좋지않은 덱스트 렌더링 거대한 렌더링이 필요한 어플리케이션에
적합(google Map)
결과를 png나 jpg로 저장가능 복작해질경우 랜더링이 느림
많은 객체가 주주 다시 그려져야 함으로 게임어플리 케이션으로 부적함
그래픽 집약적인것에 적함


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

Sample Source Code Link
https://github.com/mycup/html5Lab

Html5 browser api_support

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Html5 browser api_support

Similar to Html5 browser api_support (20)

Recently uploaded

Recently uploaded (20)

Html5 browser api_support