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

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

on

  • 2,596 views

Familiar HTML5 ...

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

HTML5 Conference Miyazaki 2013 2013/02/10

ひらい さだあき @sada_h

Statistics

Views

Total Views
2,596
Views on SlideShare
1,957
Embed Views
639

Actions

Likes
6
Downloads
7
Comments
0

3 Embeds 639

http://d.hatena.ne.jp 629
http://hatenatunnel.appspot.com 9
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Familiar HTML5 HTML5HTML5 Conference Miyazaki 2013 @sada_h 2013/02/10
    • html5j.org / HTML5 sadah.github.com / @sada_h / techlogRuby / Rails / HTML5 / JavaScript / JavaKakaku.com, Inc. Engineer 2012/08 [ ] [cena( )]
    • HTML5
    • 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
    • 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)
    • 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"></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
    • 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
    • WebStorageWebStorage Google twitter Twitter Google Web Storage IndexedDB HTML5Rocks … IndexedDB TODO HTML5 Rocks
    • WebStorage5MB QUOTA_EXCEEDED_ERR localStorage.setItem("key","text");text = localStorage.getItem("key");sessionStorage.setItem("key",text);text = sessionStorage.getItem("key");Sample: WebStorage Sample
    • 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
    • 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
    • MediaQueries World Wide Web Consortium (W3C) Microsoft Japan NTTbookmarklet Media Queries Responsive design testing tool – Viewport Resizer – Device simulation tool Responsive Design Testing
    • 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
    • WebFonts DevToolsBEAMSNTTFONTPLUSsadah.github.comGoogle Web Fonts Compare
    • 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
    • Video …YouTube - HTML5 iBooks Author - 26 HTML5- YouTube
    • CanvasCanvas GoogleMapsThanks komasshu ! / Google Maps - WSJspec HTML Canvas 2D Context
    • 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
    • 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
    • SVGThanks Daniel, wks, myakura. Election 2010 - The Wall Street Journal Online Raphaël—JavaScript Library The New York Times
    • 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
    • FullScreenAPIMac Window Flickr - Photo Sharing!
    • FullScreenAPI$("h1")[0].webkitRequestFullScreen()$("h1")[0].mozRequestFullScreen() Sample: FullScreen API
    • History API History API(pjax) github flickr facebook sadah github IMG_6077 | Flickr - Photo Sharing! HTML5 Demo: HTML5 History API
    • 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.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
    • microdata microdataBarack ObamaHome - schema.org - Google microdata - - - Google Structured Data Testing Tool
    • 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 - - -
    • 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").toDataURL("image/png");Sample: data URL SchemeSample: data URL Scheme + CanvasSample: Video + Canvas + data URL Scheme +FullScreen
    • PerformanceNavigation Timing Navigation Timinglink prefetch script defer async 4.12 Links — HTML5 4.3 Scripting — HTML5
    • 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
    • Drag and Drop Canvas
    • HTML5
    • HTML5 HTML5
    • The End Thank you so mach. Familiar HTML5 @sada_hhttp://bit.ly/h5m2013b2