start > 2007-01-30 > 1

SnipSnap Developing: Improving User Experience

Created by pabrantes. Last edited by pabrantes, one year and 297 days ago. Viewed 1,215 times. #3

[diff] [history] [edit] [rdf]

labels

attachments

SnipSnap Developing: Improving User Experience

Lately I've been trying to improve the user experience within my blog and as a result two main changes have been implemented.
One of the improvements - and you probably already noticed - is the use of

snap which shows a nice website previews on outgoing links. The other one is a new macro that I called collapsingBlock, and you can see it in action on the Fellow Bloggers link on the navigation bar.

The idea of these post is to introduce both of these changes and show how to implement them on your a snipsnap based website.

Snap Everywhere

Snap is a new search engine which has a great eye candy feature, page preview! Mainly Snap team keeps up to date screenshots of pages and show them as previews. But it gets even better because they also allow anyone to use their preview thumbnails on their sites.

Subscribing snap's services is free and can be done in the Snap Everywhere page. They'll then provide a javascript. Integrating Snap Everywhere with SnipSnap is simple as editing main.jsp file - to know where this file is please read SnipSnap SEO Hacking: Post title optimization where is explained how to edit it - and insert the script.

Note to self: do simple snipsnap re-write that allows anyone to use snap everywhere by just defining the snap ID in the config snip

Collapsing Block Macro

The collapsing block Macro is a Javascript based macro that hides and shows a certain block of text. If the browser doesn't support javascript then it will show everything and the link to collapse/uncollapse will won't be displayed.
(A simple test can be performed by disabling the javascript and reloading this page.)

The idea of this macro is to hide long list of links or hide something like a code block which should only be visible if the reader really wants to.

Example1:

show list

item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item

Example2:

show code

public class MyClass {

}

How to install the collapsing block Macro:

First download the jar file and install it as a regular macro;
Create a snip with no parent called scripts;
Attach show.js to the scripts snip.

The use of a predefined snip name is a discussable convention and I'm interested in discuss new suggestions. My idea was simple, create a snip in SnipSnap that will hold all the javascripts it might use.

Syntax:

{collapsingBlock:title=title is required|visible=false}
text that will be collapsing
{collapsingBlock}

Parameter	Description
title	Will be where the link will be put, if javascript isn't enabled then it won't be a link. Is the only required field.
visible	indicates if when the page loads the block will be visible or not, defaults to true.

Conclusions

I know such measures aren't the only ones that can be made for a better user experience while using the snipsnap bliki software, although they are a start. Another goal of this post is to generate some discussing of what can be done in the future.

jpmsi, one year and 292 days ago.

Parece-me que esse artigo teve inspirações :P Vou queixar-me ao J. Alfaiate! Porque é que decidiste revisitar estas relíquias dos tempos dos TFCs? lol

pabrantes, one year and 291 days ago.

Sim inspirado sim, mas não igual :P Há diferenças, vocês usavam classes eu aqui tenho um style e uso IDs dinâmicos. Oh well, vai dar tudo ao mesmo. Quanto ao código em js que fizeste, digo-te já que não é reliquia, eu uso-o bastante para tudo o que é Renderer com postback para termos butões de submit quando não há js.

Please login to www.pabrantes.net.