SCRIPTING:

Taylor
THE UNIVERSAL JAVASCRIPT CARD DECK TOOLKIT
A very powerful tool.
You can create sets of digital cards, custom their width and height, arrange all their visual properties, smoothly drag them around with your mouse, type inside them either in plain text or in a produced textarea what that card is meant to represent.

In this fashion you can build whole complex branched diagrams of cards with quick notes onto them representing the structure of a project of yours while it grows. You can move, switch, flip your cards.
Eventually, you can save the status you like and restore it whenever you like with 2 clicks of your mouse!
August 2004
{ @ }

The model above is Taylor
VISIT MRS. TAYLOR WEBSITE


WHAT THIS FILE IS FOR
The idea after which this file has been devised and why it can be so useful

The idea about this file came reading two things; the Card Sorting Jakob Nielsen's Alertbox, and an analogous although not identical suggestion made by Christina Wodtke in her book (which by the way is not a book on web programming but a book on guidelines about web design) titled Information Architecture.

The implication is that careful planning always comes first when you're for instance at projecting a website and you have to work out how a complex structure of pages should work together (imagine a new user registration process and all the redirections it may imply in case an user is already registered, or is registered but the password doesn't match, or is brand new, or his/her subscription is about to expire, or... a visual scheme of what's going on would come in handy, especially if you can at any moment insert or delete items without having to rewrite the whole page).
To work out these complex procedural plans you'd make drawings (what Wodtke calls blueprints), diagrams, or, how it is suggested by both the previously mentioned authors, write on a set of cards the names of the items you must arrange and then see what schemes seem to work better by rearranging the cards.
As a web scripter I can assure you this is useful! Planning comes first, and diagrams soon become necessary. And with cards you can make also diagrams.

From Jacob Nielsen's website:

Jacob Nielsen's card sort example  pic
«Card sorting was done by giving users a bunch of index cards with concepts from the server written on them. The users were then asked to sort the cards into piles such that cards representing similar concepts were in the same pile. The users were also allowed to group piles to indicate looser levels of similarity, and we finally asked the users to name their piles. These names provided us with additional insights into the users' mental model of the information space and served as inspiration for the names we finally chose.

See also my article about how we designed Sun's intranet, SunWeb in 1994 for another example of card sorting and a photo of a variant of the method, where users are asked to sort cards onto existing categories. (Often called closed card sorting to differentiate it from the more common open sorting where users build their own categories without any constraints.) »
[Jacob Nielsen]
Manet, horse races
Manet, At the races, 1875

Another example where a card deck approach would reveal itself useful is if you consider those PHP books describing how a process gets distributed throughout many different files: those books provide you with the eventual scheme, the whole tree of files and their connections and what each of them does and how each of them inserts itself within the global goal.
Yet, this eventual scheme went through assembling stages before being presented to you in its final shape. Such stages, are exactly one of those planning moments where a card deck approach reveals its extreme utility: you first draw your alternative schemes with the cards, when you reach a scheme that is satisfying for you or for your collaborators, you implement that last one. All these stages are conveniently subsumed in card decks arrangements, each card carrying a brief note about the file name and what that file would be designed to do.

An instance (out of many) of such web application schemes can be drawn from Welling and Thomson Php and MySql Web Development, second edition:
  • create_database.sql
  • include_fns.php
  • db_fns.php
  • select_fns.php
  • user_auth.php
  • header.php
  • footer.php
  • logo.gif
  • headlines.php
  • main_page.php
  • resize_image.php
  • search_form.php
  • search.php
  • login.php
  • logout.php
  • stories.php
  • story.php
  • submit_story.php
  • delete_story.php
  • keywords.php
  • keyword_add.php
  • keyword_delete.php
  • publish.php
  • unpublish.php
  • ... ... ...
Wouldn't such a list be represented in a much more intuitive way with a set of cards and of diagrams made of cards that show the logical groupings among such files and their connections and rationale in a much more evident way than such mere list would?
And wouldn't card be so practical in case you want to slide one out of a group and see how it would fit in another different logical arrangement?

If you have understood this all, you're ready to use card decks, and this file will provide you with such an utility in a digital version with the enormous advantage that once produced a card deck arrangement you want to work on a few days later, you can save its settings with two clicks, turn off your computer, and restore them with two clicks!


HOW THIS TOOLKIT WORKS
Instructions about what you can do and how to do it

The toolkit is divided into four main sections. All these sections are designed to work with generation 5 browsers, like Explorer 5 and above and Netscape 5 and above.
The order in which these sections are featured, does not reflect an optimal presentation under a logical point of view, but it has been chosen so to accommodate in the best way not the logical process but the practical usage of this toolkit.

Scrolling towards the bottom you will find the following sections:
  • RESTORE OLD SETTINGS SECTION: listed first so that it gets out of your way immediately if you don't need it.
    It simply features a textarea where you can paste the code of a previous card deck arrangement. Such codes are produced on demand in the appropriate sections described further on.

    If you paste in this section a valid code of one session (that is, a code as it gets produced by this toolkit, without editing it!) and then click the button Restore Settings, the corresponding card deck arrangement will be reproduced in its tiniest details, cards, texts on them, positions, overlappings, etc...
  • CARDS MANAGEMENT TOOLS: here you can do the following:
    • Read or set the style property of each card (text colour, size, background colour, width and height of the card, etc... the defaults are black fonts and white background, 150x150).
      Users who are slightly knowledgeable about Css may find interesting the faculty to adjust the overflow property of each card.

      To affect a card, click on the card, then go to the setting property section! That simple!
    • You can type within every card!
      You do that by simply clicking on a produced card and then start typing. The text will be written within it.
      Due anyway to shortcomings that do not depend on me but on different keyboards codes accordingly to your country, all the alphabetical letters will be included but punctuations may result in different chars being printed down, depending, as said, on the local settings of your computer.
      Also, Netscape 5 for unknown reasons scrolls the page rather than inserting a white space when hitting the space bar (though I have set a return false statement for this keyboard input) - Explorer doesn't do that.

      If you find this annoying or critical, you can in this section click on a card and then click the button add textarea: this would include in your card a textarea, of your chosen amount of columns and rows, where you can write whatever you want without those limitations!
      Textareas can be appended (that is, without deleting what you may have previously typed inside the card - which is the default behaviour) or replace whatever was in the card with a brand new textarea.
    • You can clear the contents of a card with a button (yet this would delete also textareas!), or trash the card with another button (would make the card invisible, and invisible cards no longer get reported in the eventual saving settings code).
    • If you are restoring your settings in a different browser than the one your produced them with, you may see the two browsers handle distances differently. Thus you have an utility that can move in your chosen direction, by the chosen pixel amount, all the cards at once.
  • PLAYGROUND: featuring first a button to shuffle (randomly reposition) all the generated cards on the playground and then a button named GET NEW CARD, this is the space where your cards appear. All cards can be dragged with your mouse!
    Such space can be enlarged or shrunk at will, both in height and width again at will, at the following section commands.
  • SAVE CODES and RESIZE PLAYGROUND: this features a button that produces the code corresponding to the current cards settings and playground dimensions. The code gets showed in a textarea. You must copy such code and paste it in a text file of your own which you save and store somewhere; when you want to restore this session, you open that file, copy that code and paste it in the section meant to restore a setting.

    At the bottom of the page you will also find a practical set to enlarge or shrink the playground area for your cards.
THE UNIVERSAL JAVASCRIPT
CARD DECK DIAGRAMS TOOLKIT
A Camille Pissarro painting
A Camille Pissarro painting, View from the Artist's Window at Eragny, 1886
RESTORE OLD SETTINGS?
Paste a valid code of old settings you saved previously, then click RESTORE:


CARDS MANAGEMENT TOOLS
Last/Currently engaged card is:
Read/Set currently engaged card style properties:
Choose a property to view:

Read/Set its value





[apply that style to all cards? » ]
Manage Card Contents:
Replace currently engaged card content with a TEXTAREA of
columns and rows:


Append rather than replace:
or clear its contents:



Or make the card disappear (deletion!):
Move all the cards at once:
Make all cards move by pixels


-»»»«««-

CARDS PLAYGROUND
SAVE CURRENT SETTINGS?
Get the code of the current settings:

STRETCH OR SHRINK PLAYGROUND HEIGHT/WIDTH
HEIGHT
WIDTH

[current: ]










[current: ]