Fluid Academic Final Report Website Planning

Component Screencasts

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