Hannon Hill Services Trainer Uzo Okafor will discuss the significance of HTML5 as it relates to web content management--specifically its implications for mobile and tablet content consumption. He will give us cases in Cascade Server and provide best practices in using HTML5. He will also talk about the HTML5 support improvements released with Cascade Server 7.0.

1. HTML5 IN CASCADE
BY UZO OKAFOR

2. OUTLINE
• HTML5
• What is it?
• Where is it?
• Who’s using it?
• Evolution of HTML5 in Cascade 7
• Demos
• Video insertion into catalog
• Audio podcast library
• Q&A

3. ANYBODY REMEMBER THIS?
• Yeah, I don’t either.

4. BUT WHAT IS HTML5?
• The modern era of web design
• Focus on rich media
• Not just about text, but about the experience and
interactivity

5. TRENDS IN HTML5
• Sales of HTML5-compatible smartphones could triple
from 336 million in 2011 to 1 billion+ in 2013
• Why has it emerged?
• But what about Flash?
• Search for it in your Google Play store
• Adobe’s stance on HTML5 in relation to Flash

6. TALKING ABOUT FLASH…
• Embed code
• Site example

7. TRENDS IN HTML5
• Mobile design
• Ability to design for mobile in CSS
• Orientation, screen width/height, etc.
• Broad support across mobile devices

8. RESPONSIVE DESIGN
• Mobile first
• Screen viewing by device type and resolution
• Example: <link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href=”style.css" />
• Scalable design (fluid, fixed)

9. WHAT CAN HTML5 DO FOR YOU?
• Browser-specific support
&lt;!--[if lt IE 9]&gt;
&lt;scriptsrc=&quot;js/libs/modernizr-
2.0.6.min.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;
• Simpler code
• So long to divs (if you want)
• Section, header

10. TRENDS IN HTML5
• Current clients’ use of HTML5
• 80%+ of our clients who implemented a redesign
with Cascade Server have used HTML5
• UCOP, Sierra College, St. Norbert, SUU
• (live)
• (coming soon)

11. INCREASE IN USAGE
• Case study: Emory
• Nearly 1 million mobile visits in 2-year period from
Summer 2010 to Summer 2012
• 2.66 pages hit per visit
• Yet makes up 4.4% of overall total

12. INCREASE IN USAGE
• Case study: University of Missouri – St. Louis
• 2011-2012: Nearly 220% increase in mobile traffic,
800% increase in iPad traffic

13. CHANGES TO HTML5 COMPATIBILITY IN
CASCADE 7
• Mostly compatible prior to CS 7
• Improved Tidy support
• New block-level tags supported
• New inline-level tags supported

14. BLOCK-LEVEL TAGS
• Fully supported in Cascade Server 7
• article, aside, audio, source, canvas, command,
menu, datalist, details, summary, option, embed,
figure, figcaption, footer, header, hgroup, keygen,
meter, nav, progress, ruby, rt, rp, section, and video

15. INLINE TAGS
• Fully supported in Cascade Server 7
• abbr, mark, link, output, time, and wbr

16. VIDEO TAGS SUPPORTED
• Width/height
• Controls – Player icons visibility
• Poster – Placeholder image
• Autoplay
• Preload
• Loop
• Supported types: ogg, webm, mp4
• Default player will look different in different browsers

17. 1 VIDEO, 2 BROWSERS
Chrome Firefox 14

18. A WORD ABOUT CODECS…
• Codec support is critical – test in multiple browsers!
(Codecs are compression “software” programs associated
with encoding/decoding audio and video
Examples include h.264, OggVorbis, etc. for video and MP3
and WAV for audio)

19. AUDIO TAGS
• Autoplay
• Controls
• Loop
• Preload
• Src

20. WYSIWYG EDITOR

22. DEMO TIME: VIDEO IN CASCADE

23. VIDEO DEMO
GOAL APPROACH
• Video-accessible site • Take advantage of
across multiple HTML5 video/audio
platforms tags
• Decreased page load • Include minimal code
times in Velocity formats
• On-the-go video
viewing

24. RESULTING PRODUCT
VIDEO CATALOG

25. DEMO TIME: AUDIO IN CASCADE

26. AUDIO DEMO
GOAL APPROACH
• On-the-go audio • Have files stored and
listening be able to link to them
• Robust yet simple way • Leverage HTML5 audio
to play audio files tags to include from
• Add a central page for Cascade
storing, showing, and
playing audio podcasts

27. RESULTING PRODUCT
PODCAST MANAGEMENT CATALOG

28. QUESTIONS?
•What are the next frontiers?
•How are you using HTML5?
•If not, have you considered it?

29. THANK YOU!
[Me]
Uzo Okafor
uzo@hannonhill.co
m