74 | | == 7. Schritt: Neuen |
| 75 | == 7. Schritt: Neuen Eintrag bearbeiten == |
| 76 | Es ö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 | |
| 80 | Hier muss ganz oben ein Dateiname angegeben werden, der dem oben erwähnten Muster `YYYY-MM-DD-Kurze-Beschreibung.php` folgen |
| 81 | sollte. Dann kannst du in das Textfeld den Inhalt der Zwischenablage einfügen und die Variablenwerte sowie den Blogtext |
| 82 | selber ändern. |
| 83 | |
| 84 | == 8. Schritt: Eintrag abspeichern == |
| 85 | Wenn du runterscrollst, siehst du eine Maske, wo du deine Änderungen kommentieren kannst. Zum Nachverfolgen der Änderungen |
| 86 | an 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 | |
| 90 | Klicke dann auf `Commit new file`. Du kannst die Checkbox ''Commit directly to the `master` branch'' aktiv lassen. |
| 91 | Sobald du den Button geklickt hast, wird deine Änderung auf http://technikum29.de sichtbar. |
| 92 | |
| 93 | == 9. Schritt: Photos hinzufügen == |
| 94 | Wenn 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 | |
| 100 | Dies bindet das Bild https://upload.wikimedia.org/wikipedia/commons/6/6d/PDP-8.jpg ein. Möchtest du ein Bild aber auf |
| 101 | der technikum29-Seite direkt hosten, dann bietet es sich an, es im Repository hochzuladen. Dazu navigierst du den |
| 102 | Pfad https://github.com/technikum29/technikum29-www/tree/master/shared/photos an, wo du dich umschauen kannst. |
| 103 | Blogbilder sollten etwa in das Unterverzeichnis `blog` gespeichert werden: |
| 104 | |
| 105 | [[Image(github-t29-guide-02.jpg, width=100%)]] |
| 106 | |
| 107 | == 10. Schritt: Photos hochladen == |
| 108 | Klicke 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 | |
| 112 | Dateien werden '''mit ihrem Namen''' hochgeladen. Deswegen musst du sie ''vor dem Hochladen'' so benennen, wie |
| 113 | sie später heißen sollen. Auch hier solltest du einen Namen ohne Leerzeichen (verwende `-` oder `_`) wählen, |
| 114 | am Besten alles kleingeschrieben und auch die Dateiendung kleingeschrieben (`.jpg` statt `.JPG`). |
| 115 | |
| 116 | Auß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 | |
| 121 | Komprimiere dein Bild daher bitte vorher auf deinem Computer mit einem Bildbearbeitungsprogramm. |
| 122 | Auch sollten Photos ''nur'' im JPG-Format hochgeladen werden, nicht etwa als PNG-Dateien. |
| 123 | |
| 124 | Da wir auch hier mit der Website noch recht traditionell sind und das Bildprocessing nicht irgendwo |
| 125 | heimlich passiert, ist es wichtig, dass Dateien sinnvoll für das Web vorbereitet werden. |
| 126 | |
| 127 | Die Einbindung eines Bildes mit dem Namen `Foo-Bar.jpg` im Ordner `/shared/photos/blog` passiert dann |
| 128 | wie folgt: |
| 129 | |
| 130 | {{{ |
| 131 | <img src="/shared/photos/blog/Foo-Bar.jpg"> |
| 132 | }}} |
| 133 | |
| 134 | HTML sowie die Stilauszeichnugssprache CSS erlauben vielfältige Möglichkeiten, die Bilddarstellung |
| 135 | zu variieren. Solche Dinge lassen sich später immer noch korrigieren, daher kannst du auch erst einmal |
| 136 | eine einfache Einbindung vornehmen. |