Digit+Ft Html5 Oct2011 Lr

7/29/2019 Digit+Ft Html5 Oct2011 Lr

1/97

Tenets of a modern browserHTML5 an Introduction

HTML5 Features

Building Pinned Sites

CSS 3

JavaScript

Building interoperable sites

HTML5 Canvas and SVG Multimedia experiences

with HTML5 audio and video

HTML5to

HTML5 has managed to garner interest, similar

to web 2.0. Heres all the information you need

to experience the future of the web

A 9.9 Mdia Pbication

VOluMe 06 | Issue 10A


2/97

fASTTRACK

to

p o w e r e d b y


3/97

Chapters

editorial

Executive Editor

Rbert Svereign-Smith

Asst. Editor dev.works

and Custom Publishing

Nash David

Writers

Amit Meena and Ankur Mur

Cred

its

The

people

behin

d

this

book

design

Sr. Creative Director

Jayan K Narayanan

Art DirectorAnil VK

Associate Art Director

PC Anp

Visualisers

Prasanth TR & Anil T

Senior Designer

Baiju N V

Tenets a Mdern Web BrwserWe lk at an HTML5 cmpatible brwser such as Internet Explrer

9, understand it t a specifc detail, and analyse what the uture

prmises...

HTML5 An intrductinWeve heard a lt abut HTML5. Whether yure wndering i its a

develpment platrm, r yu are already wrking n it, this chapter

will help yu understand its cncepts better.

HTML5 FeaturesHeres the real deal. All yu can experience in HTML5 eatures, unc-

tins and innvatins.

Building Pinned SitesThe web yu lve, is just ne click away. Nw yu can pin yur avurite

sites t the windws 7 taskbar. Grab it. Pin it. Lve it.

HTML5

oCToBER 2011

01CHAPTER

02CHAPTER

03CHAPTER

04CHAPTER


4/97

3CoNTENTS

Tenetsofamodernbrowser

HTML5 anIntroduction

HTML5Features

BuildingPinnedSites

CSS3

JavaSCript/EC5

BuildingInteroperableSites

HTML5Canvas&SVG

MultimediaExperiences

withHTML5Audioand Video

HTML5to

HTML5 has managed to garner popular

interest, quite similar to web 2.0. Heres

all the information you need to get up

A 9.9 Mdia Pbication

VOluMe 06 | Issue 10A

9.9 Mediaworx Pvt. Ltd.Published by 9.9 Mediawrx

N part this bk may be reprduced, stred, r

transmitted in any rm r by any means withut the

prir written permissin the publisher.

I yu want us t create a custmised Fast Track

r yu in rder t demystiy technlgy r yur

cmmunity, emplyees r students cntact

[email protected]

October 2011Free with Digit. I yu have paid t buy this

Fast Track rm any surce ther than 9.9

Mediawrx Pvt. Ltd., please write t

[email protected] with details

CSS 3.0Weve seen abut cntent markup s ar. With emergence HTML5,yu need t lk at the latest style guidelines specifed in CSS 3.0.

Intrducing JavascriptAter llwing the specifcatins laid ut within HTML5,, and styling in

CSS 3.0, add spice t yur page with JavaScript.

Crss brwser cmpatibilityThe brwser market has a wide range chices. In rder t ensure

yur web site has the best experience, yu need t ptimise it acrss

all brwsers!

HTML5 Canvas & SVGThe mst nticeable dierence in HTML5 is the way it handles andaddresses cncerns with image and vide handling.

HTML5 Vide and AudiHTML5 has drastically simplifed the way multimedia cntent is

addressed and reerenced.

06CHAPTER

05CHAPTER

07CHAPTER

08CHAPTER

09CHAPTER

CO

VErDESign:PRASANTHTR


5/97

5INTRoDUCTIoN

Over the last few years, there have been more changes in thebrowser space and the internet than ever before. For customers,

the web has moved rom being a utilitarian tool to a personal-

ised experience. The increase in social networking usage, the

prolieration o video on the web, and the increasing number o rich web

and mobile applications connecting and engaging users online have made

people come to expect more rom their online experience.

The rich graphics and interactive capabilities once exclusively associ-ated with PC or mobile applications are increasingly expected rom your

avourite web site, be it an email service, photo site, social network, or a

news site. Yet, these kind o immersive experiences do not occur on the

web today.

Users have one kind o experience with applications installed on their

PCs and something entirely dierent with the web. Browsers are oten

associated with limited perormance and interactivity. The content thatyou care about is typically displayed in a simple and at ormat.

Simply put, the web is not as nearly as ast, rich, or intuitive as it

could be, and yet surfng the web is what people do most on their PCs.

However, the web is about to take a signifcant step orward.

For a better web experience, you need a browser that is built around

HTML5 and other modern web standards. For HTML5 to reach its ull

promise you also need a browser that is designed to take advantage o thepower o your ull PC. You also need to put your sites at the centre o your

experience. Your avourite sites should be seamlessly integrated with

Windows and look and behave just like a native application experience.

Together, these elements promise to unlock whats next on the web.

INTRoDUCTIoN


6/97

6

Chapter #1

TeneTs of aModern Web

broWserWe look at an HTML5 compatible

browser such as Internet Explorer 9,

understand it to a specic detail, and

analyse what the uture promises...

T

here are over a billion Windows customers in the world today.

Most o them spend more time browsing the web than any other

activity on their PC. These are the customers or whom Internet

Explorer has been developed, so they can get more done withinthe browser in a sae, secure and high perormance way.

The ocus is to make sure that the number one activity that customers

do browsing the web, is as compelling an experience as native Windows

applications installed on their PCs.

Beore we dive into understanding HTML5, it is important to understand

the components o a modern web browser and how HTML5 ts in.


7/97

7TeneTs of a Modern Web broWser

Wht mk m wFirst, developers should take advantage o HTML5 today. The goal is same

markup, which means that developers can now move away rom creating

multiple versions o single sites and rom creating browser prexes to gowith specic browsers. As developers have rallied around the promise

o a new class o rich HTML5 web applications, Microsot worked with

standards bodies like the World Wide Web Consortium (W3C) to bring

these standards to the marketplace. With Internet Explorer 9, the ocus is on

giving developers a stable platorm with site-ready standards so that they

can use HTML5 today. Internet Explorer 9 is the most standards-compliant

browser ever shipped by Microsot.Second, to transorm the fat web experience o today, the power o modern

hardware must be unleashed on the web. Rich applications require robust

computing capabilities that span sotware and hardware. As web applica-

tions become increasingly complex and graphically based, and as customers

spend more and more time using these applications, browsers need to be able

to take advantage o computing power oered with hardware and operating

systems. This is how native applications have used Windows or years. Today,the average browser uses only 10 percent o the computing power that is avail-

able in a modern PC. Internet Explorer 9 unlocks the remaining 90 percent.

Third, people go online to get to the websites and applications they care

about mostto get news about the sports that they care about, to learn about

community events that matter to them, and to connect with the people

that enrich their lives. Browsers can enhance that online experience allow

websites to come orward and shine. Internet Explorer 9 has a clean userexperience that puts the web rst and lets your sites shine.

And nally, the ocus on security and privacy needs to continue to be

second to none. Because the web still isnt as secure or private as it should

be, Internet Explorer 9 continues its industry leadership in being the worlds

most trusted browser and providing you with a robust set o eatures to

help protect you and your privacy while you are online.

Wht w i Itt expl 9Internet Explorer 9 makes your web eel as native as the applications run-

ning on Windows.

Fast: Internet Explorer 9 is all around fast. Part o reimagining the

role o the browser to deliver immersive, compelling web experiences is

rethinking the concept o speed. Today, speed is too oten narrowly deined


8/97

8 TeneTs of a Modern Web broWser

as page load time. Tomorrow, a browser will not be able to call itsel ast

unless it lets people interact with graphically rich sites and applications

with lightning speed. Fully hardware-accelerated graphics, text, video,

and audio through Windows means that the same markup not onlyworks throughout the web, but runs aster and delivers a richer experi-

ence. Designed to take ull advantage o the power o your PCs hardware

through Windows, Internet Explorer 9 delivers rich and immersive expe-

riences that are as ast and responsive as applications installed on your PC

Clean: Internet Explorer 9 puts the focus on the web sites you love,

with a clean experience for your web that meets you where you are.

Today, your avorite content, your sites and applications are buriedbehind a browser. Internet Explorer 9 reimagines the role o the browser

and how people interact with websites and web applications. Internet

Explorer 9 is site-centric, as opposed to browser-centric. You have the

websites you love with a clean look that makes your websites shine.

Streamlined notiications let you know when something has changed

without getting in the way and pull you back into your web experiences.

Jump Lists or Pinned Sites puts your avorite content just a click awaywithout having to open your browser.

Trusted: Internet Explorer 9 helps people eel confdent and in

control. The more that the web becomes part o our everyday lives, the

more complex that the issues o online trust and security become. When

done correctly, creating a trustworthy browser helps customers eel con-

nected to the web, not distracted by concerns about reliability, privacy, or

saety. People want to know that when they are doing something in onebrowser tab, they wont lose their work that is in another tab. They want

to know that the sites that they visit and the iles that they download

arent going to cause harm to their PCs or personal data. They also want

to know that their private inormation is kept private, and that they are

in control o the decision to keep their data private. Internet Explorer 9

is the trusted way to access the web because it has a robust set o built-in

security, privacy, and reliability technologies that can help keep userssaer and their browsing experience virtually uninterrupted.

Internet Explorer 9 is standards compliant. Extensive support or

HTML5, SVG, CSS3, Geolocation, ECMAScript5, and DOM provides a

new set o capabilities that will help enable developers to write one set

o markup and know that it will work and look the same in all modern

browsers. Internet Explorer 9 was designed with support or industry


9/97


standards built in to help ensure that the same markup works the same

with multiple browser types. We will explore some o these aspects in

the later chapters

Lt lk t ch th ct i til.. ft - Pmc Impvmt i Itt expl 9

Browser perormance is a multi-dimensional problem. Many subsystems

in the browser need to work together to display a page and allow you to

interact with it. The picture below shows all the subsystems involved in

rendering a page.

Networking: The networking subsystem is responsible or all commu-

nication between the client and server, including local caching o web

content. The networking subsystem is generally gated on the perorm-

ance o the users network

HTML: As HTML documents are downloaded rom the server theyre

passed to an HTML subsystem which parses the document, initiates addi-

Browser Subsystem


10/97


tional downloads in the networking subsystem, and creates a structural

representation o the document. Modern browsers also contain related

subsystems which are used or XHTML, XML and SVG documents.

CSS: When CSS is encountered, whether thats inside an HTML docu-ment or a CSS document, its passed to a CSS subsystem which parses

the style inormation and creates a structural representation that can

be reerenced later.

Collections: HTML documents oten contain metadata, or example the

inormation described in the document head or the attributes applied

to an element. The collections subsystem is responsible or storing and

accessing this metadata. JavaScript:When script is encountered, its passed directly to the Java-

Script subsystem which is responsible or executing that script. The

JavaScript subsystem is probably the most well-known o the browser

subsystems thanks to the visibility it has received over the last ew years.

Marshaling: Because most JavaScript engines are not directly integrated

into the browser, there is a communication layer between the browser

and the script engine. Passing inormation through this communicationlayer is generally reerred to as marshaling.

Native OM: JavaScript interacts with the document through the Docu-

ment Object Model APIs. These APIs are generally provided through

a subsystem which knows how to access and manipulate the document

and is the primary interaction point between the script engine and

the browser.

Formatting: Once the document is constructed, the browser needs toapply the style inormation beore it can be displayed to the user. The

ormatting subsystem takes the HTML document and applies styles.

Block Building: CSS is a block based layout system. Ater the document

is styled, the next step is to construct the rectangular blocks that will be

displayed to the user. This process determines things like the size o the

blocks and is tightly integrated with the next stage - layout.

Layout: Now that the browser has styled the content and constructedthe blocks, it can go through the process o laying out the content. The

layout subsystem is responsible or this algorithmically complex process.

Rendering: The inal stage o the process occurs inside the rendering

subsystem where the inal content is displayed to the user. This process

is oten reerred to as drawing to the screen and may occur on the CPU,

the GPU, or a combination o both.


11/97


Each site has very dierent perormance characteristics. Some spend a

lot o time executing JavaScript, others spend a lot o time in marshaling,

and some spend signicant time in layout and rendering. To make a browser

that is all-around ast, you have to understand how websites are built. ForInternet Explorer 9, the development patterns used to build more than

7,000 real-world websites were studied, paying special attention to the top

1,000 websites worldwide. The analysis covered more than 50 dimensions

to build a deep understanding o the patterns o those sites and took into

account a range o perormance characteristics including: time spent in

dierent subsystems, use o common development rameworks like jQuery

and DOJO, what analytics sites were using, how many script les sites wereusing, source code size, and also which eatures were being used.

Hardware-accelerated graphics

Today, when you browse the web, you use about 10 percent o the power o

your PC. Internet Explorer 9 unlocks the other 90 percent. Many browsers

do this by taking a lowest common denominator approach to perormance

and minimizing PC capability. Internet Explorer 9 takes ull advantage o theoperating system and hardware to ully accelerate rendering o webpages. As

an example, we use the graphics processing unit (GPU) when dealing with

text, graphics, and new HTML5 technologies like Video, SVG, and Canvas.

Over the last 10 years, the computing power o the GPU has grown

exponentially and todays GPUs can achieve more than one terafop o

computation. When you compare that to CPUs which have barely achieved

100 gigafops o computation, you can see how much computation powercan be unlocked through hardware.

Chakra, a brand new

JavaScript engine.

Based on data, we know

that most PCs have more

than 2 CPU processor coresand Chakra, the new Java-

Script engine in Internet

Explorer 9, is optimized

to take advantage o those

multiple cores by compiling

the JavaScript into highly WebKit SunSpider JavaScript Benchmark


12/97


ecient machine code in the background, while interpreting the JavaS-

cript in the oreground. Once compilation is nished, Chakra switches to

the compiled and signicantly aster machine code optimized or that PC.

Chakra has been systematically tuned to ocus on patterns that are oundin real world sites.

Although not a goal or the perormance work on Chakra, background

compilation and many other improvements mean that Internet Explorer 9

scores very well in popular JavaScript benchmarks like WebKits SunSpider.

According to WebKits SunSpider test, IE9 is the astest JavaScript browser

as o the Internet Explorer 9s release, when the benchmark was last used.

However, measuring the perormance o a browser by looking at small partso individual subsystems is inherently fawed. Instead, better benchmarks

represent real coding patterns and engage multiple subsystems at once.

New layout system

Internet Explorer 9 has an all new layout system that is optimized to reduce

memory use, particularly or HTML5 websites, which will place even more

demands on browsers. We nd that or large and visually complex websites,the new layout engine reduced memory uses in some cases by as much as

50 percent. In addition, the new layout system orms the oundation or the

graphically rich HTML5 applications o tomorrow to ensure that HTML5

capabilities such as SVG are not only ast, but are also able to scale to the

needs o developers.

Add-on Perormance AdvisorAn addition to the eature in Internet Explorer 8 that exposed add-on load

time, Add-on Perormance Advisor noties you when add-ons are slowing

down your browsing session. You are notied i the total load time o all

enabled add-ons takes more than 0.2 seconds, giving you an opportunity

to make an inormed decision to use the add-ons that you nd valuable and

disable those that are less useul or too slow.

Hang Recovery

New in Internet Explorer 9, this eature isolates the impact o a hung tab

to the individual tab, so that other tabs and the overall browser continue

to operate. When a website hangs because o a long running script or

other operation, it causes your browser to become nonresponsive. Hang

recovery in Internet Explorer 9 means you can continue browsing on


13/97


other tabs. This new eature compliments tab isolation and automatic

crash recovery, which also helps to keep you browsing and prevent the

loss o inormation.

And many more perormance optimizations

The core o Internet Explorer 9 alsohas been undamentally re-designed to

be ast. This includes numerous perormance optimizations, includingsuch

as improved network caching algorithms, quicker webpage ormatting with

CSS, and ensuring that important APIs or web developers such as docu-

ment.getElementByID are incredibly ast, signicant scenario tuning (WAC,

networking, benchmarks, bad pages, and so on), network cache improve-ments, compiler optimizations, and binary training. Internet Explorer 9

has decreased timer resolutions rom a system deault o 15.6ms to 4ms and

enhanced the nd-on-page perormance. Internet Explorer 9 also made large

working set reductions such as delayed image decoding (between 1-50MB

depending on the site), reduced the InPrivate data collection ootprint by

5MB, and reduced the size o the binary by over 1MB.

. sit-Ctic dig Mk th W shi i Itt

expl 9

Windows Internet Explorer puts the ocus on the web with a clean look

and eel that makes your websites shine. With a site-centric approach,

Internet Explorer 9 delivers one-click access to websites pinned directly to

your task bar, ewer interruptions and navigation that works seamlessly

and intuitively with the rest o Windows 7. Simply put, Internet Explorer9 ocuses on the web, not

the browser.

Clean browser

interace

The role o the browser

is not to simply get outo the way, but to bring

sites orward. In Internet

Explorer 9 the simplied

yet enhanced interace

puts the ocus on the

content o each website. Internet Explorer 9 lets your website shine


14/97


By deault, only the controls essential or browsing are in the browser

rame, quietly in glass, letting you browse and experience all that your

sites can oer.

Characteristics o each websiteare refected throughout the web

surng experience, allowing you

to ocus on and be more immersed

in the sites content. Elements o

each website are integrated into the

browser. I a site is pinned to the

taskbar, when the site is launched,the navigational controls integrate

the sites icon and primary color.

The New Tab page has been

revamped in Internet Explorer 9 to intelligently display the websites that you

like most and put them one click away, so that navigation is simple and easy.

New users can get started quickly and returning users get meaningul sugges-

tions and inormation that helps them decide what to do next as they browse.Each sites icon and primary color is used on the New Tab page to help you

identiy sites more easily. This is

helpul when there are many sites

to choose rom. Also, a site indicator

shows i the site is visited oten or

not. From the New Tab page, you

can also reopen closed tabs, reopenthe last browser session, clear the

site indicators, or start Microsot

InPrivate Browsing

Pinned Sites

Most people visit a small number

o websites daily, oten several times a day.You can pin sites by clicking the icon to the let o the web address and

dragging it to the taskbar. Ater a site is pinned, it shows up as its own

thumbnail, separate rom Internet Explorer. When a site is launched rom

the taskbar, the browser rame and navigational controls integrate the sites

icon and primary color, emphasizing the site and providing an even more

site-ocused experience

Primary colours and icon rom the web-

site integrate into the browser

Enhanced Tab Navigation


15/97


Internet Explorer 9 also provides an integrated Windows navigation

experience with websites that support Jump Lists and thumbnail preview

controls in the taskbar.

c. Th bw Ppl C Tut

Windows Internet Explorer 9 includes built-in deault settings that can help

keep your computer protected rom the rst time you launch the browser

and makes your browsing reliable, sae and private

Tracking Protection

Tracking Protection helps you stay in control o your privacy as you browsethe web. Some o the content, images, ads, and analytics that you see on the

websites have the ability to potentially track your behavior across multiple

sites. Tracking Protection provides you an added level o control and choice

about the inormation that third-party websites can potentially use to track

your browsing activity.

To use this unctionality, you simply have to add a Tracking Protection

List rom one o the Tracking Protection List providers. These TrackingProtection Lists contain domains which Internet Explorer will block as

well as domains Internet Explorer will not block. As you browse to dierent

sites, Internet Explorer helps ensure that personal inormation about you,

such as your IP address or the site you are currently viewing, is not sent to

the domains that are blocked based on the heuristics o the list. Tracking

Protection stays on until you decide to turn it o.

SmartScreen Filter

Internet Explorer 9 invests heavily in industry-leading Microsot Smart-

Screen Filter and the back-end reputation systems that support it. Smart-

Screen is a dynamic security intelligence and saety service designed to

help protect Internet Explorer users rom phishing attacks and malicious

sotware.

SmartScreen Application Reputation

SmartScreen Application Reputation is a groundbreaking browser eature

that uses reputation data to remove unnecessary warnings or well-known

les and to show more severe warnings when the download is at higher risk

o being malicious. Many people are oten conditioned to ignore the generic

warnings that are shown or every download, such as: This le type can


16/97


harm your computer. Are you sure you want to run this le? This same

warning is presented whether the le is a common program or a piece o

malware. Other browsers leave it up to you to decide i a program is sae to

download and run rom the Internet. Internet Explorer 9 is the only browserthat uses Application Reputation to help you make saety decisions.

What happens i a download doesnt have a positive

reputation?

A downloaded program is rst checked against the Application Reputation

service. For the vast majority o downloads, the downloaded program will

have a positive reputation and the program can be downloaded and runwith no browser warnings. However, in the rare case that a download does

not have a positive reputation, you are warned and can choose to delete the

program immediately or pick an option rom the Actions button ound on

the notication bar or in the Download Manager. This warning gives you

additional inormation about the risk o your activity so you can choose to

proceed with the download or not.

SmartScreen URL fltering improvements

The SmartScreen URL lter continues to be a key saety asset o Internet

Explorer 9.

The new Download Manager blocks downloads rom known malicious

websites. When a malicious download URL is detected, a warning is shown

in the new notication bar and in the Download Manager. At this point,

Uncommon download warning in notifcation bar

Uncommon download warning in

Download ManagerUncommon download warning Action

Button with user choices


17/97


you can continue the downloadotherwise the download is cancelled and

removed automatically. The Download Manager also provides you with

the status o downloads, a secure area or downloaded les, and the nal

location where downloads are stored.Download Manager establishes a older or downloads so that you dont

have to pick a older each time you download a le. Its an easy way to scan

and interact with le downloads.You also get to see the speed o each down-

load. That way youre able to pause a less important download so higher

priority downloads can be completed aster.

I a download is interrupted, the les can be resumed on the next launch

o Internet Explorer 9. So i you encounter a network connection problemor have to shut down your computer, you easily can pick up right where

you let o.

The SmartScreen block page has been updated to be clear when hosted

content is malicious rather than the hosting website.

InPrivate Browsing

Sometimes customers dont want to leave a trace o their web browsingactivity or browsing history on their computers. Microsot InPrivate

Browsing helps prevent browsing history, temporary Internet les, orm

data, cookies, usernames, and passwords rom being retained by the

browser. You can start InPrivate Browsing rom the New Tab page, rom

the Internet Explorer Jump List, or by selecting InPrivate Browsing rom

the Saety menu.

Greater protection against emerging threats

Cross-site scripting attacks are a leading online threat. Their aim is to

capture keystrokes and record sign-in inormation or your accounts. You

might receive an email message that contains a web address that has been

tampered with. When you click the link, you are directed to a legitimate

website that has been compromised to contain malicious content that can

capture keystrokes and record your sign-in and password inormation.Just like with Internet Explorer 8, Internet Explorer 9 includes a cross-site

scripting lter that can detect these types o attacks and disable the harmul

scripts. This protection is always on automatically.

Domain highlighting

Internet Explorer 9 can help you avoid deceptive sites and can give you peace


18/97


o mind. As with Internet Explorer 8, Internet Explorer 9 takes domain

names which appear in the address bar and highlights them in black, while

the rest o the web address is displayed in gray text. This makes it easier to

conrm the identity o the sites that you visit and helps to alert you about

deceptive websites with misleading addresses. Internet Explorer 9 recog-

nizes EV certicates or businesses that have completed this process, and

visually represents them by coloring the Address Bar in green. Clicking onthe security status bar displays the security report or the site.

Cclui

Raise your expectations or the web and help the web go native. With

Internet Explorer 9 you can take ull advantage o Windows and current

hardware to help enhance the capabilities o the web. Get an experience that

makes the web eel as native as your avorite applications on your PC andenjoy a wave o immersive, beautiul websites. Developers can now create

with Internet Explorer 9 and unlock the Beauty o the Web with Internet

Explorer 9 (www.beautyoftheweb.com).


19/97


http://w

ww.b

eautyofthe

web.i

n

DownloadN

ow


20/97

20

Chapter #2

HTML5 AninTroducTionWeve heard a lot about HTML5.

Whether youre wondering i its adevelopment platorm, or you are

already working on it, this chapter will

help you understand its concepts better.

HTML5 is brand new. Indeed, it is ar rom even being fnished

yet. I you were to listen to some authorities on technology,

theyd tell you itll probably not be ready or another decade!

Down to its undamentals, HTML5 is a language or struc-

turing and presenting content or the world wide web. It is the th revi-

sion o the HTML standard (originally created in 1990 and most recently

standardised as HTML4 in 1997). As o September 2011, HTML5 is stillunder development and expected to be nalised by 2016. However many

components with HTML5 spectrum are ready or use already.

What y shl kw...

Beore we get down to the history o HTML5 and how we got where we are,

here are ve things that you should know about HTML5:


21/97

21HTML5 An inTroducTion

Not One Big Thing

HTML5 is now popularly used as an all-inclusive term. Typically it reers

to a collection o new web specications that enable next generation web

applications. It can include anything rom the true W3C HTML5 specifca-tion, CSS3, ECMAScript 5 and much more. When looked at together, they

provide us as developers with new support or rich graphics and media, new

JavaScript and DOM unctionality to provide advanced programmability

and standardise behaviour within the browsers.

HTML5 is a collection o scores o independent individual eatures.

So it is wrong to consider it one giant entity. There is no one thing called

HTML5 support. I you want to use HTML5 in your browser, you willhave to check or support or individual eatures o HTML5, be it canvas,

video, audio or geolocation.

Think o HTML as comprising tags and angle brackets. The interaction

o these angle brackets with JavaScript, through the Document Object Model

(DOM), is also dened in the HTML5 specication. The easiest way to sum

up the components o HTML5 is as ollows:

HTML5= HTML5 + ECMAScript + CSS 3 + SVG + GeoLocation + WebAppsAs you can see, the HTML5 on the let reers to loose marketing and

technology jargons. On the other hand, on the right side, it reers to the new

markup, tags and eatures being introduced by the W3C working group.

ECMAScript is the ormal body responsible or dening the language

that is better known as JavaScript!

No need to start from scratchOne o the key benefts o using HTML5 is that it doesnt require you to

relearn things you already know. I youre still stuck on HTML4, this is

good news. I your web application worked yesterday in HTML 4, it will

still work today in HTML5. Period. What HTML5 does is it gives you the

tools and resources to improve your application.

SupportHTML5 is well supported by all major browsers be it IE9, Fireox, Chrome

or Saari. Even mobile browsers built into iPhone, certain Android devices

and even Internet Explorer on Windows Phone Mango support HTML5. It

doesnt matter which HTML5 eature youre using designing better web

orms, drawing on a canvas, playing a video or building web applications

that work ofine, youll nd that HTML5 is already well-supported.


22/97

22 HTML5 An inTroducTion

It is easy to get started

HTML5 is here to make your lie easier and builds on the success o HTML4.

Moving to HTML5 can be as simple as changing your . The doctype

should already be on the frst line o every HTML page. Previous versions oHTML defned a lot o doctypes, and choosing the right one could be tricky.

Compare, or example, the ollowing HTML4 doctypes:

Defnitely, not the easiest thing to remember and there are over ten vari-

ations o this markup! HTML5 solves this problem by dening only one

doctype:Now thats a doctype you might just remember.Upgrading to the HTML5 doctype wont break your existing markup,

because all the tags dened in HTML 4 are still supported in HTML5. But

it will allow you to use and validate new semantic elements such as

, , , and .

No escaping it

Theres no way youll be able to escape HTML5! Although it has beenaround or some time now, HTML5 has gained recent momentum due to a

strong push rom multiple vendors, including Microsot, Apple and Google.

In act, Apple issued a public letter titled Thoughts on Flash, where it

concluded that with the development o HTML5, Adobe Flash is no longer

necessary to watch video or consume any kind o web content. Denitely,

HTML5 is here to stay.

HstyTim Berners-Lee invented the world wide web! Tim created the World

Wide Web Consortium (W3C). Its mission was to lead the world wide

web to its ull potential by developing protocols and guidelines that

ensure long-term growth or the web. In December 1999, HTML 4.01

was published. Ater this, the people who ran the W3C declared that

it would be diicult to extend HTML 4 and they gave up on it or thenext ten years!

Turns out that web developers got busy trying to bridge the gaps in

HTML5 by rolling out custom controls plug-ins and libraries. And fnally,

key browser vendors such as Microsot, Google, Mozilla and Apple got

together to develop these urther, fnally ending up under the W3C HTML

working group.


23/97

23HTML5 An inTroducTion

cSS a what ts all abtYou might have a vague idea that it has something to do with the stylising

your HTML5 page. Heres more on it.

CSS is an acronym or Cascading Style Sheets. It is a style sheet languageused to describe the presentation semantics (the look and ormatting) o a

document written in a markup language. Although we will deal with the

application o CSS to style web pages written in HTML, but the language

can also be applied to any kind o XML document.

HTML elements enable web page designers to mark up a document as

to its structure. The HTML specication lists guidelines on how browsers

should display these elements. For example, you can be reasonably surethat the contents o a strong element will be displayed bold-aced. But you

have very limited control over how your text appears. What CSS does is it

puts the designer in the drivers seat. For example, CSS covers onts, colors,

margins, lines, height, width, background images, advanced positions and

many other things

JavaSpt / EcMASpt 5.0JavaScript is the scripting language o the web and browsers implement the

standards described by ECMAScript; though not all browsers implement it

exactly the same way! Anyhow, JavaScript is used in billions o web pages.

It is used to add unctionality, communicate with the server, validate

orms, and a host o other stu. Well try and give you a brie idea o this

scripting language in the context o HTML5.


24/97

24

Chapter #3

HTML5 FeaTuresHeres the real deal. All you canexperience in HTML5 eatures,

unctions and innovations.

Ever since its introduction, HTML has been in continuous evolu-

tion. Dierent eatures have been introduced at dierent pointso time, some being introduced in specifcations while others

were introduced in sotware releases.

Componnt of HTML5The design principles o HTML5 have been spelled out in the WHATWG

specifcation as ollows:

Compatibility

At the core o HTML5, is the desire to keep everything working smoothly.

The motto is evolution not revolution.

Utility

The HTML5 specication is written based on a one-line priority order - the


25/97

25HTML5 - FeaTures

user is king. I any doubt ever arises, the specifcation values users over

authors, over implementers (browsers), over speciers (W3C/WHATWG),

and over theoretical purity. All this makes HTML5 overwhelmingly prac-

tical, even i its imperect.

Interoperability

HTML5 strives or simplifcation and avoiding needless complexity. To

achieve all this simplicity, the specifcation has become much bigger and

detailed, spanning over 1200 pages. HTML5 is also designed to handle

errors, with a variety o error handling plans.

Universal access

This principle aims to make HTML5 independent o the device or platorm,

support all world languages and even support users with disabilities.

The fgure below shows the various classes that make up the complete

HTML5 Specication. Lets examing these briefy. Keep in mind that the com-

plete HTML5 is still a

working drat and isstill being discussed

on the HTML Working

Group and WHATWG

mailing lists

Semantics

Giving meaning tostructure, semantics

are ront and centre

with HTML5. A richer

set o tags, along with RDFa, microdata, and microormats, are enabling a

more useul, data driven web or both programs and your users.

Ofine and StorageWeb apps can start aster and work even i there is no internet connection,

thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB,

and the File API specifcations.

Dvic cc

Beginning with the Geolocation API, web applications can present rich, device-

HTML5 Specifcation


26/97

26 HTML5 - FeaTures

aware eatures and experiences. Incredible device access innovations are being

developed and implemented rom audio/video input access to microphones

and cameras, to local data such as contacts and events, and even tilt orientation.

Connectivity

More ecient connectivity means more real-time chats, aster games, and

better communication. Web sockets and server-sent events are pushing

(pun intended) data between client and server more efciently than

ever beore.

MultimediaAudio and video are rst class citizens in the HTML5 web, living in harmony

with your apps and sites. Lights, camera, action!

3D, Graphics and Eects

Between SVG, Canvas, WebGL, and CSS3 3D eatures, youre sure to amaze

your users with stunning visuals natively rendered in the browser.

Perormance and Integration

Make your web apps and dynamic web content aster with a variety o

techniques and technologies such as Web Workers and XMLHttpRequest

CSS3

CSS3 delivers a wide range o stylisation and eects, enhancing the web app

without sacricing your semantic structure or perormance. Additionally,Web Open Font Format (WOFF) provides typographic fexibility and control

ar beyond anything the web has oered beore.

Chng to docmnt tctIn addition to the above, there have been some changes to the document

structure or HTML5:

The document structure o HTML5 is compatible with HTML4 andXHTML1 documents published on the web, but isnt compatible with some

o the SGML eatures o HTML4. HTML5 also denes detailed parsing rules

or this syntax, which is largely compatible with popular implementations.

New DOCTYPE

The HTML syntax o HTML5 requires a DOCTYPE to be specied to ensure


27/97

27HTML5 - FeaTures

that the browser renders the page in standards mode. The DOCTYPE has

no other purpose and is thereore optional or XML.

In HTML5, the DOCTYPE or web pages has been greatly simplifed.

Compare, or example, the ollowing HTML4 DOCTYPEs:

Impossible to remember, right? HTML5 neatly solves this problem as

ollows:

Yes, thats it! Just two words DOCTYPE and html. All this is pos-sible because HTML 5 is no longer part o SGML, but is instead a markup

language all by itsel.

Character declaration

Like the new DOCTYPE, the character set declaration has also been abbre-

viated. It used to be:

Now, it uses UTF-8 and you defne it with just one meta tag:

MathML and SVG

The HTML syntax o HTML5 allows or MathML and SVG elements to be

used inside a document. For example, a very simple document using someo the minimal syntax eatures could look like:

SVG i n t ext / ht ml

A r ed ci r cl e:

Nw mnticHTML 5 recognises that web pages have a structure, just like books have a

structure. In general, web pages have navigation, body content, and sidebar

content plus headers, ooters, and other eatures. And HTML 5 has created

tags to support those elements o the page.


28/97

28 HTML5 - FeaTures

This new markup defned by HTML5 greatly simplifes the design o

your HTML pages. The new mark-up knows as semantics give meaning to

the content on your page. Google had analysed millions o pages to discover

the common ID names or tags and ound a huge amount o repeti-tion. For example, web sites use DIV id=ooter to mark up ooter content,

HTML5 provides a sectioning element called that you can use in

modern browsers right now.

- It represents a generic document or application section.It can be used together with the h1, h2, h3, h4, h5, and h6 elements to

indicate the document structure.

- It deines the header o a page or a section o the page.

- It deines the ooter o a page or a section o the page.

- It represents the navigation on a page.

- It represents an independent piece o content o a document,

such as a blog entry or newspaper article. - It deines extra content such as a sidebar on a page and is used to

represents a piece o content that is only slightly related to the rest o the page.

- deines images that annotate an article. You can use as an optional caption.

Well now create an HTML5 page and see what it looks like. For this, well

use the new DOCTYPE, character set, and semantic markup elementsin

short, the new sectioning content.

The new HTML5

Structure


29/97

29HTML5 - FeaTures

HTML5

Header

Subt i t l e

Fast Tr ack t o HTML5

Nav

I nt r oduct i on to

HTML5

A Br i ef Hi s-

t or y New f eat ures i n

HTML5

Ar t i cl e Header

HTML5 i s a l anguage f or st r uct ur i ng and

pr esent i ng cont ent f or t he Wor l d Wi de Web, a cor e t echnol ogy

of t he I nt er net .

It is the fth revision of the HTML

st andar d ( or i gi nal l y cr eat ed i n 1990 and most r ecent l y

st andar di zed as HTML4 i n 1997) and as of August 2011 i sst i l l under devel opment .

Ar t i cl e Foot er


30/97

30 HTML5 - FeaTures

Ar t i cl e Header

Appl e I ncs CEO St eve J obs i ssued apubl i c l et t er t i t l ed Thought s on Fl ash wher e he con-

cl udes t hat wi t h t he devel opment of HTML5, Adobe Fl ash i s

no l onger necessar y t o wat ch vi deo or consume any ki nd of

web cont ent .

Ar t i cl e Foot er

Asi de

HTML5: There i s no Escapi ng i t !

Foot er

Without styles, the page would be pretty dull to look at,. So let some o

the CSS code to jazz the content.

Docmnt pnttionUnlike previous versions o HTML and XHTML which are dened in terms

o their syntax, HTML 5 is being defned in terms o the Document Object

Model (DOM). It is inspired by the tree representation, which is used inter-

nally by browsers, in order to represent documents. The principle advantage

o using DOM is that the language itsel can be defned independently o

the syntax. There are primarily two syntaxes that can be used to representHTML documents: the HTML serialisation (known as HTML 5) and the

XML serialisation (known as XHTML 5).

Nw lmnt

HTML5 introduces many new markup elements, which it groups into seven

dierent content types.


31/97

31HTML5 - FeaTures

Embedded - Content that imports other resources into the document.

For example, , , , and .

Flow - Elements used in the body o documents and applications, or

example , , and . Heading- Section headers, or example , , and .

Interactive - Content that users interact with, or example or

, , and .

Metadata Elements, commonly ound in the head section, that set up

the presentation or behaviour o the rest o the document, or example

, , and .

Phrasing- Text and text markup elements, or example , ,, and .

Sectioning- Elements that deine sections in the document, or example

, , and .

Nw Fom Typ

HTML 5 supports all the standard orm input types, but it adds a ew

more. The idea o these new types is that the user agent can now submita defned ormat to the server. It gives the user a better experience as his

input is checked beore sending it to the server meaning there is less time

to wait or eedback.

datetime

datetime-local

date

month week

time

number

range

email

url

Nw ttibt:

HTML5 has introduced several new attributes to various elements that

were already part o HTML4:

WebForms Attributes -

A new autoocus attribute can be speciied on the input select, tex-


32/97

32 HTML5 - FeaTures

tarea and button elements. It provides a declarative way to ocus a

orm control during page load. Using this eature should enhance the

user experience as the user can turn it o i the user does not like it,

or instance. A new placeholder attribute can be speciied on the input and textarea

elements. It represents a hint intended to aid the user with data entry.

The new orm attribute or input, output, select, textarea, button, label,

object and ieldset elements allows or controls to be associated with a

orm. These elements can now be placed anywhere on a page, and still

be associated with a orm. Emai l :

The new attribute applies to input, select and textarea. It

indicates that the user has to ill in a value in order to submit the orm.

Col or: Choose one

Red

Gr een

Bl ue

The input element has several new attributes to speciy constraints:

autocomplete, min, max, multiple, pattern and step.

Other attributes

The script element has a new attribute called async that inluences script

loading and execution.

The html element has a new attribute called maniest that points to an

application cache maniest used in conjunction with the API or oline

Web applications. The link element has a new attribute called sizes. It can be used in

conjunction with the icon relationship (set through the rel attribute;

can be used or e.g. avicons) to indicate the size o the reerenced icon.

The ol element has a new attribute called reversed. When present, it

indicates that the list order is descending.

The irame element has three new attributes called sandbox, seamless,


33/97

33HTML5 - FeaTures

and srcdoc which allow or sandboxing content, e.g. blog comments.

elmnt rmovd

There are also some elements in HTML 4 that will no longer be supported

by HTML 5. acronym

applet

baseont

big

center

dir

ont rame

rameset

isindex

norames

noscript

s

strike tt

u

aPIHTML5 introduces a number o APIs that help in creating Web applica-

tions. These can be used together with the new elements introduced or

application. Some o the most important APIs are: Geolocation API deines a high-level interace to location inormation

associated only with the device hosting the implementation, such as lati-

tude and longitude. The API itsel is agnostic o the underlying location

inormation sources. Common sources o location inormation include

Global Positioning System (GPS) and location inerred rom network

signals such as IP address, RFID, WiFi and Bluetooth MAC addresses,

and GSM/CDMA cell IDs, as well as user input. No guarantee is giventhat the API returns the devices actual location.

IndexedDB API is a W3C drat Web speciication or the storage o

large amounts o structured data in the browser, using indexes that

allow or high perormance searches on this data. The IndexedDB API

is currently being standardized by the W3C Web Applications Working

Group. IndexedDB can be used or browser implemented unctions like


34/97

34 HTML5 - FeaTures

bookmarks, and as a client-side cache or web applications such as email.

WebSockets API is a technology designed to simpliy much o the

complexity around bi-directional, ull-duplex communications chan-

nels, over a single Transmission Control Protocol (TCP) socket. It canbe implemented in web browsers, web servers as well as used by any

client or server application. The WebSockets API is currently being

standardized by the W3C Web Applications Working Group and the

protocol is being standardized by IETF Hypertext Bidirectional (HyBi)

Working Group.

FileAPI is a W3C drat Web speciication or representing ile objects

in web applications, as well as programmatically selecting them andaccessing their data. The FileAPI is currently being standardized by

the W3C Web Applications Working Group.

MediaCapture API The W3C HTML Speech Incubator Group is con-

sidering the easibility o integrating speech technology in HTML5. At

this stage, the work is very experimental and the group is discussing

a number o dierent proposals.

Selector APIs introduces new simple ways to ind elements in your pageDOM. Some previous JavaScript Methods that allowed developers to

make a ew calls to ind speciic elements in the page includes

slcto aPI

getElementById() - Returns the element with the speciied id

attribute value

getElementsByName() - Returns all elements whose name attributehas the specifed value

getElementsByTagName() - Return all elements whose tag name

matches the specifed value

With the new Selectors API, there are now more precise ways to speciy

which elements you would like to retrieve without resorting to looping and

iterating through a document using standard DOM. New QuerySelector

methodsinclude querySelector() - Return the irst element in the page which matches

the speciied selector rules(s)

querySelectorAll() - Returns all elements which match the speciied

rule or rules

console.log API has become the de acto logging standard or JavaScript

developers. Many browsers oer a split-pane view that allows you to see


35/97

35HTML5 - FeaTures

messages logged to the console, which is incidentally much better than

making a call to alert(), since it does not halt program execution.

Newer browsers now have a native implementation o JSON to speed

up parsing and serializing. The native JSON object is specifed as part othe ECMAScript 5 standard covering the next generation o the JavaScript

language.

Bow sppotAn important question to address here is how to identiy i your browser

supports that HTML5 eature be it canvas, video or orm attributes.

When your browser renders a web page, it constructs a Document ObjectModel (DOM), a collection o objects that represent the HTML elements on

the page. Every element every

, every , every is repre-

sented in the DOM by a dierent object.

All DOM objects share a set o common properties, but some objects

have more than others. In browsers that support HTML5 eatures, certain

objects will have unique properties. A quick peek at the DOM will tell you

which eatures are supported.There are our basic techniques or detecting whether a browser supports

a particular eature. From simplest to most complex:

1. Check i a certain property exists on a global object (such as window or

navigator).

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

3. Create an element, check i a certain method exists on that element, then

call the method and check the value it returns.4. Create an element, set a property to a certain value, then check i the

property has retained its value

For detection o HTML5 eatures your best tool is Modernizer. Mod-

ernizr is a small JavaScript library that detects the availability o native

implementations or next-generation web technologies, i.e. eatures that

stem rom the HTML5 and CSS3 specifcations. Many o these eatures are

already implemented in at least one major browser (most o them in twoor more), and what Modernizr does is, very simply, tell you whether the

current browser has this eature natively implemented or not.


36/97

36

Chapter #4

BuildingPinned SiteSThe web you love, is just one click away.

Now you can pin your avourite sites to thewindows 7 taskbar. Grab it. Pin it. Love it.

In Windows 7, the taskbar shows both actively running applications

and shortcuts to applications that you use requently. By pinning

an application to the taskbar, you can quickly nd and launch theapplications you care about most. Using Internet Explorer 9, you

can also pin web sites to the taskbar, which enables you to launch sites the

same way you launch other applications in Windows.

Pinned sites unlock a new set o tools Favicons, Notications, Jump

Lists, and Thumbnail Toolbars. Pinned Sites eature a site-enhanced user

interace, with an enlarged shortcut icon, with Back and Forward buttons

and other interace elements that can be unied with the brand and overallappearance o the site.

With just a ew lines o HTML or JavaScript code, you can use these tools

to take advantage o the ull power o the PC and extend the web experience

beyond the browser and onto the Windows 7 taskbar.

Pinned sites are only supported in Windows 7. To pin a site, users can

do one o the ollowing to pin a site to the taskbar:


37/97

37Building Pinned SiteS

Tear o a tab by clicking and dragging it to the taskbar.

Drag the avorites icon (avicon) rom the address bar in Internet Explorer

to the taskbar.

Drag an image in the web site to the taskbar.Ater a site is pinned, the site renders with custom enhancements or

instance, the Back and Forward buttons match the color scheme o the web

site. Sites can also be pinned to the Start menu.

The ollowing graphic shows the taskbar elements in Windows 7.

Cra a basc

p sWeb developers can

use the msSiteMode

APIs to integrate

pinned sites with the

Windows 7 Taskbar.

These APIs are divided

into two groups:

Feature Description

Taskbar button When you click a Pinned Site button on the taskbar, the

website launches in a new browser window that has been

customized specifcally or the site. The site icon is visible on

the taskbar button.

Overlay icons A 16x16 pixel notifcation icon that appears on top o the nor-mal site icon. This notifcation indicates that something has

changed in the website, such as new mail arriving, receiving

a chat request, or being outbid in an auction. The notifcation

is visible only when the site is running.

Jump List The Jump List can contain static and dynamic tasks that act

as shortcuts into the Pinned Site. A user can urther custom-

ize their experience by pinning these items to the Jump List.

Jump List category A Pinned Site can create and fll a single custom Jump List

category by using script in the webpage. This list is dynamic.

Jump List tasks In addition to the Jump List category, a Pinned Site can

predefne a list o tasks in metadata. This list is static.

Thumbnail toolbar A Pinned Site can create up to seven buttons that appear on

the taskbar thumbnail window. These buttons can be visible

or hidden, active or inactive, or toggle between dierent

button states.


38/97

38 Building Pinned SiteS

1. Site properties which apply to any user visiting the web site (these are

implemented using HTML).

2. Inormation that is dynamic in nature or specic to an individual user

visiting the web site (these are implemented using JavaScript).Basic Pinned sites contains properties which apply to any user and

explain how to implement these using HTML.

These site properties can be implemented by web developers using meta

tags that live inside the head block o your HTML. The site properties that

you can implement using the meta tag are explained below:

Appcao amThe application name will be used as the name o the application button

on the taskbar, and it is appended to the window title or any pinned site

window. I an application name is not given, the HTML documents Title

element is used instead.

You can set the application name like this, substituting in the appropriate

content or your site:

Once your site is pinned, right-click on its icon in the Taskbar. The rst

link in the bottom group o links should read ThinkDigit and i you click

it, it should open the web site.

S h sar pa

The Start Page is set using a meta tag with name=msappl i cat i onst ar-

tu r l . The msapplication-starturl metadata contains the root URL o theapplication. The start URL can be ully qualied, or relative to the current

document. Only HTTP andHTTPS protocols are allowed. I this element is

missing, the address o the current page is used instead.

toopsYou can also pin sites to the Start Menu or Desktop. The Desktop Tooltips

unctionality wont show up when you pin a web site to the taskbar, but you

will see it as a tooltip i you pin the site to the desktop.

The syntax is as ollows (again, choose your own content):


39/97


To pin to the Desktop, drag the avicon rom the address bar in Internet

Explorer onto your desktop. This will create a link on your desktop. Hover

your mouse pointer over the icon on the desktop.

Cosra h a sz of h browsr wow

The pinned site window size denes the size (width and height, in pixels) o

the pinned site when it is rst launched by the user. The syntax is:

The initial size o the pinned sites window will now be 800x600.

Back a Forwar navao Bo Coors

This denes the color o the Back and Forward navigation buttons in

the pinned site browser window. Any named color or hex color value as

dened by CSS Level 3 is valid. I this meta tag is omitted, the navigation

button color will be based on the avicon.

Now the navigation buttons or the pinned window should be orange,

as below:

Finally, lets put this all together with an example. Here is the HTMLused to dene thinkdigit.com. Feel ree to pin this site and then see how the

various site properties are exposed in the pinned site.

Thi nkDi gi t I e9 Pi nned Si t e Sampl e


40/97


Your best Tech Resource Ever / >

How o cra Jmp ls askstasks

While a destination is a thing, a task is an action, and in this case it is a site-

specic action. In the context o a Pinned Site, a task can be any common

navigation or site unctionality.

Some tasks are static, meaning that they are set when the site is pinned.

Others, like notications and user-specic tasks, are dynamic and change

over time. Static tasks are defned using meta tags. These properties apply to any

one using the site when it is pinned and appear in the category named

Tasks. This category can contain up to ive items. The items in this list

tend to remain the same regardless o the state or status o the applica-

tion. This topic explains how to add static tasks.

Dynamic tasks are defned using JavaScript APIs. These tasks typi-

cally surace inormation that is speciic to an individual user and appearin a Jump List category that you create. This custom category can contain

up to 20 items, although only the last 10 items appear in the Jump List

by deault.

A pinned site can only have one static list and one dynamic list at a time.

impm sac Jmp lss

Static Jump List Tasks are also implemented using meta tags in the headblock o your HTML. You must speciy a name o msapplication-task and

a content attribute that contains a triecta o inormation:

name This is the name o the task which is displayed to the user in the

Jump List.

action-uri This URI is the destination that the user will be taken to when

the Jump List task is clicked.


41/97


icon-uri This URI is a pointer to an icon (*.ico le) that will be displayed

to the let o the task name in the Jump List.

Both o the URIs can be absolute or relative. For the action-uri, any

destination is valid; this is not bound to the domain o the webpage likethe Start URL property.

Putting this all together, here is what a single Jump List task might look

like in your HTML:

In the Jump List, this task will look like the rst task below:When you click on the Locations task, you will be taken to http://www.

consumermate.com/Location.aspx. The little Windows-like icon next to the

Locations task was pulled in rom http://www.consumermate.com/favicon.

ico (the icon-uri).

impm yamc Jmp lss

Jump List categories are similar to Jump List tasks, except with categories, you

can dene your own heading (or category) or the items in the Jump List. They

can be used to surace inormation specic to a user, notications, or the users

history. For example, on a news portal, the site could build up a Recently Viewed

category in the Jump List and include perhaps the last 5 articles viewed on the site.


42/97


Lets look at a real-world example o site pinning. I you go to www.

consumermate.com and right-click on the Taskbar icon, you will see a Jump

List like this:

Now, you will notice that the Consumermate pinned site Jump List hasLaptop prices in the Tasks list. This takes you straight to the prices without

having to navigate to the page rom the address bar.

Now, lets look at how to code a Jump List category. First, we need to create

a new Jump List category. To do that, use the msSiteModeCreateJumpList

method in JavaScript. It takes a single parameter, which is the name o the

Jump List category that will be displayed to the user.

wi ndow. ext er nal . msSi t eModeCr eat eJ umpl i st( Resour ces );Next, we need to create items in this Jump List category. This is done by

the msSi t eModeAddJ umpLi st I t emmethod. This method has 3 required

parameters, which are the same triecta as when we were putting items in

our Jump List tasks:

name This is the name o the Jump List item which is displayed to the

user in the Jump List.

action-uri This URI is the destination that the user will be taken to whenthe Jump List item is clicked.

icon-uri This URI is a pointer to an icon (*.ico le) that will be displayed

to the let o the item name in the Jump List.

You will probably want to add multiple items to your Jump List category,

using the same code below with dierent content:

wi ndow. ext er nal . msSi t eModeAddJ umpLi st I t em( Twi t t er ,

ht t p: // www. t wi t t er. com/ consumer mat e, ht t p: // a3. t wi mg. com/ a/ 1294164987/ i mages/ i ef avi con. i co);

Next, we have to call msSiteModeShowJumpList to display the Jump

List with our new items.

wi ndow. ext er nal . msSi t eModeShowJ umpl i st( );

Finally, i you ever want to remove your custom Jump List, you can do

this by calling the msSiteModeClearJumpList method.

wi ndow. ext er nal . msSi t eModeCl ear J umpl i st( );Putting it all together, the JavaScript might look like this:

// J ump l i st cat egor i es

i f ( wi ndow. ext er nal . msI sSi t eMode()) {

wi ndow. ext er nal . msSi t eModeCr eat eJ umpl i st ( Name of

t he Cat egor y);

wi ndow. ext er nal . msSi t eModeAddJ umpLi st I t em( Name of


43/97


I t em, ht t p: // www. URLLi nk1. com, ht t p: // www. URLLi nk1. com/

f avi con. i co );

wi ndow. ext er nal . msSi t eModeAddJ umpLi st I t em( Twi t t er ,

ht t p: / / www. t wi t t er. com/ consumer mat e, ht t p: // a3. t wi mg.com/ a/1294164987/ i mages/ i ef avi con. i co );

wi ndow. exter nal . msSi t eModeAddJ umpLi st I t em( I nt er net

Expl or er 9, ht t p: // bi t . l y/ b9HBZu, ht t p: // Mi cr osof t . com/

i e/ f avi con. i co );

wi ndow. ext er nal . msSi t eModeShowJ umpl i st ( );

// wi ndow. ext er nal . msSi t eModeCl earJ umpl i st( );

}The rst i statement checks to see i the current page was launched as

a pinned site using the msIsSiteMode method. (I the page is just running

within the browser and isnt pinned, none o this unctionality will be

exposed anyway.)

Cra avac P Ss

impm Ovray cosOverlay icons are used to surace notications or status to the user. While

the pinned site is running, it has the ability to display a small icon overlaid

on the Taskbar button, to draw the users attention back to the site or notiy

the user that some event has happened. The pinned site can display multiple

overlay icons to the user, but it can only display one icon at a time.

A great example is Facebook. I you pin acebook.com, you will see that

when you have new notications (new riend requests, messages, etc.),

The Facebook pinned site will overlay a red iconwith a white asterisk to notiy you.

To implement overlay icons in your own pinned

sites, you will need to know how to both set and hide

overlay icons.

To display an overlay icon to the user on the Taskbar button, you will

use the msSiteModeSetIconOverlay method. It takes a parameter which is


44/97


a URL pointing to an icon le (*.ico); this is the icon that will be overlaid on

the Taskbar button. There is also a second, optional string parameter or a

description o the icon overlay, or accessibility purposes.

wi ndow. external . msSi t eModeSet I conOver l ay( I mages/ i nf o.i co);

To clear an overlay icon rom the Taskbar button, you will use the

msSiteModeClearIconOverlay method.

wi ndow. external . msSi t eModeCl ear I conOver l ay();

impm Fash askbar cos

Perhaps you have an instant messaging program which fashes the taskbarbutton when a new message comes in? Flashing taskbar buttons are used

to signal users that their attention or interaction is needed.

Pinned sites can make their taskbar buttons fash as well. To fash the

pinned site taskbar button, use the msSiteModeActivate method.

wi ndow. external . msSi t eModeAct i vat e();

This will cause the taskbar button o the pinned site to start fashing.

It will fash 20 times, and then the button will stay highlighted until thewindow comes to the oreground.

When the pinned site window comes to the oreground, the fashing

will deactivate automatically.

Here i s a compl et e sampl e:

// Fl ashi ng TaskBar

setInterval(ashToolbar, 10000); // calls ash-

Tool bar ever y 10000 ms

function ashToolbar() {

i f (wi ndow. exter nal . msI sSi t eMode()) {

wi ndow. ext er nal . msSi t eModeAct i vat e();

}

}

impm thmba oobar cos

When you hover the mouse over a Taskbar button o a running application or

website, a thumbnail pops up. This is a little image o the running window.

With pinned sites, you can create thumbnail toolbar buttons, which are

small buttons that will display directly under the thumbnail in that popup.


45/97


Here is one example, rom the site http://

www.jango.com.

Jango is a site with ree streaming

music. When you play music rom thesite and hover over the taskbar button, a

thumbnail pops up with two thumbnail

toolbar buttons, to pause the music and

to skip to the next song.

This is a really cool eature. You can be

doing your work and have Jango playing

in the background, and i a song comes onthat you dont like, simply hover over the Jango Taskbar button and then

click the Next button on the thumbnail toolbar. you dont even have to

bring up the main Jango window! Thumbnail toolbars let you interact with

the site without having to restore or activate the sites window.

You can have a maximum o 7 buttons in a thumbnail toolbar.

You can implement thumbnail toolbar buttons in your pinned sites using

JavaScript. First, add a thumbnail toolbar button using msSiteModeAd-dThumbBarButton. This takes two parameters a link to the icon resource

le (*.ico) and a button name or description, which is displayed as a tooltip

on hover. It then returns an integer identier o the new button. In the code

snippet below, well add a Next button.

bt nNext = wi ndow. ext er nal . msSi t eModeAddThumbBar But t on(

I mages/next. i co, Next );

Then, you need to set up an event handler to react when that buttonis clicked. Use the addEventListener method which takes three param-

eters: the event type to respond to (you should use msthumbnailclick

or this), the event handler unction to associate with the event, and a

Boolean value that speciies to add the event handler or the capturing

or bubbling phase o the event (true is the capturing phase and alse is

the bubbling phase).

document . addEvent Li st ener( mst humbnai l cl i ck, onThumb-nai l But t onCl i cked, f al se);

Next, enable the thumbnail toolbar using msSiteModeShowThumbBar.

wi ndow. ext er nal . msSi t eModeShowThumbBar( );

Then, you need to update the button(s) using msSiteModeUpdateThumb-

BarButton and make visible the individual buttons. For each button, you would

call this method, passing in the button ID that we got rom msSiteModeAd-


46/97


dThumbBarButton, a Boolean value on whether the button should be enabled,

and a Boolean value on whether the button should be visible. In the code below,

well make our Next button enabled and visible.

wi ndow. ext er nal . msSi t eModeUpdat eThumbBarBut t on( bt nNext ,t r ue, t r ue);

Finally, you can optionally add button styles using msSiteModeAd-

dButtonStyle and show the button styles using msSiteModeShowButton-

Style. This is useul i you have a play/pause button like the Jango example

above. This is a single button that toggles between two states when the

music is playing, its a Pause button, and when the music is paused, its

a Play button. You could dene a Play style and a Pause style, andthen just swap styles on the button when appropriate. The msSiteMode-

AddButtonStyle method takes 3 parameters: the button ID that we got

rom msSiteModeAddThumbBarButton, the URI to the icon resource le

(*.ico), and an optional description o the button. It then returns the ID o

the new button style. The msSiteModeShowButtonStyle method takes 2

parameters: a button ID and a style ID, to apply the specied style to the

specied button. st yl ePl ay = wi ndow. external . msSi t eModeAddBut t onSt yl e( bt nPl

ayPause, pl ay. i co, Pl ay );

st yl ePause = wi ndow. external . msSi t eModeAddBut t onSt yl e( bt nP

l ayPause, pause. i co, Pause );

// I ni t i al l y, make i t a pl ay but t on.

wi ndow. external . msSi t eModeShowBut t onSt yl e( bt nPl ayPause,

st yl ePl ay);

How o prov scovraby?You have seen how Pinned Sites can provide a more interactive experience

or your users; however, your users might not know that your site can be

pinned. In this section, you learn some ways to advertise the eatures o

your Pinned Site.

It is important to realise that Windows Internet Explorer 9 doesntnotiy a user i the site can be pinned. Its up to the developer to advertise

these eatures.

The ollowing are just a ew o the variety o ways you can alert your

users to the Pinned Site eatures o your web site.

Fly-ins, drop-downs, banners, and div eects. These regions detect the

Pinned Site capabilities o the browser and ask the user to pin the site.


47/97


Drag-to-pin icons and images. Users can pin the site by dragging any

image that you provide to the taskbar.

First run experience. You can easily detect when the user pins the

site or the irst time. This is a great opportunity to call attention to thespeciic eatures o your Pinned Site.

SmmaryWeb sites that implement the Pinned Site can eel more like a native Win-

dows application. Site developers can build a more compelling web site that

have higher engagement by:

Declaring a static list o tasks or ast navigation to common destina-tions within a site.

Creating a dynamic list o destinations that are personalized and rel-

evant to the user.

Drawing the user back to the website by lashing the taskbar button or

displaying a icon overlay or notications

Adding remote controls and commands to the taskbars preview window.

Making the browser look and eel like your site by changing the coloro the Back and Forward buttons.

Promoting a high-resolution site icon that extends your sites brand

outside the browser.


48/97

Implementing site pinning takes less than an hour!For details, go to buildmypinnedsite.com


49/97

49

Chapter #5

CSS 3.0Weve seen about content markup so

ar. With emergence o HTML5, you

need to look at the latest style guidelines

specied in CSS 3.0

IntroductionCascading Style Sheets (CSS) is a simple mechanism or adding style (e.g.,

onts, colors, spacing) to Web documents. Cascading Style Sheets is ormally

described in two specifcations rom W3C: CSS1 and CSS2. CSS1 describes asimple ormatting model mostly or screen-based presentations. CSS1 has

around 50 properties . CSS2 includes all CSS1 properties and adds around

70 o its own. CSS3 now introduces modules. The advantage is that modules

allows the specication to be completed and approved in segments.

It is important to note that many CSS3 modules are still in the Working

Drat or Last Call stages. Until they reach the Candidate Recommendation

stage, they could change specication.

CSS 3.0 ModulesIn this section, we will explore in-detail some o the new CSS modules.

CSS3 Backgrounds and Borders Module

This was one o the most requested CSS module compliance. Previously, web


50/97

50 CSS 3.0

developers had to use complicated techniques involving multiple images or

tables to create the appearance o rounded corners on layout boxes.

Notable enhancements rom this module include new support or the

background-clip, background-origin, and background-size properties, inaddition to support or the Border-Radius and box-shadow property.

Border radius

The border-radius property is a composite property that speciies up

to our border-radius properties. I values are given beore and ater

the slash, the values beore the slash set the horizontal radius and the

values ater the slash set the vertical radius. I there is no slash, thevalues set both radii equally. The our values or each radii are given

in the ollowing order: top-let, top-right, bottom-right, bottom-let. I

the bottom-let value is omitted, the value is the same as the top-right

value. I the bottom-right value is omitted, the value is the same as the

top-let value. I the top-right value is omitted, the value is the same as

the top-let value.

bor der - r adi us: r adi us | per cent agevariable o type String that specifes or receives one or two radius values.

radius

A foating-point number, ollowed by either an absolute units designator

(cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For

more inormation about the supported length units, see Values and Units.

percentage

An integer, ollowed by a %. The value is a percentage o, or horizontal radii,the width o the border box, or, or vertical radii, the height o the border box.

Example:

bor der - r adi us: 50px 50px 0 0 / 25px 25px 0 0;

The border-radius also has the ollowing properties:

border-top-let-radius: Deines the upper-let corner o a box.

border-top-right-radius: Deines the upper-right corner o a box.

border-bottom-right-radius: Deines the lower-right corner o a box. border-bottom-let-radius: Deines the lower-let corner o a box.

Example

border-top-let-radius: 50px 25px;

border-top-right-radius: 50px 25px;

border-bottom-let-radius: 15px 30px;

border-bottom-right-radius: 15px 30px;


51/97

51CSS 3.0

Shadows

Drop shadows are enabled

by the box-shadow prop-

erty. Like rounded corners,drop shadows in Internet

Explorer 9 are very robust;

there are several options

you can speciy. The order

o values within the box-

shadow property is as ol-

lows:box- shadow: hof f

vof f bd sd col or i nset ;

hof f indicates the hori-

zontal oset. This length value is required. It speciies how ar to the

right (positive value) or let (negative value) the shadow extends. See

the ollowing diagram or a visual explanation; ho is set to 20 pixels.

vof findicates the vertical oset. This length value is required. It speci-ies how ar down (positive value) or up (negative value) the shadow

extends. vof f 20 pixels.

bd indicates the blur distance. This positive length value indicates how

blurred the shadows edge is the approximate length between the start

o the blur and the end. The higher the value, the more blurred it is. See

bd is set to 30 pixels.

sd indicates the spread distance. This length value indicates how muchthe shadow shape expands in all directions (positive value) or contracts

(negative value). Beyond the dimensions o the original shape sd is set

to 30 pixels. The original oset border box shape is shown with a dotted

line so you can better visualize the spread, which begins at the original

oset box border.

col or indicates the color o the shadow.

i nset indicates the shadow is an inner shadow instead o an outershadow. The irst two values are

required or the property to work,

and all values must be speciied in

the order listed. I a color is not speci-

ied, Internet Explorer 9 uses black

as the shadow color.


52/97

52 CSS 3.0

CSS3 2D transforms

CSS3 2D Transorms module, which enables elements that are rendered

by CSS to be transormed in two-dimensional space. 2D transorms are

currently supported using the ollowing Transorms properties: The -ms-transorm property applies a two-dimensional transormation

unction to an element. It contains a list o one or more transormation

unctions. Internet Explorer 9 supports all the transormation unction

specifed in the CSS3 2D Transorms module Working Drat (dated-

December 1, 2009).

The ollowing transormation unctions are used with the -ms-transorm

property: The mat r i x(a, b, c, d, e, f ) unction speciies a 2D transormation in the

orm o a transormation matrix o six values (a through ).

Thet r ansl at e(t x,[t y]) unction speciies a 2D translation by the vector

[tx,ty], where tx is the irst translation-value parameter and ty is the

optional second translation-value parameter. I ty is not speciied, its value

is zero. (Translation-value parameters can be either percentages or lengths.)

The t r ansl at eX( t x) unction speciies a translation by the givenamount in the x direction.

The t r ansl at eY( t y) unction speciies a translation by the given amount

in the y direction.

The scal e(sx,[sy]) unction speciies a 2D scale operation by the [sx,sy]

scaling vector that is described by the two parameters. I the second

parameter is not provided, it takes a value equal to the rst.

The scal eX(sx) unction speciies a scale operation by using the [sx,1]scaling vector, where sx is given as the parameter.

The scal eY(sy) unction speciies a scale operation by using the [1,sy]

scaling vector, where sy is given as the parameter.

The r ot at e(angl e) unction speciies a 2D rotation by the angle speci-

ied in the parameter about the origin o the element, as deined by the

transorm-origin property.

The skewX( ax) unction speciies a skew transormation along thex-axis by the given angle.

The skewY(ay) unction speciies a skew transormation along the y-axis

by the given angle.

The skew( ax,[ay]) unction speciies a skew transormation along

the x- and y-axes. The irst angle parameter speciies the skew on the

x-axis. The second angle parameter speciies the skew on the y-axis. I


53/97

53CSS 3.0

the second parameter is not given, a value o zero is used or the y angle

(that is, no skew on the y-axis).

The -ms-transorm-origin property establishes the origin o transor-

mation or an element. This property is useul when you want to changethe deault origin (the center). The -ms-transorm-origin property accepts

one or two values. Each value can be a keyword, a length, or a percentage.

I the -ms-transorm-origin property is not

Digit+Ft Html5 Oct2011 Lr

Documents

Transcript of Digit+Ft Html5 Oct2011 Lr