HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

1,940 views

Published on

HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
エフスタ!!とHTML5とか勉強会 2013 ふくしまの春風! 2013/04/20

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,940
On SlideShare
0
From Embeds
0
Number of Embeds
1,083
Actions
Shares
0
Downloads
14
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.

  1. 1. HTML5HTML5Change HTML5 from not HTML5.!! HTML5 20132013/04/20 @sada_hhttp://bit.ly/html5efsta
  2. 2. / / / HTML5 Born in 1981.Ruby / Rails / HTML5 / JavaScript / JavaKakaku.com, Inc. Engineer 2012/08 sadah.github.io @sada_h techloghtml5j [ ] [cena( )]
  3. 3. HTML5
  4. 4. HTML5YearYear SpecSpec TopicTopic1993 HTML 1.0 IETF1997 HTML 3.2 W3CW3C1997 HTML 4.0 W3C1999 HTML 4.0.1 W3C2000 XHTML 1.0 W3CHTML 4.0.1 XML
  5. 5. HTML5YearYear SpecSpec TopicTopic2001 XHTML 1.1 W3C 2007 HTML5 W3C (WG )2009 XHTML 2.0 XHTML2 WG 2011 HTML5 W3C 2012 HTML5 W3C (2012/12/17)
  6. 6. W3C Working Draft, WDLast Call Working DraftCandidate Recommendation, CRHTML5 ( )Proposed Recommendation, PRW3C W3C Recommendation, REC2012/12/17World Wide Web Consortium - WikipediaW3C - Wikipedia
  7. 7. is not HTML5.is HTML5.
  8. 8. HTML5
  9. 9. HTML5 2012/12/17 W3C
  10. 10. HTML5
  11. 11. HTML5 MarkupHTML5Specs : / cena( ) AppleLAWSONUNITED ARROWS LTD.BEAMSHTML5 HTML 5.1
  12. 12. HTML5 Markup createElement html5shiv[if lt IE 9]><script src="dist/html5shiv.js">
  13. 13. WebStorageWebStorage Google twitter TwitterGoogleWeb Storage
  14. 14. WebStorage5MB QUOTA_EXCEEDED_ERR localStorage.setItem("key","text");text = localStorage.getItem("key");sessionStorage.setItem("key",text);text = sessionStorage.getItem("key");Sample: WebStorage Sample
  15. 15. microdata / RDFa microdata RDFaBarack ObamaHome - schema.org - Google Google Structured Data Testing Tool
  16. 16. microdata / RDFaSpecsHTML+RDFa 1.1Last Call: HTML+RDFa 1.1 - W3C News - 07February 2013HTML MicrodataHTML Microdata Nightly
  17. 17. microdata<div itemscope itemtype="http://data-vocabulary.org/Person">私の名前は<span itemprop="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
  18. 18. microdata / RDFaHome - schema.orgmicrodata - Google - - Google - - GoogleGoogle Structured Data Testing Tool
  19. 19. Custom Data AttributesBarack Obama3.2.3.9 Embedding custom non-visible data with thedata-* attributes
  20. 20. MediaQueriesWorld Wide Web Consortium (W3C)Microsoft JapanNTT
  21. 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: MediaQueriessadah.github.io
  22. 22. MediaQueriesCSS
  23. 23. MediaQueriesPCcena
  24. 24. MediaQueriesbookmarklet Spec : Media QueriesViewport ResizerResponsive Design TestingMedia Queries W3C REC
  25. 25. WebFontsDevToolsBEAMSNTTFONTPLUS
  26. 26. WebFontssadah.github.ioGoogle Web Fonts Compare
  27. 27. 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: WebFontsWeb Fonts IT
  28. 28. WebFonts Extension Chrome - WhatFontChrome - Google Font Previewer for Chrome
  29. 29. CanvasCanvas GoogleMapsThanks komasshu !Spec : / Google Maps - WSJHTML Canvas 2D Context
  30. 30. data URL SchemeRFC 2397 - The "data" URL scheme
  31. 31. data URL Scheme<img src="data:image/jpeg;base64,/9j/4AAQSkZJ ... "var strDataURI = document.getElementById("canvas-area").toDataURL("image/png");Sample: data URL SchemeSample: data URL Scheme + CanvasSample: getUserMedia + Canvas + Video + data URLScheme + FullScreen API
  32. 32. HTML5
  33. 33. HTML5 HTML5HTML5 doctype html5shiv HTML5(header )cena( )
  34. 34. HTML5RailsjQuery HTML5
  35. 35. HTML5HTML5HTML5 HTML5
  36. 36. HTML5
  37. 37. HTML5( )
  38. 38. Happy
  39. 39. Happy HTML5 HTML5
  40. 40. The EndChange HTML5 from Not HTML5.Thank you so mach.http://bit.ly/html5efsta@sada_h

×