Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
It	 is	 not	 HTML5.	 but	 ...    HTML5        HTML5    36 	 HTML5      	 -	 2013/02/18             	    	  @sada_h
sadah.github.com 	 /	  @sada_h 	 /	  techloghtml5j 	      	 /	 HTML5                    	                             ,	 B...
are	 not	 HTML5.
HTML5
HTML5
HTML5	 2012/12/17	 W3C
HTML5
HTML5	 MarkupHTML5        Apple        LAWSON        UNITED	 ARROWS	 LTD.        BEAMS        Specs	 :	  HTML5 	 /	  HTML	...
HTML5	 Markup    html5shiv	                          createElement	 <!--[if lt IE 9]> <script src="dist/html5shiv.js"></sc...
microdata	 /	 RDFa           	 microdata	  	 RDFaBarack	 ObamaHome	 -	 schema.org             	 -	 Google	 Google	 Structu...
microdata	 /	 RDFa                            SpecsHTML+RDFa	 1.1  Last	 Call:	 HTML+RDFa	 1.1	 -	 W3C	 News	 -	 07  Febru...
microdata<div itemscope itemtype="http://data-vocabulary.org/Person"> 私の名前は<span itemprop="name">ひらい さだあき</span>ですが、 みんなから...
microdata	 /	 RDFaHome	 -	 schema.orgmicrodata	             	 -	 Google      	             	 -	      	 -	 Google      	   ...
MediaQueriesWorld	 Wide	 Web	 Consortium	 (W3C)                         Microsoft	 JapanNTT
MediaQueries@media screen and (max-width: 479px) {  .media-test { color: red; }}@media screen and (min-width: 480px) and (...
MediaQueriesCSS
MediaQueries     WebPC
MediaQueriesMediaQueries
MediaQueriesbookmarklet	 Media	 QueriesViewport	 ResizerResponsive	 Design	 TestingSpec	 :	  Media	 Queries	 W3C	 REC
CheckBrowserStack  modern.IEAdobe®	 BrowserLab
WebFontsDevToolsBEAMSNTTFONTPLUS
WebFontssadah.github.comGoogle	 Web	 Fonts	 Compare
WebFonts/* using Google Web Fonts */@font-face {  font-family: Allerta Stencil;  src: url(http://themes.googleusercontent....
WebFonts        	 Extension	 Chrome	 -	 WhatFontChrome	 -	 Google	 Font	 Previewer	 for	 Chrome
CanvasCanvas	  GoogleMaps          Thanks	 komasshu	 !                      	 /	 Google	 Maps                             ...
Canvasvar ctx = $("#canvas-area")[0].getContext("2d");// x, y, radius, startAngle, endAngle [, anticlockwise ] )ctx.arc(20...
Canvas	 +	 WebFonts  ctx.fillStyle = "navy";  ctx.font = "72px Cabin Sketch, cursive";  ctx.fillText("WebFonts", 200 , 50)...
WebFonts              WebFont	 Loader	 WebFontConfig = { google: { families: [ Tangerine, Cantarell ] } };(function() { va...
CSS	 Fonts	 Module	 Level	 3W3C	 Working	 Draft	 12	 February	 2013 9.2	 The	 FontLoader	 InterfaceW3C	 Working	 Draft	 11...
9.2	 The	 FontLoader	 Interfacedictionary LoadFontParameters { DOMString font; DOMString text = " "; FontsReadyCallback on...
PerformanceNavigation	 Timing   Navigation	 Timing	 (W3c	 REC)   Navigation	 Timing	 2link	 prefetch	    	 script	 defer	 ...
PerformanceHTTP1.1                                     …    minify	 /	 gzip    CDN                	 Request	              ...
PerformancePingdom	 Tools	 :	 tabelog.comWebPagetest	 Test	 Result	 -	 Tokyo	 :	 tabelog.com
Request	    …
PerformanceHTML5                     HTTP	 2.0	      	 SPDY	   Hypertext	 Transfer	 Protocol	 version	 2.0	 /	 IETF  SPDY	...
“                       HTTP                                 TLS                              SPDYSPDY	 -	 Wikipedia”
Multiplexed	 streams            Request	 prioritization    HTTP	 header	 compressionSPDY:	 An	 experimental	 protocol	 for...
html5	 -	 Google
SSLSPDY	 Performance	 on	 Mobile	 Networks
SPDY HTTP	 CDN	  	 SPDY	  	 HTTP	 2.0
HTML5(   )
2013Web
HTML5.1navigationController     template      Offline
HTML5	 Markupmicrodata	 /	 RDFaWebFonts,	 CanvasSPDY	 /	 HTTP	 2.0
HTML5                MediaQueries        	 cena
“	        :	    	                     	 ”
HTML5
Happy	 Happy
Happy     	 Happy	 HTML5	 HTML5
The	 End  It	 is	 not	 HTML5.	 but	 ...    Thank	 you	 so	 mach.http://bit.ly/h5study36sadah            @sada_h
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
Upcoming SlideShare
Loading in …5
×

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

2,296 views

Published on

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

  • Be the first to comment

  • Be the first to like this

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

×