Have You WikiED Yet?

-- How to design the Wiki page

Why Wiki?• ‘Wikis are one of many Web 2.0 components that can be used to enhance the learning process. A wiki is a web communication and collaboration tool that can be used to engage students in learning with others within a collaborative environment’ (Kevin 2007).• ‘A Wiki website is a hypertext on

steroids. Any user can create or edit any page on the site using a simple web browser, and all information processing is done on the server side’ (Lars 2002). Wiki sites are powerful tools for collaboration in closed work groups and fit in instructional design models such as the OAR model.

• The OAR model is an Instructional Design model created for a specific context: distance education courses delivered through a LMS (Learning Management System) in higher education.

Installation

Windows 2003 Sever

+

+ MediaWiki – Current Version

+

Minimum Requirements

After installation, it should look like …

You can modify the wiki by going to ‘my preference’ tab …

You can set up the basic wiki rules by

editing under different tabs

Let’s get started!

Step 1. New Page

Search for the page, clicking a red link will take you to the edit

page for the new article.

Step 2. EditingSimply type your text, click save

and the new page will be created. You can also use the tool bar in edit page to create

file links, image links and header etc..

Step 3. Link to a page

Typically, a word or phrase placed in [[double brackets]] is made into a link to a wiki page having that title. Or use hyperlink [http://url/

ARTICLE].

Step 4. Page links

Creating wiki page links is also the method to create

new pages. See the presentation of above script.

Step 5. Upload imagesUpload file link from left toolbox panel takes you to

the page to browse the image and upload file. Name the same file type otherwise it will not work. Now the 6.[[File:Example0.jp]] in Step 4 become an

image on the right presentation page.

With images, text and links, there are some design rules

you can follow …

“When learners are presented with visuals, there is an unconscious effort to simplify what is perceived into what the viewer can understand” (Fisher et al. 1998–99).

The simplification works well if the graphical message is already uncluttered, but if the graphics are complex and ambiguous the simplification process may lead to unintended conclusions. See the examples on the left.

Law of Simplicity

Clear

Confusing

Law of Unity/Harmony

According to Lauer (1979) “Unity implies that a congruity or arrangement exists among the elements in a design; they look as through they belong together, as though there is some visual connection beyond mere chance that has caused them to come together.”An image map in wiki is a list of coordinates in a specific image, which hyperlinks areas of the image to multiple destinations . It is the image centrelink to present law of unity. Clicking on a person in the right picture causes the browser to load the appropriate article.

Step 6. Upload Files

Same as uploading images, upload file link under toolbox takes you to the page to upload files, make the file type name the same, otherwise you will see the error message as in the left presentation page.

Step 7. Link to a file

[[double brackets]] is made into a link to the uploaded file or you can display the file

embedded by <embed_document>images/file</embed_do

cument>.

Step 8. File links

The above script will show the link for double brackets

file link and show the embedded pdf file directly

in the page.

Now you are ready to design a Wiki page Most examples I used in this presentation are from my

personal Wiki I developed for this project. But the principles are the same for open Wikipedia websites like http://wikipedia.org/

What’s Next? …

Future Viki

Viswiki.com

Visibility / Good Conceptual Model / Good Mappings / Feedback

Good design contains . . .

Future Wiki? I am not sure, but I do agree that context will become increasingly an important theme. From above http://www.viswiki.com/en/ you can observe all the good design elements … but we can go further…

A Viki in its most basic incarnation is a visual wiki. Instead of creating pages of words that are hyper linked together, the users create pages of images that are hyperlinked together. Think of it as the ultimate sticker book mash up.

Future is a Viki?

Future Wiki will be all Graphic …

Tao Chen el at. Present a Sketch2Photo: Internet Image Montage system that composes a realistic picture from a simple freehand sketch annotated with text labels. The system is able to automatically select suitable photographs online to generate a high quality composition, using a filtering scheme to exclude undesirable images. Each blending result is given a numeric score, allowing us to find an optimal combination of discovered images.

Combined with Viki techniques, the Future Wiki will look all Graphic … are you ready yet?System Pipeline :

Images:• http://www.mediawiki.org/

• http://www.muhrfoto.se/

• http://www.spencermurphy.co.uk/flash.htm

• http://www.viswiki.com/en

• http://www.wickedthemusical.com.au/

• http://wikipedia.org/

• http://illusion.scene360.com

• http://lostgarden.com/2006/05/viki-visual-wiki-design.html

References:• Chang, Dooley & Tuovinen Gestalt Theory in Visual Screen Design – A New Look at an OldSubject. Retrieved 2009, from http://www.acs.org.au/documents/public/crpit/CRPITV8Chang.pdf• Donald Norman The Design of Everyday Things. Retrieved 2002, from

http://en.wikipedia.org/wiki/Seven_stages_of_action• FULTZ, J. (1999): Theory of Gestalt Psychology. http://users.anderson.edu/~jfultz/gestalt.html

(Accessed 21/10/2000).• Kevin R. Parker, Joseph T. Chao. Wiki as a Teaching Tool,Interdisciplinary Journal of Knowledge

and Learning Objects Volume 3, 2007. Retrieved 2009, from http://ijklo.org/Volume3/IJKLOv3p057-072Parker284.pdf

• LAUER, D. (1979): Design Basics. New York, Holt, Reinhart and Winston.• Lars Aronsson. Operation of a Large Scale, General Purpose Wiki Website. As presented on

November 7, 2002, at the ELPUB 2002 conference in Karlovy Vary. Retrieved 2009, from http://aronsson.se/wikipaper.html

• Tao Chen, Ming-Ming Cheng, Ping Tan Sketch2Photo: Internet Image Montage. Retrieved 2009, from http://cg.cs.tsinghua.edu.cn/montage/main.htm

• http://lostgarden.com/2006/05/viki-visual-wiki-design.html

• http://en.wikipedia.org/wiki/OAR_model