Today we have taken a stand. Opera has filed a formal complaint with the European Commission to force Microsoft to support open Web standards in its Web browser, Internet Explorer. We believe that Microsoft has harmed Web standards by refusing to support them; Microsoft often participates in creating Web standards, promoting them, and even promising to implement them. Despite their talent, however, they refuse to support Web standards correctly. For example, Internet Explorer is the only modern Web browser that does not support Acid2.

Now, unlike Chris Wilson, I’m not employed as a Microsoft apologist. Yes, Internet Explorer is rubbish, if you don’t like it, don’t use it, move on! However, I have to take issue with Håkon when he asserts Internet Explorer is the only modern Web browser that does not support Acid2.

I’m writing this post using Firefox version 2.0.0.11 - A “modern Web browser” I would think (It is the latest version!). I also have both Internet Explorer 6 and Opera 9 living in Program Files for just such an occasion.

Let’s see if the statement holds water. OK Opera 9, put your money where Håkon’s mouth is:

Impressive! Just like the Acid2 reference rendering.

Next, Let’s see if Håkon is on the money when it comes to Internet Explorer 6:

Ouch! It’s like a train wreck. It’s horrible but I can’t look away.

I must say, Håkon has certainly earned his money so far. I suppose it’s just a formality that we get the Firefox 2 rendering out of the way, I mean, It is an ultra-modern standards-compliant web browser and, like Håkon said, Internet Explorer is the only modern Web browser that does not support Acid2. Firefox 2 is gonna shit this in!

Oops!

Look out Mozilla, you’re about to get hit with an antitrust. The folk at Opera don’t take kindly to browser manufacturers fucking up their Internet, and I’m certainly not going to continue my relationship with you if your browser can’t even display a smiley face properly.

Yes, yes, I know. Acid2 contains an invalid doctype, multiple empty elements and validates only tentatively as HTML 4.01 Strict. Go tell someone who cares.

My point is; Acid2 is not a modern web page and hence should not be used as a benchmark for “modern web browsers” - the likes of which I would not consider Internet Explorer 6 to be a member (if you think a dog year is short, you should live a year in a browser’s shoes!).

Dobbers wear nappies Opera. We don’t need you to look after our rights on the web - especially when it comes to whining about a competitor and leaving you with as much credibility as a Big Brother contestant. How much (anti)trust do you think that stirs up?

What I missed so many years in (X)HTML is some useful markup for poems. The result we can see in the ‘real web life’ - a lot of meaningless tag soup around, disoriented authors lost between silence and semantically meaningless markup… Obviously poem markup is still not available in ‘HTML 5′. Why not? Can this be added to the ‘HTML 5′ draft?

Dr Hoffmann then goes on to plead his case and suggest such semantic elements as <poem>, <stanza>, and <line>.

There were some interesting responses:

• There’s <p> for each stanza and <br> for separating lines.
• Are there use case where software that consumes markup would benefit from poem-specific semantics?
• How would they [search engines] be helped by poem-specific semantics?
• Do I understand you correctly that you want to include markup for a specific domain (poetry) in HTML5?
• A markup language should probably include as little as possible from specific domains and focus on the general things instead. Domain specifics should be handled via an extension mechanism that allows for unambiguous interpretation of the expressed information
• HTML5 actually defines how to mark up poems in HTML (the word "poem" is in the spec half a dozen times, in fact!). Specifically: the stanzas of poems written in the classical form are given by <p> elements, with line breaks indicated by <br> elements (one of the few allowed uses of <br>).
• the stanzas of freeform poems are given by <pre> elements.

The gist of the thread was this; There is no <poem> element and there never will be. If you want to mark up a poem semantically then you have one of three options available to you:

1. Use a <p> element which is as much a poem as <b> or <strong> is a heading
2. Create your own "proprietary" markup (<poem>, <stanza>, and <line>) so you can join the same exclusive club as <blink> and <marquee>
3. Stop reading poetry

The simple and unfortunate fact is this: you cannot mark up a poem (and a great many other pieces of information) in (X)HTML. You can make a piece of text "look" like a poem with a few <p> and <br> elements (just as you can make a piece of text "look" like a heading with a <strong> element), but it IS NOT and WILL NEVER BE a poem.

Sorry Dr Hoffmann. Maybe we should all stick to prose.

The hot topics are:

• Training
• XHTML and CSS
• JavaScript and the DOM
• Web Standards
• Open APIs
• Google Maps
• Content Management Systems (CMS)
• Search Engine Optimisation (SEO)
• Development Environments
• Development Frameworks
• Coding Standards
• Version Control
• Documentation

Training

First, you’ll need some top-quality, number 1 training. And for this, you need look no further than Signified. Signified offers training courses in web technologies offered through Learn4Life at The University of New South Wales, Sydney, Australia. All Signified training courses are delivered by Robert Love, a highly experienced trainer and founder of Signified. All Signified training courses are held in fully-equipped, state-of-the-art, computer labs at The University of New South Wales.

XHTML and CSS

You’ve completed the course and you’ve read both the XHTML reference and the CSS reference from cover to cover, now you really want to see what is possible when XHTML meets CSS. It’s an oldy but a goldy - the one-and-only:

css Zen Garden: The Beauty in CSS Design

JavaScript and the DOM

You’ve completed the course and read the JavaScript reference, you’re following the zen path of unobtrusiveness, now you’re ready to forget everything you learned and start using someone else’s JavaScript framework:

• The Dojo Toolkit
• DOM Assistant
• jQuery
• mootools
• Prototype JavaScript framework
• Rico
• script.aculo.us
• The Yahoo! User Interface Library (YUI)

Web Standards

• Read the hype:
  Web Standards Project
• Join the club:
  Web Standards Group

Open APIs

It’s cool to use the acronym “API” in a sentence. In much the same way as it used to be cool to say “web services” every time you opened your mouth. Of course, acronyms are far cooler than actual words - even if the acronym is a word (REST, SOAP), a cleaning product (AJAX) or a mispelled boys name (JSON).

• Flickr Services
  Flickr has an open Application Programming Interface (API for short). This means that anyone can write their own program to present public Flickr data (like photos, tags, profiles or groups) in new and different ways. There’s a long list of API methods available to you to work with, and we love it when this happens, so… go forth and play!
• Google APIs
• YouTube Developer Area
  YouTube offers open access to key parts of the YouTube video repository and user community, via an open API interface and RSS feeds. Using our APIs, you can easily integrate online videos from YouTube’s rapidly growing repository of videos into your application. After you’ve created a developer profile, you’ll be ready to tap into the power of YouTube.

Google Maps

If you’re not using maps - you’re nowhere man! Get started with the Google Maps API (and other useful mappy stuff) here:

• Google Maps API
• Google Maps API Concepts
• Google Maps API Tutorial
• Free Geocoding

Content Management Systems (CMS)

If God had wanted us to pay for content management, he wouldn’t have started Open Source CMS (Try before you install!). Here’s a few of some note:

• Drupal
• eZ Publish
• Joomla!
• Mambo
• WordPress

Search Engine Optimisation (SEO)

Smoke and mirrors! Don’t blow your allowance on an SEO “expert.” If you have this:

http://www.example.com/products.php?cat_id=5&prod_id=72

Use Apache Mod Rewrite to change it to this:

http://www.example.com/products/widgets/noodle+spranger/

Development Environments

Now you have the know-how, it’s time to put it all into practice. To start, you’ll need a local development environment. I’m an open-source advocate (except for my laptop which is provided to me by work - so don’t give me shit about using Windows!). So, to set up a local Windows/Apache/MySQL/PHP (WAMP) development environment, check out Installing Apache, MySQL and PHP on Windows.

Development Frameworks

If we’re talking PHP - we’re eating Cake.

Coding Standards

If we’re talking PHP - we’re eating PEAR.

Version Control

Make sure you’re working on the right Subversion.

Documentation

phpDocumentor: The complete documentation solution for PHP

What We’ll Assume

• You have a working installation of Apache 2.2.4 on Windows (if not, take a look at Installing Apache, MySQL and PHP on Windows).
• Your Apache DocumentRoot - where your local website files are - is in the default location of C:\Program Files\Apache Software Foundation\Apache2.2\htdocs (if not, simply replace all occurrences of C:/Program Files/Apache Software Foundation/Apache2.2/htdocs with whatever your DocumentRoot is - e.g. C:\www).

Let’s Get On With It

1. Create a new folder C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\mynewsite

2. Go to Start > Programs > Apache HTTP Server 2.2.4 > Configure Apache Server > Edit the Apache httpd.conf Configuration File

   The Apache configuration file opens (httpd.conf)

3. Add this line at the very bottom of the file:

   NameVirtualHost localhost

   Apache will now allow multiple Virtual Hosts to run under localhost

4. Directly under the last line you added in httpd.conf, add the following VirtualHost directive:

   <VirtualHost localhost>
       DocumentRoot "C:/Program Files/Apache Software Foundation/Apache2.2/htdocs/mynewsite"
       ServerName mynewsite
   </VirtualHost>

5. Save and close httpd.conf

6. Open C:\WINDOWS\system32\drivers\etc\hosts in Notepad

   Your Windows hosts file opens

7. You should see this line somewhere in the file:

   127.0.0.1	localhost

8. Directly below this line, add the following:

   127.0.0.1	mynewsite

9. Save and close hosts
10. Go to Start > Programs > Apache HTTP Server 2.2.4 > Control Apache Server > Restart
11. Open mynewsite in your web browser (http://mynewsite/)
12. If all went well, your browser will show a page with Index of /

And, yes, if you follow these instructions to the letter, the software will actually work!

Before getting started with the installations, you’ll need to download the required software packages - all of which are conveniently listed in the following table.

Installing Apache

1. Double-click apache_2.2.4-win32-x86-no_ssl.msi

   The Apache HTTP Server 2.2 - Installation Wizard appears with Welcome to the Installation Wizard for Apache HTTP Server 2.2.4

   

   Click Next

2. License Agreement

   Ensure “I accept the terms in the license agreement” is selected

   

   Click Next

3. Read This First

   

   Click Next

4. Server Information

   Enter the following details:

   Network Domain: localhost

   Server Domain: localhost

   Administrators Email Address: admin@localhost

   Ensure “for All Users, on Port 80, as a Service — Recommended” is selected

   

   Click Next

5. Setup Type

   Ensure “Typical” is selected

   

   Click Next

6. Destination Folder

   Accept the default destination folder (C:\Program Files\Apache Software Foundation\Apache2.2\)

   

   Click Next

7. Ready to Install the Program

   

   Click Install

8. Installing Apache HTTP Server 2.2.4

   

   Wait while the Installation Wizard installs Apache

9. Installation Wizard Completed

   

   Click Finish

Testing Your Apache Installation

In your web browser, go to http://localhost/. If Apache has been installed successfully, you will see the words “It works!”

The “It works!” web page - index.html - is located in the root directory of your Apache installation. The root directory can be found here:

C:\Program Files\Apache Software Foundation\Apache2.2\htdocs

Installing MySQL

1. Double-click mysql-essential-5.0.27-win32.msi

   The MySQL Server 5.0 - Setup Wizard appears with Welcome to the Setup Wizard for MySQL Server 5.0

   

   Click Next

2. Setup Type

   Ensure “Typical” is selected

   

   Click Next

3. Ready to Install the Program

   

   Click Install

4. Installing MySQL Server 5.0

   

   Wait while the Setup Wizard installs MySQL

5. MySQL.com Sign-Up

   Ensure “Skip Sign-Up” is selected

   

   Click Next

6. Wizard Completed

   Ensure “Configure the MySQL Server now” is checked

   

   Click Finish

7. The MySQL Server Instance Configuration Wizard appears with Welcome to the MySQL Server Instance Configuration Wizard 1.0.8

   

   Click Next

8. Please select a configuration type

   Ensure “Standard Configuration” is selected

   

   Click Next

9. Please set the Windows options

   Ensure “Install as a Windows Service” is checked

   Ensure “MySQL” is selected for Service Name

   Ensure “Launch the MySQL Server automatically” is checked

   Ensure “Include Bin Directory in Windows PATH” is checked

   

   Click Next

10. Please set the security options

    Enter and Confirm (retype) your password

    

    Click Next

11. Ready to execute …

    

    Click Execute

12. Processing configuration …

    

    Wait while the Server Instance Configuration Wizard configures MySQL

    Click Finish

Connection Error

In some cases (usually when MySQL is being installed over a previous version), the MySQL Server Instance Configuration Wizard will give a Connection Error that looks something like this:

If this happens to you:

1. Go to Start > Programs > MySQL > MySQL Server 5.0 > MySQL Server Instance Config Wizard

   The MySQL Server Instance Configuration Wizard appears

   

   Click Next

2. Please choose a maintenance option

   Ensure “Reconfigure Instance” is selected

   

   Click Next

3. Please select a configuration type

   Ensure “Standard Configuration” is selected

   

   Click Next

4. Please set the Windows options

   Ensure “Include Bin Directory in Windows PATH” is selected

   

   Click Next

5. Please set the security options

   Ensure “Modify Security Settings” is checked

   Enter and Confirm (retype) your password

   

   Click Next

6. Ready to execute

   

   Click Execute

7. Processing configuration …

   

   Wait while the MySQL Server Instance Configuration Wizard reconfigures MySQL

   Click Finish

Testing Your MySQL Installation

1. Go to Start > Programs > MySQL > MySQL Server 5.0 > MySQL Command Line Client

   The MySQL Command Line Client appears with a prompt to Enter Password

2. Enter the password you specified during the installation

   Press Enter

3. The MySQL Command Line Client will connect to the MySQL Server and produce the following welcome message and mysql prompt:

   Welcome to the MySQL monitor. Commands end with ; or g.
   Your MySQL connection id is 3 to server version: 5.0.27-community-nt
   
   Type 'help;' or 'h' for help. Type 'c' to clear the buffer.
   
   mysql>

Installing PHP

1. Create a new folder C:\php
2. Copy the contents of php-5.2.1-Win32.zip to C:\php
3. On your desktop, right-click My Computer and select Properties

4. In the System Properties dialogue box select the Advanced tab

   

5. Click the Environment Variables button

6. In the Environment Variables dialogue box under System variables select Path

   

7. Click the Edit button

8. In the Edit System Variable dialogue box add C:\php to the Variable value field

   

9. Click the OK button for all open dialogue boxes

Configuring PHP

1. In C:\php, copy the file php.ini-recommended
2. Rename the Copy of php.ini-recommended to php.ini
3. Open php.ini in Notepad

4. In php.ini, find this line:

   display_errors = Off

   and enable the display of errors by changing the value to “On”:

   display_errors = On

   Note: You wouldn’t do this in a production environment - this is just for testing and development!

5. In php.ini, find this line:

   extension_dir = "./"

   and specify the directory in which the loadable extensions (modules) reside by changing the value to “ext”:

   extension_dir = "ext"

6. In php.ini, find these lines:

   ;extension=php_mysql.dll
   ;extension=php_mysqli.dll

   and enable both the MySQL and MySQLi extensions by uncommenting the lines:

   extension=php_mysql.dll
   extension=php_mysqli.dll

7. In Windows Explorer, copy the following dll files:

   C:\php\libmysql.dll

   C:\php\ext\php_mysql.dll

   C:\php\ext\php_mysqli.dll

8. Paste the dll files to C:\WINDOWS\system32

   Note: Most installations don’t require you to copy libmysql.dll to system32, but some do. So it’s better to be safe than sorry!

9. Go to Start > Programs > Apache HTTP Server 2.2.4 > Configure Apache Server > Edit the Apache httpd.conf Configuration File

   The Apache configuration file opens (httpd.conf)

10. Add the following three lines at the end of the file:

    LoadModule php5_module "C:/php/php5apache2_2.dll"
    AddType application/x-httpd-php .php
    PHPIniDir "C:/php"

11. In httpd.conf, find this directive:

    <IfModule dir_module>
        DirectoryIndex index.html
    </IfModule>

    Add index.php as a directory index:

    <IfModule dir_module>
        DirectoryIndex index.php index.html
    </IfModule>

12. Save and close httpd.conf

13. Go to Start > Programs > Apache HTTP Server 2.2.4 > Control Apache Server > Restart

    Note: You need to restart Apache any time you make changes to the php.ini and/or httpd.conf files

Testing PHP

1. Open Notepad and type the following: <?php phpinfo(); ?>
2. Save the file as info.php in your web root directory (C:\Program Files\Apache Software Foundation\Apache2.2\htdocs)
3. Close info.php

4. Open info.php in your web browser (http://localhost/info.php)

   If PHP is installed correctly, you will see a table of information pertaining to your PHP installation environment

   

5. Open Notepad and type the following:

   <?php
   $mysqli = new mysqli('localhost', 'root', 'yourpassword', 'test');
   if (mysqli_connect_errno()) {
       printf('Connect failed: %s', mysqli_connect_error());
       exit();
   }
   printf('Host information: %s', $mysqli->host_info);
   $mysqli->close();
   ?>

6. Save the file as mysqli.php in your web root directory (C:\Program Files\Apache Software Foundation\Apache2.2\htdocs)
7. Close mysqli.php

8. Open mysqli.php in your web browser (http://localhost/mysqli.php)

   If MySQL is enabled, you will see the following output:

   “Host information: localhost via TCP/IP”

   

Finished!

That’s it, you’re done. Hopefully it all came together without any major dramas. If not, you have my deepest sympathies. And if that’s not enough, please leave a comment specifying exactly where it all went pear-shaped for you and I’ll do my best to get to the bottom of it.

Example

Download

sd-lightbox-js-2_02.zip (16Kb)

Requirements

1. Prototype WordPress Plugin
2. script.aculo.us WordPress Plugin

Features

• Fully customisable JavaScript, CSS and Images via Options interface
• Full separation of the Prototype JavaScript Framework and the script.aculo.us JavaScript Library from the Lightbox JS script

Installation

1. Upload the plugin to the ‘wp-content/plugins’ folder in your WordPress directory
2. Activate the plugin via the ‘Plugins’ admin panel
3. Go to Options > Lightbox JS
4. Under the heading ‘Edit JavaScript (lightbox.js)’ find the ‘Configuration’ section and update the following two lines:
   1. var fileLoadingImage = "images/loading.gif";
   2. var fileBottomNavCloseImage = "images/closelabel.gif";

   The above two lines need to point to the Lightbox JS images directory for your website. For example:

   1. var fileLoadingImage = "http://yoursite.net/wp-content/plugins/sd-lightbox-js/images/loading.gif";
   2. var fileBottomNavCloseImage = "http://yoursite.net/wp-content/plugins/sd-lightbox-js/images/closelabel.gif";

Note: After downloading the Lightbox JS WordPress Plugin, extract the ZIP package and open the readme.txt file. The readme file contains full instructions.

Download

sd-scriptaculous-1_7_0.zip (37Kb)

Requirements

This plugin requires the Prototype WordPress Plugin.

Features

• Ability to load only the scripts you require
• Full separation of the Prototype JavaScript Framework from the script.aculo.us JavaScript Library

Installation

1. Upload the plugin to the ‘wp-content/plugins’ folder in your WordPress directory
2. Activate the plugin via the ‘Plugins’ admin panel
3. Go to Options > script.aculo.us and check the scripts you want to load (optional)

Download

Download Prototype WordPress Plugin 1.6.0.2 (31 Kb)

Installation

1. Upload the plugin to the ‘wp-content/plugins’ folder in your WordPress directory
2. Activate the plugin via the ‘Plugins’ admin panel

Archives

1.5

Download Prototype WordPress Plugin 1.5.0 (18 Kb)

Download

sd-google-analytics-1_0.zip (3Kb)

Installation

1. Upload the plugin to the ‘wp-content/plugins’ folder in your WordPress directory
2. Activate the plugin via the ‘Plugins’ admin panel
3. Go to Options > Google Analytics and enter your Google Analytics user account code (_uacct)

Note: After downloading the Google Analytics WordPress Plugin, extract the ZIP package and open the readme.txt file. The readme file contains full instructions and an FAQ.

Where can I find my user account code?

Your user account code takes the form UA-xxxx-x. To access your user account code:

1. Sign in to Google Analytics
2. From the Analytics Settings page, find the profile for which you would like to retrieve the user account code. Please note that your user account code is profile-specific.
3. From that profile’s Settings column, click Edit
4. At the top right of the Main Website Profile Information box, click Check Status
5. Your user account code can be copied and pasted from the text box containing your tracking code in the Instructions for adding tracking section

• Download
• Test run

Features

• 100% valid and web standards compliant markup and style
• Semantic markup (the <h1> element is used for post and page titles - not the site name)
• Cross-linking of all content for enhanced usability and ethical search engine optimisation (SEO)
• Informative and usable search results
• Dublin Core metadata
• Widget-readiness
• and more…

Installation

1. Upload `blueprint` to the `/wp-content/themes/` directory
2. Activate the theme through the ‘Presentation’ menu in WordPress