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