/
Fluid Academic Final Report Website Planning

Fluid Academic Final Report Website Planning

Nov 11, 2009

Component Screencasts

Component

Screencaster

Component

Screencaster

Reorder

Colin

Inline Edit

Anastasia

Progress

Justin

Uploader

Jess

Pager

Antranig

UI Options

Michelle

Types of Screencasts

Component Overview

  • Duration: 1-2 minutes

  • Provides a quick overview of the features and benefits of a Fluid component

  • Focus on how the component impacts usability and accessibility

  • Talk about unique and differentiating features: customizability, accessibility, etc.

Integration Tutorials

  • Duration: 5 minutes max

  • Show, in a step-by-step way, how to take an Infusion component and integrate it into a web application

  • If possible, use existing tutorials as the basis for the screencast

Making your Screencast: Getting Started

  • Give the audience a quick introduction of yourself and what you've done on Fluid

    • e.g. "I'm Anastasia and I help coordinate the documentation for Fluid Infusion"

  • Start with the goals: why did we create this component? What problem does it solve? How is it different?

Screencast Themes

Cross-Cutting Themes for All Components

  • Design and accessibility are at the heart of what we do

  • Built to be customized and adapted

  • Easy to integrate into your application

  • Design and development control is in the hands of you, the user

Reorderer

  • Accessibility

    • our goal wasn't just to make drag and drop accessible, it was to build a unique, easy user experience for keyboard users

    • Every action is available to keyboard and AT users, but the interaction is tailor and unique

    • ARIA roles for assistive technology

  • Usability

    • Drag and drop is a family of interactions, which should be tailor for each context

    • Reorderer is optimized for sorting and organizing items within lists, grids, and layouts

    • Really smooth interactions: based on Fitt's Law to help users avoid mistakes

  • Features

    • Different flavours, same code: organize layouts, grids, lists, images

    • Totally customizable: drop marker, avatar, styling, permissions, etc.

    • Reliable: unlike other drag and drop libraries, the Reorderer is smooth and seamless, ensuring you can never get into an area where something doesn't work or a drop operation fails

Inline Edit

  • Features:

    • Different flavours, same code: simple text, rich text, drop down

    • Super customizable: you choose your editor or form type, styling, labels, tool tip

    • Ability to add Undo support

  • Accessibility

    • Fully controllable with the keyboard

    • ARIA roles available for assistive technologies

    • Works even if you're not using the latest ARIA-compliant AT

Progress

  • Usability

    • Clean design, completely stylable using CSS

    • Customize animations to provide a natural user experience for your application

  • Accessibility

    • Full support for ARIA means it's compatible with assistive technologies

  • Other features

    • Totally customizable: direction, animations, markup and styling

    • Can be easily localized into different languages

Uploader

  • Usability

    • Traditional Web pages make dealing with files really awkward, especially large media: no progress, have to upload one at a time

    • Uploader lets you upload whole batches of files all at once, with an easy user interface for selecting multiple files

    • Rich progress indication: you can see the progress of each of your files, and the batch as a whole

  • Accessibility

    • Fully keyboard navigable

    • Has ARIA, which means it's compatible with many assistive technologies

    • Can degrade gracefully to a plain old HTML file control if needed

  • Other features

    • Customizable: use your own markup, adapt the interface for your application

    • Rich events that you can plug into to add your own actions

UI Options

  • Accessibility

    • UI Options illustrates how we take accessibility to a deeper level with Infusion

How to Create a Screencast

  • On Mac OS X, use Snapz Pro

  • For recording audio, your conferencing headset should be sufficient

  • Suggested resolution: 480 x 360

    • You may want to lower your screen resolution, or choose to caption only a portion of your screen

  • Formats: We need several different formats in order to ensure maximal browser coverage

    • H.264 MPEG-4 for Safari

    • Ogg Theora for FireFox and Chrome

    • YouTube for older browsers (Justin will post instructions on sending your video to YouTube)

  • Captions can be added using a development version of CapScribe Web that Heidi will provide for us

How to convert videos into different formats

To convert a video in different formats you can use a lot of free tools that are available. Some tools will be mentioned here and if you have other good tools you use, please add them to this site.

  • To convert a video into Ogg Theora you can use Firefogg

    • Allows to add rich meta data about the video including licence terms

    • You have to install the Firefox Add-On (and use Firefox)

    • After installing the Add-On you are able to go to http://firefogg.org/ and convert you video into Theora

  • Handbrake is a Open Source, multi platform tool to convert videos

    • Newest version allows to export into MPEG-4, H.264, or Theora (I must have a old version)

  • If you don't want to download a tool or use Firefox and Add-Ons you can use http://www.zamzar.com/

    • This service allows you to convert file you upload or link to online

    • Specify the source, the output format, and email address

    • After conversion you get email with a download link

    • Unfortunately they do not support Theora at this point (if you choose ogg you get a audio file)

    • File size limit is 100 MB

    • For quick and painless conversion