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.
Familiar	 HTML5                                     HTML5HTML5	 Conference	 Miyazaki	 2013             	        	  @sada_h...
html5j.org	 /	 HTML5                   	 sadah.github.com 	 /	  @sada_h 	 /	  techlogRuby	 /	 Rails	 /	 HTML5	 /	 JavaScri...
HTML5
HTML5	  W3CYear Spec         Topic1993 HTML	 1.0   IEFT1997 HTML	 3.2   W3C                  W3C1997 HTML	 4.0   W3C1999 H...
HTML5	  W3CYear Spec        Topic2001 XHTML	 1.1 W3C      	 2007 HTML5       W3C               (WG        )2009 XHTML	 2.0...
HTML5
HTML5            	 HTML5
HTML5
HTML5	 MarkupHTML5  Apple  LAWSON  UNITED	 ARROWS	 LTD.  BEAMSspec  HTML5 	 /	  HTML	 5.1
HTML5	 Markuphtml5shiv	                       createElement	    <!--[if lt IE 9]>    <script src="dist/html5shiv.js"></scr...
JavaScriptWindow/History/Location	  HTML5Thanks	 myakura!  5.2	 The	 Window	 object	 —	 HTML5  5.5.2	 The	 History	 interf...
WebStorageWebStorage	  	 Google	  	 twitter	   Twitter  Google  Web	 Storage           	 IndexedDB	            HTML5Rocks ...
WebStorage5MB         	 QUOTA_EXCEEDED_ERR	 localStorage.setItem("key","text");text = localStorage.getItem("key");sessionS...
CSS3	 Backgrounds,Bordersborder-radius	       	 text-shadow	              	  cena                   	 transform	 /	 transi...
CSS3	 Backgrounds,Borders border-radius: 10px 10px 10px 10px; box-shadow: 10px 10px 10px #aaa; text-shadow: 5px 5px 5px #a...
MediaQueries  World	 Wide	 Web	 Consortium	 (W3C)                           Microsoft	 Japan  NTTbookmarklet	   Media	 Que...
MediaQueries     @media screen and (max-width: 479px) {       .media-test { color: red; }     }     @media screen and (min...
WebFonts              DevToolsBEAMSNTTFONTPLUSsadah.github.comGoogle	 Web	 Fonts	 Compare
WebFonts/* using Google Web Fonts */@font-face {  font-family: Allerta Stencil;  src: url(http://themes.googleusercontent....
Video       …YouTube	 -	 HTML5              iBooks	 Author	 -	  26 HTML5-	 YouTube
CanvasCanvas	  GoogleMapsThanks	 komasshu	 !                  	 /	 Google	 Maps                           	 -	 WSJspec  HT...
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 , ...
SVGThanks	 Daniel,	 wks,	 myakura.  Election	 2010	 -	 The	 Wall	 Street	 Journal	 Online  Raphaël—JavaScript	 Library  Th...
SVG  <svg width="800" height="300">   <circle cx="150" cy="150" r="100" stroke="blue" fill="white" stroke-width="5"  />  <...
FullScreenAPIMac         Window       Flickr	 -	 Photo	 Sharing!
FullScreenAPI$("h1")[0].webkitRequestFullScreen()$("h1")[0].mozRequestFullScreen()                      Sample:	 FullScree...
History	 API                                           	 History	 API(pjax)	 github flickr      facebook  sadah	 github  I...
File	 API	 &	 Drag	 and	 DropDrag	 and	 Drop(&	 File	 API)	          	 -	 Google+
File	 API	 &	 Drag	 and	 Drop // jquery // var files = e.originalEvent.dataTransfer.files; var files = e.dataTransfer.file...
microdata       	 microdataBarack	 ObamaHome	 -	 schema.org              	 -	 Google	 microdata	                 	 -	     ...
microdata<div itemscope itemtype="http://data-vocabulary.org/Person"> 私の名前は<span itemprop="name">ひらい さだあき</span>ですが、 みんなから...
Custom	 Data	 AttributesBarack	 Obama3.2.3.9	 Embedding	 custom	 non-visible	 data	 with	 thedata-*	 attributes
data	 URL	 SchemeRFC	 2397	 -	 The	 "data"	 URL	 scheme
data	 URL	 Scheme<img src="data:image/jpeg;base64,/9j/4AAQSkZJ ... "var strDataURI = document.getElementById("canvas-area"...
PerformanceNavigation	 Timing   Navigation	 Timinglink	 prefetch	    	 script	 defer	 async	    4.12	 Links	 —	 HTML5   4....
PerformanceHTML5                    HTTP	 2.0	     	 SPDY	  draft-ietf-httpbis-http2-01	 -	 Hypertext	 Transfer Protocol	 ...
Drag	 and	 Drop	  	 Canvas
HTML5
HTML5	 HTML5
The	 End Thank	 you	 so	 mach.   Familiar	 HTML5        @sada_hhttp://bit.ly/h5m2013b2
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Upcoming SlideShare
Loading in …5
×

Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5

3,035 views

Published on

Familiar HTML5
事例とサンプルコードから学ぶ
身近で普通に使わているHTML5

HTML5 Conference Miyazaki 2013 2013/02/10

ひらい さだあき @sada_h

Published in: Technology
  • Be the first to comment

Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5

  1. 1. Familiar HTML5 HTML5HTML5 Conference Miyazaki 2013 @sada_h 2013/02/10
  2. 2. html5j.org / HTML5 sadah.github.com / @sada_h / techlogRuby / Rails / HTML5 / JavaScript / JavaKakaku.com, Inc. Engineer 2012/08 [ ] [cena( )]
  3. 3. HTML5
  4. 4. HTML5 W3CYear Spec Topic1993 HTML 1.0 IEFT1997 HTML 3.2 W3C W3C1997 HTML 4.0 W3C1999 HTML 4.0.1 W3C2000 XHTML 1.0 W3C HTML 4.0.1 XML
  5. 5. HTML5 W3CYear Spec Topic2001 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. HTML5
  7. 7. HTML5 HTML5
  8. 8. HTML5
  9. 9. HTML5 MarkupHTML5 Apple LAWSON UNITED ARROWS LTD. BEAMSspec HTML5 / HTML 5.1
  10. 10. HTML5 Markuphtml5shiv createElement <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]--> elements = "abbr article aside audio bdi canvas data datalist details figcaption figu re footer header hgroup mark meter nav output progress section summary time vi deo".split(" "); for(var i=0; i<elements.length; i++){ document.createElement(elements[i]); } Sample: HTML5 fall back Sample
  11. 11. JavaScriptWindow/History/Location HTML5Thanks myakura! 5.2 The Window object — HTML5 5.5.2 The History interface 5.5.3 The Location interfaceSelectors API jQuery Selectors API Level 1 jquery-1.8.2.js
  12. 12. WebStorageWebStorage Google twitter Twitter Google Web Storage IndexedDB HTML5Rocks … IndexedDB TODO HTML5 Rocks
  13. 13. WebStorage5MB QUOTA_EXCEEDED_ERR localStorage.setItem("key","text");text = localStorage.getItem("key");sessionStorage.setItem("key",text);text = sessionStorage.getItem("key");Sample: WebStorage Sample
  14. 14. CSS3 Backgrounds,Bordersborder-radius text-shadow cena transform / transition /animation CSS Backgrounds and Borders Module Level 3 CSS Transforms / CSS Animations modern.IE BrowserStack Adobe® BrowserLab
  15. 15. CSS3 Backgrounds,Borders border-radius: 10px 10px 10px 10px; box-shadow: 10px 10px 10px #aaa; text-shadow: 5px 5px 5px #aaa;Sample: CSS3 Backgrounds, Borders CSS Variables Sample: CSS Variables Module Level 1
  16. 16. MediaQueries World Wide Web Consortium (W3C) Microsoft Japan NTTbookmarklet Media Queries Responsive design testing tool – Viewport Resizer – Device simulation tool Responsive Design Testing
  17. 17. 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 WebPC
  18. 18. WebFonts DevToolsBEAMSNTTFONTPLUSsadah.github.comGoogle Web Fonts Compare
  19. 19. 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 Extension Chrome - WhatFontChrome - Google Font Previewer for Chrome
  20. 20. Video …YouTube - HTML5 iBooks Author - 26 HTML5- YouTube
  21. 21. CanvasCanvas GoogleMapsThanks komasshu ! / Google Maps - WSJspec HTML Canvas 2D Context
  22. 22. 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: Canvas
  23. 23. Canvas + WebFonts ctx.fillStyle = "navy"; ctx.font = "72px Cabin Sketch, cursive"; ctx.fillText("WebFonts", 200 , 50); Sample: Canvas + WebFontsCanvas WebFonts WebFonts 1WebFont Loader WebFont Loader - Google Web Fonts
  24. 24. SVGThanks Daniel, wks, myakura. Election 2010 - The Wall Street Journal Online Raphaël—JavaScript Library The New York Times
  25. 25. SVG <svg width="800" height="300"> <circle cx="150" cy="150" r="100" stroke="blue" fill="white" stroke-width="5" /> </svg> <img src="image.svg"> Sample: SVG Sample: SVG + WebFontsRaphaël … Raphaël · Australia Raphaël · Text Rotation
  26. 26. FullScreenAPIMac Window Flickr - Photo Sharing!
  27. 27. FullScreenAPI$("h1")[0].webkitRequestFullScreen()$("h1")[0].mozRequestFullScreen() Sample: FullScreen API
  28. 28. History API History API(pjax) github flickr facebook sadah github IMG_6077 | Flickr - Photo Sharing! HTML5 Demo: HTML5 History API
  29. 29. File API & Drag and DropDrag and Drop(& File API) - Google+
  30. 30. File API & Drag and Drop // jquery // var files = e.originalEvent.dataTransfer.files; var files = e.dataTransfer.files; var fileName = files[0].name; var fileSize = files[0].size; var reader = new FileReader(); reader.onload = function() { var line = reader.result; } reader.readAsText(file[0], UTF-8);Sample: Drag and Drop
  31. 31. microdata microdataBarack ObamaHome - schema.org - Google microdata - - - Google Structured Data Testing Tool
  32. 32. 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: microdatamicrodata - - -
  33. 33. Custom Data AttributesBarack Obama3.2.3.9 Embedding custom non-visible data with thedata-* attributes
  34. 34. data URL SchemeRFC 2397 - The "data" URL scheme
  35. 35. 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: Video + Canvas + data URL Scheme +FullScreen
  36. 36. PerformanceNavigation Timing Navigation Timinglink prefetch script defer async 4.12 Links — HTML5 4.3 Scripting — HTML5
  37. 37. PerformanceHTML5 HTTP 2.0 SPDY draft-ietf-httpbis-http2-01 - Hypertext Transfer Protocol version 2.0 SPDY - The Chromium Projects draft-mbelshe-httpbis-spdy-00 - SPDY Protocol
  38. 38. Drag and Drop Canvas
  39. 39. HTML5
  40. 40. HTML5 HTML5
  41. 41. The End Thank you so mach. Familiar HTML5 @sada_hhttp://bit.ly/h5m2013b2

×