Archive for the ‘web dev’ Category

First Hour of Wiley and Downes Dialogue on Open Ed

Aug 11, 2009 at 10:28 am, Jared Stein

The following is my comments and analysis on the first hour of dialogue between David Wiley and Stephen Downes re. openness and licensing. I want to precede this by recognizing that my point of view is both critical and challenging, though I do so with no desire to be divisive. Details on the conversation and a link(s) to recordings and live stream are available on the Open Ed 2009 wiki (more…)

Blackboard Vista Triggers Quirks Mode

Apr 2, 2009 at 9:25 am, Jared Stein

Ever been annoyed by Blackboard Vista’s (or Campus Edition 6+’s) rendering of your XHTML + CSS web pages? Yeah, me too–especially on Internet Explorer. This happens because Bb Vista triggers a browser’s quirks mode in spite of DOCTYPEs and validated markup (more…)

Plug: Ignite Salt Lake 2

Mar 16, 2009 at 3:45 pm, Jared Stein

Ignite Salt Lake 2, “a community event celebrating the passion and creativity of geek culture” that sounds quite a bit like pecha kucha, is happening March 26th, 2009 at Brewvies Cinema Pub in Salt Lake City, Utah (677 South 200 West).

I didn’t go to Ignite 1, but a 2-hour series of 5-minute presentations (20 slides or less) sounds like the best-ever format for a geek get-together.

Question: will Brewvies’ grill be open for business?

Using WP Custom Fields to Add CC Licensing to Blog Posts

Jan 7, 2009 at 8:00 am, Jared Stein

Those of you with PHP experience may already know by reputation how easy WordPress is to modify, and I’ve been having a lot of fun customizing themes for the past year. This is a quick and dirty post illustrating how to customize a WP theme to select a Creative Commons license for each post. (more…)

Dropping Lowest 2 (or More) Scores in Blackboard or Moodle

Dec 16, 2008 at 6:06 pm, Jared Stein

WebCT was infamous for it’s calculated column formula textarea that you couldn’t type in. When John Krutsch developed a clever Javascript hack for it (just one of several cool IE-only hacks packaged as WebCT PowerTools), crafting unusual formulas was suddenly more viable, and we began dropping not just the lowest score, but several low scores (more…)

Re. "CSS Angles" and the Future of Em-Based Scaling

Dec 3, 2008 at 11:43 am, Jared Stein

Sitepoint offered up an article by Tim Wright (CSSKarma), CSS Angles: Just the Edge Your Web Page Needs!, which shows that increasing the size of a single border property results in an angular object that can be placed behind things. After some experimentation I found a new solution and a new conundrum (more…)

XSL to Output Elements, PCDATA, Attributes

Oct 31, 2008 at 5:58 pm, Jared Stein

Tony Hirst was looking for a way to output all XML element names and PCDATA in a document and show hierarchical relationships. I guessed this was easy, so I tried but initially failed. I searched for an answer and was surprised when I couldn’t find a good one. An hour later I worked out a solution based on parent::node() that seems stable on all XML files. (more…)

2008 Survey for People Who Make WebSites

Jul 29, 2008 at 8:28 am, Jared Stein

This morning A List Apart, my favorite Web dev periodical, put out it’s 2008 Survey for People Who Make WebSites. I made it through all 18pp. If you make Web sites, join in: sruvey

Setting Web Page Font Size Proportional to Window Size

Jun 26, 2008 at 5:02 pm, Jared Stein

This article explains an experimental approach to ensuring consistent line-length and font-size for the readability of text on Web pages. This is the first time I’ve posted an article related to Web development, but I hope it to be the first of many.

Though there have been a number of articles proving the usefulness of flexible and elastic layouts in Web design, too many sites still use fixed or fluid layout. I say “too many” because the key problem both fixed and fluid hold for users lies with readability. Usability studies have shown that most users find a line length of 40 – 60 characters to be easiest to consume (though at least one report ranges from 35 – 95 and another a more modest 40 – 80, depending on the font used). This falls in line with print typography guidelines that recommend anywhere from 11-15 words per line. As you can see, there’s no final word on line-length readability, except that it falls somewhere on either side of 50 characters per line (cpl), or 13 words per line (wpl).

Presuming, then, that a Web designer wants to present reading text at around 50cpl, flexible or elastic layouts come in handy, as they measure the width of text column(s) in em space. One can set the width of the column to, say, 45em, depending on the font, and end up with a rough average of 13 words per line. The added benefit is as the user increases or decreases her font size for readability, the width of the text column increases proportionally.

Fixed width designs are often measured in pixels, and a user increasing the font size does not increase the width of the line, resulting in too few cpl. Neither do fluid designs, which are measured in %–these often result in too many cpl. And for most users with ultra-high resolution screens, fonts are often too small and require resizing.

A few years back I tackled this problem from a different angle. I thought, wouldn’t it be great if, rather than changing the size of my window and/or the size of my font for optimal readability, the font size changed automatically proportional to the size of my window? So if I had a high-res screen with my browser maximized, the font would be larger. If I had a low-res screen, the font would be smaller. In either case, the proportion would equal Your Favorite Line Length.

There is no % unit of measurement for font-size in CSS, so I had to turn to JavaScript to calculate my font’s size based on the DOM window size. A few years back, our Web developer Brandon Groff worked with me to write the JavaScript that would do this, and the effect was most elegant: here’s a quite plain example.

A few notes:

  1. JavaScript recalculates the desired font-size based on the window size and reloads the page on resize
  2. The font’s proportional size is based on a JavaScript variable that can be static or adjustable
  3. Changing the value in the text input before resizing alters the font-size’s proportion. A “1″ roughly equates to 100% of the body’s width.
  4. At least one known bug: if the user increases or decreases the font size through their browser, the script it breaks.
  5. This JavaScript is a bit old, and I hope to evaluate it line by line for currency and efficiency.

Roger Johansson Reviews "Designing Web Navigation"

Mar 19, 2008 at 10:47 am, Jared Stein

Roger Johansson posted up a good, general review of the new O’Reilly book, “Designing Web Navigation”. The first question Johansson asks is a good one, i.e. “We need a whole book on designing Web navigation?” If you’ve ever struggled with navigation of a Web site, or know anything about the idea of the “scent of information” I think you’ll agree that the answer is, “Yes.”