View
5.578
Download
5
Category
Preview:
Citation preview
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
Recommended