13
HTML5??? buzz buzz buzz buzz buzz buzz buzz buzz buzz buzz buzz buzz buzz buzz buzz buzz buzz buzz

HTML5 Presentation

  • Upload
    moxie

  • View
    5.864

  • Download
    0

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: HTML5 Presentation

HTML5???

buzzbuzz

buzz

buzz

buzzbuzz

buzz

buzz

buzz

buzz

buzz

buzz

buzz

buzz

buzz

buzz

buzz

buzz

Page 2: HTML5 Presentation

Now HTML5…

What is that?

Page 3: HTML5 Presentation

HTML5 ~= HTML + CSS3 + JavaScript APIs

Page 4: HTML5 Presentation

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>

Page 5: HTML5 Presentation

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)

Page 6: HTML5 Presentation

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)

Page 7: HTML5 Presentation

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)

Page 8: HTML5 Presentation

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)

• Ogg Theora (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

Page 9: HTML5 Presentation

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 or interactivity (all must be implemented by a developer)

• Limited developer debugging tools

Page 10: HTML5 Presentation

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 architectural needs for large-scale immersive cross-platform applications

Page 11: HTML5 Presentation

Summary

GoodHTML5 has new standards and features that are long overdue

Allows display of multimedia content without need of a plugin

Good and rapidly progressing mobile support

BadSpotty desktop browser support

Complexity creating consistent experiences across platforms

Technical limitations on what can creatively be done

Page 12: HTML5 Presentation

Recommendations

• Still consider separate desktop and mobile experiences

• For HTML-based desktop experiences, consider simplified modular layout for streamlined restyling on mobile platforms

• Don’t expect what has been traditionally executed in Flash or Silverlight to be cost-effective or even possible in HTML

• Clearly understand the target USER and their needs before recommending a technology

• Design for the chosen technology

Page 13: HTML5 Presentation

Related Links• http://www.pcworld.com/article/196670/google_announces_webm_video_format_the_future_of

_html5_video.html

• http://en.wikipedia.org/wiki/HTML5

• http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/

• http://www.html5test.com/

• http://newteevee.com/2010/05/13/hulu-html5-isnt-ready-for-prime-time/

• http://www.htmlgoodies.com/daily_news/article.php/386914/Is-HTML-5-the-Flash-Killer-Its-sure-got-the-potential.htm

• http://slides.html5rocks.com/

• http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/

• http://www.sencha.com/products/touch/