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.
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!
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.