melbourne chapter

Ever wanted to have your own stylised numbers in an ordered list? Well using CSS alone this is impossible - as far as i know - but with the help of PHP and list-style-image we can indeed use our own stylised numbers. Anyway here’s how I do it:

<ol>
< ?php
 
var $pets = array('dog', 'cat', 'fish');
 
for($i = 1; $i <= count($pets); $i++) {
echo '
  <li>'.$pets[$i-1].'
';
}
?>
</ol>

Of course you could use something other than a list like this , but that’s not semantic is it? Using the method above will mean even when the user has CSS disabled or images for that matter there will still be numbers!

AMENDUM

Well it appears I am wrong, there is a way of styling ordered lists in purely CSS and it’s so damn simple i cannot believe i overlooked it - Thanks to stylizedweb.com for this snippet and Craig for pointing it out!

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
<ol>
  <li>
This is line one</li>
  <li>
Here is line two</li>
  <li>
And last line</li>
</ol>

Ever found in Firefox that strange dotted outline that appears when you click a link? I’ve always thought it was just one of those things that couldn’t be fixed, until recently:

a:focus {
 
-moz-outline:0;
 
}

As pointed out by AD (below) this “strange dotted outline” I mentioned yesterday is indeed a focus box - which for accessibility reasons should not be removed - However if you wish to remove the unexpected elongated focus box in Firefox which appears when you click a link on a horizontal list menu this is a quick and dirty solution:

#menu li a:hover, #menu li a:active {
 
-moz-outline:0;
 
}

Thanks for pointing that out Ad

If you need to nicely align and image in a line of text here’s how you do it

.inline-img {
 
/* Firefox */
vertical-align:middle;
display:-moz-inline-block;
display:-moz-inline-box;
/* Everybody else */
display:inline-block;
 
}

Presto!

Mod Rewrite is an Apache module commonly used with PHP to create Search Engine friendly URLs. Essentially this module lets us mask ugly querystrings with much more meaningful URLs. For example take a products page in a database driven catalog:

http://www.mysite.com.au/catalog/product.php?pid=123

At the moment this URL tells us nothing about the destination page and searchbots lare deterred from indexing such URLs - Wouldn’t it be better if we included the product name?

http://www.mysite.com.au/catalog/products/t-shirt/123

Much better . Using the power of regular expressions we can extract the information from our new URL and pass this information onto the correct PHP page behind the scenes.

So how do we do it? In the case of our new URL all we need to do is extract the last part which carries the product id and pass this onto the product.php page. We can do this easily in a .htaccess file:

First we enable the Mod Rewrite engine using RewriteEngine on:

# HTACCESS
 
RewriteEngine On # enable the module

Then we set the base url we will be writing from using RewriteBase base

RewriteBase /catalog/ # base URL which in our case is 'catalog' since this is where our app is sitting

Now we do our Rewrite using the RewriteRule pattern substitution directive - pattern is our Regular Expression which we use to evaluate the incomming URL, substitute is the string which is substituted for (or replaces) the original URL for which Pattern matched.

RewriteRule ^products/[a-zA-Z0-9-_]+/([0-9]+)$ product.php?pid=$1
# End HTACCESS

The Regular Expression:

- Caret ^ and dollar $ sign characters signify the start and end of our pattern string

- Square brackets specify ranges of allowed characters, such as A to Z, 0 to 9

- Round brackets are used to “capture” parts matched in our pattern - in this case the product id - which we later reference in our substitute URL using back referencing $1
(ref numbers are indexed according to each set of round brackets i.e. if we had enclosed the product name match in rounded brackets this would be $1 and the product id would be $2)
Easy enough? This is a relatively simple rewrite and I have explained it in fairly layman terms, more complicated rewrites require some knowledge of Regular Expressions. If you haven’t played with Regular Expression I highly recommend you checkout Wikipedia, DevShed articles and the cheat sheets supplied by ILoveJackDaniels.com.

1. Centering a block item horizontally

To centre a fixed width div we can use the CSS margin-left and margin-right commands set to auto. For pre IE 6 browsers you’ll need to use the text-align property set to centre:

body {
 
text-align: center;
 
}
 
div#wrapper {
 
margin: 0 auto;
text-align:left;
 
}

2. Centering content vertically

Having troubles getting vertical-align to centre? Forget it. Set the line-height to the same height as the container like so:

div#cell{
 
height: 24px;
 
line-height: 24px;
 
}

3. Using images for stylish headings

Using images for stylized headings is okay, but we should make sure the heading is still accessible to a screenreader. To do this we can use a background image on the header tag and hide the plain text from view using the text-indent command:

div#banner h1 {
 
height: 26px;
 
text-indent: -2000px;
 
background-image:url(images/header1.gif);
}

4. Getting backgrounds to stretch the full length of a container

CSS has issues controlling things vertically - take backgrounds and vertical alignments for example. If you need a background colour to extend the full length of a block element such as a div you’ll need to use a background-image and tile it vertically:

div#content {
 
background:#fff url(images/bg.gif) top left repeat-y;
}

5.Using 2 classes together

In CSS you can apply two classes to an element. For example, in my piped horizontal lists (Eg Home | About | Contact) I have a selected class to highlight the active item and a last class to remove the piped character from the last list item. To apply these two classes I simply add both classnames to the class attribute seperate by a space:

<a class="last selected" href="home.html">Home</a>

Ugly URLs…
Querystring style URLs like below are synonymous with dynamic systems

http://www.mysite.com.au/catalog.php?category=cartridges&prod_id=33

While URLs like this are completely functional, there are a few issues with URLs like this you should consider before going live:

1. The underlying technology is exposed such that script kiddies can inject their own data - such as an sql injection.
2. The URL contains ampersands which, when unescaped will affect the XHTML compliance of linking websites
3. Search engines will avoid indexing dynamic pages like this
   

So without refactoring the application how can you make more freindly URLs? A simple solution for Apache based users is to utilize the mod rewrite module.

mod rewrite to the rescue!

Note: mod_rewrite is not loaded into Apache by default, to do so open your httpd.conf file and uncomment the module load code

Apache’s mod rewrite module can rewrite requested URLs on the fly, meaning you can substitute ugly querystrings with meaningful URLs, which address security issues, compliance and SEO. So how does mod rewrite work?

Basic rewriting

Typically mod rewrite directives are added to a htaccess file in your web root. Here’s a simple example to start with:

RewriteEngine on
RewriteRule ^old_page.html$ new_page.html

This rewrite transparently redirects a request for old_page.html to new_page.html. The first line enables the engine (only required once per htaccess file):

RewriteEngine on

This next line basically tells the server if there is a request matching oldpage.html, then substitute it with new_page.html. The caret ^ and dollar $ sign signify the start and end of the string used for the match.

RewriteRule ^old_page.html$ new_page.html

If you want to actually do a more traditional redirect and show the location of the page in the status bar just add [R] to the end of the RewriteRule.

Easy enough? That was a pretty simple rewrite. The real flexibility of mod rewrite requires some knowledge of Regular Expressions, which can get quite complex. However, the functionality and flexibility Regular Expressions offer in PHP make them well worth learning. So lets take a look at some common rewrites and the expressions used to make them happen.

Unleashing mod rewrite with Regular Expressions

With the help of Regular Expressions we can create RewriteRules which match a set of URLs and redirect them to their actual pages. Consider the products pages in our fictional Shopping Cart app which only vary in category name and product id. We can identify requests for products page by specifically matching the PHP filename, something representing a category name, forward slash, then something representing a product id. And here’s how our rule looks:

RewriteRule ^catalog/([a-zA-Z0-9-])/([0-9]+)/$ /catalog.php?category=$1&prod_id=$2

The parts in square brackets are known as ‘ranges’. In this case where allowing anything in an alphanumeric range (case insensitive) for our category name, then anything in the numeric range for our product id. We’ve also encased these regular expressions in parenthesis so we can ‘back reference’ our matches to pass the values onto our PHP page. Back referencing is done via indexing each set of parenthesises, $1 for our first parenthesises, being our category name, and $2 for our second parenthesises, being our product id.

Well this is the end of my tutorial on how to use mod rewrite to create freindly URLs. If you have any questions please feel free to post a comment. Cheers!

If you recall the Eloas lawsuit filed against Microsoft for infringing on its patented browser technology you’ll remember Microsoft was forced to change how IE handled embedded programs within webpages. So, over the past 2 years Microsoft has been fiddling with the way handles embedded media within web pages. Early last year MS released the SP2 update, which saw the biggest changes to IE. A part from a much needed Popup Blocker,MS introduced very obtrusive ActiveX Prompt which detected embedded content and prevented pages from fully loading until the user confirmed the prompt. More recently Microsoft introduced a ‘click to active’ mechanism to IE. You may not have experienced this first hand if your a Firefox user or your lucky enough to frequent sites with� workarounds in place. But essentially in order to activate embedded content such as Flash, IE requires that you actually click the movie. This is most annoying for interactivity within� Flash movies when you consider it would take 2 clicks to invoke a getURL() action; on(release){ getURL('http://www.mysite.com.au', '_blank'); }. Fortunately Microsoft still lets us use JavaScript to Embed our Flash movies, and cool guys such as Geoof Stearns have already done the hard work for us - The SWFObject JavaScript. Developed by Geoff Stearns the SWFObject script is actually used by Microsoft and Adobe and it’s ridiculously easy to use. Just a simple inclusion and a small amount of JavaScript and your done:

<div id="flashPlayer"><!-- Flash content will go here //--></div>
<script type="text/javascript">
var so = new SWFObject("swf/movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.addVariable("mp3File", "mp3/numb.mp3");
so.write("flashPlayer");
</script>

Here’s a quick rundown of the script;

Create the HTML element which will contain the final Flash content(I’ve used a div):


<div id="flashPlayer"><!-- Flash content will go here //--></div>


Create a new SWFObject, pass it the path to the swf file, movie name, width, height and Player version we want to detect for followed by the background colour:

var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");

Add the usual parameters using the addParam(param name, value); function:

so.addParam("qality","low");

Pass as many variables as you want to Flash with the addVariable(variable name, value); function:
so.addVariable("mp3File", "mp3/numb.mp3");

Finally write the Flash content to the HTMLcontainer you created above (the div):

so.write("flashPlayer");

More Information;

SWFObject documentation (deconcept.com)

ActiveX changes in Internet Explorer (MSDN)

There are also extensions available to integrate IE workarounds, I haven’t tested these myself though
Dreamweaver MX 2004/8 Extensions;

Softery IE Flash Problem Solver by Softery (on Adobe Exchange) (FREE)

CMX Insert FlashObject 1.2 by Paul Newman (on Community MX)

GoLive 5.x Extensions;

JM SWFObject Action by Jesper Moller (on Adobe Exchange) (FREE)

Just happened to be surfing the net the other day with IE 5 on a friends iMac -  it was either that or Netscape 4.7 what a choice. It was a painful experience. I’m a Firefox fanboy so the lack of tabbed browsing was killing me, sites were falling over unexpectedly, and some were even completely refusing entry. So what to do? Well the simple solution is to upgrade to OS 10, however if your stuck with OS 9 checkout iCab - seemingly the only graphical browser maintained for OS 9.
(And yes iCab has tabbed browsing)

With the hype of “Web 2.0″ I find there’s a certain expectation to use cutting edge technology in each new project. But you have to ask yourself, by using this technology am I really going to benefit the end-user? Take AJAX for example. It’s cool, but it’s not a toy. It’s great for forms, but consider JavaScript doesn’t mesh well with the likes of the back button - a great feature of standard web site user interfaces - good reasoning for not developing a pure JavaScript App (source: http://alexbosworth.backpackit.com/pub/67688) .

An excellent column on useit.com, by usability expert Jakob Neilson covers some great points in relation to technology and usability. Of specific interest was Neilson’s article on “Growing a business Website: Fix the basics first “. In the article Neilson discusses the growing trend of businesses to focus on the “latest and greatest” and forget the basics of usability.”Clear content, simple navigation, and answers to customer questions have the biggest impact on business value.” says Neilson. “Advanced technology matters much less” as on what Neilson describes as the “Elite Experience Vs User Experience”. I couldn’t agree more. I’m constantly forwarded links to “gasp, how cool was that!?” websites from friends and colleagues and I sometimes wonder, is this website really addressing the end-user? Or is web developer/designer just trying to impress friends?

As a developer working on e-commerce sites I’m constantly revisiting user scenarios, but that’s not to say I don’t get tempted to implement “useless” technologies. Quoting Neilson again, “it is tempting to work on what’s hot, but to make money, focus on the basics that customer’s value”.

Here are a few good tips from Jakob Neilson to take away with you;

1. Communicating clearly so that users understand you. Users allocate minimal time to initial website visits, so you must quickly convince them that the site’s worthwhile.
2. Providing information users want. Users must be able to easily determine whether your services meet their needs and why they should do business with you.
3. Offering simple, consistent page design, clear navigation, and an information architecture that puts things where users expect to find them.

And just remember Web 2.0 isn’t all about *new* technology, rather it’s a set of principles and practices aimed at delivery more service-orientated web applications.

For more information on Usability visit Jakob Neilson’s website useit.com, and for Web 2.0 checkout “What is Web 2.0?” by Tim O’Reilley (oreillynet.com)

It’s a bit of a nightmare really. When a word is longer than its containing block-level element it tends to break out. Fortunately in IE 5.5 and above there’s the word-wrap:break-word porperty which can be used to break words longer than their respective containers.
Here’s an example using IE conditional comments:

 
<!--[if IE gt 5.0]
<style type="text/css">
.content{word-wrap:break-word;}
</style>
<![endif]-->
 

However there is no such property that will work in Firefox. So what to do? After a bit of head scratching I decided to have a look at using JavaScript. Although I am yet to come up with my own solution here it is in Spanish thanks to Mr El Micox