HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

49
HTML5 HTML5 Change HTML5 from not HTML5. !! HTML5 2013 2013/04/20 @sada_h http://bit.ly/html5efsta

description

HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5. エフスタ!!とHTML5とか勉強会 2013 ふくしまの春風! 2013/04/20

Transcript of HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

Page 1: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5

HTML5Change HTML5 from not HTML5.

!! HTML5 20132013/04/20

@sada_h

http://bit.ly/html5efsta

Page 2: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

/ /

/ HTML5

Born in 1981.

Ruby / Rails / HTML5 / JavaScript / Java

Kakaku.com, Inc. Engineer 2012/08

sadah.github.io @sada_h techlog

html5j

[ ]

[cena( )]

Page 3: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
Page 4: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5

Page 5: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5YearYear SpecSpec TopicTopic

1993 HTML 1.0 IETF

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

Page 6: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5YearYear SpecSpec TopicTopic

2001 XHTML 1.1 W3C

2007 HTML5 W3C (WG )

2009 XHTML 2.0 XHTML2 WG

2011 HTML5 W3C

2012 HTML5 W3C (2012/12/17)

Page 7: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

W3C Working Draft, WD

Last Call Working Draft

Candidate Recommendation, CR

HTML5 ( )

Proposed Recommendation, PR

W3C W3C Recommendation, REC

2012/12/17

World Wide Web Consortium - WikipediaW3C - Wikipedia

Page 9: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
Page 10: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

is not HTML5.

is HTML5.

Page 11: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5

Page 12: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5

2012/12/17

W3C

Page 13: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
Page 14: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5

Page 15: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
Page 17: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5 Markup createElement html5shiv

[if lt IE 9]>

<script src="dist/html5shiv.js">

Page 18: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

WebStorageWebStorage Google twitter

Twitter

Google

Web Storage

Page 19: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

WebStorage

5MB

QUOTA_EXCEEDED_ERR

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

text = localStorage.getItem("key");

sessionStorage.setItem("key",text);

text = sessionStorage.getItem("key");

Sample: WebStorage Sample

Page 20: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

microdata / RDFa microdata RDFa

Barack Obama

Home - schema.org

- Google

Google Structured Data Testing Tool

Page 21: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

microdata / RDFaSpecs

HTML+RDFa 1.1

Last Call: HTML+RDFa 1.1 - W3C News - 07February 2013

HTML Microdata

HTML Microdata Nightly

Page 22: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

microdata<div itemscope itemtype="http://data-vocabulary.org/Person">

私の名前は<span itemprop="name">ひらい さだあき</span>ですが、

みんなから「<span itemprop="nickname">さだ</span>」と呼ばれています。

私のホームページは、

<a href="http://sadah.github.io" itemprop="url">sadah.github.io</a> です。

鎌倉に住んでおり、<span itemprop="title">エンジニア</span>として

<span itemprop="affiliation">カカクコム</span>に勤めています。

</div>

Sample: microdata

Page 24: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

Custom Data Attributes

Barack Obama

3.2.3.9 Embedding custom non-visible data with thedata-* attributes

Page 25: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

MediaQueries

World Wide Web Consortium (W3C)

Microsoft Japan

NTT

Page 26: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

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

sadah.github.io

Page 27: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

MediaQueries

CSS

Page 28: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

MediaQueries

PC

cena

Page 29: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

MediaQueriesbookmarklet

Spec :

Media Queries

Viewport Resizer

Responsive Design Testing

Media Queries W3C REC

Page 31: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

WebFonts

sadah.github.io

Google Web Fonts Compare

Page 32: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

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: WebFontsWeb Fonts IT

Page 35: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

data URL Scheme

RFC 2397 - The "data" URL scheme

Page 36: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

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: getUserMedia + Canvas + Video + data URLScheme + FullScreen API

Page 37: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5

Page 38: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5 HTML5

HTML5

doctype

html5shiv

HTML5

(header )

cena( )

Page 39: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5

Rails

jQuery HTML5

Page 40: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5HTML5

HTML5

HTML5

Page 41: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
Page 42: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5

Page 43: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

HTML5( )

Page 44: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
Page 45: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
Page 46: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
Page 47: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

Happy

Page 48: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

Happy

HTML5

HTML5

Page 49: HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

The End

Change HTML5 from Not HTML5.

Thank you so mach.http://bit.ly/html5efsta

@sada_h