Your SlideShare is downloading. ×
  • Like
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,441 views
Published

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,441
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. It is not HTML5. but ... HTML5 HTML5 36 HTML5 - 2013/02/18 @sada_h
  • 2. sadah.github.com / @sada_h / techloghtml5j / HTML5 , Born in 1981.Ruby / Rails / HTML5 / JavaScript / JavaKakaku.com, Inc. Engineer 2012/08 [ ] [cena( )]
  • 3. are not HTML5.
  • 4. HTML5
  • 5. HTML5
  • 6. HTML5 2012/12/17 W3C
  • 7. HTML5
  • 8. HTML5 MarkupHTML5 Apple LAWSON UNITED ARROWS LTD. BEAMS Specs : HTML5 / HTML 5.1
  • 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. microdata / RDFa microdata RDFaBarack ObamaHome - schema.org - Google Google Structured Data Testing Tool
  • 11. microdata / RDFa SpecsHTML+RDFa 1.1 Last Call: HTML+RDFa 1.1 - W3C News - 07 February 2013HTML MicrodataHTML Microdata Nightly
  • 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. microdata / RDFaHome - schema.orgmicrodata - Google - - Google - - GoogleGoogle Structured Data Testing Tool
  • 14. MediaQueriesWorld Wide Web Consortium (W3C) Microsoft JapanNTT
  • 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. MediaQueriesCSS
  • 17. MediaQueries WebPC
  • 18. MediaQueriesMediaQueries
  • 19. MediaQueriesbookmarklet Media QueriesViewport ResizerResponsive Design TestingSpec : Media Queries W3C REC
  • 20. CheckBrowserStack modern.IEAdobe® BrowserLab
  • 21. WebFontsDevToolsBEAMSNTTFONTPLUS
  • 22. WebFontssadah.github.comGoogle Web Fonts Compare
  • 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. WebFonts Extension Chrome - WhatFontChrome - Google Font Previewer for Chrome
  • 25. CanvasCanvas GoogleMaps Thanks komasshu ! / Google Maps - WSJ Spec : HTML Canvas 2D Context
  • 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. Canvas + WebFonts ctx.fillStyle = "navy"; ctx.font = "72px Cabin Sketch, cursive"; ctx.fillText("WebFonts", 200 , 50); Sample: Canvas + WebFontsCanvas WebFonts WebFonts 1
  • 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. 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. 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. 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. PerformanceHTTP1.1 … minify / gzip CDN Request IT
  • 33. PerformancePingdom Tools : tabelog.comWebPagetest Test Result - Tokyo : tabelog.com
  • 34. Request …
  • 35. PerformanceHTML5 HTTP 2.0 SPDY Hypertext Transfer Protocol version 2.0 / IETF SPDY - The Chromium Projects SPDY Protocol / IETF
  • 36. “ HTTP TLS SPDYSPDY - Wikipedia”
  • 37. Multiplexed streams Request prioritization HTTP header compressionSPDY: An experimental protocol for a faster web - The Chromium Projects
  • 38. html5 - Google
  • 39. SSLSPDY Performance on Mobile Networks
  • 40. SPDY HTTP CDN SPDY HTTP 2.0
  • 41. HTML5( )
  • 42. 2013Web
  • 43. HTML5.1navigationController template Offline
  • 44. HTML5 Markupmicrodata / RDFaWebFonts, CanvasSPDY / HTTP 2.0
  • 45. HTML5 MediaQueries cena
  • 46. “ : ”
  • 47. HTML5
  • 48. Happy Happy
  • 49. Happy Happy HTML5 HTML5
  • 50. The End It is not HTML5. but ... Thank you so mach.http://bit.ly/h5study36sadah @sada_h