The functionality behind tagnabit was built using Zend Framework (MVC components, Zend_Feed, Zend_Service_Flickr, and Zend_Cache). The client side is all semantic XHTML (with a few Microformats), CSS, and a few JavaScript enhancements (using jQuery). We’ve got plans for some new features – but we’re curious to see how people use the site first. If you’ve got feedback, please send it our way via Twitter, Flickr, Technorati, YouTube or Delicious by tagging your content with tagnabit (#tagnabit on Twitter).

jbgoode12: @jonathanpb @BradleyHolt @jason_pelletier listening to ep 2 of The Browser – also very interesting! One correction: the Flex SDK is open src (view tweet)

jbgoode12: @jason_pelletier @BradleyHolt @jonathanpb It’s true that the Flex IDE costs $$$ but you can create Flash w/open src: http://opensource.adobe.com/wiki/display/site/Home (view tweet)

BradleyHolt: @jbgoode12 Good point! I guess I was thinking about Adobe Flex Builder. Didn’t meant to pick on Adobe, just one example of proprietary SW. (view tweet)

BradleyHolt: @jbgoode12 Oh, and thanks for listening to the show, glad you’re finding it interesting! (view tweet)

jbgoode12: @BradleyHolt @jason_pelletier It’s like how Micro$oft does it : they have open SDKs but the IDEs are $. FB is based on Eclipse, tho (view tweet)

BradleyHolt: @jbgoode12 Yeah – technically open source but to do anything practical takes lots of work or spending money to make it easier. (view tweet)

BradleyHolt: @jbgoode12 But you’re right, the framework itself (Flex SDK) certainly appears to be open source. I stand corrected (view tweet)

jbgoode12: @BradleyHolt It’ll be interesting to see if an ecosystem grows around the Flex SDK, like maybe the relationship between .NET and Mono… (view tweet)

BradleyHolt: @jbgoode12 That will be interesting to watch. The Flash Player is still proprietary (although there are some alts) which could be a problem. (view tweet)

jbgoode12: @BradleyHolt right. and the flash player being proprietary kinda makes the rest moot… plus you can do a lot with frameworks like jquery. (view tweet)

BradleyHolt: @jbgoode12 I love jQuery! Would be cool (but unlikely) if Adobe truly opened up everything Flash related as open source and open standards. (view tweet)

I appreciate John’s correction and love having conversations like the one above. I hope The Browser inspires many more conversations!

Web accessibility is fairly straightforward if you take a content-first approach and focus on web standards. The real challenge is doing this and making a great looking website that doesn’t have to compromise on functionality. We accomplished this by using semantic XHTML that contains enough structure to stand on its own without any visual representation. Then, this content was stylized using CSS. Finally, some behavior was added using unobtrusive JavaScript (using jQuery). This concept is called progressive enhancement. The final result is a great looking and very functional website that is accessible to all users.

The cool thing about the construction and portfolio pages is that they use progressive enhancement. What this means is that users without JavaScript (i.e. search engine robots & screen readers) can navigate the content by fully reloading the page on each click. You can try this out yourself by disabling JavaScript in your browser. For users with JavaScript, each click on “next” or “previous” (on the construction page) or each portfolio feature (on the portfolio page) will cause their browsers to load the appropriate content dynamically into the right spot on the page without needing a full page reload.

One of the common problems with this type of JavaScript navigation is that you often break the browser’s back and forward navigation capabilities. Another common problem is that you can’t bookmark the page or send the link to a friend and have the same content loaded. Because these pages update the browser’s “hash” we get the browser’s back and forward capabilities as well as bookmarkability. The “hash” is the part of the URL that starts with the “#” character. For example, assuming you have JavaScript enabled you should be able to navigate right to the waterfall photo using the following link:

http://www.northeastpools.net/portfolio/#feature/waterfall/

Critiques are welcome!

They wanted a smooth user experience. This sort of thing would normally be created in Flash but we decided to use XHTML + CSS + jQuery instead. The first step was to create functional and technical specifications. The specifications (and looking through all of the calculations to make sure we understand everything correctly) were actually a big part of the project. After that we moved into production.

We had two people working on this project – I implemented the functionality in jQuery and Jason implemented the design in CSS. We spent the first two hours working together on getting the semantic XHTML correct. Once we had the semantic XHTML we essentially had an API that we both could use to do our work. It was worth the time upfront getting this part right.

Next we went to our respective corners. I created the jQuery functionality selecting and manipulating the DOM using CSS selectors. Jason used the XHTML structure we had come up with to add CSS and make it all look pretty. The great part was that, since we had come up with the the XHTML structure as the one touch point, we were each able to do our jobs without hardly bothering the other person to ask questions or make changes.

Of course, there were a few changes needed to the XHTML once we started working on our individual pieces – we’re not perfect after all. This is were Subversion came in handy. I could change my local copy and when I was sure I wanted to I could commit that change and Jason could update his local copy merging any of his own changes (or vice-versa). The whole process went quite smoothly and we’re very happy with the results (the “Switch to Cold Water and Save” calculator on the right).

Here are the basic steps to make your next website POSH:

• validate your (X)HTML – invalid markup is not very POSH at all;
• use tables only for tabular data, never for layout;
• use existing elements and attributes if they fit the semantics of what you’re creating (e.g. ul, li, dl, dt, dd) instead of generic div or span elements;
• use class and id names that are semantic, not presentational (e.g. MainNav is semantic but LeftNav implies presentation and is not so POSH);
• use as little (X)HTML as possible to markup your content.

For those who claim that this is too limiting when it comes to design I suggest you check out css Zen Garden. Very POSH, very cool. Every single design you can pick from uses the same structured XHTML page – the only thing that changes is the CSS style sheet.

Earlier I mentioned something about adding behavior with JavaScript. My favorite JavaScript library is jQuery. jQuery lets you unobtrusively add JavaScript behavior to your (X)HTML pages using simple CSS selectors. This means no inline JavaScript code in your (X)HTML – no onclick or onmouseover event handlers cluttering things up.

POSH + CSS + jQuery (or another unobtrusive JavaScript library) is very cool indeed. But it’s more than just cool. It makes your websites easier to maintain and it opens the door to concepts such as microformats – data that is both human and machine-readable. Are you ready to get POSH?