Team:Cologne-Duesseldorf/Team-Wiki-Tutorial

Team Wiki tutorial

Einleitung

Die ganz allgemeinen Sachen sollten über das Wiki Tutorial schon geklärt sein, deswegen hier nur noch einmal die extra Infos, die unser Wiki betreffen. Für euch sind die ganzen strukturellen HTML und CSS Geschichten eigentlich relativ egal, ihr braucht auch nur eine Handvoll tags, um eure Seiten effizient schreiben zu können.

Grundaufbau

Ich habe euch über die Wiki imports ({{Template:Cologne-Duesseldorf/header}} und {{Template:Cologne-Duesseldorf/footer}}) den kompletten Grundaufbau einer HTML Seite erspart. Ihr müsst also eigentlich nur ein paar Sachen beachten. Folgendes der Minimalaufbau jeder Wikiseite:

      
{{Template:Cologne-Duesseldorf/css}}
{{Template:Cologne-Duesseldorf/header}}
<html>
<body>
    <article>
        <div id="ToC"></div>


    </article>
</body>
</html>
{{Template:Cologne-Duesseldorf/footer}}
{{Template:Cologne-Duesseldorf/js}}

Darüber wird automatisch die die CSS eingelesen, der Seitenlayout, das Menu und der Footer aufgerufen. Das Einzige, was ihr also noch machen müsst, ist euren Code ausschließlich innerhalb der <article> und </article> tags zu schreiben und immer darauf zu achten, dass ihr eure Klammern ordentlich schließt. Da der Javascript Code erst am Ende der Seite eingelesen wird, funktioniert ansonsten das Menu und alle möglichen anderen Sachen nicht mehr, das Ganze wäre also eher unschön. Aus den h2 und h3 Headings wird über ein kleines Skript automatisch ein table of contents generiert und zwar in der div <div id="ToC"></div>. Auf Seiten, wo es kein Inhaltsverzeichnis geben soll, kann das Stück gelöscht werden, ansonsten sollte man es dahin verschieben, wo man es am Sinnvollsten erachtet.

Wichtige Elemente

Paragraphen

Das erste wichte Element, dass ihr braucht, sind Paragraphen. Darin wird jeder normale Text geschrieben:

      
<p>
  Innerhalb dieser beiden tags den Text einfügen.
</p>

Überschriften

Als nächstes sind Überschriften wichtig. h2 und h3 Überschriften innerhalb des article Bereichs werden oben als Inhaltsverzeichnis angeheftet, solange sie nicht in einem anderen Element sind.

          
<h1>Heading 1</h1>

Heading 1

          
<h2>Heading 2</h2>

Heading 2

          
<h3>Heading 3</h3>

Heading 3

          
<h4>Heading 4</h4>

Heading 4

          
<h5>Heading 5</h5>
Heading 5
          
<h6>Heading 6</h6>
Heading 6

Bilder

Die Bilder werden über wiki tools -> Upload files oben in der iGEM Leiste hochgeladen, eure hochgeladenen Bilder findet ihr über Wiki tools -> Special Pages -> Files List. Dann fügt ihr den Link in ein Image tag ein. Dabei müsst ihr den Link nehmen, der das tatsächlich Bild verlinkt (https://static.igem.org/mediawiki/2017....) , nicht die Wiki Seite, auf dem das Bild vorhanden ist (https://2017.igem.org/File:...).

      
<img src="https://static.igem.org/mediawiki/2017/c/cd/T--Cologne-Duesseldorf--Nootkatone-Simple-Model.svg">
Nicht
<img src="https://2017.igem.org/File:T--Cologne-Duesseldorf--Nootkatone-Simple-Model.svg">

Links

Links werden relativ einfach gebildet: <a href="https://2017.igem.org/Team:Cologne-Duesseldorf">Link Text</a>. Innerhalb der Anführungszeichen des href="" wird der vollständige Link eingefügt, also inklusive des http:// gedöns. Der Teil zwischen den beiden <a>...</a> wird tatsächlich auf der Seite angezeigt.

Textverzierungen

Unabhängig von der Vielfalt an Textverzierungen würde Ich vorschlagen, dass wir uns auf Strong (<strong>Euer Text</strong>) und Mark (<mark>Euer Text</mark>) beschränken, damit das Erscheinungsbild auf dem ganzen Wiki halbwegs einheitlich bleibt.

Zitate

Da Ich gesammelte Zitate am Textende für hässlich und unpraktisch halte, habe Ich mir eine Kombination aus dem <abbr> und dem <a> tag überlegt. Dadurch wird bei einem hover mit der Maus über dem Text direkt die vollständige Quelle angezeigt und ein Klick darauf bringt einen direkt zur Quelle. Neat. Das ganze sieht dann folgendermaßen aus:

        
<a href="https://books.google.de/books/about/Cascade_Reactions_Combining_a_Cytochrome.html?id=e0l6AQAACAAJ&redir_esc=y">
    <abbr title="2015, Sebastian Schulz - Cascade Reactions combining a Cytochrome P450 Monooxygenase and an Alcohol Dehydrogenase for the Synthesis of (+)-Nootkatone">
        Sebastian Schulz (2015)
    </abbr>
</a>

Tabellen

Tabellen in HTML sind ekelhaft. Kommt man nicht drum rum. Falls ihr auf so schlaue Ideen kommt wie euch die Tabellen über Programme generieren zu lassen und das vielleicht sogar noch anständig funktioniert, achtet auf jeden Fall darauf, dass ihr die <thead> und <tbody> tags benutzt. Ich habe nämlich ein kleines Script, was dafür sorgt, dass die Tabelle auf kleinen Geräten in eine Mobilkonforme Form gebracht wird. Das funktioniert allerdings über diese beiden Tags, also bitte anfügen. Ansonsten steht <tr> für eine Reihe in der Tabelle. Jede Reihe muss gleich viele <th> oder <td> Elemente enthalten, die respektive für die Tabellenzellen der Überschrift beziehungsweise der restlichen Tabelle stehen. 

        
<table>
<thead>
  <tr>
    <th>Head 1</th>
    <th>Head 2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</tbody>
</table>
Head 1 Head 2
Data 1 Data 2

Listen

Listen sind zum Glück wieder relativ trivial. Sie sind entweder geordnet <ol>, besitzen also Zahlen, oder ungeordnet <ul>, besitzen also Punkte vor dem Text. Entgegen des Namens werden geordnete Listen nicht für euch geordnet, lediglich die Zahlen werden automatisch geschrieben. Man kann Listen auch ineinander nesten, sprich eine Ebene weiter schieben. Dabei kann man sich an jeder Verzweigung wieder entscheiden, ob die Unterliste geordnet oder ungeordnet ist.

        
<ol>
<li>Element 1</li>
<ul>
  <li>Element 2</li>
</ul>
<li>Element 3</li>
</ol>
  1. Element 1
    • Element 2
  2. Element 3

Figures

				
<figure>
    <img src="https://static.igem.org/mediawiki/2017/c/c5/Artico_p5wt_polar.png">
    <figcaption>TPR domains of the yeasts PEX5 receptor with the PTS1. The yellow lines indicate interacting amino acids.</figcaption>
</figure>
TPR domains of the yeasts PEX5 receptor with the PTS1. The yellow lines indicate interacting amino acids.

Andere schicke Sachen

Accordion

Gerade auf Seiten mit viel Content kann man ab und zu mal etwas verstecken, was man nicht unbedingt braucht. Klasse dafür sind Accordions, die sich auffalten, sobald man darauf klickt. Grundsätzlich müsst Ihr dafür nur den folgenden Code beliebig oft untereinander kopieren, wobei der Text innerhalb der <button>...</button> tags direkt auf der Seite sichtbar ist und der Text innerhalb der .panel div Klasse beim aufklappen angezeigt wird.

          
<button class="accordion">Section 1</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Callouts

Wenn etwas noch mehr Aufmerksamkeit braucht, als ihr mit normalen Textverzierungen bekommen könnt, gibt es dafür noch Callouts.

          
<div class="callout">
      <h4 id="Callout">Callout</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Callout

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tips

HTML Code wird so richtig schnell unlesbar, wenn man keine anständigen Indents einfügt. Software wie atom oder Notepad ++ erledigen da recht viel für euch, ansonsten werden Shift zum Erhöhen und Umschalt + Shift zum Verringern sehr wichtig für euch. Es gibt Websites, die für euch automatisch euren Code richtig leveln, die machen aber auch ab und zu Müll, daher empfehle Ich es, von Anfang an anständig zu schreiben.

Man kann in HTML über <!--Das ist euer Kommentar --> Kommentare schreiben, die nicht auf der Seite angezeigt werden. Das Ganze ist insbesondere dann praktisch, wenn man bei langen Seiten nicht vergessen will, in welcher Ebene man sich gerade befindet. Dann vor jedes schließende Tag z.B. dran schreiben, was genau es geöffnet hat.

Sobald Ihr ein geöffnetes Tag nicht richtig schließt, kann das richtig fies werden. <img> tags müssen nicht geschlossen werden und bei Tabellen gibt es auch Ausnahmen, allerdings ist die Chance, dass man mal eine der Regeln für das Weglassen eines tags vergisst recht groß, also gewöhnt euch am Besten direkt an, tags zuerst zu schließen und dann erst euren Content einzufügen. Ein nicht geschlossenes <div> könnte dazu führen, dass die Navigation auf eurer Seite nicht mehr funktioniert, also drauf achten, sowas nicht zu tun. Merci.

Es ist außerdem sinnvoll, lokale Kopien von euren Seiten zu machen, da ja jeder von uns Schreibrechte hat und das iGEM Wiki keine Backups macht. Wenn jemand aus Versehen euern Code überschreibt, ist der dann auch komplett weg.