Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイクスミス)

Developer
Day
Google
2010
HTML5 Update
Michael(tm) Smith
2010年9月27日月曜日

Developer
Day
Google
2010
Michael(tm) Smith
•mike@w3.org
• http://twitter.com/sideshowbarker

Developer
Day
Google
2010
HTML5 and friends
• HTML5 spec itself
• CSS3, CSS vendor extensions
• SVG
• related APIs

Developer
Day
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

Developer
Day
Google
2010
Bug 46123: related bugs
• Text
• Text
• Text
• Text

Developer
Day
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

Developer
Day
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/

Developer
Day
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

Developer
Day
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;
};

Developer
Day
Google
2010
NotificationCenter interface
the interface
interface 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);
};

Developer
Day
Google
2010
Examples
var 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();

Developer
Day
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/

Developer
Day
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

Developer
Day
Google
2010
NavigationTiming interface
interface 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;

Developer
Day
Google
2010
NavigationInfo interface
interface 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;
};

Developer
Day
Google
2010
window.performance.timing attribute
interface Performance {
readonly attribute NavigationTiming timing;
readonly attribute NavigationInfo navigation;
};
[Supplemental]
interface Window {
readonly attribute Performance performance;
};

Developer
Day
Google
2010
Example
var 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);
}
}

Developer
Day
Google
2010
Web Audio Incubator Group
• http://w3.org/2005/Incubator/audio/wiki/
• programatically read and write raw audio data

Developer
Day
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

Developer
Day
Google
2010
Mozilla Audio Data API
interface 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();

Developer
Day
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>

Developer
Day
Google
2010
Example: Writing audio
// Create a new audio element
var audioOutput = new Audio();
// Set up audio element with 2 channel, 44.1KHz audio stream.
audioOutput.mozSetup(2, 44100);
// Write samples using a Typed Array
var samples = new Float32Array([0.242, 0.127, 0.0, -0.058,
-0.242, ...]);
var numberSamplesWritten =
audioOutput.mozWriteAudio(samples);

Developer
Day
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;
}

Developer
Day
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);

}

Developer
Day
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);

}

Developer
Day
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

Developer
Day
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

Developer
Day
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.)

Developer
Day
Google
2010
Contact interface
interface 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;
};

Developer
Day
Google
2010
Contacts API example
function 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'}
);

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

Developer
Day
Google
2010
Example
var captureInput = document.getElementById('capture');
var file = captureInput.files[0];
if (file) {
file.getFormatData(displayFormatData, errorHandler); //asynch
}
// success callback when getting format data
function 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);

Developer
Day
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)

Developer
Day
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>

Developer
Day
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>

Developer
Day
Google
2010
Thanks
•mike@w3.org
• http://twitter.com/sideshowbarker

Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイクスミス)

Recommended

More Related Content

What's hot (20)

Similar to Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイクスミス) (20)

More from Google Developer Relations Team (12)

Recently uploaded (20)