DeveloperDay

Google

2010

HTML5 Update

Michael(tm) Smith

2010年9月27日月曜日

DeveloperDay

Google

2010

Michael(tm) Smith

• mike@w3.org

• http://twitter.com/sideshowbarker

2010年9月27日月曜日

DeveloperDay

Google

2010

HTML5 and friends

• HTML5 spec itself

• CSS3, CSS vendor extensions

• SVG

• related APIs

2010年9月27日月曜日

DeveloperDay

Google

2010

CSS3 vertical text?• WebKit bug 46123

• https://bugs.webkit.org/show_bug.cgi?id=46123

• “Implement block-flow support for all of layout”

• master bug for vertical-text support

• Dave Hyatt

2010年9月27日月曜日

DeveloperDay

Google

2010

Bug 46123: related bugs• Text

• Text

• Text

• Text

2010年9月27日月曜日

DeveloperDay

Google

2010

Why is vertical text important?

• market for e-books in Japan and Taiwan

• devices with browser engines that have vertical-text support will have more market value

• other e-book publishing platforms already have vertical text support

• bring feature parity to the Web platform for this feature

2010年9月27日月曜日

DeveloperDay

Google

2010

New group: Web Notifications• http://www.w3.org/2010/web-notifications/

• Chair: Anne van Kesteren (Opera)

• Editor: John Gregg (Google)

• http://dev.w3.org/2006/webapi/WebNotifications/publish/

• http://lists.w3.org/Archives/Public/public-web-notification/

2010年9月27日月曜日

DeveloperDay

Google

2010

What are Web notifications?• OS-independent API for exposing platform-level

notification mechanisms to Web applications

• useful for any Web application where real-time notifications are useful

• Web-based e-mail client, instant-messaging clients, auction sites, etc., can integrate their Web app behavior with the notification features of the operating systems of their end usersText

2010年9月27日月曜日

DeveloperDay

Google

2010

Notification interface (DRAFT)

interface Notification : EventTarget {

void show(); void cancel(); attribute Function onclick; attribute Function ondisplay; attribute Function onerror; attribute Function onclose; attribute DOMString replaceId; attribute DOMString dir;};

2010年9月27日月曜日

DeveloperDay

Google

2010

NotificationCenter interfacethe interfaceinterface NotificationCenter { // permission values const unsigned long PERMISSION_ALLOWED = 0; const unsigned long PERMISSION_UNKNOWN = 1; const unsigned long PERMISSION_DENIED = 2;

attribute unsigned long permissionLevel; void requestPermission(in Function callback) raises(Exception); Notification createNotification(in DOMString iconUrl, in DOMString title, in DOMString body);};

2010年9月27日月曜日

DeveloperDay

Google

2010

Examplesvar notification = window.notifications.createNotification("mail.png" , "New Email Received");notification.ondisplay = function() { setTimeout(notification.cancel(), 15000); }notification.show();

var notification = window.notifications.createWebNotification( "/reminder.html?eventId=" + event.id);notification.onclose = function() { cancelReminders(event); }notification.show();

2010年9月27日月曜日

DeveloperDay

Google

2010

New group: Web Performance

• charter: http://www.w3.org/2010/06/webperf.html

• chair: Arvind Jain (Google), Jason Weber (Microsoft)

• editor: Zhiheng Wang (Google)

• draft: Navigation Timing

• http://dev.w3.org/2006/webapi/WebTiming/

2010年9月27日月曜日

DeveloperDay

Google

2010

What is “Navigation Timing”?

• Current JavaScript-based mechanisms cannot provide complete end-to-end user-latency data for a Web app

• allow JavaScript mechanisms to provide complete client-side latency measurements within Web apps, for the purpose of evaluating user's perceived page load time

2010年9月27日月曜日

DeveloperDay

Google

2010

NavigationTiming interfaceinterface NavigationTiming { readonly attribute unsigned longlong navigationStart; readonly attribute unsigned longlong unloadEventStart; readonly attribute unsigned longlong unloadEventEnd; readonly attribute unsigned longlong redirectStart; readonly attribute unsigned longlong redirectEnd; readonly attribute unsigned longlong fetchStart; readonly attribute unsigned longlong domainLookupStart; readonly attribute unsigned longlong domainLookupEnd; readonly attribute unsigned longlong connectStart; readonly attribute unsigned longlong connectEnd; readonly attribute unsigned longlong requestStart; readonly attribute unsigned longlong requestEnd; readonly attribute unsigned longlong responseStart; readonly attribute unsigned longlong responseEnd; readonly attribute unsigned longlong domLoading; readonly attribute unsigned longlong domInteractive; readonly attribute unsigned longlong domContentLoaded; readonly attribute unsigned longlong domComplete; readonly attribute unsigned longlong loadEventStart;

2010年9月27日月曜日

DeveloperDay

Google

2010

NavigationInfo interfaceinterface NavigationInfo { const unsigned short TYPE_NAVIGATE = 0; const unsigned short TYPE_RELOAD = 1; const unsigned short TYPE_BACK_FORWARD = 2; const unsigned short TYPE_NEW_WINDOW = 3; const unsigned short TYPE_RESERVED = 255; readonly attribute unsigned short type; readonly attribute unsigned short redirectCount;};

2010年9月27日月曜日

DeveloperDay

Google

2010

window.performance.timing attributeinterface Performance { readonly attribute NavigationTiming timing; readonly attribute NavigationInfo navigation;};

[Supplemental]interface Window { readonly attribute Performance performance;};

2010年9月27日月曜日

DeveloperDay

Google

2010

Examplevar t = performance.timing;var n = performance.navigation;if (t.loadEnd > 0) { var page_load_time = t.loadEnd - t.navigationStart; if (n.type == n.TYPE_LINK) { alert (page_load_time); }}

2010年9月27日月曜日

DeveloperDay

Google

2010

Web Audio Incubator Group

• http://w3.org/2005/Incubator/audio/wiki/• programatically read and write raw audio data

2010年9月27日月曜日

DeveloperDay

Google

2010

Web Audio APIs• experimental APIs from Google, Mozilla

• Google Audio API in Chrome beta/dev-channel

• Mozilla Audio API now in Firefox 4 beta

• http://chromium.googlecode.com/svn/trunk/samples/audio/specification/specification.html

• Mozilla Audio API now in Firefox 4 beta

• https://wiki.mozilla.org/Audio_Data_API

2010年9月27日月曜日

DeveloperDay

Google

2010

Mozilla Audio Data APIinterface nsIDOMNotifyAudioAvailableEvent : nsIDOMEvent{ readonly attribute jsval frameBuffer; readonly attribute float time;};

HTMLMediaElement additions readonly attribute unsigned long mozChannels; readonly attribute unsigned long mozSampleRate; attribute unsigned long mozFrameBufferLength;

HTMLAudioElement additions void mozSetup(in long channels, in long rate); unsigned long mozWriteAudio(array); unsigned long long mozCurrentSampleOffset();

2010年9月27日月曜日

DeveloperDay

Google

2010

Example: Reading audio<audio id="audio" src="song.ogg"></audio><script> var audio = document.getElementById("audio"); audio.addEventListener('MozAudioAvailable', audioAvailableFunction, false); audio.addEventListener('loadedmetadata', loadedMetadataFunction, false);</script>

2010年9月27日月曜日

DeveloperDay

Google

2010

Example: Writing audio// Create a new audio elementvar audioOutput = new Audio();// Set up audio element with 2 channel, 44.1KHz audio stream.audioOutput.mozSetup(2, 44100);

// Write samples using a Typed Arrayvar samples = new Float32Array([0.242, 0.127, 0.0, -0.058, -0.242, ...]);var numberSamplesWritten = audioOutput.mozWriteAudio(samples);

2010年9月27日月曜日

DeveloperDay

Google

2010

Google AudioNode API interface AudioNode {

void connect(in AudioNode destination, in unsigned long output = 0, in unsigned long input = 0); void disconnect(in int output = 0); readonly attribute AudioContext context; readonly attribute unsigned long numberOfInputs; readonly attribute unsigned long numberOfOutputs; }

2010年9月27日月曜日

DeveloperDay

Google

2010

Example function setupAudioContext() { context = new AudioContext();

compressor = context.createCompressor(); gainNode1 = context.createGainNode();

streamingAudio = document.getElementById('audioTagID'); streamingAudio.audioSource.connect(gainNode1);

gainNode1.connect(compressor); compressor.connect(context.destination); }

2010年9月27日月曜日

DeveloperDay

Google

2010

Example function playSound() { var oneShotSound = context.createBufferSource(); oneShotSound.buffer = dogBarkingBuffer; // Create a filter, panner, and gain node. var lowpass = context.createLowPass2Filter(); var panner = context.createPanner(); var gainNode2 = context.createGainNode(); // Make connections oneShotSound.connect(lowpass); lowpass.connect(panner); panner.connect(gainNode2); gainNode2.connect(compressor); // Play 0.75 seconds from now oneShotSound.noteOn(context.currentTime + 0.75); }

2010年9月27日月曜日

DeveloperDay

Google

2010

new HTML5 parsers• conform to parsing algorithm in HTML5 spec

• ensure same DOM for any given byte stream

• Mozilla was first to implement and ship(Henri Sivonen); now in Firefox 4

• WebKit now has HTML5 parser too (Adam Barth and Eric Seidel); now in Chrome, WebKit

• IE9 parser does not conform to the HTML5 spec but uses some aspects of it

2010年9月27日月曜日

DeveloperDay

Google

2010

WebSocket status• two parts: (1) client-side API, (2) protocol

• client-side API is simple

• WebSocket protocol spec is still unstable

• WebSocket protocol will become more complex, not backward-compatible

• Ian Fette is now editor of protocol spec

• all server libraries will change; browsers too

2010年9月27日月曜日

DeveloperDay

Google

2010

Other new APIs• Contacts API: read access to a user's

unified address book (useful on mobile, etc.)

• Media Capture API: “camera” API; HTML form enhancements to provide access to device image, audio, video capture capabilities of device (useful on mobile, etc.)

2010年9月27日月曜日

DeveloperDay

Google

2010

Contact interfaceinterface Contact { readonly attribute DOMString id; attribute DOMString displayName; attribute ContactName name; attribute DOMString nickname; attribute ContactField[] phoneNumbers; attribute ContactField[] emails; attribute ContactAddress[] addresses; attribute ContactField[] ims; attribute ContactOrganization[] organizations; attribute DOMString updated; attribute DOMString birthday; attribute DOMString anniversary; attribute DOMString gender; attribute DOMString note; attribute ContactField[] photos; attribute ContactField[] tags; attribute ContactField[] relationships; attribute ContactField[] urls; attribute DOMString utcOffset;};

2010年9月27日月曜日

DeveloperDay

Google

2010

Contacts API examplefunction successContactFindCallback(contacts) { // do something with resulting contact objects for (var i in contacts) alert(contacts[i].displayName); // ...}

function generalErrorCB(error) { // do something with resulting errors alert(error.code); // ...}

// Perform address book search. Obtain 'name' and 'emails' properties // and initially filter the list to Contact records containing 'Bob':navigator.service.contacts.find(['name', 'emails'], successContactFindCallback, generalErrorCB, {filter: 'Bob'} );

2010年9月27日月曜日

DeveloperDay

Google

2010

Capture API<input type="file" accept="image/*" id="capture"> <input type="file" accept="image/*;capture=camera" id="capture">

2010年9月27日月曜日

DeveloperDay

Google

2010

Examplevar captureInput = document.getElementById('capture');var file = captureInput.files[0];if (file) { file.getFormatData(displayFormatData, errorHandler); //asynch}// success callback when getting format datafunction displayFormatData(formatData) { var mainType = file.type.split("/")[0]; // "image", "video" or "audio" var mediaDescriptionNode = document.createElement("p"); if (mainType === "image") { mediaDescriptionNode.appendChild(document.createTextNode( "Dimensions " + formatData.width + "x" + formatData.height); } else { mediaDescriptionNode.appendChild(document.createTextNode( "Duration: " + formatData.duration + "s"); } captureInput.parentNode.insertBefore(mediaDescriptionNode, captureInput);

2010年9月27日月曜日

DeveloperDay

Google

2010

HTML5 features unimplemented

• HTML5 forms (Web Forms 2) still only completely implemented in Opera; other browsers still like many of the UI parts

• HTML5 <details> element; expandable view of detail info, as in, e.g., OS “Get Info”

• HTML5 context-menu mechanism; enables a Web app to customize browser context menu (menu shown by right-clicking)

2010年9月27日月曜日

DeveloperDay

Google

2010

HTML5 details element<section class="progress window"> <h1>Copying "Really Achieving Your Childhood Dreams"</h1> <details> <summary>Copying... <progress max="3755" value="9752"></progress> 25%</summary> <dl> <dt>Transfer rate:</dt> <dd>452KB/s</dd> <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd> <dt>Remote filename:</dt> <dd>/www/lectures/raycd.m4v</dd> <dt>Duration:</dt> <dd>01:16:27</dd> <dt>Color profile:</dt> <dd>SD (6-1-6)</dd> <dt>Dimensions:</dt> <dd>320×240</dd> </dl> </details></section>

2010年9月27日月曜日

DeveloperDay

Google

2010

HTML5 context menu<form name="npc"> <label>Character name: <input name=char type=text contextmenu=namemenu></label> <menu type=context id=namemenu> <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandName()"> <command label="Prefill fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)"> </menu></form>

2010年9月27日月曜日

DeveloperDay

Google

2010

Thanks

• mike@w3.org

• http://twitter.com/sideshowbarker

2010年9月27日月曜日