Month: November 2006

Why hReview, the Microformat, Rocks!

I’ve been writing book reviews on this blog since the very beginning. It fact, the reason I started the blog in the first place was so I could write reviews of the books available for teaching web design.

Recently I’ve been playing with the hReview creator that automatically generates the code for the microformat hReview. The first time I tried it, I used it as is, with no modifications. I didn’t like the way it handled the image, though. So I modified the code the hReview creator gave me a bit and tried it again. The second time I was much happier with the appearance, it fit in better with my usual style of writing book reviews for this blog and the image was where I wanted it.

My main question was whether the modified hReview code would be recognized as readily as the unmodified version. I tested this by searching Google for reviews of the two books I’d used hReview to format. I was amazed to see that my reviews, in either the modified or unmodified format, both place very high in the Google rankings. Since other book reviews I have written do not come in to the Google search results at such a prominent spot, I think the hReview microformat must deserve some credit for my good search results. My conclusion? hReview rocks!

Technorati Tags: microformats

Like this? Digg It!

Skip Navigation or a Heading?

I’m currently reading an accessibility book. I’m not quite ready to post a review of it yet, because it’s very lengthy, but I got so excited about a new piece of information in a chapter of the book by Jim Thatcher that I just had to say something about it.

A modern screen reader can navigate using heading elements (h1 to h6). Using the H key, a person with a screen reader can jump from heading to heading to get a sense of how the page is organized and find the content they want to hear. (Opera uses the S key.) This means a well structured page with textual heading elements (or their equivalent) identifying each major content area of the page can be quickly understood just from the headings. Skip navigation links are not needed in a page with informative heading text. In particular, there should be a good heading indicating the main content.

When using skip navigation, the most useful link is to the main content.

Technorati Tags: , , , , ,

SXSW Interactive 2007

The schedule and panels for the 2007 SXSW Interactive conference in Austin, TX in March is firming up, and the hotel rooms are going fast, so book early.

find out more about SXSWiI’ll be presenting in a new format they’re trying out this year called “Power Panels.” A Power Panel is a 25 minute session with just one or two presenters. The topic I’ll power up is “Best Practices in Teaching Web Design.” Co-presenting with me will be Stephanie Troeth who is a member of the Education Task Force of the Web Standards Project. Hope to see you there.

The keynote speaker this year is Kathy Sierra. Any educator who isn’t reading every word this woman writes should start immediately. I can’t wait to see her speak.

Visit Web Teacher to read any comments.

Style Me Challenge Winners

I’m pleased to announce the four winning competitors in the Style Me Challenge. This challenge involved an HTML page I provided. Designers who entered could create any design they wanted, as long as they didn’t change the underlying HTML. The layout had to be in CSS, but the page included a data table, which presented a nice style challenge in itself. Winners will be featured in a color section my forthcoming book Mastering Integrated HTML and CSS (Wiley, March 2007). Congratulations to all these fine designers.

You’re just going to get a teaser here, the images are really too small to reveal any of the fine design elements these competitors were able to incorporate in their designs. You’ll see more detail in the book, and you may be able to follow the links to the individual designer’s sites to see a larger image, too.

Donna Jones

A horizontal scrolling design by Donna Jones The lemonade summer design by Donna Jones

These two designs are from Donna Jones of Portland, Maine.  She develops and maintains sites locally, mainly for non-profits. You can see some examples of her work at westendwebs.com. The design on the left uses a horizontal scroll with transparent graphics to make a smooth transition across the page. The design on the right is a cheery treatment called lemonade summer.

B.C. Bass

A design by BC Bass

B. C. Bass of Butterfly Dezignz at butterflydezignz.com entered this design. The styles are customized for a number of different browsers using CSS filters. The look is created with image replacement and positioned background images.

Leslie Hastings

A design by Leslie Hastings A design by Leslie Hastings

Leslie Hastings of kodiak-web-design.com entered two winning designs. The design on the left has four CSS based columns. The HTML page for this design included a table; you can see just the top of it at the lower right, spanning two of the four "columns." You can’t really appreciate the moody beauty of the design on the right at this small size. The left column and the masthead (which also contains the tree image you see in the column on the left) are both fixed in position.

Tee G. Peng

A design by Tee G Peng

This design is by Tee G. Peng. Tee can be found at lotusseedsdesign.com. The design uses floats for the two main columns, with a lovely hand-painted lotus as a focal point in the center.

Review: Web Design: A Complete Introduction

Nov 12, 2006 by

Web Teacher


get 'Web Design: A Complete Introduction' from Amazon.com

Web Design: A Complete Introduction

★★★☆☆ Web Design: A Complete Introduction by Nigel Chapman and Jenny Chapman (Wiley, 2006) is a book that a book lover would like to hold in their hand. It’s full color with pages of very nice stock, wonderful typography and appearance. I’m telling you this because I’m at a bit of a loss as to how to review it, so I’m delaying.

It’s from Wiley in the UK, so it may be my American perspective that’s holding me back on deciding about this book. I’m not sure where it would fit into an American curriculum. All this indecision on my part doesn’t indicate that the book is not a good book. It’s full of in-depth and clearly written information.

It’s more than a design book. They aren’t kidding when they say this is a complete introduction in the title. The book’s approach is so thorough and so complete that I learned things I’ve considered the secret knowledge of programmers and database people previously.

The book covers things you’d learn in computer science about web technology and includes internet architecture and information programmers learn. It presents that information is a way that makes it easy to understand and clearly connects the knowledge to creating web pages. It has sections on HTTP and server side technology and DOM scripting. It also has sections on web applications and databases.

Mixed in with the technological information you find sections on CSS, XHTML markup, typography, and a fine explanation of accessibility. The book delves into visual communication and layout, with information on color and tone. It explains the logical and navigational structure of a web site.

It’s aimed at the university level market. Each chapter has a summary of key points and exercises that could be used by independent learners or in a classroom. If you teach web design in a Computer Science department this would be a excellent book to help you teach students information that would help them understand standards, accessibility and CSS. If you teach web design in a department such as Visual Communication or Technical Communication this would be an excellent reference and contains information you as instructor would benefit from knowing, even if you didn’t include it in the classroom work.

If anyone in the UK reads this and would leave a comment explaining what the standard curriculum for teaching web design is there, I’d like to hear about it. Help me understand how to classify a book this complete, if you can.

This
hReview brought to you by the
hReview Creator.

Technorati Tags: ,

Review: CSS Cookbook

Get CSS Cookbook from AmazonCSS Cookbook, 2nd Edition by Christopher Schmitt (O’Reilly 2006) is part of O’Reilly’s series of reference books falling into the cookbook category. The books use an organization scheme that is good for finding answers to specific questions quickly, rather than reading cover to cover. It’s reference shelf material, not textbook material.

Other O’Reilly cookbooks I’ve seen give problems and solutions in a rather brief format. The CSS Cookbook often goes into detail. Take this problem, for example: "You want to develop a system to display content columns in any order." The solution takes twenty pages to explain and involves floats, margins, whitespace considerations, column order, a page layout algorithm, faux columns plus JavaScript and PHP solutions.

Other problems are solved in just a couple of pages, for example, "You want to make it difficult for people to copy your images from your web page," is covered in two pages with a suggestion to use a background image behind a transparent GIF and a warning that people will still steal the image anyway if they are determined.

The title might have been "Web Cookbook" or "Presentation Cookbook" or something less specific than CSS Cookbook, because many of the solutions offered involve JavaScript, PHP, or even Photoshop instructions. Depending on your point of view, that might be considered added value or a drawback. If you are searching for a pure CSS solution, you might be dismayed by finding an answer that involves programming. But if you are searching for an answer to a presentation problem that you think you can solve with CSS, you might be happy to find a CSS answer plus other answers involving programming that might be as good or better than doing it with CSS.

In teaching terms, any O’Reilly cookbook is good to have handy, especially for the times when students are designing their own projects and come up with some new twist that hasn’t been addressed in class. As you might expect from a reference book, the appendices are thorough and helpful.