Post on 18-Dec-2014
description
HTML5
HTML5Change HTML5 from not HTML5.
!! HTML5 20132013/04/20
@sada_h
http://bit.ly/html5efsta
/ /
/ HTML5
Born in 1981.
Ruby / Rails / HTML5 / JavaScript / Java
Kakaku.com, Inc. Engineer 2012/08
sadah.github.io @sada_h techlog
html5j
[ ]
[cena( )]
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
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)
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
HTML5
HTML5
2012/12/17
W3C
HTML5
HTML5 MarkupHTML5
Specs : /
cena( )
Apple
LAWSON
UNITED ARROWS LTD.
BEAMS
HTML5 HTML 5.1
HTML5 Markup createElement html5shiv
[if lt IE 9]>
<script src="dist/html5shiv.js">
WebStorageWebStorage Google twitter
Web Storage
WebStorage
5MB
QUOTA_EXCEEDED_ERR
localStorage.setItem("key","text");
text = localStorage.getItem("key");
sessionStorage.setItem("key",text);
text = sessionStorage.getItem("key");
Sample: WebStorage Sample
microdata / RDFa microdata RDFa
Barack Obama
Home - schema.org
Google Structured Data Testing Tool
microdata / RDFaSpecs
HTML+RDFa 1.1
Last Call: HTML+RDFa 1.1 - W3C News - 07February 2013
HTML Microdata
HTML Microdata Nightly
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
microdata / RDFa
Home - schema.org
microdata - Google
Google Structured Data Testing Tool
Custom Data Attributes
Barack Obama
3.2.3.9 Embedding custom non-visible data with thedata-* attributes
MediaQueries
World Wide Web Consortium (W3C)
Microsoft Japan
NTT
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
MediaQueries
CSS
MediaQueries
PC
cena
MediaQueriesbookmarklet
Spec :
Media Queries
Viewport Resizer
Responsive Design Testing
Media Queries W3C REC
WebFonts
DevTools
BEAMS
NTT
FONTPLUS
WebFonts
sadah.github.io
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: WebFontsWeb Fonts IT
WebFonts Extension
Chrome - WhatFont
Chrome - Google Font Previewer for Chrome
CanvasCanvas GoogleMaps
Thanks komasshu !
Spec :
/ Google Maps
- WSJ
HTML Canvas 2D Context
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: getUserMedia + Canvas + Video + data URLScheme + FullScreen API
HTML5
HTML5
Rails
jQuery HTML5
HTML5HTML5
HTML5
HTML5
HTML5
HTML5( )
Happy
Happy
HTML5
HTML5
The End
Change HTML5 from Not HTML5.
Thank you so mach.http://bit.ly/html5efsta
@sada_h