What is the big deal about HTML5


Published on

Why is HTML5 a big deal?
Can you compare HTML5 and Flash?
When do you use HTML5 and When do you Flash?

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Design Principal #2 Compatibility • Pave the cow paths • Degrade gracefully • Research common behavior; solve real problems • Support existing content • Evolution not revolution • Don’t reinvent the wheel (or at least make a 16 better one!) Design Principal #3 Utility • Priority of Constituencies: o When in doubt… value users over authors, over implementers (browsers), over specifiers (W3C/WHATWG), over theoretical purity. • Secure by design • DOM consistency (HTML5 and XHTML5) • Separation of presentation and content Design Principal #4 Interoperability • Specify well-defined behavior o Specific instead of vague • Handle errors well o Improved and ambitious error handling plans o Prefer graceful error recovery to hard failure • Avoid needless complexity o Simple is better Design Principal #5 Universal Access • Support for all world languages o For example, <ruby> (Ruby annotations, used in East Asian typography) • Accessibility o Support users with disabilities o Web Accessibility Initiative (WAI) Accessible Rich Internet Applications (ARIA) o WAI-ARIA roles can be added today 24 o Supported by screen readers
  • So now that we’ve given you the background of HTML5, some of its features, and implications for the future of web development, how can you apply it in a practical situation? Developers need to ask: How is my site going to be used? Is search engine traffic an important part of my business model? If you answer “yes” to this question, a Flash-based website is out of the question. The reason? Search engines cannot parse any content inside a Flash “movie” (well, ALMOST none) and probably won’t be able to for the forseeable future. Not all HTML-based websites are necessarily search-engine friendly, but if you hope to get traffic from Google, Yahoo, MSN, and Ask eventually, you’ll need to start with an HTML-based website. 2) How will my site be accessed? If so, you’ll probably want to go with an HTML-based site. The increasing prevalence of broadband lines (and access to even higher speeds in a typical corporate environment, like T1 or T3) makes Flash a more appropriate option for a much wider variety of sites than it used to be. But it still takes, on average, 5-10 times as long for a Flash-based website to load as one based in HTML, simply because the file size is necessarily high to accommodate all the bells and whistles that go along with it. Users on a slower connection won’t appreciate the longer download time, and may click to another website before yours even loads. 3) Is the feel of the user experience absolutely critical to my product or service? Fashion companies, high-end real estate developers or agents, art & design professionals, and young or high-end retail brands are just a few of the industries for whom user experience can make or break their website, so it would make sense to go with Flash. For these companies, word of mouth traffic is far more important than search engine traffic, where the only search terms these companies really need to show up for is their own name, or the name of their product. This limited amount of search engine optimization (SEO) can be done fairly easily without compromising the design. 4) How often will my site need to be updated? If you think you’re going to be adding pages, changing copy around, or building out new sections of your website fairly consistently (say, more than 3-4x a year), you should stay away from Flash. Even for the most experienced Flash programmer, building out new pages & sections can be very time-consuming (and thus very expensive for you). Once an HTML layout is set up, any new content can be dropped in fairly easily. In summary, HTML is relatively scalable, while Flash is relatively UN-scalable. 5) How much content do I have? If you’ve got a bunch of content (more than 20-30 pages), a Flash website may be not only file-size prohibitive, but cost-prohibitive. The three Flash websites I cited above either have a ridiculous ad budget (Rolex/Nike) to spend on huge sites, or a talented in-house team of designers (SOM). For small businesses, this often means HTML is the way to go.
  • Function – HTML5 provides native support for many features that were only possible with plugins or complex hack so Plugins may not be installed Plugins can be disabled or blocked (iPad does not ship with Flash plugin) Plugins are a separate attack vector Plugins are difficult to integrate with the rest of an HTML document (plugin boundaries, clipping, and transparency issues) Plugins are crash prone Experience – Function –If your site’s core function is in the content you publish, then the interface should take a back seat. Make an interface that’s transparent and not distracting to use. Consider developing with function as the centerpiece when content is the primary focus – news sites, blogs, research sites, etc. Experience – consider developing with “user experience” when you really want to make an impression – launching a new product, the marketing division of a company, building “buzz”, when you want to tell your story
  • What is the big deal about HTML5

    1. 2. <ul><li>This presentation was provided by </li></ul><ul><li>Monica Goetz Rasha Proctor Jojaine Segura </li></ul><ul><li>Letitia Gutierrez Adrian Bretato </li></ul><ul><li>Digital Media Management-MBA students </li></ul><ul><li>St.Edwards University </li></ul><ul><li>Austin, TX </li></ul><ul><li>Thanks to all the great resources that allowed us to put together </li></ul><ul><li>this project and learn all about HMTL5. Some of these resources </li></ul><ul><li>are: </li></ul><ul><li>Focus.com, W3.org, Facebook.com, Att.com, Mashable.com, </li></ul><ul><li>DaleStephanos (image), Petter Lubbers and others. </li></ul>
    2. 3. Agenda <ul><li>Brief background on HTML 5 </li></ul><ul><li>Explain HTML 5 </li></ul><ul><li>Mobile and business players </li></ul><ul><li>Address HTML 5 vs. Flash debate </li></ul><ul><li>Developer Perspective and User Experience </li></ul><ul><li>Current status and future developments </li></ul>
    3. 4. Brief Background <ul><li>Core HTML had not been updated since 2000 </li></ul><ul><li>2004 WHATWG presented evidence that HTML could be improved </li></ul><ul><li>W3C adopted HTML 5 and supports WHATWG </li></ul><ul><li>Google’s Ian Hickson editing the HTML 5 standards </li></ul><ul><li>January W3C announced last call for comments May 2011 </li></ul>
    4. 6. What makes HTML5 special? <ul><li>Conformity: </li></ul><ul><ul><li>Standardization of documentation and implementation methods </li></ul></ul><ul><li>Compatibility: </li></ul><ul><ul><li>Forward, backward and current content </li></ul></ul><ul><ul><li>Avoid reinventing the wheel </li></ul></ul><ul><li>Utility: </li></ul><ul><ul><li>End users are #1 priority, not sponsors or organizations. </li></ul></ul><ul><ul><li>Separation of content and presentation (Growing CSS) </li></ul></ul><ul><li>Interoperability: </li></ul><ul><ul><li>Specify well defined behavior </li></ul></ul><ul><ul><li>Abandon complexity for simplicity </li></ul></ul><ul><li>Universal access: </li></ul><ul><ul><li>Support for all world languages </li></ul></ul><ul><ul><li>Open accessibility </li></ul></ul>
    5. 7. Browser Compatibility <ul><li>6/2010 </li></ul>1/ 2011 2/2011 IE 9.0 crows for HTML5 compatibility
    6. 8. Words for Thought… <ul><li>“ The popularity of mobile devices will change,” he said implying that the dominant devices today might not be so dominant in the future. “We want to be consistent on the web and on mobile.” --Bret Taylor, CTO </li></ul><ul><li>&quot;You purchase an app for one operating system, and if you want it on another device or platform, you have to buy it again,&quot; he said. &quot;That's not how our customers expect to experience this environment.“ -- Randall Stephenson, CEO </li></ul>
    7. 9. HTML5 & Mobile Devices– Why? <ul><li>Portability – the device no longer matters. Only the app does. </li></ul><ul><li>Easier adaptation to market changes. </li></ul><ul><li>Reduction of development time/expense – Apps only have to be coded once. </li></ul><ul><li>Proprietary vs. Open Source – Plug-ins no longer required to run apps or videos. </li></ul><ul><li>Ease of development </li></ul>
    8. 10. Flash vs. HTML5 <ul><li>Do they compete?? </li></ul><ul><li>Cost efficient </li></ul><ul><li>Advanced Effects </li></ul><ul><li>Universally Accepted </li></ul><ul><li>Efficiency </li></ul>
    9. 11. Apples 2 Oranges... <ul><li>Can they really compare? </li></ul>
    10. 12. What is my best bet? It depends… function
    11. 13. Function Integration “Write once – run everywhere” Simple is better Content Indexing Experience Immersive, engaging visuals Direct the user’s attention Unparalled first impression Storytelling <ul><li>5 Questions to Ask: </li></ul><ul><li>Is search engine traffic important to my business? </li></ul><ul><li>How are the majority of my customers accessing the site? </li></ul><ul><li>How important is the user experience? </li></ul><ul><li>How often will it need to be updated? </li></ul><ul><li>How much content do I have? </li></ul>
    12. 14. Function
    13. 15. Experience
    14. 16. Current Status and Future <ul><li>Working draft phase </li></ul><ul><li>Formalized standards by 2014 </li></ul><ul><li>Developers create one application can be used across platforms </li></ul><ul><li>Future is wide open for mobile devices </li></ul><ul><li>Potential game changer for how mobile video is consumed </li></ul><ul><li>End of January Google announced YouTube will support video played with HTML 5 </li></ul>
    15. 17. Questions?