Using HTML5 and CSS3 today

Martin Beeby@thebeebsUsing HTML5 and CSS3 Todaymartin.beeby@microsoft.com

Not @thebiebs but @thebeebs

Browsers and Microsoft
We talked to developers and got feedback
We improved our product based upon that feedback

the internet has changed

what is HTML5
HTML5 is a standard developed by W3C
HTML5 is often incorrectly used as an umbrella term
Still under development
Needs to be done the right way

Standards are good 
Standardise what we had like XMLHTTPRequest
Standardise what was new
Standardise the way mark up errors like<p><span>thebeebs</p></span>are handled
Standards that are testablehttp://bit.ly/submitHTML5Tests

http://test.w3.org/html/tests/reporting/report.htm
Submit your tests
http://bit.ly/submitHTML5Tests

http://joydefinesthefuture.com/

what is CSS3
controls the way HTML looks
Achieve things that was previously only possible using JavaScript

Oh So Shiny!
HTML5
CCS3
WebApps – WebSockets, Web Storage, etc
SVG
GeoLocation
ECMA

thekillersmusic.com/HTML5

HTML5
<!DOCTYPE html>
Markup Elements
<header>, <hgroup>, <nav>, <aside>, <footer>
<article>, <section>
<figure>, <figcaption>

document changes

validator.w3.org/check

Semantic Web

<header>
Represents a group of introductory or navigational aids
<header> <hgroup> <h1>My Site</h1> <h2>Is rocking a hgroup</h2> </hgroup></header>
Can be more than one per page

<nav>
Should be used to wrap navigational links
Not links that are ads or a collection of links that make up the main content of the page.
You shouldn’t put links for things like terms of service or copyright pages.
<nav> <ul> <li>Menu Name</li> </ul></nav>

<aside>
Good for content that is separate to the main content
Pull Quotes
SideBars

<article>
Represents a component part of a page
Could be independently distributable
Don’t think magazine article Think distinct object
<article> <h1>The articles Title</h1> <footer>Posted in category xyz</footer></article>

<section>
The section element represents a generic document or application section.
Not a generic container element.
When an element is needed for styling purposes or as a convenience for scripting use the div element instead.
Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

<footer>
Copyright Data
Who Wrote the file
Related Documents
Can be more than one per page

lime
<header>
<nav>
<section id=“intro”>
<article>
<aside>
<header>
<section>
<section>

rich graphics
Audio & Video
Canvas
SVG 1.1
Basic shapes
Paths
Text
Transforms
Painting
Filling, Colour
Scripting
Styling
Gradients
Patterns

http://www.nevermindthebullets.com

video tag
<video src=”videos/video.mp4” id=”myVideo”>
</video>

video tag
<video id=”myVideo”
poster=”videos/poster.jpg”
autoplay
controls
preload=”auto”
playbackRate=”1”
width=”448”
>
<source src=”videos/video.mp4” type=’video/mp4’ /><source src=”video/video.ogv” type=’video/ogg’ />
</video>

video codec

modernizr.com

<div id="vidControls"><a href="#" onclick="slower()">Slower</a><a href="#" onclick="play()">Play</a><a href="#" onclick="pause()">Pause</a><a href="#" onclick="faster()">Faster</a></div>

video demo

canvas

www.visitmix.com/lab

Canvas Demo – Museum of China

GeoLocation (Where Am I?)

What’s Generally Safe To Use?
SVG
Document Object Model
Core - Level 2 & 3
Events – Level 2 & 3
CSS3
2D Transforms
Backgrounds & Borders
Fonts
Media Queries
Selectors
Colors and Opacity
HTML5
Doc Type
Semantic Elements
Audio & Video
Canvas
Selection APIs
Content Editable
DOM Storage
Ajax Navigation
Cross Document Messaging
GeoLocation

modernizr.com

Using Shims and Poly Fills
Used to fill the holes in support by legacy browser
Example:
Use http://json.org/json2.js when Native JSON is not supported
Great list of PolyFills (use with caution)
http://bit.ly/HTML5pollyfills

border-radius
image {
border-radius:105px
}
For more Info
http://bit.ly/border-radius

transforms

Apply the standard last
.target
{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}

web fonts
@font-face
{
font-family: FelbridgeOTSCondensed;
src: url('fonts/FelbridgeOTSCondensed.woff');
}
#title
{
font: 30pt FelbridgeOTSCondensed, sans-serif;
letter-spacing: 0.01em;
text-align: center;
color: white;
background-color:rgb(152,155,177);
}

lostworldsfairs.com/eldorado/

fontsquirrel.com

Come Meet Ubelly.com
Free windows Hosting offers
Ubel.ly/2mthsfree

resources
Books
Introducing HTML5 by Bruce Lawson & Remy Sharp
W3C Web Sites & Resources
W3C HTML5 Specification – www.w3.org/TR/html5
HTML5 Test Suite - test.w3.org/html/tests/reporting/report.htm
Microsoft Internet Explorer 9 Sites
Engineering Blog – blogs.msdn.com/ie/
Beauty Of The Web – www.beautyoftheweb.com/experience/
IE Test Drive – www.ietestdrive.com
My Blog http://blogs.msdn.com/b/thebeebs

thankyou

http://www.phpconference.co.uk	27
http://localhost	4
http://devvideos.com	3
http://2012.phpconference.co.uk	3
http://zaworski.dev.red-sky	2
http://www.devslides.com	2
http://devslides.com	2

Using HTML5 and CSS3 today

by thebeebs

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 43

Statistics

Using HTML5 and CSS3 today Presentation Transcript