“Charles Miller”:http://fishbowl.pastiche.org/ has posted up on the Javablogs confluence wiki some information on “including Javablogs generated statistics graphs”:http://confluence.atlassian.com/display/JAVABLOGS/Including+Javablogs+Statistics+Graphs+on+Your+Blog on your site. The example HTML mixes the semantics of the markup with the presentation logic:
Entries Added
There are several issues with this markup. Firstly, there is a @
* “A List Apart”:http://www.alistapart.com/
* “Mezzoblue”:http://www.mezzoblue.com/
* “The Daily Report”:http://www.zeldman.com/
Not being the one to point out the flaw and offer no better alternatives, I went about producing some nice compliant markup. Firstly, I started with the HTML itself:
Entries to Javablogs over time
Hits from Javablogs this week
Gone are the @@ tags, the @border=@ attribute, the useless @
.graph {
float: left;
margin-left: 30px;
}
The @margin-left@ gives a bit of a gap between the two graphs which now sit next to each other. This can introduce another problem however – any @div@ following the @graph@ will also appear on the same line – in my case my related entries @div@ was at fault – this was fixed using @clear@:
.related {
clear:both;
}
Next, we want our graphs to be centred:
.graph img {
text-align: center;
}
And finally format our caption:
.graph .caption {
text-align: right;
text-style: italic;
font-size: 90%;
}
Net result? The HTML is smaller, and yet more meaningful – the presentation is entirely within CSS meaning we can easily use the same styles elsewhere, and we can also change styles quickly (and even have different styles for specific users). You can now see the end result on my “Site Statistics”:http://www.magpiebrain.com/archives/000227.html page.
A nice little site this – “Widgetopia”:http://www.eleganthack.com/widgetopia/ catalogues various widgets from websites. Resources such as this can help show just how functional a website’s UI can be, and more importantly can give some well needed inspiration to webapp UI designers. Its time webapp developers realised that their interfaces don’t need to be ugly, bland affairs, and that beyond looking nice, a decent functional design can make for a more pleasant and efficient user experience.
Jean Tillman’s “article(Digital Web – User Interface Design for Web Applications)”:http://www.digital-web.com/features/feature_2003-11.shtml over at Digital Web Magazine outlines some of the differences between designing web sites and designing interfaces for web applications. Its well worth a read for anyone who develops web applications.
Dunstan Orchard has made some “great alterations”:http://www.1976design.com/blog/archive/2003/11/10/46/ to “Simon Willison’s”:http://simon.incutio.com/ Blockquote javascript code I’ve been using. His additions include properly handily empty cite attributes and handling plain text citations.
Apparently Stuart’s “Sortable Table”:http://www.kryogenix.org/days/565.html code doesn’t work on the Safari browser, but this example does.
Just spent ages tracking down a problem with some Javascript on IE 5.0….I was running a Javascript function using a Click Me! which worked fine on IE 6 (and firebird naturally) but refused to work on IE 5. Changed it to a which seemed to fix things. Oh well, I guess an easy life with one browser version to worry about would be boring….
A whole array of useful sites and tools for you today.
* First off, this “on line PHP script”:http://www.nickherman.com/colormatch/ over at “nickherman”:http://www.nickherman.com/ will generate a colour palette based on a given colour.
* “Colours on the web(Colours on the web – color Theory and color matching)”:http://www.webwhirlers.com/colors/index.asp is a great site which also hosts a “colour wizard”:http://www.webwhirlers.com/colors/wizard.asp which from the description sounds great, however failed to work for me with a handy @Microsoft VB Script runtime error ‘800a0006’@ message. The text was also a little hard to read on the wizard page, but elsewhere the site had some great information
* “EasyRGB(EasyRGB – The first RGB and COLOR search engine on the web!)”:http://www.easyrgb.com/ is a very handy site packed with utilities such as a color harmony generator and tint search engine
* The online “QuickColor”:http://kohaistyle.com/scripts/quickcolor/ tool generates a harmonised colour palette in real time….
* As does this “very good looking flash utility”:http://www.defencemechanism.com/color/color_toy_fr.htm over at “Defence Mechanism”:http://www.defencemechanism.com/. This tool can generate random palettes for you, but doesn’t necessarily generate web-safe colours.
* Finally, “The Colour Schemer(The Color Schemer: The Ultimate Web Designer’s Color Tool)”:http://www.colorschemer.com/ is a shareware app that also generates palettes, albeit as a desktop tool.
Note, applicable the spelling of colour from other sites has been retained 🙂
Quite a few CSS resources have been sitting in my ‘to checkout’ bookmark folder for a while.
* “Position Is Everything”:http://www.positioniseverything.net/ is a CSS resouce site focusing on the use of CSS for positional layout. The hosted “Perched Upon a Lily Pad”:http://www.positioniseverything.net/guests/3colcomplex.html design which I first found out about from “Simon Willson (Simon Willson’s Blog)”:http://simon.incutio.com/ is especially good
* “CSSShark(The CSShark Answers FAQs)”:http://www.mako4css.com/index.htm has some CSS FAQ’s and tutorials.
* There is some good information over at the “CSS Panic Guide”:http://www.thenoodleincident.com/tutorials/css/index.html, although despite the clean looking site I found it a little hard to navigate.
* “The Nemesis Project”:http://nemesis1.f2o.org/ aims to gather all sorts of CSS resources together. I haven’t looked in too much depth but the “Meta Tag Generator”:http://nemesis1.f2o.org/meta hosted there is very handy.
* Eric Meyer’s “CSS Edge”:http://www.meyerweb.com/eric/css/edge/ aims to show the more exterme uses for CSS.
* Finally, “Glish.com”:http://www.glish.com/css/ has some more CSS layout techniques.
If you haven’t been already, you really should checkout the “CSS(Cascading Style Sheets) Zen Garden”:http://www.csszengarden.com/. The brainchild of “Dave Shea”:http://www.mezzoblue.com/, its a site with a number of high quality CSS(Cascading Style Sheets) designs showing what CSS(Cascading Style Sheets) can achieve in today’s browsers.
magpiebrain 