SIGONG media                Smart R&DSangKil. An Deputy.Manager                2012. 07. 18
HTML5 API , HOW IS SUPPORTED      BROWSER?              AND Mobile
Desktop                              Tablets                     Mobile Element or      Chrome   Inter    Opere    Firef  ...
Desktop                                 Tablets                    Mobile Element or       Chrome   Inter    Opere    Fire...
Desktop                            Tablets                   Mobile                      Chrom   Inter   Opere   Firef   S...
Desktop                            Tablets                   Mobile                    Chrom   Inter   Opere   Firef   Saf...
목차1.FROMS2.Video / DOM3.Audio4.Drag and Drop5.Canvas6.Geolocation7.Web Storage8.App Cache9.Web Workers10.SSE(Server Sent E...
1. FROM Element
Input type Extended functionHTML5 has several new input types for forms. These newfeatures allow better input control and ...
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 에서 MultiThread 로 구동 할 수 있다.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   ...
Server Sent Event                    :Web Browser   :Mobile Browser
Etc. 부록Canvas VS SVG
부록. Canvas VS SVG            Canvas                                SVG해상도 의존적                            해상도에 독립적Event Han...
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.0

362

Published on

Html5 browser api_support_
Mobile & Tablet & Web

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
362
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 browser api_support_1.0

  1. 1. SIGONG media Smart R&DSangKil. An Deputy.Manager 2012. 07. 18
  2. 2. HTML5 API , HOW IS SUPPORTED BROWSER? AND Mobile
  3. 3. 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 Partiaiput type=text Yes Yes Yes Yes Partia l l l l l l linput type=sea Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yesrchinput type=tel Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yesinput type=url Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yesinput type=ema Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yesilinput type=dat Partia Partia No No Yes No No Yes Yes Yes Noetime l linput type=dat Partia Partia Yes No Yes No No Yes Yes Yes Noe l linput type=mon Partia Partia No No Yes No No Yes Yes Yes Noth l linput type=wee Partia Partia Partia Partia No No Yes No No Yes Nok l l l linput type=tim Partia Partia No No Yes No No Yes Yes Yes Noe l linput type=dat Partia Partia No No Yes No No Yes Yes Yes Noetime-local l linput type=num Partia Partia Partia Yes No Yes No Yes Yes Yes Yesber l l linput type=ran Yes No Yes No Yes Yes Yes Yes Yes Yes Yesge* 현재 상용 버전(가장 많이 사용중인) 브라우저 별 지원여부
  4. 4. 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 8input type=col Partia Partia Partia Partia Partia Partial No No No No Noor l l l l linput type=che Partia Yes Yes Yes Yes Yes Yes Yes Yes Yes Yesckbox linput type=ima Partia Partia Partia Partia Partia Partia Partia Partial No Yes Yesge l l l l l l linput type=fil Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yese Partia Partia Partia Partia Partiatextarea Yes Yes Yes Yes Yes Yes l l l l l Partiaselect Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes l Partia Partia Partia Partia Partia Partia Partia Partiafieldset Partial Yes Yes l l l l l l l ldatalist Yes No Yes Yes No No No No No No Yeskeygen Yes No Yes No Yes Yes Yes Yes Yes Yes Nooutput Yes No Yes Yes Yes Yes Yes Yes Yes Yes Noprogress Yes No Yes Yes Yes No Yes No No No Yesmeter Yes No Yes No Yes No Yes No No No No* 현재 상용 버전(가장 많이 사용중인) 브라우저 별 지원여부
  5. 5. Desktop Tablets Mobile 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 YesServer-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 ✘ ✔ ✔ ✔ ✔ ✔ ✔ Yes Yes Yes Yes Yes Yes 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 ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔* 현재 상용 버전(가장 많이 사용중인) 브라우저 별 지원여부
  6. 6. Desktop Tablets Mobile 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 ✘ ✔ ✔ ✔ Yes Yes Yes Yes Yes Yes Web SQL Database Yes No Yes No ✘ No ✘ ✔ ✔ ✔ ✔ ✔ ✔ Yes Yes Yes Yes Yes Yes Web Workers Yes No Yes No ✘ No ✘ ✔ ✔ ✔ ✔ ✔ ✔ Yes Yes Yes Shared Workers Yes No Yes No ✘ No ✘ No ✘ No ✘ No ✘ ✔ ✔ ✔ YesWeb Notifications Yes No No No ✘ No ✘ No ✘ No ✘ No✘ No ✘ No ✘ ✔* 현재 상용 버전(가장 많이 사용중인) 브라우저 별 지원여부
  7. 7. 목차1.FROMS2.Video / DOM3.Audio4.Drag and Drop5.Canvas6.Geolocation7.Web Storage8.App Cache9.Web Workers10.SSE(Server Sent Event)
  8. 8. 1. FROM Element
  9. 9. Input type Extended 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
  10. 10. 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
  11. 11. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  12. 12. 2. Video / DOM
  13. 13. 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
  14. 14. 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
  15. 15. Video TagTest link page : http://html5demos.com/video :Web Browser :Mobile Browser
  16. 16. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  17. 17. 3. Audio
  18. 18. 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
  19. 19. Audio TagLink Page : http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all :Web Browser :Mobile Browser
  20. 20. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  21. 21. 4. Drag and Drop
  22. 22. 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" />
  23. 23. 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
  24. 24. Drag and Drop :Web Browser :Mobile Browser
  25. 25. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  26. 26. 5. Canvas
  27. 27. 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 및 이전 버전에서는 지원 하지 않음
  28. 28. 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
  29. 29. Canvas :Web Browser :Mobile Browser
  30. 30. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  31. 31. 6. GeoLocation
  32. 32. 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
  33. 33. GeoLocation :Web Browser :Mobile Browser
  34. 34. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  35. 35. 7. Web Storage
  36. 36. 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.
  37. 37. 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
  38. 38. Web Storage :Web Browser :Mobile Browser
  39. 39. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  40. 40. 8. App cache
  41. 41. 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
  42. 42. App Cache :Web Browser :Mobile Browser
  43. 43. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  44. 44. 9. Web Worker
  45. 45. Web WorkerJavaScript 구동 시에 JS 파일을 background 에서 독립적으로 Once Thread 에서 MultiThread 로 구동 할 수 있다.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.
  46. 46. Web Worker :Web Browser :Mobile Browser
  47. 47. 1. FROMS2. Video / DOM3. Audio4. Drag and Drop5. Canvas6. Geolocation7. Web Storage8. App Cache9. Web Workers10.SSE(Server Sent Event)
  48. 48. 10. Server Sent Event
  49. 49. 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.
  50. 50. Server Sent Event :Web Browser :Mobile Browser
  51. 51. Etc. 부록Canvas VS SVG
  52. 52. 부록. Canvas VS SVG Canvas SVG해상도 의존적 해상도에 독립적Event Handler 지원안함 Event Handler 지원좋지않은 덱스트 렌더링 거대한 렌더링이 필요한 어플리케이션에 적합 (google Map)결과를 png나 jpg로 저장가능 복작해질경우 랜더링이 느림많은 객체가 주주 다시 그려져야 함으로 그래 게임어플리 케이션으로 부적함픽 집약적인것에 적함 Link Page : http://www.
  53. 53. 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
  54. 54. Thank You.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×