Tweet
Tweet

Slide 1

Slide 1 text

In And Out Of Style

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Claude Shannon

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

information theory

Slide 7

Slide 7 text

—1948 The Mathematical Theory of Communication

Slide 8

Slide 8 text

P(x )logP(x ) Σ H(X)=- i i n i=1

Slide 9

Slide 9 text

entropy

Slide 10

Slide 10 text

bit

Slide 11

Slide 11 text

context

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

?

Slide 14

Slide 14 text

!

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

inertia

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Grace Hopper

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

path dependence

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

standards

Slide 29

Slide 29 text

agreement standards

Slide 30

Slide 30 text

World Wide Web agreement

Slide 31

Slide 31 text

World Wide Web

Slide 32

Slide 32 text

World Wide Web HTML URLs HTTP

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Tim Berners-Lee

Slide 35

Slide 35 text

worldwideweb30.com

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

<p> <h1> <h2> <h3> <ol> <ul> <li> <dl> <dd> <dt>

Slide 39

Slide 39 text

<p> <h1> <h2> <h3> <ol> <ul> <li> <dl> <dd> <dt> sgml

Slide 40

Slide 40 text

sgml html

Slide 41

Slide 41 text

gml

Slide 42

Slide 42 text

g m l

Slide 43

Slide 43 text

g m l oldfarb osher aurie

Slide 44

Slide 44 text

html

Slide 45

Slide 45 text

styling

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

12 Normal

0 Helvetica 12.0 1 90 90 14.0 3.0 0 0 14 0 Address

0 Helvetica-Oblique 12.0 1 90 90 14.0 3.0 1 0 14 0 Heading1

0 Helvetica-Bold 18.0 1 0 0 18.0 3.0 2 0 36 0 Heading2

0 Helvetica-Bold 14.0 1 0 0 14.0 3.0 0 14 14 0 Heading3

0 Helvetica-Oblique 14.0 1 10 10 14.0 3.0 0 14 14 0 Heading4

0 Helvetica-Bold 12.0 1 20 20 14.0 3.0 0 14 14 0 Heading5

0 Helvetica-Bold-Oblique 12.0 1 30 30 14.0 3.0 0 14 14 0 Heading6
0 Helvetica-Bold 12.0 1 40 40 14.0 3.0 0 14 14 0 List
  • 0 Helvetica 12.0 1 100 130 14 3 0 0 14 2 0 130 0 300 Glossary
    0 Helvetica 12.0 1 20 200 14 3 0 0 14 3 0 200 0 300 0 400 Example 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

    Slide 48 text

    color bgcolor size border

    Slide 49

    Slide 49 text

    separation of concerns

    Slide 50

    Slide 50 text

    proposals

    Slide 51

    Slide 51 text

    Rob Raisch

    Slide 52

    Slide 52 text

    @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

    Slide 53 text

    Pei Wei

    Slide 54

    Slide 54 text

    (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

    Slide 55 text

    Håkon Wium Lie

    Slide 56

    Slide 56 text

    h1.font.size = 24pt 100% h2.font.size = 20pt 40%

    Slide 57

    Slide 57 text

    influence

    Slide 58

    Slide 58 text

    read/write web

    Slide 59

    Slide 59 text

    user stylesheets

    Slide 60

    Slide 60 text

    @prefers-...

    Slide 61

    Slide 61 text

    font.size = 12pt h1.font.size = font.size * 3 h2.font.size = font.size * 2.5 h3.font.size = font.size * 2

    Slide 62

    Slide 62 text

    Bert Bos

    Slide 63

    Slide 63 text

    *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

    Slide 64 text

    design principles

    Slide 65

    Slide 65 text

    principles.adactio.com design principles

    Slide 66

    Slide 66 text

    Maintainability Modularity Minimum redundancy Accessibility Device-independency Internationality Extensibility Learnability Readability E ciency 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

    Slide 67 text

    Maintainability Modularity Minimum redundancy Accessibility Device-independency Internationality Extensibility Learnability Readability E ciency 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

    Slide 68 text

    Håkon Wium Lie Bert Bos

    Slide 69

    Slide 69 text

    Bert Bos CSS

    Slide 70

    Slide 70 text

    selector { property: value; }

    Slide 71

    Slide 71 text

    hacks

    Slide 72

    Slide 72 text

    layout

    Slide 73

    Slide 73 text

    flexbox grid

    Slide 74

    Slide 74 text

    typography

    Slide 75

    Slide 75 text

    No content

    Slide 76

    Slide 76 text

    @font-face

    Slide 77

    Slide 77 text

    graphic design

    Slide 78

    Slide 78 text

    No content

    Slide 79

    Slide 79 text

    border-radius linear-gradient

    Slide 80

    Slide 80 text

    No content

    Slide 81

    Slide 81 text

    No content

    Slide 82

    Slide 82 text

    clip-path linear-gradient ::after

    Slide 83

    Slide 83 text

    No content

    Slide 84

    Slide 84 text

    No content

    Slide 85

    Slide 85 text

    material honesty

    Slide 86

    Slide 86 text

    No content

    Slide 87

    Slide 87 text

    accent-color

    Slide 88

    Slide 88 text

    tools

    Slide 89

    Slide 89 text

    sass

    Slide 90

    Slide 90 text

    .sgm .htm

    Slide 91

    Slide 91 text

    .scss .css

    Slide 92

    Slide 92 text

    .scss .sass

    Slide 93

    Slide 93 text

    .scss .sass

    Slide 94

    Slide 94 text

    .scss .sass button color: red &:hover color: blue button { color: red; &:hover { color: blue; } }

    Slide 95

    Slide 95 text

    custom properties calc() nesting

    Slide 96

    Slide 96 text

    jQuery

    Slide 97

    Slide 97 text

    jQuery DOM

    Slide 98

    Slide 98 text

    jQuery DOM document. getElementsByTagName('p') document. getElementById('foo') $('p') $('#foo')

    Slide 99

    Slide 99 text

    jQuery DOM document. querySelectorAll('p') document. querySelector('#foo') $('p') $('#foo')

    Slide 100

    Slide 100 text

    sass jQuery Flash

    Slide 101

    Slide 101 text

    OOCSS BEM SMACSS

    Slide 102

    Slide 102 text

    OOCSS BEM SMACSS methodologies

    Slide 103

    Slide 103 text

    OOCSS BEM SMACSS agreements

    Slide 104

    Slide 104 text

    No content

    Slide 105

    Slide 105 text

    @layer @scope

    Slide 106

    Slide 106 text

    what’s still missing?

    Slide 107

    Slide 107 text

    button

    Slide 108

    Slide 108 text

    + CSS !
    + CSS + JavaScript + ARIA button

    Slide 109

    Slide 109 text

    dropdown

    Slide 110

    Slide 110 text

    + CSS " dropdown + CSS + JavaScript + ARIA

    Slide 111

    Slide 111 text

    date picker

    Slide 112

    Slide 112 text

    + CSS # date picker
    + CSS + JavaScript + ARIA

    Slide 113

    Slide 113 text

    + CSS + JavaScript + ARIA

    Slide 114

    Slide 114 text

    open-ui.org

    Slide 115

    Slide 115 text

    web browsers

    Slide 116

    Slide 116 text

    frameworks

    Slide 117

    Slide 117 text

    the future

    Slide 118

    Slide 118 text

    thank you