HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
5 likes•3,946 views
This document provides an overview of HTML5, including its history and specifications. It discusses key HTML5 features such as Web Storage, microdata, media queries, canvas, web fonts, and data URLs. Examples are given for many of these features. The document concludes by thanking the reader for changing their view of HTML5 from "Not HTML5" to recognizing it as HTML5.
![/
/
/
HTML5
Born
in
1981.
Ruby
/
Rails
/
HTML5
/
JavaScript
/
Java
Kakaku.com,
Inc.
Engineer
2012/08
sadah.github.io @sada_h techlog
html5j
[ ]
[cena( )]](https://image.slidesharecdn.com/changehtml5fromnothtml5-130429072600-phpapp02/85/HTML5-HTML5-Change-HTML5-from-Not-HTML5-2-320.jpg)
![HTML5
Markup
createElement
html5shiv
[if lt IE 9]>
<script src="dist/html5shiv.js">](https://image.slidesharecdn.com/changehtml5fromnothtml5-130429072600-phpapp02/85/HTML5-HTML5-Change-HTML5-from-Not-HTML5-17-320.jpg)
HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
- 1. HTML5 HTML5 Change HTML5 from not HTML5. !! HTML5 2013 2013/04/20 @sada_h http://bit.ly/html5efsta
- 2. / / / HTML5 Born in 1981. Ruby / Rails / HTML5 / JavaScript / Java Kakaku.com, Inc. Engineer 2012/08 sadah.github.io @sada_h techlog html5j [ ] [cena( )]
- 4. HTML5
- 5. HTML5 YearYear 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
- 6. HTML5 YearYear 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)
- 7. 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 - Wikipedia W3C - Wikipedia
- 10. is not HTML5. is HTML5.
- 11. HTML5
- 14. HTML5
- 16. HTML5 Markup HTML5 Specs : / cena( ) Apple LAWSON UNITED ARROWS LTD. BEAMS HTML5 HTML 5.1
- 17. HTML5 Markup createElement html5shiv [if lt IE 9]> <script src="dist/html5shiv.js">
- 18. WebStorage WebStorage Google twitter Twitter Google Web Storage
- 19. WebStorage 5MB QUOTA_EXCEEDED_ERR localStorage.setItem("key","text"); text = localStorage.getItem("key"); sessionStorage.setItem("key",text); text = sessionStorage.getItem("key"); Sample: WebStorage Sample
- 20. microdata / RDFa microdata RDFa Barack Obama Home - schema.org - Google Google Structured Data Testing Tool
- 21. microdata / RDFa Specs HTML+RDFa 1.1 Last Call: HTML+RDFa 1.1 - W3C News - 07 February 2013 HTML Microdata HTML Microdata Nightly
- 22. 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
- 23. microdata / RDFa Home - schema.org microdata - Google - - Google - - Google Google Structured Data Testing Tool
- 24. Custom Data Attributes Barack Obama 3.2.3.9 Embedding custom non-visible data with the data-* attributes
- 25. MediaQueries World Wide Web Consortium (W3C) Microsoft Japan NTT
- 26. 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
- 27. MediaQueries CSS
- 29. MediaQueries bookmarklet Spec : Media Queries Viewport Resizer Responsive Design Testing Media Queries W3C REC
- 31. WebFonts sadah.github.io Google Web Fonts Compare
- 32. 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
- 33. WebFonts Extension Chrome - WhatFont Chrome - Google Font Previewer for Chrome
- 34. Canvas Canvas GoogleMaps Thanks komasshu ! Spec : / Google Maps - WSJ HTML Canvas 2D Context
- 35. data URL Scheme RFC 2397 - The "data" URL scheme
- 36. 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 URL Scheme + FullScreen API
- 37. HTML5
- 38. HTML5 HTML5 HTML5 doctype html5shiv HTML5 (header ) cena( )
- 42. HTML5
- 43. HTML5( )
- 47. Happy
- 49. The End Change HTML5 from Not HTML5. Thank you so mach. http://bit.ly/html5efsta @sada_h