Speaker: Darren Wood @darren
http://www.dontcom.com
http://www.slideshare.com/darren131
WHATWG - HTML5 workgroup. Different to the W3C
Ian Hickson
Why HTML 5?
- Support existing content
- Much reduced HEAD. E.g. Don't need to specify JavaScript as the scripting language used in the page.
- Less bytes, being more mobile friendly.
New Elements
article, aside, audio, canvas, command, datalist, details,figure, footer, header, hgroup, keygen, video.
header
- Replaces common CSS class that appears on the majority of pages.
footer
- E.g. contains copyright notice.
nav
Links to other documents. Primary navigation.
aside
- Related content. Separate to the main content but related.
section
- A section of a document. Can be nested.
E.g chapters of a book. Each section can contain an H1.'
article
- Similar to a section.
Use an article if it could be pulled out of the page and still be meaningful.
video
- Native video support.
- Can have a default image.
- Can provide different content for different browser.
audio
- Very similar to video tag.
Forms.
New input types.
- search
- email
- url
- tel
- range
- number
- date
- datetime
- datetime-local
- time
Attributes
- placeholder = "enter something here"
- autofocus
- Required
- autocomplete="off"
Semantics
- Less divs and meaningless markup.
Mircoformats.org
- Add further information.
Can now wrap block level elements in a anchor a
Javascript
Drag & Drop
Canvas
- Dynamic images.
document.getElementsByClassName('test');
document.querySelectorAll('.testClass');
localStorage
- Megabytes of local storage with query syntax
Offline Application Cache.
- Good for mobile web apps
CSS3
Selectors
- Substring selector (begins, ends, contains)
Pseudo-class
- Match odd li elements
- li:last child.
p:empty
p::selected
Properties
- Vendor Prefixes
- opacity
- rgba - colour including alpha
Multiple background images to one element. Position them separately.
Image borders. border-image.
border-radius:
border-top-right-radius:
text-overflow: ellipse;
Transforms
- Good for roll overs
- skew, scale, rotate
- fade in and out on hover.
@font-face
http://typekit.com
http://www.fontsquirrel.com
https://fonts.google.com/
http://modernizr.com - helps older browsers work with HTML 5. Allows for CSS selectors for determining support level. Also object on the DOM for checking support.
http://mediaelementjs.com - script for embedding video and audio
http://css3pie.com -
http://css3please.com - Shows cross browser versions of markup.
http://www.html5test.com - tells HTML support features for current browser.
http://www.html5rocks.com - Examples of what is capable.
http://html5doctor.com - Write ups on new elements, problems, issues.
http://goo.gl/51ma HTML5 schema for Visual Studio 2010.
