HTML style guide
16 September 2009 - 13:49When designing websites graphic designers often draw a neat picture in photoshop. The day to day use of a website greatly differs from this ideal scenario. The design shows a calm and readable site with demo text. But the actual website in use everything but serene and readable. The text style is usually the first aspect of a site that gets diluted. Both users and visitors create content or leave comments which just don't fit the initial picture painted by the designer. A lot of problems stem from the use of wysiwyg editors in content management systems. These editors usually grant their users a lot more freedom than a web designer wants. A properly configured wysiwyg editor should greatly limit the possibilities of the user to a few essential functions such as creating lists, inserting links and marking text as strong or emphasised.
However, many a time such wysiwyg editors are incorrectly configured. If users have too many text formatting options the result is text corruption. Because of their limited knowledge of html code, users mess up semantics, introduce a diversity of text styles, insert many incorrect tags and a plethora of inflated code and inline styles. The more creatively inclined user seems to have an urge to colour pieces of text, raise the text size, insert alternate fonts and create unused or endlessly nested tables into the content of your carefully designed site. Once users start copying and pasting from MS Word they introduce a visual cacaphony which seriously breaks the visual appease of your site. Sometimes it can even break the basic layout of your site and hinder search indexation.
JRoute and module visibility
12 September 2009 - 19:04Correct SEF routing in Joomla is pretty easy thanks to the class JRoute. If you want to redirect to a clean url just use the basic method _(); like so:
JRoute::_('index.php?option=com_example&task=view');
Unfortunately, this method isn't aware of url aliases created in menu items. JRoute just alters a dirty url like /index.php?option=com_example&task=view in a clean url like /components/example/view. Let's say you've created menu item to this components task with the alias: /view-example. JRoute doesn't redirect to the alias, just to the cleaned up system url. This is a problem because menu items are essential if you want to define page parameters or module visibility. These parameters are only visible if the url matches exactly. If you want to create redirects to url aliases in your Joomla modules or components you can try the following snippet.
$menu =& JSite::getMenu();
$menu_items = $menu->_items;
foreach($menu_items as $item) {
$match = 0;
if($item->query['option'] == 'com_example') $match = $match+1;
if($item->query['task'] == 'view') $match = $match+1;
$matches[$match] = $item->route;
}
if(key_exists(1, $matches)) {
array_shift($matches);
array_reverse($matches, false);
$action_url = JRoute::_(JUri::base(true).'/'.$matches[0]);
}
This will create a path to a single alias created in a menu item if a matching menu item exists. You can also do this for other components by specifying the match criteria. For example:
2Value Subversion
6 September 2009 - 14:32
2Value is a network organisation. In this organisation I am among a growing number of associates who create high quality open source software solutions for the web. The network character is one of the great strengths of such a company. However, you need a set of effective procedures and collaborative tools for such an organisation to work effectively. In the last couple of months I worked on implementing Subversion and localised environments in 2Value.
Subversion (mostly known as svn) is a revision management tool that allows software developers to track the history of a development. If you work with a number of developers on a single project, you want to make sure that everybody uses the same codebase, that changes to the code are logged and documented and that code changes are repeatable, reversible and exchangable. In other words: you want a team to work together on a single code base without the individual team members mocking things up for their peers. Now there's more to implementing a tool like svn than just making it technically available. You have to educate the participants in the use of the system, write guidelines on how to use the system and start using it in real life situations. So I've organised workshops, written documentation, setup the subversion hosting (at unfuddle.com) and operationalised the new methods at some of 2Value's customers.
Related nodes and custom breadcrumbs
21 August 2009 - 16:38Sometimes, having an easy to use CMS like Drupal or Joomla is just one more excuse to keep on tweaking. Just now I added a related nodes block to the article and project pages. Let's say I write an article like this and I tag it drupal. A couple other articles on the same topic are shown in a block in the right column. Hard to do? I don't think so! Just use the views module an some view arguments, like so.
There's more stuff I changed in the last week or so. I completely changed the functionality of the breadcrumbs. I wanted them to reflect the structure I use for clean urls. But I wanted to use page titles instead of the url shorthand (and lowercase) terms. So I created a little snippet. Let's say I have an project with a fairly simple url like /projects/world-domination.
- first I fetch the url and system path
- then I breaks it up in into parts using the / as divider (so I have 3 parts: /, /projects and /projects/world-domination)
- for each part I check if the url is pointing to a valid page.
- for each valid target page I fetch the page title
- then I return all the breadcrumbs with valid links back to the theme
- If the clean url path wasn't found, the normal system breadcrumbs are used as a fallback mechanism
and... Presto! A simple breadcrumb bar for all the project nodes. Including "Home" and the current page's title. Off course I needed to find other solutions for Views, Taxonomy, System paths, etc. but that's a longer (and even more boring) story. I anyone's curious how I did it. I'll send them the code.
Further tweaks
15 August 2009 - 01:49Codeculture.nl just got a bit better. The site was (and still is) in dire need of some tweaks to the interface. There were a couple of problems that needed addressing:
- I wasn't happy at all with the placement of the search box, it just took too much space and broke the flow of the first lines on the front page. Also I wanted to include the search box on every page and remove the search option from the main menu.
- The breadcrumbs looked dull and were hard to read on the striped background under the header.
- I started colour coding the pages with a simple rotator, so you get a fresh look if you refresh the page. However I didn't fully implement this. In the near future I'll probably dump the rotator and use the colour codes to brand specific pages.
- I found the main menu font colour to be a little too light. Click stats affirm this.
- There were some very serious cross browser issues (well, IE issues really, but let's be kind on microsoft for a change). There still are some problems especially with IE7, but at least the site functions properly on all major browsers.
- The project thumbnails on both the project gallery and the project nodes were inconsistent and badly delineated.
Flevoziekenhuis
6 August 2009 - 14:16
I've created a Joomla Readspeaker plugin for the Flevo Hospital in Almere. Readspeaker is a technology that allows webdevelopers to embed a screenreader on a website. Off course many people with a visual handicap already use screenreaders but these usually read everything on the webpage. With readspeaker, the webdeveloper can decide which content should be read, and which shouldn't. Also it's a platform independent solution. If you have a recent webbrowser with javascript enabled it works. Of course I think that creating semantically correct html should be an absolute priority for accessible websites.
SEO and performance
21 July 2009 - 14:46Discussions on Drupal site optimisation are usually technical discussions. But many a time they boil down to philosophical discussions. Search engine optimisation (SEO) and performance tweaks aren't necessarily good for the manageability of your site or for your potential visitors. I ran across a couple of these dilemmas in recent days while trying to optimise my own site.
JS / CSS compression
On of the questions I struggled with is: "should I compress the javascript and css files?". From a performance perspective, the answer is a clear yes. The performance boost is minimal because the servers of my hosting provider have ample headroom. But any performance gain helps. I manage to reduce the number of http requests by 18 simply by combining all the css and js files into 1 file for js and 1 for css. However, because I still do lots of front-end development, I want my own website's css files to be readable by potential clients. If prospects want to judge my css coding skills they'll probably want to take a look at this site's css code to. Compressing the files also makes them very hard to read. And all the care I put into laying out the code neatly (alphabetical element properties, consistent commenting, consistent tagging, etc) is lost for the potential observer. Right now I decided to enable this performance tweak because the potential number of observers is really limited.
Business cards
28 June 2009 - 00:29
Last week I got my new business cards. The folks at Zalsman did a great job printing the range of colours carefully selected by Rob Krijgsman. I believe in this case offset print makes a noticable difference to digital print. The colours seen on screen (my digital previews) match the ones on paper quite well. The maroon really "pops" and the even the subtler green gradations are clearly demarcated. I also received some letterheads, most in full duplex, full colour. All of it looks equally wonderful. So I'm sure these stationaries will bring some extra sparkle to the already joyous task of sending invoices. :)
If you mouse over the image you can see the back of the card.
Movie embedding
17 June 2009 - 11:34Despite some seriously evil legal terms, I moved the instructional videos for the Joomla-SugarCRM bridge from blip.tv to vimeo.
The guys at blip.tv weren't able to deliver xhtml 1.0 strict validating embed code. I considered youtube. But the encoding quality of vimeo, when it comes to screen casts, beats the crap out of youtube's encoding.
So, what did I accomplish? Just take a look at the w3.org validation of a video page.
Photo tour of the new office
20 May 2009 - 23:25Many thanks to Kor for providing this slideshow tour of the new office in Haarlem.
Stay up to date with the rss feed.