SIGONG media스마트연구소안 상 길    대 리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(Serv...
TypeName   Browser Type
1. FROM Element
목차1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Serv...
Input type Extends functionHTML5 has several new input types for forms. These newfeatures allow better input control and v...
TypeName         SupprotedDatetime-local     X     X   O   O   OEmail              X     O   O   X   OMonth              X...
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server...
2. Video / DOM
Video TagHTML5 defines a new element which specifies a standard wayto embed a video/movie on a web page: the <video> eleme...
Video TagHTML5 defines a new element which specifies a standard wayto embed a video/movie on a web page: the <video> eleme...
Video TagTest 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...
3. Audio
Audio Tagdefines a new element which specifies a standard way toembed an audio file on a web page: the <audio> element.Exa...
Audio TagLink Page : http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all                         :Web Bro...
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server...
4. Drag and Drop
Drag and Drop개체를 다른 위치로 이동시키는 일반적인 기능, 표준으로 재정 되고 있으나 어떠한속성은 draggable 될 가능성이 있음.Browser Support      Browser             ...
Drag and DropExample Code <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:350px;height:70px;padding:10p...
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...
5. Canvas
CanvasHTML5 Canvas Element is web page use to draw graphics하나의 캔버스는 사각형구역이며, 그픽셀 하나하나를 제어 할 수 있습니다.Browser Support      Br...
CanvasExample CodeCreate a Canvas Canvas Element 를 이용한 그리기 width, height 를 이용함 <canvas id="myCanvas" width="200" height="1...
Canvas         :Web Browser   :Mobile Browser
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server...
6. GeoLocation
GeoLocationHTML5 Geolocation API is used to get the georaphical position of auser. (단,개인정보이기 때문에 사용자가 승인한 경우만 사용할 수 있습니다.)...
GeoLocation              :Web Browser   :Mobile Browser
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server...
7. Web Storage
Web StorageWith HTML5, web pages can store data locally within the users browser.Browser Support      Browser             ...
Web StorageExample CodeStorage,check browser support for localStorage&sessionStorage LocalStorage/SessionStorage 확인 if(typ...
Web Storage              :Web Browser   :Mobile Browser
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server...
8. App cache
App CacheHTML5에서는 Cache를 개발자에 의해 임의적인 Control 이 가능Browser Support      Browser             Yes/No Internet Explorer       ...
App Cache            :Web Browser   :Mobile Browser
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server...
9. Web Worker
Web WorkerJavaScript 구동 시에 JS 파일을 background 에서 독립적으로 Once Thread 에서 Multi Thread 로 구동 할 수 있다.Browser Support      Browser...
Web Worker             :Web Browser   :Mobile Browser
1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server...
10. Server Sent Event
Server Sent Event사용자의 웹페이를 자동 업데이트 하기 위한 기능Browser Support      Browser             Yes/No Internet Explorer          No F...
Server Sent Event                    :Web Browser   :Mobile Browser
Etc. 부록Canvas VS SVG
부록. Canvas VS SVG           Canvas                            SVG        해상도 의존적                         해상도에 독립적     Even...
Reference Site Listhttp://slides.html5rocks.com*http://html5please.com/http://www.html5rocks.com/en/*http://caniuse.com/#s...
Thank You.
Upcoming SlideShare
Loading in …5
×

Html5 browser api_support

1,019 views

Published on

Html5 browser api_support

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,019
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 browser api_support

  1. 1. SIGONG media스마트연구소안 상 길 대 리2012 . 07 . 18
  2. 2. HTML5 API , HOW IS SUPPORTED BROWSER? AND Mobile
  3. 3. 목차1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  4. 4. TypeName Browser Type
  5. 5. 1. FROM Element
  6. 6. 목차1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  7. 7. Input type Extends functionHTML5 has several new input types for forms. These newfeatures allow better input control and validation.Example Input Type : COLOR <input type=“color” name=“favcolor” />TypeName SupprotedColor X X O X ODate X X O O ODatetime X X O O O
  8. 8. TypeName SupprotedDatetime-local X X O O OEmail X O O X OMonth X X O O ONumber X X O O Oreange X X O O OSearch X X O O XTel X X X X XTime X X O O Ourl X O O X OWeek X X O O O
  9. 9. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  10. 10. 2. Video / DOM
  11. 11. Video TagHTML5 defines a new element which specifies a standard wayto 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 OggInternet Explorer 9 Yse No NoFirefox 4.0 No Yse YseGoogle Chrome 6 Yse Yse YseApple Safari 5 Yse No NoOpera 10.6 No Yse Yse
  12. 12. Video TagHTML5 defines a new element which specifies a standard wayto 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 OggInternet Explorer 9 Yse No NoFirefox 4.0 No Yse YseGoogle Chrome 6 Yse Yse YseApple Safari 5 Yse No NoOpera 10.6 No Yse Yse
  13. 13. Video TagTest link page : http://html5demos.com/video :Web Browser :Mobile Browser
  14. 14. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  15. 15. 3. Audio
  16. 16. Audio Tagdefines a new element which specifies a standard way toembed 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 OggInternet Explorer 9 Yse No NoFirefox 4.0 No Yse YseGoogle Chrome 6 Yse Yse YseApple Safari 5 Yse No NoOpera 10.6 No Yse Yse
  17. 17. Audio TagLink Page : http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all :Web Browser :Mobile Browser
  18. 18. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  19. 19. 4. Drag and Drop
  20. 20. 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" />
  21. 21. 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
  22. 22. Drag and Drop :Web Browser :Mobile Browser
  23. 23. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  24. 24. 5. Canvas
  25. 25. 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 Yse Note : Internet Explorer 8 및 이전 버전에서는 지원 하지 않음
  26. 26. CanvasExample CodeCreate 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
  27. 27. Canvas :Web Browser :Mobile Browser
  28. 28. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  29. 29. 6. GeoLocation
  30. 30. GeoLocationHTML5 Geolocation API is used to get the georaphical position of auser. (단,개인정보이기 때문에 사용자가 승인한 경우만 사용할 수 있습니다.)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 및 이전 버전에서는 지원 하지 않음 Link Page : http://html5demos.com/geo http://slides.html5rocks.com/#geolocation
  31. 31. GeoLocation :Web Browser :Mobile Browser
  32. 32. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  33. 33. 7. Web Storage
  34. 34. Web StorageWith HTML5, web pages can store data locally within the users 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 Yse Note : Internet Explorer 7 및 이전 버전에서는 지원 하지 않음 Link Page : http://www.
  35. 35. 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
  36. 36. Web Storage :Web Browser :Mobile Browser
  37. 37. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  38. 38. 8. App cache
  39. 39. 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
  40. 40. App Cache :Web Browser :Mobile Browser
  41. 41. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  42. 42. 9. Web Worker
  43. 43. 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.
  44. 44. Web Worker :Web Browser :Mobile Browser
  45. 45. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  46. 46. 10. Server Sent Event
  47. 47. 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.
  48. 48. Server Sent Event :Web Browser :Mobile Browser
  49. 49. Etc. 부록Canvas VS SVG
  50. 50. 부록. Canvas VS SVG Canvas SVG 해상도 의존적 해상도에 독립적 Event Handler 지원안함 Event Handler 지원 좋지않은 덱스트 렌더링 거대한 렌더링이 필요한 어플리케이션에 적합(google Map) 결과를 png나 jpg로 저장가능 복작해질경우 랜더링이 느림많은 객체가 주주 다시 그려져야 함으로 게임어플리 케이션으로 부적함 그래픽 집약적인것에 적함 Link Page : http://www.
  51. 51. 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
  52. 52. Thank You.

×