Html5 deciphered - designing concepts part 1

HTML5 DecipheredPart 1 of a series of presentations

HTML5 Part 1

HTML5 is Huge!!!

HTML5 consists of more than 100 specifications that relate to

the next generation of Web technologies. The specifications are

taken care by the World Wide Web Consortium (W3C)

The W3C consists of staff, organizations and individuals

invested in helping to drive and define the future of the Web.

HTML5 specifications have moved through a five-stage

process from first draft to official recommendation.

Microsoft and HTML5 Relationship

1. Involvement of Microsoft with W3C

Microsoft has invested heavily in interoperability, creating

and submitting the single largest suite of test cases related to

HTML5 to the W3C.

2. Internet Explorer

Some HTML5 technologies already exist in Internet

Explorer 9, and others are being announced for Internet

Explorer 10 via Internet Explorer Platform Previews.

>>>

3. Microsoft development tools

In early 2011, Microsoft updated two of its development tools with

service packs: Visual Studio 2010 and Expression Web 4. The

service packs for both of these tools provided an HTML5 document

type for validation, as well as Intellisense for new HTML5 tags and

attributes.

If youre using Visual Studio 2010 SP1, you can enable the HTML5

Schema by clicking

Tools Options Text Editor HTML Validation then

selecting the HTML5 option in the Target drop-down list as shown

in the Fig1.

You can also set HTML5 as the default schema from the HTML

Source Editing Toolbar in any HTML file, as shown in Fig2.

Once your default schema is set, youll gain Intellisense support in

Visual Studio new HTML tags. Fig3.

HTML5 is an umbrella term describing a set of HTML, CSS

and JavaScript specifications designed to enable developers

to build the next generation of Web sites and applications.

Simply defined, we can say :

HTML5 = HTML + CSS + Javascript

HTML5 vs HTML4

1. Tag Soup Problem: badly-formed code

2. New Tags and attributes: http://www.w3.org/TR/html5-diff/

Eg. section, article, aside, hgroup, nav, figure etc

3. Ability of the browser to be an application platform

4. Changed semantic meanings for existing items like Strong.

CSS3 vs CSS2

CSS3 offers a huge variety of new ways to create an impact

with your designs, with quite a few important changes.

The biggest change that is currently planned with CSS3 is the

introduction of modules.

The advantage to modules is that it allows the specification to

be completed and approved more quickly, because segments

are completed and approved in chunks. Some of these

modules include:

The Box Model, Lists Module, Hyperlink Presentation, Speech

Module,Backgrounds and Borders, Text Effects, Multi-

Column Layout.

This also allows browser and user-agent manufacturers to

support sections of the specification that they feel

comfortable.

CSS3 Problems

1. Vendor Specific Extensions

2. Partial implementation of new properties by browsers

3. No guaranty of W3C recommendation to all the properties in

the end.

4. Current implementation can cause messy and invalid sheets.

Using Browser-Specific Properties

-webkit- for Safari

-moz- for Firfox

-o- for Opera

-ms- for IE

Example :

.multiplecolumns {

-moz-column-width: 130px;;

-webkit-column-width: 130px;

-moz-column-gap: 20px;

-webkit-column-gap: 20px;

-moz-column-rule: 1px solid #ddccb5;

-webkit-column-rule: 1px solid #ddccb5;

}

Other Prefixes:

-Icab for Icab browser on apple Macintosh

-khtml for Konqueror browser (this is a linux browser)

*** A forked version of KHTML called Webkit is used by

several web browsers, among them Safari and Google

Chrome

CSS Browser Support:

http://webdesign.about.com/od/css/a/css_browser_sup.htm

Some new features of CSS3:

Selectors

Pseudo-classes

Ruby Classes

CSS Flex Model

Selectors:

They will allow the designer/developer to select on much

more specific levels of the document.

Example using substring matching selectors :

div[id^="box1"] { background:#ff0; }

div[id$="simple"] { background:#ff0; }

div[id*="4"] { background:#ff0; }

Pseudo Classes:

The new pseudo-classes allow us to dynamically style content

based on its position in the document or its state.

Types of the new pseudo-classes:

Structural Pseudo-Class

The Target Pseudo-Class

The UI Element States Pseudo-Classes

Negation Pseudo-Class

Negation Example :

:not(footer) { }

Structural Exmaple :

ul li:nth-child(odd) {

background-color: #666;

color: #fff; }

Link to follow: http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/

Ruby Classes :

These classes provide several properties for ruby tag. The HTML tag is used for specifying Ruby

annotations, which is used in East Asian typography.

Ruby Element Example :

... hn

z ...

Output :

hn z

...

Ruby { ruby-align: right; ruby-position: above; ruby-overhang:

whitespace }

Ruby Structure:

Some other features of CSS3 are Border Radius, Border Images,

Box Shadow, RGBA colors, Opacity etc.

Core HTML5 Part:

Old Design

Exmaple

New Design:

Page Title

...nav... article... sections...aside... footers...

New Page Structure :

DOCTYPE

Its used to tell validators and editors what tags and attributes

you can use and how the document should be formed. Its

also used by a lot of web browsers to determine how the

browser will render the page.

Character encoding

It tells browsers and validators what set of characters to use

when rendering web pages.

Language

Browsers, screen readers and other user agents use the lang

attribute to know what language the content should be

interpreted in.

Optimizing scripts and links

Include script and link declarations, but without the type attrb:

Since there is really only one standard scripting language and only

one styling language for the web right now. HTML5 makes type

officially optional, but still validates older documents that do

include the attribute.

Follow the link: http://www.w3.org/TR/html5-diff/#changed-attributes.

Core New Elements:

Is used to contain the headline(s) for a page and/or section. It

can also contain

supplemental information such as logos and navigational aids.

Contains information about a page and/or section, such as who

wrote it, links to

related information and copyright statements.

Contains the major navigation links for a page and, while not a

requirement, is often contained by header.

Contains information that is related to the surrounding content

but also exists independently, such as a sidebar or pull-

quotes.

Is the most generic of the new structural elements, containing

content that can be grouped thematically or is related.

Is used for self-contained content that could be consumed

independent of the page as a whole, such as a blog entry.

*** Where these new tags will work in Opera, Safari, Chrome or Firefox they will not function in Internet Explorer (version 8 and

earlier). The problem is that due to the way parsing works in IE,

these elements are not recognized properly.

This tutorial explains how to get HTML5 tags to work in IE8 and its

earlier releases.

It is possible to get HTML5 tags working in IE8 and earlier version

by including the document.createElement() JavaScript code in the

head of the HTML document. The basic idea is that by using

document.createElement(tagName) to create each of the

unrecognized elements, the parser in IE then recognizes those

elements and parses them correctly. The following code shows

the syntax for using the document.createElement.

document.createElement(header );

Question : When to Use Structural Elements?

Answer: Think about semantics of page.

HTML5 and Semantics

Example:

Contain the important text with the strong element:

Registration is required for this event.

In previous versions of HTML, strong was used to indicate

strong emphasis. Now, in HTML5 strong indicates

importance, such as alerts and warnings.

could be used for keywords, product names, or other

content whose text would typically be unique compared to

surrounding text such as a paragraph lead.

Other examples are marking(copyright statement), figures and

its caption, abbreviations, controlling list orders etc.

New Input Type Attribute Values:

http://www.miketaylr.com/code/input-type-attr.html