[←] [→] to move on.
Google Chrome 21 over
http://bit.ly/html5dotnet

HTML5、どう使う?

ひらい さだあき
2012/08/25
第9回 .NET中心会議 @ドリコム
http://bit.ly/html5dotnet

Agenda

Profile

History

ウェブの進化

The evolution of the web - ウェブの進化

The History of HTML5

The History of HTML5

Via: Wix.com

HTML5: Past, Present & Future

HTML5 Infographic

W3C 仕様策定の流れ

HTMLの歴史

Year Spec Topic
1993 HTML 1.0IEFT標準化
1997 HTML 3.2 W3C勧告 W3Cではじめての勧告
1997 HTML 4.0 W3C勧告
1999 HTML 4.0.1 W3C勧告
2000 XHTML 1.0 W3C勧告 HTML 4.0.1をXMLで再定義
2001 XHTML 1.1 W3C勧告 機能をモジュール化
2007 HTML5 W3Cで検討開始(WG設立)
2009 XHTML 2.0 XHTML2 WG 活動停止
2011 HTML5 W3C 最終草案

WHATWG

Web Hypertext Application Technology Working Group

2004年に AppleMozillaOpera が WHATWG 設立

ブラウザベンダーはWebアプリケーションのために、HTMLを拡張したかった。

しかし、その当時のW3Cはあまり興味を示さなかった。

Web Applications 1.0 / Web Forms 2.0 を WHATWG が策定した。

It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work.
Tim Berners-Lee

HTML5

2007年、W3C HTML Working Group設立

Web Applications 1.0をベースに、HTML5としての標準化を推進

W3Cより、2008年01月22日に HTML5 の最初の草案が発表

HTML5 Abstract

This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

HTML5

どこまでHTML5?

Semantics Offiline Storage Device Access Connectivity
Multimedia 3D Effects Performance Styling

どこまでHTML5?

どこまでHTML5?

どこまでHTML5?

SEMANTICS

Semantics

Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.

OFFLINE & STORAGE

Offiline Storage

Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.

DEVICE ACCESS

Device Access

Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.

CONNECTIVITY

Connectivity

More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.

MULTIMEDIA

Multimedia

Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!

3D, GRAPHICS & EFFECTS

3D Effects

Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.

PERFORMANCE & INTEGRATION

Performance

Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.

CSS3

Styling

CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.

Samples

HTML5Slides

html5slides
html5slides - A Google HTML5 slide template - Google Project Hosting

Media Queries (Responsive Web Design)

 @media screen and (min-width:480px){}
 @media screen and (min-width:768px){}
 @media screen and (min-width:1024px){}
 @media screen and (min-width:1280px){}

WebGL Bookcase

WebGL Bookcase
WebGL Bookcase

Speech Input

<input type="text" x-webkit-speech />

Speech input is not enabled in your browser.
Try running Google Chrome with the --enable-speech-input flag.

Page Visibility API


Using the Page Visibility API

Fullscreen API


Fullscreen API

HTML5 Terminal

HTML5 Terminal
HTML5 Terminal

WebFonts & Canvas


var ctx = document.getElementById("canvas-area").getContext("2d");
ctx.textAlign    = "center";
ctx.textBaseline = "middle";
document.getElementById("canvas-draw1").addEventListener("click", function(event) {
  ctx.fillStyle = "red";
  ctx.font = "72px 'Monofett', cursive";
  ctx.fillText("WebFonts", 400 , 50);
});
   

WebFonts & Canvas Effects

see also HTML5 Rocks - Typographic effects in canvas

getUserMedia

  // カメラからの入力をとってくる
  navigator.webkitGetUserMedia(
    { video: true, audio: true },
    function(stream) {
      // videoのsrcにカメラからのstreamを渡す
      v.src = window.webkitURL.createObjectURL(stream);
    },
    function(error) {console.log(error);}
  );

HTML5 どう使う?

ブラウザの対応状況

HTML5 使いどころ。(独断と偏見で!)

Webサイト / Webアプリケーション

いろいろありますが、既存アプリケーションのスマートデバイス対応って、けっこう多くないですか?

僕の所感。

PC向け業務アプリケーションを、HTML5対応してもあまり嬉しくないような。doctype変えました!とか。

キャンペーンサイトとか、ゼロから作るサイトなら、最初からHTML5にしておくといいと思う。
レスポンシブウェブデザインを利用したり。

スマホ向けサイトでは、HTML5使わないと、むしろ辛そう。

業務アプリケーションも、スマホ対応するならHTML5を使ったほうが幸せかも。

(もちろんネイティブもいいと思う)

Mobile / Smart Device

Mobile / Smart Device

Mobile / Smart Device

  navigator.geolocation.getCurrentPosition(
    function (position) {
      position.coords.latitude;
      lng = position.coords.longitude;
      console.log(lat);
      console.log(lng);
    }
  );

Offline / Storage

Offline / Storage

Offline / Storage

いろいろ確認するために

まとめ

HTML5、どう使う?