WebTeacherTips Archives - Page 16 of 22

Screen shots and the missing desktop item

I take a lot of screen shots. Daily. Sometimes dozens a day, depending on what I’m writing about.

I use SnapzPro for this work. I save the image to the desktop and later move it into a folder.

I can be sailing along, have 12 or 15 screen shots, and suddenly they stop appearing on the desktop. Turns out this is a known OS X bug. The file is there, you just can’t see it.

I’ve used spotlight to search for it and open it in preview. Then I do save as and replace it. That pops it into place on the desktop. It also works to do the same shot again and click Replace when the Mac tells you the item is already on the desktop. Again, this pops up the image icon on the desktop. You can also select Go > Desktop when in the Finder or select Desktop in a Finder window. When the Desktop folder opens, click the item to make it appear.

No matter which method you use, it’s a pain and several extra clicks to get what you need to show up on the desktop.

Summary of eHow articles for July

Went to Mesa Verde the other day. An inspiring place that remains one of my favorite national treasures.

I’ll be going walkabout for a few days and won’t post for a while. I thought I’d let you know what I’ve done at eHow this month before I go.

Tip: Calculate the Specificity of CSS Selectors

Have you ever added a new rule to your CSS stylesheet, but seen no change in the results on the page in the browser window? Maybe the new selector wasn’t specific enough to overrule and existing rule in your stylesheet. Here’s how to mathematically calculate the specific weight of your CSS selectors.

The W3C uses mathmatical formulas to determine the weight of any particular style. The more weight a style has, the more specific it is.

In strict XHTML (where you do not use inline styles), specificity is figured using three numbers. For example 0, 0, 0.

The first number on the left is the number of IDs in the selector. ID wins the most points in this game. A selector with the most ID points is always the most specific.
#header specificity = 1, 0 , 0
#header #logo specificity = 2, 0, 0

The second number represents the number of class, pseudo-class and attribute selectors.
.post_head specificity = 0, 1, 0
#content .post_head specificity = 1, 1, 0

The third number represents the number of element and pseudo-element selectors.
p specificity = 0, 0, 1
#content p specificity = 1, 0, 1
#header #logo p specificity = 2, 0, 1

If there’s a tie for the number of IDs, tne the selector with the most classes wins. If there’s still a tie, the selector with the most elements wins. If two selectors are still tied, then the conflict is resolved by the position of the rule in the cascade.

If inline styles are allowed (as in transitional XHTML), then four numbers are needed. The weight of an inline style is given in the first position. Here are some examples using four digits.
#content specificity = 0, 1, 0, 0
#content p specificity = 0, 1, 0, 1
If an inline style were added in the HTML, say to a P element in the content div, then the numbers would be
1, 1, 0, 1
In this case the specificity would be greater for the paragraph with the inline style than for other paragraphs in the content div, thus winning the specificity battle.

HTML Basics: What every learner needs to know

Sometimes the basics get lost in the quest to get going quickly, start designing, start looking good. Teachers and learners sometimes lose track of the fact that the foundation holding up every act of communication on a web page is HTML.

The basic fact in terms of foundational HTML mastery is just this: HTML elements are based on semantic logic. HTML elements communicate meta information about what certain parts of a page do semantically. HTML tells you that certain bits of text are headings or paragraphs, or lists, or blockquotes, or links, or subscripts, or tables. That semantic information is the essence of a successful communication. Get the HTML right, and your page communicates successfully with everyone in every circumstance.

Before looking good even enters the imagination of a designer, the knowledge needs to be there about the semantic building blocks of every web page, and that, my friends, is plain old basic HTML.

Three Ways to Get Web Design Students to Talk

Have a class that needs a little bonding or is not opening up to class discussion? Here are three activities that might draw them out.

Have each student think of a site they like and a thing they do frequently on that site. This becomes a task for the other students. Everyone must go to the site and do what the student suggesting the task does. It’s interesting to see how hard it is for some to find their way to whatever it is. This leads to some interesting discussions about navigation, usability, and what you’re willing to go through if you’re really motivated to figure something out.

Do a card sort exercise. Here’s a description of card sorting if you don’t know what it is.
Make groups of two or three students for the card sorts and then have the groups compare what they did after the cards are sorted. This leads to lots of conversation. It gives the teacher a chance to talk about how different people approach the organization of ideas and how essential it is to be absolutely clear about global menu categories, link text and usability.

Have them make a web page with data about one of the other members of the class. They must interview the person. Then they put the info into a page of their own design and share what they did with the class. Here you can do teacher talk about how certain colors, design elements, fonts, or whatever help represent the “idea” of a particular person. In the ensuing discussion students present their pages and the group can talk about how well the page succeeds in capturing a person.

Attribute Selectors in CSS

HTML elements can have attributes. For example, an A element can have an HREF attribute. An IMG element can have a TITLE attribute. Using attribute selectors in CSS provides an additional way to hang styles on very specific elements.

An attribute selector will target a specific element if the selector matches the element or if some specified attribute condition is met. Attribute selector values are given in square brackets, [like this]. If you write an attribute selector rule where the selector matches the element, it might look like this:

img [title] { some rules here; }

This selector targets any IMG element with a TITLE attribute. It doesn’t matter what the content of that title attribute is, it only matters that the element has a title attribute.

You can get more specific than that with an attribute selector, using the syntax [att=val]. With this syntax, the attribute targeted must have a specific value. Suppose, for example, that you want to create a style for images that have the exact TITLE attribute “mybunny.” Now the TITLE attribute alone is not enough, the VALUE must match exactly as well.

img [title=mybunny] { some rules here; }

Another type of attribute selector uses a tilde-equals sign combination like this [att~=val]. With this selector, you can match any element that has a particular value among a list of space separated values. For example suppose you have an h3 element on your page with a space separated list of class attributes including bulletin and warning, like this:

<h3 class="bulletin warning">

This CSS attribute selector

h3[class~="warning"]{ some rules here; }

would target the h3 element with the space separated list of attributes. It only has to match one of the items in the list.

The final type of attribute selector uses the syntax |= to match hyphenated elements. This most often is used in rules targeting specific language declarations, where you might have hyphenated attributes in an HTML element such as en-US or en-GB. An example selector is:

body [lang|="en"]{ some rules here; }

That rule would match any LANG attribute that had “en” among a hyphen separated list of languages.

Technorati Tags: web design, CSS

Tables, borders, and border-collapse

Need a table? For your table data, not for layout? (We’re clear on that issue, right?) Okay, make one. Here’s how to do the borders using CSS.

The border property is what you use to add a border to a table with CSS. You might have a rule such as this one:

table {
border: 1px solid #333;
}

That would add a one pixel, solid border in a gray color around the table. But it wouldn’t add borders to the table cells themselves. So write this rule, too.

td, th {
border: 1px solid #333;
}

Now everything has a border. In fact, there are two borders around everything, because each individual td, th, and table has its own borders.

To remove the space between these borders and make them appear as a single border line, use border-collapse. Put it in the table rule only. The possible values for border-collapse are separate, collapse, and inherit. You want them to collapse.

table {
border: 1px solid #333;
border-collapse: collapse;
}

Now you can get rid of those inline HTML attributes in your table code that set the borders and move table presentation to the CSS, where it belongs. Peace and joy will follow you where ever you go.