SIGONG media Smart R&D SangKil. An Deputy.Manager 2012. 07. 18
Jan 15, 2015
SIGONG media Smart R&D
SangKil. An Deputy.Manager2012. 07. 18
HTML5 API ,
HOW IS SUPPORTED BROWSER?
AND Mobile
Element or JavaScript
API
Chrome 20ver
In-ter-netEx-
plorer 8
Op-erea 12
Fire-fox 13
Sa-fari 6
An-droid 4.0
Chrome
Ios5.1
An-droid 4.0
Ios 5.1
Win-dows phone 8
iput type=text Yes ✔ Par-tial ○
Par-tial ○ Yes ✔ Yes ✔ Par-
tial ○ Yes ✔ Par-tial ○ Par-
tial ○
Par-tial ○
Par-tial ○
input type=search Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
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=email Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
input type=datetime No ✘ No ✘ Yes ✔ No ✘ No ✘ Par-
tial ○ Yes ✔ Yes ✔ Par-tial ○ Yes ✔ No ✘
input type=date Yes ✔ No ✘ Yes ✔ No ✘ No ✘ Par-
tial ○ Yes ✔ Yes ✔ Par-tial ○ Yes ✔ No ✘
input type=month No ✘ No ✘ Yes ✔ No ✘ No ✘ Par-
tial ○ Yes ✔ Yes ✔ Par-tial ○ Yes ✔ No ✘
input type=week No ✘ No ✘ Yes ✔ No ✘ No ✘ Par-
tial ○ Yes ✔ Par-tial ○
Par-tial ○
Par-tial ○ No ✘
input type=time No ✘ No ✘ Yes ✔ No ✘ No ✘ Par-
tial ○ Yes ✔ Yes ✔ Par-tial ○ Yes ✔ No ✘
input type=datetime-local
No ✘ No ✘ Yes ✔ No ✘ No ✘ Par-tial ○ Yes ✔ Yes ✔ Par-
tial ○ Yes ✔ No ✘
input type=number Yes ✔ No ✘ Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Par-
tial ○ Yes ✔ Par-tial ○
Par-tial ○
input type=range Yes ✔ No ✘ Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
TabletsDesktop Mobile
* 현재 상용 버전 ( 가장 많이 사용중인 ) 브라우저 별 지원여부
Element or JavaScript
API
Chrome 20ver
In-ter-netEx-
plorer 8
Op-erea 12
Fire-fox 13
Sa-fari 6
An-droid 4.0
Chrome
Ios5.1
An-droid 4.0
Ios 5.1
Win-dows phone 8
input type=color Partial ○ No ✘ Par-
tial ○ No ✘ No ✘ Par-tial ○ No ✘ Par-
tial ○Par-
tial ○Par-
tial ○ No ✘
input type=checkbox Yes ✔ Par-
tial ○ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
input type=image Partial ○ No ✘ Yes ✔ Par-
tial ○Par-
tial ○Par-
tial ○Par-
tial ○Par-
tial ○Par-
tial ○Par-
tial ○ Yes ✔
input type=file Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
textarea Yes ✔ Par-tial ○ Yes ✔ Yes ✔ Yes ✔ Par-
tial ○ Yes ✔ Par-tial ○
Par-tial ○
Par-tial ○ Yes ✔
select Yes ✔ Par-tial ○ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
fieldset Partial ○ Par-tial ○ Yes ✔ Yes ✔ Par-
tial ○Par-
tial ○Par-
tial ○Par-
tial ○Par-
tial ○Par-
tial ○Par-
tial ○
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 ✘
TabletsDesktop Mobile
* 현재 상용 버전 ( 가장 많이 사용중인 ) 브라우저 별 지원여부
Element or JavaScript API
Chrome
20ver
In-ter-netEx-
plorer 8
Op-erea 12
Fire-fox 13
Sa-fari 6
An-droid 4.0
Chrome
Ios5.1
An-droid 4.0
Ios 5.1
Win-dows phone 8
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 ✔
Yes ✔
Yes ✔
Drag and Drop Yes ✔
No ✘ Yes ✔
Par-tial ○
Yes ✔
No ✘ No ✘ No ✘ No ✘ No ✘ No ✘
Application Cache Yes ✔
No ✘ Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Cross-document mes-saging
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Server-Sent Events Yes ✔
No ✘ Yes ✔
Yes ✔
Yes ✔
No ✘ Yes ✔
Yes ✔
No ✘ No ✘
XMLHttpRequest Level 2
Yes ✔
No ✘Par-tial ○
Yes ✔
Par-tial ○
Yes ✔
Yes ✔
Yes ✔
Par-tial ○
Par-tial ○
Par-tial ○
WebSocket Yes ✔
No ✘ No ✘ Yes ✔
Yes ✔
No ✘ Yes ✔
Yes ✔
No ✘ Yes ✔
Yes ✔
Geolocation Yes ✔
No ✘ Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Session Storage Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Local Storage Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
TabletsDesktop Mobile
* 현재 상용 버전 ( 가장 많이 사용중인 ) 브라우저 별 지원여부
Element or JavaScript API
Chrome
20ver
In-ter-netEx-
plorer 8
Op-erea 12
Fire-fox 13
Sa-fari 6
An-droid 4.0
Chrome
Ios5.1
An-droid 4.0
Ios 5.1
Win-dows phone 8
Indexed DD Yes ✔
No ✘ No ✘ Yes ✔
No ✘ No ✘ Yes ✔
No ✘ No ✘ No ✘ Yes ✔
Web SQL Database Yes ✔
No ✘ Yes ✔
No ✘ Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
Yes ✔
No ✘
Web Workers Yes ✔
No ✘ Yes ✔
Yes ✔
Yes ✔
No ✘ Yes ✔
Yes ✔
No ✘ Yes ✔
Yes ✔
Shared Workers Yes ✔
No ✘ Yes ✔
No ✘ Yes ✔
No ✘ No ✘ Yes ✔
No ✘ Yes ✔
No ✘
Web Notifications Yes ✔
No ✘ No ✘ No ✘ Yes ✔
No ✘ No ✘ No ✘ No✘ No ✘ No ✘
TabletsDesktop Mobile
* 현재 상용 버전 ( 가장 많이 사용중인 ) 브라우저 별 지원여부
목차1.FROMS2.Video / DOM3.Audio4.Drag and Drop5.Canvas6.Geolocation7.Web Storage8.App Cache9.Web Workers10.SSE(Server Sent Event)
1. FROM Element
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 Extended functionHTML5 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 TagHTML5 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 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 TagHTML5 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
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
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 Tagdefines 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
:Web Browser :Mobile Browser
1.FROMS2.Video / DOM3.Audio4.Drag and Drop5.Canvas6.Geolocation7.Web Storage8.App Cache9.Web Workers10.SSE(Server Sent Event)
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
Drag and Drop
:Web Browser :Mobile Browser
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
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
:Web Browser :Mobile Browser
Canvas
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
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
Opera 10.6 YseNote : Internet Explorer 8 및 이전 버전에서는 지원 하지 않음
Link Page : http://html5demos.com/geo http://slides.html5rocks.com/#geolocation
GeoLocation
:Web Browser :Mobile Browser
1.FROMS2.Video / DOM3.Audio4.Drag and Drop5.Canvas6.Geolocation7.Web Storage8.App Cache9.Web Workers10.SSE(Server Sent Event)
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
Opera 10.6 YseNote : Internet Explorer 7 및 이전 버전에서는 지원 하지 않음
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
:Web Browser :Mobile Browser
1.FROMS2.Video / DOM3.Audio4.Drag and Drop5.Canvas6.Geolocation7.Web Storage8.App Cache9.Web Workers10.SSE(Server Sent Event)
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
:Web Browser :Mobile Browser
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
9. Web Worker
Web WorkerJavaScript 구동 시에 JS 파일을 background 에서 독립적으로 Once Thread 에서 Multi Thread 로 구동 할 수 있다 .
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 지원 하지 않음 실행 할 때는 JS 파일로 만들어서 사용해야 함
Link Page : http://www.
Web Worker
:Web Browser :Mobile Browser
1.FROMS2.Video / DOM3.Audio4.Drag and Drop5.Canvas6.Geolocation7.Web Storage8.App Cache9.Web Workers10.SSE(Server Sent Event)
10. Server Sent Event
Server Sent Event사용자의 웹페이를 자동 업데이트 하기 위한 기능
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://www.
Server Sent Event
:Web Browser :Mobile Browser
Etc. 부록Canvas VS SVG
부록 . Canvas VS SVG
Link Page : http://www.
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
Thank You.