Abinet Zelalem HTML5. 5 things you need to know HTML5 It’s not one big thing It already works You don’t need to throw anything away It’s easy to get started

Abinet Zelalem

HTML5

5 things you need to knowHTML5

It’s not one big thing

It already works

You don’t need to throw anything away

It’s easy to get started

It’s here to stay4

5

3

2

1

• Every time your web browser requests a page, the web server sends “headers” before it sends the actual page markup.

• The most important header is called Content-Type, and it looks like this:

Content-Type: text/html• “text/html” is called the “content type” or “ MIME type” of the page.• If you don’t have header with your page the browsers do content

sniffing and determine the MIME type

MIME TYPESThe web runs on MIME

• Backwards compatibility, clear migration path• Well-defined error handling• Users should not be exposed to authoring

errors• Practical use• Scripting is here to stay• Device-specific profiling should be avoided• Open process

How HTML5 came aboutLittle bit of history

Detect support for features

• When your browser renders a web page, it constructs a Document Object Model ( DOM), a collection of objects that represent the HTML elements on the page.

• In browsers that support HTML5 features, certain objects will have unique properties.

Check if a certain property exists on a globalobject (such as window or navigator).

Create an element, check if a certain method exists on that element, then call the method and check the value it returns.

Create an element, then check if a certain property exists on that element.

Create an element, set a property to a certain value, then check if the property has retained its value.

HTML5 FeaturesFour basic techniques for detecting

1

2

3

4

5 Use Modernizr. Modernizr adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it. (1.7)

HTML5 Elements

For embedding video in your web pages, without additional pluginsBrowsers that don’t support HTML5 video will ignore the<video> element completely, but you can use this to your advantage and tell them to play video through a third-party plugin instead.The unfortunate reality of HTML5 video is that browsers can’t agree on a single codec.So two types exist, one the costs money, and open source

VIDEOCANVAS

tThe concept is similar to cookies, but it’s designed for larger quantities of information can access it with JavaScript after the page is loadedYes there are security holes visible, but there is a same-origion restriction

LOCAL STORAGE

A resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics, or other visual images on the fly , uses the (“the canvas API”) Test - create a dummy canvas and check the presence of getContext() method, or use modernizrEven if your browser supports the canvas API, it might not support the canvas text API. after creating the canvas element test for fillText() function existance by doing a .getcontext('2d') on the canvas element.

321

HTML5 Elements (Contd…)

an offline web application is a list of URLsHTML5 offline applications will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the localcopies up to date as they change.There’s a flag in the DOM that will tell you whether you’re online or offline. There are events that fire when your offline status changesmost of the work is up to you, the web developer

OFFLINE WEB APPLICATIONSWEB WORKERS

art of figuring out where you are in the world and (optionally) sharing that information with people you trustGears is an open source browser plugin from Google that works on Windows, Mac, Linux, Windows Mobile, and Android. It provides features for older browsers that do not support all the fancy new stuff

GEOLOCATION

provide a standard way for browsers to run JavaScript in the background. With web workers, you can spawn multiple “threads” that all run at the same time, more or less.These “background threads” can do complex mathematical calculations, make network requests, or access local storage while the main web page responds to the user scrolling, clicking, or typing.

654


Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon you click on (or tab to) the input field, the placeholder text disappears.

PLACEHOLDER TEXTINPUT TYPES

The autofocus attribute does exactly what it says on the tin: it moves the focus to a particular input field. But because it’s just markup instead of a script, the behavior will be consistent across all web sites. Also, browser vendors (or extension authors) can offer users a way to disable the autofocusing behavior.

FORM AUTOFOCUS

<input type=“?">

Search - for search boxesNumber - for spinboxesRange - for slidersColor - for color pickersTel - for telephone numbersUrl - for web addressesEmail - for email addressesDate - for calendar date pickersMonth - for monthsWeek - for weeksTime - for timestampsDatetime - for precise, absolute date+time stamps, datetime-local for local dates and times

987


a standardized way to provide additional semantics in your web pages.

Anyone can define amicrodata vocabulary and start embedding custom properties in their own web pages.

Person with name and photo property

Microdata is aboutapplying additional semantics to data that’s already visible on your web page

MICRODATA

10

In the irks mode, browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s.

Firefox, Safari, Chrome, Opera (since 7.5) and IE8 also have a mode known as “Almost Standards mode,” that implements the vertical sizing of table cellstraditionally and not rigorously according to the CSS2 specification. HTML5calls this mode the “limited quirks mode.”

In the Standards mode, browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser. HTML5 calls this mode the “no quirks mode.”

Triggers standards-based rendering in all browsers

Doctype

Quirks Mode

Standards Mode/no quirks

mode

Almost Standards

Mode/limited quirks mode.

Doctype

t<!DOCTYPE html>

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML4 or less

12

Standard Mode

<HTML>Root node

<html lang="en">

HTML5

<html xmlns="http://www.w3.org/1999/xhtml"lang="en“ xml:lang="en">

HTML4

1 2

<HEAD>First child

<link rel="stylesheet" href="style-original.css" />

Templates

<link rel="stylesheet" href="style-original.css" type="text/css" />

Templates

1 2

information about the page

links are two types in html5Links to external resourceshyperlink links

new rel types have been introducedrel="first" - first page in a seriesrel="last" rel="up" is to look at your breadcrumb navigationrel="prefetch" rel="nofollow“ – introduced by google

generic document or application section

represents a footer for its nearest ancestor sectioning content or sectioning root element.

a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable

to group a set of h1–h6 elements when the heading has multiple levels

a section with navigation links.

a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.

a group of introductory or navigational aids.

Your Logo

New semantic elements

<section>

<nav>

<article>

<aside>

<hgroup>

<header>

<footer>

either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar

a run of text in one document marked or highlighted for reference purposes.

<time>

<mark>

Unknown elements in browsersIssues

How should the element be styled?

Two fundamental problems

What should the element’s DOM look like?

3

Prior to version 9, Internet Explorer did not apply any styling on unknown elements.If IE 8 doesn’t explicitly recognize the element name, it will insert the element into the DOM as an empty node with no children.

Yet another issue

All browsers render unknown elements inline, i.e. as if they had a display:inline CSS rule.!!!!!

There are several new elements defined in HTML5 which are block-level elements.

If you want to use these elements in older browsers, you will need to define the display style manually:

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {

display:block;}

1

Every browser has a master list of HTML elements that it supports. Mozilla - nsElementTable.cpp

2

<HTML>Root node

DOM that Internet Explorer actually creates:

article|+--h1 (child of article)| || +--text node

"Welcome”|+--p (child of article,

sibling of h1) | +--text node "This

is your " | +--span | | | +--text node "first

day" | +--text node "."

article (no children)h1 (sibling of article)|+--text node "Welcome to Initech"p (sibling of h1)|+--text node "This is your "|+--span| || +--text node "first day"|+--text node "."

Solution

If you create a dummy <article> element with JavaScript before you use it in your page, Internet Explorer will magically recognize the <article> element and let you style it with CSS.



This script needs to be at the top of your page, before IE parses your tags and attributes hosted it on Google Project Hosting, MIT License so u can just even link to it



<article><header>

<p class="post-date">October 22, 2009</p>

<h1>

<a href="#"

rel="bookmark"

title="link to this post">

Travel day

</a>

</h1></header>…

</article>

The HTML5 algorithm says that an <article> element creates a new section, that is, a new node in the document outline. And in HTML5, each section can have its own <h1> element.Where as there is no no generic heading in html4, so numbered heading elements, <h1>–<h6>, must be nested in exactly that order.

We tend to assemble pages rather than author them , so copy paste causes problems but no more

<time datetime="2009-10-22T13:59:47-04:00" pubdate> October 22, 2009 1:59pm EDT

</time>datetime, machine readableb/n the closing tags, optionalpubdate

If the <time> element is in an <article> element, it means that this timestamp is the publication date of the article. If the <time> element is not in an <article> element, it means that this timestamp is the publication date of the entire document.

Time

Semantically, there is nothing to distinguish this list of links from any otherwhy is it needed

one example - people with disabilitiesjump to (or jump past) major navigation

text-to-speech to speak and summarize web pages

no need to provide skip links for third-party software

Navigation

THANK YOU!

Your Logo

Documents

Abinet Zelalem HTML5. 5 things you need to know HTML5 It’s not one big thing It already works You don’t need to throw anything away It’s easy to get started