Introduction to HTML5 and CSS3

HTML5: start using it now! @alexbilbie Wednesday, 30 May 12

@alexbilbie • Developer at @unilincoln • #PHP #CodeIgniter #APIs #REST
#MongoDB #OAuth #LinkedData Wednesday, 30 May 12

state of the union Wednesday, 30 May 12

HTML5 Wednesday, 30 May 12

W3C working draft (29th March 2012) http://lncn.eu/gjx2 Wednesday, 30 May
12

editors draft (~daily edits) http://lncn.eu/ghj2 Wednesday, 30 May 12

CSS3 Wednesday, 30 May 12

mostly W3C recommendations status Wednesday, 30 May 12

ECMAScript Harmony (JavaScript) Wednesday, 30 May 12

desktop browsers Wednesday, 30 May 12

Wednesday, 30 May 12

IE6 Wednesday, 30 May 12

mobile browsers Wednesday, 30 May 12

iOS Wednesday, 30 May 12

Android Wednesday, 30 May 12

Blackberry Wednesday, 30 May 12

Windows Mobile Wednesday, 30 May 12

Mobile Opera Wednesday, 30 May 12

start using HTML5 today! Wednesday, 30 May 12

doctype Wednesday, 30 May 12

<!doctype html> Wednesday, 30 May 12

UTF 8 Wednesday, 30 May 12

<!doctype html> <meta charset=utf-8> <title>Dev8D</title> <p>Hello, world!</p> Wednesday, 30 May
12

New structural elements Wednesday, 30 May 12

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

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

<div id=”header”> <div id=”header”> <div id=”sideb ar”> <div class=”post”> <div
id=”sideb ar”> <div class=”post”> <div id=”footer”> <div id=”footer”> Wednesday, 30 May 12

<header> <header> <aside> <article> <aside> <article> <footer> <footer> Wednesday, 30
May 12

IE shim http://lncn.eu/h37 Wednesday, 30 May 12

<header> Wednesday, 30 May 12

<header> ! <a href=”/> ! ! <img src=”logo.png” alt=”Dev8D Logo”>
! </a> ! <h1>Dev8D</h1> </header> Wednesday, 30 May 12

<nav> Wednesday, 30 May 12

<nav> ! <ul> ! ! <li> ! ! ! <a
href=”/”>Home</a> ! ! </li> ! ! <li> ! ! ! <a href=”/about”>About Us</a> ! ! </li> ! </ul> </nav> Wednesday, 30 May 12

<section> Wednesday, 30 May 12

<aside> Wednesday, 30 May 12

<article> Wednesday, 30 May 12

<article> ! <header> ! ! <h1>Hello world!</h1> ! ! <aside>
! ! ! <p>Written by Alex</p> ! ! </aside> ! </header> ! ! 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. ! <footer> ! ! <p>Tagged with <a href=”#”>Slipsum</a> ! </footer> </article> Wednesday, 30 May 12

<footer> Wednesday, 30 May 12

<hgroup> Wednesday, 30 May 12

<div id=”logo”> ! <h1> ! ! Dev8D ! ! <sup>
! ! ! Developer Happiness ! ! </sup> ! </h1> </div> Wednesday, 30 May 12

<hgroup id=”logo”> ! <h1> ! ! Dev8D ! </h1> !
<h2> ! ! Developer happiness ! </h2> </hgroup> Wednesday, 30 May 12

<details> Wednesday, 30 May 12

<details> ! <summary> ! ! HTML5 Talk with Alex Bilbie
! </summary> ! <p> ! ! A talk looking at all the exciting new web technologies. ! </p> </details> Wednesday, 30 May 12

HTML5 talk with Alex Bilbie Python with Richard Jones +
+ Wednesday, 30 May 12

HTML5 talk with Alex Bilbie A talk looking at all
the exciting new web technologies. Python with Richard Jones - + Wednesday, 30 May 12

<figure> Wednesday, 30 May 12

<figure> ! <img src=”dev8d.png” alt=””> ! <figcaption> ! ! Dev8D
logo ! </figcaption> </figure> Wednesday, 30 May 12

<mark> Wednesday, 30 May 12

<p> ! Dev8D is the major UK event in the
year for developers in the education sector to <mark>learn</mark> from one another and ultimately create <mark>better</mark>, <mark>smarter</ mark> technology for learning and research. </p> Wednesday, 30 May 12

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

refined elements Wednesday, 30 May 12

<ol> Wednesday, 30 May 12

<ol start=”5”> ! <li>Foo</li> ! <li>Bar</li> ! <li>Foobar</li> </ol> Wednesday,
30 May 12

<p>Best Star Wars characters</p> <ol reversed> ! <li>Luke Skywalker</li> !
<li>Admiral Ackbar</li> ! <li>Chewie</li> ! <li>Han Solo</li> ! <li>R2D2</li> </ol> Wednesday, 30 May 12

<dl> Wednesday, 30 May 12

<p>Star Wars characters</p> <dl> ! <dt>Goodies</dt> ! ! <dd>Han Solo</dd>
! ! <dd>Luke Skywalker</dd> ! <dt>Baddies</dt> ! ! <dd>Darth Vader</dd> ! ! <dd>The Emperor</dd> </dl> Wednesday, 30 May 12

<address> Wednesday, 30 May 12

<article> ! ... ! ... ! <footer> ! ! <p>
! ! ! Contact the author ! ! ! <address> ! ! ! ! <a href=”mailto:[email protected]”> ! ! ! ! ! via email ! ! ! ! </a> ! ! ! </address> ! ! <p> ! </footer> </article> Wednesday, 30 May 12

<em> Wednesday, 30 May 12

<p> ! ...the best car <em>in the world</em> </p> Wednesday,
30 May 12

<i> Wednesday, 30 May 12

<p> ! We ate <i>unagi</i>, <i>aburi- zake</i>, and <i>tako</i> sushi
last night, but the <i>torosushi</i> was all fished out </p> Wednesday, 30 May 12

<strong> Wednesday, 30 May 12

<p> ! <strong>Warning!</strong> ! this coffee is weak. </p> Wednesday,
30 May 12

<b> Wednesday, 30 May 12

<p> ! <b>Has Bean</b> roast great coffee. </p> Wednesday, 30
May 12

<hr> Wednesday, 30 May 12

<article id=”chapter-25”> ! // Frodo and Sam in Mordor !
<hr> ! // Gandalf fighting in Minas Tirith ! <hr> ! // Aragorn, Legolas and Gimli fighting Orcs in the field </article> Wednesday, 30 May 12

removed elements Wednesday, 30 May 12

<applet> Wednesday, 30 May 12

<marquee> Wednesday, 30 May 12

<big> Wednesday, 30 May 12

<font> Wednesday, 30 May 12

<frame> Wednesday, 30 May 12

<blink> Wednesday, 30 May 12

<center> Wednesday, 30 May 12

new attributes Wednesday, 30 May 12

contenteditable Wednesday, 30 May 12

<article contenteditable> ! lorem ipsum </article> Wednesday, 30 May 12

data-foo=”bar” Wednesday, 30 May 12

<article data-author=”alex”> ! lorem ipsum </article> Wednesday, 30 May 12

$(‘article’).data(‘author’) // returns “alex” Wednesday, 30 May 12

hidden Wednesday, 30 May 12

item itemprop subject Wednesday, 30 May 12

<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> ! Alex Bilbie<br> ! <span itemprop="name">
! ! ICT Services ! </span><br> ! <span itemprop="streetAddress"> ! ! University of Lincoln<br> ! ! Brayford Pool ! </span><br> ! <span itemprop="addressLocality"> ! ! Lincoln ! </span><br> ! <span itemprop="addressRegion"> ! ! Lincolnshire ! </span><br> ! <span itemprop="postalCode"> ! ! LN6 7TS ! </span><br> ! <span itemprop="addressCountry"> ! ! United Kingdom ! </span> </address> Wednesday, 30 May 12

http://schema.org/ Wednesday, 30 May 12

role=”foobar” aria-*=”foobar” Wednesday, 30 May 12

forms Wednesday, 30 May 12

<input type=”text”> Wednesday, 30 May 12

<input type=”search”> Wednesday, 30 May 12

<input type=”email”> Wednesday, 30 May 12

<input type=”url”> Wednesday, 30 May 12

<input type=”number”> Wednesday, 30 May 12

<input type=”range”> Wednesday, 30 May 12

<input type=”color”> Wednesday, 30 May 12

<input type=”tel”> Wednesday, 30 May 12

<datalist> Wednesday, 30 May 12

placeholder Wednesday, 30 May 12

required Wednesday, 30 May 12

multiple Wednesday, 30 May 12

pattern Wednesday, 30 May 12

autocomplete Wednesday, 30 May 12

step Wednesday, 30 May 12

formnovalidate Wednesday, 30 May 12

<form method=”post”> ! <label for=”name”>Name</label> ! <input id=”name” type=”text” required
value=”” placeholder=”John Doe”> ! <label for=”email”>Email</label> ! <input id=”email” type=”email” required value=”” placeholder=”[email protected]”> ! <label for=”url”>Website</label> ! <input id=”url” type=”url” placeholder=”www.example.com”> ! <label for=”comment”>Your comment</label> ! <textarea id=”comment”> </form> Wednesday, 30 May 12

media Wednesday, 30 May 12

<video> ! <source src=”dev8d.webm” type=”video/webm”> ! <source src=”dev8d.mp4” type=”video/mp4”> !
! <embed> ! !  ! </embed> </video> Wednesday, 30 May 12

<audio> ! <source src=”dev8d.ogg” type=”audio/ogg”> ! <source src=”dev8d.mp3” type=”audio/mp3”> !
! <embed> ! !  ! </embed> </video> Wednesday, 30 May 12

canvas Wednesday, 30 May 12

SVG Wednesday, 30 May 12

start using CSS3 today! Wednesday, 30 May 12

color Wednesday, 30 May 12

body { color: black; color: #000000; } Wednesday, 30 May
12

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

opacity Wednesday, 30 May 12

body { opacity: 0.5; } Wednesday, 30 May 12

backgrounds Wednesday, 30 May 12

background-size Wednesday, 30 May 12

body { background-size: 100px 65px) } Wednesday, 30 May 12

background-image Wednesday, 30 May 12

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

gradients Wednesday, 30 May 12

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

borders Wednesday, 30 May 12

border-color Wednesday, 30 May 12

body { border: 5px solid #000; border-color: #000 transparent transparent
#000; } Wednesday, 30 May 12

border-image Wednesday, 30 May 12

body { border-image: url(button.png) 0 12 0 12 stretch stretch;
} Wednesday, 30 May 12

border-radius Wednesday, 30 May 12

body { border-radius: 10px; border-top-left-radius: 20px; } Wednesday, 30 May
12

box-shadow Wednesday, 30 May 12

div { box-shadow: 10px 10px 10px rgba(0, 0, 0, 50%);
} Wednesday, 30 May 12

text Wednesday, 30 May 12

text-overflow Wednesday, 30 May 12

div { text-overflow: ellipsis; } Wednesday, 30 May 12

text-shadow Wednesday, 30 May 12

div { text-shadow: 10px 10px 10px red; } Wednesday, 30
May 12

columns Wednesday, 30 May 12

div { column-width: 200px; column-gap: 20px; } Wednesday, 30 May
12

@font-face Wednesday, 30 May 12

@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

transformation Wednesday, 30 May 12

rotate Wednesday, 30 May 12

div { transform: rotate(30deg); } Wednesday, 30 May 12

scale Wednesday, 30 May 12

div { transform: scale(0.5, 0.2); } Wednesday, 30 May 12

skew Wednesday, 30 May 12

div { transform: skew(-30deg); } Wednesday, 30 May 12

translate Wednesday, 30 May 12

div { transform: translte(30px, 0px); } Wednesday, 30 May 12

3D transformations Wednesday, 30 May 12

perspective Wednesday, 30 May 12

matrix3d Wednesday, 30 May 12

rotate3d Wednesday, 30 May 12

scale3d Wednesday, 30 May 12

translate3d Wednesday, 30 May 12

browser prefixes: -webkit- webkit -moz- firefox -ms- IE -o- opera

graceful degraduation Wednesday, 30 May 12

don’t be a d*ck Wednesday, 30 May 12

fin @alexbilbie Wednesday, 30 May 12

Introduction to HTML5 and CSS3

Introduction to HTML5 and CSS3

More Decks by Alex Bilbie

Other Decks in Technology

Featured

Transcript