Difference between revisions of "Meta:Guidelines"

From TSG Doc
Jump to navigation Jump to search
m (E.vandenberge moved page Meta:Sample to Meta:Guidelines without leaving a redirect: Name change to fit purpose)
 
(22 intermediate revisions by the same user not shown)
Line 7: Line 7:
  
 
Always try to group and categorize your information in a logical and user-friendly way. Prevent redundancies: only create subcategories if there are more of them at the same level (levels are indicated by number of = signs before and after the header), otherwise just collapse to the parent.
 
Always try to group and categorize your information in a logical and user-friendly way. Prevent redundancies: only create subcategories if there are more of them at the same level (levels are indicated by number of = signs before and after the header), otherwise just collapse to the parent.
 
Visitors typically use one of two methods to find the information they need: Hunting and Gathering. There is probably a more official set of terms for these methods, but let's role with this analogy for now.
 
 
===Hunting===
 
The "Hunter" will look for specific information on a page based on specific keywords. Make your headers sufficiently descriptive, so the user can jump directly to the required information using the Table Of Contents.
 
 
===Gathering===
 
The "Gatherer" doesn't know exactly what to look for, and will browse the entire page before figuring out what information they need based on the context it is presented in. You can guide these visitors in a helpful way by sorting your content in order of specificity; from general or most used information at the top, to specific or least used information (e.g. software code) at the bottom.
 
 
  
 
You can add many levels of subheaders as you like, but after level 3 they become quite hard to distinguish and will clutter the TOC. If a subject requires many sub-subcategories, consider giving the subcategory its own page. Alternatively, if the sub-subcategories are only small in content, you could make non-TOC headers with simple '''bold text'''.
 
You can add many levels of subheaders as you like, but after level 3 they become quite hard to distinguish and will clutter the TOC. If a subject requires many sub-subcategories, consider giving the subcategory its own page. Alternatively, if the sub-subcategories are only small in content, you could make non-TOC headers with simple '''bold text'''.
  
 
==Images==
 
==Images==
[[File:foto 1small.jpg|thumb|200px|Right-floating image thumbnail with description.]]
+
[[File:placeholder.png|thumb|320px|Right-floating image thumbnail with description.]]
  
To optimize screen space, images should be placed in a floating window, aligned to the right side of the screen. Larger images can be automatically resized to thumbnails, by specifying the thumbnail width. 200px is the preferred thumbnail size. Adding a description underneath the image is appreciated.
+
To optimize screen space, images should be placed in a floating window, aligned to the right side of the screen. Larger images can be automatically resized to thumbnails, by specifying the thumbnail width. 300px is the preferred thumbnail size. Adding a description underneath the image is appreciated.
 
For more image formatting guidelines, visit the [http://www.mediawiki.org/wiki/Help:Images MediaWiki Images Guide].
 
For more image formatting guidelines, visit the [http://www.mediawiki.org/wiki/Help:Images MediaWiki Images Guide].
  
 
'''Inline Images'''
 
'''Inline Images'''
  
Images that are used, for instance, as part of a step-by-step tutorial can be placed inline, with larger size to make them more readable.  
+
Images that are used, for instance, as part of a step-by-step tutorial can be placed inline, with larger size to make them more readable. The exact size is up to you, but the width should not exceed 720px.<ref>Thumbnails 720px wide still fit comfortably within a browser window on half a 1920px desktop monitor.</ref>
[[File:KinectColor.jpg|frame|left|300px|Inline Image]]<br clear=all>
+
[[File:placeholder.png|thumb|none|480px|Caption]]
  
 
You can prevent text that is placed after the image from flowing next to the image by placing an HTML break behind it.
 
You can prevent text that is placed after the image from flowing next to the image by placing an HTML break behind it.
 
  
 
==Tables==
 
==Tables==
Line 64: Line 54:
 
If you want to add code, the syntax might interfere with the Mediawiki syntax. To prevent this from happening, place your code in one of the following preferred ways:
 
If you want to add code, the syntax might interfere with the Mediawiki syntax. To prevent this from happening, place your code in one of the following preferred ways:
  
<tt>Fixed format text for short, single-line code.</tt>
+
<code>Fixed format text for short, single-line code.</code>
  
<pre style="height:15em; overflow:auto;">
+
<syntaxhighlight lang="text">
Long code, spans entire width of the page
+
Long code, spans entire width of the page.
 +
Supports syntax highlighting of certain languages, like Python and HTML.
 +
Change the lang="" attribute to the correct language, e.g. lang="python" or lang="html5"
 +
Use lang="text" for non-supported languages.
 +
</syntaxhighlight>
  
<!-- start slipsum code -->
+
<br/>
  
Well, the way they make shows is, they make one show. That show's called a pilot.
+
<syntaxhighlight lang="text" line style="height:15em; overflow:auto;">
Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
+
You can also add line numbering.
Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.
 
  
Like you, I used to think the world was this great place where everybody lived by the same standards I did,
+
If your code is longer than, say, 50 lines, you can add a style attribute to introduce a scrollbar, as sampled here. For a 50-line cutoff, use style="height:50em; overflow:auto;".
then some kid with a nail showed me I was living in his world, a world where chaos rules not order,  
+
Note that this method will cause the print version of the page to cut off the code at the line limit mark and not print the rest of the code.
a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules,  
+
I might fix that, but if it's really crucial to have an entire page full of code, you should probably give it a separate page.
then you're gonna have to pay the price.
 
  
Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense!
+
<!-- Commence Bacon Ipsum -->
In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero.  
+
Bacon ipsum dolor amet eiusmod in ribeye, flank duis swine drumstick shank kielbasa lorem pariatur shoulder in. Flank capicola dolore, tri-tip boudin fatback turkey.  
And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids.
+
Ut esse in voluptate porchetta duis reprehenderit irure ullamco mollit tri-tip bresaola. Anim beef bresaola meatball t-bone spare ribs consequat ullamco.  
They called me Mr Glass.
+
Shoulder sirloin fatback veniam dolore. Adipisicing sed tempor shank lorem, pariatur tri-tip et pork loin tail chuck meatloaf.
  
</pre>
+
Exercitation beef ribs short loin veniam pig, incididunt spare ribs. In ipsum biltong ex enim, boudin chuck andouille velit duis cow prosciutto elit.
 +
Duis tongue laborum veniam do meatloaf porchetta boudin minim aute in meatball ex turkey occaecat. Dolor kevin officia shoulder corned beef.
  
You could also use the <nowiki><code> and nowiki </nowiki> tags, but they are displayed in different ways depending on the content, so use with care.
+
Pork irure non, et nulla qui prosciutto boudin. Pancetta in turducken magna doner do dolor anim ad meatball prosciutto. Officia excepteur drumstick kielbasa ullamco,
 +
velit qui capicola aliquip. Cillum commodo nulla elit drumstick kevin turducken ut consectetur. Frankfurter in in boudin jerky. Do in anim ut sunt voluptate bresaola sed.
 +
Est leberkas nulla, incididunt biltong bacon boudin rump dolore dolore kielbasa proident kevin aliqua.
 +
</syntaxhighlight>
 +
 
 +
For command-line code, you can also style it like this for clarity:
 +
<code style="background-color:#000; color:#fff; padding:1px 3px;">ping 127.0.0.1 -n 50 -l 1024</code>
 +
 
 +
You could also use the <nowiki><tt> <pre> and nowiki </nowiki> tags if better suited for your needs, whatever works best to present the code as clear and readable as possible.
  
 
==Downloads==
 
==Downloads==
 +
Download links are presented as list items and are '''descriptive'''. This means you don't waste space by pasting the entire url or writing something like "Click [[Meta:Guidelines|here]] to download the documentation". Examples:
 +
*[[:File:riv2 quickstart.pdf|Uploaded file with version control]]
 +
*[[Media:BITSI_tempalte2015_duemilanove.zip|Directly downloadable file]] (zip)
  
Any information that you want to present as a download link should be placed under this header. This includes manuals, drivers, software installs, etc. Sub-categorize where needed. Download links are presented as list items and are '''descriptive'''. This means you don't waste space by pasting the entire url or writing something like "Click [http://tsgdoc.socsci.ru.nl/index.php?title=Sample here] to download the documentation". Examples:
+
==References==
*[[:File:riv2 quickstart.pdf|Uploaded file with version control]]
+
<references />
*[[Media:BITSI_tempalte2015_duemilanove.zip|Directly downloadable file]]
 
Conventionally, download links are found on the bottom of a Wiki page, but considering the frequency at which they are accessed from this particular Wiki, they can be placed earlier as well.
 

Latest revision as of 15:11, 31 March 2017

This is a sample page for the tsgdoc Wiki and can be used as reference for creating new pages. Note that this introduction is conventionally placed above the Table Of Contents (TOC), so visitors can immediately see what this page is about, instead of having to scroll passed the TOC.

For more general wiki conventions and formatting help , visit the MediaWiki Formatting Guide.


Categories

Always try to group and categorize your information in a logical and user-friendly way. Prevent redundancies: only create subcategories if there are more of them at the same level (levels are indicated by number of = signs before and after the header), otherwise just collapse to the parent.

You can add many levels of subheaders as you like, but after level 3 they become quite hard to distinguish and will clutter the TOC. If a subject requires many sub-subcategories, consider giving the subcategory its own page. Alternatively, if the sub-subcategories are only small in content, you could make non-TOC headers with simple bold text.

Images

Right-floating image thumbnail with description.

To optimize screen space, images should be placed in a floating window, aligned to the right side of the screen. Larger images can be automatically resized to thumbnails, by specifying the thumbnail width. 300px is the preferred thumbnail size. Adding a description underneath the image is appreciated. For more image formatting guidelines, visit the MediaWiki Images Guide.

Inline Images

Images that are used, for instance, as part of a step-by-step tutorial can be placed inline, with larger size to make them more readable. The exact size is up to you, but the width should not exceed 720px.[1]

Caption

You can prevent text that is placed after the image from flowing next to the image by placing an HTML break behind it.

Tables

For tables, use the Wikitable markup. It is more readable and easy on the eye than the default one. There are multiple ways to create rows and columns, some used in the example below, but for more information, consult the MediaWiki Table Formatting Guide.

By default, table columns will scale to fit the contents of the cell, but this usually results in a messy-looking table. Set fixed column-widths to keep the table nice and tight.

For binary entries (e.g. Yes/No), a background color can be used to make it easier to recognize.

Item 1 Item 2 Item 3
Category
Colors Yes No Wildcard
CSS Code #9F9 #F99 #FFB


Code

If you want to add code, the syntax might interfere with the Mediawiki syntax. To prevent this from happening, place your code in one of the following preferred ways:

Fixed format text for short, single-line code.

Long code, spans entire width of the page.
Supports syntax highlighting of certain languages, like Python and HTML.
Change the lang="" attribute to the correct language, e.g. lang="python" or lang="html5"
Use lang="text" for non-supported languages.


 1You can also add line numbering.
 2
 3If your code is longer than, say, 50 lines, you can add a style attribute to introduce a scrollbar, as sampled here. For a 50-line cutoff, use style="height:50em; overflow:auto;".
 4Note that this method will cause the print version of the page to cut off the code at the line limit mark and not print the rest of the code.
 5I might fix that, but if it's really crucial to have an entire page full of code, you should probably give it a separate page.
 6
 7<!-- Commence Bacon Ipsum -->
 8Bacon ipsum dolor amet eiusmod in ribeye, flank duis swine drumstick shank kielbasa lorem pariatur shoulder in. Flank capicola dolore, tri-tip boudin fatback turkey. 
 9Ut esse in voluptate porchetta duis reprehenderit irure ullamco mollit tri-tip bresaola. Anim beef bresaola meatball t-bone spare ribs consequat ullamco. 
10Shoulder sirloin fatback veniam dolore. Adipisicing sed tempor shank lorem, pariatur tri-tip et pork loin tail chuck meatloaf.
11
12Exercitation beef ribs short loin veniam pig, incididunt spare ribs. In ipsum biltong ex enim, boudin chuck andouille velit duis cow prosciutto elit. 
13Duis tongue laborum veniam do meatloaf porchetta boudin minim aute in meatball ex turkey occaecat. Dolor kevin officia shoulder corned beef.
14
15Pork irure non, et nulla qui prosciutto boudin. Pancetta in turducken magna doner do dolor anim ad meatball prosciutto. Officia excepteur drumstick kielbasa ullamco, 
16velit qui capicola aliquip. Cillum commodo nulla elit drumstick kevin turducken ut consectetur. Frankfurter in in boudin jerky. Do in anim ut sunt voluptate bresaola sed. 
17Est leberkas nulla, incididunt biltong bacon boudin rump dolore dolore kielbasa proident kevin aliqua.

For command-line code, you can also style it like this for clarity: ping 127.0.0.1 -n 50 -l 1024

You could also use the <tt> <pre> and nowiki tags if better suited for your needs, whatever works best to present the code as clear and readable as possible.

Downloads

Download links are presented as list items and are descriptive. This means you don't waste space by pasting the entire url or writing something like "Click here to download the documentation". Examples:

References

  1. Thumbnails 720px wide still fit comfortably within a browser window on half a 1920px desktop monitor.