• Like
HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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

  • 1,382 views
Published

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

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

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

Views

Total Views
1,382
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
12
Comments
0
Likes
4

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. 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]><script src="dist/html5shiv.js">
  • 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<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. 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<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. 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