In And Out Of Style
Slide 1
Slide 2
Slide 3
Slide 4
Claude Shannon
Slide 5
Slide 6
information theory
Slide 7
The Mathematical Theory of Communication —1948
Slide 8
n Σ H(X)= i=1 P(x i )logP(x i)
Slide 9
entropy
Slide 10
bit
Slide 11
context
Slide 12
Slide 13
?
Slide 14
!
Slide 15
Slide 16
Slide 17
Slide 18
Slide 19
Slide 20
Slide 21
Slide 22
inertia
Slide 23
Slide 24
Grace Hopper
Slide 25
Slide 26
path dependence
Slide 27
Slide 28
standards
Slide 29
standards agreement
Slide 30
World Wide agreement Web
Slide 31
World Wide Web
Slide 32
World Wide Web HTML URLs HTTP
Slide 33
Slide 34
Tim Berners-Lee
Slide 35
worldwideweb30.com
Slide 36
Slide 37
Slide 38
<ol>
<p>
<dt>
<h3>
<body> <h1> <dl>
<li>
<title> <dd>
<h2> <ul>
Slide 39
<ol> <body> <h1> <dl>
<p>
<dt>
sgml <dd>
<li> <h3>
<title>
<h2> <ul>
Slide 40
sgml html
Slide 41
gml
Slide 42
g m l
Slide 43
goldfarb m osher laurie
Slide 44
html
Slide 45
styling
Slide 46
Slide 47
12 Normal <P> 0 Helvetica 12.0 1 90 90 14.0 3.0 0 0 14 0 Address <P> 0 Helvetica-Oblique 12.0 1 90 90 14.0 3.0 1 0 14 0 Heading1 <H1> 0 Helvetica-Bold 18.0 1 0 0 18.0 3.0 2 0 36 0 Heading2 <H2> 0 Helvetica-Bold 14.0 1 0 0 14.0 3.0 0 14 14 0 Heading3 <H3> 0 Helvetica-Oblique 14.0 1 10 10 14.0 3.0 0 14 14 0 Heading4 <H4> 0 Helvetica-Bold 12.0 1 20 20 14.0 3.0 0 14 14 0 Heading5 <H5> 0 Helvetica-Bold-Oblique 12.0 30 30 14.0 3.0 0 14 14 0 Heading6 <H6> 0 Helvetica-Bold 12.0 1 40 40 14.0 3.0 0 14 14 0 List <LI> 0 Helvetica 12.0 100 130 14 3 0 0 130 0 300 0 14 Glossary <DL> 0 Helvetica 12.0 20 200 14 3 0 0 14 0 200 0 300 0 400 1 1 2 1 3 Example <XMP> 0 Ohlfs 10.0 1 0 0 14 3 0 0 0 9 0 48 0 96 0 144 0 192 0 240 0 288 0 336 0 384 0 432 Listing <LISTING> 0 Ohlfs 9.0 1 0 0 14 3 0 0 0 11 0 43.2 0 86.4 0 129.6 0 172.8 0 216 0 259.2 0 302.4 0 345.6 0 388.8 0 432 0 475.2
Slide 48
<multicol>
<b>
<i> <small> <big> <font> border bgcolor size color <center>
Slide 49
separation of concerns
Slide 50
proposals
Slide 51
Rob Raisch
Slide 52
@BODY fo(fa=he,si=18) @P br(lo=af,ob=it) ve(af=1) @B fo(we=bo) @I fo(sl=it)
Slide 53
Pei Wei
Slide 54
(HEAD,BODY fontSize=normal BGColor=white FGColor=black (H1 fontSize=largest BGColor=red FGColor=white) (H2 fontSize=large) (P) (A FGColor=red) (CMD,KBD,SCREEN,LISTING,EXAMPLE fontFamily=fixed) (BOLD,EMPH,STRONG fontWeight=bold) (I fontSlant=italic) (ADDRESS (P fontSlant=italic)) (OL (LI numStyle=roman (LI numStyle=number (LI numStyle=alpha) ) ) ) (FOOTNOTE fontSize=small (P) ) )
Slide 55
Håkon Wium Lie
Slide 56
h1.font.size = 24pt 100% h2.font.size = 20pt 40%
Slide 57
influence
Slide 58
read/write web
Slide 59
user stylesheets
Slide 60
@prefers-…
Slide 61
font.size = 12pt h1.font.size = font.size * 3 h2.font.size = font.size * 2.5 h3.font.size = font.size * 2
Slide 62
Bert Bos
Slide 63
*H1.size: 2 *H1.bold: true *H1.justify: center *H1.rulebefore: 1.0 *H1.ruleafter: 1.0 *H1.prebreak: 2.0 *H1.postbreak: 1.0 *H1.noindent: true
Slide 64
design principles
Slide 65
principles.adactio.com design principles
Slide 66
Maintainability Modularity Minimum redundancy Accessibility Device-independency Internationality Extensibility Learnability Readability Efficiency Binary or text format Implementability Simplicity Longevity Backwards compatibility Interoperability Repurposing of content Timeliness Use what is there Design by committee Expertise Brevity Stability Robustness design principles
Slide 67
Maintainability Modularity Minimum redundancy Accessibility Device-independency Internationality Extensibility Learnability Readability Efficiency Binary or text format Implementability Simplicity Longevity Backwards compatibility Interoperability Repurposing of content Timeliness Use what is there Design by committee Expertise Brevity Stability Robustness priorities
Slide 68
Bert Bos Håkon Wium Lie
Slide 69
Bert Bos CSS
Slide 70
selector { property: value; }
Slide 71
hacks
Slide 72
layout
Slide 73
flexbox grid
Slide 74
typography
Slide 75
Slide 76
@font-face
Slide 77
graphic design
Slide 78
Slide 79
border-radius linear-gradient
Slide 80
Slide 81
Slide 82
clip-path linear-gradient ::after
Slide 83
Slide 84
Slide 85
material honesty
Slide 86
Slide 87
accent-color
Slide 88
tools
Slide 89
sass
Slide 90
.sgm .htm
Slide 91
.css .scss
Slide 92
.sass .scss
Slide 93
.sass .scss
Slide 94
.sass button color: red &:hover color: blue .scss button { color: red; &:hover { color: blue; } }
Slide 95
custom properties calc() nesting
Slide 96
jQuery
Slide 97
DOM jQuery
Slide 98
DOM document. getElementsByTagName(‘p’) document. getElementById(‘foo’) jQuery $(‘p’) $(‘#foo’)
Slide 99
DOM jQuery document. querySelectorAll(‘p’) $(‘p’) document. querySelector(‘#foo’) $(‘#foo’)
Slide 100
sass jQuery Flash
Slide 101
OOCSS BEM SMACSS
Slide 102
OOCSS methodologies BEM SMACSS
Slide 103
OOCSS agreements BEM SMACSS
Slide 104
Slide 105
@layer @scope
Slide 106
what’s still missing?
Slide 107
button
Slide 108
button <button> + CSS !
<div> + CSS + JavaScript + ARIASlide 109
dropdown
Slide 110
dropdown <select> + CSS “
<div> + CSS + JavaScript + ARIASlide 111
date picker
Slide 112
date picker <input type=”date”> <div> + CSS + CSS # + JavaScript + ARIA
Slide 113
<input type=”date”> <div> + CSS <select> + JavaScript <button> + ARIA
Slide 114
open-ui.org
Slide 115
web browsers
Slide 116
frameworks
Slide 117
the future
Slide 118
thank you
