Wiki Website Workshop

What is this about?

We want to use the mediaWiki api to turn a wiki page into a website.

How are we going to do it?

1. basics of styling any wiki page using inline css
2. getting to know API
3. Set up and Boilerplate

Style your Wiki page

Styling the wiki with CSS is a bit quirky because we are writing a mix of Wiki Markup (also called 'Wiki text') and inline-CSS.

source editing

to style your wiki page, open it with the source editor

this is also a great way to find out how other people applied styles to their wiki pages (just be careful to not make any changes if you inspect other Users pages)

Inline CSS?

we use CSS (Cascading Style Sheets) to apply styling to a websites content (HTML).

CSS can be connected to HTML in 3 different ways:

1. Inline (styles defined directly in an html element <h1 style="color: blue;">)

2. Internal (styles defined in your html document head, <style>)

3. External (link to an external stylesheet in the head of an HTML document <link rel="stylesheet" href="style.css">)

tips and tricks:

most things that you want to style, you can just wrap in a <div></div> HTML element and then apply some styling to the element itself. This will style whatever is contained inside it.

Some elements need a little extra care, such as headlines. The above mentioned <div></div> will not work. Instead they want to be wrapped in a <span> like this:
==<span style="color:red;">Style your Wiki page</span>== You can see that I used the Wiki Markup syntax to define a header (==) and added some inline styling to the span element.

feel free to add your tricks here to the list! ...

example pages

Background with Gradient: User:Aksellr

styled Table of Content: User:Martina

Layout adjustments and colorful headers: User:FLEM/Graduationprojectproposaldraft

feel free to add your examples here to the list! ...

What is an API?

Application Programming Interface

The media wiki API

The media wiki API allows you to do many different things, such as requesting specific information from a wiki page (which is what we will do today), editing a wiki page or managing wiki users.
The media wiki API is a Web API. There are other API types that focus on e.g. Databases or Operating Systems. Today we will focus on web API. Web API use Hyper Text Transfer Protocol. HTTP works with a request and response logic. In Terms of Web API this means, we send a request for information to a specified address and will receive a formatted response (usually JSON or XML) containing the information.

Request

a request is sent to a specific address: https://pzwiki.wdka.nl/mw-mediadesign/api.php?action=parse&page=Wiki_Website_Workshop&format=json&origin=* follows a specific structure:
|________________URL ENDPOINT________________?____ACTION__|_________PAGE TITLE________|___FORMAT__|_HEADER_|
In the URL we use / to separate strings and in the query we use & to delimit parameters
|________________URL ENDPOINT________________?________________QUERY STRING PARAMETERS______________________|

There are a bunch of different query string parameters that you can set, depending on what action you wan to perform.
To get basic page info you can use action=query demonstrated here: http://pzwiki.wdka.nl/mw-mediadesign/api.php?format=json&action=query&titles=Main_Page&prop=info
To output a wiki page in plain HTML you can use action=render like it is done here: http://pzwiki.wdka.nl/mw-mediadesign/index.php?title=Wiki_publishing&action=render

Resources

Wiki publishing#API Here you can find the full documentation of the media wiki API. I find it a bit dense and not very easy to follow, but if you have some experience using API already this is a good resource.