いま使われているHTML5と、これからのHTML5

•

3 gostaram•1,337 visualizações

Sadaaki HIRAI

いま使われているHTML5と、これからのHTML5 @GrapeCityセミナー 2013/10/25 ひらいさだあき http://bit.ly/html5gc

Tecnologia Design

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
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.

3.

4.

5.

HTML5

HTML5

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

Sites
using
HTML5
-
Apple
HTML5
Markup
Custom
Data
Attribute
Role
Attribute
CSS3
Web
Storage
SVG
data
URL

Sites
using
HTML5
-
Microsoft

Microsoft
Japan

Sites
using
HTML5
-
Microsoft
HTML5
Markup
Custom
Data
Attribute
Role
Attribute
CSS3
MediaQueries
WebFonts

Sites
using
HTML5
-
Tabelog
Rich
Snippets(RDFa/Microdata)
Custom
Data
Attribute
CSS3

Sites
using
HTML5
-
Tabelog

Google
Structured
Data
Testing
Tool

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
normalize.css
html5shiv
respond.js
(for
IE8)

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

MVC,
MVVM,
MVW
HTML5

…
Backbone.js
Knockout
AngularJS
TodoMVC

Model,
View,
Controller
or
View
Model
or
Whatever.

HTML
5.1
...
HTML
5.1
ECMAScript
Standard
ECMA-262
ECMAScript
5
compatibility
table
ECMAScript
compatibility
table

HTML5
Thank
you
so
mach.
Enjoy
HTML5!

HTML5

Mais conteúdo relacionado

Mais procurados

jQuery Conference 2012 keynotedmethvin

Angular vs react vs vueSina Mirhejazi

React native first impressionAlvaro Viebrantz

Front End Development for Back End Java Developers - NYJavaSIG 2019Matt Raible

An Intro to HTML5 and CSS3Dhruva Krishnan

The Future Of Web FrameworksMatt Raible

JHipsterYuen-Kuei Hsueh

Building Realtime Web Apps with Angular and MeteorMichael Redlich

Spring Boot APIs and Angular Apps: Get Hip with JHipster! KCDC 2019Matt Raible

Html5 FlyoverSkills Matter

Mais procurados (10)

jQuery Conference 2012 keynote

Angular vs react vs vue

React native first impression

Front End Development for Back End Java Developers - NYJavaSIG 2019

An Intro to HTML5 and CSS3

The Future Of Web Frameworks

JHipster

Building Realtime Web Apps with Angular and Meteor

Spring Boot APIs and Angular Apps: Get Hip with JHipster! KCDC 2019

Html5 Flyover

Destaque

Cara kuasa barat campur tangan (myanmar)raydaryl

Dasar pintu tertutup dan dasar pintu terbuka thailandraydaryl

It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI

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

Goodpatch Berlin ReportSadaaki HIRAI

Make the Prott FasterSadaaki HIRAI

Prott 1st Anniversary - user support and tipsTakafumi Haseda

Destaque (7)

Cara kuasa barat campur tangan (myanmar)

Dasar pintu tertutup dan dasar pintu terbuka thailand

It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える

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

Goodpatch Berlin Report

Make the Prott Faster

Prott 1st Anniversary - user support and tips

Semelhante a いま使われているHTML5と、これからのHTML5

HTML5 and Joomla! 2.5 TemplateMarvelic Engine Co., Ltd.

HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptTodd Anglin

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

Push it to the EdgeRobin-Manuel Thiel

Koubei banquet 30Koubei UED

夜宴30期《HTML5 is coming》Koubei Banquet

2012 - HTML5, CSS3 and jQuery with SharePoint 2010Chris O'Connor

SW Drupal Summit: HTML5+DrupalJen Simmons

Demystifying HTML5Sergejus Barinovas

Change by HTML5dynamis

Ie9 overview裕波周

InfoTalk#17 1stWakasa Masao

JquerySwapnil & Patil

HTML 5Prof. Erwin Globio

HTML5 Webinar - Mind Storm SoftwareRomin Irani

Planning for Windows 10 and Internet Explorer 11 Flexera

CodeFest 2012. Петунин Д. — Идеальные инструменты для разработки на HTML5CodeFest

Echo HTML5Nathan Smith

10 Jahre Webentwicklung - am Beispiel des Frameworks qooxdooMartin Wittemann

Html5Oliver Zico Mendes

Semelhante a いま使われているHTML5と、これからのHTML5 (20)

HTML5 and Joomla! 2.5 Template

HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

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

Push it to the Edge

Koubei banquet 30

夜宴30期《HTML5 is coming》

2012 - HTML5, CSS3 and jQuery with SharePoint 2010

SW Drupal Summit: HTML5+Drupal

Demystifying HTML5

Change by HTML5

Ie9 overview

InfoTalk#17 1st

Jquery

HTML 5

HTML5 Webinar - Mind Storm Software

Planning for Windows 10 and Internet Explorer 11

CodeFest 2012. Петунин Д. — Идеальные инструменты для разработки на HTML5

Echo HTML5

10 Jahre Webentwicklung - am Beispiel des Frameworks qooxdoo

Html5

Último

Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3

From Family Reminiscence to Scholarly Archive .Alan Dix

Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3

DevEX - reference for building teams, processes, and platformsSergiu Bodiu

A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation

Commit 2024 - Secret Management made easyAlfredo García Lavilla

"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays

SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero

WordPress Websites for Engineers: Elevate Your Brandgvaughan

SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays

Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos

Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University

DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell

いま使われているHTML5と、これからのHTML5

1. HTML5 HTML5 @GrapeCity 2013/10/25 @sada_h http://bit.ly/html5gc

2. Questions SIer? SE? Manager? Programmer? Java? .NET? HTML5 ? ? ?

3. 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

4. Attention HTML5 HTML5 HTML5 canvas canvas HTML5 API

5. Demos This Slide. reveal.js This Slide with Gesture. Gestures + Reveal.JS - Chrome Experiments getUserMedia Sample Hello Fisher three.js webgl - city

6. Agenda 1. Web HTML 2. 3. 4. 5. HTML5 HTML5

7. History of HTML

9. 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

10. 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)

11. 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

12. HTML5

13. Sites using HTML5 - Apple Apple

14. Sites using HTML5 - Apple HTML5 Markup Custom Data Attribute Role Attribute CSS3 Web Storage SVG data URL

15. Sites using HTML5 - Apple

16. Sites using HTML5 - Apple

17. Sites using HTML5 - Apple

18. Sites using HTML5 - Apple

19. Sites using HTML5 - Apple

20. Sites using HTML5 - Microsoft Microsoft Japan

21. Sites using HTML5 - Microsoft HTML5 Markup Custom Data Attribute Role Attribute CSS3 MediaQueries WebFonts

22. Sites using HTML5 - Microsoft

23. Sites using HTML5 - Microsoft

24. Sites using HTML5 - Microsoft

25. Sites using HTML5 - Microsoft

26. Sites using HTML5 - Tabelog

27. Sites using HTML5 - Tabelog Rich Snippets(RDFa/Microdata) Custom Data Attribute CSS3

28. Sites using HTML5 - Tabelog

29. Sites using HTML5 - Tabelog

30. Sites using HTML5 - Tabelog Google Structured Data Testing Tool

31.

32. Twitter Bootstrap Bootstrap

33. Twitter Bootstrap Bootstrap Bootstrap3 Flat design. Responsive. No Support IE7, Firefox 3.6 IE8 Respond.js MediaQueries Bootstrap jQuery

34. Samples No Bootstrap Sample Bootstrap Sample

35. Twitter Bootstrap

36. Twitter Bootstrap normalize.css html5shiv respond.js (for IE8)

37. Twitter Bootstrap jQuery

38. jQuery jQuery

39. jQuery jQuery 1.9 2.x 1.8 1.x

40. 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

41. 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

42. jQuery click, bind, live, delegate callback promise on

43. 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

44. Graph and Graphics Highcharts Chart.js D3.js Raphaël

45. Highcharts Highcharts

46. Chart.js Chart.js

47. D3.js D3.js

48. Raphaël Raphaël

49. MVC, MVVM, MVW HTML5 … Backbone.js Knockout AngularJS TodoMVC Model, View, Controller or View Model or Whatever.

50. HTML5

51. HTML 5.1 ... HTML 5.1 ECMAScript Standard ECMA-262 ECMAScript 5 compatibility table ECMAScript compatibility table

52.

53. HTML5 HTML5