Changes between Version 2 and Version 3 of Website/Github zum Bearbeiten nutzen


Ignore:
Timestamp:
Nov 20, 2019, 3:09:46 PM (4 years ago)
Author:
sven
Comment:

Fertiggeschrieben.

Legend:

Unmodified
Added
Removed
Modified
  • Website/Github zum Bearbeiten nutzen

    v2 v3  
    6868
    6969== 6. Schritt: Eintragen zum Anlegen einer neuen Datei öffnen ==
    70 '''Gehe nun zurück''' und klicke oben rechts auf `Create new file`:
     70Markiere nun in einem bestehenden Blogeintrag die ersten 10 Code-Zeilen und kopiere sie in die Zwischenablage.
     71Gehe dann zurück zur Ordnerübersicht und klicke oben rechts auf `Create new file`:
    7172
    7273[[Image(github-t29-guide-01.jpg, width=100%)]]
    7374
    74 == 7. Schritt: Neuen
     75== 7. Schritt: Neuen Eintrag bearbeiten ==
     76Es öffnet sich nun ein Editorfenster, welches unausgefüllt leer ist. Im folgenden Bild wurde bereits Text geschrieben:
     77
     78[[Image(github-t29-guide-04.jpg, width=100%)]]
     79
     80Hier muss ganz oben ein Dateiname angegeben werden, der dem oben erwähnten Muster `YYYY-MM-DD-Kurze-Beschreibung.php` folgen
     81sollte. Dann kannst du in das Textfeld den Inhalt der Zwischenablage einfügen und die Variablenwerte sowie den Blogtext
     82selber ändern.
     83
     84== 8. Schritt: Eintrag abspeichern ==
     85Wenn du runterscrollst, siehst du eine Maske, wo du deine Änderungen kommentieren kannst. Zum Nachverfolgen der Änderungen
     86an der Website ist es guter Stil, hier zumindest die erste Zeile auszufüllen und die Änderungen prägnant zusammenzufassen.
     87
     88[[Image(github-t29-guide-05.jpg, width=100%)]]
     89
     90Klicke dann auf `Commit new file`. Du kannst die Checkbox ''Commit directly to the `master` branch'' aktiv lassen.
     91Sobald du den Button geklickt hast, wird deine Änderung auf http://technikum29.de sichtbar.
     92
     93== 9. Schritt: Photos hinzufügen ==
     94Wenn du ein Bild hinzufügen möchtest, kannst du das grundsätzlich per HTML einbinden, dazu schreibst du zum Beispiel
     95
     96{{{
     97  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6d/PDP-8.jpg" style="width: 400px">
     98}}}
     99
     100Dies bindet das Bild https://upload.wikimedia.org/wikipedia/commons/6/6d/PDP-8.jpg ein. Möchtest du ein Bild aber auf
     101der technikum29-Seite direkt hosten, dann bietet es sich an, es im Repository hochzuladen. Dazu navigierst du den
     102Pfad https://github.com/technikum29/technikum29-www/tree/master/shared/photos an, wo du dich umschauen kannst.
     103Blogbilder sollten etwa in das Unterverzeichnis `blog` gespeichert werden:
     104
     105[[Image(github-t29-guide-02.jpg, width=100%)]]
     106
     107== 10. Schritt: Photos hochladen ==
     108Klicke auf den Button ''Upload files'', dann öffnet sich folgendes relativ selber erklärendes Fenster:
     109
     110[[Image(github-t29-guide-08.jpg, width=100%)]]
     111
     112Dateien werden '''mit ihrem Namen''' hochgeladen. Deswegen musst du sie ''vor dem Hochladen'' so benennen, wie
     113sie später heißen sollen. Auch hier solltest du einen Namen ohne Leerzeichen (verwende `-` oder `_`) wählen,
     114am Besten alles kleingeschrieben und auch die Dateiendung kleingeschrieben (`.jpg` statt `.JPG`).
     115
     116Außerdem sorge bitte für Folgendes:
     117
     118  * '''Maximale Bildbreite: 920 Pixel''' (breitere Bilder werden auf der Website nur verkleinert).
     119  * Maximale Dateigröße: 1-2MB für ein sehr großes Bild, unter 500kB für kleinere Bilder.
     120
     121Komprimiere dein Bild daher bitte vorher auf deinem Computer mit einem Bildbearbeitungsprogramm.
     122Auch sollten Photos ''nur'' im JPG-Format hochgeladen werden, nicht etwa als PNG-Dateien.
     123
     124Da wir auch hier mit der Website noch recht traditionell sind und das Bildprocessing nicht irgendwo
     125heimlich passiert, ist es wichtig, dass Dateien sinnvoll für das Web vorbereitet werden.
     126
     127Die Einbindung eines Bildes mit dem Namen `Foo-Bar.jpg` im Ordner `/shared/photos/blog` passiert dann
     128wie folgt:
     129
     130{{{
     131  <img src="/shared/photos/blog/Foo-Bar.jpg">
     132}}}
     133
     134HTML sowie die Stilauszeichnugssprache CSS erlauben vielfältige Möglichkeiten, die Bilddarstellung
     135zu variieren. Solche Dinge lassen sich später immer noch korrigieren, daher kannst du auch erst einmal
     136eine einfache Einbindung vornehmen.
    75137
    76138
     139
     140
     141
     142
     143
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License