WebDD

Just back from WebDD down in Reading at the Microsoft Campus and thought I’d post a few thoughts. I’ll get into a few of these topics in more detail down the line when time permits but for now…

I went to a few talks, one on Microformats by Glenn Jones and the other on web standards design by Patrick Lauke that I enjoyed but didn’t learn much. I wasn’t the intended audience really and I’d gone along because I didn’t fancy the alternatives. Both were entertaining and well attended anyhow, and I’m sure the more developer orientated folk got a lot out of both.

The main two things I came away thinking about however were the upcoming version of Visual Studio (codename “Orcas”) and Microsofts new identity platform CardSpace

Now I’m not generally a fan of IDEs, but someone has been thinking alot about how Visual Studio (and the new Expression Web) can be of use to web designers. Some of the CSS tools are very cool, I might do some screenshot from Expression (we all got free copies) if I get the chance. Their has also been a huge effort to integrate Javascript functionality, including full debugging and breakpoint support as well as intelissense. All of which looks really rather nice.

According to Microsoft Windows CardSpace enables users to provide their digital identities in a familiar, secure and easy way. Which should have alarm bells going off and (bad) memories of Passport flooding back. I went in not knowing much and in quite a sceptical mood, assuming the worst. Turns out I was wrong. The presentation, by Barry Dorrans, covered quite a bit of ground from an introduction, through code and working examples and even a big discussion of the issue of identity and OpenID in particularly. I’m suprised that I haven’t seen any mention of CardSpace along with the recent rise in discussion around identity and OpenID. More on this soon.

One last thing on the WebDD site caught my eye: around 350 people with a 50/50 split of web developers and web designers. In reality I think about 20 of us registered as designers which amused me. Microsoft doesn’t (yet) have a pull over designers as it does over developers. More on that too when I get my thoughts in order.

Experiment over

Ok, well, that was interesting I thought. For those that haven’t followed along on the site I thought I’d recap some of the weird and wonderful colour schemes that have been used on this site as part of my experiment with colorburn

Some were just about OK, some were quite nice really and a few were, er, pretty much unreadable (sorry). I’ll let you decide which where which:

20th 21st 22nd 23rd 24th 25th 27th 28th 29th 30th 31st 1st

Incoming!

Just a few things coming up in the next month that I’m attending that I thought warranted a post.

WebDD 3rd February Heading down to Microsoft in Reading for Web Developer Day for a weekend of web design and development discussions and listening to Bruce and Patrick go on about something interesting.
Newcatle Rails Usergroup 8th February I’m giving a talk on using Radiant to our local Ruby and Rails Usergroup so we’ll see how that goes. I’ll publish the slides afterwards given the chance.
BarCamp London 17th-18th February Yeah. I got a ticket for Barcamp thanks to Meri. I just need to think of something to talk about now. Oh, and sort travel.
Future of Web Apps 20th-21st February Been looking forward to heading down to FOWA for a while and a few people from work are coming too. Be good to see all the usual suspects as well, at least those that aren’t going to Barcamp a few days before.
Geek Dinner 21st February I’d already booked the day after FOWA off work knowing that something would come up. As if by magic I’m finally in London for one of Ian’s famous GeekDinners.

Now I think about it, or rather now I write them all down in one place, I think I might have got carried away.

URI Templates in the Real World

I do quite a bit of big picture web site/application design at work (ok, that probably needs more of a description). I get involved in alot of the details that lie somewhere off to the side of the obvious bits that need to be done (mmm, not much better). All those technologies and tools and ideas only tell part of the story of building a successful site or online application. Even something stringing together a good idea, clean markup, good CSS, some fancy backend code (insert prefered option) and a sprinkling of user centred design tools can fall down on the hidden details; good form labels, help messages that actually help rather than just repeating the problem, organising file systems to allow for simple scaling, skinning and internationalisation, etc.

Tom Coates spoke last year about his concept of Native to a Web of Data which really struck a chord at the time, and not just because I still want this on a t-shirt. More recently the idea of REST has really caught on, especially amongst the dynamic languages crowd – you just need to look at Rails 1.2 for an example their. The big picture is HTTP is back and everyone who didn’t already get it should be doing some reading.

Another notable person talking quite a bit about REST, HTTP and related issues is Joe Gregorio. Amongst other interesting posts, I came across one on URI Templates a good while ago and have been following the specification to produce recent documentation. The idea is simple and so is the specification. A quick example, for a simple CRUD interface might be:

Action URI Method
View /view/{id} Get
Add /page/add Get, Post
Edit /page/edit/{id} Get, Post
Delete /page/delete/{id} Post

Doing this for a site or application in the early stages of development really helps to highlight what actions are available, and to remove the need for costly changes later in the day. It also helps others learn, mainly through discussion, about the different HTTP methods and the importance of the URI in general.

Posting to Twitter using PHP

Please note that Twitter no-longer support Basic Auth via the API so the following code no longer works. Please see the official docs for more info

Like others I’ve found myself becoming something of a fan of Twitter, the impossible to explain social networking site. If you’re reading this, have a twitter account and not already my friend then add me if you like.

Apart from the interesting social aspects I’m also interested in Twitter as an API for all sorts of communications, remember Twitter already deals nicely with SMS messaging, Instant Messaging, subscription and the like and has a nice XML and JSON based API. I’ve been using the Zamano SMS gateway at work for a few projects and Twitter actually lets me some more and doesn’t come with a price tag.

I started out playing with curl to send updates like so (obviously with a real username and password):

curl -u username:password -d status="twittering from curl" http://twitter.com/statuses/update.xml I then used the PHP curl features to do the same thing from PHP: <?php // Set username and password $username = 'username'; $password = 'password'; // The message you want to send $message = 'is twittering from php using curl'; // The twitter API address $url = 'http://twitter.com/statuses/update.xml'; // Alternative JSON version // $url = 'http://twitter.com/statuses/update.json'; // Set up and execute the curl process $curl_handle = curl_init(); curl_setopt($curl_handle, CURLOPT_URL, "$url"); curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2); curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl_handle, CURLOPT_POST, 1); curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message"); curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password"); $buffer = curl_exec($curl_handle); curl_close($curl_handle); // check for success or failure if (empty($buffer)) { echo 'message'; } else { echo 'success'; } ?>

Obviously you could do more with the return than print out a success or failure message. The $buffer variable has the returned XML or JSON for you’re parsing pleasure.

I’m going to try out some of the other API methods too, probably play more with XSL or look more closely at the PEAR JSON module in building up a simple library as a quick search didn’t throw up much of interest and the API is nice and simple; making it fun to hack on.

Colorburnified

If you visited the site previously since the Radiant move you might notice a new colour scheme. Come to mention it if you visit tomorrow, or the day after you should get a different colour scheme too.

I mentioned that I planned on a few experiments around these parts and this is the first one. I’m a big fan of ColorBurn from Firewheel. For those that haven’t seen it it’s a desktop widget that displays a new four colour colour scheme every day that looks a little something like:

ColorBurn OS X Widget

I often use it for inspiration for colour sets, or just to appreciate interesting colour combinations. This just takes it a step further. A little reverse engineering and I have a script (PHP this time, running from a cron job) that writes out a new stylesheet once every day with the colours from ColorBurn (using the magic of XSL if you’re interested). I’ve used an alpha transparency on the image to the top left of the page which might result in strange effects in browsers that I dont care about too much. Sorry, but I did warn you.

I have a feeling that some days I’ll wake up and regret this experiment and others I’ll be pleasantly suprised. I’m not going to cheat either. ColorBurn provides me with four colours and the script will use them in the order they come in.

OPML Feeds using Radiant

As mentioned when I moved the site over to Radiant I promised a few tutorials and behind the scenes footage of goings on. So here goes with a quick look at how I added a nice OPML feed to my site.

For those not familiar with OPML it’s an XML format for outlines, often used for storing blog rolls and the like.

What I wanted was a friends parent and the ability to add friends to it and for them to appear in a dynamic OPML feed. The following screenshot shows what I ended up with:

Tree showing Friends feed in Radiant

To accomplish this within Radiant I needed a custom layout, one which would simply render the content but also had the relevant header and footer markup. Note the mime type setting as well.

Layout for OPML in Radiant

Next up is the page which actually uses the OPML layout to render the page.

friends feed from Radiant

Note that I set the status of all the friends records to hidden, and then set the status of the r:children:each loop to search for hidden children. This way the individual friends records dont show up as seperate pages.

All I need to do then is add children to the parent, friends-feed in my case. I added a few page parts to each friend page to make management a little easier; a link, a feed and for a little added spice xfn.

Edit friend view from Radiant

All in all it makes adding and updating friends easy, and the general approach will work with pretty much any content where you want to compose a single page based on it’s children.

Some ponderings on CSS3

I’m starting to get properly interested in CSS3 for a few reasons. I’ve subscribed to the mailing list, read up on some of the working group goings on and done a bit of research ahead of really jumping in with some code play. Some of this could be of interest to others so here goes:

The best two resources I’ve found are the CSS Working group home page and the CSS3 Info

The CSS Working Group Under Construction site over at the W3C has a huge ammount of information. For those that dont know CSS is being split into a number of distinct modules, namely:

  • Advanced layout
  • Aural Style Sheets
  • Backgrounds and Borders
  • Basic User Interfaces
  • Box Model
  • Cascading and Inheritance
  • Color
  • Fonts
  • Generated Content for Paged Media
  • Generated and Replaced Content
  • Hyperlink Presentation
  • Introduction
  • Line Layout
  • Lists
  • Maths
  • Multi Column Layout
  • Namespaces
  • Object Model
  • Paged Media
  • Positioning
  • Presentation Levels
  • Reader Media Types
  • Ruby
  • Scoping
  • Speech
  • Syntax
  • Tables
  • Text
  • Text Layout
  • Values and Units
  • Web Fonts

Phew. Their is also some work going on on profiles for TV, Printed media and Mobile. I’m interested in a few of these modules – particularly those dealing with Web Typography and the Basic User Interface module which deals with the look of form elements in their various states and more cursors and colors to describe GUIs (graphical user interfaces) that blend well with the user’s desktop environment.

CSS3 Info also has lots of information worth reading, including some good examples of parts of CSS3 that have been implemented ahead of recommendation in the preview section. My favourite bit however has to be the CSS selector test by Niels Leenheer. You can read a little more about that, and how different browsers do, or at least how they did in October. The W3C test suite is available too, but no where near as slick.

I’ve even gone and installed a WebKit nighly build to try out some of the features only supported their at the moment. Who knows? I might even add new designs to the site using new selectors as a treat for those silly enough to be using such experimental browsers.

Fluidflash

Their is nothing wrong with a nice header graphic. Clients, designers and customers alike love them. But I often see them used as an excuse for fixed width designs. Well no more I say (unless, of course you have a perfectly good reason for a fixed width design in which case you dont really need this technique.)

The plan was simple. Find a way of incorporating flash headers into sites using liquid or elastic designs in much the same way you might use lots of sliding doors background-image goodness.

And all it takes is a snippet of actionscript goodness:

Stage.scaleMode = "noScale" Stage.align = "TL" var width var height function resizeEvent ( ) { width = Stage.width height = Stage.height dimensions.text = 'width : ' + width+ ' height : ' + height topRight._x = width bottomLeft._y = height bottomRight._y = height bottomRight._x = width } resizeEvent ( ) var stageListener = new Object ( ); stageListener.onResize = resizeEvent Stage.addListener ( stageListener );

Download example

New year New site

If you’re viewing this post in your feedreader then you might not notice anything different but it’s all change around these parts. I’ve gone all Radiant and with it a new slightly minimal design.

Radiant, for those that missed my earlier gushing post is a Rails based Content Management System that looks something like this:

Morethanseven admin panel from Radiant

I’m going to post a few follow ups about how I did certain things using Radiant and my particular setup. All in all it’s been fun. Always a good sign when developing something. I ported all my old posts across from Textpattern and I’ve posted a project post (in my new project feed) about TXP2Radiant for anyone else looking to do the same.

Their will likely be a few gremlins lying around that I’ll get to over the coming weeks, and I have some decent posts in mind to keep people interested. Expect less about what I’m up to and more about the pressing issues of web design and development that I keep meaning to write about.

The design is a little on the minimal side at the moment but on purpose. I want to play around with different designs for the site while keeping everything clean and simple. I might even set a file size limit for the CSS and I definately want to start playing more with CSS3 selectors (more than 80% of you dont use IE6, for the other 20% please upgrade). I’m not going to say anything I’d regret, like one new design every other month, but I can dream.

As I get more familiar with Rails (one of the reasons for the move) and Radiant I’ll likely add some bits like a Flickr powered gallery and maybe something to do with Twitter but for the moment it’s all about the content.