Slide 1
Slide 1 text
HTML5: start using it now!
@alexbilbie
Wednesday, 30 May 12
Slide 2
Slide 2 text
@alexbilbie
• Developer at @unilincoln
• #PHP #CodeIgniter #APIs #REST #MongoDB #OAuth
#LinkedData
Wednesday, 30 May 12
Slide 3
Slide 3 text
state of the union
Wednesday, 30 May 12
Slide 4
Slide 4 text
HTML5
Wednesday, 30 May 12
Slide 5
Slide 5 text
W3C working draft
(29th March 2012)
http://lncn.eu/gjx2
Wednesday, 30 May 12
Slide 6
Slide 6 text
editors draft
(~daily edits)
http://lncn.eu/ghj2
Wednesday, 30 May 12
Slide 7
Slide 7 text
CSS3
Wednesday, 30 May 12
Slide 8
Slide 8 text
mostly W3C
recommendations status
Wednesday, 30 May 12
Slide 9
Slide 9 text
ECMAScript Harmony
(JavaScript)
Wednesday, 30 May 12
Slide 10
Slide 10 text
desktop browsers
Wednesday, 30 May 12
Slide 11
Slide 11 text
Wednesday, 30 May 12
Slide 12
Slide 12 text
Wednesday, 30 May 12
Slide 13
Slide 13 text
Wednesday, 30 May 12
Slide 14
Slide 14 text
Wednesday, 30 May 12
Slide 15
Slide 15 text
IE6
Wednesday, 30 May 12
Slide 16
Slide 16 text
IE7
Wednesday, 30 May 12
Slide 17
Slide 17 text
IE8
Wednesday, 30 May 12
Slide 18
Slide 18 text
IE9
Wednesday, 30 May 12
Slide 19
Slide 19 text
IE10
Wednesday, 30 May 12
Slide 20
Slide 20 text
mobile browsers
Wednesday, 30 May 12
Slide 21
Slide 21 text
iOS
Wednesday, 30 May 12
Slide 22
Slide 22 text
Android
Wednesday, 30 May 12
Slide 23
Slide 23 text
Blackberry
Wednesday, 30 May 12
Slide 24
Slide 24 text
Windows Mobile
Wednesday, 30 May 12
Slide 25
Slide 25 text
Mobile Opera
Wednesday, 30 May 12
Slide 26
Slide 26 text
start using HTML5 today!
Wednesday, 30 May 12
Slide 27
Slide 27 text
doctype
Wednesday, 30 May 12
Slide 28
Slide 28 text
Wednesday, 30 May 12
Slide 29
Slide 29 text
UTF 8
Wednesday, 30 May 12
Slide 30
Slide 30 text
Wednesday, 30 May 12
Slide 31
Slide 31 text
Dev8D
Hello, world!
Wednesday, 30 May 12Slide 32
Slide 32 text
New structural elements
Wednesday, 30 May 12
Slide 33
Slide 33 text
Popularity Value
1 footer
2 menu
3 style1
4 msonormal
5 text
6 content
7 title
8 style2
9 header
10 copyright
Wednesday, 30 May 12
Slide 34
Slide 34 text
Popularity Value
1 footer
2 content
3 header
4 logo
5 container
6 main
7 table1
8 menu
9 layer1
10 autonumber1
Wednesday, 30 May 12
Slide 35
Slide 35 text
Wednesday, 30 May 12
Slide 36
Slide 36 text
Wednesday, 30 May 12
Slide 37
Slide 37 text
IE shim
http://lncn.eu/h37
Wednesday, 30 May 12
Slide 38
Slide 38 text
Wednesday, 30 May 12
! Slide 40
Slide 40 text
Wednesday, 30 May 12
Slide 42
Slide 42 text
Wednesday, 30 May 12
Slide 43
Slide 43 text
Wednesday, 30 May 12
Slide 44
Slide 44 text
Wednesday, 30 May 12
Slide 45
Slide 45 text
!
! !
Hello world!
! ! ! ! !Written by Alex
! ! ! ! ! The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die. ! ! !Tagged with Slipsum !
Wednesday, 30 May 12Slide 46
Slide 46 text
Wednesday, 30 May 12
Slide 47
Slide 47 text
Wednesday, 30 May 12
Slide 48
Slide 48 text
!
Wednesday, 30 May 12
! ! Dev8D ! ! ! ! ! Developer Happiness ! ! !
Slide 49
Slide 49 text
!
! ! Dev8D !
!! ! Developer happiness !
Wednesday, 30 May 12Slide 50
Slide 50 text
Wednesday, 30 May 12
Slide 51
Slide 51 text
!
! ! HTML5 Talk with Alex Bilbie
!
!
! ! A talk looking at all the exciting new web technologies. !
Wednesday, 30 May 12Slide 52
Slide 52 text
HTML5 talk with Alex Bilbie
Python with Richard Jones
+
+
Wednesday, 30 May 12
Slide 53
Slide 53 text
HTML5 talk with Alex Bilbie
A talk looking at all the exciting new web
technologies.
Python with Richard Jones
-
+
Wednesday, 30 May 12
Slide 54
Slide 54 text
Wednesday, 30 May 12
Slide 55
Slide 55 text
! 
!
! ! Dev8D logo
!
Wednesday, 30 May 12
!
! ! Dev8D logo
!
Wednesday, 30 May 12
Slide 56
Slide 56 text
Wednesday, 30 May 12
Slide 57
Slide 57 text
! Dev8D is the major UK event in the year for developers in the education sector to learn from one another and ultimately create better, smarter technology for learning and research.
Wednesday, 30 May 12Slide 58
Slide 58 text
Dev8D is the major UK event in the
year for developers in the education
sector to learn from one another and
ultimately create better, smarter
technology for learning and research.
Wednesday, 30 May 12
Slide 59
Slide 59 text
refined elements
Wednesday, 30 May 12
Slide 60
Slide 60 text
-
Wednesday, 30 May 12
Slide 61
Slide 61 text
-
!
- Foo !
- Bar !
- Foobar
Slide 62
Slide 62 text
Best Star Wars characters
-
!
- Luke Skywalker !
- Admiral Ackbar !
- Chewie !
- Han Solo !
- R2D2
Slide 63
Slide 63 text
-
Wednesday, 30 May 12
Slide 64
Slide 64 text
Star Wars characters
-
!
- Goodies ! !
- Han Solo ! !
- Luke Skywalker !
- Baddies ! !
- Darth Vader ! !
- The Emperor
Slide 65
Slide 65 text
Wednesday, 30 May 12
Slide 66
Slide 66 text
! ...
! ...
!
! !
! ! ! Contact the author ! ! !
! ! ! ! ! ! ! ! ! via email ! ! ! ! ! ! ! ! !!
Wednesday, 30 May 12Slide 67
Slide 67 text
Wednesday, 30 May 12
Slide 68
Slide 68 text
! ...the best car in the world
Wednesday, 30 May 12Slide 69
Slide 69 text
Wednesday, 30 May 12
Slide 70
Slide 70 text
! We ate unagi, aburi- zake, and tako sushi last night, but the torosushi was all fished out
Wednesday, 30 May 12Slide 71
Slide 71 text
Wednesday, 30 May 12
Slide 72
Slide 72 text
! Warning! ! this coffee is weak.
Wednesday, 30 May 12Slide 73
Slide 73 text
Wednesday, 30 May 12
Slide 74
Slide 74 text
! Has Bean roast great coffee.
Wednesday, 30 May 12Slide 75
Slide 75 text
Wednesday, 30 May 12
Slide 76
Slide 76 text
! // Frodo and Sam in Mordor
!
! // Gandalf fighting in Minas Tirith !
! // Aragorn, Legolas and Gimli fighting Orcs in the field Wednesday, 30 May 12
! // Gandalf fighting in Minas Tirith !
! // Aragorn, Legolas and Gimli fighting Orcs in the field Wednesday, 30 May 12
Slide 77
Slide 77 text
removed elements
Wednesday, 30 May 12
Slide 78
Slide 78 text
Wednesday, 30 May 12
Slide 79
Slide 79 text
Wednesday, 30 May 12
Slide 80
Slide 80 text
Wednesday, 30 May 12
Slide 81
Slide 81 text
Wednesday, 30 May 12
Slide 82
Slide 82 text
Wednesday, 30 May 12
Slide 83
Slide 83 text
Wednesday, 30 May 12
Slide 84
Slide 84 text
Wednesday, 30 May 12
Slide 85
Slide 85 text
new attributes
Wednesday, 30 May 12
Slide 86
Slide 86 text
contenteditable
Wednesday, 30 May 12
Slide 87
Slide 87 text
! lorem ipsum
Wednesday, 30 May 12
Slide 88
Slide 88 text
data-foo=”bar”
Wednesday, 30 May 12
Slide 89
Slide 89 text
! lorem ipsum
Wednesday, 30 May 12
Slide 90
Slide 90 text
$(‘article’).data(‘author’)
// returns “alex”
Wednesday, 30 May 12
Slide 91
Slide 91 text
hidden
Wednesday, 30 May 12
Slide 92
Slide 92 text
item
itemprop
subject
Wednesday, 30 May 12
Slide 93
Slide 93 text
! Alex Bilbie
! ! ! ICT Services !
! ! ! University of Lincoln
! ! Brayford Pool !
! ! ! Lincoln !
! ! ! Lincolnshire !
! ! ! LN6 7TS !
! ! ! United Kingdom ! Wednesday, 30 May 12
! ! ! ICT Services !
! ! ! University of Lincoln
! ! Brayford Pool !
! ! ! Lincoln !
! ! ! Lincolnshire !
! ! ! LN6 7TS !
! ! ! United Kingdom ! Wednesday, 30 May 12
Slide 94
Slide 94 text
http://schema.org/
Wednesday, 30 May 12
Slide 95
Slide 95 text
role=”foobar”
aria-*=”foobar”
Wednesday, 30 May 12
Slide 96
Slide 96 text
forms
Wednesday, 30 May 12
Slide 97
Slide 97 text
Wednesday, 30 May 12
Slide 98
Slide 98 text
Wednesday, 30 May 12
Slide 99
Slide 99 text
Wednesday, 30 May 12
Slide 100
Slide 100 text
Wednesday, 30 May 12
Slide 101
Slide 101 text
Wednesday, 30 May 12
Slide 102
Slide 102 text
Wednesday, 30 May 12
Slide 103
Slide 103 text
Wednesday, 30 May 12
Slide 104
Slide 104 text
Wednesday, 30 May 12
Slide 105
Slide 105 text
Wednesday, 30 May 12
Slide 106
Slide 106 text
!
Wednesday, 30 May 12
Slide 107
Slide 107 text
placeholder
Wednesday, 30 May 12
Slide 108
Slide 108 text
required
Wednesday, 30 May 12
Slide 109
Slide 109 text
multiple
Wednesday, 30 May 12
Slide 110
Slide 110 text
pattern
Wednesday, 30 May 12
Slide 111
Slide 111 text
autocomplete
Wednesday, 30 May 12
Slide 112
Slide 112 text
step
Wednesday, 30 May 12
Slide 113
Slide 113 text
formnovalidate
Wednesday, 30 May 12
Slide 114
Slide 114 text
! Name
!
! Email
!
! Website
!
! Your comment
! </form>
Wednesday, 30 May 12
Slide 115
Slide 115 text
media
Wednesday, 30 May 12
Slide 116
Slide 116 text
!
!
!
!
! !
!
Wednesday, 30 May 12
Slide 117
Slide 117 text
!
!
!
!
! !
!
Wednesday, 30 May 12
Slide 118
Slide 118 text
canvas
Wednesday, 30 May 12
Slide 119
Slide 119 text
SVG
Wednesday, 30 May 12
Slide 120
Slide 120 text
start using CSS3 today!
Wednesday, 30 May 12
Slide 121
Slide 121 text
color
Wednesday, 30 May 12
Slide 122
Slide 122 text
body {
color: black;
color: #000000;
}
Wednesday, 30 May 12
Slide 123
Slide 123 text
body {
color: rgb(0, 0, 0);
color: rgba(0, 0, 0, 0.5);
color: hsl(0, 0%, 0%);
color: hsla(0, 0%, 0%, 0.5);
}
Wednesday, 30 May 12
Slide 124
Slide 124 text
opacity
Wednesday, 30 May 12
Slide 125
Slide 125 text
body {
opacity: 0.5;
}
Wednesday, 30 May 12
Slide 126
Slide 126 text
backgrounds
Wednesday, 30 May 12
Slide 127
Slide 127 text
background-size
Wednesday, 30 May 12
Slide 128
Slide 128 text
body {
background-size: 100px 65px)
}
Wednesday, 30 May 12
Slide 129
Slide 129 text
background-image
Wednesday, 30 May 12
Slide 130
Slide 130 text
body {
background:
url(body-top.png) top left
no-repeat,
url(body-bottom.png) bottom
left no-repeat,
url(body-middle.png) left
repeat-y;
}
Wednesday, 30 May 12
Slide 131
Slide 131 text
gradients
Wednesday, 30 May 12
Slide 132
Slide 132 text
body {
background-image: linear-
gradient(bottom,
rgb(108,40,170) 29%,
rgb(141,68,204) 65%,
rgb(170,96,245) 83%);
}
Wednesday, 30 May 12
Slide 133
Slide 133 text
borders
Wednesday, 30 May 12
Slide 134
Slide 134 text
border-color
Wednesday, 30 May 12
Slide 135
Slide 135 text
body {
border: 5px solid #000;
border-color: #000
transparent transparent #000;
}
Wednesday, 30 May 12
Slide 136
Slide 136 text
border-image
Wednesday, 30 May 12
Slide 137
Slide 137 text
body {
border-image: url(button.png) 0 12
0 12 stretch stretch;
}
Wednesday, 30 May 12
Slide 138
Slide 138 text
border-radius
Wednesday, 30 May 12
Slide 139
Slide 139 text
body {
border-radius: 10px;
border-top-left-radius: 20px;
}
Wednesday, 30 May 12
Slide 140
Slide 140 text
box-shadow
Wednesday, 30 May 12
Slide 141
Slide 141 text
div {
box-shadow: 10px 10px 10px
rgba(0, 0, 0, 50%);
}
Wednesday, 30 May 12
Slide 142
Slide 142 text
text
Wednesday, 30 May 12
Slide 143
Slide 143 text
text-overflow
Wednesday, 30 May 12
Slide 144
Slide 144 text
div {
text-overflow: ellipsis;
}
Wednesday, 30 May 12
Slide 145
Slide 145 text
text-shadow
Wednesday, 30 May 12
Slide 146
Slide 146 text
div {
text-shadow: 10px 10px 10px
red;
}
Wednesday, 30 May 12
Slide 147
Slide 147 text
columns
Wednesday, 30 May 12
Slide 148
Slide 148 text
div {
column-width: 200px;
column-gap: 20px;
}
Wednesday, 30 May 12
Slide 149
Slide 149 text
@font-face
Wednesday, 30 May 12
Slide 150
Slide 150 text
@font-face {
font-family: Comic;
src: local("Comic Sans"),
local("Comic Sans MT"),
url(comic-sans.ttf);
font-weight: bold;
}
p { font-family: Comic, sans-
serif; }
Wednesday, 30 May 12
Slide 151
Slide 151 text
transformation
Wednesday, 30 May 12
Slide 152
Slide 152 text
rotate
Wednesday, 30 May 12
Slide 153
Slide 153 text
div {
transform: rotate(30deg);
}
Wednesday, 30 May 12
Slide 154
Slide 154 text
scale
Wednesday, 30 May 12
Slide 155
Slide 155 text
div {
transform: scale(0.5, 0.2);
}
Wednesday, 30 May 12
Slide 156
Slide 156 text
skew
Wednesday, 30 May 12
Slide 157
Slide 157 text
div {
transform: skew(-30deg);
}
Wednesday, 30 May 12
Slide 158
Slide 158 text
translate
Wednesday, 30 May 12
Slide 159
Slide 159 text
div {
transform: translte(30px, 0px);
}
Wednesday, 30 May 12
Slide 160
Slide 160 text
3D transformations
Wednesday, 30 May 12
Slide 161
Slide 161 text
perspective
Wednesday, 30 May 12
Slide 162
Slide 162 text
matrix3d
Wednesday, 30 May 12
Slide 163
Slide 163 text
rotate3d
Wednesday, 30 May 12
Slide 164
Slide 164 text
scale3d
Wednesday, 30 May 12
Slide 165
Slide 165 text
translate3d
Wednesday, 30 May 12
Slide 166
Slide 166 text
browser prefixes:
-webkit- webkit
-moz- firefox
-ms- IE
-o- opera
Wednesday, 30 May 12
Slide 167
Slide 167 text
graceful degraduation
Wednesday, 30 May 12
Slide 168
Slide 168 text
don’t be a d*ck
Wednesday, 30 May 12
Slide 169
Slide 169 text
fin
@alexbilbie
Wednesday, 30 May 12