blog

• Automatic PHP Portfolio
• Wrapping Text to A Curve With CSS
• WALL-E’s EVE in CSS3

Mar 15 2011

Creating An Imagemap In DreamWeaver

• 0 comments

An imagemap is a large image with clickable link hotspots, used as navigation for a website. A fairly old and well-established technique, imagemaps are particularly useful in the following cases:

1. If your site audience is pre- or post-literate, or is not likely to understand the language used on the website. Young children, for instance, tend to navigate via images rather than text.

2. When the navigation is complex, but can be presented in a visually compelling way. Geographical maps are a good example. (This has to some extent been made redundant by geo-location tools, particularly those featured in HTML5, but is still useful for older browsers or to indicate alternate decisions).

Imagemaps do have several drawbacks:

1. Very small details tend to get lost in an imagemap, lowering visitor response time and occasionally obscuring answers. A geographical imagemap works well if you are trying to determine where the user is from in the world (North and South America, Western Europe, Asia, etc), but fail if you are trying to determine country of origin (Lichtenstein).

2. Because imagemaps depend on the presence of a large image, they can be slow to load, making them inappropriate for low-bandwidth users.

3. Realistically, imagemaps can only be used once on a website, typically on the front page: they take up too much room to be used on every page.

4. Imagemaps are not accessible for users with low visual acuity. For this reason, you should always have an accessible backup navigation system (plain-text links, a drop-down menu in a form) on the same page on which an imagemap is present.

5. Imagemaps cannot easily be coded by hand: it’s a lot easier to use a design tool (for this example, we’ll use DreamWeaver).

Make an imagemap

First, find an appropriate image. Let’s say we have a company that only distributes products in Alberta, and has several distribution outlets in the province: Calgary, Edmonton, Grand Prairie and Fort Vermilion. We want a visitor to our site to choose the location nearest them.

Optimise your image as normal and bring it into DreamWeaver. Bring up the Properties bar. Make sure the image is selected.

You should name your image in the property bar: this a reference for the imagemap HTML, and is distinct from the title, alt, and id of an image.

There are several hotspot creation tools we can use in the bottom left corner of the Properties bar: rectangle, ellipse, and irregular polygon. In this case, as the user may click on the location or the name when using the imagemap, we will use a rectangular hotspot tool around each area.

Using the rectangular hotspot tool, draw an appropriate sized box around a location. Immediately after you let go of the mouse, DreamWeaver will prompt you to enter alt information for the hotspot, so that, in theory, visually impaired users can read the location.

When you are complete, return to Code view in DreamWeaver. You can see why we don’t try to hand-code imagemaps. The code will look something like this:

1. <map name="albertalocations" id="albertalocations">
2. <area shape="rect" coords="136,361,219,389" href="calgary.html" alt="Calgary" />
3. </map>

The imagemap coordinate system is difficult to write, especially for hotspots that are irregular polygons, so using a WYSIWYG system like DreamWeaver is best.

View the completed page in a browser. Note that tooltips do not pop up over each location on the imagemap, due to the fact that DreamWeaver has forgotten to put in title attributes and values for each area, just as it does for regular images. Return to code view and correct this. You might also want to turn off the border on the image.

Finally, force the image not to load by changing the filename referenced in the code. Reload the page: you can see why even with the attributes we have added, imagemaps are not well-regarded in terms of accessibility.

Tags

• webdeveloper2
• XHTML

Mar 13 2011

The Six Most Common Mistakes Made In Writing JavaScript

• 5 comments

While there are many possible errors made in JavaScript, these are the most common mistakes made in day-to-day use:

Writing embedded or inline JavaScript, rather than linked

We link JavaScript files for much the same reasons we write the majority of our CSS in an external style sheet: doing so separates behavior from presentation, makes the code earlier to maintain, and allows the same script to be used on multiple pages without replication or redundancy. There are reasons and causes for embedding your JavaScript code directly on a page, but they should be rare.

Not wrapping HTML comments around your embedded code

If you cannot avoid writing embedded JavaScript, you should write it within an HTML comment:

<script type=”text/javascript”>
      <!—
      alert(“Active JavaScript”);
      -->
</script>

This achieves two things:

1. It shields the embedded JavaScript from the W3C Validator, which ignores anything contained within comments; otherwise, there is the possibility that the validator will confuse JavaScript for HTML, and throw errors.

2. It protects the JavaScript from confusion in older browsers that do not understand JavaScript at all (now a rarity, but still present).

This the only point at which HTML may be used directly inside a script: any other comments or code used must be JavaScript.

Not delaying the execution of scripts

When you run the code above on a page, the alert window appears before any body content: you must click the “OK” button to get past the alert window. This is a frequent problem with neophyte JavaScript programmers: JavaScript written without a delay means that it has nothing to work on, as no body content has appeared when it executes. In traditional JavaScript, this delay is written as the following:

window.onload=function(){ 
      // JavaScript code written here
}

In JQuery:

$(document).ready(function() {
// JavaScript code written here
}

Changing case in JavaScript

JavaScript is case sensitive. This is not only true of JavaScript code, but also of any variables or constants you create within it. tokenOne is a different variable from TokenOne. Scripts often break because you are trying to test or set the value of a variable that does not exist.

Confusing Concatenation & Addition

Concatenation is the joining of two or more strings. Addition is what you learned in school. In JavaScript both operators use the same + symbol to achieve their ends. It’s important to remember what you are joining together, how and why, and anticipate the result, in order to avoid errors:

In JavaScript:

alert(10 + 12);
 // result is 22

alert(10+”2”);
// result is “102” – note that this is a string, not a numeral

alert(“There is no “ + “cake”);
// result is “There is no cake”

token = 2;
alert(10 + token)
// result is 12

token = “Two”;
alert (10 + token);
// result is “10Two”

Confusing single and double quotes

Single or double quotes can be used in JavaScript operations with strings. This works out well until you get them confused, use one to start a string and the other form to end it, or use a single quote in place of an apostrophe character.

alert('Two’);
 // result is Two

alert("Two's");
// result is Two’s

alert ('Two's');
// result is an error

Tags

• JavaScript
• jQuery
• webdeveloper4

Mar 12 2011

CSS3 Animated Image Galleries: Cross-fade and Slideshow Effects

• 0 comments

The image galleries we are about to explore descend from, and share code with, the earliest, simple, CSS gallery I introduced in this blog: a div with position: relative applied, and absolute positioning applied to images inside it. Both examples – a cross-fade and slideshow effect – use the same basic markup. In a compatible browser, mouseover each image to see an example of the associated effect. The photographs used were taken by Patrick Coin, licensed under Creative Commons.

The markup for both examples is exactly the same:

1. <div id=“gallery”>
2.         <img src=“wooly-sunbonnet.jpg” alt=“Wooly Sunbonnet” />
3.         <img src=“nettleleaf-sage.jpg” alt=“Nettleleaf Sage” />
4. </div>

... it is only the CSS that changes between them. Note that for both examples to work, the images must be of the exact same size. It is probably easiest to crop the images to the same dimension using PhotoShop before applying the techniques you see here.

CSS3 Cross-fade Gallery

The applied CSS:

1. div#gallery { position: relative; }
2. div#gallery img { width: 400px; height: 400px;
3. position: absolute; left: 0;
4. -webkit-transition: all 2s ease-in-out;
5. -o-transition: all 2s ease-in-out;
6. -moz-transition: all 2s ease-in-out;
7. transition: all 2s ease-in-out;  }
8. div#gallery img:hover { opacity: 0; }

Very simply, the position: relative declaration makes the div the baseline origin of any elements with position: absolute set inside it. With the second image stacked upon the first, the hover and applied transition works to cross-fade the images.

CSS3 Slideshow Gallery

The slideshow is similar, and again uses images of the same size. The containing div now has a set height and width, with any overflow hidden:

1. div#gallery, div#gallery img {
2. width: 400px; height: 400px; overflow: hidden; float: left; }
3. div#gallery img { -webkit-transition: all 2s linear;
4. -o-transition: all 2s linear;
5. -moz-transition: all 2s linear;
6. transition: all 2s linear;  }
7. div#gallery img:hover, div#gallery img:hover + img {
8. -webkit-transform: translate(0, -400px);
9. -moz-transform: translate(0, -400px);
10. -o-transform: translate(0, -400px);
11. transform: translate(0, -400px); }

The CSS is relatively straightforward: the containing div and images inside have the same qualities, so their base styles may be grouped under the first style declaration: float applied to the images removes any trace of a gap between them. Hovering over the first image moves it up 400 pixels (the height of the image) while the paired adjacent selector ensures that the next image moves in the same way, at the same time.

Note that both techniques shown here only work on pairs of images: useful for “before and after” comparisons or as an animated alternative to image swaps and CSS sprites. Transitioning a sequence of images greater than two requires more advanced code, which we will explore presently.

Tags

• CSS3
• webdeveloper4

Mar 10 2011

Simple HTML 5 Animated Menu Bar With CSS 3

• 0 comments

• Home
• About Us
• Products

CSS3 animation can be used to enhance many features of a site, including menu bar navigation. This example shows how a simple primary navigation bar, built with HTML 5, can be enhanced and animated with CSS3 in a way that gracefully degrades for older browsers.

First, the markup, which is very simple: as the <nav> element should only be used once on a page, we don’t even need to add an id attribute:

1. <nav>
2. <a href=“#“>Home</a>
3. <a href=“#“>About Us</a>
4. <a href=“#“>Products</a>
5. </nav>

We’ll add a background image and a few other basic CSS properties to the navigation bar. It is important to remember that while our background images can be any size, we should always crop them to the size that is actually going to be used; otherwise we are loading a giant image and only using a fraction of it. We’ll also add a small shadow to the link text to distinguish it from the background image.

1. nav { background: url(clouds.jpg) no-repeat; padding: 1em 0; }
2. nav a { text-decoration: none; color: #fff; padding: 1em;
3. font-family:“Trebuchet MS“, Arial, Helvetica, sans-serif;
4. text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7); }

We’ll also add a hover state to the links, which brings in semi-transparent background:

1. nav a:hover { background: rgba(0, 0, 0, 0.7); }

Next, we’ll add an animation component to the default link state, to fade it in over time:

1. nav a { text-decoration: none; color: #fff; padding: 1em;
2. font-family:“Trebuchet MS“, Arial, Helvetica, sans-serif;
3. text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);
4. -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out;
5. -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

You may notice a small gap between the background blocks of adjacent links. This is the same problem we encountered in our very first horizontal navigational bar, and solved in the same way: removing the carriage returns from the between the links:

1. <nav>
2. <a href="#“>Home</a><a href=“#“>About Us</a><a href=“#“>Products</a>
3. </nav>

The result: if the browser understands CSS3 animation, the background fades in and out behind each link on hover. If the browser does not understand CSS3, the visitor will still see a link background; it just lacks animation.

As a final note: the techniques we've discussed here could be applied to an XHTML page equally well; I have used HTML5 only for the purposes of illustration. As always, CSS is appearance, HTML is the markup of data, and the two remain separate.

Tags

• CSS3
• HTML5
• webdeveloper4

Mar 09 2011

Introduction to CSS3 Animation

• 2 comments

In a compatible browser, mouseover the image above to see an example of CSS3 animation. Photograph of Spartan C3 biplane provided by San Diego Air & Space Museum archive, licensed under Creative Commons.

CSS be used for more than the mere transformation of elements; it can also be used to animate them. You should be aware that CSS transitions are very much in draft. Safari / Chrome / Mobile Safari have the best support for CSS3 animation; the ability is also in Firefox 4 and Opera 10.

This new ability in CSS definitely rubs up against JavaScript, which has traditionally been used for animation on web pages. However, animation still falls under the purview of CSS: remember, CSS is about the appearance of elements. That includes animation. The domain of JavaScript is behavior, which is now defined at a deeper and (in some ways) more basic level. If you want to highlight alternating rows of a table, that’s CSS (the way something looks). If you want the data in the table to be sortable based on different criteria, that is JavaScript (the way something acts on a page).

The principles of CSS animation are very simple:

1. Set up the default state of the element in CSS.

2. Define how the element will appear in its final state.

3. Write in a transition routine, written in CSS3, triggered by an event.

4. In the routine, specify the period of time for the transition. Optionally, you can also set what properties of the element should change during the animation, and the rate of change.

You can transition most every CSS property you can imagine, and some you likely cannot. Animating properties like opacity, to create fade in and fade out effects, or CSS3 transforms, like rotate, translate and scale, are obvious… but you can also animate color, background, shadow, width, height, z-index, columns, line-height and font-size, to name just a few.

Let’s say we have an image with an id of biplane on the page. We want to bring the page to life by having this image rotate slightly when the user places their mouse over it. If we were to do this without animation, but still in CSS3, the code would be very simple:

1. img#biplane { width: 500px; height: 415px;
2. border: 20px solid #ffe;
3. -moz-box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
4. -webkit-box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
5. box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3); }
6. /* sets up the basic visual properties for the image */
7. img#biplane:hover {
8. -moz-transform: rotate(7deg); -o-transform: rotate(7deg);
9. -webkit-transform: rotate(7deg); transform: rotate(7deg); }

This works fine, except for the fact there is no transition between one state and the other: the image “jerks” when it rotates, as it moves in a single step. Let’s smooth this transition with more CSS3. At the very basic level, we need to specify only one property: how long it takes for the element to animate between its original state and the new orientation, a draft property called transition-duration:

1. img#biplane:hover {
2. -webkit-transition-duration: 1s;
3. -moz-transition-duration: 1s;
4. -o-transition-duration: 1s;
5. transition-duration: 1s;
6. moz-transform: rotate(7deg); -o-transform: rotate(7deg);
7. -webkit-transform: rotate(7deg); transform: rotate(7deg); }

That’s it. Up-to-date browsers will transition the rotation of the image over 1 second; older browsers, such as Firefox 3.6, will still rotate the image, just without any transition between the two states.

Those closely observing the movement of the image will have noticed that the animation is automatically eased in and out: the rotation starts off slow, speeds up to reach a terminal velocity, and then slows down before it comes to rest (increasing the amount of rotation and/or the time taken to do so may enhance your perception of this).

Animation in CSS has automatic easing. I will discuss the concept of “ease-in” and “ease-out” in another article; for now, simply recognize that animation in CSS3 has built-in organic, natural motion. If you want a more “mechanical” feel to the motion, you can achieve it by changing a property known as the transition timing function to linear:

1. img#biplane:hover {
2. -webkit-transition-duration: 1s;
3. -moz-transition-duration: 1s;
4. -o-transition-duration: 1s;
5. transition-duration: 1s;
6. -moz-transition-timing-function: linear;
7. -o-transition-timing-function: linear;
8. -webkit-transition-timing-function: linear;
9. transition-timing-function: linear;
10. -moz-transform: rotate(7deg);
11. -o-transform: rotate(7deg);
12. -webkit-transform: rotate(7deg);
13. transform: rotate(7deg);
14. }

It’s possible to set the timing function to other values, or even to mathematically plot out Bezier function easing curves:

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)

Finally: if you’ve used the code above, you’ll see that the transition works on mouseover, but not when you move the mouse off the element: when that occurs, the image jerks back to its original position. To solve this problem, we do something that may appear counter-intuitive at first: we move the transition information out of the :hover state declaration and into the default state. At the same time, we should recognize that this code is getting a little long, even for CSS3: transition properties, like everything else, can be shortcut. Let’s move the code and re-write it at the same time:

1. img#biplane { width: 500px; height: 415px;
2. border: 20px solid #ffe;
3. -moz-box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
4. -webkit-box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
5. box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
6. -webkit-transition: all 1s ease-in-out;
7. -moz-transition: all 1s ease-in-out;
8. -o-transition: all 1s ease-in-out;
9. transition: all 1s ease-in-out; }
10. img#biplane:hover {
11. -moz-transform: rotate(7deg); -o-transform: rotate(7deg);
12. -webkit-transform: rotate(7deg); transform: rotate(7deg); }

Perhaps the easiest way to think of this is that we previously indicated that the transition only occurred on the way to the hover state; with this change, we are indicating that the transition affects all effects, over a 1 second period, using ease-in and ease-out, both to and from the default state.

Tags

• CSS3
• webdeveloper4

Mar 08 2011

Course Overview: Cascading Style Sheets (CMPN 266, Continuing Education, SAIT)

• 0 comments

Duration:

1 three-hour night class per week for 6 weeks

Prerequisite:

A passing grade in CMPN 215

Description

This course provides learners with the skills to present pages in an attractive manner with CSS.

Evaluated Components

• Two in-class quizzes (few multi-choice options, closed-book), worth 10% each, for a total of 20%
• One in-class or homework exercise (open book), worth 20%
• One assignment (creating and uploading a website) worth 40%
• One professionalism mark, worth 20%. Half of this mark is attendance (detailed below) and half is attitude (your participation in the class and interaction with your instructor).

Expectations of Students

Expectations for students are the same as for CMPN 215.

Expectations of Instructor

Expectations for your instructor are the same as for CMPN 215.

Tips for students

• Time management is the most valuable skill you have.
• SAIT has more resources than you are probably aware of. We have counseling services, health services, faith centres, student tutoring and groups. Help is there for you, but you have to choose to use it.
• Remember that I cannot and will not judge your work based on the effort you feel you have put in, how hard you have tried, or the hours you have spent. All I can evaluate is the work you give to me. That work will and must be judged on its merits, not your own.
• Conversely, you should not feel that a poor evaluation of your work is necessarily a reflection on you, or a judgement of your worth.

Tags

• CSS

Mar 07 2011

CSS3 2D Transformations: Skew, Scale, and Translate

• 0 comments

Compared to rotate, the remaining 2D transformations in CSS3 are probably of less utility: scale and translate have always been available in one form or another in CSS, by modifying the width and height of images, or positioning elements using relative or absolute position. The primary advantages of using the new CSS3 values is that they are more direct, and can be animated with great ease.

skew

skew is probably the trickiest of these to understand, as its values (in degrees) don't appear to apply in the ways that one might expect. To me, the easiest way to consider skew is to think of the values as “pulling” on opposite sides of the element box to create the angle specified:

As this would appear in a CSS declaration:

1. img#car { -moz-transform: skew(21deg); -ms-transform: skew(21deg); -o-transform: skew(21deg); transform: skew(21deg); }

By default, skew is in the horizontal (x) direction. You can also skew in both directions at once ( skew(21deg,10deg) ) or in separate directions ( skewX(21deg), skewY(10deg) ). Negative skew values will tilt the element in the opposite direction. Used together, and with careful positioning, it is possible to produce a “box” effect from three equally-sized images, a hint that 3D effects are achievable in CSS3.

scale

scale is a simply a scalar value: a multiplier by which the size of the element is decreased or increased:

1. img#car { -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); }

As with rotate and the other CSS3 transformations, a scaled element does not influence its surroundings.

Why would I use CSS3 scale when I have width and height?

Because width and height only directly influence the size of images: using the properties on anything else, such as a <div> constrains the shape of the element, but does not scale it. Try putting an image and several paragraphs in a div and applying width, height and scale to see the differences.

Again, scale can be constrained to the x and y values alone, via scaleX and scaleY.

translate

translate moves the element from its current location. In this respect, it is very similar to relative positioning. The property doesn't offer many advantages over relative positioning in itself, but it can be animated very smoothly in CSS3... examples of which we will explore next.

1. img#obj { -moz-transform: translateX(2em); -ms-transform: translateX(2em); -o-transform: translateX(2em); transform: translateX(2em); }

Tags

• CSS3
• webdeveloper4

Mar 06 2011

Course Outline: Cascading Style Sheets (CMPN 266, Continuing Education, SAIT)

• 0 comments

1. Introduction to Cascading Style Sheets

   Introduction

   XHTML is about the semantic markup of data; CSS is the appearance of that data. Using XHTML alone will make a functional web page; CSS can make it beautiful.

   Learning Outcome

   Outline the origins and fundamental concepts of Cascading Style Sheets (CSS).

   Objectives

   1. Discuss the history of CSS.
   2. Describe browser support for CSS.
   3. Discuss the importance of structure/style separation.
   4. Diagram the order of CSS influence: inline, embedded, and linked.
   5. Explain basic CSS syntax and write a simple CSS declaration.
   6. Describe the cascading mechanism and inheritance
   7. Discuss media type support in CSS.
   8. Create an external style sheet.
   9. Write a comment in a style sheet.

2. CSS Color & Units

   Introduction

   In order to create pattern and structure, color and proportion, via CSS color specifications and measurements, are used.

   Learning Outcome

   Use CSS qualities of color and units to modify the appearance of XHTML elements.

   Objectives

   1. Define the four methods by which color may be defined in CSS.
   2. Define the five absolute and three relative units of measurement that can be used in CSS.
   3. Describe concrete and fluid philosophies of web design, and the appropriate units of measurement for each.

3. CSS Selection Techniques

   Introduction

   So far we have learned how to use CSS to alter the appearance of basic elements, such as paragraphs and elements. However, there will always be occasions when you need to drill down to unique, specific uses of markup on a page. CSS has a number of selection methods to achieve this.

   Learning Outcome

   Use CSS selection techniques to gain access to different elements in an XHTML document.

   Objectives

   1. Describe basic and advanced selection techniques.
   2. Use class and ID attributes.
   3. Apply style rules to text elements using various selection techniques.

4. CSS and Images

   Introduction

   Images, by themselves, are rendered perfectly in XHTML. However, it is only with CSS that we can position images with any kind of precision relative to text and each other, and place images in the background of elements.

   Learning Outcome

   Use CSS to modify the appearance of inline images and place images in the backgrounds.

   Objectives

   1. Describe basic and advanced selection techniques.
   2. Use class and ID attributes.
   3. Apply style rules to text elements using various selection techniques.

5. Customising the appearance of tables, forms and lists

   Introduction

   Even when they are used correctly in a web page, tables, forms and lists tend to be presented plainly. CSS can be used effectively to customise the appearance of these elements so that they retain their meaning but look like anything the designer wishes.

   Learning Outcome

   Use CSS to modify the appearance of inline images and place images in the backgrounds.

   Objectives

   1. Customise the appearance of lists.
   2. Modify the appearance of table elements.
   3. Customise the appearance of an XHTML Strict, semantic form.
   4. Create a navigation menu for a web site using XHTML and CSS.

6. Layout in CSS

   Introduction

   CSS can also be used to layout entire pages through the rules you have already learnt, together with judicious use of the div tag to group multiple XHTML elements together.

   Learning Outcome

   Use box properties together with float and position to achieve advanced web page layout.

   Objectives

   1. Describe the use of box properties, float and position in CSS.
   2. Use divs to create a complex web page layout.
   3. Customise the appearance of an XHTML Strict, semantic form.
   4. Use absolute positioning to overlay elements on a web page

7. Advanced CSS: CSS Levels 2 & 3

   Introduction

   CSS has continued to grow and be developed on. CSS2 is a well-supported addition to the CSS we have learnt to this point; CSS3 while still in draft as of this writing, has a number of exciting features, many of which are supported in cutting-edge browsers.

   Learning Outcome

   Use CSS Levels 2 and 3 to achieve advanced web page layouts.

   Objectives

   1. Describe CSS Levels 2 and 3 and browser support.
   2. Describe proprietary browser versions of draft CSS 3 properties.
   3. Apply pseudo-classes to style portions of elements.
   4. Apply advanced selectors for more precise selection of elements

Tags

• CSS

Mar 05 2011

New Blog Features: Upcoming Events & Feature Bar

• 2 comments

As promised, two new features for the blog this weekend:

• “Upcoming Events” now heads up the sidebar (or appears immediately under the colophon, for those not signed in). All visitors to the blog will see events of broad interest; signed-in users who are current students will see additional events that pertain to them, such as dates for upcoming quizzes and assignments in classes they are taking with me. (Specific student calendar entries are yet to be made; everyone is currently between classes or assignments).

• A feature bar at the top of the page directs visitors to a random array of past articles. The current selection is not yet great, but will broaden with time, producing greater variation: with almost 300 blog entries, there are a great many to choose from.

I also added a brief but authoritative statement regarding ads at the bottom of the sidebar. I believe that everyone experiences plenty of “advertising impressions” during the course of a day, online and off, and have no desire to add to that deluge. Suffice it to say that despite encouragements to “monetize” this blog, you will never see advertising anywhere on this site. It will remain completely free for use, with its content licensed under Creative Commons, forever.

I hope you find the new features useful, and welcome any feedback or suggestions in the comments.

Tags

• sitenews

• Showing 1 – 9 of hundreds
• >
• Oldest

This content by Dudley Storey is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Canada License.
Site written in XHTML 1.0 Strict, CSS Levels 1, 2 & 3