21
May
2008
May
2008
Code » FF2 href crash
How strange a hyperlink with a percentage sign to start the href atrribute, crashes FF2 (2.0.0.14)?
— Next Page »
The use of water in Bristol is amazing, click for more photos
Screen one
Screen Two
All code contained within the example page
19
May
2008
May
2008
Code » Webmail
Why don’t web based email clients use an iframe? Really, I mean come on, two body tags a headache? Iframe it baby!
15
May
2008
May
2008
Code Articles » Microformats and Address Books
Microformats are very embroynic at the moment, this is perhaps a teaser of the future. Wouldn’t it be great if there was a Firefox plugin to automatically collect contact details from websites and store them?
Further to this why not on each 5 or 6 visits to a website, have the browser check to see if your address book is out of sync with the website. A simple one click interface could allow you to get the new updated contact details, plus any additional updates which the web content creators have uploaded to the site. Imagine that power?
Tagged with
14
May
2008
May
2008
Code Articles » abbr design and SEO
Just found an interesting snag with the abbr design pattern when viewing some recent search results where I’ve used abbr for dates.
It seems that if the title attribute of the abbr tag is indexed by search engines, the dates are printed twice in two formats, presumably expansion of abbreviations makes sense for search engines. Let me chew this one over.
[edit:the day after]
Having thought about this, it does seem to be a flaw with search engines, or at least the emphasis should be on search engines to better understand the abbr HTML tag, why? Because abbreviations are usually written in brackets!
A recent example I found of an hCalendar date showed that Google in this instance actually printed out both the contents of the title attribute and the value in the tag itself which lead to a mangled date display along the lines of “2008-04-13April 13th 2008″. Imagine a proper abbreviation would read “Hyper Text Markup Language (HTML)”.
However should the search engine suppress either the title attribute or the value in the tag? In theroy the engine should work as a screen reader in suppressing “HTML” and reading out Hypertext Markup Language instead, not both.
Coming full circle this may not be an issue with the abbr-design pattern at all but with the work around using span tags, but it should be noted that some search engines may turn semantic code into a bit of a mess, equally a developer who works around abbr issues with span classes may also make a mess of it.
7
February
2008
February
2008
Code » Semantic Road Block?
How is it that semantics on the web got so far and hit a road block? Is a question I’ve asked myself a few times and with new developers now never knowing tables for layout the framework for maintaining a semantic web is now there.
Semantics can be created but they need to be perpetuated. Most folks think the web moves forward at a lightning pace, but it’s not until you dig into the details that you see lack of support for just about anything you can think of and lack of understanding about certain sections of languages. When things do take off industry wide, the standards have been around for anywhere between 2 years and 6 years before widespread use. The web progresses not in smooth steps but only at times when folks have real problems to overcome and the time to overcome those challenges. The W3C certainly don’t move as fast as the folks who have a few spare nights to hack away at 3am scripts. So we (the industry as a whole) stutter forward like we’ve got the wrong fuel in our engines, while the high octane are off in the fast lane.
Semantics in HTML is only just getting off the starting grid. How many people know what a blockquote is, or that the em tag isn’t for italics? Let alone the CMS tools creating this code, that’s a whole different race entirely.
Efforts to create a more semantic web take too long from the W3C to get down to the average web developer in terms of language specifications. Is that why we have microformats? After all it’s not a trivial task to extend XHTML to create new tags and make it valid code, certainly that task won’t have been taught at universities, even in 2008 folks might just be learning how to order heading tags and why that’s important. We can’t wait until 2020 for the release of HTML5 just to make the semantic web work so we pop the bonnet of the car, look at what we have and create a new engine?
Microformats for me are perhaps a saving grace for the semantic web, if this is to work, anyone with an interest in the semantic web has to keep it simple, we can’t go extending XHTML without decent resources, documentation and academic support in universities and in the private sector training. So microformats could get us through the semantic traffic jam, or at the very least think about what markup we use.
Notice my lack of abbr tags? Imagine I’m not using wordpress but a Content Management System which doesn’t allow me to edit the HTML, let alone gain access to the markup to insert microformats!!!
29
January
2008
January
2008
Code CSS » Reverse Cascade?
I’m doing some experiments with navigation lists in CSS and have come across a stumbling block which relies on DOM scripting to work around. The examples given here are not intended to work, we would know it as “parent selectors”
Aside from this being a really cool sounding technique you could throw across the dinner table as “have you tried the reverse cascade trick” which is what I would name the technique, after the juggling trick, I actually know this is impossible to do with CSS as it involves cascading “up” not “down”. At source the W3C have decided that would take too much processing power to “cascade up”. Andy Budd has tackled this on his blog long with many others. CSS is one directional, for good reason I can see why cascading backwards is not a great idea, but equally it’s on of those brilliant contradictory evil ideas.
It’s nearly 2010, do you know how close the second decade is? Contradictory evil ideas are all around us, but it amazes me why this parent selector has been left to fill blogs all over the world, such a useful feature and as we push into a “must work without JavaScript” world this has to happen.
However imagine the power the parent selector would give us if we have a simple navigation list with some sub navigation which is hidden. This is great until we would like to “fold out” the sub navigation without reloading the page and adding classes to fold out certain bits of the menu. Although we have hidden the sub menus with CSS we cannot un-hide with CSS alone (this is not drop down in nature, more explorer tree), we can’t really use mouse events and the way keyboards traverse navigation lists is through the anchor tags, which is really inconvenient for this.
<ul id="nav">
<li><a href="/">Home</a>
<li class="selected"><a href="/about/">About Us</a>
<ul>
<li><a href="/about/history/">History</a></li>
</ul>
</ul>
--
ul#nav ul { display : none; }
ul#nav li.selected ul { display : block;}
So I could in theory trigger an a:focus in the main navigation list, but because my sub nav is contained in the LI above the A tag, I can’t use the A tag to fold out the sub nav, and li:focus doesn’t make sense as the keyboard would tab through the A tags. That’s pretty useless as the A usually is closed right away, it doesn’t make structural sense to move the end of the A tag so that it wraps the UL block. We could train wreck it with DIV’s but let’s not go there.
However if we could reverse cascade we might be able to pass triggers back up the tree and re-cascade from that point onwards. How would that look for it to make sense? One of the beauties of of CSS is that the syntax is easy to understand so this must be maintained and it can’t break an existing conceptual model of how forward cascading works, the two have to coexist.
Example one
ul li < a:focus ul
Without confusion with other characters this could work, the single arrow could signify that the a:focus should be passed to the parent node only a double “<<" could pass the focus up two levels up the DOM tree.
Example two
ul li <- a:focus +> ul
Perhaps a little more long winded but we could say that the a:focus is a go between, in that it supplies the trigger to the LI with the “<-" character and then cascades normally from the "+>” character.
So would the world be a better place with reverse cascading or is the world just not ready for it? CSS classes rule the world and are used to forsake good structure in the HTML so what hope is there of moving away from className switches in DOM scripting?
21
April
2007
April
2007
Blog CSS » Nomensa in Bristol & FIR
I was in Bristol this week for accessibility training from Nomensa, I learned a decent amount of stuff and had chance to double check if the kinds of things I was doing were the right things to do in terms of writing accessible HTML.
It was a great day and many thanks to Emily for delivering a great training session, really useful. I will back track eventually on what has happened and why this site seemed dead for a while. I have a new job, which going forward I’m really excited to have and thus work has been taking a lot of my attention and time and that’s where the trip to Nomensa came from, however it’s all good, got Search Engine Optimisation (SEO) in York soon, that should be fun, but I can rub off some accessible approaches to SEO there now.
I think also I’ve managed to fix the css on / images off issue with one of the image replacement techniques, allow me some more time and I’ll do a proper update on this with examples. Based around the Phark method there must be a way (with JS) to detect when images are off and thus write a new style rule into the DOM for the text-indent line and when JS isn’t there my theroy is that a :hover pseudo class can snap that text back into the viewport when focus is given, my only issue with that is does :hover get focus to something without a mouse, so can a keyboard tab press bring focus to an element and trigger the :hover, I’m sure it can. If you understood that congratulations, you are a top notch web developer! I haven’t tested, the code is not there, however it’s the kind of thing you think of when in the fast lane on the M5 coming back from Bristol as the sun sets, again that is if you are a geek like me.
Photos
Anyway to conclude this unneeded waffle, if you don’t want to read my geek speak but have got this far then after the training session was over I wandered around Bristol city centre obviously camera in hand, groovy place, fountains and water falls a plenty, so as a reward for getting through the brain dump, here are some photies to look at:
The use of water in Bristol is amazing, click for more photos
8
December
2006
December
2006
Code Projects » Podcast Script
I do like to play around with things you know and even though wordpress allows me to create enclosures for my podcasts, I wanted to actually create my own podcast PHP scripts. This kind of stuff is fun!
For sometime now I’ve been working on a little project I’m calling podcreate, which is basically a set of quick and dirty scripts which actually get the job done very well indeed. The main aim is to loop around a directory looking for mp3 files, well in fact media files in general and build an array of items, which I can use to build RSS feeds with enclosure tags which hold information about the type and size of file and so on and can be used in podcatching software to automatically download those files. I cheated, the date of the podcast comes directly from the file name so there is a limitation on a file structure and that’s my excuse for not building ID3 tag reading in, which I know about.
The link below isn’t to my main podcast feed, because wordpress handles that for me:
Podcreate came about due to a couple of reasons, firstly a website which hosted audio downloads didn’t offer any podcast feeds, there was another site which didn’t offer any rss feeds at all so I set about screen scraping those sites and creating my own feeds, thus parsing their HTML and turning it into my XML, within the limits that has the scripts work well until the web master of one of those sites gets inconsistent with file names. Secondly I was recording episodes of Home and Away for one of my best friends on my PVR and I thought, hmm why not vidcast these episodes to him, save me buying some DVDs?
I have lots of fun doing stuff like this, take radioripper for example, which is a screen scraping script which will take a URL from the BBC listen again archives and produce some mplayer scripts for me, that will download a BBC radio show and transcode it to mp3. I love it!
Tagged with
17
November
2006
November
2006
Projects » GBPVR News Skin
Just dropping a short and sweet article on here to offer up some links to a mod of a GBPVR skin I worked on today. The RSSReader plugin allows a user to display RSS feeds, on their TV and has inbuilt ability to show items such as flickr photo streams.
However the skin I use, which is the excellent Nuoro, didn’t have support for the RSS plugin, so the interface wasn’t integrated very well, untill now. With no documentation I hacked this together, also hacking in a version for the widescreen sister version of Nuoro, which is called Sassari. They are really excellent skins and I hope these small downloads give users using either one of these skins the beauty of this really nice interface when reading RSS feeds on their TV.
Downloads
Screen one
Screen Two
NB: These are mods of the BlueMCE2 RSS skin by Danka, which have been integrated into Sassari and Nuoro, to install for Nuoro, simply extract the compressed files to the Nuoro skin directory, making sure they stay in a directory called “news”.
26
October
2006
October
2006
Code CSS » Bulletproof buttons
Quite a while ago now in fact I was working on some sexy CSS buttons. Not only did I want them to look good, I also wanted them to be bulletproof, elegant and technically simple but visually complex, with minimal image usage all at the same time.
Why are these buttons bulletproof? The actual dimensions are set to grow and shrink based on text size and the images are placed using spans, so that the icons can be themed. There is not one single img tag to be seen, it relies on background images, which right now can’t be scaled because CSS doesn’t yet support background image scaling. The button can still be readable without any images being present, because the text, is erm, well it’s text and so aids speech readers and search engines. Why create buttons out of images and place the text in the image? Surely only a webmaster with limted time would hard code the text inside the image in photoshop (please ignore my site header).
See the buttons in action on this page.
All code contained within the example page
Aside from all the niceness I wanted to allow a server side team to easily include the CSS and related HTML and change the orientation of these buttons based on selecting a class name. I chose to use unordered lists so that without CSS the links, which is essentailly what the buttons are, would still function. Plus of course the UL structure allows me to change the orientation of the buttons in CSS, by stating “display : inline”, or “display : block;”.
The main aim I had in mind was trying to visually tell the user when they had already clicked on one of these buttons and I did this using the pseudo class “:visited” on the a selector, to choose a different icon, of course this works in IE6 too because the a selector is the only thing IE6 supports this technique on. Beautiful code, well tested, well conceived, using bulletproofing to ensure the elements look right in any circumstance and the design isn’t too bad either, who said these had to be square, they could be splodges of paint on a childs painting game.