WEBVTT 00:00.000 --> 00:12.280 Schauen wir uns kurz die Grundlagen zum Webpublishing an, beziehungsweise allgemein die Grundlagen 00:12.280 --> 00:17.540 hinter einer Webseite, die man vielleicht braucht, um es zu verstehen. 00:17.540 --> 00:20.360 Es gibt verschiedene Techniken, die hier rein spielen. 00:20.360 --> 00:24.440 Zum ersten ist das HTML, so Hypertext Markup Language. 00:24.440 --> 00:27.680 Das ist nichts anderes als eine Struktursprache. 00:27.680 --> 00:32.160 Das heißt, wenn ich hier jetzt mal rechtsklick auf untersuchen klicke, dann sehe ich hier 00:32.160 --> 00:38.800 verschiedene Elemente, das sind sogenannte HTML Elemente, die dem Browser anweisen, 00:38.800 --> 00:41.680 was eben in einem bestimmten Abschnitt steht. 00:41.680 --> 00:45.200 Also wenn ich hier jetzt zum Beispiel drüber hover, dann sehe ich schon, die werden mir 00:45.200 --> 00:46.520 dann auf der Seite markiert. 00:46.520 --> 00:51.520 Zum Beispiel ist so eine H1 einfach eine Überschrift 1 auf einer Seite. 00:51.520 --> 00:53.480 Das schon mal zu HTML. 00:53.480 --> 00:57.960 Und hier ist vielleicht wichtig zu verstehen, es gibt unterschiedliche HTML-Elemente. 00:57.960 --> 01:03.680 Zum Beispiel ein Element für fetten Text oder ein Element um Sachen kursiv zu stellen. 01:03.680 --> 01:06.320 Es gibt Zitate, das sind eigene Elemente. 01:06.320 --> 01:12.000 Das alles sind also eigentlich HTML-Elemente, die dann auf der Seite eingebunden werden. 01:12.000 --> 01:15.320 Sie müssen sich keine Sorgen machen, denn es gibt zwei Editoren. 01:15.320 --> 01:20.520 Einmal den sogenannten vzvic-Editor, das ist also what you see is what you get. 01:20.520 --> 01:25.880 Man schreibt also einfach nur Text hinein und kann das ganze bearbeiten wie in Word. 01:25.880 --> 01:28.320 Und dann gibt es eben den Text-Editor. 01:28.320 --> 01:33.680 Den braucht man, wenn man später zum Beispiel den Feinschliff auf einer Seite geben möchte, 01:33.680 --> 01:40.320 um zum Beispiel Shortcodes hinzuzufügen, dazu dann später gleich mehr und eben zum 01:40.320 --> 01:43.600 Beispiel ungewünschte HTML-Elemente wieder zu entfernen. 01:43.600 --> 01:47.320 Neben HTML gibt es auch CSS. 01:47.320 --> 01:49.720 Was ist jetzt CSS, werden Sie sich fragen? 01:49.720 --> 01:55.520 CSS sind die sogenannten Cascading Style Sheets und die sorgen dafür, dass die Seite auch 01:55.520 --> 01:56.520 ein Design hat. 01:56.520 --> 02:00.240 Wie schaut jetzt eine Internetseite aus ohne CSS? 02:00.240 --> 02:03.200 Das zeige ich hier mal am Beispiel im Safari Browser. 02:03.200 --> 02:09.040 Wenn ich nämlich hier CSS einfach mal deaktiviere, dann sehen wir, das sieht gleich ganz anders 02:09.040 --> 02:10.040 aus. 02:10.040 --> 02:15.840 Ohne CSS sieht man nur noch das HTML, also nur noch Listen, einfache Listen, Bilder, 02:15.840 --> 02:20.320 dann sieht Texte und alles, was hier sonst so auf der Seite eingebunden wurde. 02:20.320 --> 02:27.240 Und erst wenn ich wieder das CSS aktiviere, dann sieht man, wie die Seite eigentlich ausschaut, 02:27.240 --> 02:28.720 wie der Benutzer sie also sieht. 02:28.720 --> 02:33.440 Das heißt, CSS ist wichtig, um die Seite einfach schön zu machen. 02:33.440 --> 02:34.440 Punkt. 02:34.440 --> 02:38.240 Für Sie wird CSS eine kleine Rolle spielen. 02:38.240 --> 02:43.000 Das einzige, wann Sie CSS brauchen oder sogenannte CSS Klassen ist, wenn Sie zum Beispiel mal 02:43.000 --> 02:45.920 ein rundes Bild in einer Seite einfügen müssen. 02:45.920 --> 02:49.360 Ansonsten müssen Sie sich um CSS keine Gedanken machen. 02:49.360 --> 02:54.480 Das ist alles im Editor quasi, das läuft hinter den Kulissen, sage ich einmal. 02:54.480 --> 02:58.440 Natürlich, wenn Sie Fehler beim Design der Seite finden, dann schreiben Sie uns eine Mail 02:58.440 --> 03:00.640 an webmaster.fau.de. 03:00.640 --> 03:04.280 Wir freuen uns immer über Fehlermeldungen, dass wir es verbessern können. 03:04.280 --> 03:06.360 Jetzt gehe ich gleich weiter zum Punkt Dokumente. 03:06.360 --> 03:11.560 Manchmal hat man Dokumente, die man an die Nutzer bringen muss, zum Beispiel Formulare, 03:11.560 --> 03:17.120 Anmeldeformulare und da kann es sich schon mal anbieten, dass man auch Dokumente einbindet. 03:17.120 --> 03:24.000 Hier ist es vor allem empfehlenswert, wenn Sie eine barrierefreie PDF-Datei verwenden, 03:24.000 --> 03:28.280 also eine PDF-Datei benutzen und Sie vorher auch barrierefrei machen, zum Beispiel mit 03:28.280 --> 03:29.960 einem Adobe Acrobat. 03:29.960 --> 03:34.520 Davon gibt es auch beim Schulungszentrum dann entsprechende PDF-Kurse, falls Sie wirklich 03:34.520 --> 03:35.760 PDFs hochladen möchten. 03:35.760 --> 03:39.720 Word-Dokumente sollte man nicht hochladen, weshalb? 03:39.720 --> 03:43.800 Weil nicht jeder Browser ein Word-Dokument öffnen kann, nicht jeder Nutzer hat Word 03:43.800 --> 03:47.000 und nicht jeder hat ein Programm auf dem Rechnerums zu öffnen. 03:47.000 --> 03:52.120 Währenddessen bei einer PDF-Datei, wenn der Nutzer diese öffnet, dann zieht der Nutzer 03:52.120 --> 03:55.200 diese vor dem Browser und muss nicht erst auf ein anderes Programm wechseln. 03:55.200 --> 04:01.240 Das heißt, wenn Sie Dokumente in diese alten Formen einbinden, schauen Sie, dass es barrierefrei 04:01.240 --> 04:05.920 ist, schauen Sie am besten, dass es keine Word-Dokumente, keine Excel-Dateien oder sonst 04:05.920 --> 04:09.640 was sind, sondern idealerweise sind es PDF-Dateien. 04:09.640 --> 04:13.520 Manchmal braucht man auch Protokollvorlagen für Studierende, dann kann man natürlich 04:13.520 --> 04:15.720 auch mal eine Excel-Datei oder eine Word-Datei hochladen. 04:15.720 --> 04:23.920 Ansonsten ist das empfehlende Vorgehen für alte PDF-Dokumente oder Dokumente, die viel 04:23.920 --> 04:29.120 Text haben, machen Sie einfach eine Inhaltsseite daraus, denn es hilft den Nutzern oft viel 04:29.120 --> 04:33.560 mehr, wenn die Leute das gleiche Browser entsprechend sehen oder über die Google-Suche 04:33.560 --> 04:35.080 sofort auf das Dokument gelangen. 04:35.080 --> 04:40.080 Zu viel zu Dokumenten, gleich gehe ich weiter zum Punkt Bilder. 04:40.080 --> 04:47.120 Bilder, das können Fotos oder Grafiken sein, wie es hier steht und gerade wenn es um Bilder 04:47.120 --> 04:51.120 geht, ist vielleicht die Frage oder die größte Frage, die man sich stellt, welches Format 04:51.120 --> 04:52.720 sollte ich verwenden fürs Netz? 04:52.720 --> 04:59.680 Und hier ist meine Empfehlung einfach, verwenden Sie JPEGs oder JPGs, das erkennen Sie immer 04:59.680 --> 05:08.160 daran, dass das Bild am Ende ein Punkt JPG eben als Dateienendung hat und Punkt JPG oder 05:08.160 --> 05:17.280 Punkt JPG, also JPG, das ist einfach das Standartformat für Fotos und das bietet Ihnen den Vorteil, 05:17.280 --> 05:21.520 dass sobald Sie so ein Bild in die Mediathek hochladen, dass WordPress das automatisch 05:21.520 --> 05:23.320 für Sie komprimiert. 05:23.320 --> 05:28.880 Es gibt noch PNG-Dateien, PNGs kann man auch hochladen in WordPress. 05:28.880 --> 05:34.160 Bei PNGs müssen Sie etwas vorsichtiger sein, denn PNGs werden beim Hochladen nicht komprimiert 05:34.160 --> 05:37.000 und behalten weiterhin die volle Dateigröße. 05:37.000 --> 05:44.280 Wenn Sie also ein 10 MB PNG hochladen, dann bleibt dieses Bild in Ihrer Mediathek 10 MB 05:44.280 --> 05:49.640 groß und frisst entsprechend viel Beicherplatz auf Ihrem Rechner und von Ihren Nutzern, die 05:49.640 --> 05:50.640 die Seite anschauen. 05:50.640 --> 05:57.280 Es gibt also JPGs, es gibt PNGs und es gibt natürlich auch andere Formate, zum Beispiel 05:57.280 --> 06:04.560 GIFs oder SVGs oder andere Dateiformate, die Sie auch nutzen können, wenn es eben an einer 06:04.560 --> 06:06.440 Spezialstelle Sinn macht. 06:06.440 --> 06:13.680 Generell ist meine Empfehlung allerdings JPGs oder JPGs eben zu verwenden, wie es hier steht, 06:13.680 --> 06:18.600 weil diese auch von allen Social Media Kanälen zum Beispiel akzeptiert werden. 06:18.600 --> 06:23.520 Wenn Sie einen Link teilen und ein Beitragsbild als JPG hochladen, dann sieht das jeder Nutzer, 06:23.520 --> 06:27.440 der diesen Link eben zum Beispiel in WhatsApp geschickt bekommt. 06:27.440 --> 06:34.040 Wenn Sie dagegen einen Punkt SVG hochladen, also eine Scalable Vector Grafik, dann wird 06:34.040 --> 06:39.120 diese nicht von jedem Programm, von jeder App auch richtig ausgegeben. 06:39.120 --> 06:42.800 Das heißt Sie sehen dann vielleicht nur noch den Text von Ihrer Seite, also den Vorschautext. 06:42.800 --> 06:45.520 Jetzt gibt es Videos. 06:45.520 --> 06:47.480 Wie sieht es mit den Videos aus? 06:47.480 --> 06:48.800 Hier ist meine Empfehlung. 06:48.800 --> 06:52.160 Verwenden Sie das FAU Video Portal, um Videos einzubinden. 06:52.160 --> 06:56.880 Das liegt einfach daran, dass Sie dann keinen Cookie-Konsent-Banner unbedingt benötigen. 06:56.880 --> 07:03.120 Bei YouTube oder Vimeo ist erst die Nutzerzustimmung notwendig, damit das Video angezeigt wird, 07:03.120 --> 07:06.200 zumindest zum Zeitpunkt der Aufnahme dieses Videos. 07:06.200 --> 07:08.080 In Zukunft kann sich das vielleicht ändern. 07:08.080 --> 07:14.440 Jetzt gibt es noch einen allgemeinen Punkt zur Texterstellung fürs Internet. 07:14.440 --> 07:21.760 Was jetzt hier in diesem Absatz vielleicht einfach die Aussage ist, ist, dass es Unterschiede 07:21.760 --> 07:26.200 gibt beim Schreiben eines Textes für Print und für Web. 07:26.200 --> 07:35.440 Und zwar, würde ich sagen, ist das Hauptmerkmal vom Text fürs Internet eben, dass Sie dort 07:35.440 --> 07:37.320 viel kürzere Absätze schreiben. 07:37.320 --> 07:40.720 Das heißt, das hier, wie man es jetzt hier sieht, ist vielleicht an manchen Stellen sogar 07:40.720 --> 07:42.840 schon zu viel Absatz. 07:42.840 --> 07:49.840 Es ist empfehlenswert, dass Sie nach allen zwei bis drei Sätzen einfach einen Umbruch 07:49.840 --> 07:55.280 einfügen, weil Nutzer nicht mehr mit dem Gedanken auf die Seite kommen, dass Sie eben einen 07:55.280 --> 08:01.080 kompletten 2400 Zeichentext lesen, nur um ein bestimmtes Wort oder einen bestimmten Suchbegriff 08:01.080 --> 08:02.080 zu finden. 08:02.080 --> 08:05.720 Das heißt, die meisten Nutzer werden googeln, also über die Google-Suchmaschine werden 08:05.720 --> 08:09.800 Sie ihnen ein Wort eingegeben, zum Beispiel Kaffeebohnen. 08:09.800 --> 08:13.800 Dann kommen Sie auf Ihre Internetseite und suchen auf Ihrer Seite eigentlich nur das 08:13.800 --> 08:16.600 Wort Kaffeebohnen und den Satz, den Sie dazu geschrieben haben. 08:16.600 --> 08:21.520 Das machen Sie einmal dadurch leichter, dass Sie Überschriften und Unterüberschriften 08:21.520 --> 08:27.160 verwenden, also wie hier HTML, CSS, Medien, Dokumente, bla bla bla. 08:27.160 --> 08:31.080 Und des Weiteren machen Sie es einfacher, indem Sie die Absätze einfach etwas kürzer 08:31.080 --> 08:36.560 gestalten und eventuell wichtige Passagen vorheben und intern verlinken, also hier mal 08:36.560 --> 08:39.840 zwischendrin einfach auf die passende Inhaltsseite weiter beweisen. 08:39.840 --> 08:46.040 Ansonsten könnte man darüber einen ganzen Tag reden, allerdings war es das jetzt schon 08:46.040 --> 08:48.440 mit dem ersten Video, hätte ich gesagt. 08:48.440 --> 08:53.080 Hier unten finden Sie noch weiterführende Links, zum Beispiel zur Dokumentation von 08:53.080 --> 08:57.800 HTML oder einem Wikipedia-Artikel von Vizivic, den vielleicht jetzt nicht so weiterhelfen 08:57.800 --> 09:02.680 wird, aber auch andere Links, die vielleicht nützlich sein können. 09:02.680 --> 09:05.920 Hier unten ist noch ein Link zum Thema Screenreader. 09:05.920 --> 09:10.680 Hier noch vielleicht einen Hinweis dazu. 09:10.680 --> 09:15.800 Denken Sie daran, dass es auch sehbehinderte Menschen gibt, die eben einen Screenreader 09:15.800 --> 09:18.920 verwenden müssen und darauf angewiesen sind. 09:18.920 --> 09:22.880 Das heißt, wenn Sie ihn zum Beispiel verlinken, dann macht es Sinn, wenn Ihr Link jetzt nicht 09:22.880 --> 09:49.960 heißt Ihr, sondern F HU Videoportei.