Html5 browser api_support_1.0

SIGONG media
Smart R&D
SangKil. An Deputy.Manager
2012. 07. 18

HTML5 API ,

HOW IS SUPPORTED
BROWSER?

AND Mobile

Desktop Tablets Mobile
Element or Chrome Inter Opere Firef Safar Andro Chrom Ios5. Andro Ios Windo
JavaScript 20ver net a ox 13 i 6 id e 1 id 5.1 ws
API Explo 12 4.0 4.0 phone
rer 8 8

Partia Partia Partia Partia Partia Partia
iput type=text Yes Yes Yes Yes Partia
l l l l l l
l
input type=sea
Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes
rch

input type=tel Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes

input type=url Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes

input type=ema
il
input type=dat Partia Partia
No No Yes No No Yes Yes Yes No
etime l l
Yes No Yes No No Yes Yes Yes No
e l l
input type=mon Partia Partia
th l l
input type=wee Partia Partia Partia Partia
No No Yes No No Yes No
k l l l l
input type=tim Partia Partia
e l l
etime-local l l
input type=num Partia Partia Partia
Yes No Yes No Yes Yes Yes Yes
ber l l l
input type=ran
Yes No Yes No Yes Yes Yes Yes Yes Yes Yes
ge

* 현재 상용 버전(가장 많이 사용중인) 브라우저 별 지원여부

Element or Chrome Inter Opere Firef Safar Andro Chrom Ios5. Andro Ios Windo
JavaScript 20ver net a ox 13 i 6 id e 1 id 5.1 ws
API Explo 12 4.0 4.0 phone
rer 8 8
input type=col Partia Partia Partia Partia Partia
Partial No No No No No
or l l l l l
input type=che Partia
Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
ckbox l
input type=ima Partia Partia Partia Partia Partia Partia Partia
Partial No Yes Yes
ge l l l l l l l
input type=fil
e
Partia Partia Partia Partia Partia
textarea Yes Yes Yes Yes Yes Yes
l l l l l
Partia
select Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
l
Partia Partia Partia Partia Partia Partia Partia Partia
fieldset Partial Yes Yes
l l l l l l l l

datalist Yes No Yes Yes No No No No No No Yes

keygen Yes No Yes No Yes Yes Yes Yes Yes Yes No

output Yes No Yes Yes Yes Yes Yes Yes Yes Yes No

progress Yes No Yes Yes Yes No Yes No No No Yes

meter Yes No Yes No Yes No Yes No No No No


Chrom Inter Opere Firef Safar Andro Chrom Ios5. Andro Ios Windo
Element or e net a ox 13 i 6 id e 1 id 5.1 ws
JavaScript API 20ver Explo 12 4.0 4.0 phone
rer 8 8
Yes Yes
Canvas element Yes No Yes Yes Yes Yes Yes Yes Yes
✔ ✔
Yes Yes
Video element Yes No Yes Yes Yes Yes Yes Yes Yes
✔ ✔
Yes Yes
Audio element Yes No Yes Yes Yes Yes Yes Yes Yes
✔ ✔
Parti Yes
Drag and Drop Yes No Yes No ✘ No ✘ No ✘ No ✘ No ✘ No ✘
al ○ ✔
Yes Yes Yes Yes Yes Yes Yes Yes
Application Cache Yes No Yes
✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
Cross-document mess Yes Yes Yes Yes Yes Yes Yes Yes
Yes Yes Yes
aging ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
Yes Yes Yes Yes
Server-Sent Events Yes No Yes No ✘ No ✘ No ✘
✔ ✔ ✔ ✔
XMLHttpRequest Le Parti Yes Parti Yes Yes Yes Parti Parti Parti
Yes No
vel 2 al ✔ al ○ ✔ ✔ ✔ al ○ al ○ al ○
Yes Yes Yes Yes Yes Yes
WebSocket Yes No No No ✘ No ✘
✔ ✔ ✔ ✔ ✔ ✔
Geolocation Yes No Yes
✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
Session Storage Yes Yes Yes
✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
Local Storage Yes Yes Yes
✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔


Chrom Inter Opere Firef Safar Andro Chrom Ios5. Andro Ios Windo
Element or e net a ox 13 i 6 id e 1 id 5.1 ws
JavaScript API 20ver Explo 12 4.0 4.0 phone
rer 8 8
Yes Yes Yes
Indexed DD Yes No No No ✘ No ✘ No ✘ No ✘ No ✘
✔ ✔ ✔
Web SQL Database Yes No Yes No ✘ No ✘
✔ ✔ ✔ ✔ ✔ ✔
Web Workers Yes No Yes No ✘ No ✘
✔ ✔ ✔ ✔ ✔ ✔
Yes Yes Yes
Shared Workers Yes No Yes No ✘ No ✘ No ✘ No ✘ No ✘
✔ ✔ ✔
Yes
Web Notifications Yes No No No ✘ No ✘ No ✘ No ✘ No✘ No ✘ No ✘
✔


목차
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 Extended 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_1.0

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Último

Último (20)

Html5 browser api_support_1.0