sheng/Introduction to wiki

From CDS 130

Jump to: navigation, search

Introduction to MediaWiki

Contents

  1. Objective
  2. Motivation
  3. The Web
  4. How a Web Page Works
  5. Explore HTML
  6. wiki
    1. Pre-questions
    2. Introduction
    3. Why Wiki?
  7. Hands-on Session on [MediaWiki]
    1. Creating an Account
    2. Editing your page
    3. Uploading an image
    4. Viewing Changes
  8. Questions
    1. Create an Account
    2. Upload an Image
    3. Write Some Text

1. Objective

  • Understand how a web page works
  • Understand HTML
  • Introduce the concept of a wiki
  • Introduce a popular wiki platformk Image:poweredby_mediawiki_88x31.png

2. Motivation

One of the requirements for a course that satisfies the COS IT requirement is:

Students will demonstrate the ability to communicate, create, and collaborate effectively using state-of-the-art information technologies in multiple modalities.

  • In summary, there is a right tool for each problem. Email + Document attachments cannot solve all problems.
  • Said another way, there are many modalities for communicating, creating, and collaborating beyond Email + Document attachments.
  • Don't ask me to work on a report or document that is emailed as an attachment back and forth.

3. The Web

4. How a Web Page Works

  • The Web is known as a client-server system
    • Your web browser software is the client;
    • The remote computer which stores the data is the server.
If you are looking at cds130.org, the server is located in the space weather lab, Planetary Hall.
If you are looking at google.com, Google has dozens of data centers [1] at various locations in the US.
  • The glue that holds the Web together is called hypertext and hyperlinks.
    • Electronic files on the Web to be linked
    • You navigate through pages of information, commonly known as browsing or surfing the Net.
  • Web browsers - Software you need to access the Web
    • Question: what kind of web browsers are you familiar with?
    • Web pages are written in a computer language called HTML, which stands for Hypertext Markup Language.

5. Explore HTML

  • HTML is the language of the World Wide Web.

How HTML works

  • It helps to know some HTML even when using WYSIWYG (that's What You See Is What You Get) editors.

WYSIWYG HTML editor

6. wiki

6.1. Pre-questions

  • Have you used a wiki before?
  • Have you ever edited a wiki before?

6.2. Introduction

  • Live edit demo
  • "A wiki is a website that allows the creation and editing of any number of interlinked web pages via a web browser using a simplified markup language or a WYSIWYG text editor." [2]
  • MediaWiki is one of many Wiki programs (it is the one used by Wikipedia)
  • A Wiki is a program that saves you from a number of hassles when creating a web page
  • Modifying a web page usually involves
    1. Download a file from a (password protected) web server
    2. Edit HTML or create an HTML page using a program
    3. Upload the file to a (password protected) web server
    4. Repeat this process every time you create a page or modify a page
  • Modifying a page on a wiki involves
    1. Click edit
    2. Change text
    3. Click save
  • Creating a page on a wiki involves
    1. Edit a page and enter a reference to a page (you won't need to do this in this class)
    2. Type in text using Wiki mark-up syntax
    3. Click Save

6.3. Why Wiki?

Why use a Wiki for collaboration?

  • Ease of collaboration
    • Anyone can edit a page
    • It is easy to see how pages were changed over time use the "history" link on the top of the page (compare this to with MS Word's track changes for non-trivial-sized changes)
  • Ease of creation
    • On many Wikis, anyone may make an edit

Why would you want to use a Wiki versus

  • Google Docs,
  • Microsoft Word, or
  • Notepad?

When would you not want to use a Wiki?

  • When privacy is important
  • When only one user is creating a simple page

7. Hands-on Session on [MediaWiki]

7.1. Creating an Account

  • In future homeworks and projects you will be required to post information on this wiki. To prepare, please create an account by clicking on the Log in/create account link in upper-right-hand-side of the page and then follow the instructions.
  • Make sure that it says http://cds130.org/ in the browser's address bar. If it is http://en.wikipedia.org/, you will be creating an account on their wiki and not this course's wiki.
  • For privacy reasons, you are not required to have a username that has any part of your real name in it! (Choose something that will be unique and easy to remember and type.) You do not need to enter an email address either.

7.2. Editing your page

  • Click on the red link on the top of the page that has your username
  • Click edit
  • Type stuff in the edit box
  • Click save

7.3. Uploading an image

  • Click on the red link on the top of the page that has your username. (The red link may now be blue if you have already edited the page.)
  • Click edit.
  • Type
    [[Image:UserName-ImageDescription.jpg|thumb|485px]]
    , Image:what image.jpg
  • where UserName is the name you use to log in (e.g., Sheng), and ImageDescription is a word or two that describes the image (e.g., DogsSleeping). The |thumb|485px will make the image shown in the page 485 pixels wide instead of the full size of the original image.
  • Click save.
  • Click the red link (why is it red?) that says
    Image:UserName-ImageDescription.jpg
  • Upload an image
  • Click on the link on the top of the page that has your username. You should see your image now.

7.4. Viewing Changes

  • Click the history link on the top of the page.

8. Questions

8.1. Create an Account

Create an account. If you choose to use a username that is different from your Mason username (the name in your email address). Zero points if the username is "inappropriate".

8.2. Upload an Image

Upload a screenshot to your page. Zero points if the image is NSFW (not safe for work). See User:Sheng for an example.

8.3. Write Some Text

  • MediaWiki uses a simple mark-up language for text. [3]
  • Unlike a word processor where you use a GUI, you do formatting using text (similar to HTML, but simpler).
  • For example, to make a word bold, you type this sentence fragment will be bold.
  • You can still use HTML notation, for example this sentence fragment is also bold.
  • In contrast, in a word processor you would highlight the text and click the bold button.
  • To figure out how to do something, I usually look at a page with an example of what I want to do and click "View Source" or "Edit".
Personal tools