It is not HTML5. but ... / HTML5ではないサイトからHTML5を深える
1 like3,630 views
This document provides an overview of HTML5 technologies including HTML5 markup, microdata/RDFa, WebFonts, Canvas, MediaQueries, performance optimizations like SPDY and HTTP 2.0. It discusses specifications from the W3C and implementations by companies. Tools for testing responsive design, fonts and browser compatibility are also mentioned. The document is written in Japanese and references the author's blog for code samples.
![sadah.github.com
/
@sada_h
/
techlog
html5j
/
HTML5
,
Born
in
1981.
Ruby
/
Rails
/
HTML5
/
JavaScript
/
Java
Kakaku.com,
Inc.
Engineer
2012/08
[ ]
[cena( )]](https://image.slidesharecdn.com/itisnothtml5-but-130219082342-phpapp02/85/It-is-not-HTML5-but-HTML5-HTML5-2-320.jpg)
![HTML5
Markup
html5shiv
createElement
<!--[if lt IE 9]>
<script src=/slideshow/it-is-not-html5-but-html5html5/16624152/"dist/html5shiv.js"></script>
<![endif]-->
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](https://image.slidesharecdn.com/itisnothtml5-but-130219082342-phpapp02/85/It-is-not-HTML5-but-HTML5-HTML5-15-320.jpg)
![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
Sample:
getUserMedia
+
Canvas
+
Video
+
data
URL
Scheme
+
FullScreen
API](https://image.slidesharecdn.com/itisnothtml5-but-130219082342-phpapp02/85/It-is-not-HTML5-but-HTML5-HTML5-32-320.jpg)
![WebFonts
WebFont
Loader
WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ] } };
(function() {
var wf = document.createElement('script');
wf.src = /slideshow/it-is-not-html5-but-html5html5/16624152/(& == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
WebFont
Loader
-
Google
Web
Fonts](https://image.slidesharecdn.com/itisnothtml5-but-130219082342-phpapp02/85/It-is-not-HTML5-but-HTML5-HTML5-34-320.jpg)
It is not HTML5. but ... / HTML5ではないサイトからHTML5を深える
- 1. It is not HTML5. but ... HTML5 HTML5 36 HTML5 - 2013/02/18 @sada_h
- 2. sadah.github.com / @sada_h / techlog html5j / HTML5 , Born in 1981. Ruby / Rails / HTML5 / JavaScript / Java Kakaku.com, Inc. Engineer 2012/08 [ ] [cena( )]
- 6. HTML5
- 9. HTML5
- 12. HTML5
- 14. HTML5 Markup HTML5 Apple LAWSON UNITED ARROWS LTD. BEAMS Specs : HTML5 / HTML 5.1
- 15. HTML5 Markup html5shiv createElement <!--[if lt IE 9]> <script src=/slideshow/it-is-not-html5-but-html5html5/16624152/"dist/html5shiv.js"></script> <![endif]--> 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
- 16. microdata / RDFa microdata RDFa Barack Obama Home - schema.org - Google Google Structured Data Testing Tool
- 17. microdata / RDFa Specs HTML+RDFa 1.1 Last Call: HTML+RDFa 1.1 - W3C News - 07 February 2013 HTML Microdata HTML Microdata Nightly
- 18. 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
- 19. microdata / RDFa Home - schema.org microdata - Google - - Google - - Google Google Structured Data Testing Tool
- 20. MediaQueries World Wide Web Consortium (W3C) Microsoft Japan NTT
- 21. 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.com
- 22. MediaQueries CSS
- 23. MediaQueries Web PC
- 25. MediaQueries bookmarklet Media Queries Viewport Resizer Responsive Design Testing Spec : Media Queries W3C REC
- 26. Check BrowserStack modern.IE Adobe? BrowserLab
- 28. WebFonts sadah.github.com Google Web Fonts Compare
- 29. 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
- 30. WebFonts Extension Chrome - WhatFont Chrome - Google Font Previewer for Chrome
- 31. Canvas Canvas GoogleMaps Thanks komasshu ! / Google Maps - WSJ Spec : HTML Canvas 2D Context
- 32. 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 Sample: getUserMedia + Canvas + Video + data URL Scheme + FullScreen API
- 33. Canvas + WebFonts ctx.fillStyle = "navy"; ctx.font = "72px 'Cabin Sketch', cursive"; ctx.fillText("WebFonts", 200 , 50); Sample: Canvas + WebFonts Canvas WebFonts WebFonts 1
- 34. WebFonts WebFont Loader WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ] } }; (function() { var wf = document.createElement('script'); wf.src = /slideshow/it-is-not-html5-but-html5html5/16624152/(& == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); WebFont Loader - Google Web Fonts
- 35. CSS Fonts Module Level 3 W3C Working Draft 12 February 2013 9.2 The FontLoader Interface W3C Working Draft 11 December 2012 9.2 The FontLoader Interface CSS Fonts Module Level 3, CSS Transitions Drafts Published - W3C News
- 36. 9.2 The FontLoader Interface dictionary LoadFontParameters { DOMString font; DOMString text = " "; FontsReadyCallback onsuccess; FontsReadyCallback onerror; }; // check and start load if appropriate // and fire callback when all loads complete void loadFont(LoadFontParameters params);
- 37. Performance Navigation Timing Navigation Timing (W3c REC) Navigation Timing 2 link prefetch script defer async 4.12 Links ！ HTML5 4.3 Scripting ！ HTML5 data URL Scheme RFC 2397 - The "data" URL scheme
- 38. Performance HTTP1.1 ´ minify / gzip CDN Request IT
- 39. Performance Pingdom Tools : tabelog.com WebPagetest Test Result - Tokyo : tabelog.com
- 40. Request ´
- 41. Performance HTML5 HTTP 2.0 SPDY Hypertext Transfer Protocol version 2.0 / IETF SPDY - The Chromium Projects SPDY Protocol / IETF
- 42. ＾ HTTP TLS SPDY SPDY - Wikipedia ￣
- 43. Multiplexed streams Request prioritization HTTP header compression SPDY: An experimental protocol for a faster web - The Chromium Projects
- 44. html5 - Google
- 45. SSL SPDY Performance on Mobile Networks
- 47. SPDY HTTP CDN SPDY HTTP 2.0
- 49. HTML5( )
- 50. 2013 Web
- 51. HTML5.1 navigationController template Offline
- 52. HTML5 Markup microdata / RDFa WebFonts, Canvas SPDY / HTTP 2.0
- 56. HTML5 MediaQueries cena
- 58. ＾ : ￣
- 59. HTML5
- 60. Happy Happy
- 61. Happy Happy HTML5 HTML5
- 62. The End It is not HTML5. but ... Thank you so mach. http://bit.ly/h5study36sadah @sada_h