html5ではないサイトを html5へ - change html5 from not html5

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

Post on 18-Dec-2014

1.362 views

Category:

Technology

3 download

Embed Size (px)

DESCRIPTION

HTML5 HTML5 - Change HTML5 from Not HTML5. !!HTML5 2013 2013/04/20

TRANSCRIPT

  • 1. HTML5HTML5Change HTML5 from not HTML5.!! HTML5 20132013/04/20 @sada_hhttp://bit.ly/html5efsta
  • 2. / / / HTML5 Born in 1981.Ruby / Rails / HTML5 / JavaScript / JavaKakaku.com, Inc. Engineer 2012/08 sadah.github.io @sada_h techloghtml5j [ ] [cena( )]
  • 3. HTML5
  • 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. 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. W3C Working Draft, WDLast Call Working DraftCandidate Recommendation, CRHTML5 ( )Proposed Recommendation, PRW3C W3C Recommendation, REC2012/12/17World Wide Web Consortium - WikipediaW3C - Wikipedia
  • 7. is not HTML5.is HTML5.
  • 8. HTML5
  • 9. HTML5 2012/12/17 W3C
  • 10. HTML5
  • 11. HTML5 MarkupHTML5Specs : / cena( ) AppleLAWSONUNITED ARROWS LTD.BEAMSHTML5 HTML 5.1
  • 12. HTML5 Markup createElement html5shiv[if lt IE 9]>
  • 13. WebStorageWebStorage Google twitter TwitterGoogleWeb Storage
  • 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. microdata / RDFa microdata RDFaBarack ObamaHome - schema.org - Google Google Structured Data Testing Tool
  • 16. microdata / RDFaSpecsHTML+RDFa 1.1Last Call: HTML+RDFa 1.1 - W3C News - 07February 2013HTML MicrodataHTML Microdata Nightly
  • 17. microdata
    sadah.github.io
    Sample: microdata
  • 18. microdata / RDFaHome - schema.orgmicrodata - Google - - Google - - GoogleGoogle Structured Data Testing Tool
  • 19. Custom Data AttributesBarack Obama3.2.3.9 Embedding custom non-visible data with thedata-* attributes
  • 20. MediaQueriesWorld Wide Web Consortium (W3C)Microsoft JapanNTT
  • 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. MediaQueriesCSS
  • 23. MediaQueriesPCcena
  • 24. MediaQueriesbookmarklet Spec : Media QueriesViewport ResizerResponsive Design TestingMedia Queries W3C REC
  • 25. WebFontsDevToolsBEAMSNTTFONTPLUS
  • 26. WebFontssadah.github.ioGoogle Web Fonts Compare
  • 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. WebFonts Extension Chrome - WhatFontChrome - Google Font Previewer for Chrome
  • 29. CanvasCanvas GoogleMapsThanks komasshu !Spec : / Google Maps - WSJHTML Canvas 2D Context
  • 30. data URL SchemeRFC 2397 - The "data" URL scheme
  • 31. data URL Scheme
  • 32. HTML5
  • 33. HTML5 HTML5HTML5 doctype html5shiv HTML5(header )cena( )
  • 34. HTML5RailsjQuery HTML5
  • 35. HTML5HTML5HTML5 HTML5
  • 36. HTML5
  • 37. HTML5( )
  • 38. Happy
  • 39. Happy HTML5 HTML5
  • 40. The EndChange HTML5 from Not HTML5.Thank you so mach.http://bit.ly/html5efsta@sada_h