![Page 1: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/1.jpg)
BY UZO OKAFOR
HTML5 IN CASCADE
![Page 2: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/3.jpg)
ANYBODY REMEMBER THIS?
• Yeah, I don’t either.
![Page 4: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/4.jpg)
BUT WHAT IS HTML5?
• The modern era of web design• Focus on rich media• Not just about text, but about the experience and
interactivity
![Page 5: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/5.jpg)
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
![Page 6: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/6.jpg)
TALKING ABOUT FLASH…
• Embed code• Site example
![Page 7: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/7.jpg)
TRENDS IN HTML5
• Mobile design• Ability to design for mobile in CSS• Orientation, screen width/height, etc.• Broad support across mobile devices
![Page 8: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/8.jpg)
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)
![Page 9: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/9.jpg)
WHAT CAN HTML5 DO FOR YOU?
• Browser-specific support
• Simpler code• So long to divs (if you want)• Section, header
<!--[if lt IE 9]><script src="js/libs/modernizr-2.0.6.min.js"></script><![endif]-->
![Page 10: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/10.jpg)
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)
![Page 11: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/11.jpg)
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
![Page 12: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/12.jpg)
INCREASE IN USAGE
• Case study: University of Missouri – St. Louis
• 2011-2012: Nearly 220% increase in mobile traffic, 800% increase in iPad traffic
![Page 13: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/13.jpg)
• 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
![Page 14: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/14.jpg)
• 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
![Page 15: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/15.jpg)
• Fully supported in Cascade Server 7
• abbr, mark, link, output, time, and wbr
INLINE TAGS
![Page 16: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/16.jpg)
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
![Page 17: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/17.jpg)
1 VIDEO, 2 BROWSERS
ChromeFirefox 14
![Page 18: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/18.jpg)
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)
![Page 19: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/19.jpg)
AUDIO TAGS
• Autoplay• Controls• Loop• Preload• Src
![Page 20: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/20.jpg)
WYSIWYG EDITOR
![Page 21: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/21.jpg)
![Page 22: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/22.jpg)
DEMO TIME: VIDEO IN CASCADE
![Page 23: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/23.jpg)
• 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
![Page 24: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/24.jpg)
Drag picture to placeholder or click icon to add
V I D E O C ATA LO G
RESULTING PRODUCT
![Page 25: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/25.jpg)
DEMO TIME: AUDIO IN CASCADE
![Page 26: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/26.jpg)
• 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
![Page 27: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/27.jpg)
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
![Page 28: HTML5 Trends + Cascade Server CMS by Uzo Okafor](https://reader036.vdocument.in/reader036/viewer/2022062418/5564d954d8b42ad9498b510f/html5/thumbnails/28.jpg)
QUESTIONS?
•What are the next frontiers?•How are you using HTML5?•If not, have you considered it?