Signified

This post is an overview of the sessions I attended at Web Directions South 2008 - a two-day conference held each year in Sydney, Australia. Note, this is not an overview of all sessions - only those I attended. I know the tone of this post is a bit formal and dry. This is because it originated as a report on the conference to my Manager at News Digital Media. Sorry

Opening keynote: New media - new business

By Lynne D Johnson

This session was extremely relevant to the context of my current work on Where I Live at News Digital Media - being a small part of a very large media and publishing organisation - News Corporation. An interesting point Johnson spoke of was in reference to a recent article published on Valleywag - Google cofounders’ wealth dwarfs newspaper business - stating that “the entire American newspaper business is worth $20 billion and sinking fast”, whereas “Larry Page and Sergey Brin, Google’s cofounders, are worth nearly $16 billion each.” This spoke both to the decline of print media in general, as well as calling into question the future of the long-form format of print. Johnson prophesised the rise of the E-Book on devices such as the Amazon Kindle, as well as suggesting the long-form may eventually become an elite format - expensive to both produce and purchase - perhaps itself becoming an identifier of class.

Accessibility beyond compliance

By Derek Featherstone

This session spoke to the idea of thinking beyond simply building websites that “validate” and taking the extra step (and effort) to think in terms of the context of the user and how they will actually be using the site/interface. Featherstone made particular reference to the Google Maps based Routes on ironfeathers.ca, whereby he had re-implemented the map controls to provide a higher level of validity and usability than is provided by Google by default.

Developing for iPhone

By Tim Lucas and Peter Ottery

This session covered the news.com.au iPhone site development.

The first half of the presentation, by Tim Lucas, covered the technical aspects of building a website for the iPhone. Lucas made known the site was developed in Ruby on Rails, as well as the fact that it was the first iPhone site development he had embarked upon. The most interesting part for me was trying to figure out how a contractor with no experience developing for the target platform was engaged to build a site for News Digital Media in a framework it didn’t (until now it seems), sanction and/or support.

The second half of this session, delivered by Pete Ottery, was an expose of sorts regarding new features inherent in CSS3 that can be used immediately for iPhone web app developments due to the native Safari web browser with full CSS3 support. Pretty interesting!

Javascript libraries - Putting the cross in cross-browser compatible

Craig Sharkie, with Earle Castledine, Ben Askins, Jason Crane and Cameron Adams

This session sounded promising, as if the audience would walk away with a usable compare and contrast of three of the most popular JavaScript libraries - jQuery, the Yahoo! User Interface (YUI) and Prototype. However, when Ben Askins, who would be the delegate for Prototype, introduced himself as not being a user of Prototype, the audience sigh was audible. From this early point, the session began to head downhill - due in part to the loose organisation, lack of structure/direction and ineffective facilitation by Craig Sharkie. My frustration was compounded when I overheard Askins telling a friend after the session that he "totally winged" his presentation. Thanks Ben (and Web Directions)- time and money well spent on my part then.

Elegant Web Typography

By Jeff Croft

This session delivered some useful takeaways relating to typography on the web. In particular, one problem faced by front-end developers dealing with CSS-based typography is that of setting relative font sizes for accessibility, only to be thwarted when nested content inherits font-size settings, making it very difficult to calculate the actual relative font size to use to achieve a specific “screen size”. Croft revealed a technique first published in the post How to size text using ems on Clagnut. I had remembered seeing this technique used on Clearleft and, lo and behold, the author of the aforementioned article, Richard Rutter, is the Production Director at Clearleft. It all makes sense now!

Predicting the Past: Emotional Design and a Vision for Microsoft Surface

By August de los Reyes

This session delved more into theories of user experience and human/computer interaction, and this is what made it interesting. Reyes’ recent postgraduate studies were evident as the session was delivered more as an academic lecture than as a conference end-of-day keynote. Using his learnings as a segway to the promotion of Microsoft’s newest technology - Surface (essentially a big iPhone). Reyes claims Surface is a shift from the current graphic user interface (GUI) to the new Natural User Interface (NUI). However, as interesting and inspiring Reyes is as a speaker, I don’t think he managed to convince the tech-savvy audience that Surface was anything more than a touch-screen in a coffee table.

Designing our way through data

By Jeffrey Veen

This session was interesting because it was Veen - and he is entertaining. Veen spoke, as he has on many occasions, of designing information and data visualisation whilst referencing the usual suspects from history - John Snow, Charles Joseph Minard, Harry Beck, et. al. - and the current trends in our own time such as Trulia snapshot, DOPPLR and (of course) Measure Map and Google Analytics.

Veens central premise for designing information was presented with the following three key points:

1. Enable people to find their stories
2. Create tools to let them manipulate their data
3. Provide filters to enable clarity

Podcast: Designing our way through data

Creating sexy stylesheets

By Jina Bolton

This session presented some practical examples for creating, if not sexy (apparently Bolton has recieved some flack for use of the term "sexy" - go figure), at least readable and organised stylesheets. The most interesting takeway from Bolton’s presentation for my purposes was the idea of a table of contents at the top of the CSS file which gives a quick overview of sections, colours and styles that reference section headings using the /* =selector */ style of section commenting. I’d noticed Rob D’Arrigo had used this style on Where I Live, and I liked the idea so much I’m incorporating it into all my web training courses.

A Jungle Cruise through the Wild Regions of HTML5 and Surrounding Territories

By Michael(tm) Smith

This session was a very interesting overview of what is to come in HTML5, including (but not limited to):

• The canvas element for scriptable and interactive images
• The video and audio elements used to embed interactive video and audio without the need for third-party plugins such as Flash
• New form attributes that act to automatically create form widgets such as date choosers without the need for JavaScript
• Client-side form validation
• Offline web applications (like Google Gears)
• Client-side SQL database storage
• Native drag and drop support (no need for JavaScript)

This is all very exciting for the web professional. However, despite Smith beginning his presentation with the assertion that these are "HTML5 features that work in browsers now", these features have virtually no support in modern browsers (apart from Opera) and, of course, the shameful reality is that HTML5 will not be ready until 2022. The outcome of Smith’s presentation then, although interesting, was slightly redundant.

Interaction design case studies

By Daniel Burka

Daniel Burka is the creative director at Digg. Burka’s session concentrated on a case-study involving his re-design of the Digg comments system. Premised mainly upon the concept of desire lines or “desire paths”, Burka openly admitted to getting it disastrously wrong the first time and was refreshingly humble in his learnings - asserting that whilst we can do all sorts of user testing (and did not discount this), but we can never know how a product will be used intil it is released into the wild and “actually used”. In essence, these are the "desire paths" your users will create and that you cannot know until they do.

Ajax security

By Douglas Crockford

Although entitled "Ajax security", Crockford’s presentation took a turn towards the inadequate security model of the current Internet and web-based applications in general. Crockford asserted the current protocols were never designed to host secure and robust applications and prophesised that in the future (maybe sooner rather than later), a new protocol will be required to accommodate the current trend of the web as a platform.

Closing keynote: This, That, and the Other Thing

By Mark Pesce

Pesce took the Web Directions stage more rock star revolutionary than nothing-new nerd. Whilst, as usual, his presentation was an academic discourse that made the brain bleed, the session was balanced by the vision being projected on the massive screens behind the speaker. With nine inch nails at full-volume, the screen on the left scrolled maniacally through 1000 of Pesce’s Twitter friends - displaying their avatar and username at a frantic pace, whilst, developed by The Man in Blue - Cameron Adams - specifically for Pesce’s presentation, (almost) real-time Twitter tweets tagged with WDS08 would dissolve in and out of one-another whilst Pesce delivered his message.

The message this year is the power of the collective. Nothing new, but when it’s spoken about with nine inch nails and smoke machines - it may as well be.

The point in case is RateMyProfessors.com.According to Pesce, this site harnesses the power of the collective and, since it’s inception, has influenced the hiring, firing and celebrity status of many a US academic.

Yesterday, Håkon Wium Lie, Chief Technology Officer for Opera Software released his open letter to the Web community in which he states:

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?

A recent post to the HTML WG list entitled ‘HTML 5′ and some poem markup? has got me all in a huff. It was an innocent request by Dr Olaf Hoffmann which started like this:

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.

Over the recent days I’ve been asked to speak with a few new starters where I work. As budding (and not-so-budding) web developers, they’re eager to latch onto the next big thing and blog about it in order to appear cool (oops!). So, in order to stop repeating myself and free up more time for shameless self-promotion, read on if you want to become a web developer and make lots of money.

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

You’ve been creating websites on your Apache installation on Windows - making a sub-directory for each site you want to design/develop. But wouldn’t it be good if you could run multiple websites on a single Apache installation - changing http://localhost/mynewsite1/, http://localhost/mynewsite2/, etc. to http://mynewsite1/, http://mynewsite2/, etc. Well you can! - with Apache Virtual Hosts. This article will show you how to run as many websites (or Virtual Hosts) as you like on your Apache installation on Windows by making a few simple additions to your Apache configuration file and your Windows hosts file.

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 /