Prof. Erwin M. Globio

<overview>

• There’s a lot of information on the web• Most of that information is text/html• Most (>95%) of that HTML is syntactically

invalid

<introduction>

• New version of HTML• Initial work by the WHATWG (web Hypertext

Application Technology Working Group (2004)• People involved are Apple, Mozilla, Opera, Google

are the major contributors• Work-in-progress recently adopted by the W3C

(2007)

<conclusion>

• HTML is important and isn’t going away any time soon• We should evolve HTML rather than ditch it• But the vast legacy creates problems• HTML 4 – 1997

– Underspecified– Inconsistent– Does not match reality– Missing features needed to compete with propriety technologies (Flash,

Silverlight, etc.)• XHTML 2

– Requires XML– Not backward compatible (cannot be implemented in current browsers)

hypertextmarkup

language

html5

AGENDAWhat is HTML5? Does it include CSS3Why has HTML5 been developed?Which is better for designers—HTML5 or FLASH?What now lies ahead for FLASH and HTML5?Why HTML5?What does HTML5 mean to Web designers?

WHY HAS HTML5 BEEN DEVELOPED

• To address issues inherent to HTML/XHTML allowing web to move forward.

• Attempts to provide the tools to support the new levels of interaction users demand

• To address the different places on the web

The story… 2009-07-02

Today the Director announces that whenthe XHTML 2 Working Group charter expires asscheduled at the end of 2009, the charter will not

be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C

hopes to accelerate the progress of HTML 5 and clarify W3C's position regarding the future of

HTML. A FAQ answers questions about the future of deliverables of the XHTML 2 Working Group, and the status of various discussions related to

HTML.

W3C

HTML5 and CSS 3

What is new anyway?

What are the features…HTML5

• Revised and improved semantics including section Tags• audio, video tags and API to direct HTML embedding• canvas element for scriptable graphics rendering on the fly• Native drag and drop API• Local storage support to make applications even more• desktop-like• Cross-document messaging• Geo Location API: especially important for mobile applications

http://html5gallery.com/

http://wave.google.com/

What are the features…CSS3

• Extended set of selectors such as :first-of-type or :last-of-type

• Enhanced support for background and border• Flexible Box Layout• Multi-Columns and Templates native support• 2D and 3D Transformations• Transitions and Animations• Media Queries

The obvious question…

What the hell do we need

HTML5?

“HTML 5 will enable better cross-browser compatibility and better support for ‘Web 2.0-style’ Web applications in addition to documents.”

Brendan EichCTO, Mozilla

HTML5 will have an

application cache that is capable of storing all resources in your

Web app so that the browser can load them and use them even

when you’re offline

HTML5 enables

mobile and desktop Web site designers to deliver the advantages of client-side and server-side development to their users simultaneously.

API development and

workability in the browsers will take a leap forward.

Problems…

• Not backwards-compatible? • extensible? - questionable• <P> = <p> ...and... <div class=”foo”> = <DIV

class=foo> meaning not that strict• removal of certain tags—like <acronym>• removal of access keys? This could set back

the usability/accessibility of markup (or, there could be good reasons for doing this)

What does HTML5 mean to Web designers?

• new tags for semantic layout• improved micro-formatting• new tags for incorporating rich media• new tags for APIs, applications

What about browser support?

• Opera 9.x (supposedly) offers best support• Safari 3.x - sketchy (best support in my

experience)• Firefox 3.x - sketchy• Chrome? - sketchy• IE8 - veeerrrry sketchy• IE7 - nope• IE6? (LOL!)

New Tags<article><aside><audio><canvas><command><datagrid><datalist>

<datatemplate><embed><event-source><figure><footer><header><mark><meter>

<nav><nest><output><progress><source><time><video>

The doctype

<!DOCTYPE HTML>

HTML5

The doctype

Html/xHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

">

The structure…<!DOCTYPE HTML><html lang="en"><head><meta charset="UTF-8"><title>HTML5</title></head><body></body></html>

HTML5

div=”header”

div=”nav”

div=”footer”

div=”article” div=”sidebar”

div=”section”

The layout

Html/xHTML

The layout

HTML5

<header>

<nav>

<footer>

<article> <aside>

<section>

What does it all mean?• It’s a work in progress• It’s going to be awhile before we’re using

HTML5• It may turn up in mobile browsers first• HTML5 will lead to browser-based apps that

are more powerful and more responsive

WHICH IS BETTER FOR DESIGNER –

HTML5 OR FLASH?• Interactivity• Client-side data rich application• Games

WHAT NOW LIES AHEAD FOR

HTML5 AND FLASH?

This is all for you to

contemplate…

Useful Websites

• http://erwinglobio.wix.com/ittraining

• http://ittrainingsolutions.webs.com/

• http://erwinglobio.sulit.com.ph/

<Thank you!>Prof. Erwin M. Globio, MSIT

IT Training SpecialistMobile Number: 09393741359

09323956678Email Address: erwin_globio@yahoo.com

Skype Id: erwinglobio