sonofbluerobotFront-End Engineering With Standards

Archive for May, 2011

links for 2011-05-27

Posted on: No Comments

links for 2011-05-26

Posted on: No Comments

links for 2011-05-25

Posted on: No Comments

Fun with Old School Mario and css3 transitions

Posted on: No Comments
Old School nes Super Mario atop the pipes!

I’ve been working on some css3 transitions and animations lately, partially because I’m a total frontend freak and partially because html5/JavaScript is going to be used to build full-feature games in the not-so-distant future. I have a raging desire to recreate The Legend of Zelda from the nes and/or Contra and know that css3 can and will be used heavily in such endeavors.

As I was going through some basic examples, I realized that I could start toying around with these notions in my examples, rather than just using basic, default css styles and I came up with this basic example, that is only super awesome because it’s Mario going down the pipe. Simply position your cursor over the Italian Stallion and down he goes! It doesn’t work in ie because it’s entirely css3 based; weak sauce, I know, but lame-browser compatibility was not on my agenda today.

You can view the demo on jsfiddle if you want to play with it.

links for 2011-05-20

Posted on: No Comments

link rel="prefetch" Element

Posted on: No Comments

Prefetch Your Content for a Primed Cache Experience

By Anticipated Preloading and explicitly pre-loading files, docs, resources that are not immediately in use, you give users a primed cache experience.


<link rel="prefetch" href="http://domain.com/pix/of-your-moms/at-my-house.png" />

link rel="prefetch" directs the browser to begin loading the image specified by href="" once the current document has completely loaded. When the user directs to the page (hopefully it’s next, but not necessarily) that has prefetched images, you have one less request necessary to make that page load.

Assistive Technologies

Posted on: No Comments

Assistive Technology or Adaptive Technology refers to assistive, adaptive, and rehabilitative devices for people with disabilites, including the process used in selecting, locating, and using them.

  • Screen Readers - Jaws, VoiceOver, WIndowEyes
  • Screen Magnifiers
  • Captions for Audio and/or Video
  • High Contrast Mode
  • Voice Recognition and Alternative Input

Screen Readers

Screen Readers are software applications developed to interpret what is sent to standard output (displayed on screen usually) and then to display said interpretations to the user in a format accessible to their situation. Possible display implementations are text-to-speech, sound icons, Braille output device to name a few.

Screen Readers are a form of at mostly for users with vision impairments.

Orca

Orca is a free, open source, flexible, and extensible screen reader that provides access to the graphical desktop via speech, braille, magnification and combinations of the three.

Orca supports the Assistive Technology Service Provider Interface (at-spi), which is the primary assistive technology infrastructure for Solaris and Linux operating environments.

Emacspeak

Emacspeak is a speech interface that enables visually impaired users to interact independently and efficiently with the box(es). Audio formatting and full support for acss allows Emacspeak. to produce rich aural presentations of data. Ecmaspeak speech-enables local and remote information via a consistent and well-integrated user interface.

Linux Screen Reader (lsr

The lsr project is an open source effort to develop an extensible assistive technology for the gnome desktop environment.

nvda (NonVisual Desktop Access)

nvda is a free, open source screen reader for Windows (written in Python).

jaws (Job Access With Speech)

jaws is a screen reader for Windows. jaws provides users access to screen information via text-to-speech or Braille display. jaws provides users access to the jaws Scripting Language, which effectively gives them the power to make the most of their Web experience. It is also $1,000, which makes me physically ill, but providing a scripting language to let users customize as they see fit almost makes that ok in my world.

Window-Eyes

Window-Eyes is a Windows screen reader which converts components of Windows into synthesized speech allowing for complete and total access to Windows. Windows-Eyes is a ridiculous $895.00, so you have to pay the price for a second box just to be able to use your current box…on top of whatever disability you have to cope with. Personally, I’ll never recommend Windows-Eyes based on that; moreover, I’ll do everything in my power to deter anyone and everyone interested to find another solution.

VoiceOver

VoiceOver is a screen reader built for os x, enabling access to Macintosh and/or iOS devices (via spoken descriptions) and access to the Mac (via keyboard). VoiceOver not only addresses visually impaired users, it address users with dyslexia.

Screen Magnifier

A Screen Magnifier is software that interfaces with a computer’s graphical output to present enlarged screen content. It is a type of assistive technology suitable for visually impaired people with some functional vision; visually impaired people with little or no functional vision use a screen reader.

The simplest form of magnification presents an enlarged portion of the original screen content, the focus, so that it covers some or all of the full screen. This enlarged portion should include the content of interest to the user and the pointer or cursor, also suitably enlarged.

Screen Magnifiers are common in ranges of 1 – 16, the greater the magnification the smaller the proportion of the original screen that can be viewed; so users will tend to use the lowest magnification they can manage.

Common Features in Screen Magnifiers

  • Color Inversion – Many people with visual impairments prefer to invert the colors, typically turning text from black-on-white to white-on-black. This can reduce screen glare and is useful for those suffering from age-related macular degeneration.
  • Smoothing – Text can become blocky and harder to recognize when enlarged. Some Screen Magnifiers anti-alias or smooth text to compensate.
  • Cursor Customization – The mouse and text cursors can often be modifed in several ways, such as circling it to help the user locate it on the screen.
  • Different Magnification ModesScreen Magnifiers can alter how they present the enlarged portion: covering the full screen, providing a lens that is moved around the un-magnified screen, or using a fixed magnified portion.
  • Screen Reader – Some magnifiers come packaged with a basic screen reader, allowing whatever the user is pointing out to be read alout.

Captions for Audio and/or Video

Closed Captioning is the process of displaying text on a television, video screen or other visual display to provide additional or interpretive information to individuals who wish to access it. Closed Captioning typically show a transcription of the audio portion of a program as it occurs (either verbatim or in edited form), sometimes including non-speech elements.

The term “closed” in closed captioning indicates that not all viewers see the captions—only those who choose to decode or activate them. This distinguishes from “open captions” (sometimes called “burned-in” or “hardcoded” captions), which are visible to all viewers.

Subtitles (captioning) are textual versions of the dialog occuring on the television; Subtitles usually appear at the bottom of the screen, displaying audio content as text.

Television teletext subtitles carry additional sound representations for deaf and hard of hearing viewers; Teletext Subtitle Language follows the original audio, except in mult-lingual countries where the broadcaster may provide subtitles in additional languages on other teletext pages.

High Contrast Mode

High Contrast is an accessibility feature designed to address visual impairments. People afflicted with visual impairment can use High Contrast Color Schemes to increase legibility via heightening screen contrast with alternative color combinations (some also enlarge the font size).

High Contrast Mode is an os feature; it is accessible in Windows by pressing Ctrl+Left Shift+PrintScreen.

In High Contrast Mode all images and colors are discarded. A predominant color pair is then used to display the entire os interface (usually white or yellow on black, or vice-versa).

Voice Recognition and Alternative Input

Voice Recognition

Voice Recognition is a software app that allows users to generate text (dictation) and/or operate a computer (command and control) using the sound of their own voice! Speech Recognition uses a neural net to become familiar with a user’s voice. This neural net is constructed from data the app captures and stores regarding pronounciation charicteristics for every single word a user says. Speech Recognition also uses grammatical context and frequency of use to try and predict the word a users wishes to input.

Alternative Inputs

Access/Ability Switches: are alternative input methods that can utilise controlled movement (from blinking one’s eyes, exhaling, a foot, etc.). Switch operation greatly varies according to its make/model and requirements of use. Switch Access is frustrating and time consuming and should be only used as a last resort.

Access/Ability Switches are ideal for users with physical impairments and/or dexterity difficulties.

Braille Keyboards

Braille Keyboards are not the magic bullet they sound like; usually they support a full standard keyboard but only allow the input of Grade 1 Braille.

Braille Keyboards are primarily used for terminal emulation software; their usage is mostly limited to blind or visually impaired users.

Ergonomic Keyboards

Ergonomic Keyboards designed and shaped to reduce pain/effort from typing. Ergonomic Keyboards are touted as Carpal Tunnel Syndrome killers, they reduce strains, movements of the arms, hands, wrists, fingers, etc.

Twiddler

Twiddler input device is strapped to a user’s hand (looks similar to a remote control); Equipped with twelve buttons and a mouse pointer, Twiddler is ideal for users with dexterity difficulties.

BAT Chording Keyboard

BAT Chording Keyboard has only seven keys, however via multiple keystrokes, still offers same functionality as a standard keyboard.

Overlay/Concept Keyboards

Overlay/Concept Keyboards equipped with adaptable interface that is customizable for users needs. Can have large/small keys; keys can have large/small gaps between, etc. Ideal for users with learning disabilites and/or dexterity difficulties.