html5 browser api_support
DESCRIPTION
Html5 browser api_supportTRANSCRIPT
![Page 1: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/1.jpg)
SIGONG me-dia 스마트연구소 안상길 대리2012 . 07 . 18
![Page 2: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/2.jpg)
HTML5 API ,
HOW IS SUPPORTED BROWSER?
AND Mobile
![Page 3: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/3.jpg)
목차1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
![Page 4: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/4.jpg)
TypeName Browser Type
![Page 5: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/5.jpg)
1. FROM Element
![Page 6: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/6.jpg)
목차1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
![Page 7: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/7.jpg)
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.
![Page 8: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/8.jpg)
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
![Page 9: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/9.jpg)
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
![Page 10: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/10.jpg)
2. Video / DOM
![Page 11: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/11.jpg)
<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
![Page 12: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/12.jpg)
<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
![Page 13: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/13.jpg)
Video Tag
Test link page : http://html5demos.com/video
:Web Browser :Mobile Browser
![Page 14: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/14.jpg)
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
![Page 15: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/15.jpg)
3. Audio
![Page 16: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/16.jpg)
<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
![Page 17: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/17.jpg)
Audio Tag
Link Page : http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all
:Web Browser :Mobile Browser
![Page 18: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/18.jpg)
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
![Page 19: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/19.jpg)
4. Drag and Drop
![Page 20: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/20.jpg)
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 및 이전 버전에서는 지원 하지 않음
![Page 21: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/21.jpg)
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
![Page 22: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/22.jpg)
Drag and Drop
:Web Browser :Mobile Browser
![Page 23: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/23.jpg)
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
![Page 24: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/24.jpg)
5. Canvas
![Page 25: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/25.jpg)
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 및 이전 버전에서는 지원 하지 않음
![Page 26: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/26.jpg)
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
![Page 27: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/27.jpg)
:Web Browser :Mobile Browser
Canvas
![Page 28: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/28.jpg)
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
![Page 29: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/29.jpg)
6. GeoLocation
![Page 30: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/30.jpg)
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
![Page 31: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/31.jpg)
GeoLocation
:Web Browser :Mobile Browser
![Page 32: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/32.jpg)
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
![Page 33: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/33.jpg)
7. Web Storage
![Page 34: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/34.jpg)
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.
![Page 35: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/35.jpg)
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
![Page 36: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/36.jpg)
Web Storage
:Web Browser :Mobile Browser
![Page 37: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/37.jpg)
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
![Page 38: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/38.jpg)
8. App cache
![Page 39: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/39.jpg)
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
![Page 40: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/40.jpg)
App Cache
:Web Browser :Mobile Browser
![Page 41: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/41.jpg)
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
![Page 42: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/42.jpg)
9. Web Worker
![Page 43: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/43.jpg)
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.
![Page 44: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/44.jpg)
Web Worker
:Web Browser :Mobile Browser
![Page 45: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/45.jpg)
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
![Page 46: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/46.jpg)
10. Server Sent Event
![Page 47: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/47.jpg)
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.
![Page 48: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/48.jpg)
Server Sent Event
:Web Browser :Mobile Browser
![Page 49: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/49.jpg)
Etc. 부록Canvas VS SVG
![Page 50: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/50.jpg)
부록 . Canvas VS SVG
Link Page : http://www.
Canvas SVG
해상도 의존적 해상도에 독립적Event Handler 지원안함 Event Handler 지원
좋지않은 덱스트 렌더링 거대한 렌더링이 필요한 어플리케이션에 적합 (google Map)
결과를 png 나 jpg 로 저장가능 복작해질경우 랜더링이 느림많은 객체가 주주 다시 그려져야 함으로
그래픽 집약적인것에 적함게임어플리 케이션으로 부적함
![Page 51: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/51.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
![Page 52: Html5 browser api_support](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a9a34a795993718b4910/html5/thumbnails/52.jpg)
Thank You.