SlideShare a Scribd company logo
Martin Beeby@thebeebsUsing HTML5 and CSS3 Todaymartin.beeby@microsoft.com
Not @thebiebs but @thebeebs
Browsers and MicrosoftWe talked to developers and got feedbackWe improved our product based upon that feedback
the internet has changed
Using HTML5 and CSS3 today
what is HTML5HTML5 is a standard developed by W3CHTML5 is often incorrectly used as an umbrella termStill under developmentNeeds to be done the right way
Standards are good Standardise what we had like XMLHTTPRequestStandardise what was newStandardise the way mark up errors like<p><span>thebeebs</p></span>are handledStandards that are testablehttp://bit.ly/submitHTML5Tests
http://test.w3.org/html/tests/reporting/report.htmSubmit your testshttp://bit.ly/submitHTML5Tests
http://joydefinesthefuture.com/
what is CSS3controls the way HTML looksAchieve things that was previously only possible using JavaScript
Oh So Shiny!HTML5CCS3WebApps – WebSockets, Web Storage, etcSVGGeoLocationECMA
thekillersmusic.com/HTML5
HTML5<!DOCTYPE html>Markup Elements	<header>, <hgroup>, 	<nav>, <aside>, <footer>	<article>, <section>	<figure>, <figcaption>
document changes
validator.w3.org/check
Using HTML5 and CSS3 today
<script>You no longer need the <script type="text/javascript"></script>This has always worked but was never valid before.
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 linksNot 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 contentPull QuotesSideBars
<article>Represents a component part of a pageCould be independently distributableDon’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 DataWho Wrote the fileRelated DocumentsCan be more than one per page
lime
Using HTML5 and CSS3 today
lime<header><nav><section id=“intro”><article><aside><header><section><section>
rich graphicsAudio & VideoCanvasSVG 1.1Basic shapesPathsTextTransformsPaintingFilling, ColourScriptingStylingGradientsPatterns
http://www.nevermindthebullets.com
video tag<video src=”videos/video.mp4” id=”myVideo”></video>
video tag<video id=”myVideo”poster=”videos/poster.jpg”autoplaycontrolspreload=”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>
function slower() {var video = document.getElementById("myVideo");varplaybackRate = video.playbackRate;    if (playbackRate <= 1)playbackRate = playbackRate / 2;    elseplaybackRate--;video.playbackRate = playbackRate;}function faster() {document.getElementById("myVideo").playbackRate++;}function pause() {document.getElementById("myVideo").pause();}function play() {document.getElementById("myVideo").play();}
video demo
canvas
www.visitmix.com/lab
Canvas Demo – Museum of China
GeoLocation (Where Am I?)
What’s Generally Safe To Use?SVGDocument Object ModelCore - Level 2 & 3Events – Level 2 & 3CSS32D TransformsBackgrounds & BordersFontsMedia QueriesSelectorsColors and OpacityHTML5Doc TypeSemantic ElementsAudio & VideoCanvasSelection APIsContent EditableDOM StorageAjax NavigationCross Document MessagingGeoLocation
modernizr.com
Using Shims and Poly FillsUsed to fill the holes in support by legacy browserExample:Use http://json.org/json2.js when Native JSON is not supportedGreat list of PolyFills (use with caution)http://bit.ly/HTML5pollyfills
CSS3
border-radiusimage {border-radius:105px}For more Info http://bit.ly/border-radius
transforms
<style>    #mVideo    {        -webkit-transform: rotate(5deg);        -moz-transform: rotate(5deg);        -ms-transform: rotate(5deg);        -webkit-transform-origin: bottom left;        -moz-transform-origin: bottom left;-ms-transform-origin: bottom left;    }</style>
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/
Using HTML5 and CSS3 today
fontsquirrel.com
Come Meet Ubelly.comFree windows Hosting offersUbel.ly/2mthsfree
resourcesBooksIntroducing HTML5 by Bruce Lawson & Remy SharpW3C Web Sites & ResourcesW3C HTML5 Specification – www.w3.org/TR/html5 HTML5 Test Suite - test.w3.org/html/tests/reporting/report.htmMicrosoft Internet Explorer 9 SitesEngineering Blog – blogs.msdn.com/ie/Beauty Of The Web – www.beautyoftheweb.com/experience/IE Test Drive – www.ietestdrive.comMy Blog  http://blogs.msdn.com/b/thebeebs
thankyou

More Related Content

What's hot (20)

PDF
Microformats HTML to API
elliando dias
 
PPTX
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Hamlet Batista
 
PPTX
HTML/HTML5
People Strategists
 
PPT
HTML 5 Overview
Offir Ariel
 
PPTX
Technical SEO "Overoptimization"
Hamlet Batista
 
PPT
Html5 Overview
Owen Williams
 
PPTX
Rendering SEO (explained by Google's Martin Splitt)
Anton Shulke
 
PPT
HTML5 Overview
reybango
 
PPTX
Technical Foundations of Successful Internationalization - SMX Munich
Jamie Indigo
 
PDF
Html ( 1 )
Simplife EG
 
PPTX
Semantics & the Mobile Web
surferroop
 
PPTX
Html 5 tutorial - By Bally Chohan
ballychohanuk
 
PPTX
Html5 and-css3-overview
Jacob Nelson
 
PDF
Hey Googlebot, did you cache that ?
Petra Kis-Herczegh
 
PPS
ColdFusion ORM
Denard Springle IV
 
PPTX
Getting Started with ASP.NET MVC
shobokshi
 
PPTX
HTML5 101
Matt Hardy
 
PDF
Jamie Alberico — How to Leverage Insights from Your Site’s Server Logs | 5 Ho...
Semrush
 
PPTX
DeepCrawl Webinar: Performing SEO on the Edge
Dan Taylor
 
PPTX
web designing course bangalore
Infocampus Logics Pvt.Ltd.
 
Microformats HTML to API
elliando dias
 
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Hamlet Batista
 
HTML/HTML5
People Strategists
 
HTML 5 Overview
Offir Ariel
 
Technical SEO "Overoptimization"
Hamlet Batista
 
Html5 Overview
Owen Williams
 
Rendering SEO (explained by Google's Martin Splitt)
Anton Shulke
 
HTML5 Overview
reybango
 
Technical Foundations of Successful Internationalization - SMX Munich
Jamie Indigo
 
Html ( 1 )
Simplife EG
 
Semantics & the Mobile Web
surferroop
 
Html 5 tutorial - By Bally Chohan
ballychohanuk
 
Html5 and-css3-overview
Jacob Nelson
 
Hey Googlebot, did you cache that ?
Petra Kis-Herczegh
 
ColdFusion ORM
Denard Springle IV
 
Getting Started with ASP.NET MVC
shobokshi
 
HTML5 101
Matt Hardy
 
Jamie Alberico — How to Leverage Insights from Your Site’s Server Logs | 5 Ho...
Semrush
 
DeepCrawl Webinar: Performing SEO on the Edge
Dan Taylor
 
web designing course bangalore
Infocampus Logics Pvt.Ltd.
 

Similar to Using HTML5 and CSS3 today (20)

ODP
Rmll2010 html5-css3-english
Fnot
 
PPTX
Html 5.0
Kristof Degrave
 
PPT
Is it time to start using HTML 5
Ravi Raj
 
PDF
Html5 p resentation by techmodi
techmodi_India
 
PDF
A practical guide to building websites with HTML5 & CSS3
Darren Wood
 
PPT
Brief on Html5
Tushar Deshmukh
 
PDF
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
Christopher Schmitt
 
PDF
Word camp nextweb
Panagiotis Grigoropoulos
 
PPT
Filling the HTML5 Gaps with Polyfills and Shims
reybango
 
PDF
Html5 quick learning guide
Prima Utama Apriansyah
 
PDF
Html5 quick-learning-quide
Jerry Wijaya
 
PDF
Html5 quick-learning-quide
Ashok Suragala
 
PDF
Html5 quick-learning-quide
PL dream
 
PPTX
HTML5 & CSS3 -- UPA Iowa
Ian Lintner
 
ZIP
Looking into HTML5
Christopher Schmitt
 
PPTX
HTML5 & CSS3
Ian Lintner
 
PDF
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 
PDF
HTML5, just another presentation :)
François Massart
 
Rmll2010 html5-css3-english
Fnot
 
Html 5.0
Kristof Degrave
 
Is it time to start using HTML 5
Ravi Raj
 
Html5 p resentation by techmodi
techmodi_India
 
A practical guide to building websites with HTML5 & CSS3
Darren Wood
 
Brief on Html5
Tushar Deshmukh
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
Christopher Schmitt
 
Word camp nextweb
Panagiotis Grigoropoulos
 
Filling the HTML5 Gaps with Polyfills and Shims
reybango
 
Html5 quick learning guide
Prima Utama Apriansyah
 
Html5 quick-learning-quide
Jerry Wijaya
 
Html5 quick-learning-quide
Ashok Suragala
 
Html5 quick-learning-quide
PL dream
 
HTML5 & CSS3 -- UPA Iowa
Ian Lintner
 
Looking into HTML5
Christopher Schmitt
 
HTML5 & CSS3
Ian Lintner
 
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 
HTML5, just another presentation :)
François Massart
 
Ad

More from thebeebs (7)

PDF
A Developer Primer on Blockchain
thebeebs
 
PDF
Blockchain Explain
thebeebs
 
PPTX
HItchhickers Guide to TypeScript
thebeebs
 
PDF
HTML5 and Human Interaction
thebeebs
 
PDF
Building apps why you should bet on the web
thebeebs
 
PPTX
The web as it should be
thebeebs
 
PPTX
IE9 the story so far
thebeebs
 
A Developer Primer on Blockchain
thebeebs
 
Blockchain Explain
thebeebs
 
HItchhickers Guide to TypeScript
thebeebs
 
HTML5 and Human Interaction
thebeebs
 
Building apps why you should bet on the web
thebeebs
 
The web as it should be
thebeebs
 
IE9 the story so far
thebeebs
 
Ad

Recently uploaded (20)

PPTX
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
PDF
Why aren't you using FME Flow's CPU Time?
Safe Software
 
PDF
Optimizing the trajectory of a wheel loader working in short loading cycles
Reno Filla
 
PDF
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
 
PPTX
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
PDF
Python Conference Singapore - 19 Jun 2025
ninefyi
 
PDF
Redefining Work in the Age of AI - What to expect? How to prepare? Why it mat...
Malinda Kapuruge
 
PDF
“Scaling i.MX Applications Processors’ Native Edge AI with Discrete AI Accele...
Edge AI and Vision Alliance
 
PDF
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
PDF
Database Benchmarking for Performance Masterclass: Session 1 - Benchmarking F...
ScyllaDB
 
DOCX
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
PDF
Kubernetes - Architecture & Components.pdf
geethak285
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PPTX
reInforce 2025 Lightning Talk - Scott Francis.pptx
ScottFrancis51
 
PPSX
Usergroup - OutSystems Architecture.ppsx
Kurt Vandevelde
 
PDF
Database Benchmarking for Performance Masterclass: Session 2 - Data Modeling ...
ScyllaDB
 
PDF
FME as an Orchestration Tool with Principles From Data Gravity
Safe Software
 
PDF
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
yosra Saidani
 
PDF
Plugging AI into everything: Model Context Protocol Simplified.pdf
Abati Adewale
 
PPTX
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
Why aren't you using FME Flow's CPU Time?
Safe Software
 
Optimizing the trajectory of a wheel loader working in short loading cycles
Reno Filla
 
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
 
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
Python Conference Singapore - 19 Jun 2025
ninefyi
 
Redefining Work in the Age of AI - What to expect? How to prepare? Why it mat...
Malinda Kapuruge
 
“Scaling i.MX Applications Processors’ Native Edge AI with Discrete AI Accele...
Edge AI and Vision Alliance
 
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
Database Benchmarking for Performance Masterclass: Session 1 - Benchmarking F...
ScyllaDB
 
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
Kubernetes - Architecture & Components.pdf
geethak285
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
reInforce 2025 Lightning Talk - Scott Francis.pptx
ScottFrancis51
 
Usergroup - OutSystems Architecture.ppsx
Kurt Vandevelde
 
Database Benchmarking for Performance Masterclass: Session 2 - Data Modeling ...
ScyllaDB
 
FME as an Orchestration Tool with Principles From Data Gravity
Safe Software
 
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
yosra Saidani
 
Plugging AI into everything: Model Context Protocol Simplified.pdf
Abati Adewale
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 

Using HTML5 and CSS3 today

Editor's Notes