Click here to load reader

Html5 deciphered - designing concepts part 1

  • View

  • Download

Embed Size (px)


HTML5 is the new standard for developing Web Applications. Lets have a deeper look into it.

Text of 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


    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:

    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


  • 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


  • CSS Browser Support:

    Some new features of CSS3:



    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:

  • 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


  • New Design:

    Page Title

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

  • New Page Structure :


    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.


    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:

  • 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-


    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


    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: