Du kennst bereits die allerwichtigsten Funktionen von WordPress: Beiträge verfassen, Kategorien (Kategorien-Widget), Seiten verfassen, Menüs, Fotos einfügen, Theme installieren …
Die Woche 08 dient dazu, WordPress selber weiter zu erkunden. (Anregung auf ai1920.wordpress.com)
Lege eine neue leere Seite an mit dem Titel: “Blöcke”
Probiere einige (wenigstens 4) Blöcke aus, z. B. Instagram, indem Du sie einfügst, ausfüllst …
Bringe die Seite Blöcke ins Menü, und zwar als Untermenüpunkt der Startseite (Neu anordnen …, es ist selbsterklärend!)
Wenn Du das erledigst hast, gib mir per Mail Bescheid. Ich mache die Kontrolle und gib Dir Bescheid. Erst dann mache mit dem Punkt 4 weiter.
Und wichtig: Immer nur Inhalte veröffentlichen, für die Du das Recht hast (also am besten eigene Fotos und Texte).
Schau Dir einige Themes an, indem Du sie installierst. Wenn Du eines hast, das Dir gefällt, richte (falls notwendig) das Menü ein, ebenso das Kategorien-Widget. Schau was Du sonst ändern kannst (z. B. Farben). Probiere einfach ein wenig herum. Bis Montag 25. 05.
WordPress – Teil 03
Stand
Das Theme TwentyTwenty ist installiert.
Unter Design / Anpassen (Customizer) / Website-Identität wurden ein Website-Titel (eigener Name) und ein Untertitel eingetragen.
Drei Beiträge mit Beitragsbildern und Inhalten wurden angelegt. Im Beitrags-Überblick schaut das so aus:
Überblicksseite der Beiträge
Im Fussbereich wurde ein Widget für die Kategorien eingefügt. Das sieht so aus:
TwentyTwenty mit Widget für Kategorien im Fußbereich
Die Seiten wurden bis auf die Startseite gelöscht. Die Inhalte der Startseite können bei den Installationen unterschiedlich sein.
Hinweis: Ich habe von mehreren KollegInnen den Hinweis bekommen, dass WordPress (Backend) mit dem veralteten Internet-Explorer Probleme macht (z. B. Einfügen von Text in einen Block). Bitte einen anderen Webbrowser verwenden (Firefox, Chrome …).
Seiten und Menüs
Neben Beiträgen kann man in WordPress Seiten verwenden. Die beiden unterscheiden sich in einigen Dingen. Beiträge werden durch Kategorien verfügbar gemacht, Seiten durch Menüs. Menüs brauchen etwas mehr Handarbeit. Häufig werden Seiten für Inhalte verwendet, die längere Zeit online bleiben, Beiträge für aktuelle Neuigkeiten, die laufend ergänzt werden (s. die Schulwebsite: die generellen Informationen über die HLW sind in Seiten, die Berichte über Aktivitäten in Beiträgen).
Die sogenannte “Homepage” (Startseite) kann in WordPress eine bestimmte Seite mit Inhalt sein (häufig eine Art Visitenkarte, mit der sich eine Firma kurz auf einer Seite vorstellt) oder zeigt automatisch die letzten Beiträge, die geschrieben worden sind (eine Mischung ist auch möglich).
Navigiere zu /Seiten und vergewissere Dich, dass Du alle Seiten bis auf die Startseite gelöscht hast. (Diese kann nicht gelöscht werden.)
Seiten gelöscht
Navigiere zu /Beiträge und vergewissere Dich, dass du alle Beiträge gelöscht hast.
Beiträge gelöscht
Navigiere zu /Design /Themes und vergewissere Dich, dass das Theme TwentyTwenty aktiv ist.
Twenty Twenty aktiv
Bereite 6 Fotos vor: Breite: ca. 1000 px, möglichst kleine Dateigröße! (Achtung: Du musst UrheberIn der Fotos sein oder sie dürfen ausdrücklich vewendet werden. Die Inhalte (Text, Fotos, …) sind nach dem Veröffentlichen eines Beitrags öffentlich und müssen daher rechtlich in Ordnung sein.)
Wechsle wieder zu /Beiträge und erstelle einen neuen Beitrag (drei Buttons zur Auswahl!). Gib ihm den Titel Obstbau. Speichere und veröffentliche den Beitrag durch zweimaliges Klicken des Buttons Veröffentlichen rechts oben.
Beitrag erstellen
Der Inhalt eines Beitrags besteht aus einzelnen Blöcken. Es gibt Blöcke für Überschriften (1-6), für Absatztext, für ein Bild, für eine Bildergalerie, für Listen, Zitate, Tabellen u. v. m. Wenn man das kleine + anklickt, geht eine Liste aller möglichen Blöcke auf, geordnet nach Gruppen. Wann immer man die Eingabetaste betätigt, wird ein neuer Block der Art Absatz angelegt.
Rechts befinden sich Einstellmöglichkeiten, getrennt für das Dokument (= der Beitrag) und für einen einzelnen Block. Für das Dokument sind die Kategorien besonders wichtig, da damit Beiträge geordnet werden und so leichter gefunden werden. Die Website eines Gartenfreundes könnte z. B. die Kategorien “Blumen”, “Gemüse”, “Sträucher” usw. verwenden, um die Beiträge einzuteilen.
Anlegen von Kategorien: Klicke rechts auf Kategorien (Du siehst, dass bereits eine Kategorie “Allgemein” angelegt ist). Wähle Neue Kategorie erstellen und trage unter Neuer Kategorienname Gartenbau ein und bestätige mit Neue Kategorie erstellen. Weise dem Beitrag Gartenbau die Kategorie Gartenbau durch Setzen des Hakens zu, die Kategorie Allgemein wähle ab.
Lege auf die gleiche Weise die Kategorie Obst an, stelle aber als Übergeordnete Kategorie Gartenbau ein. Mache es gleich mit der Kategorie Sträucher.
Hierarchische Kategorien
Die Kategorien sind jetzt hierarchisch geordnet. Das ist wichtig, wenn es sehr viele Beiträge gibt, und die Liste der Kategorien noch weiter ginge: Forstwirtschaft mit den Unterkategorien Mischwald, Nadelwald, Laubwald usw. Für diese Übung sind hierarchische Kategorien nicht notwendig.
Unter Beitragsbild kann einem Beitrag ein Bild zugewiesen werden. Wo es angezeigt wird, hängt vom Theme ab (häufig über dem Titel).
Im Folgenden werden drei Beiträge erstellt, ihnen Kategorien zugeordnet und Inhalte eingefügt. Lade Dir dazu inhalt.txt herunter.
Melde Dich in Deinem WP-Konto an und wechsle mit dem Button Meine Website links oben in Dein Backend.
Linker Bereich des Backends mit dem Menü
Da wir die nächsten Schritte in WP gemeinsam zwecks kennenlernen gehen werden, ist es gut, das gleiche Theme installiert zu haben.
Themes sichten, auswählen und installieren: Das Theme “TwentyTwenty” wird installiert.
Das Theme TwentyTwenty installieren
Ein erster Überblick über die Site: Kopfbereich mit Website-Titel, Navigation und Suchfunktion; Inhalte der Startseite, Fussbereich.
WordPress – ein erster Überblick
Site-Titel ändern: Wechsle wieder zum Backend mit der Navigation links, indem Du links oben auf das “W” klickst. Wähle Design / Anpassen und der Customizer wird geladen. Das ist das Programm, um Änderungen am Layout vorzunehmen. Welche Änderungen auf diese Weise gemacht werden können, hängt vom jeweiligen Theme ab. Gehe zu Website-Identität und trage bei Titel Deinen Namen ein, bei Untertitel “Angewandtes Informationsmanagment”. Anschließend gehe auf “Änderungen speichern” (oben). Verlasse mit dem X links oben den Customizer.
Inhalte löschen: Gehe im Menü zu Seiten und lösche alle Seiten ausgenommen die Startseite über das Dreipunkt-Menü (Papierkorb). Lösche ebenso die drei Beiträge.
WordPress – Erste Schritte
Nachdem Du Dein Konto eingerichtet hast und die erste Website automatisch angelegt ist, bist Du im Backend.
Das Backend von WordPress
➜ Links oben siehst Du die Adresse für Deine Website, hier ai1920.wordpress.com
➜ Darunter das Menü
➜ Mitte und rechts: verschiedene Hinweise, wenn Seiten oder Beiträge bearbeitet werden, deren Inhalt.
➜ Deine Website ist noch nicht veröffentlicht (s. Hinweis bei der Checkliste in der Mitte). Sie kann somit von keiner Suchmaschine gefunden werden, nur wer angemeldet ist, also Du, kann sie sehen.
Rufe Deine Website auf, indem Du Deine Adresse im Webbrowser eingibst. Sofern Du noch angemeldet bist, siehtst Du Deine Website.
Wechsle wieder zum Backend (Tipp: halte Backend und Frontend zugleich offen). Veröffentliche Deine Website. Du wirst wieder auf bessere Adressen hingewiesen, die aber nicht gratis sind. Wähle daher Kauf überspringen. Auf der folgenden Seite: Weiter mit deiner kostenlosen Website Jetzt ist sie veröffentlicht, jeder/jede, der/die die Adresse kennt, kann sie sehen, oder mit einer Suchmaschine finden.
Profil vervollständigen: Wähle rechts oben das Profilsymbol.
Trage auf der folgenden Seite Deinen richtigen Namen ein, den öffentlich angezeigten Namen (sollte auch richtiger Name sein) und füge ein Profilbild von Dir hinzu. Vergiß nicht zu speichern.
Wähle links Datenschutz. Wenn Du willst kannst Du “Teile Informationen …” deaktivieren.
Wähle jetzt links Benachrichtigungen. Hier kannst Du einstellen, wann Du Benachrichtigungen bekommen möchtest. Unter der Glocke: Benachrichtigungen im System, also wenn Du in WordPress angemeldet bist Email: per Email eben
Melde Dich jetzt links ziemlich oben von WordPress ab.
Melde Dich wieder an: gehe auf die Seite de.wordpress.com und wähle rechts oben Anmelden
Jetzt bist Du im Reader (ein einfaches Netzwerk). Hier kannst Du andere WP-Sites abonnieren und sieht neue Beiträge dieser.
Wähle links ganz oben Meine Website und Du bist in Deinem nun schon etwas vertrauterem Backend.
Sende mir per Email die Adresse Deiner Website. (Das dient als Kontrolle Deiner Arbeit.)
Frontend von einer WordPress-Seite
➜ Deine Seite kann ev. anders aussehen, weil bei der Installation automatisch ein anderes Theme gewählt worden ist.
➜ Es handelt sich um eine Startseite (entspricht einer index.html, Homepage) mit Titel, Menü, Kopfbild mit Text und den 3 neuesten Beiträgen.
Websites mit WordPress
Vorbemerkungen zum Verständnis
WordPress war ursprünglich eine Blogsoftware, die auf einem Webserver installiert ist und über einen Webbrowser bedient wird. Inzwischen ist WordPress so weiterentwickelt und um Funktionen ergänzt worden, dass Websites für jeden Zweck erstellt werden können, denen man den Tagebuchcharakter nicht ansieht.
Bei WordPress werden im sogenannten Backend die Inhalte erstellt. Um ins Backend zu gelangen, muss man sich anmelden.
Das Frontend ist die Seite, wie sie die BesucherInnen sehen.
Das Backend kann man sich als Formular vorstellen, das man ausfüllt (also mit vorgegebenen Feldern).
Das Layout (Groblayout, Feinlayout) der Seiten wird durch das Theme bestimmt. Ein Theme kann man mit wenigen Mausklicks installieren; es gibt tausende davon, viele sind gratis. Ein Theme kann ohne Programmierkenntnisse ein wenig angepasst werden.
Die Seiten werden nicht als einzelne fertige Seiten gespeichert (index.html …), sonder die Inhalte sind in einer Datenbank. Beim Aufruf einer Seite werden die dazugehörigen Daten aus der Datenbank gelesen und gesteuert durch das Theme am Bildschirm dargestellt. Man nennt die Seiten daher dynamisch (im Gegensatz zu fertig abgespeicherten statischen Seiten).
Widgets sind hinzufügbare Bereiche auf einer Seite, die etwas anzeigen, z. B. die letzten verfassten Beiträge.
Plugins erweitern die Funktion von WordPress, z. B. um die Möglichkeit, dass BesucherInnen etwas hochladen können (wie auf dieser Site die Abgabemöglichkeit), oder indem sie eine Verbindung zu sozialen Medien herstellen.
Die Software WordPress ist gratis und mehrere 100 Millionen Mal im Einsatz. Man kann sie bei vielen Webspace-Anbietern mit wenigen Mausklicks installieren (der Webspace selber ist nicht gratis). Wenn dieses Service der einfachen Installation nicht angeboten wird, braucht man etwas mehr Kenntnisse.
Die einfachste und komplett kostenlose Variante ist, WordPress auf den Servern von Automatic (der Firma, die WordPress programmiert) zu benutzen. Da gibt es dann einige Einschränkungen. Gegen Bezahlung fallen diese Einschränkungen weg.
Für Übungszwecke ist die kostenlose Variante völlig ausreichen und wird werden sie daher benutzen. Als ersten muss ein Konto auf de.wordpress.com eingerichtet werden. Mit diesem einen Konto kann man mehrere Websites anlegen und betreuen.
Eine letzte Bemerkung: Die Firma hinter WordPress ist eine seriöse Firma, man kann getrost ein Konto einrichten und WordPress benutzen.
Ein Konto auf de.wordpress.com einrichten
Die Adresse für die Einrichtung: de.wordpress.com
Was Du brauchst: – eine gültige Email-Adresse – einen Benutzernamen (vergibst Du selber) – ein Passwort (vergibst Du selber) – eine Subdomain (vergibst Du selber): mein Beispiel im Video unten: ai1920.wordpress.com Die Domain wordpress.com ist vorgegeben (und im Besitz von WordPress). Die vorangestellte Subdomain ai1920 habe ich selber ausgewählt (geht aber nur, wenn sie sonst noch niemand benutzt). – Die Möglichkeit, Emails zu lesen.
Anleitungsvideo mit meinem Konto
Info-Zippen
Wähle den Ordner (oder wenn nur einzelne Dateien: einzelne Dateien mit Strg) ausFalls ein anderes Zip-Programm installiert ist, z. B. 7-Zip: analog verfahrenNamen des Zip-Files wenn nötig ändern, mit Eingabe bestätigen
Hochladen-Info
Email und Passwort: vom Lehrer per Email erhalten (bzw. Passwort selber gemacht)Mit gehaltener Strg-Taste können mehrere Dateien ausgewählt werden (in Informatik: die Websites werden gezippt und nicht jede einzelne Datei hochgeladen)
Übung 04 “Boxmodell”
Erste Schritte
In der Übung 04 lernst Du, wie Du mit dem “Boxmodell” das Groblayout einer Seite gestalten kannst. Im Artikel Layout mit dem Boxmodell siehst Du oben die Skizze von einem Groblyout. Es sieht oben einen Kopf vor (z. B. für ein schmales Foto), links eine Navigation, in der Mitte den eigentlichen Inhalt und rechts einen Bereich für z. B. News. Unten schließlich eine Fußzeile (für z. B. das Impressum). Jeder einzelne Behälter (Box) kann Inhalte aufnehmen (Text, Fotos, …).
Eine Box hat verschiedene Eigenschaften, z. B. Breite, Höhe, Hintergrundfarbe usw., die im Stylesheet definiert werden.
Erste Schritte (wie bei jeder Website)
Den lokalen Site-Ordner \uebung05 anlegen, ebenso darin den Foto-Ordner \fotos und den Materialien-Ordner \uebung05_materialien
die Sitedefinition einrichten: Sitename “Übung 05”, lokaler Site-Ordner “uebung05” Site / Neue Site / …
Erstelle die Seite index.html und das Stylesheet style.css erstellen Datei Neu Typ HTML, Datei neu Typ CSS, jeweils gleich speichern
Füge das Stylesheet an die Seite index.html anfügen
Die Syntax ist die gleiche, wie Du sie schon kennengelernt hast: selector{Eigenschaft1:Wert; Eigenschaft2:Wert; …} Der Selector in diesem Fall: div#name_der_box
div# ➜ erzeugt die Box position:relative ➜ gibt eine Methode an, wie man Boxen an eine bestimmte Stelle am Bildschirm hinbekommt (wir verwenden immer “relative”) box1 ➜ ist der Boxname width, height ➜ sind Breite und Höhe background-color ➜ ist die Hintergrundfarbe margin-bottom ➜ Aussenabstand unten, schiebt alles um 10 px weg, in diesem Fall die box2, die darunterkommen wird
Füge box2 ein: stelle den Auszeiger vorher unbedingt rechts ausserhalb von box1 und füge dann box2 ein: Einfügen / Layoutobjekte …
Verfahre ebenso bei box3
Das Ergebnis schaut so aus:
index.html mit drei Boxen, Abstand zwischen den Boxen
Boxen horizontal am Bildschirm zentrieren
Schöner wird das Layout, wenn die Boxen nicht links am Bildschirm picken und rechts die große freie Fläche bleibt. Eine Möglichkeit ist, jede einzelne Box zu zentrieren: Ergänze dafür im Stylesheet jede Box um folgende Zeile:
Sende die Adresse Deiner Website per Email bis Montag 27. 4. 2020
Woche 05: 27. bis 30. 4.
Gehe zum Beitrag WordPress – Teil 01 und arbeite die Schritte 1-5 bis Montag 4. 5. ab. (Wegen der verkürzten Woche und weil einige Gruppen nur 1 Stunde am Plan haben, ist das Programm klein.)
Woche 06: 4.5. bis 8.5.
Gehe zum Beitrag WordPress – Teil 02 und arbeite die Schritte 1-9 bis Montag 11.5. ab.
ACHTE BITTE SORGFÄLTIG AUF DIE ANGABEN UND ANWEISUNGEN!
Woche 07: 11.05. bis 15.05.
Gehe zum Beitrag WordPress – Teil 03 und arbeite die Punkte 1 – 3 ab. Frist: Montag 18. 05. 2020
Woche 08: 18.05. bis 22.05.
Gehe zum Beitrag WordPress – Teil 04 und arbeite die Punkte 1 – 4 ab. Beachte dort die Abgabehinweise.
Den Einstieg in diese neue Phase von Schule wollen wir sanft machen:
Mach ein Portraitfoto von Dir (Smartphone oder Fotoapparat).
Installiere Dreamweaver und Photoshop/oder XnView MP, mache ein Bildschirmfoto vom geöffneten Dreamweaver (findet heraus, wie man ein Bildschirmfoto machen und speichern kann). [Dowload der Programme unter https://unterricht.leo-ertl.space / AI Fernunterricht]
Lade die 2 Fotos gleich noch heute auf https://unterricht.leo-ertl.space unter AI / Upload der Arbeiten hoch. (Dabei musst Du Dich anmelden, die Anmeldedaten (Email, Passwort) hast Du per Email bekommen).
Woche 01: Freitag 20. 3. 2020
Übung 03 “Wintersport”
Diese Übung sollte fertig sein, zur Abgabe ist es nicht mehr gekommen. Daher nur eine kleine Ergänzung und Abgabe.
Prüfe, ob Deine Website in Ordnung ist (Verlinkung, Überschriften, Fotos rechts).
Öffne ein Foto, auf dem Du drauf bist, in Photoshop oder einem anderen Bildprogramm (Paint von Windows reicht dafür auch) und stelle die Breite auf 400 px ein.
Speichere das verkleinerte Foto im Foto-Ordner.
Füge das Bild auf der index.html gegen Ende des Textes vor “Außer …” ein. Vergiss nicht auf den Alternativtext.
Ergänze das Stylesheet um die Klasse .fotolinks, die das Foto links ausrichtet, sodass der Text rechts am Foto vorbeifließt. Ein Muster für so eine Klasse hast Du ja schon, achte nur, wo ein margin angebracht werden muss.
Wende die Klasse auf das Foto an: Foto markieren, unten bei Klasse .fotolinks auswählen.
Zippe den Site-Ordner uebung03, nenne das Zip-File uebung03_nachname.zip und gibt es auf der Website ab, bis Montag 18.00 Uhr (sinnvoll), damit am Dienstag eine neue Übung begonnen werden kann. Viel Erfolg.
Zippe den Site-Ordner uebung04 (uebung04_name.zip) und lade ihn hoch: spätestens bis Montag 30. 3.
Übung 05
Woche 03: Dienstag 31. 3. und Freitag 3. 4. 2020
Gehe zum Artikel Übung 05 und arbeite die Schritte 1-12 ab. Empfehlung: Gib den Zwischenstand (Punkt 12) am Freitag ab, damit ich sehe wie es bei Dir geht.
Wie es nach Ostern weitergeht, wissen wir nicht, wenn wir aber die Medien ein wenig verfolgen, gehen wir eher nicht in die Schule.
