pipwerks

CustomInput Class: Accessible, Custom-Styled Checkboxes and Radio Buttons

philip — Fri, 12 Mar 2010 07:51:51 +0000

I’m a big fan of the Filament Group’s UI work. They put a lot of thought into their work, and ensure everything they make is not only beautiful, but as accessible and as semantic as possible.

One of my favorite pieces of work by the Filament Group is their approach to stylized checkbox and radio elements, as described in their post Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)

The system is remarkably well-constructed, degrades gracefully, and is completely accessible if JavaScript, image loading, or CSS is disabled can’t be loaded. No small feat. Plus it remains semantically sound, with no bloated markup.

Having said all that, I’ve never actually used any of Filment Group’s UI code in my projects because of one little obstacle: they rely on jQuery. Mind you, I’m not a jQuery hater, but I prefer MooTools and build all my major projects using MooTools. Switching to jQuery for such a small UI customization is not going to happen. I’ve often thought it would be great to build a MooTools version of Filament’s UI examples, but never had the time… until today.

I’m currently working on a new quiz system at work, and decided I’d incorporate Filament’s wonderful stylized checkboxes and radio buttons into my project, which meant it was time to roll up my sleeves and code me some Moo.

View Demo

I made a couple of changes to the underlying JavaScript to suit a MooTools approach (and add some flexibility with the CSS selectors) but the basic premise is the same as Filament’s demo.

The following JavaScript will style ALL checkbox and radio inputs on your page. Note that CustomInput returns the collection of elements that have been styled.

window.addEvent("domready", function(){ 
    var all_styled_inputs = new CustomInput();
});

If you want to target specific parts of the page or only certain input types, pass a CSS selector as an argument:

window.addEvent("domready", function(){
    //Only style checkboxes
    var styled_checkboxes = new CustomInput("input[type='checkbox']");
 
    //Only style radios in a div named "walkman"
    var styled_radios = new CustomInput("#walkman input[type='radio']");
});

The CustomInput class has been fully JSLinted, and remains very close to the original jQuery version’s size. When compressed (YUI), it squeezes down to about 1.6kb. It uses ‘dollar-safe’ mode for compatibility with other JS libraries.

It has been successfully tested in the following systems:

Windows XP

Internet Explorer 6
Firefox 3.5
Safari 4
Chrome 4
Opera 10

Mac OS X (10.6.2)

Firefox 3.6
Safari 4
Opera 10.1
Chrome 5 (beta)

View Demo | Download Project Files

Major kudos to Filament Group for sharing their ideas with the world.

Update 3/12/2010: Fixed a typo in the JS file preventing the checkedHover class from being assigned.

CustomInput Class: Accessible, Custom-Styled Checkboxes and Radio Buttons is a post from: pipwerks.com. Unless specified otherwise, all code is licensed under an MIT-style license. All other content is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

Viewing PDFs in a Browser on a Mac

philip — Sun, 21 Feb 2010 01:29:40 +0000

As a Mac user, one of the more annoying issues I frequently encounter is funky PDF handling in Firefox and Safari. For instance:

Adobe doesn’t make a version of Adobe Reader that’s compatible with Firefox on Mac OS X
Adobe Reader is only supported in 32-bit versions of Safari on OS X (Snow Leopard ships with a 64-bit version of Safari)
Safari has built-in handling of PDFs, but if Adobe Reader is installed — whether it’s actually working in Safari or not — it will turn off Safari’s native PDF handling by default.

Here are some things you can do to get PDFs to display in your browser(s).

Restore Safari’s built-in PDF handling

If your Safari browser isn’t using OS X’s native PDF handling, Adobe Reader may be overriding it. Here’s how to fix it:

Launch Adobe Reader
Go to Preferences > Internet
Deselect “Display PDF in browser using…”
Click OK

Enable PDF support in Firefox

Mozilla has a handy reference for this topic. Here’s what they say:

Adobe does not yet maintain a plugin for viewing PDF files within Firefox for computers with Mac OS X. To view PDFs in Firefox:

If you have a Mac with a PowerPC processor, the Schubert|it PDF Browser Plugin can be used to view PDF files in Firefox.

If you have a Mac with an Intel processor, the Firefox PDF Plugin extension can be used to view PDF files in Firefox.

I’ve installed the Firefox PDF Plugin on my Mac (Firefox 3.6), and it works great. It uses the Mac’s built-in PDF handling, so it’s a very small plugin runs very quick.

Caveats and an editorial

Using the Mac’s built-in PDF support means you won’t be able to take advantage of some of Adobe Reader’s new features, such as scripting, portfolios, and SWF support.

I don’t know about you, but I prefer to use the PDF format for its traditional purpose: reading print-based documents online. Plus, Adobe Reader currently requires 290MB of space on the hard drive. I can live without the new features and would prefer to use my 290MB of space for other things.

In general, I recommend avoiding Adobe Reader on a Mac because of its poor support in Firefox and Safari, its incredible bloat, and the seemingly daily announcements of major security vulnerabilities. Most of the security issues have been directly related to the scripting functionality and other new features. If a lite version of Adobe Reader were offered — one that removes the bloat, eschews these new features, and simply lets us view standard PDF documents — I’d be more than happy to use it.

Shameless plug

Need to embed a PDF in an HTML page? Try PDFObject. It’s free, tiny, and works much like SWFObject (the two projects are unrelated).

Viewing PDFs in a Browser on a Mac is a post from: pipwerks.com. Unless specified otherwise, all code is licensed under an MIT-style license. All other content is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

Introducing PDFObject

Speaking of IMS…

philip — Tue, 16 Feb 2010 23:26:27 +0000

IMS produces standards they want everyone to use.

Why, then, do I have to log in to their site in order to VIEW the documentation for their standards?

Situation: I found a link to a PDF on their site. When I clicked it, I was presented with this warm greeting:

Sorry
The page you are trying to access is reserved for participants in the IMS GLC Public Community or is reserved for IMS GLC Members, Affiliates or Alliance Members.

If you have already set up an account and just need to login, please do so here. If you would like to register for a free public community account, just head on over to our registration page.

So… in order for me to even read their standards, I have to tell them who I am and put my personal information in their database? How does this foster adoption of standards?

Geez these guys burn my britches…

UPDATE:

The IMS site requires the following information before you can view any of their documentation: Name, email, organization name, job title, job description, country

Pretty invasive if you ask me.

UPDATE #2:

After registering for site access, I was greeted with a second page asking for persona information, and asking me to agree to IMS’s licensing terms. They require the following information: Name, email, “entity on whose behalf you are accepting this agreement”, street address (includes city, zip, country), phone number

(Phone number? Seriously?)

The license terms are FIVE PAGES long after pasting into a Word file.

Interesting bits (emphasis mine):

IMS specifications are published solely for the purpose of enabling interoperability among learning products and services used by the education and training communities served by IMS members and are made available under license to Registered Users solely to further that purpose.

I guess this means the standards aren’t meant for public consumption after all, though the end result of the standards are?

Users of the Specification(s) are encouraged to engage directly with IMS as IMS members, including registration of all applications of specifications, in order to enhance the level of interoperability in the education and training industries worldwide.

I read this as: tell us who you are and how you’re using IMS specifications so we can include you in our next press release (you know, the part where we pat ourselves on the back).

Any use of the Specifications(s) or other Materials provided by IMS must be accompanied by the copyright legends provided with full attribution given to IMS.

If this were the case with the HTML, ECMAScript, or XML standards, our documents would be bloated with useless attribution credits. (Side note: I wonder how this affects SCORM, as SCORM uses IMS specifications for packaging? Is anyone who produces a SCORM-based course supposed to ~~pay respect to the Don~~ provide attribution to IMS in their courseware?)

Licensee agrees to publicly and visibly acknowledge and attribute to IMS the Specification(s) upon which products are based to any and all Development Partner(s).

So if Company X uses an IMS specification, they’re supposed to go over to each “Development Partner” — many of whom may be commercial competitors — and let them know?

Speaking of IMS… is a post from: pipwerks.com. Unless specified otherwise, all code is licensed under an MIT-style license. All other content is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

IMS issues press release for new e-learning interoperability standards

philip — Tue, 16 Feb 2010 18:20:33 +0000

News from the IMS Global Learning Consortium:

The IMS Global Learning Consortium (IMS GLC) today announced the public review of the first phase of the Learning Tools Interoperability (LTI) standards to allow open and seamless integration of educational web applications. Called “Basic LTI or BLTI,” this first standard addresses the most common roadblocks to achieving a seamless experience for teachers and students.

Reading this press release, I couldn’t help but notice two things:

There’s an awful lot of chest-puffing and self-congratulation going on here — people’s credentials are thrown around an awful lot, and over half of the press release is filled “Statements of Support.”
There’s no hyperlink to the standards that are being announced, nor is there any information about how you can read the new standard proposal, whether you can try it yourself, how long it’s open for review, etc.

If the new standards are written as poorly as this press release, it’s going to be 1,000 pages of useless spec. All filler, no killer.

IMS issues press release for new e-learning interoperability standards is a post from: pipwerks.com. Unless specified otherwise, all code is licensed under an MIT-style license. All other content is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

Introducing LearnSWFObject.com

philip — Mon, 15 Feb 2010 09:55:50 +0000

I’m happy to introduce you to my latest project, LearnSWFObject.com

It’s been many, many months in the making, and has rudely been put aside a number of times when my life left me no free time to work on it. Happily, I’ve been able to push through the last remaining barriers and get the site out the door. Hopefully someone will find it useful.

I’ve ported my most popular SWFObject tutorials and examples to the new site — updated, of course — and have added a few new tutorials, too. As part of the housecleaning effort, I’ve removed all SWFObject examples and tutorials from pipwerks.com. 301 redirects will re-route the most popular posts to their LearnSWFObject.com equivalent, but the odds and ends have been sent to the compost heap.

I’m most excited about the brand-new code generator (written from scratch) that will write your SWFObject embed code for you. Some notes about the generator:

It can write HTML 5, HTML 4 (transitional/strict), and XHTML 1 (transitional/strict) doctypes
It provides code for both types of SWFObject embeds: dynamic (JavaScript) and static (markup)
It includes a download link that lets you save your generated markup in an HTML file
The static publishing option includes an option for a nice, shorter syntax
The generator uses progressive enhancement techniques, meaning it’s nicer with JavaScript enabled but fully functional without it

Give it a try!

LearnSWFObject.com will remain a work in progress, as SWFObject itself continues to evolve and people find news ways to ~~break~~ use it in their sites. I will continue to play with the formatting and layout from time to time.

In other SWFObject news, I think I’m allowed to report that SWFObject 2.3 is in the works, and will contain mostly bug fixes and an enhancement or two. Bug reports and feature requests are always welcome at SWFObject’s Google Code site. If you have questions about how to use SWFObject that aren’t answered by the LearnSWFObject.com tutorials, please post them on the SWFObject Google Group.

Introducing LearnSWFObject.com is a post from: pipwerks.com. Unless specified otherwise, all code is licensed under an MIT-style license. All other content is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.