Fluid Academic Final Report Website Planning

Owned by Colin Clark
Last updated: Nov 11, 2009 by Armin KraussVersion comment
4 min read

Component Screencasts

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