Anleitung eigene Homepage

Anleitung eigene Homepage
1
Firefox einrichten u starten (geleitete Aktivität)
2
Homepage von Peter Vollenweider: schreib1buch.com:
Detailliertes Handbuch:
http://schreib1buch.files.wordpress.com/2012/10/galileocomputing_wordpress_3.pd
f
3
Mailadresse genehmigen
Bevor wir einen ersten Beitrag posten können, müssen wir unsere Mailadresse
bestätigen. Damit stellt WordPress.com sicher, dass die wichtigen Nachrichten
des Blogs an die richtige Adresse gehen; dies ist aus Sicherheitsgründen
erforderlich. Wir haben bereits im Webmail-Beitrag gesehen, dass
WordPress.com Ihnen eine Meldung schickt, bei welcher Sie einen
Aktivierungsknopf anklicken müssen, um Ihren neuen Blog bei wordpress.com
zu aktivieren (Mailadresse genehmigen). Um dies direkt und unverzüglich im
Kurs tun zu können, arbeiten wir mit Webmail. Allerdings kann die Mailadresse
ohne weiteres auch mittels Smart Phone genehmigt werden, falls Sie über ein
solches verfügen.
Die Abbildung zeigt den blauen Knopf für die Bestätigung.
4
5
Eine Homepage = Blog, in unserem Falle gratis mit WordPress erstellt und betrieben
Sie wird mit CMS ersteltl (Content Management System):
1. Hauptseite
1.1. Seite
1.1.1.Unterseite
1.1.1.1.
Unterunterseite
4 Elemente sind dabei wichtig:
1. Die einzelnen Beiträge sind chronologisch aufgelistet (Blog), von unten nach oben
(rechts)
Statische Seiten = horizontale Hauptnavigation, z.B. die Startseite mit Impressum
und Übungen
2. Suchmaschine, bezieht sich allerdings lediglich auf die eigenen Homepage
3. Mediathek: Bilder, PDFs, Dokus. (das Bild auf der Startseite hat 980 Pixel in der
Breite). Der PDF-Reader ist direkt in Firefox integriert.
4. Kommentare: social media, nicht nur 1-Weg Kommunikation ist möglich, sondern
der Leser kann Feedback geben = Kommentar
Registrieren einer neuen Homepage:
Unter Firefox: „schreib1buch.com“ eingeben (Konto von Peter Vollenweider) und in
der rechten Spalte „Registrieren“ anklicken. Dann folgendes eingeben:
E-Mail Adresse: [email protected]
Benutzername: joergvilliger (alles klein geschrieben)
Passwort:
adlers/10
Blogadresse:
villigerblog.com (von WordPress vorgeschlagen)
Danach mit blauem Knopf bestätigen. Daraufhin sendet WordPress ein BestätigungsE-Mail das wieder mit einem blauen Knopf aktiviert wird.
Danach kann‘s losgehen:
Homepage lautet: villigerblog.wordpress.com
Bearbeitungs-homepage lautet: villigerblog.wordpress.com/wp-admin
Am besten werden mit 2 Tabs beide geöffnet, so kann man immer kontrollieren wie
die Bearbeitung wirkt.
Eine weitere neue Homepage kann mit Aktivieren von „Erstellen eines neuen Blogs“ ,
auf der Homepage rechts unten, initiiert werden
6
Einloggen:
Firefox starten
villigerblog.wordpress.com
Bearbeitbare Seite: villigerblog.wordpress.com/wp-admin
-Email: [email protected] oder Username: joergvilliger
- Passwort: adlers/10
Nun ist die bearbeitbare Seite Dashboard offen und die Arbeit kann beginnen
Deutsche Sprache:
Rechts oben in joergvilliger gehen
Sprache der Oberfläche: de-Deutsch wählen u zuunterst Änderungen speichern
TwentyTen aktivieren ( free homepage, sonst kostet es 15 Euro pro Jahr):
Design wählen -> Theme -> Populär -> anpassen (oder es steht dort bereits: Aktiv:
Twenty Ten)
7
8
8.1
8.2
Nutzeransicht (nicht bearbeitbar)
Zuoberst ist der Blogname
Dann kommt das Titelbild
Darunter die Menüleiste mit den Beiträgen (chronologisch) und den Seiten
(hierarchisch). Auf der Menüleiste sollten maximal 7-9 Menüs sein, sonst wird’s
unübersichtlich!
Darunter kommt der aktuelle Blog (Beiträge)
Dashboard-Ansicht (bearbeitbar)
Blogadresse eingeben und mit /wp-admin ergänzen (villigerblog.wordpress.com/wpadmin)
Links ist die Navigationsleiste, mit den einzelnen möglichen
Oben ist eine Menüleiste mit vereinfachtem Zugang zum Neuer Beitrag schreiben,
Bloggername joergvilliger in dem ich mein Profil ändern kann,
dann ein  Stern indem die neusten Beitrage und Kommentare gefunden werden
(nach dem Öffnen ändert der Stern zu ,
dann dieLupe mit der Suchfunktion
Dashboard-Startseite:
Zeigt einen Überblick über die gesamte Homepage
Rechts Hilfreiche Ressourcen, ein Shortcut zu verschiedenen Anpassungen z.B.
Titelbild (Blavatar) oder Profil
Store: es können erweitere Nutzungen eingekauft werden, falls gewünscht
8.3
Beitrag erstellen ab Dashboard:
- Beiträge
- Erstellen
- Titel eingeben, z.B. Hello World
- Text eingeben, z.B. Liste erstellen
- Abschliessen mit Publizieren (rechts), nach ca. 1 Woche erscheint der Beitrag
auch auf Google.
Wenn ein Beitrag von anderen Nutzern nicht gesehen werden soll:
Den weissen Knopf „Speichern“ anstatt des blauen Knopfs „Publizieren“ betätigen.
Damit ist der Beitrag gespeichert, aber er kann von anderen nicht eingesehen werden.
8.4
Mediathek: Bilder, Dokumente, PDFs
Bild auf der Startseite ändern:
Dashboard -> Design -> Themes -> (Startseite wird gezeigt, Aktiv: TwentyTen) ->
anpassen -> (Startseite wird vergrössert gezeigt) rechts Header wählen -> (Auswahl
der verschiedenen Bilder wird gezeigt) auswählen -> speichern -> zurück zum
Dashboard: <- oben links
8.5
Links welche mit dem Beitrag verbunden werden können
8.6
Seiten: man kann feste Seiten mit Untermenüs machen. Seiten sind im Gegensatz zu
den Beiträgen statischer, bleiben länger, sind fix.
Die Hauptseite erscheint als Menü auf der Startseite und darunter können die
einzelnen Seiten direkt angewählt werden.
- Hauptseite
- Seite
- Unterseite
- Unterunterseite
Alle Seiten: bietet einen Überblick über die bislang erstellten.
Erstellen (Vorgehen): hier kann eine neue Seite erstellt werden.
1. Erste Seite (Hauptseite)
a. Titel eingeben (Stadt Baden, Zeichnungen)
b. Darunter Einleitung eingeben
c. Bei Seiten-Attribute -> Hauptseite eingeben
d. Publizieren
2. Zweite Seite (Mellingerstrasse 34)
a. Titel eingeben: Mellingerstrasse 34
b. Dateien hinzufügen: Zeichnung
c. Text aus Datei kopieren und einfügen
d. Bei Seiten-Attribute Hauptseite (Stadt Baden, Zeichnungen wählen)
dann
e. Reihenfolge -> 1 (Seite 1)
f. Publizieren
8.7
Kommentare: wir können Kommentare anderer genehmigen oder zurückweisen ->
Papierkorb.
Ein roter senkrechter Strich bedeutet, dass diese Kommentare noch nicht genehmigt
sind.
8.8
Rückmeldung: es können Umfragen erstellt werden, mit Bewertungen
8.9
Design:
Themes:
Anpassen, z.B. einstellen von Twenty Ten
Widgets
Menüs
Hintergrund
Individuelles Design
8.10
Benutzer:
Um eine eigene Homepage einzurichten, haben Sie ja bereits im Rahmen einer
geleiteten Aktivität einen neuen Benutzernamen für WordPress gewählt, z.B.
felixmuster. Es gibt aber nicht nur Benutzerkonti mit Homepage, sondern auch
Konti bei wordpress.com, die nicht mit einer eigenen Website verbunden sind.
Im Kurs beschäftigen wir uns allerdings nicht mit der Verwaltung weiterer
Benutzer, da wir uns weniger mit zusätzlichen Passwörtern herumschlagen
möchten. Die Erfahrung hat gezeigt, dass die Senioren die Passwörter nicht aus
ganzem Herzen lieben.
Die E-Mail-Adresse gehört immer zu unserem Benutzerkonto, also zu unserem
persönlichen Profil, desgleichen das freiwillige Passfoto-Bild. Es ist möglich,
die Mailadresse zu ändern/wechseln. In diesem Fall schickt uns wordpress.com
aus Sicherheitsgründen nochmals ein Mail, das wir bestätigen müssen.
8.11
8.11.1
8..11.2
8.11.3
8.11.4
8.12
8.12.1
Werkzeuge
Verfügbare Werkzeuge:
Daten importieren:
Die ganze Homepage kann mittels Press This auf einen Stick kopiert werden.
Danach kann der Blog gelöscht werden und mit dem Stick kann man den
Inhalt bei einem anderen Provider wieder laden. (hier ist noch nicht alles ganz
klar. Im gegebenen Fall WordPress-Anleitungen im Internet konsultieren)
Blog löschen:
In diesem Bereich kann die URL-Adresse geändert werden.
Daten expotieren
Hier können alle Daten exportiert werden und auf eine neue Homepage
übernommen werden.
Einstellungen:
Allgemeine Einstellungen:
Blog-Titel:
villigerblog
Slogan:
meine Homepage
Zeitzone:
Zürich (es gibt eine grosse Auswahl von Orten weltweit und
von UTC-Zonen. Um Zürich anzuwählen muss zuerst Europa
angewählt werden).
Datumsformat: 2. Dezember 2014 (Vorgabe)
Zeitformat:
17:24
Sprache:
de-Deutsch
Schnee:
ein Gag, der von irgendwelchen Nutzern hier programmiert
wurde. Falls angewählt würde bis zum 4. Januar diagonale
Schneeflocken über den Bildschirm gleiten (völlig unnötig und
eher verwirrend).
8.12.2
Schreiben:
Keine Änderungen
8.12.3
Lesen:
Startseite zeigt: Deine letzten Beiträge (normalerweise den letzten Blog
zuerst).
Die statischen Seiten bleiben fix und gehören eher nicht auf
die Startseite, ausser bei einem Geschäft, dessen Auftritt ein
gleichbleibender sein soll.
Blogseiten zeigen maximal: ist jetzt auf 10 Beiträge gesetzt. Das heisst, nach
10 Beiträgen verschwindet der Rest in den Hintergrund. Er ist
nicht verloren, wird aber nicht mehr für Aussenstehende
angezeigt. Die Zahl kann problemlos erhöht werden, falls
nötig.
Sichtbarkeit des Blogs: (Suchmaschine oben rechts betrifft nur die eigene
Homepage). Hier sind Suchmaschinen wie Google etc.
gemeint, denen man den Zugriff (indexieren) auf die eigene
Homepage erlauben kann, so dass die Homepage weltweit
weiter gestreut wird.
Wenn jemand einen solchen Zugriff verhindern will, dann den
2. Knopf wählen (macht aber wenig Sinn).
Veröffentlicht werden nur Beiträge, die „publiziert“ sind.
„Gespeicherte“ Beiträge bleiben ohnehin unsichtbar.
Wenn man den Hinderungsschalter erst nachträglich betätigt,
dann werden Beiträge erst ab diesem Zeitpunkt gehindert. Der
Rest bleibt auf den Suchmaschinen. Wenn man das verhindern
möchte, dann muss die Homepage gelöscht (kopiert/gelöscht)
werden und man muss ganz neu beginnen, mit einem neuen
Benutzernamen.
Sichern des Blogs gegen aussen (damit Suchmaschinen den
Blog nicht erfassen/indexieren können):
Einstellungen -> Lesen -> Sichtbarkeit des Blogs -> Ändern ->
Suchmaschinen daran hindern, diese Seite zu indexieren.
Damit kann der ganze Blog z.B. von Google nicht gefunden
werden.
8.12.4
Diskussionen:
Hier geht es um die Kommentare, grundsätzlich alles so belassen wie es
vorgegeben ist, damit ist gesorgt, dass:
Jeder Kommentator muss mit seinem Kommentar grundsätzlich seine E-Mail
Adresse abgeben, ich erhalte also eine direkte Kontaktmöglichkeit.
Zudem muss ich den Kommentar freigeben, damit er auf der Homepage von
anderen eingesehen werden kann.
Kommentare können auch problemlos gelöscht werden: Kommentar
anklicken, dann erscheint darunter unter anderem Papierkorb (in rot). Mit
dem Anklicken verschwindet der Kommentar vollständig. Sollte man sich
getäuscht haben, so besteht rechts oben noch die Möglichkeit von Widerruf
(in blau).
8.12.5
Mediathek:
Hier sind für verschiedene Bildgrössen die vorgesehenen Pixel angegeben.
Diese Pixel können bei Bedarf geändert werden.
8.12.6
Sharing:
Facebook - Google - Twitter etc diese Dienste erscheinen auf jeder Seite. In
der Rubrik „Aktivierte Dienste“ können die Icons in die rechts stehende
Schaltfläche gezogen werden und dadurch deaktiviert werden.
9
Browser-Cache löschen:
Unter Chronik -> Neuste Chronik löschen und bestätigen
Dann PC abschalten
Übungen (Aufgaben vom 18. November 2014:
- Bild festlegen auf der Startseite
- Beitrag verfassen
Sichern des Blogs gegen aussen (damit Suchmaschinen den Blog nicht
erfassen/indexieren können):
Einstellungen -> Lesen -> Sichtbarkeit des Blogs -> Ändern -> „Suchmaschinen daran
hindern, diese Seite zu indexieren“.
Damit kann der ganze Blog z.B. von Google nicht gefunden werden.
10
11
Wenn ein Beitrag von anderen Nutzern nicht gesehen werden soll:
Dein weissen Knopf „Speichern“ anstatt des blauen Knopfs „Publizieren“ betätigen.
Damit ist der Beitrag gespeichert, aber er kann von anderen nicht eingesehen werden.
12
Interessante Fragen und Antworten zur Homepage im Allgemeinen:
Im Blog von Peter Vollenweider auf der Startseite http://schreib1buch.com/ unter
Weiterlesen…….
13
Werkzeugleiste in Beiträgen und Seiten:
( die Symbole entsprechen nicht in jedem Fall denjenigen auf dem Bildschirm)

=Normal sind 2 Zeilen von Werkzeugen sichtbar, falls nicht, hinterstes
Symbol, Umschalter Werkzeugliste, anklicken
B (Bold) = Fettdruck, Regel: eher Fett schreiben und nicht Kursiv, weil auf dem
Bildschirm weniger Bitpunkte sind, kann Kursiv schlecht lesbar werden.
I (Italic) = Kursiv
ABC
= durchstreichen

= Gliederung (Aufzählliste und Nummerierungsliste) sehr gut für
Textstrukturierung!
“
—
Ξ



ABC
= Zitat: ist vor allem in wissenschaftlichen Beiträgen aus anderen Quellen
wichtig
= Waagerechte Linie zum Unterteilen von Text
= Bündigkeit
= Link hinzufügen: Textteil markieren, dann Linkknopf drücken, und einen
Link eintippen. Nun ist dieser Textteil blau und unterliniert und man kommt
direkt auf
den Link
= Link entfernen
= More-Tag/Weiterlesen ->: d.h. Artikel ist nicht in der vollen Länge lesbar.
Cursor an die gewünschte Stelle des Unterbruchs positionieren, dann den
Knopf drücken, und der Rest des Textes ist dann unter Weiterlesen zu
finden. Achtung: der More-Tag funktioniert nur bei Beiträgen, nicht bei
Seiten!
= Korrekturlesen/Rechtschreibung

= Umschalter Werkzeugliste: Normal sind 2 Zeilen von Werkzeugen sichtbar,
falls nicht, Umschalter anklicken
.
Absatz˅ =Formatierung, ganz wichtig: Überschrift2 ist ideal für das Design TwentyTen.
(Serienschrift mit kleinen Füssen ist Standard in TwentyTen)
U
= unterstrichen: nicht empfohlen, weil unterstreichen normal für Links
gebraucht.
≡
= Blocksatz: Blockformat mit Randausgleich, wird kaum benützt.
A
= Textfarbe: ist möglich, aber mit Zurückhaltung benützen
T
= Paste as Text: man kann unformatiert Text so eingeben (übernimmt Texte
aus Word etc. über Copy and Paste. Courier-Schrift, d.h. jeder Buchstabe ist
gleich breit)
Copy and Paste geht bei WordPress auch für Tabellen problemlos,
vorausgesetzt, die Tabellenbreite stimmt mit dem Format überein.
 = Radiergummi (entfernt z.B. Fettschrift aus Text, ev. auch Farbe)
Ω
= Special Character: damit können Symbole anderer Sprachen eingegeben
werden, pro Knopfdruck allerdings nur ein Symbol!, z.B. Griechisch od 中文

= Einzug/Auszug: betrifft Gliederung des Textes
 = Widerrufen / Wiederholen: betrifft die letzten Aktionen auf dem PC
○;?
= Tastaturkürzel: Liste von Kurzbefehlen für Formatierung
14
Bilder einfügen:
 Bilder aus dem Internet: mit rechter Maustaste -> speichern unter -> Desktop ->
Bild.jepg, oder Bild.jpg -> speichern. Dann das Bild direkt in die Mediathek ziehen
(drag & drop).
 Bild aus der Mediathek löschen: Bild anklicken, dann endgültig löschen (rechts
unten).
 Bild in Text einsetzen: Cursor in Text setzen, dann oben Dateien einfügen ->
Mediathek -> und von dort direkt an die Stelle ziehen.
 Bild als Titelbild der Homepage einfügen: Design -> Anpassen -> Header (rechts) ->
Bilder -> Bild hinzufügen -> eigenes Bild -> Bild zuschneiden (kommt von selbst) > wird zu den Headern hinzugefügt und kann von dort angewählt werden. Man
kann verschiedene eigene Header kreieren und von diesen auswählen.
15
PDFs einfügen: gleiches Vorgehen wie bei Bildern
Idee: PDFs in neuem Tab öffnen, falls entsprechend eingestellt ist, erleichtert das
Arbeiten.
16
Schutz von Text:
Text in WordPress ist zwar passwort-geschützt. Kann aber trotzdem kopiert werden
und danach durch Fremde bearbeitet werden.
Hingegen können Seiten als „privat“ gekennzeichnet werden. Dadurch kommt man
nur über das Dashboard mit Passwort rein:
 Bei Beiträgen und Seiten -> rechts: Sichtbarkeit -> Bearbeiten ->
„Privat“ wählen !!! ->OK
 Es kann auch „Passwortgeschützt“ gewählt werden. Dadurch erhalten Freunde
mit dem Passwort Zugang und können die Dateien anschauen. Ist beliebt für
Ferienfotos etc.
17
Widgets
(funktioniert wie ein Gadget)
Definition:
das Mätzchen
Das Dingsbums
Komponente einer Benutzeroberfläche
Beispiele:
Kalender, Bilder, Blogstatistik, Kontaktinfos, Links
Wie gelange ich zu den Widgets:
auf der Dashboard-Seite oben links „villigerblog“ anklicken, in der
erscheinenden Liste ist zuunterst „Widgets“
Widgetbereiche:
Auf jeder Seite sind rechts senkrecht der erste und zweite Widgetbereich
Unten sind waagrecht der erste bis vierte Footer-Widget-Bereich.
Widget importieren, z.B. Kalender:
1. Im linken Teil der Widget-Seite „Kalender“ suchen, packen, und auf den
rechten Teil der Seite in den gewünschten Widget-Bereich ziehen.
2. Dann auf der Homepage oben im URL-Bereich rechts „Aktualisierung“ 
drücken. Damit erscheinen die gewählten Widgets, in diesem Fall der
Kalender, auf allen Seiten der Homepage.
Kontaktinfo-Widget ist eventuell hilfreich.
Bild-Widget: geht nur über URL, nicht direkt über Mediathek, obwohl dort das Bild
auch eine URL hat. Aus der Mediathek wird das Bild riesig und es gibt keine
Möglichkeit es auf das gewünschte Mass zurechtzuschneiden
18
19
Homepage um Smartphone:
Der Auftritt der Homepage kann auf dem Smartphone wie folgt verbessert werden
(Bild- u Textqualität):
 Design
 Mobile
 Mobileoptimiertes Theme aktivieren? -> Ja
Damit ist die Verbesserung aktiv.
Den Rest der Optionen belassen auf Nein
Übungen:
1. Öffnen mit Windows oder Adobe Photoshop
E-Mail speichern und verlinken über Desktop -> auf Mediathek
 Wenn der Pfad nicht klar ist, dann in Downloads suchen.
2. 120 Seiten Einführung auf Desktop laden und danach auf Homepage
(Unterseite) einfügen:
a) Schreib1buch.com -> Impressum -> Einführung -> Ziel speichern unter ->
Name ergänzen mit .pdf (zur Sicherheit)
b) Mediathek öffnen -> Datei hinzufügen -> drag & drop
c) Neue Seite erstellen:
- 1. Titel eingeben
- 2. Dateien hinzufügen
- 3. In Seite einfügen
d) Seiten-Attribute:
a. Übergeordnet -> About
b. Reihenfolge -> 1
e) Publizieren
f) Falls doppelt vorhanden: eines anklicken und rechts unten endgültig
löschen.