0
Web Standards Support      in WebKit      허 준 회   (Joone Hur)          Collabora
About me• WebKit Committer• Working for Collabora (http://collabora.com)• Working on WebKitGtk+, WebKit-Clutter• Blog: htt...
Contents• Custom scheme and content handlers• AddSearchProvider• Navigation Timing• Device API   o Battery Status Event   ...
Custom scheme and content handlers• 웹 사 이 트 에 서 Protocol 이 나 mimetype 을 임 의 로 등 록 하 여 특 정  URL 에 서 처 리 하 도 록 함• Interface ...
Example<head>    <script type="text/javascript">        function RegisterHandler () {            navigator.registerProtoco...
AddSearchProvider• Search Box 에 검 색 엔 진 을 등 록 하 는 기 능  • 지 원 하 는 interface   o window.external.AddSearchProvider()   o win...
Navigation Timing• This specification defines an interface for web applications  to access timing information related to n...
Performance Timing, Performance Navigation
Examplevar start = new Date().getTime();function onLoad() {  var now = new Date().getTime();  var latency = now - start;  ...
Demo Page for Navigation Timinghttp://webtimingdemo.appspot.com/
Device API• Battery Status Event Specification   o http://www.w3.org/TR/battery-status/   o https://bugs.webkit.org/show_b...
HTML Media Capture<input type="file" accept="image/*" capture="camera"id="capture"> • HTML Media Capture is the HTML Form ...
Unified Storage Quota API• The feature/API is to allow webapps to request or query per-  origin storage quota across multi...
Examplefunction errorCallback(error){    testFailed("Error occurred: " + error);    finishJSTest();}var grantedQuota;funct...
Shadow DOM API• Expose the minimum subset of the larger Web Component  Model• Shadow DOM refers to the ability of the brow...
Example<!DOCTYPE HTML> <html> <body> The objects downloading progress:<progress id="foo" value="33" max="100"></progress> ...
Example#if defined(ENABLE_PROGRESS_TAG) && ENABLE_PROGRESS_TAG/* progress */progress {    -webkit-appearance: progress-bar...
WebCLSamsung has added WebCL JS API to WebKitWebCL is a new activity in Khronos that is defining JavaScriptbindings to Ope...
WebKit2 on Nokia N9• Provides QtWebKit2 based browser• Reference   o http://conversations.nokia.com/2011/06/28/nokia-n9-  ...
고 맙 습 니 다   !
Upcoming SlideShare
Loading in...5
×

Web Standards Support in WebKit

4,484

Published on

Presented at HTML5 KIG 7th Meeting

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
4,484
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Web Standards Support in WebKit"

  1. 1. Web Standards Support in WebKit 허 준 회 (Joone Hur) Collabora
  2. 2. About me• WebKit Committer• Working for Collabora (http://collabora.com)• Working on WebKitGtk+, WebKit-Clutter• Blog: http://opensoftware.kr• Email: joone.hur@collabora.com
  3. 3. Contents• Custom scheme and content handlers• AddSearchProvider• Navigation Timing• Device API o Battery Status Event o Contacts API o HTML Media Capture API• Unified Storage Quota API• Shadow DOM API• WebKit News o WebCL & WebKit2 based Browser
  4. 4. Custom scheme and content handlers• 웹 사 이 트 에 서 Protocol 이 나 mimetype 을 임 의 로 등 록 하 여 특 정 URL 에 서 처 리 하 도 록 함• Interface o window.navigator.registerProtocalHandler(scheme, url, title) o window.navigator.registerContentHandler(mineType, url, title)• References o http://dev.w3.org/html5/spec/Overview.html#dom-navigator- registerprotocolhandler o http://trac.webkit.org/changeset/50477 o https://developer.mozilla.org/En/DOM:window.navigator.register ContentHandler o https://developer.mozilla.org/en/DOM/window.navigator.registerP rotocolHandler• Firefox, Chromium 지 원
  5. 5. Example<head>    <script type="text/javascript">        function RegisterHandler () {            navigator.registerProtocolHandler ("mailto","http://help.dottoro.com/protocolHandler.php?uri=%s", "Dottoro mailtoprotocol handler");    }    </script></head><body>    <button onclick="RegisterHandler ();">Register a handler for the mailtoprotocol!</button></body>
  6. 6. AddSearchProvider• Search Box 에 검 색 엔 진 을 등 록 하 는 기 능  • 지 원 하 는 interface o window.external.AddSearchProvider() o window.external.IsSearchProviderInstalled()• Firefox, IE, Chromium 에 서 지 원
  7. 7. Navigation Timing• This specification defines an interface for web applications to access timing information related to navigation and elements.• The API will allow web application to gather performance metrics about various factors such as page redirect, DNS lookup, connection & secure connection statistics, request/response time, various events, etc• Chromium, Firefox Support• Reference o http://www.w3.org/TR/navigation-timing/
  8. 8. Performance Timing, Performance Navigation
  9. 9. Examplevar start = new Date().getTime();function onLoad() {  var now = new Date().getTime();  var latency = now - start;  alert("page loading time: " + latency);}function onLoad() {  var now = new Date().getTime();  var page_load_time = now - performance.timing.navigationStart;  alert("User-perceived page loading time: " + page_load_time);}
  10. 10. Demo Page for Navigation Timinghttp://webtimingdemo.appspot.com/
  11. 11. Device API• Battery Status Event Specification o http://www.w3.org/TR/battery-status/ o https://bugs.webkit.org/show_bug.cgi?id=62698• Contacts API o http://www.w3.org/TR/2011/WD-contacts-api-20110616/ o https://bugs.webkit.org/show_bug.cgi?id=63223• HTML Media Capture
  12. 12. HTML Media Capture<input type="file" accept="image/*" capture="camera"id="capture"> • HTML Media Capture is the HTML Form Based specification that allows the user to take a picture, record a sound file, or record a video like the file picker interface.• The "capture" attribute can have the following values: o camera. microphone, camcorder, filesystem• References o http://www.w3.org/TR/html-media-capture/ o https://bugs.webkit.org/show_bug.cgi?id=63062
  13. 13. Unified Storage Quota API• The feature/API is to allow webapps to request or query per- origin storage quota across multiple storage types (e.g. IndexedDB, SQL DB and FileSystemAPI)• References o http://lists.w3.org/Archives/Public/public- webapps/2011JanMar/0346.html o https://bugs.webkit.org/show_bug.cgi?id=60355
  14. 14. Examplefunction errorCallback(error){    testFailed("Error occurred: " + error);    finishJSTest();}var grantedQuota;function quotaCallback(newQuota){    grantedQuota = newQuota;    // We must be given 0 quota, the same amount as we requested.    shouldBe("grantedQuota", "0");    finishJSTest();}if (window.webkitStorageInfo) {    window.jsTestIsAsync = true;    // Requesting 0 quota for testing     // (this request must be almost always granted     // without showing any platform specific notification UI).    webkitStorageInfo.requestQuota(webkitStorageInfo.TEMPORARY, 0, quotaCallback, errorCallback);} else      debug("This test requires window.webkitStorageInfo.");
  15. 15. Shadow DOM API• Expose the minimum subset of the larger Web Component Model• Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree• API o Element.webkitShadow o Element.webkitPseudo o document.webkitCreateShadow() o window.WebKitShadowRootConstructor o window.WebKitTreeScopeConstructor• References o http://lists.w3.org/Archives/Public/public-webapps/2011AprJun/1345.html
  16. 16. Example<!DOCTYPE HTML> <html> <body> The objects downloading progress:<progress id="foo" value="33" max="100"></progress> </body> </html>var download_progress = document.getElementsById("foo");console.log(download_progress.firstChild); // returns nullroot = download_progress.shadowRoot;
  17. 17. Example#if defined(ENABLE_PROGRESS_TAG) && ENABLE_PROGRESS_TAG/* progress */progress {    -webkit-appearance: progress-bar;    -webkit-box-sizing: border-box;    display: inline-block; <progress>    height: 1em;    width: 10em; ┗ <div> ::-webkit-progress-bar    vertical-align: -0.2em;} ┗ <div>::-webkit-progress-valueprogress::-webkit-progress-bar {    background-color: gray;    height: 100%;    width: 100%;    -webkit-box-sizing: border-box;}progress::-webkit-progress-value {    background-color: green;    height: 100%;    width: 50%; /* should be removed later */    -webkit-box-sizing: border-box;}#endif
  18. 18. WebCLSamsung has added WebCL JS API to WebKitWebCL is a new activity in Khronos that is defining JavaScriptbindings to OpenCLhttp://code.google.com/p/webcl/
  19. 19. WebKit2 on Nokia N9• Provides QtWebKit2 based browser• Reference o http://conversations.nokia.com/2011/06/28/nokia-n9- opening-the-browser/
  20. 20. 고 맙 습 니 다 !
  1. A particular slide catching your eye?

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

×