html5 browser api_support
Post on 15-Jan-2015
657 Views
Preview:
DESCRIPTION
TRANSCRIPT
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 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
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 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
: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.
top related