Pages

Monday, August 30, 2010

WEB202: Designing for HTML5 and CSS3

Speaker: Darren Wood @darren
http://www.dontcom.com
http://www.slideshare.com/darren131

TechEd Online

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
http://code.google.com/webfonts

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.

No comments:

Post a Comment