SlideShare ist ein Scribd-Unternehmen logo
1 von 53
Downloaden Sie, um offline zu lesen
the design
of HTML5
the design
of HTML5
the design
of HTML5
design
principles
We hold these Truths to be self-evident,
that all Men are created equal,
that they are endowed by their Creator with
certain unalienable Rights,
that among these are
Life, Liberty and the pursuit of Happiness.

—e Declaration Of Independence,
                     1776-07-04
From each according to his ability,
to each according to his need.



                                  —Karl Marx,
                                        1875
Do unto others as you would have them do unto you.




                       —Jesus of Nazareth,
                                  ~30AD
Four legs good, two legs bad.




                           —George Orwell,
                             Animal Farm
A robot may not injure a human being or, through
inaction, allow a human being to come to harm.

A robot must obey any orders given to it by human
beings, except where such orders would conflict with
the First Law.

A robot must protect its own existence as long as such
protection does not conflict with the First or Second
Law.
                               —Isaac Asimov,
                                     I, Robot
Principles such as simplicity and modularity
are the stuff of soware engineering;
decentralisation and tolerance
are the life and breath of Internet.


                       —Tim Berners-Lee,
                       Principles of Design
HTML 2.0    1995
HTML 3.2    1997
HTML 4.0    1997
HTML 4.01   1999
XHTML 1.0   2000
XHTML 1.1   2001
XHTML 2
Be conservative in what you send;
be liberal in what you accept.



                         —Jon Postel,
                e Robustness Principle
WHATWG   2004
W3C      2007

  HTML5
the design
of HTML5
is document describes the set of guiding principles
used by the HTML Working Group for the
development of HTML5. e principles offer
guidance for the design of HTML in the areas of
compatibility, utility and interoperability.


         —HTML Design Principles
   w3.org/TR/html-design-principles
avoid
needless
complexity
Simple solutions are preferred to complex ones,
when possible.
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">



XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



HTML5                 <!DOCTYPE html>
HTML 4.01
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">



XHTML 1.0
<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />


HTML5                    <meta charset="utf-8">
<link rel="stylesheet" type="text/css"
href="file.css">


<script type="text/javascript">
</script>


HTML5
support
existing
content
Existing content oen relies upon expected user agent
processing and behaviour to function as intended.
<img src="foo" alt="bar" />
<p class="foo">Hello world</p>

<img src="foo" alt="bar">
<p class="foo">Hello world

<IMG SRC="foo" ALT="bar">
<P CLASS="foo">Hello world</P>

<img src=foo alt=bar>
<p class=foo>Hello world</p>
Be conservative in what you send;
be liberal in what you accept.



                         —Jon Postel,
                e Robustness Principle
solve real
problems
Abstract architectures that don’t address an existing
need are less favoured than pragmatic solutions to
problems that web content faces today.
(X)HTML
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>



HTML5
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>
pave the
cowpaths
section   header
article    footer
aside     details
nav        figure
<body>
<div id="header">...</div>
<div id="navigation">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</body>
<body>
<header>...</header>
<nav>...</nav>
<div id="main">...</div>
<aside>...</aside>
<footer>...</footer>
</body>
section   header
article    footer
aside     details
nav        figure
<div class="item">
<h2>...</h2>
<div class="meta">...</div>
<div class="content">
...
</div>
<div class="links">...</div>
</div>
<section class="item">
<header><h1>...</h1></header>
<footer class="meta">...</footer>
<div class="content">
...
</div>
<nav class="links">...</nav>
</section>
<section class="item">
<header><h1>...</h1></header>
<footer class="meta">...</footer>
<div class="content">
...
</div>
<nav class="links">...</nav>
</section>
I would in fact prefer, instead of <H1>, <H2> etc
for headings to have a nestable <SECTION>..
</SECTION> element, and a generic <H>..</H>
which at any level within the sections would produce
the required level of heading.


                        —Tim Berners-Lee,
                                    1991
degrade
gracefully
HTML 5 document conformance requirements
should be designed so that Web content can
degrade gracefully in older or less capable user
agents, even when making use of new elements,
attributes, APIs and content models.
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
input type="number"
input type="search"
input type="search"
placeholder="e.g. salad or fish"
HTML5 Flash
video object
<video src="movie.mp4">

<!-- fallback content -->

</video>
<video src="movie.mp4">
<object data="movie.swf">
<!-- fallback content -->
</object>
</video>
<video src="movie.mp4">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video>
<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video>
<video>
<source src="movie.mp4">         1
<source src="movie.ogv">         2
<object data="movie.swf">        3
<a href="movie.mp4">download</a> 4
</object>
</video>
e value of a network is proportional to the square
of the number of connected users of the system (n2).



                          —Robert Metcalfe
priority of
constituencies
In case of conflict, consider
users over authors over
implementors over specifiers
over theoretical purity.
Soware, like all technologies, is inherently political.
Code inevitably reflects the choices, biases and desires
of its creators.



                               —Jamais Cascio
1. Make the most equent tasks easy and less
equent tasks achievable.

2. Design for the 80%.

3. Privilege the Content Creator.

4. Make the default settings smart.
       —Mark Boulton, Leisa Reichelt,
                            d7ux.org
Design for humans first, machines second.




                 —Microformats.org,
            e microformats principles
e effectiveness of the Internet as a public resource
depends upon interoperability (protocols, data
formats, content), innoation and decentralised
participation worldwide.

Transparent community-based processes promote
participation, accountability, and trust.

               —e Mozilla Foundation,
                 e Mozilla Manifesto
Rough consensus and running code.




                       —e Tao of IETF
@adactio
adactio.com
books.alistapart.com

Weitere ähnliche Inhalte

Andere mochten auch

雷志兴 百度前端基础平台与架构分享
雷志兴 百度前端基础平台与架构分享雷志兴 百度前端基础平台与架构分享
雷志兴 百度前端基础平台与架构分享isnull
 
阿里巴巴 招聘技巧培训
阿里巴巴 招聘技巧培训阿里巴巴 招聘技巧培训
阿里巴巴 招聘技巧培训isnull
 
我的Ubuntu之旅
我的Ubuntu之旅我的Ubuntu之旅
我的Ubuntu之旅isnull
 
Data on the web
Data on the webData on the web
Data on the webisnull
 
Mysql introduction-and-performance-optimization
Mysql introduction-and-performance-optimizationMysql introduction-and-performance-optimization
Mysql introduction-and-performance-optimizationisnull
 
杨皓 新浪博客前端架构分享
杨皓 新浪博客前端架构分享杨皓 新浪博客前端架构分享
杨皓 新浪博客前端架构分享isnull
 
Daniela Barcelo Creative Director Portfolio 2014
Daniela Barcelo Creative Director Portfolio 2014Daniela Barcelo Creative Director Portfolio 2014
Daniela Barcelo Creative Director Portfolio 2014Daniela Barceló
 

Andere mochten auch (7)

雷志兴 百度前端基础平台与架构分享
雷志兴 百度前端基础平台与架构分享雷志兴 百度前端基础平台与架构分享
雷志兴 百度前端基础平台与架构分享
 
阿里巴巴 招聘技巧培训
阿里巴巴 招聘技巧培训阿里巴巴 招聘技巧培训
阿里巴巴 招聘技巧培训
 
我的Ubuntu之旅
我的Ubuntu之旅我的Ubuntu之旅
我的Ubuntu之旅
 
Data on the web
Data on the webData on the web
Data on the web
 
Mysql introduction-and-performance-optimization
Mysql introduction-and-performance-optimizationMysql introduction-and-performance-optimization
Mysql introduction-and-performance-optimization
 
杨皓 新浪博客前端架构分享
杨皓 新浪博客前端架构分享杨皓 新浪博客前端架构分享
杨皓 新浪博客前端架构分享
 
Daniela Barcelo Creative Director Portfolio 2014
Daniela Barcelo Creative Director Portfolio 2014Daniela Barcelo Creative Director Portfolio 2014
Daniela Barcelo Creative Director Portfolio 2014
 

Ähnlich wie Designofhtml5

Migration from FAST ESP to Solr
Migration from FAST ESP to SolrMigration from FAST ESP to Solr
Migration from FAST ESP to SolrTNR Global
 
Known XML Vulnerabilities Are Still a Threat to Popular Parsers ! & Open Sour...
Known XML Vulnerabilities Are Still a Threat to Popular Parsers ! & Open Sour...Known XML Vulnerabilities Are Still a Threat to Popular Parsers ! & Open Sour...
Known XML Vulnerabilities Are Still a Threat to Popular Parsers ! & Open Sour...Lionel Briand
 
Busy Architects Guide to Modern Web Architecture in 2014
Busy Architects Guide to  Modern Web Architecture in 2014Busy Architects Guide to  Modern Web Architecture in 2014
Busy Architects Guide to Modern Web Architecture in 2014Particular Software
 
Open for Business - Open Archives, OpenURL, RSS and the Dublin Core
Open for Business - Open Archives, OpenURL, RSS and the Dublin CoreOpen for Business - Open Archives, OpenURL, RSS and the Dublin Core
Open for Business - Open Archives, OpenURL, RSS and the Dublin CoreAndy Powell
 
The Semantic Web
The Semantic WebThe Semantic Web
The Semantic WebBarry Smith
 
Wisdom Of Crowds
Wisdom Of CrowdsWisdom Of Crowds
Wisdom Of Crowdsguest5dedec
 
Implementing the Genetic Algorithm in XSLT: PoC
Implementing the Genetic Algorithm in XSLT: PoCImplementing the Genetic Algorithm in XSLT: PoC
Implementing the Genetic Algorithm in XSLT: PoCjimfuller2009
 
Bodleian Library's DAMS system
Bodleian Library's DAMS systemBodleian Library's DAMS system
Bodleian Library's DAMS systembenosteen
 
IPTC News in JSON Spring 2013
IPTC News in JSON Spring 2013IPTC News in JSON Spring 2013
IPTC News in JSON Spring 2013Stuart Myles
 
Semantic web and Linked Data
Semantic web and Linked DataSemantic web and Linked Data
Semantic web and Linked DataHyun Namgoong
 
An Introduction to Working With the Activity Stream
An Introduction to Working With the Activity StreamAn Introduction to Working With the Activity Stream
An Introduction to Working With the Activity StreamMikkel Flindt Heisterberg
 
Mikkel Heisterberg - An introduction to developing for the Activity Stream
Mikkel Heisterberg - An introduction to developing for the Activity StreamMikkel Heisterberg - An introduction to developing for the Activity Stream
Mikkel Heisterberg - An introduction to developing for the Activity StreamLetsConnect
 
Introduction to MySQL Document Store
Introduction to MySQL Document StoreIntroduction to MySQL Document Store
Introduction to MySQL Document StoreFrederic Descamps
 
Institutional knowledge and information ecology in a Free Software ecosystem
Institutional knowledge and information ecology in a Free Software ecosystemInstitutional knowledge and information ecology in a Free Software ecosystem
Institutional knowledge and information ecology in a Free Software ecosystemDerek Keats
 
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...Codemotion
 
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...Codemotion
 
Dégraissons le mammouth ou Darwin a encore frappé - La théorie de l'évolution...
Dégraissons le mammouth ou Darwin a encore frappé - La théorie de l'évolution...Dégraissons le mammouth ou Darwin a encore frappé - La théorie de l'évolution...
Dégraissons le mammouth ou Darwin a encore frappé - La théorie de l'évolution...Arnauld Loyer
 

Ähnlich wie Designofhtml5 (20)

Le design du HTML5 (Remix)
Le design du HTML5 (Remix)Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
 
Migration from FAST ESP to Solr
Migration from FAST ESP to SolrMigration from FAST ESP to Solr
Migration from FAST ESP to Solr
 
Known XML Vulnerabilities Are Still a Threat to Popular Parsers ! & Open Sour...
Known XML Vulnerabilities Are Still a Threat to Popular Parsers ! & Open Sour...Known XML Vulnerabilities Are Still a Threat to Popular Parsers ! & Open Sour...
Known XML Vulnerabilities Are Still a Threat to Popular Parsers ! & Open Sour...
 
Busy Architects Guide to Modern Web Architecture in 2014
Busy Architects Guide to  Modern Web Architecture in 2014Busy Architects Guide to  Modern Web Architecture in 2014
Busy Architects Guide to Modern Web Architecture in 2014
 
Open for Business - Open Archives, OpenURL, RSS and the Dublin Core
Open for Business - Open Archives, OpenURL, RSS and the Dublin CoreOpen for Business - Open Archives, OpenURL, RSS and the Dublin Core
Open for Business - Open Archives, OpenURL, RSS and the Dublin Core
 
The Semantic Web
The Semantic WebThe Semantic Web
The Semantic Web
 
Wisdom Of Crowds
Wisdom Of CrowdsWisdom Of Crowds
Wisdom Of Crowds
 
Implementing the Genetic Algorithm in XSLT: PoC
Implementing the Genetic Algorithm in XSLT: PoCImplementing the Genetic Algorithm in XSLT: PoC
Implementing the Genetic Algorithm in XSLT: PoC
 
Bodleian Library's DAMS system
Bodleian Library's DAMS systemBodleian Library's DAMS system
Bodleian Library's DAMS system
 
IPTC News in JSON Spring 2013
IPTC News in JSON Spring 2013IPTC News in JSON Spring 2013
IPTC News in JSON Spring 2013
 
Semantic web and Linked Data
Semantic web and Linked DataSemantic web and Linked Data
Semantic web and Linked Data
 
An Introduction to Working With the Activity Stream
An Introduction to Working With the Activity StreamAn Introduction to Working With the Activity Stream
An Introduction to Working With the Activity Stream
 
Mikkel Heisterberg - An introduction to developing for the Activity Stream
Mikkel Heisterberg - An introduction to developing for the Activity StreamMikkel Heisterberg - An introduction to developing for the Activity Stream
Mikkel Heisterberg - An introduction to developing for the Activity Stream
 
Introduction to MySQL Document Store
Introduction to MySQL Document StoreIntroduction to MySQL Document Store
Introduction to MySQL Document Store
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
Institutional knowledge and information ecology in a Free Software ecosystem
Institutional knowledge and information ecology in a Free Software ecosystemInstitutional knowledge and information ecology in a Free Software ecosystem
Institutional knowledge and information ecology in a Free Software ecosystem
 
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...
 
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...
Cristiano Rastelli - Atomic Design, Design Systems and React. Cool, but... - ...
 
Cs 891 2rev B
Cs 891 2rev BCs 891 2rev B
Cs 891 2rev B
 
Dégraissons le mammouth ou Darwin a encore frappé - La théorie de l'évolution...
Dégraissons le mammouth ou Darwin a encore frappé - La théorie de l'évolution...Dégraissons le mammouth ou Darwin a encore frappé - La théorie de l'évolution...
Dégraissons le mammouth ou Darwin a encore frappé - La théorie de l'évolution...
 

Mehr von isnull

站点报告模板
站点报告模板站点报告模板
站点报告模板isnull
 
My sql数据库开发的三十六条军规
My sql数据库开发的三十六条军规My sql数据库开发的三十六条军规
My sql数据库开发的三十六条军规isnull
 
基于Web的项目管理工具redmine
基于Web的项目管理工具redmine基于Web的项目管理工具redmine
基于Web的项目管理工具redmineisnull
 
张勇 搜搜前端架构
张勇 搜搜前端架构张勇 搜搜前端架构
张勇 搜搜前端架构isnull
 
Mysql开发与优化
Mysql开发与优化Mysql开发与优化
Mysql开发与优化isnull
 
软件工程&架构
软件工程&架构软件工程&架构
软件工程&架构isnull
 
淘宝分布式数据处理实践
淘宝分布式数据处理实践淘宝分布式数据处理实践
淘宝分布式数据处理实践isnull
 
183银行服务器下载说明
183银行服务器下载说明183银行服务器下载说明
183银行服务器下载说明isnull
 
人人网技术经理张铁安 Feed系统结构浅析
人人网技术经理张铁安 Feed系统结构浅析人人网技术经理张铁安 Feed系统结构浅析
人人网技术经理张铁安 Feed系统结构浅析isnull
 
Tsung
Tsung Tsung
Tsung isnull
 
Dutch php conference_apc_mem2010
Dutch php conference_apc_mem2010Dutch php conference_apc_mem2010
Dutch php conference_apc_mem2010isnull
 
Dutch php conference_2010_opm
Dutch php conference_2010_opmDutch php conference_2010_opm
Dutch php conference_2010_opmisnull
 
Yui3 初探
Yui3 初探Yui3 初探
Yui3 初探isnull
 
大型应用软件架构的变迁
大型应用软件架构的变迁大型应用软件架构的变迁
大型应用软件架构的变迁isnull
 
易趣
易趣易趣
易趣isnull
 

Mehr von isnull (17)

站点报告模板
站点报告模板站点报告模板
站点报告模板
 
My sql数据库开发的三十六条军规
My sql数据库开发的三十六条军规My sql数据库开发的三十六条军规
My sql数据库开发的三十六条军规
 
基于Web的项目管理工具redmine
基于Web的项目管理工具redmine基于Web的项目管理工具redmine
基于Web的项目管理工具redmine
 
张勇 搜搜前端架构
张勇 搜搜前端架构张勇 搜搜前端架构
张勇 搜搜前端架构
 
Mysql开发与优化
Mysql开发与优化Mysql开发与优化
Mysql开发与优化
 
软件工程&架构
软件工程&架构软件工程&架构
软件工程&架构
 
淘宝分布式数据处理实践
淘宝分布式数据处理实践淘宝分布式数据处理实践
淘宝分布式数据处理实践
 
Scrum
ScrumScrum
Scrum
 
Scrum
ScrumScrum
Scrum
 
183银行服务器下载说明
183银行服务器下载说明183银行服务器下载说明
183银行服务器下载说明
 
人人网技术经理张铁安 Feed系统结构浅析
人人网技术经理张铁安 Feed系统结构浅析人人网技术经理张铁安 Feed系统结构浅析
人人网技术经理张铁安 Feed系统结构浅析
 
Tsung
Tsung Tsung
Tsung
 
Dutch php conference_apc_mem2010
Dutch php conference_apc_mem2010Dutch php conference_apc_mem2010
Dutch php conference_apc_mem2010
 
Dutch php conference_2010_opm
Dutch php conference_2010_opmDutch php conference_2010_opm
Dutch php conference_2010_opm
 
Yui3 初探
Yui3 初探Yui3 初探
Yui3 初探
 
大型应用软件架构的变迁
大型应用软件架构的变迁大型应用软件架构的变迁
大型应用软件架构的变迁
 
易趣
易趣易趣
易趣
 

Designofhtml5