Download as PDF, PPTX
![/ / / 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/75/HTML5-HTML5-Change-HTML5-from-Not-HTML5-2-2048.jpg)
![HTML5 Markup createElement html5shiv [if lt IE 9]> <script src="dist/html5shiv.js">](https://image.slidesharecdn.com/changehtml5fromnothtml5-130429072600-phpapp02/75/HTML5-HTML5-Change-HTML5-from-Not-HTML5-17-2048.jpg)
Uploaded bySadaaki HIRAI
HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
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ではないサイトを 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.
- 5. HTML5 YearYear SpecSpec TopicTopic 1993HTML 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 2001XHTML 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.
- 12.
- 14.
- 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"> 私の名前は<spanitemprop="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.
- 28.
- 29. MediaQueries bookmarklet Spec : Media Queries Viewport Resizer Responsive Design Testing Media Queries W3C REC
- 30.
- 31.
- 32. WebFonts /* using GoogleWeb 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 <imgsrc="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.
- 38. HTML5 HTML5 HTML5 doctype html5shiv HTML5 (header ) cena( )
- 39.
- 40.
- 42.
- 43.
- 47.
- 48.
- 49. The End Change HTML5 from Not HTML5. Thank you so mach. http://bit.ly/html5efsta @sada_h