Schauen wir uns kurz die Grundlagen zum Webpublishing an, beziehungsweise allgemein die Grundlagen
hinter einer Webseite, die man vielleicht braucht, um es zu verstehen.
Es gibt verschiedene Techniken, die hier rein spielen.
Zum ersten ist das HTML, so Hypertext Markup Language.
Das ist nichts anderes als eine Struktursprache.
Das heißt, wenn ich hier jetzt mal rechtsklick auf untersuchen klicke, dann sehe ich hier
verschiedene Elemente, das sind sogenannte HTML Elemente, die dem Browser anweisen,
was eben in einem bestimmten Abschnitt steht.
Also wenn ich hier jetzt zum Beispiel drüber hover, dann sehe ich schon, die werden mir
dann auf der Seite markiert.
Zum Beispiel ist so eine H1 einfach eine Überschrift 1 auf einer Seite.
Das schon mal zu HTML.
Und hier ist vielleicht wichtig zu verstehen, es gibt unterschiedliche HTML-Elemente.
Zum Beispiel ein Element für fetten Text oder ein Element um Sachen kursiv zu stellen.
Es gibt Zitate, das sind eigene Elemente.
Das alles sind also eigentlich HTML-Elemente, die dann auf der Seite eingebunden werden.
Sie müssen sich keine Sorgen machen, denn es gibt zwei Editoren.
Einmal den sogenannten vzvic-Editor, das ist also what you see is what you get.
Man schreibt also einfach nur Text hinein und kann das ganze bearbeiten wie in Word.
Und dann gibt es eben den Text-Editor.
Den braucht man, wenn man später zum Beispiel den Feinschliff auf einer Seite geben möchte,
um zum Beispiel Shortcodes hinzuzufügen, dazu dann später gleich mehr und eben zum
Beispiel ungewünschte HTML-Elemente wieder zu entfernen.
Neben HTML gibt es auch CSS.
Was ist jetzt CSS, werden Sie sich fragen?
CSS sind die sogenannten Cascading Style Sheets und die sorgen dafür, dass die Seite auch
ein Design hat.
Wie schaut jetzt eine Internetseite aus ohne CSS?
Das zeige ich hier mal am Beispiel im Safari Browser.
Wenn ich nämlich hier CSS einfach mal deaktiviere, dann sehen wir, das sieht gleich ganz anders
aus.
Ohne CSS sieht man nur noch das HTML, also nur noch Listen, einfache Listen, Bilder,
dann sieht Texte und alles, was hier sonst so auf der Seite eingebunden wurde.
Und erst wenn ich wieder das CSS aktiviere, dann sieht man, wie die Seite eigentlich ausschaut,
wie der Benutzer sie also sieht.
Das heißt, CSS ist wichtig, um die Seite einfach schön zu machen.
Punkt.
Für Sie wird CSS eine kleine Rolle spielen.
Das einzige, wann Sie CSS brauchen oder sogenannte CSS Klassen ist, wenn Sie zum Beispiel mal
ein rundes Bild in einer Seite einfügen müssen.
Ansonsten müssen Sie sich um CSS keine Gedanken machen.
Das ist alles im Editor quasi, das läuft hinter den Kulissen, sage ich einmal.
Natürlich, wenn Sie Fehler beim Design der Seite finden, dann schreiben Sie uns eine Mail
an webmaster.fau.de.
Wir freuen uns immer über Fehlermeldungen, dass wir es verbessern können.
Jetzt gehe ich gleich weiter zum Punkt Dokumente.
Manchmal hat man Dokumente, die man an die Nutzer bringen muss, zum Beispiel Formulare,
Anmeldeformulare und da kann es sich schon mal anbieten, dass man auch Dokumente einbindet.
Hier ist es vor allem empfehlenswert, wenn Sie eine barrierefreie PDF-Datei verwenden,
also eine PDF-Datei benutzen und Sie vorher auch barrierefrei machen, zum Beispiel mit
einem Adobe Acrobat.
Davon gibt es auch beim Schulungszentrum dann entsprechende PDF-Kurse, falls Sie wirklich
PDFs hochladen möchten.
Word-Dokumente sollte man nicht hochladen, weshalb?
Weil nicht jeder Browser ein Word-Dokument öffnen kann, nicht jeder Nutzer hat Word
und nicht jeder hat ein Programm auf dem Rechnerums zu öffnen.
Währenddessen bei einer PDF-Datei, wenn der Nutzer diese öffnet, dann zieht der Nutzer
diese vor dem Browser und muss nicht erst auf ein anderes Programm wechseln.
Das heißt, wenn Sie Dokumente in diese alten Formen einbinden, schauen Sie, dass es barrierefrei
ist, schauen Sie am besten, dass es keine Word-Dokumente, keine Excel-Dateien oder sonst
was sind, sondern idealerweise sind es PDF-Dateien.
Manchmal braucht man auch Protokollvorlagen für Studierende, dann kann man natürlich
auch mal eine Excel-Datei oder eine Word-Datei hochladen.
Ansonsten ist das empfehlende Vorgehen für alte PDF-Dokumente oder Dokumente, die viel
Text haben, machen Sie einfach eine Inhaltsseite daraus, denn es hilft den Nutzern oft viel
mehr, wenn die Leute das gleiche Browser entsprechend sehen oder über die Google-Suche
sofort auf das Dokument gelangen.
Zu viel zu Dokumenten, gleich gehe ich weiter zum Punkt Bilder.
Bilder, das können Fotos oder Grafiken sein, wie es hier steht und gerade wenn es um Bilder
geht, ist vielleicht die Frage oder die größte Frage, die man sich stellt, welches Format
sollte ich verwenden fürs Netz?
Und hier ist meine Empfehlung einfach, verwenden Sie JPEGs oder JPGs, das erkennen Sie immer
daran, dass das Bild am Ende ein Punkt JPG eben als Dateienendung hat und Punkt JPG oder
Punkt JPG, also JPG, das ist einfach das Standartformat für Fotos und das bietet Ihnen den Vorteil,
dass sobald Sie so ein Bild in die Mediathek hochladen, dass WordPress das automatisch
für Sie komprimiert.
Es gibt noch PNG-Dateien, PNGs kann man auch hochladen in WordPress.
Bei PNGs müssen Sie etwas vorsichtiger sein, denn PNGs werden beim Hochladen nicht komprimiert
und behalten weiterhin die volle Dateigröße.
Wenn Sie also ein 10 MB PNG hochladen, dann bleibt dieses Bild in Ihrer Mediathek 10 MB
groß und frisst entsprechend viel Beicherplatz auf Ihrem Rechner und von Ihren Nutzern, die
die Seite anschauen.
Es gibt also JPGs, es gibt PNGs und es gibt natürlich auch andere Formate, zum Beispiel
GIFs oder SVGs oder andere Dateiformate, die Sie auch nutzen können, wenn es eben an einer
Spezialstelle Sinn macht.
Generell ist meine Empfehlung allerdings JPGs oder JPGs eben zu verwenden, wie es hier steht,
weil diese auch von allen Social Media Kanälen zum Beispiel akzeptiert werden.
Wenn Sie einen Link teilen und ein Beitragsbild als JPG hochladen, dann sieht das jeder Nutzer,
der diesen Link eben zum Beispiel in WhatsApp geschickt bekommt.
Wenn Sie dagegen einen Punkt SVG hochladen, also eine Scalable Vector Grafik, dann wird
diese nicht von jedem Programm, von jeder App auch richtig ausgegeben.
Das heißt Sie sehen dann vielleicht nur noch den Text von Ihrer Seite, also den Vorschautext.
Jetzt gibt es Videos.
Wie sieht es mit den Videos aus?
Hier ist meine Empfehlung.
Verwenden Sie das FAU Video Portal, um Videos einzubinden.
Das liegt einfach daran, dass Sie dann keinen Cookie-Konsent-Banner unbedingt benötigen.
Bei YouTube oder Vimeo ist erst die Nutzerzustimmung notwendig, damit das Video angezeigt wird,
zumindest zum Zeitpunkt der Aufnahme dieses Videos.
In Zukunft kann sich das vielleicht ändern.
Jetzt gibt es noch einen allgemeinen Punkt zur Texterstellung fürs Internet.
Was jetzt hier in diesem Absatz vielleicht einfach die Aussage ist, ist, dass es Unterschiede
gibt beim Schreiben eines Textes für Print und für Web.
Und zwar, würde ich sagen, ist das Hauptmerkmal vom Text fürs Internet eben, dass Sie dort
viel kürzere Absätze schreiben.
Das heißt, das hier, wie man es jetzt hier sieht, ist vielleicht an manchen Stellen sogar
schon zu viel Absatz.
Es ist empfehlenswert, dass Sie nach allen zwei bis drei Sätzen einfach einen Umbruch
einfügen, weil Nutzer nicht mehr mit dem Gedanken auf die Seite kommen, dass Sie eben einen
kompletten 2400 Zeichentext lesen, nur um ein bestimmtes Wort oder einen bestimmten Suchbegriff
zu finden.
Das heißt, die meisten Nutzer werden googeln, also über die Google-Suchmaschine werden
Sie ihnen ein Wort eingegeben, zum Beispiel Kaffeebohnen.
Dann kommen Sie auf Ihre Internetseite und suchen auf Ihrer Seite eigentlich nur das
Wort Kaffeebohnen und den Satz, den Sie dazu geschrieben haben.
Das machen Sie einmal dadurch leichter, dass Sie Überschriften und Unterüberschriften
verwenden, also wie hier HTML, CSS, Medien, Dokumente, bla bla bla.
Und des Weiteren machen Sie es einfacher, indem Sie die Absätze einfach etwas kürzer
gestalten und eventuell wichtige Passagen vorheben und intern verlinken, also hier mal
zwischendrin einfach auf die passende Inhaltsseite weiter beweisen.
Ansonsten könnte man darüber einen ganzen Tag reden, allerdings war es das jetzt schon
mit dem ersten Video, hätte ich gesagt.
Hier unten finden Sie noch weiterführende Links, zum Beispiel zur Dokumentation von
HTML oder einem Wikipedia-Artikel von Vizivic, den vielleicht jetzt nicht so weiterhelfen
wird, aber auch andere Links, die vielleicht nützlich sein können.
Hier unten ist noch ein Link zum Thema Screenreader.
Hier noch vielleicht einen Hinweis dazu.
Denken Sie daran, dass es auch sehbehinderte Menschen gibt, die eben einen Screenreader
verwenden müssen und darauf angewiesen sind.
Das heißt, wenn Sie ihn zum Beispiel verlinken, dann macht es Sinn, wenn Ihr Link jetzt nicht
heißt Ihr, sondern F HU Videoportei.