HTML5

HTML5

@GrapeCity 2013/10/25

@sada_h

http://bit.ly/html5gc

Questions

SIer? SE? Manager? Programmer? Java? .NET?

HTML5

? ? ?

I live in Kamakura. Born in 1981.

/ HTML5

Ruby / Rails / HTML5 / JavaScript / Java

SIer, System Engineer 2004/04

Kakaku.com, Inc. Engineer 2012/08

html5j

cena( )

powered by

Attention

HTML5

HTML5 HTML5

canvas HTML5

canvas API

Demos

This Slide.

reveal.js

This Slide with Gesture.

Gestures + Reveal.JS - Chrome Experiments

getUserMedia Sample

Hello Fisher

three.js webgl - city

Agenda

1. Web HTML

2. HTML5

3.

4. HTML5

5.

History of HTML

http://evolutionofweb.appspot.com/

History of HTML

Year Spec Topic

1993 HTML 1.0 IETF

1997 HTML 3.2 W3C

W3C

1997 HTML 4.0 W3C

1999 HTML 4.0.1 W3C

2000 XHTML 1.0 W3C

HTML 4.0.1 XML

History of HTML

Year Spec Topic

2001 XHTML 1.1 W3C

2007 HTML5 W3C (WG )

2009 XHTML 2.0 XHTML2 WG

2011 HTML5 W3C

2012 HTML5 W3C (2012/12/17)

2013 HTML 5.1 W3C WD (2013/05/28)

W3C

Working Draft, WD

HTML 5.1 WD( )

Last Call Working Draft

Candidate Recommendation, CR

HTML5 CR( )

Proposed Recommendation, PR

W3C W3C Recommendation, REC

2013/05/28

2012/12/17

World Wide Web Consortium - WikipediaW3C - Wikipedia

HTML5

Sites using HTML5 - Apple

Apple

Sites using HTML5 - Apple

HTML5 Markup

Custom Data Attribute

Role Attribute

CSS3

Web Storage

SVG

data URL

Sites using HTML5 - Apple

Sites using HTML5 - Apple

Sites using HTML5 - Apple

Sites using HTML5 - Apple

Sites using HTML5 - Apple

Sites using HTML5 - Microsoft

Microsoft Japan

Sites using HTML5 - Microsoft

HTML5 Markup

Custom Data Attribute

Role Attribute

CSS3

MediaQueries

WebFonts

Sites using HTML5 - Microsoft

Sites using HTML5 - Microsoft

Sites using HTML5 - Microsoft

Sites using HTML5 - Microsoft

Sites using HTML5 - Tabelog

Sites using HTML5 - Tabelog

Rich Snippets(RDFa/Microdata)

Custom Data Attribute

CSS3

Sites using HTML5 - Tabelog

Sites using HTML5 - Tabelog

Sites using HTML5 - Tabelog

Google Structured Data Testing Tool

Twitter Bootstrap

Bootstrap

Twitter Bootstrap

Bootstrap

Bootstrap3

Flat design.

Responsive.

No Support IE7, Firefox 3.6

IE8 Respond.js MediaQueries

Bootstrap jQuery

Samples

No Bootstrap Sample

Bootstrap Sample

Twitter Bootstrap

Twitter Bootstrap

normalize.css

html5shiv

respond.js (for IE8)

Twitter Bootstrap

jQuery

jQuery

jQuery

jQuery

jQuery

1.9 1.8

2.x 1.x

jQuery 1.9 1.8

jQuery.browser() removed

.live() .die() removed

.attr() versus .prop()

Migration Plugin

jquery/jquery-migratejQuery Core 1.9 Upgrade Guide | jQuery

jQuery 2.x 1.x

jQuery 2.x

No support Internet Explorer 6, 7, 8.

API jquery1.9

Custom builds

jQuery 1.x

Support Internet Explorer 6, 7, 8.

jQuery 2.0 Released | Official jQuery Blog

jQuery

click, bind, live, delegate on

callback promise

jQuery UI

jQuery UI 1.10 over

Removed support for IE6

jQuery UI 1.9 Upgrade Guide | jQuery UI

jQuery UI 1.10 Upgrade Guide | jQuery UI

Graph and Graphics

Highcharts

Chart.js

D3.js

Raphaël

Highcharts

Highcharts

Chart.js

Chart.js

D3.js

D3.js

Raphaël

Raphaël

MVC, MVVM, MVW

HTML5 …

Backbone.js

Knockout

AngularJS

TodoMVCModel, View, Controller or View Model or Whatever.

HTML5

HTML 5.1

...

ECMAScript

HTML 5.1

Standard ECMA-262

ECMAScript 5 compatibility table

ECMAScript compatibility table

HTML5 HTML5

Happy

Happy

HTML5

HTML5

HTML5 HTML5

Thank you so mach.

Enjoy HTML5!