It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える

1,967 views
1,961 views

Published on

It is not HTML5. but ...HTML5ではないサイトからHTML5を考える
第36回 HTML5とか勉強会 - 2013/02/18
ひらい さだあき @sada_h

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,967
On SlideShare
0
From Embeds
0
Number of Embeds
831
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える

  1. 1. It is not HTML5. but ... HTML5 HTML5 36 HTML5 - 2013/02/18 @sada_h
  2. 2. sadah.github.com / @sada_h / techloghtml5j / HTML5 , Born in 1981.Ruby / Rails / HTML5 / JavaScript / JavaKakaku.com, Inc. Engineer 2012/08 [ ] [cena( )]
  3. 3. are not HTML5.
  4. 4. HTML5
  5. 5. HTML5
  6. 6. HTML5 2012/12/17 W3C
  7. 7. HTML5
  8. 8. HTML5 MarkupHTML5 Apple LAWSON UNITED ARROWS LTD. BEAMS Specs : HTML5 / HTML 5.1
  9. 9. HTML5 Markup html5shiv createElement <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script><![endif]-->elements = "abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video".split(" ");for(var i=0; i<elements.length; i++){ document.createElement(elements[i]);} Sample: HTML5 fall back Sample
  10. 10. microdata / RDFa microdata RDFaBarack ObamaHome - schema.org - Google Google Structured Data Testing Tool
  11. 11. microdata / RDFa SpecsHTML+RDFa 1.1 Last Call: HTML+RDFa 1.1 - W3C News - 07 February 2013HTML MicrodataHTML Microdata Nightly
  12. 12. 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
  13. 13. microdata / RDFaHome - schema.orgmicrodata - Google - - Google - - GoogleGoogle Structured Data Testing Tool
  14. 14. MediaQueriesWorld Wide Web Consortium (W3C) Microsoft JapanNTT
  15. 15. 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
  16. 16. MediaQueriesCSS
  17. 17. MediaQueries WebPC
  18. 18. MediaQueriesMediaQueries
  19. 19. MediaQueriesbookmarklet Media QueriesViewport ResizerResponsive Design TestingSpec : Media Queries W3C REC
  20. 20. CheckBrowserStack modern.IEAdobe® BrowserLab
  21. 21. WebFontsDevToolsBEAMSNTTFONTPLUS
  22. 22. WebFontssadah.github.comGoogle Web Fonts Compare
  23. 23. WebFonts/* using Google Web Fonts */@font-face { font-family: Allerta Stencil; src: url(http://themes.googleusercontent.com/static/fonts/allertastencil/v4/CdSZfRtHbQrBohqmzSdDYKqcRvMv63bhrwdN_8Hu8N8.woff) format(woff);}.webfonts{ font-family: Allerta Stencil, sans-serif;} Sample: WebFonts Web Fonts IT
  24. 24. WebFonts Extension Chrome - WhatFontChrome - Google Font Previewer for Chrome
  25. 25. CanvasCanvas GoogleMaps Thanks komasshu ! / Google Maps - WSJ Spec : HTML Canvas 2D Context
  26. 26. Canvasvar 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: CanvasSample: getUserMedia + Canvas + Video + data URLScheme + FullScreen API
  27. 27. Canvas + WebFonts ctx.fillStyle = "navy"; ctx.font = "72px Cabin Sketch, cursive"; ctx.fillText("WebFonts", 200 , 50); Sample: Canvas + WebFontsCanvas WebFonts WebFonts 1
  28. 28. WebFonts WebFont Loader WebFontConfig = { google: { families: [ Tangerine, Cantarell ] } };(function() { var wf = document.createElement(script); wf.src = (https: == 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
  29. 29. CSS Fonts Module Level 3W3C Working Draft 12 February 2013 9.2 The FontLoader InterfaceW3C Working Draft 11 December 2012 9.2 The FontLoader InterfaceCSS Fonts Module Level 3, CSS Transitions Drafts Published - W3C News
  30. 30. 9.2 The FontLoader Interfacedictionary LoadFontParameters { DOMString font; DOMString text = " "; FontsReadyCallback onsuccess; FontsReadyCallback onerror;};// check and start load if appropriate// and fire callback when all loads completevoid loadFont(LoadFontParameters params);
  31. 31. PerformanceNavigation Timing Navigation Timing (W3c REC) Navigation Timing 2link prefetch script defer async 4.12 Links — HTML5 4.3 Scripting — HTML5data URL Scheme RFC 2397 - The "data" URL scheme
  32. 32. PerformanceHTTP1.1 … minify / gzip CDN Request IT
  33. 33. PerformancePingdom Tools : tabelog.comWebPagetest Test Result - Tokyo : tabelog.com
  34. 34. Request …
  35. 35. PerformanceHTML5 HTTP 2.0 SPDY Hypertext Transfer Protocol version 2.0 / IETF SPDY - The Chromium Projects SPDY Protocol / IETF
  36. 36. “ HTTP TLS SPDYSPDY - Wikipedia”
  37. 37. Multiplexed streams Request prioritization HTTP header compressionSPDY: An experimental protocol for a faster web - The Chromium Projects
  38. 38. html5 - Google
  39. 39. SSLSPDY Performance on Mobile Networks
  40. 40. SPDY HTTP CDN SPDY HTTP 2.0
  41. 41. HTML5( )
  42. 42. 2013Web
  43. 43. HTML5.1navigationController template Offline
  44. 44. HTML5 Markupmicrodata / RDFaWebFonts, CanvasSPDY / HTTP 2.0
  45. 45. HTML5 MediaQueries cena
  46. 46. “ : ”
  47. 47. HTML5
  48. 48. Happy Happy
  49. 49. Happy Happy HTML5 HTML5
  50. 50. The End It is not HTML5. but ... Thank you so mach.http://bit.ly/h5study36sadah @sada_h

×