Seeing is believing

In the past I've ranted about "webmasters" and their total failure when it comes to designing websites that are accessible to everyone on the web, and Scott and myself have had many a conversation on the same subject, especially that favourite of "webmasters" called CAPTCHA's. Not only are they 100% pointless because they can be easily broken but they require that humans jump through hoops to prove that they are a human and are impossible for people with certain conditions to solve .... such as dyslexics :

Why pick Dyslexics?

I single out Dyslexics in particular because I happened to be chatting with Tilqi on IRC about accessibility and the mentality of most "webmasters", the edited version of the conversation went a little like this :

<tilqi> i insist on the impossibility of an absolute globalization / standarization or whatever you call it
<yabba_hh> whilst people think that, you remain correct
<tilqi> when so much obstacle about it
<yabba_hh> the obstacles are 100% man made
<tilqi> i agree the need of it, but like many other things it is both vital and impossible
<tilqi> and you are not very comprimising today (:
<yabba_hh> lol, I'm not compromising on any day when this is the subject, I believe in it passionately
<tilqi> yea but it's like 'world peace' , lol it even sounds funny anymore.. you know it must be established but you can not and never will
<yabba_hh> but you know that it is the right thing
<yabba_hh> accessibility is the same "right thing", and is far more achievable
<yabba_hh> it's only getting "more impossible" because current "webmasters" are making it that way
<tilqi> i mean may be you can do it confiscating all the computers and re distribute and 'locked' computers with firefox installed
<yabba_hh> lol, you need to change the mentality of the coders, not the capabilities of computers
<yabba_hh> I have zero problem with using flash / js ... but things *must* work without both
<tilqi> yea but they mostly *dont*
<tilqi> sector leader websites
<yabba_hh> then that's a failure of coding
<tilqi> all the portals in the world
<tilqi> and nba.com uefa.com etc etc
<tilqi> all use flash %90
<yabba_hh> the fact that they use all this stuff doesn't make it right, it's crap coding and excludes a large percentage of web users
<tilqi> there are countries below %90-99 literacy percantage still
<tilqi> and i am not talking about African countries
<yabba_hh> pretty sure that UK is below 90% literacy
<yabba_hh> and that's without taking into account blind people and dyslexics

There must be Dyslexic sites surely?

That sparked off a google search, where I found this site beingdyslexic.co.uk, not that it was that hard to find, it was the top result in a google search for "dyslexic forum". They have a really cool quote on their home page :

Whoever administers this forum should be shot for stupidity

beingdyslexic.co.uk wrote :

At Being Dyslexic with have a strong sense of community built upon the ethos that dyslexia is a gift.

Becuase dyslexia has a right brain dominance, this allows you to see every day activities from a slightly different angle. Dyslexics tend to be more creative and inspirational than your average joe.

Our brains are amazing. Try to learn stratagies that help you overcome any day-to-day problems, this will then allow you to explore the world in our unique but amazing way.

Now these people sound like they really know what they're talking about huh? Sooooo you'd expect that their forums, out of all of the forums in the world would be as dyslexic friendly as possible right? Well they pretty much are, low on images, high on text content and lots of other dyslexic members that are eager to help and share, assuming they can register of course. If you click that link and then agree to their terms and conditions and proceed to the next page, guess what you get to see? That's right a bloody CAPTCHA. Misunderstanding your target audience when you run most sites is bad enough, but whoever made the decision to implement a captcha on a dyslexics site should be put against a wall and shot for total stupidity

If you use captchas on your own site, whether they're targeted at visually impaired people or not, then I'd advise you put them in the bin where they belong, not only are they a complete waste of time they lock a lot of the web away from people who do not have the ability to complete them ... ohhh, and before anybody mutters anything about audio captchas, don't, there should be no hoops for humans to jump through just to be able to use the web, period.

¥

Extend your users profiles

This plugin adds a shiny new tab to your users profiles tab in admin and allows your users to have such delights as avatars, signatures, location. It also adds the ability for each user to enter their time offset from the server and set the date and time formats that they prefer to use, although that bit means you need to do a tad of skin work These extra profile fields, and settings, can then be used to enhance your current skin and there's also the ability to display each/any users profile instead of that ugly "edit profile" page that you get in the stock evo skins. There's a setting to allow you to restrict the viewing of profiles to logged in members so that the spamming arses don't get access to any details like aim/msn/etc

You control what can or can't be done

Admin settings

Allow Avatars

This one's pretty self explanatory, untick it and the ability to use avatars is removed

Guest Avatar

This needs to be the full url to an image to use for guests ( note : this one is not auto-resized, so make sure you upload an appropriate sized image ). Leave this blank to disable guest avatars

Guests

This setting allows you to control if guests can view members profiles, it defaults to "no". Note : this only works if you have an appropriate _profile.disp.php, a sample one is included in teh download. If you don't have an appropriate one then the normal evo action of showing the "edit profile" is shown, which bars guests anyway

Allow Signature

This is another self-explanatory one, untick it and signatures are disabled Note : Signatures will be stripped of any html

Renderers

This is a list of plugin codes that you want to be used to render the signatures, one per line. The default is to use the smilies, bbcode, code highlighter and auto-p plugins, but you can add any that you like. Note : The bbcode plugin will use the post replacements not the comments, this is to enable you to allow urls and images and stuff without getting bitch slapped in your comments by spammers

Timezone

This is the default offset ( in minutes ) from the servers current time, which is handily displayed in the notes field

Time format

This is the default time format to use, meander over top php.net for the various settings you can use

Date format

Uncannily this is the default date format to use, and once again you should hit the php.net link for available settings

Ohhh look, a shiny new tab to play with!

New Profile settings and how to use them in your skin

There's actually a couple of ways that you can call up the new settings in your skin. The individual methods are listed below. I'll ( try and ) explain the second method after them all

Avatar

If enabled this will allow the users to select an avatar. They need to upload a file called avatar.jpg or avatar.gif or avatar.png or all 3 if they like to their user directory. The avatar will automatically be resized to 80px x 80px or summat. The user can choose any of the three images to use

Skin call ( default parameters shown ):

PHP:

	<?php
	$Plugins->trigger_event( 'UserAvatar', array(
	'display' => true, // echo the results
	'block_start' => '<div class="userAvatar">', // html used before the <img> tag
	'block_end' => '</div>', // html used after the <img> tag
	);
	?>

Signature

If enabled this allows users to slap in the signature of their choice. This will be rendered with the plugins that you slapped in the admin setting after any html has been stripped

Skin call ( default parameters shown ):

PHP:

	<?php
	$Plugins->trigger_event( 'UserSignature', array(
	'display' => true, // echo the results
	'block_start' => '<div class="userSignature">', // html used before the signature
	'block_end' => '</div>', // html used after the signature
	);
	?>

Location

This allows users to type in a witty location like at my bloody keyboard huh?. This is text only, any html will be stripped

Skin call ( default parameters shown ):

PHP:

	<?php
	$Plugins->trigger_event( 'UserSignature', array(
	'display' => true, // echo the results
	'block_start' => '<div class="userLocation">', // html used before the location
	'block_end' => '</div>', // html used after the location
	);
	?>

Timezone, Time format, Date format

This is exactly the same as the admin version and allows the user to see all dates and times in the format of their choice and in their local time. This one is a tad more complicated in your skin

Skin call ( default parameters shown ):

PHP:

	<?php
	$Plugins->trigger_event( 'UserSignature', array(
	'block_start' => '<p class="userDateTime">',
	'block_end' => '</p>',
	'display' => true,
	'output_format' => '$date$ @ $time$', // $date$ && $time$ will be replaced with users preferred format for date and time
	);
	?>

You also need to pass the date-time that you wish to convert.

PHP:

	// for $Item use :
	'localdatetime' => $Item->get( 'datecreated' );
	// for comments use
	'localdatetime' => $Comment->get( 'date' );

An alternative method

An alternative method is to use the skintag call and pass it multiple parameters at the same time. It looks a tad more complicated but it really isn't that bad Rather than repeat what's in the plugin code I'll just copy + paste it here and then try and explain it

PHP:

Looks simple huh ? The main value is the output format, this is where you get to choose what's spat out and in which order. Continuing in my copy + paste fashion this is how it's called for the comments on my blog :

PHP:

and finally, displaying profiles

Displaying profiles is pretty similar to the code I pasted above. The main difference is that you want all fields and you pass on an extra parameter to tell the plugin that it's displaying the profile as opposed to just showing the users fancy new settings. When you do that the plugin will automatically trigger any other plugins that have the right hooks Rather than re-pasting the sample profile pages code ( which is included in the zip ), you can see it here ( Sample _profile.disp.php ). You can just drop that page into your skins folder and it'll work

Did I mention hooks for other plugins?

To enable other plugin developers to add their own profiles stuff this plugin adds a few new hooks. To use them you need to inform the core that you can react to them with the following :

PHP:

The events should be pretty self explanatory and are passed the following parameters :

PHP:

PHP:

PHP:

So, now that you've read all that, go download the plugin ( am_profiles.zip ) and enjoy your shiny new tab

¥

It's like a forum, but it's a blog

Finally, I've mostly integrated the old blogrum code with InnerVisions .... I've even started a tutorial on how to add a blogrum to your own b₂evolution blog .... don't get excited though, it's nowhere near finished and I'm not in any great rush . There's still a fair amount of work to do with it before it's anywhere near the end result I have in mind, and the skins a tad shagged in IE6, but I'll be re-skinning it as soon as I've got all the code working and testing, so either put up with it or switch to a browser that it does work in

I've decided that I can't be arsed importing all the current blogrums posts/comments/users, it's more hassle than it's worth so I'll just leave the current version where it is and shut down the ability to post/comment there. I also haven't redone the ability to create a new post from the frontend, I'll work on that when I get more free time. For the moment it's only linked in my drop down menus as I'd need to redo the header graphic to add it to the menu buttons, and I'm liable to go for a whole new skin if I have to go to that effort anyway

Anyway, feel free to have a play, and let me know if you find any bugs/quirks

¥

External links are a pane

I decided to have a play around with my skins external links code, which uses javascript to add an onclick event to any links with class="ext", and a plugin I've had lying around for a fair smidge which does something similar for all/any external links by looking at the href for the link in question. The end result is a shiny new plugin which will add a graphic to every external link on your blog, clicking the graphic opens the link in a fancy little overlay which I stole from our photozoom plugin. I also threw in a few settings so that you can change the text that's added and add any domains that you class as internal links, although the plugin will auto generate an entry for each unique blog url on your system so you probably won't need to add any.

If you fancy having a play with this then you'll need to download 2 plugins as I've decided to separate the fancy javascript screen stuff into it's own plugin as I'm starting to use it in a couple of plugins and it's easier to have a dependency and maintain one codebase. You can download the external links plugin here ( am_externallinks.zip ) and the javascript helper plugin which it needs here ( am_jshelper.zip ), upload them both, install the js helper plugin and then install the external links plugin. That's pretty much it, now all your external links will have a crap looking arrow graphic which, when clicked, will open your link in a cool overlay. Your links will also have the class amExternalLink added to them so that you can style them as you wish. The arrow <img> tag will also have the same classname applied so you can change the graphic to suit your skin.

As always if you find any bugs or it melts your blog then just let me know

¥

Does your admin look bloated?

A totally minimalistic admin area

NOTE : The chances are that none of this works in IE, so if you use IE you may as well skip the rest of this post ..... or read it and then go get a better browser ... whichever rocks your boat

So, I was playing around with the admin area to see what could be done using js, as it's required for the admin area to function anyway, and css. The main idea was to hide all of the clutter that's not used for the majority of posts, or only used briefly during the whole posting process, whilst also leaving it accessible for the moments that you do need it. When I say "clutter" I pretty much mean everything except the textarea that you type in and the post title. Toolbars - gone, advanced properties - gone, categories - gone, post status - gone, you get the picture

Hovering over the toolbars makes them visible. You can also pin them open by clicking

All of this is done from a plugin which hooks into a couple of the admin events and then unleashes a bit of javascript to play around with classnames and id's and onclick events and stuff. The rest is handled by a simple bit of css ...... so simple in fact that IE can't understand it ...... nothing new there then huh? ..... anyway, the end result is that pretty much everything in admin is collapsed or hidden until you hover over or click stuff. The toolbars will show on hover, or you can click the text to pin them open if you're going to be using them a lot for a particular post.

The whole of the right column is hidden until you need it, which allows for a much bigger posting screen

The whole of the right column is reduced to a lil tab handily marked "OPTIONS". Hovering over the tab brings the right column back so you can play with your categories, visibility and renderers and things. This allows the post textarea et el to be expanded to fill the width of the screen which, for me, makes posting far far easier ...... combine that with Afwas's plugin ( [2.4] Resize Admin Textarea plugin ) and you can pretty much fill your screen with just the post area ...... cool huh?

Finally a thanks to John for his constructive criticism and suggestions about the plugin ..... and for allowing me to scare the shit out of him when most of his admin area disappeared ..... I suppose I should have warned him first

Don't worry, it's all still there

Anyway, if you fancy having a play with this plugin, and you're using a decent browser, then you can download it here ( am_tidyadmin.zip ). If you find any bugs or flaws or stuff ( apart from "it doesn't work in IE", and variations of the same tune ) then just let me know.

¥

Auto-complete your tags

I decided to have another play with tags as I tend to use them quite a bit on my posts and I'm always forgetting which ones I've used before and which ones I haven't. So I threw together a plugin that will auto-suggest tags based on ones that you've used in the past. It'll also show you a list of all other similar tags in case you have more than one tag with the same starting letter(s) although they're not clickable at the moment because I haven't got that far.

Installation is pretty simple, just download the zip ( AM AutoTags ), upload it, install it, then meander into the plugin settings and set the tag separator for whatever your version uses. That's it. Now when you enter tags you it should try and auto complete them for you and show you a list of other tags.

NOTE : I've only tested this in FireFox as my IE is having a crisis of confidence when it comes to running javascript, so if you use IE and it doesn't work then tough shit. Also, this is a pre-release version so it's bound to have a few quirks, if you find any then just let me know and I'll see what I can do to eradicate them.

¥

*edit* 24^th April
I think I've finally managed to convince IE that it can actually understand javascript so this should now work in IE as well, zip file updated