of HTML5 the design of HTML5 the design of HTML5 design - - PowerPoint PPT Presentation

▶
of html5
SMART_READER_LITE
LIVE PREVIEW

of HTML5 the design of HTML5 the design of HTML5 design - - PowerPoint PPT Presentation

Oct 28, 2023 283 likes •825 views

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

slide-1
SLIDE 1

the design

  • f HTML5
slide-2
SLIDE 2

the design

  • f HTML5
slide-3
SLIDE 3

the design

  • f HTML5
slide-4
SLIDE 4

design principles

slide-5
SLIDE 5

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

slide-6
SLIDE 6

From each according to his ability, to each according to his need.

—Karl Marx, 1875

slide-7
SLIDE 7

Do unto others as you would have them do unto you.

—Jesus of Nazareth, ~30AD

slide-8
SLIDE 8

Four legs good, two legs bad.

—George Orwell, Animal Farm

slide-9
SLIDE 9

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

slide-10
SLIDE 10

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

slide-11
SLIDE 11

HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 1995 1997 1997 1999

slide-12
SLIDE 12

XHTML 1.0 XHTML 1.1 XHTML 2 2000 2001

slide-13
SLIDE 13

Be conservative in what you send; be liberal in what you accept.

—Jon Postel, e Robustness Principle

slide-14
SLIDE 14

WHATWG W3C

HTML5

2004 2007

slide-15
SLIDE 15

the design

  • f HTML5
slide-16
SLIDE 16

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

slide-17
SLIDE 17

avoid needless complexity

Simple solutions are preferred to complex ones, when possible.

slide-18
SLIDE 18

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 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>

slide-19
SLIDE 19

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML 4.01 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">

slide-20
SLIDE 20

HTML5

<link rel="stylesheet" type="text/css" href="file.css"> <script type="text/javascript"> </script>

slide-21
SLIDE 21

support existing content

Existing content oen relies upon expected user agent processing and behaviour to function as intended.

slide-22
SLIDE 22

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

slide-23
SLIDE 23

Be conservative in what you send; be liberal in what you accept.

—Jon Postel, e Robustness Principle

slide-24
SLIDE 24

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.

slide-25
SLIDE 25

<h2><a href="/path/to/resource">Headline text</a></h2> <p><a href="/path/to/resource">Paragraph text.</a></p>

(X)HTML HTML5

<a href="/path/to/resource"> <h2>Headline text</h2> <p>Paragraph text.</p> </a>

slide-26
SLIDE 26

pave the cowpaths

slide-27
SLIDE 27

section article aside nav header footer details figure

slide-28
SLIDE 28

<body> <div id="header">...</div> <div id="navigation">...</div> <div id="main">...</div> <div id="sidebar">...</div> <div id="footer">...</div> </body>

slide-29
SLIDE 29

<body> <header>...</header> <nav>...</nav> <div id="main">...</div> <aside>...</aside> <footer>...</footer> </body>

slide-30
SLIDE 30

section article aside nav header footer details figure

slide-31
SLIDE 31

<div class="item"> <h2>...</h2> <div class="meta">...</div> <div class="content"> ... </div> <div class="links">...</div> </div>

slide-32
SLIDE 32

<section class="item"> <header><h1>...</h1></header> <footer class="meta">...</footer> <div class="content"> ... </div> <nav class="links">...</nav> </section>

slide-33
SLIDE 33

<section class="item"> <header><h1>...</h1></header> <footer class="meta">...</footer> <div class="content"> ... </div> <nav class="links">...</nav> </section>

slide-34
SLIDE 34

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

slide-35
SLIDE 35

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.

slide-36
SLIDE 36

input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"

slide-37
SLIDE 37

input type="number"

slide-38
SLIDE 38

input type="search"

slide-39
SLIDE 39

input type="search"

placeholder="e.g. salad or fish"

slide-40
SLIDE 40

Flash HTML5

  • bject

video

slide-41
SLIDE 41

<video src="movie.mp4"> </video> <!-- fallback content -->

slide-42
SLIDE 42

<video src="movie.mp4"> </video> <object data="movie.swf"> <!-- fallback content --> </object>

slide-43
SLIDE 43

<video src="movie.mp4"> </video> <object data="movie.swf"> <a href="movie.mp4">download</a> </object>

slide-44
SLIDE 44

<video> <source src="movie.mp4"> <source src="movie.ogv"> </video> <object data="movie.swf"> <a href="movie.mp4">download</a> </object>

slide-45
SLIDE 45

<video> <source src="movie.mp4"> <source src="movie.ogv"> </video> <object data="movie.swf"> <a href="movie.mp4">download</a> </object> 1 2 3 4

slide-46
SLIDE 46

e value of a network is proportional to the square

  • f the number of connected users of the system (n2).

—Robert Metcalfe

slide-47
SLIDE 47

priority of

constituencies

In case of conflict, consider users over authors over implementors over specifiers

  • ver theoretical purity.
slide-48
SLIDE 48

Soware, like all technologies, is inherently political. Code inevitably reflects the choices, biases and desires

  • f its creators.

—Jamais Cascio

slide-49
SLIDE 49
  • 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

slide-50
SLIDE 50

Design for humans first, machines second.

—Microformats.org, e microformats principles

slide-51
SLIDE 51

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

slide-52
SLIDE 52

Rough consensus and running code.

—e Tao of IETF

slide-53
SLIDE 53

@adactio adactio.com books.alistapart.com