HTML5: The Coming Sea-change. Are You Ready?

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/html5mnAcknowledgements: 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!

GROUPhttp://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…As of November 2011, we had no Meetups for 18 months. Since then, we have beenmeeting monthly. Here is what group members say about this Meetup group:“ Unless you know everything this is to know about web design and have nothing else to learn, then you shouldcome to this group. This is a great opportunity to not only learn from others, but to share the knowledge you havewith 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. Its the perfect place to keepinformed. ” “ I love how professional and organized this group is. ”“ This was my first Meetup with this group, but Ill try to make it to all of the groups meetings from now on. I like theclear 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. ”

HTML5: LETS EXPLORE IT TOGETHER…Sea-change: a striking change, as in appearance, often for the better. (source: http://dictionary.reference.com/browse/sea+change)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!

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? Which of the following answers do you like better?  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. W3C Says:  HTML5 is the cornerstone of the W3Cs 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/) WHATWG:  HTML5 is just a nickname/buzzword. It‟s a marketing term coined by W3C.  HTML specification is a living document.

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 Mid - Late Lost Decade Future Is 1990‟s 1990‟s 2000 - 2010 NOW!• Client/Server ruled • Magic potion • Web Standards? What • Dark-side has lostthe world. Thick clients discovered: The Web standards? the battle, or so itare everywhere! • Many more hundreds seems! • Hundreds of Billions of Billions invested in • HTML5 or HTML• Billions invested in invested in building building websites with specification is still inreplacing mainframe websites with whole lot dynamic CMS Content, draft mode, and mayapps with Desktop- of Static Content, and lots of hacks and never be finalizedbased apps some CGI. workarounds • Major browser • And HTML5 spec is platforms are• Islands of • Supposedly born. Hope is to return continuously addinginformation created “Mainframe is dying” the web back to its support for many ofacross departments open roots. the HTML5 features • “Smart” Mobile devices are everywhere!

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 DOCTYPEDOCTYPES: Pre-HTML5  You are one of lucky ones if you didn‟t DOCTYPES: HTML5 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!

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 View this presentation online at… http://bit.ly/minnebar7 Ketan Kakkad Phone: 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

http://www.techgig.com	218
http://www.linkedin.com	3
http://115.112.206.131	1

HTML5: The Coming Sea-change. Are You Ready?

by Adaptive Portal - Web Applications: Built to Last, Engineered to Perform, Designed to Adapt!

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 222

Statistics