Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Design, Technology
  • Be the first to comment


  1. 1. HTML5???buzzbuzzbuzzbuzzbuzzbuzzbuzzbuzzbuzzbuzzbuzzbuzzbuzzbuzzbuzzbuzzbuzzbuzz
  2. 2. Now HTML5…What is that?
  3. 3. HTML5 ~= HTML + CSS3 + JavaScript APIs
  4. 4. HTML• Draft Specification of the next iteration of HTML• HTML 4 (1997) and XHTML 1 (2000)• Clearer separation of data and layout/style• Makes what you would already do in HTML easier• New Content Tags• <nav>, <section>, <header>, <article>, <aside>, <summary>• New Media Tags• <video>, <audio>, <figure>• New Dynamic drawing <canvas>graphic tag• A tag that allows programmatic drawing via JavaScript• Inline metadata to help search engines identify content• <span itemprop=“agency”>Moxie Interactive</span>
  5. 5. CSS3• Specification currently under active development since 2005• Improved selectors for determining which content to effect• (good support across modern browsers)• Embeddable font support (TTF, OTF)• Improved text layout with column support• Rounded corners, Reflections (WebKit)• Multiple backgrounds, transforms (rotation, scale, etc), animations(WebKit)
  6. 6. JavaScript APIs• Local data storage• Application Cache (offline access)• Multitasking (Worker processes)• Sockets (real-time server communication: chat, games, etc.)• Native Drag and Drop events• GeoLocation• Lots of active 3rd party libraries (Prototype, jQuery, etc)
  7. 7. The Good News!• Good support on modern mobile devices (iOS, Android)• Simpler, more intuitive syntax• Video and Audio without requiring a plugin• Incremental improvements to previous HTML challenges• Much needed next step in HTML evolution• Creative enhancements: Rounded corners, gradients, text layout• Emergence of more advanced technologies such as O3D (WebGL)• Easier SEO than plugin technologies• Promising Mobile JS Frameworks (Sencha, jQTouch)
  8. 8. The Bad News• The HTML5 spec is DRAFT and is in ongoing development(change)• Video support is not standardized• Not currently a single codec that all browsers will support• Google WebM (VP 8) (open sourced by Google)• OggTheora (open source)• h.264/MP4 (potential licensing issues)• No supported DRM for video or audio• Currently no support for cue points or alpha (transparent) video
  9. 9. The Bad News…Continued• Limited desktop browser support• Only the newest and best have reasonable support• Internet Explorer will not have decent support until IE9• Challenges getting consistent page display across browsers• Graceful page degradation is potentially complex• Currently no designer tools for creating HTML5 animation orinteractivity (all must be implemented by a developer)• Limited developer debugging tools
  10. 10. What HTML5 is NOT• A magic bullet for all your mobile and desktop-to-mobile woes• A replacement for technologies such as Flash or Silverlight• Immersive RLP’s would be much more time consuming• Certain functionality would not be possible or cost-prohibitive• While HTML5 quickly fixes some small-scale HTML issues (video,audio, layout and fonts), it does not instantly solve architecturalneeds for large-scale immersive cross-platform applications
  11. 11. SummaryGoodHTML5 has new standards and features that are long overdueAllows display of multimedia content without need of a pluginGood and rapidly progressing mobile supportBadSpotty desktop browser supportComplexity creating consistent experiences across platformsTechnical limitations on what can creatively be done
  12. 12. Recommendations• Still consider separate desktop and mobile experiences• For HTML-based desktop experiences, consider simplified modularlayout for streamlined restyling on mobile platforms• Don’t expect what has been traditionally executed in Flash orSilverlight to be cost-effective or even possible in HTML• Clearly understand the target USER and their needs beforerecommending a technology• Design for the chosen technology
  13. 13. Related Links•••••••••