R E S ILIE N C E
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
It is a triumph more glorious,
because far more useful to mankind,
than was ever won by conqueror
on the field of battle. ” “ — President James Buchanan to Q ueen Victoria
Slide 14
Slide 15
Slide 16
Slide 17
Slide 18
Slide 19
lo
Slide 20
Slide 21
Slide 22
Slide 23
Slide 24
“Deli v er the bits, stupid. ” — David Isenberg “ Rise of the Stupid Network ”
Slide 25
email gopher f tp H T TP telnet TCP/IP
Slide 26
H T TP WWW URLs HTML
Slide 27
Slide 28
Slide 29
Slide 30
Slide 31
Slide 32
Slide 33
e trick... is to make sure that each limited mechanical part of the web,
each application, is within itself
composed of simple parts that will
ne v er get too powerful. ” “ — Tim Berners-Lee
Slide 34
H T TP WWW URLs HTML
Slide 35
HTML
Slide 36
HTML tags 21 elements
<ul>Slide 37
HTML 5 121 elements <wbr>
Slide 38
<div>
show me
</div>
Slide 39
<foo>
show me
</foo>
Slide 40
<main>
show me
</main>
Slide 41
<canvas>
hide me
</canvas>
Slide 42
<img src alt>
Slide 43
<img src alt srcset>
Slide 44
<picture>
<source srcset>
<source srcset>
<img
src
alt srcset>
</picture>
Slide 45
CSS
Slide 46
selector {
prope rt y : value ;
} OOCSS SMACSS BEM
Slide 47
HTML CSS
Slide 48
Be conservative in what you send, be liberal in what you accept.” “ — Jon Postel
Slide 49
Slide 50
HTML CSS JavaScript declarative imperative resilient fragile
Slide 51
X HTML 2 fragile
Slide 52
fragile JavaScript
Slide 53
<a href=" javascript:void(0) "> Download Chrome </a>
Slide 54
Anything that can possibly go wrong,
will go wrong. ” “ —Edward Aloysius Murphy, Jr.
Slide 55
Slide 56
Slide 57
Identify core functionality . 2. Make that functionality available using the simplest technolog y. 3. Enhance!
Slide 58
Identify core functionality . 2. Make that functionality available using the simplest technolog y. 3. Enhance!
Slide 59
Slide 60
Identify core functionality . 2. Make that functionality available using the simplest technolog y. 3. Enhance!
Slide 61
<nav>
<main>
<h1>
<p>
<article> <header> <footer>
Slide 62
<ol>
<li>
<li>
<li>
</ol>
<input type=“text”>
Slide 63
<input type=“file”>
<img>
<img>
<img>
Slide 64
<textarea>
Slide 65
Identify core functionality . 2. Make that functionality available using the simplest technolog y. 3. Enhance!
Slide 66
layout @font-face
Slide 67
ajax websocket
Slide 68
CSS filters file API
Slide 69
local storage service worker
Slide 70
Identify core functionality . 2. Make that functionality available using the simplest technolog y. 3. Enhance!
Slide 71
“
is is too easy. ”
Slide 72
“
is is too hard. ”
Slide 73
Identify core functionality . 2. Make that functionality available using the simplest technolog y. 3. Enhance!
Slide 74
Slide 75
Slide 76
Slide 77
— gov.uk Government Service Design Manual If you build pages with the idea that parts other than html are optional, you will create a better and stronger web page.” “
Slide 78
developer convenience user needs
Slide 79
Ninety percent of everything is crud.” “ — " eodore Sturgeon
Slide 80
" e tragedy of the commons
Slide 81
640 800 1024
Slide 82
2 1 6
c o l o u r s Times New Roman Arial Verdana Netscape 4 IE 6 Windows XP Android 2.x
Slide 83
Slide 84
With that movie 2001, you’re projecting us into the 21st century. I brought along my son Jonathan who in the year 2001 will be the same age as I am now. Maybe he will be better adjusted to this kind of world that you’re trying to portray. " e big difference when he grows up in fact if we wanted to wait until the year 2001 is that he will have in his own house not a computer as big as this but at least a console through which he can talk to his friendly local computer and get all the information he needs for his everyday life like his bank statements his theatre reservations all the information you need in the course of living in our complex modern society. " is will be in a compact form in his own house. He’ll have a television screen like these here and a keyboard and he’ll talk to the computer and get information from it and he’ll take it as much for granted as we take the telephone.
Slide 85
Any su ffi ciently advanced technolog y is indistinguishable % om magic.” “ — Arthur C. Clarke
Slide 86
Slide 87
H T TP WWW URLs HTML
Slide 88
URLs
Slide 89
Cool URIs don’t change.” “ — Tim Berners-Lee
Slide 90
Slide 91
Slide 92
Slide 93
Slide 94
R E S ILIE N C E
