Upload
scott-vandehey
View
3
Download
1
Embed Size (px)
DESCRIPTION
HTML5 is ready to use today, and Scott Vandehey can show you how to use it in your site. During this session, you will learn the answer to these questions:What is HTML5?What features does it offer me?How do I set up my themes to use it?How well supported is it?By the end, you will see that converting your site to HTML5 can offer you real benefits, and will position you to easily take advantage of new features as they become available. With its focus on graceful degradation, there’s no reason to delay. Learn how HTML5 can help you!This session is intended for beginner to intermediate level front-end developers and designers. You should have a healthy interest in markup.We will be introducing some of the new elements, such as Article, Section, and Video, but not the new APIs like drag-and-drop or geolocation.
Citation preview
HTML5 Design Principles
Image credit: Dale Stephanosref: bit.ly/html-principles
Support Existing Content
Photo credit: Jacinta Lodge
Degrade Gracefully
Photo credit: Kevin Simpson
Pave the Cowpaths
Photo credit: Jeremy Keith
Priority of Constituencies
USERS > AUTHORS > IMPLEMENTORS > SPECIFIERS > PURITY
Photo credit: Ian “Bluemoose”
Top 3 New Features
Photo credit: Kris Krug
New input types<input type="email">
<input type="tel">
<input type="url">
<input type="number">
and many more!
Recognize this?<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="360" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="flashvars" value="guid=BQtfIEY1&width=640&height=360&locksize=no&dynamicseek=false&qc_publisherId=p-18-mFEk4J448M" /><param name="src" value="http://v.example.com/media/plugins/video/flvplayer.swf?ver=1.21" /><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="640" height="360" src="http://v.example.com/media/plugins/video/flvplayer.swf?ver=1.21" allowfullscreen="true" wmode="transparent" flashvars="guid=BQtfIEY1&width=640&height=360&locksize=no&dynamicseek=false&qc_publisherId=p-18-mFEk4J448M"></embed></object>
Multiple sources<video controls width="360" height="240”> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video>
Multiple fallbacks<video controls width="360" height="240”> <source ...> <source ...> <source ...> <object> ... flash stuff here ... <a href="movie.mp4">Download the movie.</a> </object></video>
Doctype & Charset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />
<meta charset="UTF-8">
No type for JS & CSS<script type="text/javascript" src="x.js"></script>
<script src="x.js"></script>
<link type="text/css" rel="stylesheet"media="screen" href="x.css" />
<link rel="stylesheet"media="screen" href="x.css">
It’s Easy!Change this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
to this:
<!DOCTYPE html>
Browser shimsAdd this to your stylesheet:
section, article, header,footer, nav, aside, hgroup { display: block;}
Add this conditional comment to your head:
<!--[if IE]> <script src="http://html5shim.googlecode.com/ ↩ svn/trunk/html5.js"></script><![endif]-->
Rumor: Browsers don’t support HTML5
False:
All modern browsers have
implemented HTML5 to some
degree, and there’s no reason not to
use the parts that work today.
Rumor: HTML5 won’t be ready until 2022
False:
2009: W3C Working Draft
2012: W3C Recommendation
2022: two complete implementations