Category Archives: General

HTML Lite

Approach:  For a long time I didn’t really understand the reason for CSS, XHTML, and standards in general.  I didn’t get that the reason for the separation of CSS and HTML was to separate content from presentation.   And even when I read that statement in Standards based design books, I didn’t understand why.  What are the benefits of this separation?

12/42 seconds loading Cut page size and thus loading times by up to 75%.  Saving strain on servers and disk space at hosting service or on machines hosting the site.  Particularly for image heavy sites such as Artists would often have saving speed in the details helps insure that images of artwork will load sooner.

How to write lite HTML?

Choosing an editor

Chances are, you already have a tool that you are comfortable with, but is that tool really supporting your efforts to author valid, accessible, modern code?  Validity and accessibility are ultimately not something you paste on top of an otherwise broken website.  By far the easiest way to author well is to learn to do it all along.  When I finish writing a template page for a website, I run it through the CSS validator and the HTML validator on the W3C website.  When I first started authoring valid code this was a tedious process.  I was trying to validate something broken.  Now, when I finish with a site it often validates without any errors.  This is the result of a change in  process.  A change in editors (pico just allows too many typing errors!) as well as rethinking the way to author and the reasons for separating content from presentation.

I reviewed several html editors in the article WYSIWYG Editor Accessibility Test Results:   Allowing writers to contribute to the creation of accessible documents.  This review was based on a search for a non-technical tool for writers.  Based on your level of technical skill and the resources you have available you may consider Dreamweaver or Contribute (with options configured for accessibility and validity), Amaya, or XMLSpy. 

First write XHTML Strict 1.0. 

It’s just easier to work within the rules once you get used to them.  This means that you use a doctype declaration at the top of every page. This declaration lets the browser (Internet Explorer, Netscape, Opera, and others) know what kind of mark-up to expect and in some cases how to interpret it.  Transitional sounds easier at the outset, but diagnosing layout problems is a lot easier if you are certain these are not just the quirks of lower quality code.  The initial investment is well worth its payoff in the long run. 

This means that you must finish what you start! List Items, breaks, images, paragraphs, and horizontal rules must all have closing tags.  This is accomplished in two ways.  List items and paragraphs must have closing tags.

<ul>
	<li>Earrings</li>
	<li>Nose Rings</li>
	<li>Other Rings</li>

</ul>

<p>Text text text text.</p>

Images, horizontal rules, meta elements, and breaks remain a single tag, but they must be closed within themselves. Note the space between the end of the tag information and the back slash.  This is essential for some reason I do not now recall.  Just do it.

<img src="images/pearlearrings.jpg" />

<br />

<hr /> 

Write all tags and attributes in lowercase.  Put quotes around attribute values.  Use escape characters for all symbols.  For instance &amp; for the ampersand.

Planning

A return to grade school, outline the document like a research paper.  Start with a roman numeral I. and work your way down to the finish.  At this point don’t consider how you want to present the content, but only what it is and how it relates heirarchically to the rest.  For Instance, consider this website: Flesh out

  1. Nicole Sullivan
  2. Skip Links
  3. Stylesheet Switcher
  4. Navigation
  5. Article Title
    1. Subtite
      1. Sub-Sub Title
  6. Extra Information

Using Lists for Navigation Elements

Using Selectors

Selectors are the key to avoiding div-itis.  Probably half the weight of the first couple of sites you build using CSS will be div tags. 

Meaningful Names

You’ll be kicking yourself the third time your client asks you to change to look of an element you called "redUnderline".  If you choose structurally meaningful names for classes like "specialInstructions", "teamCaptain", or "salePrice" the look can change without losing cohesiveness.  This will also keep a consistent appearance accross multiple pages which not only helps branding, but allows disabled visitors in particular to quickly understand how to navigate around your site and find the information they are looking for.

Granite Pastry Island

Granite Pastry IslandJennifer loves to bake, and everyone loves to keep Jennifer baking. She is a wonderful cook, and her pastrys are particularly tasty. Last year I made a granite pastry island to keep her crusts cool as she works the dough.

We bought a basic island from Kitchens etc. to keep the project economical. I then tiled the top with granite tiles from Roma Tile Co. in Watertown. We used a strong dark gray sandless grout with silicone to seal the tiles to one another. I then put a white maple border around the top and routed a 45 degree angle to give a lighter feel to the edge.

The gap between the maple and the tile was sealed with a matching silicone caulking to allow for expansion and contraction of the wood without cracking. With several coats of varnish and sanding to protect the wooden border from heavy use the Pastry Island was workable.

Henri Cartier-Bresson

Looking at those two photos, of my self portrait, together, I wonder if that one was really the one I made the dots with. I managed somehow to digitally break the original, so I’ll never know. I tried a couple more, of Henri Cartier-Bresson drawn from an article in Newsweek. They had Helmut Newton photograph him to contrast their different styles. Drawing from a photograph is odd, the lighting is often either too soft (in the case of glamor magazines) or too contrasting (in the case of art photography) to be appropriate to draw. In the end I have two decent drawings of older men… but they don’t look particularly like Cartier-Bresson or the lovely photo by Newton. I’ll share anyway.

Drawing of Henri Cartier-Bresson

Second drawing of Henri Cartier-Bresson

Fête de la Musique

Bird of the fete de la musiqueWe went to la Fête de la Musique tonight. I have never seen Paris so exuberant. It was lovely. As nothing is ever done by halves in France, neither was this night. Over 300 bands played literally on every street corner. We arrived at Metro Palais Royale Musee du Louvre around seven, and saw a few musicians playing a bluesy kind of jazz geared towards dancing families with children. A search for tea in a cafe brought us cokes inside the Jardin du Palais Royal, which was just beginning to fill with people. We found a striped concrete “chair” and waited. In a few minutes we discovered surprisingly lovely acoustics. I won’t be able to classify the music, the first song was mainly guitar, drums, and one of those plastic children’s toys that, when spun around, makes a screeching noise. The fourteen member band had the right combination of very melodic moments and more abstract solos. The abstract bits grew less solo and we moved on, walking vaguely in search of an Indian restaurant.

We found one, just before we found a Peruvian band, in an archway near Place Jardin du Bellay, playing salsa music. Around the corner, rock music might have been nice had it not been so loud and offered somewhere to stand apart from the middle of the street. It wasn’t that late, so the cars hadn’t given up. All this was competing with a house party, which had ended up on the balcony, belting out classic French songs on a Karaoke machine, without an ounce of professionalism but plenty of fun. There was so much smiling and so little inhibition, people danced happily to music of inconsistent quality. In France, expressing such strong sentiment is rare and almost never done falsely, because, the stronger your statement the more likely someone will contradict you.

Heavy metal blared and punks moshed (if that’s what they still call it), within a block of hippies, smoking to reggae, in one direction, and in the other, rowdy pub crawlers, blocking a street, singing bawdy old French songs, accompanied by a complete horn section. On more than one occasion bands played within 30 meters of each other with everyone in between dancing to both. The drum section of a marching band had people following them from block to block and found an excellent blend when they arrived in front of a Marais bar, filled with very pretty boys, blaring house music, and spraying foam from a second story window. People bought Moroccan sausage from venders who had set up in the middle of the street. The smoke and fire, from their makeshift grills, made the fireman nervous but heightened the carnival atmosphere.

On this crazy night, the music was not nearly as special as the atmosphere, normally reserved, French don’t show enjoyment of anything. Something has to be REALLY good to make an impression. But perhaps this is the night to be easily impressed, to show exuberance, to allow oneself to visibly enjoy. Maybe they use it all up a few nights a year so they can return to an ordinary cynical state that makes them so damn stylish.

Like fireworks being shot from the middle of a crowd to celebrate the New Year, it was completely disorganized; roads not clearly blocked off but not functioning, police only in the center of town, no extra trash bins and rubbish piling up after the first hour never mind the 12th, beer bottles in quantities that made walking impossible. Waiting in line at the grocery store in Paris can cause riots, yet Parisians deal nonchalantly with utter disorder. People didn’t get upset, when two bands were competing, because they set up across the street from one another. They didn’t seem to notice. Some sort of extra refined taste in chaos.

A tight, yet very loud, punk band, near the Jardin du Luxembourg, had somehow had lost its fans to the much less interesting heavy metal band head banging to detract from their Michael Bolton hair. A question of placement I suppose, though that seemed fairly flexible. Finally we saw two mellow guys playing, not stairway to heaven but that other one, and we decided we were too old to stay up all night and began to make our way home. As an American, I’m used to people being overly-enthusiastic, especially about things of questionable quality. Yet Parisians managed to surprise me again. . . always complicated, often contradictory, and delightfully unpredictable.

(The bird at the top of the entry was created by André François for the festival)