Adding focus to form fields

You can highlight the form field a user is in. It’s a small visual cue as to where the cursor is in the form. Here’s a simple example.

a form with the focus in the Name field

The cursor is in the Name field in the image. The cursor position is highlighted with a dark border to indicate which form field is in focus. This highlight is created with a CSS pseudo property called :focus. Text boxes are input fields. In this example, the CSS rule is applied to the input selector. A border is added to input fields when they are in the :focus state. Here’s how the rule looks.

input:focus {
border: 2px solid #333;
}

This rule only works for input fields. Other types of form elements such as checkboxes would need separate CSS rules of a similar kind to create an outline when receiving focus.

Catch me tomorrow on BlogTalkRadio

Tomorrow at 1PM Eastern is the date for  the Fem 2.0 Wake Up Campaign on work/life blog radio series program where I’ll be representing the elder blogger community. The program I’m involved in is  “Work/Life and Older Americans: Taking Care of Oneself & Others.”  The discussion airs at Talk Shoe. Luckily, I’ll be the moderator and will be asking the questions rather than providing expertise on the topic of caregiving.

There are several ways to participate. At Talk Shoe (with a small download readied in advance) you can join in with chat. The Twitter hashtags to get comments and questions noticed are #fem2 and #worklife. Fem2.0 is on Facebook, where you can follow information about the radio programs in the series.

Others taking part in this discussion include host Kim Gandy, Deborah Halpern, Communications Director of National Family Caregivers Association, and Deborah Russell, Director of Workplace Issues of AARP.

The Fem 2.0 series of ten programs covers work life issues from every direction. Check the list of all the programs. The people involved are top notch and the discussions promise to be worth checking out. Take a look.

Fem2.0’s campaign, Wake Up, This Is the Reality!, aims to change the way our society talks about work, to shift the story away from privileged “balance” and corporate perspectives to one that reflects the reality on the ground for millions of Americans and American families. We need this shift if we want policy makers to know how tough it is out here and move them to act on legislation around such issues as paid sick days, healthcare, child and elder care, equal pay, etc.

To achieve this shift, we must be many and we must be LOUD.

If you have some insight to offer on the topic of work/life and older Americans you can participate in the  blog radio event at Talk Shoe where you can submit comments and questions. After the blog radio programs in the series are finished, there will be a blog carnival where posts from individual blogs can be submitted to Fem 2.0 for the carnival.

Apple’s new iPad–is it magical?

(A shorter version of this article posted at BlogHer.)

Whether Apple’s announcement of the tablet dubbed iPad made you long for one, scoff at how unnecessary they are, or crack jokes about the choice of name, you have to admit it was a huge announcement.

In Internet terms alone, the number of tweets as the announcement event progressed was in the hundreds per second. Servers couldn’t keep up, sites that promised live blogging were over capacity. Engadget’s live blog managed to keep up and send many good photos, but it was struggling.

The Facts

Let’s examine the facts about the iPad, then discuss whether it’s revolutionary or unnecessary. The first fact, and possibly the most important fact in terms of marketing, is that the device is stunningly beautiful.

Apple's Steve Jobs Announces Launch Of New Tablet Computer

The high resolution device is 9.7″ big and 0.5 inches thin. It weighs 1.5 pounds with a 1GHz Apple A4 chip. It runs on the iPhone operating system with the multi-touch screen controls familiar to iPhone users. It uses wireless technology, but not every model comes with 3G wireless. There’s a full sized keyboard. Apple Announces Launch Of New Tablet Computer

I’ll get into what it can do in a minute. What it does not do is fit in your pocket, have a phone, or have a camera. It isn’t meant to be a phone, and it isn’t meant to be a full computer. It’s meant to fit a niche in the middle of those two, according to Apple.

Apple Announces Launch Of New Tablet Computer

How about price? The base model is $499, the fully loaded 3G model is $829. Apple Announces Launch Of New Tablet Computer

The wi-fi model iPads start shipping in late March, the 3G models will be available in April. All of the iPad 3G models are unlocked, which means you don’t have to be stuck with AT&T. Even so, Apple secured a special pricing deal from AT&T for an unlimited data plan for $29.99 a month with no contract. International data plan deals are promised by June.

For more tech specs see The Apple Store.

What can it do?

Two word answer: a lot. Here’s a brief rundown.

  • An ebook reader using ePub technology that links to a new iBook store from Apple. The ePub technology plus the usability of the ebook reader may make it superior to Kindle and may prove to be the killer app for the iPad. In landscape mode, you can see two pages side by side, or let one page fill the full screen in portrait mode. @susanorlean thinks this feature is just what she needs. Early content partners include Penguin, HarperCollins, Simon&Schuster, Macmillan, and Hachette.
  • All 140,000+ iPhone apps run on it. A feature called pixel double lets your iPhone games run at double the normal size.
  • Mail. The redone and improved mail program is rich and capable.
  • Web browsing. Safari is the browser. There’s no Flash, which some people are calling a deal breaker.
  • Syncs with iTunes, iPhoto, your contacts, and other Mac apps for music, photos, video, movies and games. All your iPod tunes, your photos, and other goodies work.
  • All new calendar features that are, like Mail, reworked and rife with rich features.
  • Mac iWorks apps including word processing, spreadsheet, and presentation software are available from the App Store for $9.99 each. This feature alone means the iPad can serve as a mobile work computer for many users. You can import iWork ’09 and Microsoft Office documents and send documents in iWork ’09 and PDF formats.
  • An optional keyboard dock can turn the iPad into a laptop-like desk machine. After noticing Steve Jobs make typos on the touchpad keyboard, @triciad tweeted that the keyboard dock means that maybe even Apple doesn’t consider the touch pad so easy to use.

A feature it lacks, and one that keeps it out of the full-computer niche is multitasking. There’s no way to have Twitter, Mail, Safari and Words with Friends all running at the same time. I’d like to see multitasking come in a later version, along with 3G wireless at every price point.

Cindy Li listed the users she immediately realized can benefit from the functionality of an iPad. She lists the vision impaired, snow birds who live in two places throughout the year, and travelers of all stripes. ATMac has a preliminary rundown of all the accessibility features, not just the font resizing capability Cindy Li mentioned.

I agree with Cindy’s initial reaction, but I think that a lot of demand is going to come from gamers and folks looking for entertainment. The graphics are stunning, the games run fast, and the controls are so simple that games will really, really, really be popular on the iPad. Close behind that is video and movies. Yes, it has plenty of features that make it useful for work and serious business, but the fun is irresistible.

Apple Announces Launch Of New Tablet Computer

The pricing structure (and nonproprietary ePub format) for books from iBook Store is different from what we’ve seen at Amazon for the Kindle. See Apple Tablet Portends Rewrite for Publishers at The Wall Street Journal for a deeper look at this. An unnamed guest author at Tech Crunch thinks iPad is a Kindle killer.

The name

Did you vote your opinion on the name choice at Apple’s iPad: Love? Hate? Now With Wings? yet? Reaction to the name was immediate on Twitter, mostly jokes about feminine hygiene products, such as these from @alywalansky, @Katebits, and @StephanieSmanto. @Maria Young did speak in defense of the name, however. Skud found the reactions to the name both hilarious and disgusting.

To me, it looks like a pad—a writing pad, not the pad everyone else is obsessed with—or perhaps like a clipboard. I think the complaints about the name will fade quickly as people get accustomed to using it.

Is it green?

According to Apple, it’s environmentally friendly, with no mercury, or arsenic. The battery is supposed to have a 10 hour life.

iPad environmental checklist
photo from Engadget

I’d like to hear some outside analysis on how environmentally friendly the iPad is before accepting Apple’s word for it.

Is it magically revolutionary?

You can agree or disagree with me on this, it’s all my opinion. I speak from my requirements. I think Apple has been brilliant about finding an unfilled niche in the mobile market: not a phone, not a computer, but something powerful that bridges between them. The iPad is impressive and beautiful, but I’m not sure it’s going to change everything in quite the way the iPhone or the iPod did.

My reasoning goes like this. I already own an easy-to-tote MacBook and an iPhone that can replace it for short term trips away from my home computer. When the time comes for me to replace my computer, I can’t quite fill the need with an iPad unless it sprouts a CD drive and runs PhotoShop, Fireworks, Dreamweaver, and several other things I can’t live without. When the time comes for me to replace my phone, I can’t fill that need with an iPad. I don’t spend a lot of time playing games. In other words, I’m not planning to buy one immediately.

That said, I do think there is a huge market for the iPad. I mentioned gamers. I also think it might change the netbook market completely and shift the eBook landscape around about 180 degrees.

I’m not particularly the target audience for this device, loyal Apple fan that I am. Young people are. As my buddy Melanie from Blogging Basics 101 told me in an email,

I think the iPad is going to be much more popular with the teens/college/20-something crowd. Those are the people who are already watching TV on their computers instead of the actual TV. They can research their papers, download textbooks, and write their papers all on one device. That would have been indispensable to me at that age (if I’d known how to use a computer then). I think it’s harder for us codgers to be on board when we’ve already spent the money on the laptop, iPhone, Kindle, etc. We see one more device, those “kids” see a consolidation and more portability.

She’s right, of course. If I didn’t already have a MacBook and an iPhone, this would be perfect.

HTML5 working draft on italic and bold

As a comment to  em and his buddy strong, Tony Fahnestock sent a tweet mentioning the way the elements <i> and <b> are being treated in the working draft of HTML5 in a section called “text-level semantics.”

Here’s how the <b>, or bold, element is defined there.

The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.

The following example shows a use of the b element to highlight key words without marking them up as important:

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

In the following example, objects in a text adventure are highlighted as being special by use of the b element.

<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

Another case where the b element is appropriate is in marking up the lede (or lead) sentence or paragraph. The following example shows how a BBC article about kittens adopting a rabbit as their own could be marked up:

<article>
 <h2>Kittens 'adopted' by pet rabbit</h2>
 <p><b>Six abandoned kittens have found an unexpected new
 mother figure — a pet rabbit.</b></p>
 <p>Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.</p>
[...]

The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.

I want to emphasize this sentence: The b element should be used as a last resort when no other element is more appropriate. When semantic meanings are considered, almost any other element is probably more appropriate.

Let’s stray off topic a moment to talk about <mark>. The <b> is defined as a stylistic element that conveys no extra meaning. A new element, <mark> is suggested for highlighting text. Here’s what the working draft says about <mark>:

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.

Semantically speaking, it seems to me that <mark> conveys meaning for highlighting text to a greater degree than <b>, which is used for stylistic reasons in HTML5, as it has been in HTML4 and XHTML.

Back to the <i>, or italics, element. From the working draft:

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.

Terms in languages different from the main text should be annotated with lang attributes (or, in XML, lang attributes in the XML namespace).

The examples below show uses of the i element:

<p>The <i>Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

In the following example, a dream sequence is marked up using i elements.
<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he dreamt. <i>The ship had many people aboard, including a beautiful princess called Carey. He watched her, day-in, day-out, hoping she would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>

Authors are encouraged to use the class attribute on the i element to identify why the element is being used, so that if the style of a particular use (e.g. dream sequences as opposed to taxonomic terms) is to be changed at a later date, the author doesn’t have to go through the entire document (or series of related documents) annotating each use. Similarly, authors are encouraged to consider whether other elements might be more applicable than the i element, for instance the em element for marking up stress emphasis, or the dfn element to mark up the defining instance of a term.

This definition of <i> offers more proper uses for the <i> element in ways that do provide limited semantic underpinnings. Use <i> to offset text from the normal prose in ways that indicate “taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name” but not as a way to highlight text (use <mark> for that) or a way to emphasize text (use <em> for that) or a way to indicate the defining instance of a word (use <dfn> for that).

With the addition of a class attribute or a lang attribute, the <i> element can be made even more semantically self-explanatory.  HTML4 and XHTML both already encourage the lang attribute when italics are used to indicate another language, so this is not new to HTML5.

Useful links: SVG, location aware, video

Two articles on using SVG for backgrounds by Shelley Powers are at A List Apart this week. Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I and Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II. You learn when to use it, where it works, how it works, tools to build it, and code examples.

Through the location lens, do you exist? at Return on Intention asks, “What would your customer’s phone say you are all about?”

video for everybody at Camen Design gives code examples for the HTML5 <video> element, which offers native playback in Firefox 3.5, Safari 3 & 4, and Google Chrome.

em and his buddy strong

Let’s talk about emphasis and italics and getting bold. There’s an extended family tree of HTML elements that can be used to format text as emphasized, italic or bold at our disposal. These HTML elements are not interchangable and each has a distinct position in the text formatting family.

First there’s <em>. Depending on the browser and the web page author’s style sheet, <em> can be rendered in several ways. Most often it’s visually rendered in italics, but not always. But there is one thing that’s always true of <em>. That one truth is that text marked up as <em> is always emphasized. <em> means emphasized. <em> is one of many self-describing HTML tags that tells you with its name exactly what it does to text. It emphasizes text. Maybe that emphasized text is rendered in italics, but may not. Semantically speaking, the italics aren’t the point. The emphasis is the point.

When you mark up text with <em>, do it because you intend to emphasize the text.

Then there’s <strong>. Using <strong> is a form of emphasis as well, but it differs semantically because it means strong emphasis. Depending on the browser and the web page author’s style sheet, <strong> is often rendered as bold, but not always. (On this blog, <strong> is rendered as both bold and with small caps.) The bold isn’t the point. The semantic point is that <strong> indicates strong emphasis.

When you mark up text with <strong>, do it because you intend strong emphasis.

Next we have <cite>. In the formatting world of self-describing semantic HTML, <cite> is used to mark up a citation. It most often is rendered as italic. Visually, you can’t tell a difference between <em> and <cite>. But the underlying meaning is different, the underlying semantic message is different. I can quote from Mastering Integrated HTML and CSS by using the <cite> element to indicate a book title. This element can also indicate a title of a web site or a blog.

Those are the semantic elements that may render as italic or bold.

There are two non-semantic HTML elements that render visually as italic or bold. These are <i> and <b>. If a user happens to be looking at your text, then they will see the visual cues to meaning that <i> and <b> provide. But not all users look at text. For text rendered by some means other than visual—say a screen reader or braille—there’s no meaning conveyed by <i> and <b> at all. It’s invisible. No hint of emphasis or clues to citations.  <i> and <b> are presentational HTML with no semantic underpinnings.

When you use <i> and <b>, do it for visual reasons only. Such reasons do exist. Perhaps you want to italicize the opening paragraph of a long essay for no other reason than appearance. Use <i>. Perhaps you want the links in your menu to look bold for visual reasons, but not be emphasized. Use <b>.

ADDENDUM 3/11/2010: The latest draft of HTML5, issued this week, defines the <strong> element as showing strong importance rather than strong emphasis. Presumably this semantic change will be rendered differently by a screen reader.

Interview worth reading

Up Late with CSS3, and Loving It! is an interview by Miraz Jordan with Andy Clarke, John Allsopp and Dan Cederholm. There are many insights in the article, but here’s my fav from John Allsopp.

Jordan: Do you see a broad acceptance of web standards among professionals who create websites, or is it still an uphill battle? What causes people to stumble?

Allsopp: I think the key challenge we face as a profession is that we are still essentially self taught. Web design and development are rarely offered in computer science and design programs, and often covered badly when they are. So, unless developers new to the industry stumble upon the right books, sites, and communities, it’s likely they’ll start off on the wrong foot. Then they need to unlearn many techniques and skills.

In case you don’t know, John Allsopp is the creative mind that brought together the group of educators and industry leaders who have formed InterAct and are working to create an open web education alliance within the W3C.

One of the things Dan Cederholm mentions in the interview is RGBa. If you’d like to know more about RGBa, read Cederholm’s latest book or read Working With RGBA Colour by Drew McLellan at 24 Ways.