ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
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.
html5j	
 
	
 /	
 HTML5
	
 
Ruby	
 /	
 Rails	
 /	
 HTML5	
 /	
 JavaScript	
 /	
 Java
SIer,	
 System	
 Engineer	
 2004/04
Kakaku.com,	
 Inc.	
 Engineer	
 2012/08
cena(

)
	
 powered	
 by
Attention
HTML5	
 
HTML5	
  	
 HTML5	
 

	
 canvas	
 
	
 canvas	
 

	
 HTML5	
 
	
 API
Demos
This	
 ºÝºÝߣ.
reveal.js
This	
 ºÝºÝߣ	
 with	
 Gesture.
Gestures	
 +	
 Reveal.JS	
 -	
 Chrome	
 Experiments
getUserMedia	
 Sample
Hello	
 Fisher
three.js	
 webgl	
 -	
 city
Agenda
1.	
  Web HTML
2.	
 
3.	
 
4.	
 
5.	
 

HTML5

HTML5
History	
 of	
 HTML
¤¤¤Þʹ¤ï¤ì¤Æ¤¤¤ë±á°Õ²Ñ³¢5¤È¡¢¤³¤ì¤«¤é¤Î±á°Õ²Ñ³¢5
History	
 of	
 HTML
Year Spec
1993 HTML	
 1.0
1997 HTML	
 3.2

Topic
IETF
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
2001
2007
2009
2011
2012
2013

Spec
XHTML	
 1.1
HTML5
XHTML	
 2.0
HTML5
HTML5
HTML	
 5.1

Topic
W3C
	
 
W3C
(WG
)
XHTML2	
 WG	
 
W3C	
 
W3C	
 
	
 (2012/12/17)
W3C	
 WD	
 (2013/05/28)
W3C	
 
Working	
 Draft,	
 WD
HTML	
 5.1	
 WD(2013/05/28)
Last	
 Call	
 Working	
 Draft
Candidate	
 Recommendation,	
 CR
HTML5	
 CR(2012/12/17)
W3C

Proposed	
 Recommendation,	
 PR
W3C	
 Recommendation,	
 REC
World	
 Wide	
 Web	
 Consortium	
 -	
 Wikipedia
W3C
	
 -	
 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
¤¤¤Þʹ¤ï¤ì¤Æ¤¤¤ë±á°Õ²Ñ³¢5¤È¡¢¤³¤ì¤«¤é¤Î±á°Õ²Ñ³¢5
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	
 
2.x	
 

1.8	
 
1.x
jQuery	
 1.9	
 

1.8	
 

jQuery.browser()	
 removed
.live()	
 .die()	
 removed
.attr()	
 versus	
 .prop()
Migration	
 Plugin	
 
jquery/jquery-migrate
jQuery	
 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	
 
callback	
 

	
 promise

	
 on
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
TodoMVC

Model,	
 View,	
 Controller	
 or	
 View	
 Model	
 or	
 Whatever.
HTML5
HTML	
 5.1
...
HTML	
 5.1
ECMAScript
Standard	
 ECMA-262
ECMAScript	
 5	
 compatibility	
 table
ECMAScript	
 compatibility	
 table
¤¤¤Þʹ¤ï¤ì¤Æ¤¤¤ë±á°Õ²Ñ³¢5¤È¡¢¤³¤ì¤«¤é¤Î±á°Õ²Ñ³¢5
HTML5	
  	
 HTML5
¤¤¤Þʹ¤ï¤ì¤Æ¤¤¤ë±á°Õ²Ñ³¢5¤È¡¢¤³¤ì¤«¤é¤Î±á°Õ²Ñ³¢5
¤¤¤Þʹ¤ï¤ì¤Æ¤¤¤ë±á°Õ²Ñ³¢5¤È¡¢¤³¤ì¤«¤é¤Î±á°Õ²Ñ³¢5
¤¤¤Þʹ¤ï¤ì¤Æ¤¤¤ë±á°Õ²Ñ³¢5¤È¡¢¤³¤ì¤«¤é¤Î±á°Õ²Ñ³¢5
Happy
Happy
HTML5	
 
HTML5
HTML5
Thank	
 you	
 so	
 mach.
Enjoy	
 HTML5!

HTML5

More Related Content

¤¤¤Þʹ¤ï¤ì¤Æ¤¤¤ë±á°Õ²Ñ³¢5¤È¡¢¤³¤ì¤«¤é¤Î±á°Õ²Ñ³¢5