BY UZO OKAFOR

HTML5 IN CASCADE

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

ANYBODY REMEMBER THIS?

• Yeah, I don’t either.

BUT WHAT IS HTML5?

• The modern era of web design• Focus on rich media• Not just about text, but about the experience and

interactivity

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

TALKING ABOUT FLASH…

• Embed code• Site example

TRENDS IN HTML5

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

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)

WHAT CAN HTML5 DO FOR YOU?

• Browser-specific support

• Simpler code• So long to divs (if you want)• Section, header

&lt;!--[if lt IE 9]&gt;&lt;script src=&quot;js/libs/modernizr-2.0.6.min.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;

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)

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

INCREASE IN USAGE

• Case study: University of Missouri – St. Louis

• 2011-2012: Nearly 220% increase in mobile traffic, 800% increase in iPad traffic

• Mostly compatible prior to CS 7• Improved Tidy support• New block-level tags supported• New inline-level tags supported

CHANGES TO HTML5 COMPATIBILITY IN CASCADE 7

• 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

BLOCK-LEVEL TAGS

• Fully supported in Cascade Server 7

• abbr, mark, link, output, time, and wbr

INLINE TAGS

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

1 VIDEO, 2 BROWSERS

ChromeFirefox 14

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, Ogg Vorbis, etc. for video and MP3 and WAV for audio)

AUDIO TAGS

• Autoplay• Controls• Loop• Preload• Src

WYSIWYG EDITOR

DEMO TIME: VIDEO IN CASCADE

• Video-accessible site across multiple platforms• Decreased page load

times• On-the-go video

viewing

• Take advantage of HTML5 video/audio tags• Include minimal code

in Velocity formats

VIDEO DEMO

GOAL APPROACH

Drag picture to placeholder or click icon to add

V I D E O C ATA LO G

RESULTING PRODUCT

DEMO TIME: AUDIO IN CASCADE

• On-the-go audio listening• Robust yet simple way

to play audio files• Add a central page for

storing, showing, and playing audio podcasts

• Have files stored and be able to link to them• Leverage HTML5 audio

tags to include from Cascade

AUDIO DEMO

GOAL APPROACH

Drag picture to placeholder or click icon to add

P O D C A S T M A N AG E M E N T C ATA LO G

RESULTING PRODUCT

QUESTIONS?

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

THANK YOU!

[Me]

Uzo Okaforuzo@hannonhill.co

m