Results matching “tutorial” from Ye Olde Rad Blog III

Web typography. It would seem to be a fairly simple topic, no? While I was reviewing some related concepts recently, the following question popped into my head » What exactly is an em?

I've been using em's a long time, and knew they were based somehow on the letter 'M.' Wasn't sure however, if they were based on the size of the capital [M] or lower-case letter [m].

Also felt confident they were based on the horizontal measurement, but not certain. (In both cases, I was wrong.)

Trying to answer this simple question led to a surprising amount of confusion. Many sources on the web discuss ems, and detail their usage, without ever defining what exactly an em is.

Many pages are more complicated than need be. (It's not rocket science.) Finally have a handle on the topic, but my dang eyeballs are burning .. from reading so much.

First, let me answer the question I posed at the top, and therefore avoid the criticism I levied at many other sites.

An em is (drum-roll, please) » a unit of measure (.. defined by a certain number of pixels). So like inches & meters & light-years, which are also units of measure, the em is a » unit of LENGTH.

The thing that makes the em tricky is that » unlike inches or meters, or other fixed (or 'absolute') lengths, the em is a relative unit.

"Relative to what, Rad?" you might be asking. Relative to the font-sizing applied to (in pixels) its » parent element.

What this means is » the SAME font-size declaration (specified with ems) can yield DIFFERENT results (in pixels) .. when/if the parent element for each declaration specifies a different sized font. Hence, the confusion.

(Today btw, is 9-9-09 .. for all you numerologists.) Anybody who has ever used Cascading Style Sheets (CSS) to style a web page has likely experienced the frustration that comes when a particular style refuses to render the way you want.

Understanding the concepts outlined here will help troubleshoot any CSS rendering problem .. much better than banging your head against the wall (.. a technique that seems to provide limited success).

Three rendering principles determine how CSS styles are applied to a web page, and which style(s) take precedence. They are:

1. The Cascade
2. Inheritance
3. Specificity

For reference sake, here's a quick review of basic CSS syntax » selector {property: value}

For example » p {color: green} .. will apply a value of 'green' to the color property for the text contained in a paragraph ('p' = paragraph selector). This is called a CSS "rule".

Here's a brief overview of the 3 rendering principles listed above that determine how CSS rules are applied to a web page:

I. THE CASCADE

Styles are applied in the following "cascading" order: External style sheet » Embedded styles » Inline styles.

A given HTML page can contain one, two, or all three (or none). Styles lower down the cascade normally supplement (add to) styles higher up the cascade. If a styling conflict exists however, styles lower down take precedence.

In other words, the last style applied wins (.. given equal specificity). Here's a brief description of each type of cascading style mentioned above.

1. External style sheets (fileName.css).

These styles can be applied to an unlimited number of HTML pages .. which link to the CSS file. Very powerful, since they allow you to change the look-n-feel of an entire site by modifying a single file. Web pages normally link to only a single external style sheet, tho it's possible to link to multiple external style sheets .. which also cascade, depending on the order they're listed. Large professional sites often use multiple external style sheets.

2. Embedded styles

They are found within the head tag of an HTML page. These styles are enclosed within the 'style' tag <style> and apply only to the HTML page in which they are found. These styles supercede any styles contained within an external style sheet that may conflict with them (.. given equal specificity).

3. Inline styles

Inline styles are applied to individual HTML elements/tags, using the "style" ATTRIBUTE. Note that this is not the same as the style ELEMENT applied to embedded styles mentioned above, tho it's spelled the same way. Inline styles supercede all others that conflict with them .. since the last style applied wins. Plus, they carry maximum specificity (which we'll discuss later).

Been working on the Rad guide to Drive Imaging & Disk Cloning. Helps to be up-to-speed on Web Page Templates. Makes that part of it go more smoothly.

I endeavor to work on it a little every day, tho it never works like that. Yet when I focus, I'm able to put my head down & plow.

The guide seems to have a mind of its own .. like it knows how it wants to turn out. So I go with the flow, prepared to lay aside preconceived notions.

I would hope all Rad regulars are already onboard with a backup program .. since creating backup images with a Cloning program is what we do here.

Today is the 40th anniversary of the first manned lunar landing (1969) .. a historic event for techies .. cuz it was techies who put us there. And techies used » calculus to put a man on the moon (some 240,000 miles away).

At the heart of calculus lies the notion of » limits (a concept I'm quite familiar with, unfortunately).

Calculus was invented to solve (among other things) the problem associated with finding the instantaneous rate-of-change .. as visualized by the slope of a line tangential to any given point on a curve (of a graph).

To calculate a slope, you might recall (dust off them algebraic brain cells) we pick two representative points, find their difference and divide the » "rise by the run" .. the change-in-Y / change-in-X (.. commonly referred to as "delta-Y over delta-X").

As the change in the X coordinates (recall from basic Algebra) gets smaller and smaller, we get closer and closer to determining the slope (rate-of-change) at a particular point.

The problem however .. is that a point has no size, so the "change" or 'difference' (in the X coordinates) becomes zero. And dividing anything by zero is a major mathematical no-no. (Defined as "undefined" .. a mathematical black hole that will crash your computer.)

See t=13:00 here, and especiaaly t=13:30.

Limits

The concept of » limits was introduced to address this problem. Imagine standing in your living room, and walking half the distance to the furthest wall. Then walk half the distance again. And again & again.

Each time, you keep getting closer & closer. But .. you'll never actually reach the wall (cuz you keep going only half the distance). A hundred years from now, you'll be very, very close (to the wall), but still not quite there.

Getting closer & closer to the wall is analogous to decreasing the size of the difference between the two X coordinates along a curve plotted on a standard graph (which contains an X & Y axis). But the limit (drum-roll, please .. here it comes) is » the wall! .. even tho, in reality, you never actually get there.

That's why the notion of a limit represents a mathemetical "concept" (not reality). If you think about it, you can't really have an instantaneous rate-of-change (.. cuz nothing can change in an instant, cuz an instant contains no time). And the word 'rate' implies "per-unit-something." That 'something can be (and often is) » time.

That's also why the result is called/termed a 'derivative' .. cuz you can't get there with conventional mathematical manipulations. It's kinda like what that old farmer told me down South when I asked for directions » "Son, you can't get there from here." =)

Been learning the UNIX Shell, which uses a command-line interface (from a terminal) .. something I've wanted to do ever since we upgraded to the Virtual Private Server last year. (Linux is a variant of UNIX.)

Even basic knowledge of (how to use) the Linux command line makes life administering a VPS much easier.

The Shell is simply a program that allows users (like me) to interact with the operating system (sometimes termed the 'kernel'). It can be conceived of as a 'layer' sitting between you and the operating system .. hence the term » shell.

Several shells exist, but nearly all Linux distributions come with » bash (Bourne Again Shell) .. cuz it's free, powerful and easy to use.

On my laptop I have installed a copy of Ubuntu Linux that I use to learn the shell (practice). Before jumping into learning the Shell, I figured this was a good time to upgrade my 'installation' of Ubuntu .. to the latest release (» v9.04, 'Jaunty Jackalope').

So I downloaded » this virtual machine (1.1 gig, using uTorrent). Had trouble getting it connected to the Internet, but that was due to my own inexperience with VMware, and not due to any short-comings of Ubuntu.

Anyway, I am really digging learning the Shell, cuz it's something I can use right away. For example, yesterday I upgraded the blogging software we use here at Radified (Movable Type) to the latest version (» 4.26). Something that used to take hours to accomplish was done in minutes .. (using a series of Shell commands). Beautiful.

Back when I investigated how to create a webpage template, a couple weeks ago, I really had in mind the notion of using a template as the basis for a new Rad guide .. not one on Dreamweaver Templates however, but rather one for » Drive Imaging & Disk Cloning. Today I created that template, and began a new Rad guide.

Definitely takes longer to get up-n-running when using a template, cuz you first must determine exactly how the guide will be structured .. and what items to include in the template, and what parts need to be editable.

Can't just start cranking out pages of text and entertaining new ideas (.. like I used to) .. leaving the details of page structure to deal with later.

Templates force you to pre-think everything up front, before you begin generating content-one. They even force you to anticipate changes .. which is new for me .. especially since I've grown accustomed to the ready-fire-aim approach, which leaves the details of page structure for later .. but by then it's difficult to make changes .. cuz each page must be edited individually (.. hence the need for templates).

I was so eager to get started on the guide that I actually had to start over (several times) .. due to major template modifications. (Arrgh!) Kept getting new ideas .. things I wanted to add/tweak.

You can always modify a template, as that's what they are designed for. But when a template requires many edits, it seems easier to just start over and create a new one. (Something I'm getting good at .. from all the practice.)

If I knew then what I know now. Ever uttered those words? Looking back on my progression of web skills, one omission stands out » incorporating the use of templates to help develop & maintain the pages of my web site.

Templates are both powerful & flexible for two reasons:

1. They speed up site development, by allowing the rapid creation of web pages based on a preformed (uniform) structure .. so all your pages have the same look & feel.
   
   
2. They facilitate site maintenance, by enabling structural changes site-wide via the editing of a single-file .. similar to how CSS works. This aspect of templates is considerably more significant than item #1.

If your web site grows bigger than expected (as they usually do), and you want to make structural changes (non CSS-based changes) to your web pages, you'll have to edit each page individually (.. which suks giant goose eggs). Tedious maximus.

When CSS came along, website designers could transfer all style controls into a single file, so that the look of an entire site could be modified by editing a single file (provided, of course, the entire site was based off of the same style sheet). Very cool development.

But what about structural changes? That's where templates come in. To be honest, I'm not sure if web design programs (such as Dreamweaver and Expression) had the ability to generate templates back when I launched the site. But they do now.

"Pick the professor, not the course" is sage advice for those heading off to college. With that in mind, I've discovered an exceptional instructor for folks wishing to master some of the programs contained in Adobe's Creative Suite.

Seems like I'm always up for learning some new digital tricks and » Deke is da-best instructor of Adobe programs I've found yet .. where the term best means easiest to learn from.

He specializes in Photoshop, but also teaches Illustrator & InDesign. It's clear he has been teaching and refining these courses over many years.

Of course, we all have different learning styles, so we respond differently to different types of instructors. But I feel comfortable recommending any of the titles he has authored, especially those contained in his trademark series » One-on-One.

I like how he comes across as someone who is more concerned that students learn the program and its accompanying toolset than trying to impress you with their level of knowledge. I most like that he obviously has the technolust. His enthusiasm is contagious.

His courses nicely balance a folksy demeanor (he lives in Boulder) with technical jargon. Very personable. Doesn't seem to take himself too seriously.

For example, he has no problem referring to Illustrator's Selection and Direct Selection tools as » "the black-arrow tool" and » "the white-arrow tool." Little touches like this help demystify Adobe's most sophisticated programs.

Redesigned the site's » Archive index page (from scratch). It contains links to all monthly archives posted since the site's launch (summer of 2000). Gateway to Memory Lane.

Been meaning to do that for some time now (years, actually). That page was the single-most mucked-up page on the entire site. The code was a rat's nest of deprecated standards, poor design choices and mark-up errors. I'm surprised it would render.

Began that page back when I knew very little about HTML and before I'd even heard of CSS. Over the years, the muck seemed to multiply as the page grew. It's not a highly trafficked page, so I didn't worry about it.

Tho at sundry times, I'd go in and try to manually clean up the code. That always proved an exercise in futility. Seemed like the more I tried, the worse things got. The only real solution was a complete makeover (a move which could be viewed as symbolic of the site's growth and development).

Now the page contains a third the mark-up it did before (10-KB vs 30) and the styling looks 3X cleaner, by making use of advanced techniques such as colgroup styling for better readability. Leaner, meaner and faster-loading.

While recovering from the crud this weekend, I took the opportunity to work thru a video-tutorial for Dreamweaver CS4 .. consisting of ~10 hours worth of instruction and 18 chapters.

So I've gotten up-to-speed on DW.CS4 .. the world's finest web design software. (This page you're reading now was created with Dreamweaver.)

Excellent tutorial. Last year, I worked thru the same title (» Essential Training) for Dreamweaver CS3, which was also good. But this one (done by different guy) was noticeably better.

I especially liked how the guy who narrates this video tutorial (for DW.CS4) spent significant time focusing on the intracacies of working with CSS.