HTML5 IN CASCADE    BY UZO OKAFOR
OUTLINE• HTML5 • What is it? • Where is it? • Who’s using it?• Evolution of HTML5 in Cascade 7• Demos • Video insertion in...
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  ...
TRENDS IN HTML5• Sales of HTML5-compatible smartphones could triple  from 336 million in 2011 to 1 billion+ in 2013• Why h...
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 supp...
RESPONSIVE DESIGN• Mobile first• Screen viewing by device type and resolution  • Example: <link rel="stylesheet" type="tex...
WHAT CAN HTML5 DO FOR YOU?• Browser-specific support   &lt;!--[if lt IE 9]&gt;   &lt;scriptsrc=&quot;js/libs/modernizr-   ...
TRENDS IN HTML5• Current clients’ use of HTML5• 80%+ of our clients who implemented a redesign  with Cascade Server have u...
INCREASE IN USAGE• Case study: Emory• Nearly 1 million mobile visits in 2-year period from  Summer 2010 to Summer 2012• 2....
INCREASE IN USAGE• Case study: University of Missouri – St. Louis• 2011-2012: Nearly 220% increase in mobile traffic,  800...
CHANGES TO HTML5 COMPATIBILITY IN           CASCADE 7•   Mostly compatible prior to CS 7•   Improved Tidy support•   New b...
BLOCK-LEVEL TAGS• Fully supported in Cascade Server 7• article, aside, audio, source, canvas, command,  menu, datalist, de...
INLINE TAGS• Fully supported in Cascade Server 7• abbr, mark, link, output, time, and wbr
VIDEO TAGS SUPPORTED•   Width/height•   Controls – Player icons visibility•   Poster – Placeholder image•   Autoplay•   Pr...
1 VIDEO, 2 BROWSERSChrome             Firefox 14
A WORD ABOUT CODECS…• Codec support is critical – test in multiple browsers!   (Codecs are compression “software” programs...
AUDIO TAGS•   Autoplay•   Controls•   Loop•   Preload•   Src
WYSIWYG EDITOR
DEMO TIME: VIDEO IN CASCADE
VIDEO DEMO        GOAL                    APPROACH• Video-accessible site   • Take advantage of  across multiple          ...
RESULTING PRODUCT  VIDEO CATALOG
DEMO TIME: AUDIO IN CASCADE
AUDIO DEMO        GOAL                     APPROACH• On-the-go audio          • Have files stored and  listening          ...
RESULTING PRODUCTPODCAST MANAGEMENT CATALOG
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
HTML5 Trends + Cascade Server CMS by Uzo Okafor
Upcoming SlideShare
Loading in …5
×

HTML5 Trends + Cascade Server CMS by Uzo Okafor

834 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
834
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • HTML5 use in mobile devices – EmoryPodcasts on the goResponsive design
  • Mobile device vs. HTML5Show a flash-based alternative
  • HTML5 Trends + Cascade Server CMS by Uzo Okafor

    1. 1. HTML5 IN CASCADE BY UZO OKAFOR
    2. 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. 3. ANYBODY REMEMBER THIS?• Yeah, I don’t either.
    4. 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. 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. 6. TALKING ABOUT FLASH…• Embed code• Site example
    7. 7. TRENDS IN HTML5• Mobile design • Ability to design for mobile in CSS • Orientation, screen width/height, etc. • Broad support across mobile devices
    8. 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. 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. 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. 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. 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. 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. 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. 15. INLINE TAGS• Fully supported in Cascade Server 7• abbr, mark, link, output, time, and wbr
    16. 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. 17. 1 VIDEO, 2 BROWSERSChrome Firefox 14
    18. 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. 19. AUDIO TAGS• Autoplay• Controls• Loop• Preload• Src
    20. 20. WYSIWYG EDITOR
    21. 21. DEMO TIME: VIDEO IN CASCADE
    22. 22. 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
    23. 23. RESULTING PRODUCT VIDEO CATALOG
    24. 24. DEMO TIME: AUDIO IN CASCADE
    25. 25. 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
    26. 26. RESULTING PRODUCTPODCAST MANAGEMENT CATALOG
    27. 27. QUESTIONS?•What are the next frontiers?•How are you using HTML5?•If not, have you considered it?
    28. 28. THANK YOU! [Me] Uzo Okaforuzo@hannonhill.co m

    ×