tag:blogger.com,1999:blog-303796992024-03-13T11:23:49.116+00:00Caroline Mockettmy blog about creative web design, standards and accessibilityCaz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.comBlogger117125tag:blogger.com,1999:blog-30379699.post-22713216373891732512008-06-16T15:32:00.003+00:002008-07-07T13:29:46.123+00:00A New Home!It's always been my ambition to get my various blogs integrated properly with their relevent website. And whilst I've enjoyed being hosted with Blogger for the past couple of years, now I've finally managed to get everything set up properly on my personal website.<br /><br />The main site lives at <a href="http://www.cazmockett.com/" rel="me">http://www.cazmockett.com/</a> and you can now find <a href="http://www.cazmockett.com/blog/" rel="me">this blog migrated</a> to the site too, with a properly integrated version of WordPress and a lovely new style to match the rest of the site.<br /><br />I shall be leaving this site here as a permanent record, but all <a href="http://www.cazmockett.com/blog/?feed=rss2">new posts</a> will now appear at the other site. I hope you follow me there!Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-81364748637870838222008-01-30T18:06:00.000+00:002008-12-09T16:12:56.878+00:00Some Browser Share Analysis of My BlogsAs web designers, we all know how important it is that you are aware of your target audience, and what sort of browser they might be using to view your sites.<br /><br />I was idly fiddling with the <a href="http://www.sitemeter.com/">Sitemeter Stats</a> for my blogs today, and was intrigued by the variation in browser share between them - largely reflecting their readerships, and how "geeky"/computer literate the visitors may be. They're all hosted on Blogger and have referrals from a variety of sources.<br /><br />First up, <a href="http://cazmockett.blogspot.com/">this blog</a> shows the largest number of different browers - even getting a few percent of views with Konqueror and Opera 9. I see 2% of folks are still straggling along with Netscape 5 too! The majority are on Firefox 2 - just edging IE7 by 6%. I guess this wide spread of browsers reflects the "geekery" of the content and people using niche browsers are likely to read webhead stuff!<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgflEbAEL2vHfnkShIWap83ykSv0RsDh-SXXlIKdR-I-WAYP9KJl9w_3zdQCKreWOmX25EQqs5kWgKqO2l6537Z7rPK6Hj0T4hAmvMqnTzj8hvHYump51X6If1PWKcG5174aiPt/s1600-h/20080130_pie1.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgflEbAEL2vHfnkShIWap83ykSv0RsDh-SXXlIKdR-I-WAYP9KJl9w_3zdQCKreWOmX25EQqs5kWgKqO2l6537Z7rPK6Hj0T4hAmvMqnTzj8hvHYump51X6If1PWKcG5174aiPt/s400/20080130_pie1.gif" alt="" id="BLOGGER_PHOTO_ID_5161335558484268082" border="0" /></a>[Browser Share pie chart for <span style="font-weight: bold;">this blog</span> readership]<br /><br />The second chart is my <a href="http://rugbymadgirl.blogspot.com/">Rugby Mad blog</a> - the first one I started back in Feb 2006. Although the subject is just limited to rugby, I'm guessing that the readers represent a more "average" web user - the blog was linked from the BBC's Six Nations blog last year, and I got massive numbers of hits from that. They are certainly a less geeky crowd than above. This is reflected by the stats - nearly half of them are using IE7 - with IE6 the next largest chunk at 28% <span style="font-weight: bold;"><sigh /></span>. Firefox has plummeted 20% compared to the geeky blog. And it looks like around 8% read from a Mac (although I suppose some could be using Safari on a PC now). But no Netscape in sight!<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYz4JstHBfbQyxbsoBmGNVboxQ9EdoW-Z_krc0pdkdW-Shn3Dw5qu3ckgRn-DwQKyyEAtK1LUIiWHeUQDVCLqqmF_EjL4QMsKyk7h0nxRPEvChk0tRFAmCnr8WMwnm92ssWWGm/s1600-h/20080130_pie2.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYz4JstHBfbQyxbsoBmGNVboxQ9EdoW-Z_krc0pdkdW-Shn3Dw5qu3ckgRn-DwQKyyEAtK1LUIiWHeUQDVCLqqmF_EjL4QMsKyk7h0nxRPEvChk0tRFAmCnr8WMwnm92ssWWGm/s400/20080130_pie2.gif" alt="" id="BLOGGER_PHOTO_ID_5161335562779235394" border="0" /></a>[Browser Share pie chart for my<span style="font-weight: bold;"> RugbyMad </span>blog readership]<br /><br />My <a href="http://cazphoto.blogspot.com/">Photographic blog</a> is most similar to the web design one - although there aren't any die-hard Konqueror or Opera fans amongst the readership! The Netscape stragglers are back in about the same numbers :-)<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF2y7aYnoyOZ0vrT0iZ5GznQUz_bVSsTMgvBBSuL2Hi3G2Ze3lc_ngazEss6F0wykOCWcVdaCanY0YlO0f-0FJtkQpV5CQeR0tcRbjQWnxb6Krr7X6ubzE9_C7og2QmOkipGQ2/s1600-h/20080130_pie3.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF2y7aYnoyOZ0vrT0iZ5GznQUz_bVSsTMgvBBSuL2Hi3G2Ze3lc_ngazEss6F0wykOCWcVdaCanY0YlO0f-0FJtkQpV5CQeR0tcRbjQWnxb6Krr7X6ubzE9_C7og2QmOkipGQ2/s400/20080130_pie3.gif" alt="" id="BLOGGER_PHOTO_ID_5161335562779235410" border="0" /></a>[Browser Share pie chart for my <span style="font-weight: bold;">Photographic blog</span> readership]<br /><br />Last of all is my newest blog, <a href="http://366pix.blogspot.com/">My Year In Pictures</a>. It's been running less than a month, whereas the rest have been going for a year or more. I guess potential users of older browsers may have upgraded before this one went live (I think the stats are derived from the last 12 months if the blog has been going that long). The most surprising is Firefox 2 with a whopping 42% share, a good 8% ahead of IE7. There's still around 18% of users clinging to IE6. Safari and Netscape figure in the few percent.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhok8UpUQi9gZEBiRmWY1zOXTqthrItYoRMCNfaVHcaDl5iyNcICd2ekHAvDn2CPlTMmdSGh83UyhOe7zTOTWmuxf0iNUiaXLy-MwwzhyQCiBLHU9QxOxs46b6Nd1ETsd4HaO4O/s1600-h/20080130_pie4.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhok8UpUQi9gZEBiRmWY1zOXTqthrItYoRMCNfaVHcaDl5iyNcICd2ekHAvDn2CPlTMmdSGh83UyhOe7zTOTWmuxf0iNUiaXLy-MwwzhyQCiBLHU9QxOxs46b6Nd1ETsd4HaO4O/s400/20080130_pie4.gif" alt="" id="BLOGGER_PHOTO_ID_5161335567074202722" border="0" /></a>[Browser Share pie chart for my <span style="font-weight: bold;">Year In Pictures blog</span> readership]<br /><br />So, what does all this tell me? It just shows that with the proliferation of new browsers, while Firefox is doing well in the geeksphere, IE7 is gaining ground - but IE6 is still alive and kicking (us) amongst the "average" web user. And yes, there are still some poor folks using Netscape - people, if it's within your power, upgrade to a nice shiny new browser!<br /><br />When I build sites for clients, I'll always design it for Firefox. Then test/fix for IE7 (some niggles but not major problems) and pesky IE6 (usually requires more tweaks). I'll also have a look at them in Safari (PC) and Opera 9.02 - there may be slight presentational differences, but no show-stoppers.<br /><br />For a laugh, I'll also take a peek in IE5.5 (and 5.02 if I'm feeling masochistic), but I'm not going to waste any time fixing bugs for them. Let's face it - <span style="font-weight: bold;">none</span> of the above readers have registered as using them - and I'm guessing on average, these stats are pretty applicable for most web users these days, no matter what content they are browsing - so why should I flog myself unneccessarily?Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com2tag:blogger.com,1999:blog-30379699.post-20121602667668131672007-12-05T16:44:00.000+00:002007-12-05T18:21:50.373+00:00Lifestream, Yahoo! Pipes and jQuery<a href="http://lifestream.adactio.com/" rel="friend met">Jeremy Keith's lifestream</a> was the first I saw online, where he'd aggregated together his many RSS feeds into one place. It shows the various sources ordered by time, and it can be quite interesting to follow along and see what sort of sources are most prevalent at any one time. I'd been meaning to have a play with something similar myself for some time, but wasn't sure how to go about it. Then a couple of weekends ago, I went to <a href="http://cazmockett.blogspot.com/search/label/BarCampLondon3">BarCampLondon3</a> and <a href="http://blog.cristianobetta.com/" rel="friend met">Cristiano Betta</a> did a great session on how to author your lifestream using <a href="http://pipes.yahoo.com/pipes/">Yahoo! Pipes</a>. There's bags <a href="http://blog.cristianobetta.com/2007/11/23/how-to-build-your-own-lifestream-with-yahoo-pipes-and-no-server-side-logic/">more information</a> about how to do it at his blog. Finally, I thought it was about time I had a play with it myself. The feeds I used were the following:<br /><ul><li>My <a href="http://cazphoto.blogspot.com/feeds/posts/default" rel="me">photographic blog</a></li><li>My <a href="http://rugbymadgirl.blogspot.com/feeds/posts/default" rel="me">rubgymad blog</a></li><li>My <a href="http://cazmockett.blogspot.com/feeds/posts/default" rel="me">web design blog</a></li><li>Stuff I post to <a href="http://api.flickr.com/services/feeds/photos_public.gne?id=57821189@N00&format=rss_200" rel="me">Flickr</a></li><li><a href="http://twitter.com/statuses/user_timeline/81923.atom" rel="me">My tweets</a> from Twitter</li><li><a href="http://del.icio.us/rss/cazmockett" rel="me">Stuff I'm reading</a> via del.icio.us</li></ul>I decided against using <a href="http://ws.audioscrobbler.com/1.0/user/cazmockett/recenttracks.rss" rel="me">my Last.fm feed</a> for the moment, as it would probably swamp all the other inputs (I listen to a lot of music while working, it's one of the perks of working from home, no-one moans about your choice of songs!).<br /><br />Having got the basic lifestream out of Pipes, I used Dreamweaver's XSLT transform functionality to generate a list which would sit in my ASP.NET page. I wanted to use specific icons to show which feed each item was from. Cristiano was using a JSON output for his pipe, but mine is coming out as RSS, so the custom ID's applied in the pipe weren't getting through, since they're not part of the RSS spec.<br /><br />CSS3 attribute selectors are one option, but they don't work in clunky browsers like IE6. So having also been at <a href="http://simonwillison.net/" rel="met">Simon Willison</a>'s <span style="font-weight: bold;">jQuery</span> session at BarCampLondon3, I thought I'd have a play with with the library to see if I could do some neat DOM manipulation to add the correct class to each list item.<br /><br />The Llifestream list is marked up thus: <span style="font-weight: bold;"><ul id="lifestream"></span>. I added some jQuery to insert the class for the list element, based on the attribute of the link it contains. That requires a parent element to be changed, based on it's child's attributes. Slightly tricky for a jQuery novice like myself. It took me a while but eventually I found the correct syntax:<br /><blockquote>$(document).ready(function() {<br />$("#lifestream > li > a[@href^=http://twitter]").parent("li").addClass("twitter");<br />}); </blockquote>The first line calls jQuery once the full DOM is loaded; line 2 (which looks rather horrible with text wrap, but bear with me) selects an anchor with the attribute which begins with "http://twitter", but I wanted the class added to the parent LI, so hence the chaining of jQuery functions.<br /><br />Now all I needed to do was to add a case for each link type to my new <span style="font-weight: bold;">lifestreamclasses.js</span> file and add a linke to it in the header of my lifestream page, and the proper stylings can be applied. I decided to keep them in a separate JS file for ease of maintenance. Once the pipe has mashed it all together and I've written the relevant styles into the stylesheet, the resulting RSS aggregated feed <a href="http://www.carolinemockett.com/design/lifestream.aspx">looks like this</a>.Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com3tag:blogger.com,1999:blog-30379699.post-79299058115515111222007-11-25T22:03:00.000+00:002008-12-09T16:12:57.766+00:00BarCampLondon3 - Day 2Sunday morning saw various folks rise from the dead and gather for breakfast - another mighty catering WIN from Google's chefs - Full English if you so wished, fruit and cereals for those of a more delicate constitution.<br /><br />It took a while for the brain cells to get going (copious amounts of coffee and fresh orange juice helped), so the first session I sat in on was the second of the day.<br /><br /><span style="font-weight: bold;">What To Teach The Next Gen Web Devs - Dan Dixon</span><br /><a href="http://www.digitaldust.org/" rel="met acquaintance">Dan</a> is a lecturer teaching today's university-age students about the web. His round-table discussion focussed on what sort of curriculum they should be getting, from a working designer/industry expert opinion. The whiteboard proved useful in splitting up the syllabus into 4 stages and brainstorming the essentials of what should be covered:<br /><br /><span style="font-style: italic;">Universals:</span><br /><ul><li>Accessibility as best practice, not an afterthought</li><li>Make them aware of an international web (localisation issues)</li><li>Good communications skills - ability to present their projects and lead discussions</li><li>Need good writing skills for email, reports, blog posts</li><li>Give them business context for their skills</li><li>Point them towards the developer community</li></ul><span style="font-style: italic;">Foundation: </span><br /><ul><li>Not too much emphasis on specific tools - teach basics of HTML/CSS</li><li>Fundamentals of design</li><li>Typography</li><li>HCI and UX design</li><li>The ideas of the web - a bit of history about the technology?</li><li>Empowerment</li><li>What is the web for? - show them it's not just Facebook</li><li>Different ways of working</li><li>Tell them about realistic career paths</li><li>Basics of how to program</li></ul><span style="font-style: italic;">Middle: </span><br /><ul><li>Practice-based</li><li>CSS, JavaScript</li><li>PHP/Ruby</li><li>Wireframes/IA/Sitemaps</li><li>Do usability testing</li><li>Make sure something they have worked on is torn apart (might sound harsh, but it's going to happen sooner or later!)</li><li>Small groups/projects</li><li>Understand project management skills</li></ul><span style="font-style: italic;">Internship: </span><br /><ul><li>Need good HTML/CSS skills so they are immediately useful - don't want to end up just making the tea</li><li>Need to work as part of a team</li><li>Know about browser testing</li><li>How to interact with clients - people skills</li><li>Innovation</li><li>Time estimation</li><li>Should be able to choose a path - Front End or Design or Programming or UX/IA and be able to gain relevent experience in that</li></ul><span style="font-style: italic;">End: </span><br /><ul><li>More on localisation</li><li>Project Manage a 2nd-year team</li><li>Start a project from scratch</li><li>More about business and how it works</li></ul>It was a very thought-provoking session, and a few of us continued in well into the break. Then coffee called, so I ended up missing another session! Oh well.<br /><br /><span style="font-weight: bold;">Self Publishing - Vicky Lamburn</span><br /><a href="http://lilserenity.wordpress.com/">Vicky</a> has self-published several fiction books and gave us some tips on the tools she uses for writing and typesetting (Word on Window), Lyx (for Ubuntu). Then she gave us a quick tour round the <a href="http://lulu.com/">Lulu</a> self publishing site. It is possible to get a book with ISBN - or self-promote, distribute, sell via web etc. In general, covers need to be 300dpi TIFF while text is usually send as a PDF (fonts only embedded where licencing is not an issue).<br /><br />Then it was time for lunch! Still more food...<br /><br /><span style="font-weight: bold;">BarCamp Rhine - Sebastian "CB" Grünwaldt</span><br /><a href="http://www.blog.cbgreenwood.de/" rel="met friend">CB</a> gave a great presentation on the proposals for <a href="http://barcamp.org/BarCampRhine">BarCampRhine</a>, which basically involves BarCamp on a ship sailing from Basel (Switzerland) to Rotterdam (Netherlands), with static BarCamps in cities along the way, such as Basel, Karlsrühe, Mannheim, Köln, Strasbourg, and Rotterdam. The idea was originally suggested by Frenchman <a href="http://www.sachal.fr/">Sacha Lemaire</a> and has been presented at various BarCamps in Europe since then.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMvu5UvdZAf8Pn_Bj6Ll2AiTxUZha_MKgkC2hy6wWzEy9ZKP19RYd7TlzPlyp7wGH2GLrwopiO7qt8MBdSW9YC-nqovW2KJ9LzsMhZWtkQjuFnHXwz-PLX6Ey3GzD7mzGoqxaa/s1600-h/20071125_D289-10.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMvu5UvdZAf8Pn_Bj6Ll2AiTxUZha_MKgkC2hy6wWzEy9ZKP19RYd7TlzPlyp7wGH2GLrwopiO7qt8MBdSW9YC-nqovW2KJ9LzsMhZWtkQjuFnHXwz-PLX6Ey3GzD7mzGoqxaa/s320/20071125_D289-10.jpg" alt="" id="BLOGGER_PHOTO_ID_5137548133808658818" border="0" /></a>[CB explaining the BarCampRhine idea to those in the room and in the chatroom]<br /><br />If it goes ahead, it sounds like it will be a brilliant fortnight - but it needs lots of work and enthusiasm to make it happen - so if you are interested, go and sign up at the Wiki and let the other folks know you want to help. CB's talk led on nicely to Ryan Alexander's which followed:<br /><br /><span style="font-weight: bold;">Future of BarCamps - Ryan Alexander</span><br /><a href="http://rnalexander.wordpress.com/" rel="friend met">Ryan</a>'s session involved asking two recent BarCamp organisers up on stage and asking some important questions about how much work was involved with putting on a BarCamp. <a href="http://www.cubicgarden.com/" rel="friend met">Ian Forrester</a> (London) and <a href="http://blog.soistdas.de/" rel="met aquaintance">Oliver Berger</a> (German BarCamps) kindly shared their experiences with us:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3_iVbeo_UvbNEQIS-3Eix3ErwRJsxmp419RlUQd-Ouv1Z91pghANNfhM5j-VZvXf3LUzeQF8gvT5iKRrCbQ0iDckicuTVy7TLTRQfpUSR0FZXbjiTXCh2cpo2zvylFn409Wd9/s1600-h/20071125_D289-25.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3_iVbeo_UvbNEQIS-3Eix3ErwRJsxmp419RlUQd-Ouv1Z91pghANNfhM5j-VZvXf3LUzeQF8gvT5iKRrCbQ0iDckicuTVy7TLTRQfpUSR0FZXbjiTXCh2cpo2zvylFn409Wd9/s320/20071125_D289-25.jpg" alt="" id="BLOGGER_PHOTO_ID_5137548146693560722" border="0" /></a>[Question Time]<br /><br /><span style="font-weight: bold;">Q.</span> How long have you spent working on BarCamp?<br /><span style="font-weight: bold;">A.</span> Ian - Backstage are a sponsor, some time can be claimed from work time - at least a week's time.<br /><br /><span style="font-weight: bold;">Q.</span> How much personal risk did you need to take?<br /><span style="font-weight: bold;">A.</span> Ian - does not put himself at risk, sponsors take the can. Oliver, some risk.<br /><br /><span style="font-weight: bold;">Q. </span>How many others helped out?<br /><span style="font-weight: bold;">A.</span> Oliver 12-15. Ian 2 Googles.<br /><br /><span style="font-weight: bold;">Q.</span> How many others would think about organising an event<br /><span style="font-weight: bold;">A.</span> Most people in room. Alistair organising one in Tyneside. Previous experience to give it a go.<br /><br /><span style="font-weight: bold;">Q. </span>Norm - what would you do for a first step?<br /><span style="font-weight: bold;">A.</span> Get people to help - people who are passionate about it.<br /><br /><span style="font-weight: bold;">Q.</span> How would you find those people?<br /><span style="font-weight: bold;">A.</span> Don't know (Norm). Ian - says its a lot easier to go it along to begin with. Oliver - don't need to look for passionate people - they will ask you if they can help.<br /><br />Ryan's suggested <span style="font-weight: bold;">BarCamp</span><sup style="font-weight: bold;">2</sup><span style="font-weight: bold;"> </span>- a BarCamp about organising a BarCamp. This seemed to go down well, and hopefully something concrete will begin to take shape soon.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj2vz70X1s4e-_HB55hpGgtyRAi2lTn-HKaZSfsMbJBBotfIAgmeSAR6Lz5spIYsyOpeqURvcu_jVfOlBeGHseDj3MsZ4rWcF6OXk45nbOeV3pC4OenPnNSDxaDNQC7P6jjC4u/s1600-h/20071125_D289-27.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj2vz70X1s4e-_HB55hpGgtyRAi2lTn-HKaZSfsMbJBBotfIAgmeSAR6Lz5spIYsyOpeqURvcu_jVfOlBeGHseDj3MsZ4rWcF6OXk45nbOeV3pC4OenPnNSDxaDNQC7P6jjC4u/s320/20071125_D289-27.jpg" alt="" id="BLOGGER_PHOTO_ID_5137548150988528034" border="0" /></a>[So meta, it hurts]<br /><br /><span style="font-weight: bold;">Anatomy of a Business Card - Ross Bruniges</span><br /><a href="http://www.thecssdiv.co.uk/" rel="friend met">Ross</a>'s lighthearted look at the power of a business card can be summarised as follows:<br /><ul><li>Keep in touch with the people you meet up with. </li><li>Once you have a name you can see where people are going - Flickr, etc</li><li>Twitter - finding out what people are doing now.</li><li>Upcoming - what's going to happen</li></ul>He ended with a favourite photo of himself:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimebBfCLN_zrGUSQVeERWUkxRUlfN2y4kfIqjWORedZAuHEIgBHCtNQ5C-98_qmQp5rtYEv-Oia-Td2MV7QDI5DEFZxmj-PMs_wQZ464EIX6cbMBqwwHB0bhxEkRFsHI5ucmpw/s1600-h/20071125_D289-34.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimebBfCLN_zrGUSQVeERWUkxRUlfN2y4kfIqjWORedZAuHEIgBHCtNQ5C-98_qmQp5rtYEv-Oia-Td2MV7QDI5DEFZxmj-PMs_wQZ464EIX6cbMBqwwHB0bhxEkRFsHI5ucmpw/s320/20071125_D289-34.jpg" alt="" id="BLOGGER_PHOTO_ID_5137548155283495346" border="0" /></a>[Ross and his <span style="font-weight: bold;">Pimp</span> goblet]<br /><br />Then we were all encouraged to exchange cards with folks in the room who didn't already have ours.<br /><br /><span style="font-weight: bold;">Rise & Inevitable Fall of Pub Standards - Dan Webb</span><br />In the beginning... <a href="http://danwebb.net/" rel="friend met">Dan</a> took us on a little historical tour on how <a href="http://pubstandards.co.uk/">PubStandard</a>s formed, why it's good and why you shoulnd't miss the next one:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQQrgVmYoPbG96BYqaaQvN23gxdP9dHmQa4mRzfpa3eN5E5EGaVDa75de3EO1Yp6YZTDZi0cjW5eiNZgBSFUnM9uZfH59epSkSJ9TbrtDI_FBVKFw7KLVzQL5ilA96eVVisyNv/s1600-h/20071125_D289-39.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQQrgVmYoPbG96BYqaaQvN23gxdP9dHmQa4mRzfpa3eN5E5EGaVDa75de3EO1Yp6YZTDZi0cjW5eiNZgBSFUnM9uZfH59epSkSJ9TbrtDI_FBVKFw7KLVzQL5ilA96eVVisyNv/s320/20071125_D289-39.jpg" alt="" id="BLOGGER_PHOTO_ID_5137548155283495362" border="0" /></a>[Who needs the conference?]<br /><br />As the sessions came to a close, everyone reconvened in the main canteen for the farewell closing speeches. I think everyone agreed it was a spectacularly successful BarCamp, certainly the best I've been to.<br /><br /><span style="font-weight: bold;">The Highs?</span> - brilliant wifi, food to die for, lots of geek toys to play with and plenty of friends old and new to hang out with, winning at Werewolf!<br /><br /><span style="font-weight: bold;">The lows?</span> - not getting enough sleep, not wanting to leave! Roll on BarCampLondon4...Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com3tag:blogger.com,1999:blog-30379699.post-68051876454822616212007-11-25T09:41:00.000+00:002008-12-09T16:12:59.579+00:00BarCampLondon3 - After HoursIf you're staying overnight (which is essential for the full BarCamp experience), then there isn't really an "after hours" - you just keep going for as long as there's a geek still standing.<br /><br />After the first day's sessions came to a close, the socialising began in earnest. Here we see Mr Boozeniges living up to his name:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWfIPtb9FqH_ELQvnCiAEA0VHTRJ_eugXP3JfdUE2vObDwuPZ8QhI0l6Asfs43ZXQZiKreXoAfrPJDEceXHmq8BOkP6dZPEheVO7gn1Dx4BQHUSazCYxk430qh-_LB5voS3o4/s1600-h/20071124_D288-106.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWfIPtb9FqH_ELQvnCiAEA0VHTRJ_eugXP3JfdUE2vObDwuPZ8QhI0l6Asfs43ZXQZiKreXoAfrPJDEceXHmq8BOkP6dZPEheVO7gn1Dx4BQHUSazCYxk430qh-_LB5voS3o4/s320/20071124_D288-106.jpg" alt="" id="BLOGGER_PHOTO_ID_5137314208414882098" border="0" /></a>[First steps in drinking the mighty Google dry]<br /><br />Inevitably, where geeks gather, there will be interminable rounds of Werewolf, for it is writ in Lore.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiMfBvuBZ-BCUoDXrQDwshJ7tvfMDUGxJX8BOjb2-VLehJdkvqWn-it42YQt_lGcjSDshT-N3oBDWlAzjJZP_INvaWvfKa0rm5_0AFhCikESOrA9fNEyC9VuBzgGfVUtkih1l-/s1600-h/20071124_D288-115.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiMfBvuBZ-BCUoDXrQDwshJ7tvfMDUGxJX8BOjb2-VLehJdkvqWn-it42YQt_lGcjSDshT-N3oBDWlAzjJZP_INvaWvfKa0rm5_0AFhCikESOrA9fNEyC9VuBzgGfVUtkih1l-/s320/20071124_D288-115.jpg" alt="" id="BLOGGER_PHOTO_ID_5137314212709849410" border="0" /></a>[Short break in a round of Werewolf. Cheer up! Anyone would think someone just died... oh wait!]<br /><br />I think I must have played at least half a dozen games during the evening. But the most satisfying has to be the one that wrapped up around 5am - final round me [Werewolf] versus <a href="http://www.kid666.com/" rel="friend met">Tom Hughes-Croucher</a> and <a href="http://www.blog.cbgreenwood.de/" rel="friend met">Sebastian "CB" Grünwaldt</a> [villagers] and Tom decides to nominate CB - mwahhaha! I win! Yum yum, <span style="font-weight: bold;">tasty</span> villagers.<br /><br />Talking of tasty, as if the mountains of food served for dinner weren't enough, Google laid on a midnight feast for the geeks - freshly cooked waffles, pancakes and a chocolate fountain. Man, you could get soooo fat working here...<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0voay31bo9sxJ6sV1VAR8hKxUVUiZW8cny72RKI-9Bhzvec2GVYRDepzYDevbQqpP0M7JnzIcmgKsqgJIblr8ygsITbn6VovL3y32w84FNalXgGkwMTkQ7395kTuAg2gZGr19/s1600-h/20071124_D288-125.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0voay31bo9sxJ6sV1VAR8hKxUVUiZW8cny72RKI-9Bhzvec2GVYRDepzYDevbQqpP0M7JnzIcmgKsqgJIblr8ygsITbn6VovL3y32w84FNalXgGkwMTkQ7395kTuAg2gZGr19/s320/20071124_D288-125.jpg" alt="" id="BLOGGER_PHOTO_ID_5137314217004816722" border="0" /></a>[The chocolate fountain - just had to be tried, didn't it?]<br /><br />There were loads of games to play (Wii sports, tabletennis, fussball) and even a <a href="http://www.segway.com/">Segway</a> to fool around with. However, <span style="font-weight: bold;">Jan</span> and <span style="font-weight: bold;">CB</span>, two of the crazy German <a href="http://londonbubble.tumblr.com/">LondonBubble</a> guys decided they could go one better than the Segway with their two-seater "find":<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_8UVUi1LRt9BTEcioBVPYIHtAwFrMkAxFsAAnZhXADEmF9G84UB8uPBH-QzSjxU7E3hjV_QDEJt_XAvkcYR0dQGtVzZdQLddUTmXtzqo-uybMikXrZwLx_4aoc1FHF_evEv27/s1600-h/20071124_D288-135.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_8UVUi1LRt9BTEcioBVPYIHtAwFrMkAxFsAAnZhXADEmF9G84UB8uPBH-QzSjxU7E3hjV_QDEJt_XAvkcYR0dQGtVzZdQLddUTmXtzqo-uybMikXrZwLx_4aoc1FHF_evEv27/s320/20071124_D288-135.jpg" alt="" id="BLOGGER_PHOTO_ID_5137314217004816738" border="0" /></a>[Ticket To Ride - CB drives with Jan on the back, looking justifyably worried]<br /><br />But the weirdest trick of the evning must go to <span style="font-weight: bold;">Oliver Uuberholz</span> (<a href="http://londonbubble.tumblr.com/post/19945182">another LondonBubble boy</a>) who decided the empty beer fridges were going to waste and his Mac was getting too warm:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJT3NGAiB1VB-J3PUTzKJZGNi5KGgaDgNQVuf1erIYxQ_qdxxDkbXFdnf4DP9LQ4SYp2HD7cetFwvQM3FvdhPLSLjgEF2PMC5IbcNv_0zw2aCi1CliCvZQZsCJDxwmf8xsCsh/s1600-h/20071124_D288-139.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJT3NGAiB1VB-J3PUTzKJZGNi5KGgaDgNQVuf1erIYxQ_qdxxDkbXFdnf4DP9LQ4SYp2HD7cetFwvQM3FvdhPLSLjgEF2PMC5IbcNv_0zw2aCi1CliCvZQZsCJDxwmf8xsCsh/s320/20071124_D288-139.jpg" alt="" id="BLOGGER_PHOTO_ID_5137314221299784050" border="0" /></a>[Macs in the fridge]<br /><br />Enough craziness, and being about dead on my feet by 5:30am, I went to find a quiet bit of floor to collapse on for 3 hours.Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-42049971821229973172007-11-24T19:00:00.000+00:002008-12-09T16:13:00.884+00:00BarCampLondon3 - Day 1The time for another <a href="http://barcamp.org/BarCampLondon3">BarCampLondon3</a> has rolled around, and I was lucky enough to get a ticket. We all turned up at <a href="http://www.google.co.uk/">Google</a>'s swanky offices in Victoria knowing we would have a good time, but not quite realising what a <span style="font-weight: bold;">great</span> time we were in for.<br /><br />The organisation went very smoothly, the wifi was rock solid, there was more food, beer and snacks than even a BarCamp-load of geeks could consume (well, apart from the beer - it's the first time Google's fridges have been emptied, oops!)<br /><br />As usual with an unconference, it was all about the sessions folks decided to give, and we were treated to some really thought-provoking and fun discussions. It was a shame that out of the 100 attendees, about 30 chose not to present. So the schedule was a little light at times, but that's not always a bad thing - nice to catch your breath every now and then! <a href="http://adactio.com/journal/" rel="friend met">Jeremy</a> marked up the <a href="http://adactio.com/extras/schedules/barcamplondon3/">timetable</a> for us all to refer to easily.<br /><br />The first session I went to was <span style="font-weight: bold;">Tom Morris - Scraping Sucks</span> - where he was giving us more usable alternatives to scraping HTML, namely doing clever stuff with GRDDL. He says it's much easier that way. As usual, I nodded sagely at the time, and then a couple of hours later, wondered what it was all about. <a href="http://tommorris.org/blog/" rel="friend met">Tom</a> is a great geek, but he's several steps ahead of me when it comes to brain-wracking abilities :-) He's put up a page of <a href="http://tommorris.org/profiles/tommorris">GRDDL Profiles here</a> - which lets you look at (X)HTML and with an XSLT transform, spits out XML/RDF which can be used as you want.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_zthzGt9OaRBohPnhLHaxT_BXQomKTDfhYSiS2Aj3SY0aIw7OFbwftR7PU_MrgSmbZgQrZSf9_lMsg1nV-a3exqjOFu7YnkCfjeA-3PEcwsk_xcihb6R6Bn_NDiKNi3nRFLyO/s1600-h/20071124_D288-015.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_zthzGt9OaRBohPnhLHaxT_BXQomKTDfhYSiS2Aj3SY0aIw7OFbwftR7PU_MrgSmbZgQrZSf9_lMsg1nV-a3exqjOFu7YnkCfjeA-3PEcwsk_xcihb6R6Bn_NDiKNi3nRFLyO/s320/20071124_D288-015.jpg" alt="" id="BLOGGER_PHOTO_ID_5137302891176057058" border="0" /></a>[Tom gets stuck in to his presentation]<br /><br /><span style="font-weight: bold;">Norm's Law<br /></span>This was an excellent presentation from <a href="http://cackhanded.net/" rel="friend met">Mark Norman Francis</a>. He gave us some very good reasons for doing code <span style="font-style: italic;">his</span> way - especially for fostering interoperability betweeen different members of the team, or yourself coming back to code at a later date. Some points included:<br /><ul><li>Use spaces not tabs</li><li>Code goes no further than col 77 </li><li>No-one ever died from using too much whitespace</li><li>Separate operators and braces - more of a cognitive burden to parse squashed up code</li><li>Always indent by 4 spaces ONLY</li><li>Line up assignments of variables (equals sign in the same place etc)</li><li>Line up data tables too (arrays or whatever)</li><li>Space keys out from brackets $vote[ $value }++; etc</li><li>Space keywords out not functions</li><li>Vertical rhythm - break bits up with comments for each sub part - make a story out of it</li><li>Respect left-to-right comprehension</li><li>K&R bracketing - opening brace should be tied to RHS end of line, closing brace should be on a new line - aligned with the starting coment</li><li>Don't cuddle and else!</li><li>One statement per line - you can easily miss the ";" in the middle of the line separating the two commands</li><li>Break lines before operators - EXCEPT in JavaScript or it won't work</li><li>Ignore operator precidence - use brackets to make it more "English readable"</li><li>Use single quotes where possible - ' in PHP will just be stuffed in, " will make PHP parse the contents looking for variables</li><li>Factor out long expressions and use intermediate variables (with english-sensible names) to break up</li><li>Always use x on regexpressions</li><li>Don't use camelCase! unless you're in JavaScript</li><li>Systems Hungarian is harmful, Apps Hungarian is too</li><li>All short variable names are harmful</li><li>Use grammatical variable names and function calls</li><li>Optimise for humans first! Machines - throw more hardware at it - but you can't refactor comprehension</li><li>HTML indents use 2 spaces not 4</li><li>Write the whole document FIRST before you do any CSS etc</li><li>Insert Microformat classes</li><li>Always use single quotes in attributes</li><li>Inline CSS means you've done it wrong</li><li>If it only works in JS don't</li><li>VALIDATE</li><li>Start with base stylesheets - reset, fonts, layout</li><li>Use Uppercase tags in HTML</li><li>Keep z-index below 50</li></ul><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSNEI_gOXUdHbwwSemE03L4nFcOlGcmJRA-L1hKRqJnsPF9DAXbe54vJVWpNFk1kGfYyar8z_XzoTqOIaFHMcldDrVaJXt4F8GSRRN2DrzZfpJC9Tm3X340lGYPg8Mh_Oqs7pz/s1600-h/20071124_D288-024.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSNEI_gOXUdHbwwSemE03L4nFcOlGcmJRA-L1hKRqJnsPF9DAXbe54vJVWpNFk1kGfYyar8z_XzoTqOIaFHMcldDrVaJXt4F8GSRRN2DrzZfpJC9Tm3X340lGYPg8Mh_Oqs7pz/s320/20071124_D288-024.jpg" alt="" id="BLOGGER_PHOTO_ID_5137302895471024370" border="0" /></a>[Norm - I can haz 4 skreenz]<br /><br />Next up was a session about new developments from the BBC's web team:<br /><br /><span style="font-weight: bold;">BBC APIs First Look</span><br />PIPs is the system to list all broadcasted stuff - telly and radio<ul><li><a href="http://www.bbc.co.uk/programmes">bbc.co.uk/programmes</a></li><li>Gives a list of all current programmes - by genre or alphabetically</li><li>Nice URLs which can have .yaml or .json can be added for the feed in that format</li><li><a href="http://www.blogger.com/bbc.co.uk/programmes/formats">bbc.co.uk/programmes/formats</a></li><li>Pid is the 8-character id for each episode - taken from user experience tests and will always be constant (never change)</li><li>JSON and YAML are the two formats currently supported - XML coming? - <a href="http://dbtune.org/bbc/programmes/">RDF ontology has been produced</a></li><li>RSS feed is coming so you could subscribe to know when "every episode of Doctor Who" is on</li><li>Data model - "programme" can be brand, series or episode - an episode can have multiple versions (signed, extended etc) which then have broadcast (tv) or ondemand (iPlayer) times</li><li>Historical data back to May 2006</li><li>Can filter out to network (tv or radio) eg Radio4</li><li>Next release (API stuff) in New Year</li><li><a href="http://catalogue.bbc.co.uk/">http://catalogue.bbc.co.uk/</a> - is historical data - grand plan is to have them merged</li></ul><span style="font-weight: bold;">DIY User Research - Leisa Reichelt</span><br /><a href="http://disambiguity.com/" rel="met">Leisa</a> gave us lots of good advice on how to carry out some DIY user research - her premise being that it doesn't have to take days and days and cost big bucks - and often talking to more than half a dozen victims volunteers gives you diminishing returns. <a href="http://www.slideshare.net/leisa/diy-user-research-londonbarcamp3">Leisa's slides</a> are already available at the <a href="http://www.slideshare.net/group/barcamp-london-3">Slideshare BarCampLondon3</a> group.<br /><br /><span style="font-weight: bold;">Building Lifestream with Yahoo! Pipes - Cristiano Betta</span><br />I didn't take many notes as I was listening as I was actually playing with a real Yahoo pipe of my own and trying to follow along with what Cristiano had to say. I've been meaning to use Pipes to create my own Lifestream for some time, but had a quick go before and things weren't coming out as I wanted. Cristiano has done a series of excellent <a href="http://blog.cristianobetta.com/2007/11/23/how-to-build-your-own-lifestream-with-yahoo-pipes-and-no-server-side-logic/">blog posts</a> to get you going, or you can watch <a href="http://blip.tv/file/get/Tommorris-CristianoBettaOnPipesAndLifestreams304.flv">Tom Morris' video of Cristiano's presentation</a>. Or view <a href="http://cristianobetta.com/lifestream/">Cristiano's own Lifestream</a>.<br /><br /><span style="font-weight: bold;">10 Things You Should Do In Project Management But Probably Don't - Gareth Rushgrove<br /></span><a href="http://morethanseven.net/">Gareth</a>'s top ten tips:<br /><ol><li>Use Source Control software</li><li>Validate markup - XML, RSS, Atom and JSON</li><li>CSS validation</li><li>Broken Links! check them thoroughly - <a href="http://validator.w3.org/checklink">W3C Link checker</a></li><li>Performance - do you have metrics for measuring the performance - <a href="http://developer.yahoo.com/yslow/">YSlow</a> is a Firebug enhancement, <a href="http://www.hpl.hp.com/research/linux/httperf/">httperf</a> - use uptime checker too such as <a href="http://www.pingdom.com/">Pingdom</a></li><li>Maintainable Javascript - <a href="http://www.jslint.com/">JSLint</a> gives you good tips</li><li>Carry out Unit Testing</li><li>Carry out Functional tests</li><li>Asset Compilation</li><li>Building Scripts<br /></li></ol>More at <a href="http://morethanseven.net/">morethanseven.net</a><br /><br /><span style="font-weight: bold;">Learning jQuery - Simon Willison</span><br /><a href="http://simonwillison.net/" rel="acquaintance met">Simon</a> gave us a lightining half hour tour of the <a href="http://jquery.com/">jQuery</a> Javascript library with great examples and <a href="http://www.slideshare.net/simon/learning-jquery-in-30-minutes">succinct slides</a> - you can get them from Slideshare. I've been meaning to beef up my JavaScript skills, and getting to grips with jQuery sounds like a good place to start.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3MWaRhyjU00IVUh5ZdXb4xJuipaMfZnky8LP0heYi3i59Ux4bSZIp4QPUDFRSIx4WqcmqS7DEAtis8lscWTWhu8Mi5IZEZobkW1X0LCudb-PuCUPKCNlQQI8C6TCp4kqjmdFa/s1600-h/20071124_D288-087.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3MWaRhyjU00IVUh5ZdXb4xJuipaMfZnky8LP0heYi3i59Ux4bSZIp4QPUDFRSIx4WqcmqS7DEAtis8lscWTWhu8Mi5IZEZobkW1X0LCudb-PuCUPKCNlQQI8C6TCp4kqjmdFa/s320/20071124_D288-087.jpg" alt="" id="BLOGGER_PHOTO_ID_5137302895471024386" border="0" /></a>[Simon talks about jQuery's Ajax capabilities]<br /><br /><span style="font-weight: bold;">Ask Them Anything</span><br />For the final sessions of day one, Norm and friends held an Ask Us Anything panel - just a bit of silliness to round off the proceedings before dinner. The guys from the Londonbubble did a live stream of the session to their mogulus chatroom, and it all got a bit recursive when this was put up on the main screen behind the guys:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidL-xJMqLNfr9FFbAqMFyuqi5LWMsDwZpGm4QhxoN3odeB0JEANBG2lfUivwZncSK49rhIGeL7V9JxQ1GS8bRgS-FbHF6frTc_G2SS8zExcq5r6xCkPCVNd2A50ad3mrdcoGh0/s1600-h/20071124_D288-097.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidL-xJMqLNfr9FFbAqMFyuqi5LWMsDwZpGm4QhxoN3odeB0JEANBG2lfUivwZncSK49rhIGeL7V9JxQ1GS8bRgS-FbHF6frTc_G2SS8zExcq5r6xCkPCVNd2A50ad3mrdcoGh0/s320/20071124_D288-097.jpg" alt="" id="BLOGGER_PHOTO_ID_5137302899765991714" border="0" /></a>[Behind you!]<br /><br />The chatroom folks even got to ask a question or two - and <a href="http://www.thecssdiv.co.uk/" rel="friend met">Ross</a> got a marriage proposal from a lady named <span style="font-weight: bold;">Picki</span> which he had to graciously decline!<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqifoMCYpxefhy3tZWfb4LYlIDnt_FxgkcZ5f0I-z8DMmCjJOz0S4oKTr1cIfbJ7lyuADnk_qkP0JJfvDa5apTrOQ27QicAJFT5aDVLBm6LIcwqP912ZQFzaxrsPGzPN8_u-FS/s1600-h/20071124_D288-096.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqifoMCYpxefhy3tZWfb4LYlIDnt_FxgkcZ5f0I-z8DMmCjJOz0S4oKTr1cIfbJ7lyuADnk_qkP0JJfvDa5apTrOQ27QicAJFT5aDVLBm6LIcwqP912ZQFzaxrsPGzPN8_u-FS/s320/20071124_D288-096.jpg" alt="" id="BLOGGER_PHOTO_ID_5137302895471024402" border="0" /></a>[Ross, Norm and Ryan answer the online questions]<br /><br />And so to dinner... but that's for another post.<br /><span style="font-weight: bold;"></span>Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-24557679291618742792007-10-04T16:49:00.000+00:002007-10-04T17:09:48.870+00:00Subquery Problems in mySQLI'm having trouble selecting data for a web-based application. There are three tables, <span style="font-weight: bold;">Articles</span>, <span style="font-weight: bold;">Keywords</span> and <span style="font-weight: bold;">KeywordsInArticle</span>. There is a many-to-many relationship between the articles and keywords, which is handled by the piggy-in-the-middle KeywordsInArticle table. So, if we have the following scenario:<br /><br /><strong>Articles<br /> <em>articleID articleName</em><br /></strong>1 First Article<br /> 2 Second Article<br /> 3 Third Article<br /> 4 Fourth Article<br /><br /><strong>Keywords<br /> <em>keywdID keyWord</em><br /> </strong>1 apples<br />2 oranges<br />3 bananas<br />4 grapes<br /><br /><strong>KeywordsInArticle<br /><em>articleID keywdID</em><br /></strong>1 1<br />1 3<br />2 1<br />2 2 etc<br /><br />We know that "First Article" is all about apples and bananas while "Second Article" is about apples and oranges etc. And for article #1, I can pull out a list of the relevent keywords by using the following SQL statement:<br /><span style="font-weight: bold;"></span><blockquote><span style="font-weight: bold;">SELECT</span> keywordsinarticle.articleID, keywordsinarticle.keywdID, keywords.keyWord<br /><span style="font-weight: bold;">FROM</span> keywords, keywordsinarticle<br /><span style="font-weight: bold;">WHERE</span> ((keywordsinarticle.keywdID=keywords.keywdID) <span style="font-weight: bold;">AND</span> (keywordsinarticle.articleID=1))</blockquote>This would give the following result:<br /><strong><em></em></strong><blockquote><strong><em>articleID keywdID keyWord</em><br /> </strong>1 1 apples<br />1 3 bananas<br /></blockquote>So far, straighthforward. However, in the Content Management side of the application, there needs to be a way of managing the keywords associated with each article, to update the <span style="font-weight: bold;">KeywordsInArticle</span> table. However, this has a compound key value made up from the <span style="font-style: italic;">articleID</span> and the <span style="font-style: italic;">keywdID</span>. It cannot contain duplicate rows, so when adding a keyword entry to the list, I want to be able to select all keywords <span style="font-weight: bold;">not already associated with that article</span>. In the example, I need to select only "oranges" and "grapes" from the <span style="font-weight: bold;">keywords</span> table, to give them as options to add.<br /><br />I want to be able to invert my selection, so I tried a using the above as a subquery and negating the result:<br /><blockquote><span style="font-weight: bold;">SELECT</span> *<br /><span style="font-weight: bold;">FROM</span> keywords<br /><span style="font-weight: bold;">WHERE</span> keywdID <span style="font-weight: bold;">NOT IN</span> (<span style="font-weight: bold;">SELECT</span> keywordsinarticle.articleID, keywordsinarticle.keywdID, keywords.keyWord<br /><span style="font-weight: bold;">FROM</span> keywords, keywordsinarticle<br /><span style="font-weight: bold;">WHERE</span> ((keywordsinarticle.keywdID=keywords.keywdID) <span style="font-weight: bold;">AND</span> (keywordsinarticle.articleID=1)))</blockquote>Sadly, mySQL throws a wobbler at this, telling me:<br /><blockquote>Message = "Operand should contain 1 column(s)"</blockquote>Looking up <a href="http://dev.mysql.com/doc/refman/5.0/en/subquery-errors.html">this error at the mySQL website</a> directed me towards the <a href="http://dev.mysql.com/doc/refman/5.0/en/row-subqueries.html">Row Subqueries</a> page, but I'm not convinced this fits my problem either. So now I'm rather stuck. If anyone has any ideas, I'd love to hear them!Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com3tag:blogger.com,1999:blog-30379699.post-58004706483605935502007-08-29T12:46:00.000+00:002008-12-09T16:13:01.137+00:00A Stitch In TimeI've got a probem with date sorting.<br /><br />I have a PHP/mySQL application which requires sorting a dataset by year.<br /><br />As mySQL won't let you store <span style="font-weight: bold;">just</span> the year, I originally used a varchar (text) field to store the year, YYYY, which sorts nicely.<br /><br />However, I now have a client who wants to be more specific with some dates only, ie they want to be able to store YYYY, YYYY/MM or YYYY/MM/DD in the same field and still have it sort nicely.<br /><br />OK, so I can force them to input the full date (when required) in the YYYY/MM/DD format, but that looks really ugly when output to the web page as a human-readable date.<br /><br />So my problem is this:<br /><ul><li>If I want human-readable dates, like 1 January 2007, and go for a text field, they won't sort properly as 1 April 2007 comes before 1 January 2007 in that case.</li><li>If I opt for the date field, it would sort properly but I can't store dates which are just month/year or year only, as mySQL throws a wobbler and protests when you don't have the full date input.</li></ul>Storing the "date" as a string: 2007/08/01 (the pubDate) sorts nicely, and I had hoped using the following PHP:<br /><blockquote><?php echo date('j F Y', strtotime($row_rsByDate['pubDate'])); ?><br /></blockquote>would solve the problem, since it gives a nice date 1 August 2007. But there are still issues with just storing part of the date - see screenshot below:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJspN1PNyjYs0enT7XVbvMIl1Bbnf-4YuGg_nDPxXTL2OFljxaQ6otHXFsOsG0dn0ERH7esfGCWa9MdYRHkRyfbIPionbXmjXAfoUKmeAFy3qHQzMJmQc0_PovCkU-tYa5_oR4/s1600-h/20070829.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJspN1PNyjYs0enT7XVbvMIl1Bbnf-4YuGg_nDPxXTL2OFljxaQ6otHXFsOsG0dn0ERH7esfGCWa9MdYRHkRyfbIPionbXmjXAfoUKmeAFy3qHQzMJmQc0_PovCkU-tYa5_oR4/s400/20070829.gif" alt="" id="BLOGGER_PHOTO_ID_5104113133000359266" border="0" /></a>The entries are sorted correctly (most specific at the top, descending order). The first date (red) is the nice output of the PHP function - the second (puce green) is the actual stored text.<br /><br />It falls over horribly when only the YYYY/MM is stored (returning 1st January 1970) or YYYY (returning today's date).<br /><br /><span style="font-weight: bold;">EUREKA!</span><br /><br />After much discussion (via the comments on this post and my buddies on <a href="http://twitter.com/">Twitter</a>) , I was almost ready to <span style="font-style: italic;">explode</span> with frustration at not being able to find a solution. Turns out, that's exactly what I needed to do!<br /><br /><a href="http://www.tartarus.org/%7Ejames/" rel="friend met">James Aylett</a> suggested I use the PHP <span style="font-weight: bold;">explode()</span> and <span style="font-weight: bold;">implode()</span> functions to write a custom parser. I didn't actually need the implode() half as it happens. Being a relative newbie to PHP, I'd never heard of the explode function, so thanks for the pointer, James!<br /><br />So, to recap. The database column should be stored as TEXT or VARCHAR(10) <span style="font-weight: bold;">not</span> DATETIME. That way, all variations of YYYY, YYYY/MM or YYYY/MM/DD are acceptable, and will sort correctly. This will look horrible if put straight into the page, so use something like the following to present it nicely to the web page:<br /><blockquote><p><?php $split = explode("/",$row_rsByDate['pubDate'],3);<br />print_r($split[2]);<br />echo " ";<br />if ($split[1]==1) print_r("Jan");<br />elseif ($split[1]==2) print_r("Feb");<br />elseif ($split[1]==3) print_r("Mar");<br />elseif ($split[1]==4) print_r("Apr");<br />elseif ($split[1]==5) print_r("May");<br />elseif ($split[1]==6) print_r("Jun");<br />elseif ($split[1]==7) print_r("Jul");<br />elseif ($split[1]==8) print_r("Aug");<br />elseif ($split[1]==9) print_r("Sep");<br />elseif ($split[1]==10) print_r("Oct");<br />elseif ($split[1]==11) print_r("Nov");<br />elseif ($split[1]==12) print_r("Dec");<br />echo " ";<br />print_r($split[0]);<br />?></p></blockquote><span style="font-weight: bold;">explode()</span> - separates the string found in <span style="font-style: italic;">pubDate</span> into its component parts (the separator is set by the first parameter, "/"), giving the $split array. This containts up to 3 elements, depending on how specific the stored "date" is.<br /><span style="font-weight: bold;">$split[2]</span> is the DD day element and is printed directly.<br /><span style="font-weight: bold;">$split[0]</span> is the YYYY year element and can be printed directly.<br /><span style="font-weight: bold;">$split[1] </span>is the MM month element, which requires the pretty formatting. So a match against each month number prints out a more human-readable month. <span style="font-style: italic;">Voilà!</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBLPsGN0g2CHZGwU-0_fvM-x7BrQvPVwM8WQS2Xn6EMG3pwGj7Me4RATk8OUye3Pp640TTiWZnBs3NUq35BKjeEGjdqLJ81Ep9ZRve4iyZcoGug81kkZJTf11__D_jUUTk0QY/s1600-h/20070829b.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBLPsGN0g2CHZGwU-0_fvM-x7BrQvPVwM8WQS2Xn6EMG3pwGj7Me4RATk8OUye3Pp640TTiWZnBs3NUq35BKjeEGjdqLJ81Ep9ZRve4iyZcoGug81kkZJTf11__D_jUUTk0QY/s400/20070829b.gif" alt="" id="BLOGGER_PHOTO_ID_5104157993933766002" border="0" /></a>Another screenshot - this time the green output is the unprocessed pubDate text field, and the preceding red date is the bespoke-parsed version - allowing for all cases of "date" format.<br /><br /><span style="font-weight: bold;">Some caveats:</span><br />I wouldn't normally recommend spoofing the date like this - if it's a real date (specified to day, month, year for every record) then use the DATETIME type in your database - this will sort and you can perform arithmetic on it quite readily (eg next month, last week etc).<br /><br />I only went through this pain because of the special case I was finding - the publication "dates" of newspaper articles (day, month, year), journals (month, year) and books (year only) which my data required. Using this solution lets it all sort properly <span style="font-weight: bold;">and</span> look nice to viewers. Win!Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com7tag:blogger.com,1999:blog-30379699.post-63828281589357680472007-06-07T16:24:00.000+00:002008-12-09T16:13:01.557+00:00@media - Five Steps To Better TypographyNext up was <a href="http://markboulton.co.uk/">Mark Boulton</a>, who wanted us to work with typography in a better way.<br /><ul><li><span style="font-weight: bold;">Be Appropriate & Adaptable</span><br />Typefaces tell stories, and the web is still playing catchup with this power. Comic Sans is appropriate for the menu at a greasy spoon cafe; you wouldn't want an invitation to a Black Tie event done in it though. Similarly, the BBC's use of Gill Sans evokes order and <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7cUozgqJaXvLURxqfeoiNxK_5FBhT8HGiPXwZOFjOWAjr1Lse-_V1EfpS4_OcWVFxq-U6GSFiYL0LfVD0zLVOn6SXZWTjeu08OmL47sHsMNsHH210-MB3uNCckr5qi3IRe0DB/s1600-h/20070607e_bbclogo.gif"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7cUozgqJaXvLURxqfeoiNxK_5FBhT8HGiPXwZOFjOWAjr1Lse-_V1EfpS4_OcWVFxq-U6GSFiYL0LfVD0zLVOn6SXZWTjeu08OmL47sHsMNsHH210-MB3uNCckr5qi3IRe0DB/s400/20070607e_bbclogo.gif" alt="" id="BLOGGER_PHOTO_ID_5080889645160179634" border="0" /></a>authority. The BBC logo has a twist - by reversing the type and blocking out the shapes of Gill Sans.<br />Don't let type and design get in the way of words.<br />Be adaptable to requirements, and appropriate for the story.<br /><br /></li><li><span style="font-weight: bold;">Use Rhythm</span><br /><a href="http://clagnut.com/">Richard Rutter</a>'s <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">Compose To A Vertical Rhythm</a> explains about using the line height and leading of your blocks of text to best advantage. The basic theory goes: 12px font height with 18px between lines, give a line height of 1.5. You can use incremental leading to make 4 lines of text in the main body of a page line up with 5 lines of text in a sidebar.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq86uVcQ87Fi2ubhEa3CgD5CCA8BPQb2nWPToW5PQZaZPq5WoKySOUrOwCQtoX8fobdbj5pjokhOko2j9brneQE8kEeEB1emms3Fgwe1mJBd5gvDRMW8WXW6mSOTnWmrNP5aSO/s1600-h/20070607e_D256-093.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq86uVcQ87Fi2ubhEa3CgD5CCA8BPQb2nWPToW5PQZaZPq5WoKySOUrOwCQtoX8fobdbj5pjokhOko2j9brneQE8kEeEB1emms3Fgwe1mJBd5gvDRMW8WXW6mSOTnWmrNP5aSO/s320/20070607e_D256-093.gif" alt="" id="BLOGGER_PHOTO_ID_5080890160556255170" border="0" /></a>[Text in the sidebar bears no relation to the main body copy. It looks messy.]<br />The maths gets a bit hairy: 18px x 4 lines = 72px for the main body. 72px ÷ 5 lines = 14.4px for the sidebar<br />If you're using 10px height for your sidebar text, 14.4 ÷ 10px = 1.44 line height. You may find the sidebar top-margin property needs a bit of tweaking to get it to line up properly.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxiwdVbOer-okjoARBSxjglfaMG42gioja2FTuw410wwxlXu_PL1wFTOS1kZtAq2UQInFStPsCPEc87Fu3By5nKmAqFunpQdzjq3ZHFP7Kg0YzW0vPR-8XVX0kOVEK0qymzDi2/s1600-h/20070607e_D256-095.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxiwdVbOer-okjoARBSxjglfaMG42gioja2FTuw410wwxlXu_PL1wFTOS1kZtAq2UQInFStPsCPEc87Fu3By5nKmAqFunpQdzjq3ZHFP7Kg0YzW0vPR-8XVX0kOVEK0qymzDi2/s320/20070607e_D256-095.gif" alt="" id="BLOGGER_PHOTO_ID_5080890164851222482" border="0" /></a>[This looks much better now everything is aligned vertically]<br /><br /></li><li><span style="font-weight: bold;">Optical Grey</span><br />If you squint at a block of text, you'll see the page has different tonal ranges depending on font, leading, letter spacing etc.<br />Verdana has a more open shape, so is paler at smaller sizes.<br />Combining serif and sans-serif fonts can be effective, giving different "colours". Minimize dark grey and balance the line height.<br /><br /></li><li><span style="font-weight: bold;">Use The Right Tools For The Job</span><br />Hyphens "-" are NOT em dashes!! "—". Use an em — or en – where appropriate.<br /><br /></li><li><span style="font-weight: bold;">Use a Grid System</span><br />Use grids as a tool to help you organise information. How to decide how big the grid unit should be? You can subdivide the units too - you might have a 3em high by 4.5em wide block, which divides nicely into 2x3 squares each of 1.5em width and height.<br />Choose gutter sizes carefully, it can depend on the relationship between whitespace and font size.<br />Using Alternate Row colours in tables must be done with care - don't use colours which are too strong.<br />Set type to your grid, and align everything! The smallest error can really stick out.</li></ul><span style="font-weight: bold;">In Summary</span><br />Typography is all about the details. Tiny increments can make a huge difference. The <a href="http://www.markboulton.co.uk/present/atmedia2007">full slides</a> are available at Mark's website.Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-89066630008223083082007-06-07T15:30:00.000+00:002008-12-09T16:13:02.074+00:00@media - Design Interface Juggling<a href="http://simplebits.com/">Dan Cederholm</a> took us through the various elements of interface design that a good juggler should be able to "keep in the air".<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi6ZzL8u80jGS5BubkRuHN2jqpzMUWl4aiDIPuYNltS6VMIED9AZYET8twOr43R5nKb5ggpVyb73lqAXxOmIQ5hcdkICckKPpnEIx0vSa0gFLeCrAo2lLmaGqYKe7JLL4jYcdX/s1600-h/20070607d_D256-070.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi6ZzL8u80jGS5BubkRuHN2jqpzMUWl4aiDIPuYNltS6VMIED9AZYET8twOr43R5nKb5ggpVyb73lqAXxOmIQ5hcdkICckKPpnEIx0vSa0gFLeCrAo2lLmaGqYKe7JLL4jYcdX/s320/20070607d_D256-070.jpg" alt="" id="BLOGGER_PHOTO_ID_5078903212096866866" border="0" /></a>[Dan and his interface-juggling octopus]<br /><br /><span style="font-weight: bold;">Colour</span><br />Colour evokes an emotional response in the viewer, and we need to be careful when choosing a palette. At <a href="http://wellstyled.com/">Wellstyled.com</a>, there's <a href="http://wellstyled.com/tools/colorscheme2/index-">a handy widget</a> for generating complimentary colour schemes. Try it out.<br /><br />Dan had mocked up a site especially to demonstrate some of his points - go have a giggle over at <a href="http://toupeepal.com/">ToupéePal</a>!<br /><br />One good way of choosing a palette is by taking shades from a photo - either sample direstly, or pixellate it and use some of the blocks. Dan often starts with colour as the inspiration for a site and works from there. He will re-use certain strategic colours throughout a site, eg Links, headings etc. The colour used for links will always carry weight in the design.<br /><br /><span style="font-weight: bold;">Typography</span><br />Great typography is actually invisible - we don't notice it. But do it badly and it sticks out like a sore thumb. He recommended the article, <a href="http://www.informationarchitects.jp/the-web-is-all-about-typography-period">Web Design is 95% Typography</a> to read.<br /><br />There are a limited number of fonts we can realistically guarantee a user having on their system, but within these constraints, we can still get creative. Try using the <span style="font-weight: bold;">text-transform</span> <span style="font-style: italic;">uppercase</span> or <span style="font-style: italic;">lowercase</span> styles, change the letterspacing, text-align, leading etc to vary the <a href="http://blogs.msdn.com/fontblog/archive/2005/11/03/488794.aspx#488867">typographical colour</a> of a block of text. Good reading: <a href="http://www.amazon.co.uk/Elements-Typographic-Style-Robert-Bringhurst/dp/0881792063/">"The Elements of Typographical Style"</a> by Robert Bringhurst, if you can find it. Read more on applying it to the web <a href="http://www.webtypography.net/">here</a>.<br /><br /><span style="font-weight: bold;">Favicons</span><br />Could be regarded as the most important design element on your site! They are the thing that represents it in the shortcut icon, browser address bar etc.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisQnhRXadm64rmdXWpnMp5jrl1jY_zEzPxJJWsA88rngPg_rLa6TxDEGK45wIAf8rEhosN3tIFypmG38NPpKvG9sp-sK9Y3ulU9zn9w230-VNsjslTkQVza4fkY_CCcKDgZLmi/s1600-h/20070607d_subtraction_footer.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisQnhRXadm64rmdXWpnMp5jrl1jY_zEzPxJJWsA88rngPg_rLa6TxDEGK45wIAf8rEhosN3tIFypmG38NPpKvG9sp-sK9Y3ulU9zn9w230-VNsjslTkQVza4fkY_CCcKDgZLmi/s320/20070607d_subtraction_footer.gif" alt="" id="BLOGGER_PHOTO_ID_5078903216391834194" border="0" /></a>[<a href="http://www.subtraction.com/">Subtraction.com</a> uses each site's favicon as shorthand branding for the link]<br /><br />So when creating a favicon, it has to be something memorable. They must:<br /><ul><li>Scale well down to 16x16 pixels</li><li>If the whole logo doesn't work, choose a fragment to focus on</li><li>Use something unique about the site that still ties in with the branding</li></ul>Icon files can be made with <a href="http://www.mscape.com/products/iconographer.html">Iconographer</a> or a <a href="http://www.telegraphics.com.au/sw/">plugin for Photoshop</a>. As well as the standard 16x16 icon, 32x32 and 64x64 pixel icons can be inserted into the same .ico file. There's an interesting collection of Favicons at <a href="http://www.deltatangobravo.com/archives/2004/march/favourite">Delta Tango Bravo</a>'s blog.<br /><br /><span style="font-weight: bold;">Add Detail But Not Complexity</span><br />Understand the limitations of the browser, and suggest the box [model] but with minimal suggestions. Perhaps use just one rounded corner on an element. Re-use graphic elements where you can.<br /><br /><span style="font-weight: bold;">Microformats</span><br />If you site contains any sort of contact information, events lists, reviews or relationships, then you should be marking them up with <a href="http://microformats.org/">Microformats</a>. Using what works today can encourage others to do the same:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_km8HF-iDB_eoFDX-HQxPKJDtwgKxP3DEmxlBoJExbWn7JF4aC5Y8etKKSiiAj7D9_mSJdbsO3UZw-if6LQ1TubGSJ_oqD7q6MWuEdmJWuCYFUKOF80yf8QK-_sdtrjeYpZCv/s1600-h/20070607d_D256-086.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_km8HF-iDB_eoFDX-HQxPKJDtwgKxP3DEmxlBoJExbWn7JF4aC5Y8etKKSiiAj7D9_mSJdbsO3UZw-if6LQ1TubGSJ_oqD7q6MWuEdmJWuCYFUKOF80yf8QK-_sdtrjeYpZCv/s320/20070607d_D256-086.jpg" alt="" id="BLOGGER_PHOTO_ID_5078903216391834178" border="0" /></a>[The Microformats can be used by people, applications and as hooks for CSS]<br /><br /><a href="http://suda.co.uk/">Brian Suda</a> did some parsing of <a href="http://www.corkd.com/">Cork'd</a> for Microformats, and used this information to add wine reviews (from Cork'd) to his <a href="http://www.scrugy.com/">Scrugy</a> site, where you can learn all about wine. Corkd's Microformats had produced an accidental API. If you were to mash this up with a list of your XFN friends, you could use it as a filter for just returning reviews from your trusted sources.Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-13349689775702923632007-06-07T13:20:00.000+00:002008-12-09T16:13:02.540+00:00@media - High-Noon Shoot Out: Design vs ImplementationThis was a bit of light-hearted fun, with two heavyweights standing in opposing corners and trying to convince us their point of view was right.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_dj1hkzi_Ydl8UtpZIp6PAHB9Uz396oLwj2RbTiQgy9bRzRBBRYppAb3xt7Vr2KcP1RIA71hG-kgWI5zDvnwt45DSOrzkpeaQObCNv5eqbgnib5_P5gCLf55Nwl_TaTdw3Vcs/s1600-h/20070607c_shootout.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_dj1hkzi_Ydl8UtpZIp6PAHB9Uz396oLwj2RbTiQgy9bRzRBBRYppAb3xt7Vr2KcP1RIA71hG-kgWI5zDvnwt45DSOrzkpeaQObCNv5eqbgnib5_P5gCLf55Nwl_TaTdw3Vcs/s320/20070607c_shootout.jpg" alt="" id="BLOGGER_PHOTO_ID_5077919724715624962" border="0" /></a>[the protagonists on the podium]<br /><br /><span style="font-weight: bold;">In The Design Corner</span> - <a href="http://www.colly.com/">Mr Simon Collison</a><br />The Design Manifesto went thus:<br /><ul><li>Visual design is not complex engineering</li><li>Design interfaces visually, don't be afraid to take risks</li><li>Reserve the right to veto decisions of technologists</li><li>Think, build & design organically</li><li>Don't pander to personal prefereneces</li><li>Deliver a rich, considered visual experience for all</li><li>Be expressive with web typography</li><li>Layout decisions are the preserve of the designer</li><li>Visual design makes the first impression - respect it!</li><li>Build everything in Flash (not really)</li></ul><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzKJa0EF5aBOazivBPGVz28KjpVRaEaYlIXNH964ria6BvDqqVn2S1055Etl6RFDK5QqMOIXeL-KeIcF_fAjKDtIrtb1Fn6TABrHoMjXbIGhwMtYXKGz5m40n_ZjkGRfQAqSoS/s1600-h/20070607c_evildrew.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzKJa0EF5aBOazivBPGVz28KjpVRaEaYlIXNH964ria6BvDqqVn2S1055Etl6RFDK5QqMOIXeL-KeIcF_fAjKDtIrtb1Fn6TABrHoMjXbIGhwMtYXKGz5m40n_ZjkGRfQAqSoS/s320/20070607c_evildrew.jpg" alt="" id="BLOGGER_PHOTO_ID_5077919724715624978" border="0" /></a>[Evil Drew - New Implementation, New Danger!]<br /><br /><span style="font-weight: bold;">In The Implementation Corner</span> - <a href="http://allinthehead.com/">Mr Drew McLellan</a><br />It all started with <span style="font-weight: bold;">nxoc01.cern.ch</span>, the very first web server. Drew said we were all implementers, and as such, we needed to know our enemies:<br /><ul><li>Fixed width layouts</li><li>Flash for non-media presentation</li><li>(Flash breaks the basic nature of the web when used for anything other than a player for graphics or audio, and each Flash player instance impacts on performance of the browser)</li><li>Text replacement, since text on a web page is a solved problem</li><li>Styled form elements</li><li>Potent GETs</li><li>Controlled heights</li><li>Controlled text size</li><li>Colour schemes and low contrast</li><li>The user agent</li><li>The FOLD - THERE IS NO FOLD since we never know where it's going to be from one browser/user to the next!!</li></ul><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfyJeFSY_zb8dn7uYVc3KXEr83woQq7w2fhUgTVUcxwAvHWkJKx8w66Ia3yx-iDsmvVfLN0yZ-Mqdwz2r0I1emEMLjvZN9WK6U5OGEzFxPMJacX0sEQdD_wnonEX38HykWah9G/s1600-h/20070607c_nofold.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfyJeFSY_zb8dn7uYVc3KXEr83woQq7w2fhUgTVUcxwAvHWkJKx8w66Ia3yx-iDsmvVfLN0yZ-Mqdwz2r0I1emEMLjvZN9WK6U5OGEzFxPMJacX0sEQdD_wnonEX38HykWah9G/s320/20070607c_nofold.jpg" alt="" id="BLOGGER_PHOTO_ID_5077919724715624994" border="0" /></a>[Drew gets all fervant and placard-wavey saying There Is No Fold]<br /><br /><span style="font-weight: bold;">Conclusion</span><br />Of course, we all know that life's not so black and white, and at different times, we may have to sit in different camps. So it was a nice way of stimulating some light-hearted debate, but there's definitely no "right" answer on this one!Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com2tag:blogger.com,1999:blog-30379699.post-41094319412355388202007-06-07T12:30:00.000+00:002008-12-09T16:13:05.948+00:00@media - Diabolical Design: The Devil Is In The DetailsThe conference split into two tracks, and I chose to listen to <a href="http://www.jasonsantamaria.com/">Jason Santa Maria</a> of <a href="http://happycog.com/">Happy Cog Studios</a> talking about Design. Design is intent, and that must be reflected in the finer details.<br /><br /><span style="font-weight: bold;">Colour</span><br />Colour means different things to different people and evokes emotional responses. Use colour for emphasis and to help deliver the message. <a href="http://www.faithink.com/">Faith Inkubators</a> uses purple sparingly for emphasis and it works nicely. <a href="http://www.afilm.com/">A Film</a> uses pink and a particular headline motif to great effect.<br /><br />Sometimes unexpected colours can be equally effective, <a href="http://www.timesonline.co.uk/tol/news/">The Times'</a> acid green isn't obvious for a serious newspaper, but it works. Some other sites may take a colour from a photo or logo and use this to add emphasis.<br /><br /><span style="font-weight: bold;">Hierarchy</span><br />Visual hierarchy should reflect the underlying semantics of headingd hierarchy. It will give users a sense of what's important and what's not in the page. Use a focal point to grab attention and drive home the message. Providing variety can also lead the viewer through a page.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy_n0p6kYsP3tp-6K-_kV79681WGmnMTWpLQCfPekbBpfkwRUeW_jBKiUD0x4VpEuufc1iSuBW2Uy7cPbZgY068Ap_VieApvjdLuhdEkAV-tPJsHimsgps33EFK6cX4TJPaa6f/s1600-h/20070607b_D256-032.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy_n0p6kYsP3tp-6K-_kV79681WGmnMTWpLQCfPekbBpfkwRUeW_jBKiUD0x4VpEuufc1iSuBW2Uy7cPbZgY068Ap_VieApvjdLuhdEkAV-tPJsHimsgps33EFK6cX4TJPaa6f/s320/20070607b_D256-032.jpg" alt="" id="BLOGGER_PHOTO_ID_5077911675946912162" border="0" /></a>[The visual hierarchy should reflect the underlying document's semantics]<br /><br /><span style="font-weight: bold;">Whitespace</span><br />Whitespace is often something designers are afraid of - but used effectively, the "nothing" can be just as important as the "something" it surrounds. Also, optimum line length is 66 characters (anything between 45-75 is OK) for easy reading. The longer the line length, the more leading is required for better legibility.<br /><br /><span style="font-weight: bold;">Organisation - Grids</span><br />Grids can be liberating rather than restrictive. But giving users a solid framework can mean they will find it easier to get around your site - less time investment is required to "learn" the grid. He showed us maps of Philadelphia and London and asked us which we would be happier in negotiating as a tourist:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcC14Gjqyz97tkVykgYkF4vDaeqKuzlSzBaYgeQzSS1lmJiQAR1H02GF9dcN377F5Bl6vLDSk1UDxqeWMjxZYq-xcP61QRj3JM26n-O8wsv1NryBePbeGR2nbdMVZOqusueNXO/s1600-h/20070607b_D256-036.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcC14Gjqyz97tkVykgYkF4vDaeqKuzlSzBaYgeQzSS1lmJiQAR1H02GF9dcN377F5Bl6vLDSk1UDxqeWMjxZYq-xcP61QRj3JM26n-O8wsv1NryBePbeGR2nbdMVZOqusueNXO/s320/20070607b_D256-036.jpg" alt="" id="BLOGGER_PHOTO_ID_5077911680241879474" border="0" /></a>[Philadelphia's regular street plan contrasts with London's maze of tiny streets]<br /><br />Even when using a grid, there are many ways of breaking the rigid order and still getting interesting designs. These three screenshots are from Australian agency <a href="http://www.trout.com.au/">Trout</a>:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYG-D3rS2lUisJpURZ2KR7Ecoym36Tpg_NTMp3keSjlFZ_qHNanbpT8ZvZbu6fdz2Ne7VKuNkgY_Qz5U7olBqFBSdiSRkoEDtfzNyfEYRq2hjiYihASWKgn2V-aWJHH0XMZOM5/s1600-h/20070607b_trout1.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYG-D3rS2lUisJpURZ2KR7Ecoym36Tpg_NTMp3keSjlFZ_qHNanbpT8ZvZbu6fdz2Ne7VKuNkgY_Qz5U7olBqFBSdiSRkoEDtfzNyfEYRq2hjiYihASWKgn2V-aWJHH0XMZOM5/s320/20070607b_trout1.gif" alt="" id="BLOGGER_PHOTO_ID_5077911680241879506" border="0" /></a>[Trout's home page, a regular grid, but even this is broken up with the bright colour emphasis]<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwrEzyhpjUC8g6FzJCyax4naQmNoSu1ioe1gRR8UKBKLjcCuQzl93PiXirCJJBxQdTbyiaUY4n3OrbWY9SNE1OzuyTDeUfgT92BzXJyM2SQpP8ig7GZVM2aZ3Zfc-DcKmSbSdq/s1600-h/20070607b_trout2.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwrEzyhpjUC8g6FzJCyax4naQmNoSu1ioe1gRR8UKBKLjcCuQzl93PiXirCJJBxQdTbyiaUY4n3OrbWY9SNE1OzuyTDeUfgT92BzXJyM2SQpP8ig7GZVM2aZ3Zfc-DcKmSbSdq/s320/20070607b_trout2.gif" alt="" id="BLOGGER_PHOTO_ID_5077911684536846818" border="0" /></a>[Detail page when you click through from the home page. More of the grid is broken up into bigger chunks]<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitgDUK_8thTIGWEUtja7zgCIH8jFRJANdMfe_RBtEACeOj9w_ld2n3uhPjMHfFv4QHjOUiK1aObcjPxYOpqQOg3mzkHGBQjvb9SJhwrONb1_cDb3a5UEkz0hxDaVs6ScRicCQy/s1600-h/20070607b_trout3.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitgDUK_8thTIGWEUtja7zgCIH8jFRJANdMfe_RBtEACeOj9w_ld2n3uhPjMHfFv4QHjOUiK1aObcjPxYOpqQOg3mzkHGBQjvb9SJhwrONb1_cDb3a5UEkz0hxDaVs6ScRicCQy/s320/20070607b_trout3.gif" alt="" id="BLOGGER_PHOTO_ID_5077911800500963826" border="0" /></a>[The About Trout page, dominated by the main text panel]<br /><br />Having said all that, make sure that alignment happens and doesn't fall down - subliminal effects can be powerful and if something doesn't quite line up, it will still look "wrong" without the user being able to put their finger on why.<br /><br /><span style="font-weight: bold;">Planning</span><br />It's easy to jump into the finished product right from the start. Step back and plan! Keep a sketchbook to jot down ideas - they may all come together at a much later date, but you have them to hand.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRAkh0sgwzSDAK6MnJIPVtlnH_FlEGNud2AXM7UZ_N90JxLVHsmLL_XkrOQ5JEKDD7kG-j-mk7wOiE-96ZbhWcuiPwGV9IWqQ4PqVQOp2YuJRfmQVy2vF55cZxXASnKk08Rfro/s1600-h/20070607b_D256-043.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRAkh0sgwzSDAK6MnJIPVtlnH_FlEGNud2AXM7UZ_N90JxLVHsmLL_XkrOQ5JEKDD7kG-j-mk7wOiE-96ZbhWcuiPwGV9IWqQ4PqVQOp2YuJRfmQVy2vF55cZxXASnKk08Rfro/s320/20070607b_D256-043.jpg" alt="" id="BLOGGER_PHOTO_ID_5077911680241879490" border="0" /></a>[Jason's sketch book showing early doodles for the <a href="http://www.alistapart.com/">A List Apart</a> design]<br /><br />Design should be an iterative process. Grey box comping can help you decide the best weight for various layouts. Jason doesn't show these grey box comps to clients, but just uses them for his own purposes. He would then expect a PSD comp to show to clients, and perhaps 1-2 iterations round the loop before they are happy. The whole process can take a couple of months.<br /><br /><span style="font-weight: bold;">Strive For Clarity</span><br />Storytelling gives people hooks and things to remember, they will come back!<br /><br /><span style="font-weight: bold;">Fonts</span><br />Use fonts in such a way to give some extra interest to the page. sIFR can be a useful method of delivering certain fonts if they are mandatory branding requirements.<br /><br /><span style="font-weight: bold;">Handover</span><br />The all-important step that is often overlooked. A style guide is best kept short, under 10 pages, and provide a dummy template for each type of page, so that other people can look after the site going forward.<br /><br /><span style="font-weight: bold;">Customer Interference!</span><br />We all know what he means. But if you find your client is trying to steamroller you, set up a meeting and let them know you are the expert. Try to convince them of you design, as long as it conveys their message and isn't just kudos for your portfolio.Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-44922127507239871432007-06-07T11:00:00.000+00:002008-12-09T16:13:06.644+00:00@media - Beyond Ajax@media has rolled around super-quick this year. It kicked off with <a href="http://jjg.net/">Jesse James Garrett</a> of <a href="http://www.adaptivepath.com/">Adaptive Path</a> talking about the future of web beyond Ajax.<br /><br />He started by asking us "what is the web good for (at)? It's still quite a young medium - as TV and Radio started out emulating theatre, before finding their own feet, a new medium needs about 10 years for us to find out what it's good for - so we should be getting some good clues very soon!<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdQEZh6CSdZTX7c0G9VPWkHGegBZSF0bNEUTAq_FaLR7z0MEafoYeoUKHydQ-OB2ELQ__9H53uKXtvbGqjlsbWYfUQ4qhY5P0Kyq7CAxQ3Hqoq1Bjl-ppdzE0_D_nBEL1NIPSg/s1600-h/20070607a_D256-016.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdQEZh6CSdZTX7c0G9VPWkHGegBZSF0bNEUTAq_FaLR7z0MEafoYeoUKHydQ-OB2ELQ__9H53uKXtvbGqjlsbWYfUQ4qhY5P0Kyq7CAxQ3Hqoq1Bjl-ppdzE0_D_nBEL1NIPSg/s320/20070607a_D256-016.jpg" alt="" id="BLOGGER_PHOTO_ID_5077879571066374498" border="0" /></a>[Be careful not to get confused by the many faces of Ajax!]<br /><br />Web apps such as Flickr are part of a much larger ecosystem, but benefit it by having an open API that other applications can hook into. The web is now moving away from static pages of documents towards applications and interaction. The <a href="http://www.kayak.co.uk/">kayak.co.uk</a> interface (airline ticket price comparison) was cited as one where Ajax enables users to dynamically filter the search results almost instantaneously. And these products get better with use.<br /><br />Value can come from the users themselves - YouTube's a good example. The <a href="http://www.youtube.com/watch?v=pv5zWaTEVkI">OK GO Treadmill video</a> was home made, posted on <a href="http://www.youtube.com/">YouTube</a>, has been watched more than 18.5million times, eventually got onto MTV and won a Grammy! Then Google buys YouTube for $1bn - it obviously recognises the value in the userbase.<br /><br />Websites are now delivering a rich user experience via Ajax and other native browser technologies - ideal as no plugins are required. <a href="http://blog.wired.com/sterling/">Bruce Sterling</a> coined the phrase that Ajax is "roller skates for the web". It's like the way that <span style="font-weight: bold;">gmail</span> and <span style="font-weight: bold;">google maps</span> have revolutionised the way we think about interfaces, and now we want everything to be drag and drop.<br /><br />What's the highest form of praise? Not "makes loads of money" or "never crashes" but "I can't live without it!". Making systems work is all about the balance between technology, features and the user experience. The Diamond Rio was the first ever mp3 player, but it pretty much bombed. Three years later, along comes the iPod - costs more, does less, but it's all about the way users buy into the experience.<br /><br />Dealing with interactive products stimulates the same part of the brain as when we are dealing with other people. "People are products too". So, products who "know who they are" also seem to pique our attention and become successful. It's why we like things like the <a href="http://www.speckproducts.com/iguy.html">iGuy</a> and <a href="http://www.tivo.com/">TiVo</a> logo:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpdkRdC-vTenBM1Zdnc4Q9Disap5A7YR2Z4ECXoTjOoQhupvtRnTk0VPG9cJ8Wgdqklq9K_e5fBG3hW7jnaKZrz3MF0m5WFSezMXZoH18Kyk31W4HILKP0aZ_NzeVkv-bfWtYt/s1600-h/20070607a_D256-021.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpdkRdC-vTenBM1Zdnc4Q9Disap5A7YR2Z4ECXoTjOoQhupvtRnTk0VPG9cJ8Wgdqklq9K_e5fBG3hW7jnaKZrz3MF0m5WFSezMXZoH18Kyk31W4HILKP0aZ_NzeVkv-bfWtYt/s320/20070607a_D256-021.jpg" alt="" id="BLOGGER_PHOTO_ID_5077879575361341810" border="0" /></a>[Anthropomorphic Personification aka "oh look, isn't that cuuuuuute!!!"]<br /><span style="text-decoration: underline;"><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGWDeoriJ_kNS6CdVdzkvVFiISSD_cQrMNLXMa_1PlwGSxGsIy-UUerWfx-9tj_vYEKIs2sCXYkmFeyvPQYKEnsCJS1dOI_ZloXwLbMkbmzO481LJOqvSNKW8OqcDXNz-uES3T/s1600-h/20070607a_devs.gif"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGWDeoriJ_kNS6CdVdzkvVFiISSD_cQrMNLXMa_1PlwGSxGsIy-UUerWfx-9tj_vYEKIs2sCXYkmFeyvPQYKEnsCJS1dOI_ZloXwLbMkbmzO481LJOqvSNKW8OqcDXNz-uES3T/s400/20070607a_devs.gif" alt="" id="BLOGGER_PHOTO_ID_5077879674145589634" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVFvYT0VoYaa5_AGbsVyubM175GhJ7MdqF6pHyrgWXe7za76vR2HJls8HvsonroqNmizvqAwS2Ihbd0vTI1v-1BJ_JnTWkW4w-YyePjzSJGW0k6M-awOYXs93Qxp-KkhqNRzQG/s1600-h/20070607a_users.gif"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVFvYT0VoYaa5_AGbsVyubM175GhJ7MdqF6pHyrgWXe7za76vR2HJls8HvsonroqNmizvqAwS2Ihbd0vTI1v-1BJ_JnTWkW4w-YyePjzSJGW0k6M-awOYXs93Qxp-KkhqNRzQG/s400/20070607a_users.gif" alt="" id="BLOGGER_PHOTO_ID_5077879807289575826" border="0" /></a>[Developers look at technology but the users think it's all just magic underneath]<br /><br />Successful web2.0 applications are designed from the "outside in" and focus on the user experience strategy. This was the way Google Calendar was built, and within 9 months it had overtaken the second most popular competitor on the market.<br /><br />With photography, no-one owns the endo to end solution, but Flickr takes the same philosophy. The <a href="http://www.flickr.com/about/">About Flickr</a> page states the site's two main goals:<br /><ul><li>We want to <span style="font-weight: bold;">help people make their photos available to the people who matter to them.</span></li><li>We want to <span style="font-weight: bold;">enable new ways of organizing photos.</span></li></ul>The longer explanation on the page sets out the goals, but puts no limits on the technology. "The experience is the product"Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com1tag:blogger.com,1999:blog-30379699.post-6750517481612864852007-06-06T21:00:00.000+00:002008-12-09T16:13:07.134+00:00Interaction vs PassivityIt's that time of year again, and the <span style="font-weight: bold;">Adobe Live</span> roadshow has been to town. The two-day event was held at the Business Design Centre in Islington, and I went along to see demos of the latest versions of Photoshop, Dreamweaver and all the other goodies in the CS3 Suite.<br /><br />As well as the product demos, there were also other seminars covering design topics. One by a guy from <a href="http://www.avenuea-razorfish.com/">Avenue A/Razorfish</a> was entitled <span style="font-weight: bold;">Web Design With Emotion<br /><br /></span>This was quite thought provoking, saying users are starting to expect more and more from things like eCommerce applications, and there are more ways of presenting results that just boring old lists of stuff. Two examples he gave were:<br /><br /><a href="http://amaznode.fladdict.net/">Amaznode</a><br />Great way of querying Amazon - I ran a search for rugby books on the UK site, and got the following interconnectedness results back:<br /><br /><span style="font-weight: bold;"></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMwoiBqYb4XmoCcY5Yr0BAZ5AmWyk0qbVfVL7iqabAOX3ZOeL__U-TNESbFzIU4vBNdwVXKcitrVFCsynk_5WcOEErQP8c53AkdM9d35EconNMkJ36hFGH1MYeYdmv63pPD1sa/s1600-h/20070606_amaznode.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMwoiBqYb4XmoCcY5Yr0BAZ5AmWyk0qbVfVL7iqabAOX3ZOeL__U-TNESbFzIU4vBNdwVXKcitrVFCsynk_5WcOEErQP8c53AkdM9d35EconNMkJ36hFGH1MYeYdmv63pPD1sa/s320/20070606_amaznode.jpg" alt="" id="BLOGGER_PHOTO_ID_5077821717856897346" border="0" /></a>[Amaznode search results show a web of connectedness for the items]<br /><br />It's fun watching the network to build up. You can pick up an item and drag it about (the blue knot). Double-clicking the centre book will bring up the item detail panel, which lets you Add to Cart or Go to Amazon. I liked the way it presents related stuff - could be good if you're looking for recommendations based on what you have already. Not sure how reliable they are though!<br /><br /><a href="http://www.etsy.com/color.php">Etsy's Shop By Colour</a><br />Etsy is a site where folks who hand make craft items can sell to individuals. There's the usual way of browsing boring old categories, but the Shop By Colour feature is fun - especially if you are trying to co-ordinate stuff for an outfit or room.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEmBveyg1fRAFyp08b5GCjFU4e-m7W8wyuZ4Fzzy1C6ntXWBm1gZWkrCYXJhdZTqXsIkUfhBuu605KHCl3uxLfq0fTGNxdSU_jY6zII1PLQ775tTvlOTGJbxnTsHs85Wxw4_dv/s1600-h/20070606_etsy.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEmBveyg1fRAFyp08b5GCjFU4e-m7W8wyuZ4Fzzy1C6ntXWBm1gZWkrCYXJhdZTqXsIkUfhBuu605KHCl3uxLfq0fTGNxdSU_jY6zII1PLQ775tTvlOTGJbxnTsHs85Wxw4_dv/s320/20070606_etsy.jpg" alt="" id="BLOGGER_PHOTO_ID_5077821726446831954" border="0" /></a>[Etsy shop by colour display]<br /><br />Swirl your mouse round to stir up the colour trail, and click one you like the look of. The database will bring back a cluster of stuff that matches. It's great fun - go and have a play!<br /><br />So, just two bits of food for thought which show search results don't have to be boring. Users are getting smarter and prefer interaction to passivity, so whilst this kind of interface would have been unheard of even a couple of years ago, things are changing fast.Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-88346163917123976342007-05-31T23:12:00.000+00:002008-12-09T16:13:07.997+00:00Geek Dinner With Becky HoggeThis <a href="http://www.geekdinner.co.uk/">Geek Dinner</a> saw us in a new venue, <span style="font-weight: bold;">Ye Olde Cock Tavern</span> on Fleet Street, since our old haunt, <span style="font-weight: bold;">The Bottlescrue</span> has called time for good. The new place is actually better, I think, because we can have one floor of the pub to ourselves and not encroach on anyone else too much. And the food was much better, too! Thanks to <a href="http://www.cubicgarden.com/" rel="friend met colleague">Ian</a> for finding such a great place for us to meet.<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSo1ZQnC88XzsUqLSZG2A6gqE-tvjBEIX-g1n3W2FuyYrrPTM1qM0jTe3R0xhxQGQrKP2dPQdCfOkW2oLQt5sxB3oe2zpEwT0DIu8qpEjwsSluvg7pzci-Rv117DzJa7rd7V6R/s1600-h/20070531_org_protect_big.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSo1ZQnC88XzsUqLSZG2A6gqE-tvjBEIX-g1n3W2FuyYrrPTM1qM0jTe3R0xhxQGQrKP2dPQdCfOkW2oLQt5sxB3oe2zpEwT0DIu8qpEjwsSluvg7pzci-Rv117DzJa7rd7V6R/s400/20070531_org_protect_big.gif" alt="" id="BLOGGER_PHOTO_ID_5077804151440656690" border="0" /></a><span style="font-weight: bold;">Becky Hogge</span> was the guest. She heads the <a href="http://www.openrightsgroup.org/">Open Rights Group</a>, and explained the work of the ORG, who summarise their goals as:<br /><ul><li>To raise awareness in the media of digital rights abuses</li><li>To provide a media clearinghouse, connecting journalists with experts and activists</li><li>To preserve and extend traditional civil liberties in the digital world</li><li>To collaborate with other digital rights and related organisations</li><li>To nurture a community of campaigning volunteers, from grassroots activists to technical and legal experts</li></ul><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnVFlTsqDRx5dpAIXeVTtBCgXIbLcF3z3zppfiszp1sBGu7f3wOWHPmocODeoBh-OiUzgtOtxx1WuUOd8PwE9hIO68J4auad46kwTsCcoSW832O5h3htn8JEWFj2XZ3gO29jDI/s1600-h/20070531_D256-004.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnVFlTsqDRx5dpAIXeVTtBCgXIbLcF3z3zppfiszp1sBGu7f3wOWHPmocODeoBh-OiUzgtOtxx1WuUOd8PwE9hIO68J4auad46kwTsCcoSW832O5h3htn8JEWFj2XZ3gO29jDI/s320/20070531_D256-004.jpg" alt="" id="BLOGGER_PHOTO_ID_5077803919512422674" border="0" /></a>[Becky explains the work of the Open Rights Group]<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5m-0QI4grFv4NDkyd8udT_y7hs9xVCBoGEWse9qWpL_5fzJgVIVmyioC0W-0XJlRP4AaO-d0HZpzcZbDCZMKbXenWPOr0PKhC_ClHzA8Ti_YoSuQuoT0xsCiOtISFB-Ip2Bu/s1600-h/20070531_D256-005.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5m-0QI4grFv4NDkyd8udT_y7hs9xVCBoGEWse9qWpL_5fzJgVIVmyioC0W-0XJlRP4AaO-d0HZpzcZbDCZMKbXenWPOr0PKhC_ClHzA8Ti_YoSuQuoT0xsCiOtISFB-Ip2Bu/s320/20070531_D256-005.jpg" alt="" id="BLOGGER_PHOTO_ID_5077803919512422690" border="0" /></a>[Attentive audience]<br /><br />The ORG's website is well worth a read if you are interested in any issues regarding digital rights of various kinds.Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com2tag:blogger.com,1999:blog-30379699.post-17710521706993193172007-05-17T23:35:00.000+00:002008-12-09T16:13:08.479+00:00Playing CatchupI seem to have got out of the blogging habit, so I'm hoping to catch up on a few posts now. I'll tweak the dates so they're relevent to the events roughly as they happened (chronology? what's that?!)<br /><br />The first event I'd like to make a post about was the excellent -<br /><br /><span style="font-weight: bold;">Web Standards Group Meeting on Javascript</span><br /><br />Some of us shy away from JavaScript (until recently, myself included) on the grounds that it's not accessible. But these days, if it's done right, it can be positively beneficial to accessibility.<br /><br /><span style="font-style: italic; font-weight: bold;">Demystifying Screen Readers - Steve Faulkner</span><br />Steve is very knowledgable on screen readers and all their foibles, and is Director of the <a href="http://www.wat-c.org/">Web Accessibility Tools Consortium</a>. This talk mainly centred around <a href="http://www.freedomscientific.com/fs_products/software_jaws.asp">Jaws</a> (65%) and <a href="http://www.synapseadaptive.com/gw/wineyes.htm">Window Eyes</a> (35%). The bracketed figures are from a <a href="http://www.nfb.org/nfb/Default.asp">US National Federation of the Blind</a> market share survey - it's obvious these are the two big players.<br /><br />The key issues revolve around: <br /><ul><li><span style="font-weight: bold;">Dynamic updates</span> - user initiated and independent<br />Can the user access the updated content?<br />Is the user aware that the content has been updated?</li><li><span style="font-weight: bold;">Rich Internet Applications (RIA) </span><br />Can the user understand the role of the control?<br />Can the user successfully interact with the control?<br />Is the user able to access information about the current state of the control?</li></ul>He then explained the differences in screen reader modes:<br /><ul><li><span style="font-weight: bold;">Browse Mode </span>(virtual buffer) - the user can navigate page content via paragraphs, headings, links, lists etc. They can also activate links and some form controls. But text characters can't be input into form fields, or interact with select elements in this mode.</li><li><span style="font-weight: bold;">Forms Mode</span> (browse mode off) - the user may only navigate through a document to focusable elements via the TAB key. Text access is limited to "read all" functionality. Most of advanced content navigation is unavailable.</li></ul>The crucial question we have to consider is, <span style="font-weight: bold;">when and how does content become available to the user</span> after it's been updated in the browser?<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvF6XLmpj3gPIkpjIVgC-f-koWUw0piKH82RlnHkxZJnWkIwkPfA2lK8IV11DbcIIOprevX4NSQSDZ_cHWAD2DSk1TkbsclteS7aI0RQJh4AlUXTBLzSQvVRARGXwL9b1b7r28/s1600-h/20070517_D250-015.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvF6XLmpj3gPIkpjIVgC-f-koWUw0piKH82RlnHkxZJnWkIwkPfA2lK8IV11DbcIIOprevX4NSQSDZ_cHWAD2DSk1TkbsclteS7aI0RQJh4AlUXTBLzSQvVRARGXwL9b1b7r28/s320/20070517_D250-015.jpg" alt="" id="BLOGGER_PHOTO_ID_5077782801158228178" border="0" /></a>[Steve Faulkner and the Latency Issue]<br /><br />Latency is a problem because the virtual buffer does not update and the user doesn't know anything has changed. However, JAWS v7.1 started "listening" for virtual buffer updates in response to things like:<br /><ul><li>window.setInverval()</li><li>object.innerText (for IE)</li><li>object.textContent and object.appendChild (in Firefox)</li><li>changes in form control values</li><li>And other stuff like ALT or TITLE attribute value changes.<br /></li></ul>Jez Lemon has an excellent article on <a href="http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php">Improving Ajax Applications For JAWS Users</a> on his webiste. Steve summed up with some recommendations:<br /><ul><li>Do not code to accommodate the poor support shown by JAWS and Window Eyes.</li><li>Use unobtrusive methods where available and appropriate, to help screen readers along.</li><li>Don't use the excuse that JavaScript / Ajax is not accessible for screen readers to not bother to design for accessibility.</li><li>Start developing interface elements that use WAI-ARIA specs, which will provide some benefits now and many more in the future.</li></ul>Steve's thought-provoking presentation was followed by a turn from Christian Heilmann entitled <span style="font-weight: bold; font-style: italic;">Seven Reasons For Code Bloat</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuQn3uZHPVlW101_zgo25xf73186yD5cBWEQgr_803KpgrESIitPx-zItvSHe4lwBbVvnWVJLAcgDj1rjq4wmHg_Qlzd162VSXw4sYjK1R3FgiO5jEOptzaQog9hK7jZ06S-yy/s1600-h/20070517_D250-024.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuQn3uZHPVlW101_zgo25xf73186yD5cBWEQgr_803KpgrESIitPx-zItvSHe4lwBbVvnWVJLAcgDj1rjq4wmHg_Qlzd162VSXw4sYjK1R3FgiO5jEOptzaQog9hK7jZ06S-yy/s320/20070517_D250-024.jpg" alt="" id="BLOGGER_PHOTO_ID_5077782801158228194" border="0" /></a>[Christain's been on the beanz again]<br /><br />His notes are available for <a href="http://www.wait-till-i.com/index.php?p=441">download from his blog,</a> so I won't repeat them verbatim. Needless to say, it was a fun presentation and contained the obligatory photo of a kitten ;-). Meanwhile, he's thinking of this as the title of his next book:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtWHp1QCtAAs5Bq94Pey3w2nsAaJENDTzDsxqbSubFzr5e0SSJgaxgtE9FobQcBfQLhzMJdvt8kKvZiZzJRPnML8eTGKOSUo4MJTag6Lzq8wUn30ugzLwbiWuRMsEuh4-x9hcu/s1600-h/20070517_D250-054.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtWHp1QCtAAs5Bq94Pey3w2nsAaJENDTzDsxqbSubFzr5e0SSJgaxgtE9FobQcBfQLhzMJdvt8kKvZiZzJRPnML8eTGKOSUo4MJTag6Lzq8wUn30ugzLwbiWuRMsEuh4-x9hcu/s320/20070517_D250-054.jpg" alt="" id="BLOGGER_PHOTO_ID_5077782805453195506" border="0" /></a>[Christian's Next Book?]<br /><br /><span style="font-weight: bold;">PubStandards XVIII</span><br />Of course, the next item on the social agenda was the PubStandards gathering. Lots of fun and revelry as usual, here's one photo, but you can <a href="http://www.flickr.com/photos/rugbymadgirl/tags/upcoming%3Aevent=183292/">see more on Flickr</a>.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2GjdLa_sI9Mu_VprlWP3JLSShM8ZZQlY5YbtQ9qvUFdZ-yLQtUWvyOdenF8jhtg7_4D79BDQR2c_qwDksu7MHvfZt4fWZ-IF_0rVy4XoVWpyNDUWyBCx9-JuleZ1MJ6k0L4qv/s1600-h/20070517_D250-102.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2GjdLa_sI9Mu_VprlWP3JLSShM8ZZQlY5YbtQ9qvUFdZ-yLQtUWvyOdenF8jhtg7_4D79BDQR2c_qwDksu7MHvfZt4fWZ-IF_0rVy4XoVWpyNDUWyBCx9-JuleZ1MJ6k0L4qv/s320/20070517_D250-102.jpg" alt="" id="BLOGGER_PHOTO_ID_5077782809748162818" border="0" /></a>[Patrick & Ashe go head-to-head, while Ross butts in the middle]Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-48749484220053252612007-03-22T15:57:00.000+00:002007-03-22T17:35:31.969+00:00DisconnectedWhen I first started cutting my teeth on dynamic web site development, I was pleased that Dreamweaver has plenty of tools to help out. Because we used it at work for sites, I chose the <span style="font-weight: bold;">ASP.NET/C# </span>server model, and used Access as the database (perfectly adequate for the size and features of the sites I was building).<br /><br />Now I'm beginning to get to grips with <span style="font-weight: bold;">PHP/mySQ</span>L for development. That's going well too. And having used mySQL for a while, I can see the advantages over Access. But what I'd really like to do is upsize a few of my Access databases to mySQL and have them connect to my existing .NET applications, without having to re-write the damned things.<br /><br />The data migration tools available to s smooth job, and the data is sitting there, ready to go. But now I've hit a brick wall. How to tell Dreamweaver I want to use a mySQL database instead of access! So I began looking for the correct <a href="http://www.connectionstrings.com/?carrier=mysql">connection string</a>, this was some help. I also downloaded <a href="http://dev.mysql.com/downloads/connector/odbc/3.51.html">MySQL ODBC 3.51</a> and installed it.<br /><br />Then I set the <span style="font-weight: bold;">web.config</span> file entry to this (bold being the connection string given in the link above):<br /><blockquote><add key="MM_CONNECTION_HANDLER_connPortfolio" value="default_odbc.htm"><br /><add key="MM_CONNECTION_STRING_connPortfolio" value="<span style=">Driver={MySQL ODBC 3.51 Driver};Server=localhost;Database=myDatabase;User=myUser;</span><br /><span style="font-weight: bold;">Password=myPassword;Option=3;</span>" /><br /><add key="MM_CONNECTION_DATABASETYPE_connPortfolio" value="OleDb"><br /><add key="MM_CONNECTION_SCHEMA_connPortfolio" value=""><br /><add key="MM_CONNECTION_CATALOG_connPortfolio" value=""></blockquote><br />I tried the TEST button and Dreamweaver connected successfully! But try running the site via the browser (or Dreamweaver Live Data View) and it falls over with an error:<br /><blockquote>System.ArgumentException: An OLE DB Provider was not specified in the ConnectionString. An example would be, 'Provider=SQLOLEDB;'.<br />at System.Data.OleDb.OleDbConnectionString.ValidateParse() </blockquote><br />So tried a different connection method, using <a href="http://dev.mysql.com/downloads/connector/net/1.0.html">Connector/Net 1.0.9</a> with this syntax in the <span style="font-weight: bold;">web.config</span> file - but got very similar results. Then I found this following in an <a href="http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=98dd5a1#odbc">Adobe Tech Note</a> (my emphasis):<br /><span style="font-weight: bold;"></span><blockquote><span style="font-weight: bold;">Do I have to use ODBC?</span><br />No. For ASP sites you can also connect to a database using OLEDB. <span style="font-style: italic;">For ASP.NET sites you must use OLEDB</span> or the native ASP.NET SQL Server connector.<br /></blockquote>So it looks like it has to be OLEDB, but how to put the correct provider in the connection string? Nothing I've tried seems to work! Any clues? Has anybody actually got this combination to work?<br /><ul><li>Dreamweaver 8</li><li>ASP.NET/C# server model</li><li>mySQL database </li></ul>Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com1tag:blogger.com,1999:blog-30379699.post-38470125219411167012007-03-20T15:55:00.000+00:002008-12-09T16:13:08.611+00:00Mobile Web Best Practices<a href="http://www.sheilafarrell.com/" rel="friend met colleague">Sheila</a> went to the <a href="http://3gsmworldcongress.com/index.asp">3GSM World Congress</a> in Barcelona a few weeks ago, and picked up a handy set of cue cards on designing for the mobile web, which she was kind enough to give to me. It was great timing, since I'd been thinking for a while about the best way to go about designing for mobile devices. The cue cards promote the <a href="http://www.w3.org/Mobile/">W3C's Mobile Web Initiative</a>, and are great prompts on the best techniques to use.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgizDaETiy29PasHNW58PbN__rkYA1NiiVF3Y05s06a6m2EbfAUfwskz-PGAlAMVGf59sIMuEtIKj6jJQXp4auUrgtFx9j7Km4CLHhvOSDUInMDOa2caN6dJLYe8BewdkVi_77t/s1600-h/20070320_3gsm_cuecards.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgizDaETiy29PasHNW58PbN__rkYA1NiiVF3Y05s06a6m2EbfAUfwskz-PGAlAMVGf59sIMuEtIKj6jJQXp4auUrgtFx9j7Km4CLHhvOSDUInMDOa2caN6dJLYe8BewdkVi_77t/s400/20070320_3gsm_cuecards.jpg" alt="" id="BLOGGER_PHOTO_ID_5044036321250600482" border="0" /></a>[Mobile Web Best Practices cue cards]<br />So for those who don't have a copy, I thought I would share the wisdom that they detail. More info can be found at <a href="http://www.w3.org/TR/mobile-bp/">http://www.w3.org/TR/mobile-bp/</a> - but the below is a distilled and much more user-friendly summary.<br /><br /><span style="font-weight: bold;">10 Ways To Mobilise</span><br />The cards are broken into ten topics, with hints and advice on each:<br /><br /><span style="font-weight: bold;">1. Design for One Web</span><br />Content designed with diverse devices in mind reduces cost, increases flexibility, and reaches the needs of more people.<br /><blockquote><span style="font-weight: bold;">Thematic constistency</span> - ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.<br /><br /><span style="font-weight: bold;">Capabilities</span> - exploit device capabilities to provide an enhanced user experience.<br /><br /><span style="font-weight: bold;">Deficiencies</span> - take reasonable steps to work around deficient implementations.<br /><br /><span style="font-weight: bold;">Testing</span> - carry out testing on actual devices as well as emulators. </blockquote><span style="font-weight: bold;"><br />2. Rely on Web Standards</span><br />In the highly fragmented market of devices and browsers, standards are the best guarantee for interoperability.<br /><blockquote><span style="font-weight: bold;">Validate Markup</span> - create documents that validate to published formal grammars.<br /><br /><span style="font-weight: bold;">Content Format Support</span> - send content in a format that is known to be supported by the device.<br /><br /><span style="font-weight: bold;">Content Format Preferred</span> - where possible, send content in a preferred format.<br /><br /><span style="font-weight: bold;">Character Encoding Support</span> - ensure that content is encoded using a character encoding that is known to be supported by the target device.<br /><br /><span style="font-weight: bold;">Character Encoding Use</span> - indicate in the response the character encoding being used.<br /><br /><span style="font-weight: bold;">Style Sheet Use</span> - use style sheets to control layout and presentation, unless the device is known not to support them.<br /><br /><span style="font-weight: bold;">Structure</span> - use features of the markup language to indicate logical document structure.<br /><br /><span style="font-weight: bold;">Error Messages</span> - provide informative error messages and a means of navigating away from an error message back to useful information.</blockquote><span style="font-weight: bold;"><br />3. Stay away from known hazards</span><br />Thoughtful design can help reduce usability problems due to small screens and keyboards, and other features of mobile devices.<br /><blockquote><span style="font-weight: bold;">Pop Ups </span>- do not cause pop-ups or other windows to appear and do not change the current window without informing the user.<br /><br /><span style="font-weight: bold;">Tables Nested</span> - do not use nested tables.<br /><br /><span style="font-weight: bold;">Tables Layout</span> - do not use tables for layout.<br /><br /><span style="font-weight: bold;">Graphics For Spacing</span> - do not use graphics for spacing.<br /><br /><span style="font-weight: bold;">No Frames </span>- do not use frames.<br /><br /><span style="font-weight: bold;">Image Maps</span> - do not use image maps unless you know the device supports them effectively.</blockquote><span style="font-weight: bold;"><br />4. Be cautious of device limitations</span><br />When choosing to use a particular web technology, consider that mobile devices vary greatly in capability.<br /><blockquote><span style="font-weight: bold;">Cookies</span> - do not rely on cookies being available.<br /><br /><span style="font-weight: bold;">Objects or Script</span> - do not rely on embedded objects or script.<br /><br /><span style="font-weight: bold;">Tables Support</span> - do not use tables unless the device is known to support them.<br /><br /><span style="font-weight: bold;">Tables Alternatives</span> - where possible, use an alternative to tabular presentation.<br /><br /><span style="font-weight: bold;">Style Sheets Support</span> - Organise documents so that, if necessary, they may be read without style sheets.<br /><br /><span style="font-weight: bold;">Fonts</span> - do not rely on support of font related styling.<br /><br /><span style="font-weight: bold;">Use of Colours</span> - Ensure that information conveyed with colour is also available without colour.</blockquote><span style="font-weight: bold;"><br />5. Optimize navigation</span><br />Simple navigation and typing become critical when using a small screen and keyboard, and limited bandwidth.<br /><blockquote><span style="font-weight: bold;">Navbar</span> - provide only minimal navigation at the top of the page.<br /><br /><span style="font-weight: bold;">Navigation</span> - provide consistent navigation mechanisms.<br /><br /><span style="font-weight: bold;">Link Target ID</span> - cleary identify the target of each link.<br /><br /><span style="font-weight: bold;">Link Target Format</span> - Note the target file's format unless you know the device supports it.<br /><br /><span style="font-weight: bold;">Access Keys</span> - assign access keys to links in navigational menus and frequently accessed functionality.<br /><br /><span style="font-weight: bold;">URIs</span> - keep the URIs of site entry points short.<br /><br /><span style="font-weight: bold;">Balance</span> - take into account the trade-off between having too many links on a page and asking the user to follow too many links to reach what they are looking for. </blockquote><span style="font-weight: bold;"><br />6. Check graphics & colours</span><br />Images, colours and style brighten content, but require care due to inconsistent support for some formats low-contrast screens.<br /><blockquote><span style="font-weight: bold;">Images Resizing</span> - resize images at the server, if they have an intrinsic size.<br /><br /><span style="font-weight: bold;">Large Graphics</span> - do not use images that cannot be rendered by the device. Avoid large or high resolution images except where critical information would otherwise be lost.<br /><br /><span style="font-weight: bold;">Images Specify Size</span> - specify the size of images in markup, if they have an intrinsic size.<br /><br /><span style="font-weight: bold;">No Text Alternative</span> - provide a text equivalent for every non-text element.<br /><br /><span style="font-weight: bold;">Colour Contrast</span> - ensure that foreground and background colour combinations provide sufficient contrast.<br /><br /><span style="font-weight: bold;">Background Image Readability</span> - when using background images, make sure that content remains readable on the device.<br /><br /><span style="font-weight: bold;">Measures</span> - do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values. </blockquote><span style="font-weight: bold;"><br />7. Keep it small</span><br />Smaller sites make users happier by costing less in time and money.<br /><blockquote><span style="font-weight: bold;">Minimise</span> - use terse, efficient markup.<br /><br /><span style="font-weight: bold;">Page Size Limit</span> - ensure that the overall size of page is appropriate to the memory limitations of the device.<br /><br /><span style="font-weight: bold;">Style Sheet Size</span> - keep style sheets small.<br /><br /><span style="font-weight: bold;">Scrolling</span> - limit scrolling to one direction, unless secondary scrolling cannot be avoided. </blockquote><span style="font-weight: bold;"><br />8. Use the network sparingly</span><br />Web protocol features can help improve the user experience by reducing the impact of network bottlenecks and latencies.<br /><blockquote><span style="font-weight: bold;">Auto refresh </span>- do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it.<br /><br /><span style="font-weight: bold;">Redirection </span>- do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.<br /><br /><span style="font-weight: bold;">External Resources </span>- keep the number of externally linked resources to a minimum.<br /><br /><span style="font-weight: bold;">Caching</span> - provide caching information in HTTP responses. </blockquote><span style="font-weight: bold;"><br />9. Help & guide user input</span><br />Keyboards and other input methods on mobile devices can be tedious to use, so effective designs minimize the need for them.<br /><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><blockquote><span style="font-weight: bold;">Minimise Keystrokes</span> - keept the number of keystrokes to a minimum.<br /><br /><span style="font-weight: bold;">Avoid Free Text</span> - avoid free text entry in forms, where possible.<br /><br /><span style="font-weight: bold;">Provide Defaults</span> - provide pre-selected default values where possible.<br /><br /><span style="font-weight: bold;">Default Input Mode</span> - Specify a default text entry mode, language and/or input format, if the target device is known to support it.<br /><br /><span style="font-weight: bold;">Tab Order</span> - Create a logical order through links, form controls and objects.<br /><br /><span style="font-weight: bold;">Control Labelling</span> - label all form controls appropriately and explicitly associate labels with form controls.<br /><br /><span style="font-weight: bold;">Control Position</span> - position labels so they lay out properly in relation to the form control to which they refer. </blockquote><span style="font-weight: bold;"><br />10. Think of users on the go</span><br />Web users on the go want compact information when time is short and distractions many.<br /><blockquote><span style="font-weight: bold;">Page Title</span> - provide a short but descriptive page title for every page.<br /><br /><span style="font-weight: bold;">Clarity</span> - use clear and simple language.<br /><br /><span style="font-weight: bold;">Central Meaning</span> - ensure that material that is central to the meaning of the page precedes material that is not.<br /><br /><span style="font-weight: bold;">Limited</span> - limit content to what the user has requested.<br /><br /><span style="font-weight: bold;">Suitable</span> - ensure that content is suitable for use in a mobile context.<br /><br /><span style="font-weight: bold;">Page Size Usable</span> - devide pages into usable but limited size portions.</blockquote><br />And reading through these, most of the list sounds equally applicable to overcome other accessibility issues. Wise advice, which isn't always easy to follow!Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-2537449517997073892007-03-14T17:05:00.000+00:002007-03-14T17:07:34.685+00:00Decisions, DecisionsI've been in a dilemma for the past few days. Ever since finding out that <a href="http://2007.dconstruct.org/">d.Construct2007</a> and <a href="http://barcamp.org/BarCampBrighton">BarCampBrighton</a> are scheduled for 7th, 8th & 9th of September, it's posed me a problem. Which is that it's the exact same dates that the <a href="http://www.rugbyworldcup.com/EN/Home">Rugby World Cup</a> starts in France, and the opening games with <span style="font-weight: bold;">France vs Argentina</span> and then <span style="font-weight: bold;">England vs USA</span> are the ones I want to go to.<br /><br />So, there's been some weighing up of pro's and con's, and I've just booked the rugby trip! I figured that, even though I had a great time at last year's d.Construct, since it's an annual event, there's always 2008 - whereas World Cups only come round once every four years - and the next one is in New Zealand - hardly a convenient hop across the channel!<br /><br />The worse-case scenario would have been me prevaricating for so long that tickets to both events had sold out. So I thought it best to jump now and forever hold my peace :-)Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-8210825733286498752007-03-04T19:50:00.000+00:002007-03-08T00:03:24.431+00:00MiniBar4Friday 2nd was the first time I had attended a MiniBar session, this time it was <a href="http://upcoming.org/event/129563/">MiniBar4</a>, held near Liverpool Street. I wasn't really sure of the format, but it was basically a chance for developers and investors to get together with a bit of free beer thrown in!<br /><br />Each potential project was given a five minute slot to present their idea or website, and questions were taken at the end. The following sites were presented:<br /><ul><li><a href="http://www.sellaband.com/">sellaband.com</a><br />The basic premise is that "believers" invest in shares of new acts, so they can raise $50K to record an album. Each share is for $10 and will guarantee the believer one copy of the resulting CD. So buy $50 of shares and you get 5 CDs. Once the $50K has been raised, the website puts the band in touch with producers and the recording goes ahead. At any time before the full amount is raised, either band or believers may withdraw their offers. Two acts have already raised the neccessary capital and a third is well on the way.</li><li><a href="http://www.spikesource.com/">spikesource.com</a><br />Is a site for the Open Source community to collaborate and set standards for business-ready applications</li><li><a href="http://www.flirtnik.com/">flirtnik.com</a><br />Billed as "Smart personals for smart people", it's apparently the first Web2.0 dating site, using folksonomy tagging. Users are able to add relevent tags for themselves and others, which can then be searched. Results can be filtered out on the basis of gender etc.<br /></li><li><a href="http://play.tm/">play.tm</a><br />Site aimed at gamers and has loads of news about the latest gear, games, etc. Also has community section.</li><li><a href="http://en.metaweather.com/">metaweather.com</a><br />The site seems to default to Chinese (!), which was slightly disconcerting. It is an automated weather data aggregator that take the weather predictions from various forecasters and calculates the most likely outcome.</li><li><a href="http://rouq.com/">rouq.com</a><br />An unusual search engine which brings up thumbnails of the results pages.<br /></li><li><a href="http://trustedplaces.com/">trustedplaces.com</a><br />A site where users can rate restaurants, shops, or other places, and tag them with relevent meta data. You can play the tastefinder game, which will then match your tastes with other users on the site, in order that you get the recommendations which are most appropriate to you.</li><li><a href="http://www.openrightsgroup.org/">openrightsgroup.org</a><br />The last presentation was from the Open Rights Group, telling us about the work they are doing spreading the word on copyright, DRM, and other tech stuff happening on the web today.<br /></li></ul>So, if you're an investor looking to put up some cash for good ideas, or a developer looking for financial input, MiniBar is the place for you. The next one is scheduled for 20th April.<br /><br />There's also an event called the <a href="http://entrepreneur.meetup.com/1056/?a=mu_zuuwyt00t5">London OpenCoffee Meetup</a> which does more or less the same thing. Only this time it's over coffee, every Thursday morning between 10:00 and 12:00 in Starbucks, Regent Street. I'll bear it in mind when I have my big idea and need funding!Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-59319742117363951362007-03-03T22:44:00.000+00:002008-12-09T16:13:09.831+00:00WSG London #3 - AccessibilityI'm playing catch-up a bit with blogging. I was at the third London Web Standards meeting on 28th February, which had an Accessibility theme.<br /><br />We had three very different talks, each highly informative and enjoyable.<br /><br /><span style="font-weight: bold;">Niqui Merret on Accessbile Flash</span><br /><a href="http://niquimerret.com/" rel="met contact">Niqui</a> started out by saying that Flash and accessibility don't have to be mutually exclusive, as many people presume. However, in the real world:<br /><blockquote>No single technology can be 100% accessible to all users. Aim to achieve the most accessible solution possible.</blockquote>It's up to developers, programmers and copywriters to make sure their contributions are as accessible as possible. It's also up to the software vendors (eg of screen readers) to try and implement the standards properly and as quickly as possible. She also mentioned <a href="http://aralbalkan.com/861/">FlashAid</a> (talks to screen reader and turns off the Javascript/Ajax so browser sees alternative accessible content) and <a href="http://www.swffix.org/devblog/">SWFFix</a> (a tool for progressive enhancement) as useful resources for Flash developers.<br /><br />She talked a bit about the Accessibility panel in the Flash authoring environment, which allows developers to set things like Tab order and ALT text. And she demonstrated a fun little game in Flash, which was fully accessible without mouse and to screenreaders:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPDTtiD6sKGD8lg6DZynzVHviN38L2rx7AntsbffuwFMMjPn7hxeGYx28ezpO1e-ynz_psh_US-Zb73wnXRfKrRXvQvE8QYy-fub2nO88AOx8xUFQCSt7XgfAIRSroR631doAT/s1600-h/20070303_D221-14.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPDTtiD6sKGD8lg6DZynzVHviN38L2rx7AntsbffuwFMMjPn7hxeGYx28ezpO1e-ynz_psh_US-Zb73wnXRfKrRXvQvE8QYy-fub2nO88AOx8xUFQCSt7XgfAIRSroR631doAT/s320/20070303_D221-14.jpg" alt="" id="BLOGGER_PHOTO_ID_5039318384901639554" border="0" /></a>[Niqui demonstrates her accessible Flash game]<br /><br /><span style="font-weight: bold;">Ann McMeekin on Accessibility - What Not To Do</span><br /><a href="http://www.pixeldiva.co.uk/" rel="acquaintance met">Ann</a> is a <span style="font-style: italic;">Web Accessibility Consultant</span> for the <a href="http://www.rnib.org.uk/wacblog/">RNIB</a>, and clearly knew her subject inside out.<br /><br />She made many excellent points, but some of the most salient were:<br /><ul><li><span style="font-weight: bold;">Don't assume</span> all users with disabilities are the same </li><li><span style="font-weight: bold;">Don't ignore</span> users who come to you with a problem</li><li><span style="font-weight: bold;">Don't forget</span> to set your page's default colours - background and foreground (if not, changing Windows default colour scheme could have a dramatic effect)</li><li><span style="font-weight: bold;">Don't waffle</span> - be clear and concise, don't repeat yourself</li><li>Just because you <span style="font-style: italic;">can</span> add a <span style="font-weight: bold;"></span><span style="font-weight: bold;">title attribute</span> to almost anything, doesn't mean you <span style="font-style: italic;">should</span> - it's largely redundant if your link text is descriptive enough </li><li><span style="font-weight: bold;">Don't be shy</span> - show skiplinks, and use <span style="font-style: italic;">:focus</span> and <span style="font-style: italic;">:active</span> as well as <span style="font-style: italic;">:hover</span> </li><li><span style="font-weight: bold;">Put instructions before forms</span> - otherwise someone who has zoomed the page (magnified) doesn't have a hope in hell of seeing what the labels are</li></ul><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3krDPhFg0vV6J2ING1ho9fZT9LMiSo3Gv7xA1PO5xd1ja-0J9s1jv4WGWU11GgjQ8UBltSSbBAjHEWnn6B_rPeNWrTQ7uRR5naoAUW5v4lNrwMPQlbOvLlBDeRRm_VJ077CW3/s1600-h/20070303_D221-18.jpg"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3krDPhFg0vV6J2ING1ho9fZT9LMiSo3Gv7xA1PO5xd1ja-0J9s1jv4WGWU11GgjQ8UBltSSbBAjHEWnn6B_rPeNWrTQ7uRR5naoAUW5v4lNrwMPQlbOvLlBDeRRm_VJ077CW3/s400/20070303_D221-18.jpg" alt="" id="BLOGGER_PHOTO_ID_5039319243895098786" border="0" /></a>One of the most surprising things was to learn that most screen readers will read out the <span style="font-weight: bold;">legend </span>to an accompanying <span style="font-weight: bold;">fieldset</span> before every <span style="font-weight: bold;">label</span> in the fieldset - so it's important to keep legends short and concise, and so they will make sense when read with the form field label.<br /><br />[right, Ann in full flow]<br /><br />Two final thoughts from Ann:<br /><ul><li><span style="font-weight: bold;">Don't jump on the bandwagon</span> and implement the latest cool widget without knowing what impact this might have on your users</li><li><span style="font-weight: bold;">Accessibility doesn't mean you can't be creative</span></li></ul><span style="font-weight: bold;">Mike Davies on Web Accessibility - The Developer's Tale</span><br /><a href="http://www.isolani.co.uk/">Mike</a>'s talk was a case study of the re-design of <a href="http://www.legalandgeneral.com/">Legal & General</a>'s website services and applications, which he had been heavily involved with before his move to Yahoo! in the summer of 2006.<br /><br />Four years ago, before the project started, L&G's website was ranked 92nd in a FTSE100 survey of websites; it ranked badly with search engines, had at least 150 links on every page and was horribly inaccessible. Through the vision of the website manager, the site was completely redesigned with accessibility at the heart of the thinking.<br /><br />They reaped the benefits very quickly:<br /><ul><li>40% increase in website traffic</li><li>doubled conversion rates (that is, number of people completing an online application for insurance etc, versus those who start the process)</li><li>doubled online revenue</li><li>cut maintenance costs by two thirds</li><li>increased natural search-engine traffic by 50% </li><li>paid for itself in five months</li></ul><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbN9YWlfJJdnv3q7HXGKQ5SkJcYlj1BigsmKBeCAh5u3SG82S30VDEytzuJj6EXSm1e569w6-Mm23wvduNHvHC4Ub6ZmKg366JUeTzdzKTEiDXH60ZQ7FlPcTm73E9yezeqRon/s1600-h/20070303_D221-64.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbN9YWlfJJdnv3q7HXGKQ5SkJcYlj1BigsmKBeCAh5u3SG82S30VDEytzuJj6EXSm1e569w6-Mm23wvduNHvHC4Ub6ZmKg366JUeTzdzKTEiDXH60ZQ7FlPcTm73E9yezeqRon/s320/20070303_D221-64.jpg" alt="" id="BLOGGER_PHOTO_ID_5039318389196606866" border="0" /></a>[conversion rates for Home Insurance - lilac = old site, burgundy = new site. The first two bars are the numbers starting the process, middle represents those finishing a quote and last pair are numbers of completed applications]<br /><br />And the website is now held up as a highly-regarded example of how to do things properly - it is a <a href="http://www.accessibility101.org.uk/pas78.htm">PAS 78</a> and <a href="http://www.abilitynet.org.uk/">AccessibilityNet</a> case study, has accreditation from the <a href="http://www.shaw-trust.org.uk/">Shaw Trust</a>, and is cited in books on accessibility.<br /><br />Thanks again to <a href="http://www.muffinresearch.co.uk/wsg/" rel="met contact">Stuart</a> for organising an excellent event. I look forward to the next one.Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-58980932607025486572007-03-02T14:45:00.000+00:002007-03-02T14:46:37.666+00:00My New Photographic BlogI've decided to start a new blog, dedicated to purely photographic topics. Having thought about it for a while, the balance was finally tipped after BarCamp when I wrote up <a href="http://cazphoto.blogspot.com/search/label/my%20barcamp2%20presentation">my tutorials</a> from the presentation I did.<br /><br />More and more of my photographic (non-geek) friends have been asking about them, and I thought it was easier to separate the content out into a new blog, rather than them having to wade through lots of web geekery here.<br /><br />So please take a look at <a href="http://cazphoto.blogspot.com/">http://cazphoto.blogspot.com/</a> for the new publication!<br /><br />Some posts from this blog's archives have moved to the new one; other posts are replicated (mainly my BarCamp2 stuff, or those with a few comments attached, which have stayed put here and been copied to the new address).<br /><br />Henceforth, I shall be putting any photography-related topics on the new blog, so please put the address in your feedreaders if you'd like to keep up with my posts there.Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com0tag:blogger.com,1999:blog-30379699.post-16590593432026370402007-03-01T16:17:00.000+00:002008-12-09T16:13:14.608+00:00WebCards Extension For FireFox<span style="font-weight: bold;">Discovering Microformats</span><br />For viewing Microformats, and discovering them in a web page, <a href="http://cazmockett.blogspot.com/2006/10/playpen-4-microformatstoo-many-tails.html">I've blogged about Tails for Firefox</a> in the past. But recently, I've been beta testing <a href="http://www.bumblesearch.com/bsearch/blog" rel="friend met colleague">Andy Mitchell</a>'s excellent <a href="http://www.whymicroformats.com/articles/2007/02/16/webcards-0-30">Webcards 0.3 extension</a> for <a href="http://www.mozilla.com/en-US/firefox/">Firefox</a>. So what does it do?<br /><br />The first time you load a page containing Microformatted information, the green <span style="font-weight: bold;">WebCards</span> ribbon pops up at the bottom of the browser viewport to alert you. This also appears when you mouse over the bottom of the browser:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNA3B_0salp9jhT92_0IQr8qJ0NMnHQw601Trjw1Rpx_KrcG1SgVUAG4h7KbsI4HQ0YbosAOYDFskmKmjRFnDIrcL9pAPPn9eYBxzrlDMAHS6lbPRto1NPXUglCOQL2_5e7Bd/s1600-h/20070301_webcards_ribbon.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzNA3B_0salp9jhT92_0IQr8qJ0NMnHQw601Trjw1Rpx_KrcG1SgVUAG4h7KbsI4HQ0YbosAOYDFskmKmjRFnDIrcL9pAPPn9eYBxzrlDMAHS6lbPRto1NPXUglCOQL2_5e7Bd/s320/20070301_webcards_ribbon.gif" alt="" id="BLOGGER_PHOTO_ID_5037004185108994962" border="0" /></a>[WebCards ribbon tells you what sort of Microformats are in the page]<br /><br /><span style="font-weight: bold;">Playing Tag </span><br />Clicking the "Tags" link in the ribbon brings up the Tags panel:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFF7L3otg7uTm9Dx8vaeoxM7sc107KFwIb12BR6-yD8wCQFpsAjxHWUZryIFLNMpA39vFacPwCW8ZAIf9U1w0YEKd-0WUazm_cLt6ShyphenhyphenjBJQQApERHJzo8XKLYaEJsPbj09xN/s1600-h/20070301_tagspanel1.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFF7L3otg7uTm9Dx8vaeoxM7sc107KFwIb12BR6-yD8wCQFpsAjxHWUZryIFLNMpA39vFacPwCW8ZAIf9U1w0YEKd-0WUazm_cLt6ShyphenhyphenjBJQQApERHJzo8XKLYaEJsPbj09xN/s320/20070301_tagspanel1.gif" alt="" id="BLOGGER_PHOTO_ID_5037004189403962274" border="0" /></a>[Default view of the "tags" panel is the <span style="font-weight: bold;">Related</span> option, allowing easy search of <a href="http://del.icio.us/">del.icio.us</a> or <a href="http://upcoming.org/">Upcoming</a> for the tags in question; "brian suda" in this example.]<br /><br />Similarly, clicking the <span style="font-weight: bold;">Feedback</span> or <span style="font-weight: bold;">Media</span> icons gives alternative search options for that tag:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir4VgluHAYbcfmrvFSx7KjBydas2HZODaphHtcnsxEsP1pLIYDvB2tSXfTjZKffEJo7NQiohM3_evcsf1UYi2iiNut0emPboKnGjguUGmMhXJkZvLU3eedqMa-e4iUotFoaG8-/s1600-h/20070301_tagspanel2.gif"><img style="margin: 0pt 5px 10px 0pt; float: left; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir4VgluHAYbcfmrvFSx7KjBydas2HZODaphHtcnsxEsP1pLIYDvB2tSXfTjZKffEJo7NQiohM3_evcsf1UYi2iiNut0emPboKnGjguUGmMhXJkZvLU3eedqMa-e4iUotFoaG8-/s200/20070301_tagspanel2.gif" alt="" id="BLOGGER_PHOTO_ID_5037009661192297586" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_YDLpTTW5HQ9tAPLB4jC4t9kD0Ef74o3DQzfaS0akmtFsLukmiLXpdvp_ShQsNyYns9v-ol04j6MYDXA68nqIZg34NJ1m9YZjirk4UA27b2z-PifMYwfYeOniPdpIUz03vbde/s1600-h/20070301_tagspanel3.gif"><img style="margin: 0pt 0pt 10px 5px; float: right; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_YDLpTTW5HQ9tAPLB4jC4t9kD0Ef74o3DQzfaS0akmtFsLukmiLXpdvp_ShQsNyYns9v-ol04j6MYDXA68nqIZg34NJ1m9YZjirk4UA27b2z-PifMYwfYeOniPdpIUz03vbde/s200/20070301_tagspanel3.gif" alt="" id="BLOGGER_PHOTO_ID_5037009824401054850" border="0" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />[Feedback offers to search <a href="http://www.technorati.com/">Technorati</a>, Media offers to search <a href="http://www.flickr.com/">Flickr</a> for the tag in question]<br /><br />An alternate way to access the tags panel is to right click any tag on the page (which will be highlighted by the green <img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmESfi84-PmVwXrDnRiVHnSxCqxMOR971yTK8y5-xHU3BN7cCYL5bGa7YqoeKzZagVIx6IO2L_soE4QuPqbJpsDQmLutkqN4EeI5uVxAk_GvIzLXHQcDSrl1_TKURcRCRBB6x2/s400/20070301_icon_tag.gif" alt="TAG" id="BLOGGER_PHOTO_ID_5037005585268333554" class="noborder" border="0" /> icon):<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi56drGN6rleSVNl_7QGOgoQ7j73jLZi9ir2QZSFheO6jQyRRDAbEs4fARMDQRA2wz2CAH1OqqetpjrTHHQ5OVKjxSf_lt3eKyDifm6KKvIZQX8AD8f7G_f0HxxmbuGfy3UwpvD/s1600-h/20070301_tags_mouseover1.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi56drGN6rleSVNl_7QGOgoQ7j73jLZi9ir2QZSFheO6jQyRRDAbEs4fARMDQRA2wz2CAH1OqqetpjrTHHQ5OVKjxSf_lt3eKyDifm6KKvIZQX8AD8f7G_f0HxxmbuGfy3UwpvD/s320/20070301_tags_mouseover1.gif" alt="" id="BLOGGER_PHOTO_ID_5037006465736629266" border="0" /></a>[Right-click (configurable) the TAG icon to get a floating version of the Tags panel]<br /><br /><span style="font-weight: bold;">Making Contact</span><br />When displaying contact information, the extension will display the blue <img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihwnzVr2Z0ZIOE8_UapK8RDokRaWbFJ_gfO91Q9NL4Ro9l0d_xARWOL6yRRtfeufT3BKZoCGA-B4eVdtLhSpgF5aE2wnb-sj5KV6yvuporvwI8n3dCX-534iCi26fiB7vX5tKD/s400/20070301_icon_pers.gif" alt="Person" id="BLOGGER_PHOTO_ID_5037005580973366242" class="noborder" border="0" /> icon whenever it encounters any <a href="http://microformats.org/wiki/hcard">hCard</a> info. Right click to get the floating panel for the hCard information:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi75IQPMY_sTQXAju1EWcujJx-w1qHtJCH6U4lhNzcOdBeouPgttWPssKqj2fII581J2fQvRldi1ss7kzi_OAs_GJAwhqDckkOTYq-9B9FkJDVelGeHWiUqkO9esvCeOsXOAGCO/s1600-h/20070301_contactpanel1.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi75IQPMY_sTQXAju1EWcujJx-w1qHtJCH6U4lhNzcOdBeouPgttWPssKqj2fII581J2fQvRldi1ss7kzi_OAs_GJAwhqDckkOTYq-9B9FkJDVelGeHWiUqkO9esvCeOsXOAGCO/s320/20070301_contactpanel1.gif" alt="" id="BLOGGER_PHOTO_ID_5037006972542770210" border="0" /></a>[Default view for hCard is the <span style="font-weight: bold;">Information</span> icon. Shows multiple links if they are in the hCard]<br /><br />The <span style="font-weight: bold;">Application</span> icon will allow export of the hCard info to Outlook or other address book application. The <span style="font-weight: bold;">Related</span> icon shows other search options for that person:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEzG5L5KrcsxzAFBmwfZHg4ZXZwH8OqLtGhTR5WL8zOYT5-T5aOYu9zVUabn6Q0_A4tQVBGTcsHIf5xwVO5mEhMnYUuacfkN40k9S7pwmIzvwueV9_8_YtydXFfbxp2kzAAg2X/s1600-h/20070301_contactpanel2.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEzG5L5KrcsxzAFBmwfZHg4ZXZwH8OqLtGhTR5WL8zOYT5-T5aOYu9zVUabn6Q0_A4tQVBGTcsHIf5xwVO5mEhMnYUuacfkN40k9S7pwmIzvwueV9_8_YtydXFfbxp2kzAAg2X/s320/20070301_contactpanel2.gif" alt="" id="BLOGGER_PHOTO_ID_5037006976837737522" border="0" /></a>[Related search options are <a href="http://www.linkedin.com/">LinkedIn</a>, <a href="http://www.google.co.uk/">Google</a> or <a href="http://wikipedia.org/">Wikipedia</a>]<br /><br /><span style="font-weight: bold;">Getting Friendly</span><br />My blogroll is marked up with <abbr title="XHTML Friends Network" lang="en"><a href="http://gmpg.org/xfn/">XFN</a></abbr> and when you mouse over the relevant link, WebCards will let you see the orange <img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg10obHj4QpnwCG4A-tRwhpd4GvshC86Kr21O-YS_wML9NfkAI32zGWKp3O5B-But4YSFyNkPdlk4YVYT4PFuZb_5_bSyht7GriCX-v11xcsHYNJKs8h2PCYCm4vp44FlwHnR6_/s400/20070301_icon_xfn.gif" alt="XFN" id="BLOGGER_PHOTO_ID_5037005589563300866" class="noborder" border="0" /> icon. Right click and it shows relationship in the XFN panel:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKqkJxwP7GSscCU5gO88Zz-tYQJTMLCn2odHqL7_ZhnslhqtgqjI3dIoBTIjpKYpPbfZ-D9o80_yq1EuLWYG1AtG_w6UHNg7XmNVBv8GUQSINfKEahxnYbluQL92bir98C8Ytw/s1600-h/20070301_xfnpanel.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKqkJxwP7GSscCU5gO88Zz-tYQJTMLCn2odHqL7_ZhnslhqtgqjI3dIoBTIjpKYpPbfZ-D9o80_yq1EuLWYG1AtG_w6UHNg7XmNVBv8GUQSINfKEahxnYbluQL92bir98C8Ytw/s320/20070301_xfnpanel.gif" alt="" id="BLOGGER_PHOTO_ID_5037007999039953986" border="0" /></a>[The <span style="font-weight: bold;">XFN</span> panel shows the <span style="font-style: italic;">page owner's</span> relationship to the linked person]<br /><br /><span style="font-weight: bold;">Make A Date</span><br />The last major category of Microformat that I've been exploring with WebCards is of course, <a href="http://microformats.org/wiki/hcalendar">hCalendar</a>. These are indicated by the little red <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPn6ON17kD2v6TDhVo_cq5lmLSeiS9dgXW9P7g3cW2H5u6zl5Dj52efkitfqu6GUCGWmmA3St75DbmPjltG3E046DuVwWahImaBi6WPQ0PXT9jFg34QVYSfUCtS88BQXejL6a4/s400/20070301_icon_cal.gif" alt="CAL" id="BLOGGER_PHOTO_ID_5037005576678398930" class="noborder" border="0" /> icon:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo54l4AhZT3HdOfA8DzQQ3JY5f89OBG1V3EuiYBAvOE8al2ht8GzILP3agChZc8v-RovevYeL_SIGV2shDWpUsfsOqlRSW7ymjrKtCcMGdCQWtus5fD74Xt6qvDeAk9yaA1kAT/s1600-h/20070301_hcalpanel1.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo54l4AhZT3HdOfA8DzQQ3JY5f89OBG1V3EuiYBAvOE8al2ht8GzILP3agChZc8v-RovevYeL_SIGV2shDWpUsfsOqlRSW7ymjrKtCcMGdCQWtus5fD74Xt6qvDeAk9yaA1kAT/s320/20070301_hcalpanel1.gif" alt="" id="BLOGGER_PHOTO_ID_5037008621810211922" border="0" /></a>[Upcoming occasions displayed in the <span style="font-weight: bold;">Calendar</span> panel]<br /><br />As with the other format panels, the <span style="font-weight: bold;">Application</span> icon lets you export the event to <span style="font-style: italic;">Outlook</span> or <span style="font-style: italic;">Google Calendar</span> applications; <span style="font-weight: bold;">Related</span> will search Upcoming or Google for the event:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnaDVPPLJUTNJKtw5fJZnAn20Fef5o9ipGw5XWz9Gc0vCxyFlv3V-x-WfNfolzEkzlOVoq6c4Pv_MFbNzVSjEITs_W5Phu8SRtSNOWzPmcsvib8WDNxE1l59GdcAX1wQo7INTq/s1600-h/20070301_hcalpanel2.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnaDVPPLJUTNJKtw5fJZnAn20Fef5o9ipGw5XWz9Gc0vCxyFlv3V-x-WfNfolzEkzlOVoq6c4Pv_MFbNzVSjEITs_W5Phu8SRtSNOWzPmcsvib8WDNxE1l59GdcAX1wQo7INTq/s320/20070301_hcalpanel2.gif" alt="" id="BLOGGER_PHOTO_ID_5037008626105179234" border="0" /></a>[Add an event to my GoogleCalendar with the <span style="font-weight: bold;">Applications</span> icon]<br /><br /><span style="font-weight: bold;">Summing Up</span><br />So far, I've seen several iterations of this extension, and Andy has always welcomed feedback on the app. I like it a lot better than <span style="font-style: italic;">Tails for Firefox</span>, it just seems to do more and looks much nicer - don't accuse me of being shallow, it just adds up to a nicer user experience! Anyway, I'd recommend it to anyone who is looking to get the most out of Microformats in the wild.Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com4tag:blogger.com,1999:blog-30379699.post-80657486980892171412007-02-28T15:07:00.000+00:002008-12-09T16:13:14.967+00:00RDF - What's It Good For?One of the presentations that I missed at <a href="http://barcamp.pbwiki.com/BarCampLondon2">BarCampLondon2</a> (I was attending another session) was a light-hearted debate about the similarities and differences between <a href="http://microformats.org/">Microformats</a> and <abbr title="Resource Description Framework" lang="en"><a href="http://www.w3.org/RDF/">RDF</a></abbr>. The main protagonists were:<br /> <ul><li><a href="http://adactio.com/journal/" rel="met colleague friend">Jeremy Keith</a> and <a href="http://suda.co.uk/" rel="met acquaintance">Brian Suda</a> in the Microformats corner<br /> </li><li><a href="http://www.kid666.com/" rel="met colleague acquaintance">Tom Hughes-Croucher</a>, <a href="http://blogs.opml.org/tommorris" rel="met colleague friend">Tom Morris</a> and <a href="http://www.cubicgarden.com/blojsom/blog/" rel="met co-worker friend">Ian Forrester</a> in the RDF corner.<br /> </li></ul><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt25WQ4aSFgwurA7nQBWjVEaF-2pjNeWtYmch-YZbJBDI3HyAL9SWDCP2Z9r70u9elrvE0txSDgRhX9bglpf3DzriL2lhm-RTAmad9GPcnHSI2ZkyM8Fxaur5vRZpd9-Zb-gHz/s1600-h/20070228_logos.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt25WQ4aSFgwurA7nQBWjVEaF-2pjNeWtYmch-YZbJBDI3HyAL9SWDCP2Z9r70u9elrvE0txSDgRhX9bglpf3DzriL2lhm-RTAmad9GPcnHSI2ZkyM8Fxaur5vRZpd9-Zb-gHz/s400/20070228_logos.jpg" alt="" id="BLOGGER_PHOTO_ID_5036603138242763650" border="0" /></a>Thankfully, for those who didn't see the debate, Ian has uploaded <a href="http://cubicgarden.blip.tv/file/152044/">a video of the session</a>. It makes interesting viewing! And shortly afterwards, I found <a href="http://ben-ward.co.uk/journal/fao-rdf/">Ben Ward's insightful post</a> about the whole subject too. I think Ben's second paragraph hits the nail on the head:<br /><blockquote>The thing about RDF is that no-one has yet demonstrated any real-world reason to care about it. It fascinates academics who would love — just for the sake of it — to model the entire universe in triples but in the real world of web browsers the value has never really been promoted.</blockquote>Spot on.<br /><br />The Microformats advocates have been very quick to explain what they are for, what they do, and how to implement them. I use them regularly in this blog, and try to incorporate them wherever I can into new projects. It's so easy to build them in from scratch when marking up events (<a href="http://microformats.org/wiki/hcalendar">hCalendar</a>), people (<a href="http://gmpg.org/xfn/">XFN</a>) or contact details (<a href="http://microformats.org/wiki/hcard">hCard</a>).<br /><br />But as yet, I'm really stumped as to what RDF - or more importantly, <abbr title="embeddable Resource Description Framework" lang="en">eRDF</abbr> can do for me. Tom Morris has started a website called <a href="http://www.getsemantic.com/">GetSemantic</a> which hopes to chart the progress of developments about eRDF and <a href="http://www.getsemantic.com/wiki/Main_Page">spread the word</a>. I'll be keeping an eye on it from time to time, to see what's cooking, but until then, I'll be sticking to my diet of Microformats.Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com2tag:blogger.com,1999:blog-30379699.post-9526081125145159052007-02-27T21:58:00.000+00:002007-03-23T14:21:46.476+00:00Photographic Tutorials<a href="http://www.sheilafarrell.com/" rel="met colleague friend">Sheila</a> had a <a href="http://sheilafarrell.blogspot.com/2007/02/photography-tips-guidance-on-colour.html">good idea</a>, to collect the titles/links of my tutorials on photography, initially written for BarCampLondon2. I'll also be updating the list regularly when I post a new photography tutorial, so you can easily keep tabs on them.<br /><br /><span style="font-weight: bold;">Taking Better Pictures</span><br />These were the posts which formed my presentation at <a href="http://barcamp.pbwiki.com/BarCampLondon2">BarCampLondon2</a>. They are aimed at anyone who would like to improve their photography, whether they use a fully-automatic compact camera or SLR. The principles apply equally to film and digital photography.<br /><ul><li><a href="http://cazphoto.blogspot.com/2007/02/composition-1-rule-of-thirds.html">Composition #1 - The Rule Of Thirds</a><br /></li><li><a href="http://cazphoto.blogspot.com/2007/02/composition-2-lead-in-lines.html">Composition #2 - Lead-In Lines</a><br /></li><li><a href="http://cazphoto.blogspot.com/2007/02/composition-3-using-symmetry.html">Composition #3 - Using Symmetry</a><br /></li><li><a href="http://cazphoto.blogspot.com/2007/02/composition-4-framing-elements.html">Composition #4 - Framing Elements</a><br /></li><li><a href="http://cazphoto.blogspot.com/2007/02/composition-5-creating-depth.html">Composition #5 - Creating Depth</a><br /></li><li><a href="http://cazphoto.blogspot.com/2007/02/composition-6-using-repetition.html">Composition #6 - Using Repetition</a><br /></li><li><a href="http://cazphoto.blogspot.com/2007/02/composition-7-fill-frame-or-not.html">Composition #7 - Fill The Frame, Or Not?</a><br /></li><li><a href="http://cazphoto.blogspot.com/2007/02/composition-8-using-triangles.html">Composition #8 - Using Triangles</a><br /></li><li><a href="http://cazphoto.blogspot.com/2007/02/texture-tone-in-monochrome.html">Texture & Tone in Monochrome</a><br /></li><li><a href="http://cazphoto.blogspot.com/2007/02/subdued-or-single-colour-images.html">Subdued Or Single-Colour Images</a><br /></li><li><a href="http://cazphoto.blogspot.com/2007/02/vibrant-colour.html">Vibrant Colours</a></li> </ul><span style="font-weight: bold;">Getting Technical</span><br />These are aimed at people with a bit of photographic knowledge, but would like to learn more about the technicalities. They will explain the affects of ISO speed, shutter speed, apertures and more.<br /><ul><li><a href="http://cazphoto.blogspot.com/2007/03/all-about-iso.html"><span>All About ISO</span></a><br /></li><li><a href="http://cazphoto.blogspot.com/2007/03/all-about-apertures-f-numbers.html"><span>All About Apertures & F-numbers</span></a><br /></li><li><a href="http://cazphoto.blogspot.com/2007/03/all-about-shutter-speeds.html"><span>All About Shutter Speeds</span></a></li><li><span><a href="http://cazphoto.blogspot.com/2007/03/putting-it-all-together-exposure.html">Putting It All Together - Exposure</a><br /></span></li><li><a href="http://cazphoto.blogspot.com/2007/03/more-on-depth-of-field.html"><span>More on Depth of Field</span></a></li><li><span><a href="http://cazphoto.blogspot.com/2007/03/white-balance-colour-temperature.html">White Balance & Colour Temperature</a><br /></span></li><li><a href="http://cazphoto.blogspot.com/2007/03/lenses-perspective.html"><span>Lenses And Perspective</span></a></li><li><span style="font-weight: bold;">Compression, File Size & Resolution</span> - coming soon</li></ul>Please get in touch by leaving a comment if you would like any other aspect of photography explained.Caz Mocketthttp://www.blogger.com/profile/10460489611014669888noreply@blogger.com1