Inhaltsübersicht. I Grundlagen: Wissenswertes übers Web II Vorbereitung: Die Homepage planen

Transkript

1 Inhaltsübersicht Vorwort I Grundlagen: Wissenswertes übers Web Das Internet und das Web Das World Wide Web: Ein weltweites Gewebe Die Browser: Surfen im Web Die Suchmaschinen: Zeichen vergleichen Das Domain Name System: Die automatische Auskunft Die Webseiten: Quelltext auf dem Webspace Webpublishing: Der Weg zum Content Management Social Media, Blogs und Baukästen Gute Seiten, schlechte Seiten II Vorbereitung: Die Homepage planen Die Rahmenbedingungen festlegen Die Konzeption: Gedanken ordnen Webhosting: Domain und Webspace III Umsetzung: Eine Homepage erstellen Eine Homepage mit Jimdo erstellen Die Homepage bei Jimdo gestalten Die Homepage bei Jimdo mit Inhalten füllen Schreiben im Web für Menschen Grafiken fürs Web vorbereiten Schreiben im Web für Maschinen SEO: Die Optimierung für Suchmaschinen IV Werkzeuge zum Selberbauen Werkzeuge zum Selberbauen Stichwortverzeichnis

2

3 Vorwort I Grundlagen: Wissenswertes übers Web Das Internet und das Web Computer und Netzwerke Ein LAN ist ein kleines Netzwerk Router verbinden Netzwerke miteinander Ein großes Netzwerk ist ein WAN Das Internet ist einfach nur ein Computernetzwerk Die Keimzelle des Internets Was man früher im Internet so gemacht hat: und FTP Das World Wide Web: Hypertext im Internet Hypertext ist Text mit Hyperlinks Internet und Web sind also nicht wirklich dasselbe Auf einen Blick Das World Wide Web: Ein weltweites Gewebe Das Web besteht aus Webseiten Hyperlinks verknüpfen Webseiten miteinander Begriffe:»Website«,»Webseite«und»Homepage« Eigentlich korrekt:»website«,»webseite«und»homepage« Im Alltag:»Homepage«und»Webseite«statt»Website«.. 38 Uns fehlt im Deutschen ein gutes Wort für»website« Orientierung im Web: Navigation Eine Website verhält sich anders als ein Buch Navigation dient zur Orientierung innerhalb der Site Auf einen Blick

4 3 Die Browser: Surfen im Web Die bekanntesten Browser Die Browserbedienung im Überblick Blättern durchs Web: Die Symbole ZURÜCK und VOR Die Symbole ABBRECHEN und AKTUALISIEREN Zurück nach Hause: Das Symbol STARTSEITE Lesezeichen: Ihr Adressbuch für das Web Lesezeichen sammeln auf einer Symbolleiste Lesezeichen für Fortgeschrittene Suchen und Finden im Browser Auf einen Blick Die Suchmaschinen: Zeichen vergleichen Suchmaschinen durchsuchen nicht live das Web Der Ablauf einer Websuche Schritt 1: Der Benutzer gibt die Suchbegriffe ein Schritt 2: Die Suchmaschine sucht und findet Schritt 3: Die Ergebnisseite wird angezeigt Zeichen vergleichen: Suchmaschinen denken nicht ToDo: Eine Liste mit Suchbegriffen erstellen Auf einen Blick Das Domain Name System: Die automatische Auskunft IP-Adressen Die Telefonnummern des Internets Domains und IP-Adressen: Namen statt Nummern Der Aufbau von Domain Namen Die Top Level Domain Die Second Level Domain (und alle darunter) Der Aufbau einer Webadresse (URL) ToDo: Gedanken über eine Domain machen Auf einen Blick

5 6 Die Webseiten: Quelltext auf dem Webspace Der Quelltext ist der Bauplan der Webseite Browser bekommen den Quelltext vom Webserver... 73»Webspace«: Speicherplatz zum Veröffentlichen im Web Überblick: Der Browser holt eine Webseite Grafiken werden erst nach dem Quelltext abgeholt Grafiken ausstellen im Browser Quelltext besteht aus HTML, CSS und JavaScript Die Ordnung: HTML ist nicht hübsch, aber flexibel Das Styling: CSS gestaltet die HTML-Elemente HTML und CSS: Die Trennung von Inhalt und Gestaltung JavaScript beeinflusst das Verhalten der Webseite Auf einen Blick Webpublishing: Der Weg zum Content Management Webpublishing war ursprünglich statisch So funktioniert statisches Webpublishing Statische Webseiten sind umständlich zu pflegen Statisches Webpublishing wird interaktiv Das Web ist ein interaktives Medium Ein Kontaktformular als Beispiel zur Interaktion Formulardaten werden von einer Webanwendung verarbeitet Dynamisches Webpublishing: Content Management So funktioniert ein Content Management System (CMS) Ein CMS auf dem eigenen Webspace erfordert Know-how.. 93 Beispiele: WordPress, Joomla!, Contao, Drupal und TYPO Auf einen Blick Social Media, Blogs und Baukästen Social Media: Im Web aktiv ohne eigene Website Themenorientierte Communities statt eigener Homepage. 98 Soziale Netzwerke: Präsentieren Sie sich selbst Soziales Netwerk versus eigene Homepage

6 8.2 Blogger dir einen: Baukästen für Blogs Blogs sind einfache CMSysteme und leicht zu bedienen Beispiele: Fertigblogs vom Bloganbieter »Instant Websites«: Baukästen für Websites Für wen kommt ein Website-Baukasten in Frage? Beispiele: Jimdo, Webnode, Weebly & Co Die Website zu den Baukästen:»websitetooltester.com« Offline-Baukästen: Teurer und nicht so flexibel Auf einen Blick Gute Seiten, schlechte Seiten Die Webseite ist zu Gast beim Surfer Überblick: Sieben Qualitätskriterien Der Inhalt: Darum kommen die Besucher Die Gestaltung: So sieht s aus Die Navigation: Orientierung geben Die Performance: Die Entdeckung der Langsamkeit Die Zugänglichkeit:»Wie Sie sehen, sehen Sie nichts« Der Quelltext: Verborgene Qualitäten Die Interaktion: Mit den Besuchern kommunizieren Die Mischung macht s: Bibliothek und Galerie Die Bibliothek: form follows function Die Galerie: form without function Bibliotheken und Galerien haben unterschiedliche Prioritäten Fazit Auf einen Blick II Vorbereitung: Die Homepage planen Die Rahmenbedingungen festlegen Überblick: Der rote Faden durch das Labyrinth Die Rahmenbedingungen: Ziele, Zeit und Zaster Ihre Ziele und die der Besucher Die Zeit: Bis zur Freischaltung und danach Der Zaster: Für die Erstellung und für die Wartung

7 10.3 Selber bauen, bauen lassen oder Baukasten ToDo: Surftour was machen die anderen? Auf einen Blick Die Konzeption: Gedanken ordnen Die vier Bereiche zur Planung einer Website »Technik«: Das Fundament für die Website Die private Homepage Die Freiberufler-Homepage Die Homepage für Firmen, Vereine und Schulen Der kleine Online-Shop »Inhalte«: Darum kommen Ihre Besucher Schritt 1: Inhalte sammeln Schritt 2: Inhalte sortieren Kategorien und Hierarchien Schritt 3: Inhalte erstellen »Funktionen«: Interaktion und Verwaltung Schritt 1: Funktionen sammeln Schritt 2: Funktionen sortieren Schritt 3: Funktionen erstellen »Gestaltung«: So soll es aussehen Skizzen erstellen Das Layout erstellen » Wartung«: Die Pflege nach der Freischaltung Eine Website ist ein Prozess Wenn sich die Anforderungen ändern Auf einen Blick Webhosting: Domain und Webspace Untermieter: Webspace mit Subdomain Domain überprüfen: Ist»mueller.de«noch frei? Wenn Ihr Wunschname vergeben ist Möglichkeit 1:»pmueller.de«eine andere DE-Domain Möglichkeit 2:»mueller.info«eine andere Top Level Domain Möglichkeit 3: Domain kaufen der Handel mit Domains

8 12.4 Der eigene Webspace Überblick über Webhoster: webhostlist.de Verwirrende Preise: Null Euro Sternchen Der Einstieg: Domain und Mail Die Mittelklasse: Webspace mit PHP und Datenbank Die Oberklasse: Premiumpakete für Experten Fachbegriffe rund um Web- und Mailspace Wie viel Speicherplatz wird benötigt? Wie viel Traffic (Datentransfer) brauchen Sie? Der Zugang zum Webspace: FTP & Co Serverseitige Skriptsprachen: PHP & Co Datenbanken: MySQL und phpmyadmin Sonstige Fachbegriffe rund um den Webspace Der Mailspace: POP3, IMAP und Webmail Auf einen Blick III Umsetzung: Eine Homepage erstellen Eine Homepage mit Jimdo erstellen Bevor Sie beginnen Jimdo im Überblick Die Registrierung bei Jimdo Schritt 1: Web-Adresse und Mail-Adresse eingeben Schritt 2: Captcha eingeben und Website erstellen Schritt 3: Die mit den Zugangsdaten Jimdo kennen lernen First Contact Die Beispielsite von Jimdo in der Übersicht Die erste Anmeldung an Ihrer Homepage Zu Ihrer Sicherheit: Das zugeschickte Passwort ändern Die Layoutbereiche einer Jimdo-Page Den Inhalt auf der Startseite ändern Die Überschrift auf der Startseite ändern

9 Text auf der Startseite löschen und neu eingeben Einen Hyperlink erstellen Ansichts- und Bearbeitungsmodus bei Jimdo Auf einen Blick Die Homepage bei Jimdo gestalten Entdecke die Möglichkeiten in fünf Schritten Schritt 1: Das Layout auswählen Die Layout-Vorschau Ein neues Layout zuweisen Schritt 2: Den Hintergrund ändern Schritt 3: Das Titelbild austauschen Schritt 4: Den Titel der Website ändern Schritt 5: Die Navigation anpassen Auf einen Blick Die Homepage bei Jimdo mit Inhalten füllen Jede Seite beginnt mit einer»überschrift 1« Die Elemente»Textfeld«und»Bild mit Text« Nur ein Bild: Das Element»Bild« Mehrere Bilder: Das Element»Bilder-Galerie« Ein funktionierendes Kontaktformular Weitere nützliche Elemente im Überblick Auf einen Blick Schreiben im Web für Menschen Wie Menschen im Web lesen Und es hat Zoom gemacht: Lesen am Bildschirm Webseiten werden nicht gelesen, sondern überflogen Zwischenlandung: Scannen Skimmen Lesen Verständliche Texte: Die Hamburger Pyramide Pulitzer und das Hamburger Verständlichkeitsmodell Die umgekehrte Pyramide: Das Wichtigste am Anfang

10 16.3 Übersichtliches Schreiben: Texte scannbar machen Überschriften und Zwischenüberschriften Schreiben Sie kurze Absätze Heben Sie wichtige Worte hervor Benutzen Sie Listen Abstände und Schriften: Fließtext gestalten Abstand halten im Fließtext Schnörkel oder nicht Schnörkel: Schriften und Serifen Sie können nicht jede Schriftart benutzen Der Umgang mit Hyperlinks Linken Sie nicht nur des Linkens wegen Das»Hier«-Syndrom: Klicken Sie hier Benutzen Sie Linklisten Beschreiben Sie Downloadlinks deutlich Zürich, die Stadt, die die Römer Turicum nannten Übung: Caipirinha in Jimdo Rezept für Caipirinha die Ausgangssituation Die Überschrift:»Rezept für eine Caipirinha« Der Teaser: Blickfang und Einleitung Zutaten und Utensilien: Überschrift 2 und Aufzählung Die Zubereitung: Überschrift und Nummerierung Das Jimdo-Menü STYLE zur Gestaltung des Fließtextes Auf einen Blick Grafiken fürs Web vorbereiten Webgrafiken Das Wichtigste in Kürze Grafiken laden länger als Text Frisch aus der Kamera: Bildgröße und Dateigröße Im Web sind nur GIF, JPEG oder PNG erlaubt Grafiken Woher nehmen und nicht stehlen? Vorsicht bei Grafiken von anderen Webseiten Die Google-Bildersuche ist keine gute Quelle pixelio.de kostenlose Bilddatenbank für lizenzfreie Fotos

11 CreativeCommons und flickr.com Andere Websites mit lizenzfreien Fotos Fotos für das Web vorbereiten mit picnik.com Ohne Registrierung: Bilder mit Picnik online bearbeiten Ein Foto in Picnik bearbeiten »Zuschneiden«: Einen Ausschnitt bestimmen »Größe ändern«: Die Bildgröße verkleinern Die bearbeitete Grafik abspeichern Know-how: JPEG, GIF und PNG im Detail Besonderheiten von JPEG: Kompressionsrate vs. Qualität Besonderheiten von GIF: Interlaced, Transparenz und Animation Besonderheiten von PNG: Alphatransparenz JPG, GIF und PNG im Überblick Auf einen Blick Schreiben im Web für Maschinen Wie Maschinen im Web lesen Robots sammeln den Quelltext der Webseiten ein Suchmaschinen lesen auch den head-bereich Übersichtliches Schreiben hilft auch bei Suchmaschinen Sprechen Sie die Sprache Ihrer Benutzer Einige HTML-Elemente sind wichtiger als andere Suchbegriffe in Überschriften Suchbegriffe in Hervorhebungen Suchbegriffe in Hyperlinks und Listen Nicht zugänglich: Wie Sie sehen, sehen Sie nichts Suchergebnis, Seitentitel und Seitenbeschreibung Übung: Seitentitel und -beschreibung bei Jimdo Der Seitentitel Die Seitenbeschreibung Auf einen Blick

12 19 SEO: Die Optimierung für Suchmaschinen Ranking: Bei Google auf Platz Google mag Hyperlinks Backlinks: Hyperlinks, die auf Ihre Homepage zeigen Ein Beispiel: IKEA in Groningen Die Suche nach»ikea Groningen Öffnungszeiten« Die Site gibt es schon länger und der Inhalt wird gepflegt Es zeigen viele Links auf die Site Die Site ist suchmaschinenfreundlich geschrieben Fazit: Gut schreiben und fleißig linken Ihre Homepage bei Google Die Maßnahmen bis jetzt im Überblick Einige nützliche Dienste von Google Auf einen Blick IV Werkzeuge zum Selberbauen Werkzeuge zum Selberbauen Browser zum Testen von Webseiten Die aktuellen Browser in der Übersicht Verschiedene IE-Versionen auf einem Rechner Editoren zum Erstellen von Webseiten Quelltext-Editor oder visueller Editor Übersicht: Editoren für den Quelltext Visuelle Editoren: Dreamweaver & Co Editor und Browser im Alltag: Per Tastatur wechseln Editoren zum Bearbeiten von Grafiken FTP: Veröffentlichen von Webseiten HTML und CSS:»Das große Little Boxes-Buch« Stichwortverzeichnis