HTML5: THE COMING SEA-CHANGE!

Are You Ready?

AGENDA

Brief Introduction

Minnesota Web Design Meetup group

Explore HTML5: Why we are all here today

Your Journey Begins: Use these online resources to continue your journey…

You may also access video recording of this presentation at… http://bit.ly/html5mn

Acknowledgements:

This PowerPoint deck aggregates content from many different sources. Sources are documented wherever possible.

ABOUT ME

Ketan Kakkad 20+ years in the IT Industry

15+ years in Minnesota

Last 10 years, mostly in the role of Tech Czar managing technology side of things…

Have worked for organizations of all sizes - $10M per year IT spend to $1.5B per year IT spend My strength is in leading initiatives for creating reusable software platforms

Organizer of the Minnesota Web Design Meetup group – http://www.webmn.net

Recently started a new Cloud Computing Meetup group -http://www.meetup.com/MNCloudComputing/

In 2009, betted on the coming sea-change resulting from HTML5/CSS3 and embarked on a journey to create a SaaS/PaaS platform for “Engineered Web Applications” - AdaptivePortal. You already know Web CMS. Think of this as Web CMS+Web Applications+Fine-grained

Security+Multi-tenancy+

Completely Metadata-driven platform with some 20,000 metadata records that dynamically generate everything on-the-fly!

I projected about 18 months from start to commercialization; currently I am off only by about 18 months in my earlier projections!

This is not the right venue to discuss details. Drop me a note if you would like to hear more about it.

WOW!

No really, WOW! I am speechless (for a second)!

I am here today, because I was seeking avenues to increase awareness about the Meetup group I organize.

In seeking feedback, I received a suggestion that I should present a session at the MinneBar7 event.

I signed up for presenting a topic that generated lot of interest at our March Meetup – HTML5.

I thought, I might get an audience of 10 or 20; may be 30 at very best!

So, here I go again… WOW! And Thank You, for joining me today!

GROUP

http://www.webmn.net

• Goal: Network, Share, Learn

• Membership: FREE

• We Meet: Monthly

• Tech Talk: Driven By Members

• Community:

500 members and counting

• Driven By: Profits Passion

• Current Location:

Minneapolis Community College

• YOU: … are the missing

piece of the puzzle. Join Us.

IN THEIR OWN WORDS…

“ Unless you know everything this is to know about web design and have nothing else to learn, then you should come to this group. This is a great opportunity to not only learn from others, but to share the knowledge you have with everyone. ”

“ Wonderful opportunity to learn, grow and create a strong web community. ”

“ This is a group of very knowledgeable professionals who are willing to share. It's the perfect place to keep informed. ”

“ I love how professional and organized this group is. ”

“ This was my first Meetup with this group, but I'll try to make it to all of the group's meetings from now on. I like the clear focus and the sincere interest in sharing information to benefit all. ”

“ I am impressed- always getting together as a community to share insights and ideas is very helpful. ”

As of November 2011, we had no Meetups for 18 months. Since then, we have been

meeting monthly. Here is what group members say about this Meetup group:

HTML5: LETS EXPLORE IT TOGETHER…

If you are new to HTML5:

In this session, I plan to share enough information to get you interested in learning more, and question yourself…

“Why Am I Not Using HTML5

for My Projects?”

If you are an expert, who is already using HTML5

capabilities:

I am hoping to connect with you and possibly learn

few things from your experiences!

Sea-change: a striking change, as in appearance, often for the better.

(source: http://dictionary.reference.com/browse/sea+change)

HTML5: WHEN IS THE RIGHT TIME TO START USING HTML5?

Lets answer this one important question before we go any further.

Instead of answering this question at the end, it is answered here by design. We want you to change your

perspective as we progress through this presentation!

As of March 2012, there are way too many IT Managers, IT Architects, Web Developers and Web Designers

who are arguing that HTML5 specification is still in the “draft” mode, so it is not yet ready for production-

quality software projects (whatever that means)!

These are the same people who check their Facebook, Twitter, LinkedIn or Pinterest the very next moment;

not realizing that ALL OF THE ABOVE are already using HTML5.

Just remember that HTML5 spec at its core, is designed to degrade gracefully if browser doesn‟t support

certain parts of it! It is a replacement of ALL THOSE HACKS and Workarounds that we have wasted our last

decade on!

Before you adopt any features of HTML5, simply go to http://www.html5please.com and look at their

recommendation – i.e. “Use… Avoid” and everything in-between.

HTML5: WHAT IS IT?

W3C Says:

HTML5 is the cornerstone of the W3C's open web platform; a framework designed to support innovation and foster the full potential the web has to offer.

(http://www.w3.org/html/logo/)

Which of the following answers do you like better?

WHATWG:

HTML5 is just a nickname/buzzword. It‟s a marketing term coined by W3C.

HTML specification is a living document.

Standards-based Platform to build rich internet applications, instead of collection of hacks and workarounds that we have seen in last 10 years or so.

HTML5: MY PERSPECTIVE Does anyone remember Thick Clients? Or Client/Server? IDEs?

Hint: Visual Basic, PowerBuilder, Oracle Forms, Uniface and so on…

If I am not mistaken, within this decade, we will see tools similar to these back again after 20 years of void!

HTML5: MY PERSPECTIVE

With HTML5+CSS3+JavaScript combination, we are getting

there, i.e. becoming thick client. Well, halfway!

Early

1990‟s

Mid - Late

1990‟sLost Decade

2000 - 2010

Future Is

NOW!

• Client/Server ruled

the world. Thick clients

are everywhere!

• Billions invested in

replacing mainframe

apps with Desktop-

based apps

• Islands of

information created

across departments

• Magic potion

discovered: The Web

• Hundreds of Billions

invested in building

websites with whole lot

of Static Content, and

some CGI.

• Supposedly

“Mainframe is dying”

• Web Standards? What

standards?

• Many more hundreds

of Billions invested in

building websites with

dynamic CMS Content,

lots of hacks and

workarounds

• And HTML5 spec is

born. Hope is to return

the web back to its

open roots.

• “Smart” Mobile

devices are everywhere!

• Dark-side has lost

the battle, or so it

seems!

• HTML5 or HTML

specification is still in

draft mode, and may

never be finalized

• Major browser

platforms are

continuously adding

support for many of

the HTML5 features

HTML5: BRIEF HISTORY

Pre-HTML5 Days (pre-2010):

Web standards are a complete mess.

Developers are building web pages using whole bunch of hacks and

workarounds.

W3C – the standards body - seems to be lost, and has no control over

proliferation of non-standard user agents, and proprietary browser plug-ins such

as Flash and Silverlight among others…

2004: WHAT-WG!!

Web Hypertext Application Technology - Working Group is formed to return the

web to its open roots.

Advance HTML for the new age, and replace proprietary technologies such as

Flash, Silverlight and JavaFX.

Define clear specifications for consistent experience across various user agents.

HTML5: BRIEF HISTORY

2007: W3C adopts WHATWG proposal

2008: First draft of HTML5 published

2009: XHTML2 Working Group disbanded in favor of HTML5

………

2012: Friends or foes, it doesn‟t matter! It seems all are aboard the HTML5 train!

WHATWG: HTML Living Standard

http://www.whatwg.org/specs/web-apps/current-work/multipage/

Checkout following link for an interesting presentation on history of HTML5: http://www.slideshare.net/anm8tr/the-history-of-html5

The evolution of the web:

http://evolutionofweb.appspot.com/

HTML5: WHAT’S GOOD ABOUT IT!

Besides a whole bunch of new features in HTML5+CSS3 that you can reference to at end of this presentation… what I like most about it is specification‟s focus on backward compatibility…

HTML5 document conformance requirements should be designed so that web content can degrade gracefully in older or less capable user agents, even when making use of new elements, attributes, APIs and content models.

Capabilities: consistent (someday!), cross-browser, plug-in-free Native media (audio/video)

SVG,

Geolocation,

Advanced JavaScript APIs

Web storage

Web Sockets

And many more…

HTML5: WHAT’S NOT-SO-GOOD ABOUT IT!

“HTML5 specification is in DRAFT mode”

HTML5 is a Living Specification!!

Disagreement among WHAT-WG and W3C, and confusion resulting from it:

Is it really “HTML5” or simply “HTML”?

If spec is never finalized, will browsers be able to keep up with a moving

target?

How do you design a web application that really doesn’t know what all

features the user agents (i.e. browsers) in the wild are capable of handling?

After my presentation, I attended Chris Coyier‟s presentation “What We Don‟t

Know” that mostly answered this question for me. If you haven‟t seen his

presentation, you should find it on speakerdeck.com and also try to find a video

of his presentation – it‟s worth the effort!

HTML5: CAN I USE IT TODAY?

YES: While HTML5 specification is in DRAFT mode, it‟s a living document. Some expect it to be finalized in 2014, while others say it will likely never be finalized!

One way to look at it, HTML5 will not seem very foreign to you if you already know HTML. There are some 28 new tags, and few new techniques, but markup is still HTML.

By adding a small little CSS for some of the new HTML5 tags, you will be able to render HTML5 pages even in legacy browsers! One exception is IE where you will need to add a little JavaScript to make it work in Pre-IE9 versions. You may use HTML5 Shim JavaScript to take care of all of these… http://code.google.com/p/html5shim/

Irrespective of their reasons and agendas, most major vendors have signed-up on the HTML5 bandwagon. So it is here to stay!

Empowers you to dump proprietary tools, plug-ins and technologies and still be able to render rich web applications using HTML markup that you are already familiar with.

Checkout these wonderful resources for specific details on HTML5 support among various browser clients:

http://html5readiness.com/

http://html5please.com/

http://caniuse.com/#cats=HTML5

HTML5: THE DOCTYPE

You are one of lucky ones if you didn‟t know how ugly „doctype‟ got in pre-HTML5 era. It was like having to tame an army of beasts!

With HTML5, you can simply declare doctype as…<!DOCTYPE html>

If an older browser comes across a new or unrecognized doctype, it will simply revert into standards mode (or „strict‟ mode in IE).

When user agent (i.e. browser) is upgraded to a version that recognizes the new doctype, you are already ahead in the game!

YES, it is safe to use

new HTML5 doctype for

all your new projects!

DOCTYPES: Pre-HTML5 DOCTYPES: HTML5

HTML5: THE MARKUP

Source: http://orderedlist.com/resources/html-css/structural-tags-in-html5/

Tags are much more descriptive than using DIV blocks with #ids.

Closing tags such as </section>, </article> provide much more clarity as compared to </div> everywhere.

Can be used even with older browsers by simply adding some simple CSS to declare these new tags as display:block;

And it can be supported in IE as far back as IE6 with help of some simple JavaScript code. The “HTML5Shiv” javascript takes care of this.

What happens if JavaScript is disabled in IE??

YES, it is safe to use

new HTML5 markup for

all your new projects!

HTML5: THE MARKUP DESCRIBED section – Used for grouping together thematically-related content. Sounds like a div

element, but its not. The div has no semantic meaning. Before replacing all your div‟s with

section elements, always ask yourself, “Is all of the content related?”

aside – Used for tangentially related content. Just because some content appears to the left

or right of the main content isn‟t enough reason to use the aside element. Ask yourself if the

content within the aside can be removed without reducing the meaning of the main content.

Pullquotes are an example of tangentially related content.

header – There is a crucial difference between the header element and the general

accepted usage of header (or masthead). There‟s usually only one header or „masthead‟ in

a page. In HTML5 you can have as many as you want. The spec defines it as “a group of

introductory or navigational aids”. You can use a header in any section on your site. In fact,

you probably should use a header within most of your sections. The spec describes the

section element as “a thematic grouping of content, typically with a heading.”

nav – Intended for major navigation information. A group of links grouped together isn‟t

enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a

nav element.

footer – Sounds like its a description of the position, but its not. Footer elements contain

information about it‟s containing element: who wrote it, copyright, links to related content,

etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also

have footer within sections.

Source: http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-

sound/

HTML5: USING CANVAS

Canvas is part of the HTML5 API and

allows you to draw shapes, animations

and images on a web page.

I don‟t have much experience with

canvas, yet!

Examples from… http://www.flobii-

cc.com/2011/07/how-to-use-html5-

canvas.html

HTML5: WEB APPLICATIONS NOT WEB PAGES HTML Forms: Are you getting them hand-coded with legacy HTML code + JavaScripts?

Will you have resources to re-write all those forms when HTML5 Forms are widely supported?

BUT, I ALREADY DO THESE TODAY!

I commonly hear a comment that “…even without HTML5, I already do these

things using legacy HTML syntax and bunch of JavaScripts”.

I have no doubt, you can! But… remember, not everyone is as smart a developer

as you are!

Between a simple description using a standard syntax, and hacks/workaround

to achieve end results, which one will you choose?

Every single line of that extra code you write results in…

More opportunities for bugs to creep-in

More upfront cost to the organization

And much higher cost of maintenance for that extra code you have to write

And, what happens when you leave the project for some more greenbacks, and

the next person in the relay race happens to be an inexperienced developer or

someone with a fabricated resume? (trust me, it happens more often than any

hiring managers would like to admit.)

READY FOR A SHORT DEMO?

Source: http://slides.html5rocks.com/#landing-slide

HTML5: THE FACTS AND THE MYTHS

A bit dated for 2012, but a nice summary:

http://coding.smashingmagazine.com/2010/09/23/html5-the-facts-and-

the-myths/

FEATURES TO ALMOST “DIE FOR”: CSS3 FLEXBOX

Source: http://www.w3.org/TR/css3-flexbox/

DID STEVE JOBS REALLY KILL FLASH?

Misplaced Sense of Pride? Take a look at following from a company that…

(Adobe) Has market capitalization of $16.66B (April 8th 2012). And whose senior management goes around

for years tooting their horn on how great Flash is!

Whose marketing department carries out full page advertisements in Wall Street Journal, New York

Times among other media outlets appealing Steve Jobs to support Flash Player on Apple devices.

But their entire technical team is fast asleep at the steering wheel for almost a decade!

Leaves gazillions of security holes in your system!

The company like Adobe that takes pride in how cool the Flash technology(!) is… produces this? I

mean look at Flash Settings Manager! And to access that piece of junk, you had to go to their

Website until version 10.3???

Don‟t take my word for it! DO TRY THIS AT HOME, ON YOUR BROWSER! If you haven‟t seen this

before, you are in for a big surprise, my friend!

Doesn‟t matter how many PhD‟s and MBAs work for them! They ALL SHOULD BE FIRED!

CAN MY BROWSER DO THAT? REALLY?: CSS REGIONS

Implemented in nightly builds of Chrome, Firefox, Safari and Opera.

MUST WATCH: To see the demo of CSS Regions, skip to 1:53 and play until 1:55 in the following video – http://www.youtube.com/watch?feature=player_embedded&v=zH5bJSG0DZk

FUTURE OF WEB: WHO KNEW?

2004: Microsoft skeptical about adoption of Firefox – a consumer-focused Open Source initiative.

2009: Adobe CEO laughs at the thought of HTML5 becoming a widely supported standard. Claims that it will be decade or more, if then!

2010: Microsoft claims: HTML5 is the future of the web

November 2011: Adobe abandons Flash Player plug-in for mobile browsers, backs HTML5. Adobe says “HTML5 the best solution for creating and deploying content in the

browser across mobile platforms.”

Unless you can afford to ignore all smart phone and tablet users, you should start thinking about replacing your “Flash-based” website and web applications! NOW!

November 2011: Microsoft releases Silverlight 5. Will there be Silverlight 6?

No body knows, but I wouldn‟t be my application on it!

OK, I AM SOLD! WHERE DO I START?

First question you need to answer is… Where do you belong in the food chain?

If you are the worker-bee, …

Best place to start is by using a boilerplate template, use it as a starting point,

and build upon it.

http://html5boilerplate.com/

Watch one of several videos on using HTML5Boilerplate.

My personal favorite is this 60 minute video: http://www.youtube.com/watch?v=qyM37XKkmKQ

If you are “The Decider”

If you are starting a new project… do not waste one more dime on those extra

lines of code for hacks/workarounds!

Irrespective of where you are in the food chain…

Subscribe to HTML5 weekly emails at http://html5weekly.com/

Spend few hours reviewing some of the links/videos referenced on the “HTML5:

Continue Your Journey” slide at end of this presentation.

HTML5: CONTINUE YOUR JOURNEY…

Use http://mediaelementjs.com/ for embedding video in your web application/website

Review Web Applications Field Guide: http://www.html5rocks.com/webappfieldguide/toc/index/

Study tutorials, lessons, demo sites and videos at … http://www.html5rocks.com/en/

http://www.html5rocks.com/en/resources

http://vandelaydesign.com/blog/web-development/learn-html5/

Try this with ANY HTML5 page: http://gsnedders.html5.org/outliner/

Got some time on hand to study specifics of HTML5? Start with this free book - http://www.jesusda.com/docs/ebooks/ebook_manual_en_dive-into-html5.pdf

Adobe Labs has a new “Adobe Edge” HTML5 Design Tool that is currently in beta status. Unless you wish to build some “playground-animation-stuff” I don‟t necessarily

recommend it for building any serious web application project.

It just provides an interesting perspective of the types of tools that we might see in the future – remember that slide on PowerBuilder, Visual Basic, Oracle Forms etc.?

Q&A

Ketan KakkadPhone: 952-250-5386

http://twitter.com/adaptiveportal

Connect with me on LinkedIn: http://www.linkedin.com/in/kakkad

(If prompted, use ketan.kakkad@adaptiveportal.com as email address)

Join us at http://www.webmn.net

View this presentation online at…

http://bit.ly/minnebar7