Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5

Familiar
HTML5
HTML5
HTML5
Conference
Miyazaki
2013

@sada_h
2013/02/10

html5j.org
/
HTML5

sadah.github.com
/
@sada_h
/
techlog
Ruby
/
Rails
/
HTML5
/
JavaScript
/
Java
Kakaku.com,
Inc.
Engineer
2012/08

[ ]

[cena( )]

HTML5
W3C
Year Spec Topic
1993 HTML
1.0 IEFT
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

HTML5
W3C
Year Spec Topic
2001 XHTML
1.1 W3C

2007 HTML5 W3C (WG )
2009 XHTML
2.0 XHTML2
WG

2011 HTML5 W3C

2012 HTML5 W3C

(2012/12/17)

HTML5
Markup
HTML5

Apple
LAWSON
UNITED
ARROWS
LTD.
BEAMS
spec
HTML5
/
HTML
5.1

HTML5
Markup
html5shiv
createElement



elements = "abbr article aside audio bdi canvas data datalist details figcaption figu
re footer header hgroup mark meter nav output progress section summary time vi
deo".split(" ");
for(var i=0; i<elements.length; i++){
document.createElement(elements[i]);
}

Sample:
HTML5
fall
back
Sample

JavaScript
Window/History/Location
HTML5
Thanks
myakura!
5.2
The
Window
object
—
HTML5
5.5.2
The
History
interface
5.5.3
The
Location
interface
Selectors
API jQuery
Selectors
API
Level
1
jquery-1.8.2.js

WebStorage
WebStorage

Google

twitter

Twitter
Google
Web
Storage

IndexedDB

HTML5Rocks …
IndexedDB TODO
HTML5
Rocks

WebStorage

5MB

QUOTA_EXCEEDED_ERR

localStorage.setItem("key","text");
text = localStorage.getItem("key");

sessionStorage.setItem("key",text);
text = sessionStorage.getItem("key");

Sample:
WebStorage
Sample

CSS3
Backgrounds,Borders
border-radius

text-shadow

cena
transform
/
transition
/
animation

CSS
Backgrounds
and
Borders
Module
Level
3
CSS
Transforms
/
CSS
Animations

modern.IE
BrowserStack
Adobe®
BrowserLab

CSS3
Backgrounds,Borders
border-radius: 10px 10px 10px 10px;
box-shadow: 10px 10px 10px #aaa;
text-shadow: 5px 5px 5px #aaa;

Sample:
CSS3
Backgrounds,
Borders

CSS
Variables

Sample:
CSS
Variables
Module
Level
1

MediaQueries
World
Wide
Web
Consortium
(W3C)
Microsoft
Japan
NTT
bookmarklet

Media
Queries
Responsive
design
testing
tool
–
Viewport
Resizer
–
Device
simulation
tool
Responsive
Design
Testing

MediaQueries
@media screen and (max-width: 479px) {
.media-test { color: red; }
}
@media screen and (min-width: 480px) and (max-width: 1023px) {
.media-test { color: blue; }
}
@media screen and (min-width: 1024px) {
.media-test { color: green;}
}

Sample:
MediaQueries
Web

PC

WebFonts
DevTools
BEAMS
NTT
FONTPLUS

sadah.github.com
Google
Web
Fonts
Compare

WebFonts
/* using Google Web Fonts */
@font-face {
font-family: 'Allerta Stencil';
src: url(http://themes.googleusercontent.com/static/fonts/allertastencil/v4/Cd
SZfRtHbQrBohqmzSdDYKqcRvMv63bhrwdN_8Hu8N8.woff) format('woff');
}

.webfonts{
font-family: 'Allerta Stencil', sans-serif;
}

Sample:
WebFonts
Web
Fonts
IT

Extension

Chrome
-
WhatFont
Chrome
-
Google
Font
Previewer
for
Chrome

Video
…
YouTube
-
HTML5
iBooks
Author
-
26 HTML5
-
YouTube

Canvas
Canvas
GoogleMaps
Thanks
komasshu
!

/
Google
Maps

-
WSJ
spec
HTML
Canvas
2D
Context

Canvas
var ctx = $("#canvas-area")[0].getContext("2d");
// x, y, radius, startAngle, endAngle [, anticlockwise ] )
ctx.arc(200, 100, 50, 0, Math.PI*2, false);
ctx.stroke();

Sample:
Canvas

Canvas
+
WebFonts
ctx.fillStyle = "navy";
ctx.font = "72px 'Cabin Sketch', cursive";
ctx.fillText("WebFonts", 200 , 50);

Sample:
Canvas
+
WebFonts
Canvas WebFonts
WebFonts

1
WebFont
Loader

WebFont
Loader
-
Google
Web
Fonts

SVG

Thanks
Daniel,
wks,
myakura.
Election
2010
-
The
Wall
Street
Journal
Online
Raphaël—JavaScript
Library
The
New
York
Times

SVG
<svg width="800" height="300">
<circle cx="150" cy="150" r="100" stroke="blue" fill="white" stroke-width="5"
/>
</svg>

<img src="image.svg">

Sample:
SVG
Sample:
SVG
+
WebFonts
Raphaël …
Raphaël
·
Australia
Raphaël
·
Text
Rotation

FullScreenAPI

Mac Window
Flickr
-
Photo
Sharing!

FullScreenAPI
$("h1")[0].webkitRequestFullScreen()
$("h1")[0].mozRequestFullScreen()

Sample:
FullScreen
API

History
API

History
API(pjax)

github flickr facebook
sadah
github
IMG_6077
|
Flickr
-
Photo
Sharing!
HTML5
Demo:
HTML5
History
API

File
API
&
Drag
and
Drop
Drag
and
Drop(&
File
API)

-
Google+

File
API
&
Drag
and
Drop
// jquery
// var files = e.originalEvent.dataTransfer.files;
var files = e.dataTransfer.files;
var fileName = files[0].name;
var fileSize = files[0].size;

var reader = new FileReader();
reader.onload = function() {
var line = reader.result;
}
reader.readAsText(file[0], 'UTF-8');

Sample:
Drag
and
Drop

microdata

microdata
Barack
Obama
Home
-
schema.org

-
Google

microdata

-

-

-

Google
Structured
Data
Testing
Tool

microdata
<div itemscope itemtype="http://data-vocabulary.org/Person">
私の名前は<span itemprop="name">ひらいさだあき</span>ですが、
みんなから「<span itemprop="nickname">さだ</span>」と呼ばれています。
私のホームページは、
<a href="http://sadah.github.com" itemprop="url">sadah.github.com</a> です
。
鎌倉に住んでおり、<span itemprop="title">エンジニア</span>として
<span itemprop="affiliation">カカクコム</span>に勤めています。
</div>

Sample:
microdata

microdata

-

-

-

Custom
Data
Attributes

Barack
Obama
3.2.3.9
Embedding
custom
non-visible
data
with
the
data-*
attributes

data
URL
Scheme

RFC
2397
-
The
"data"
URL
scheme

data
URL
Scheme
<img src="data:image/jpeg;base64,/9j/4AAQSkZJ ... "

var strDataURI = document.getElementById("canvas-area").toDataURL("image/pn
g");

Sample:
data
URL
Scheme
Sample:
data
URL
Scheme
+
Canvas

Sample:
Video
+
Canvas
+
data
URL
Scheme
+
FullScreen

Performance
Navigation
Timing
Navigation
Timing
link
prefetch

script
defer
async

4.12
Links
—
HTML5
4.3
Scripting
—
HTML5

Performance
HTML5 HTTP
2.0

SPDY

draft-ietf-httpbis-http2-01
-
Hypertext
Transfer
Protocol
version
2.0
SPDY
-
The
Chromium
Projects
draft-mbelshe-httpbis-spdy-00
-
SPDY
Protocol

Drag
and
Drop

Canvas

The
End
Thank
you
so
mach.
Familiar
HTML5
@sada_h
http://bit.ly/h5m2013b2

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5

Recommended

More Related Content

What's hot (20)

Similar to Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5 (20)

More from Sadaaki HIRAI (7)

Recently uploaded (20)