Einstieg Wie komme ich zu meinem eigenen Internet

1
Einstieg
Wie komme ich zu meinem eigenen InternetAuftritt?
Version 1.4
April 14
Seite 2/26
Inhaltsverzeichnis Einleitung ..................................................................................................................... 3 Ablauf und Lernziele................................................................................................. 3 Lernziele: .............................................................................................................. 3 1. Technologien und Begriffe .................................................................................... 3 Allgemeines: Das Internet ist mehr als das Web...................................................... 3 IP-Adressen und Domainnamen........................................................................... 4 DNS ...................................................................................................................... 5 Kleine, aber wichtige Unterschiede: Homepage, Webseite, Website ...................... 6 Das Web ist nicht aus Papier ................................................................................... 8 Was wir nicht wissen können................................................................................ 8 Aufbau einer Webseite ......................................................................................... 8 Verschiedene Sprachen ....................................................................................... 9 Übung: Meine allererste HTML-Datei ................................................................. 12 HTML Crash-Kurs ............................................................................................... 12 Übung: Meine allererste HTML-Datei Teil 2 ....................................................... 14 CSS Crash-Kurs ................................................................................................. 15 Ablauf, wenn Sie eine Webseite aufrufen ........................................................... 16 URL ..................................................................................................................... 16 2. Vorüberlegungen/ Vorbereitung .......................................................................... 18 Namensgebung .................................................................................................. 18 Registrierung ...................................................................................................... 18 Speicherplatz.......................................................................................................... 19 Inhalt und Design ................................................................................................ 19 3. «Werkzeug-Kiste» ............................................................................................... 23 «Von Hand» ........................................................................................................ 23 CMS .................................................................................................................... 23 HomePage Tool Yola.......................................................................................... 24 4. Budget ................................................................................................................. 25 5. Umsetzung: Meine erste Webseite mit Yola ....................................................... 26 Yola aktivieren ........................................................................................................ 26 Seite 3/26
Einleitung
Ablauf und Lernziele
1.
2.
3.
4.
Technologien und Begriffe
Von der Idee zur Webseite (Vorüberlegungen/Vorbereitung)
«Werkzeug-Kiste» - Was brauche ich, was kostet es?
Umsetzung: «Meine erste Webseite» mit Yola
Lernziele:
•
•
•
•
•
Sie kennen die wichtigsten Begriffe und Protokolle der Webtechnologie.
Sie können alle Schritte zum Erstellen Ihres Internet-Auftritts durchführen –
von der Registrierung des Domain-Namens bis zum Publizieren mit dem
HomePageTool.
Sie kennen verschiedene Möglichkeiten, wie Sie eine Webseite erstellen und
aktualisieren können.
Sie kennen die wichtigsten Gestaltungsregeln in Bezug auf
Benutzerfreundlichkeit.
Die zu erwartenden einmaligen und wiederkehrenden Kosten für Ihren
Internet-Auftritt sind Ihnen bekannt.
Kurze Einstiegsübung: Welche Begriffe kennen Sie und was bedeuten diese für Sie?
Wie Sie gemerkt haben, können gewisse Begriffe abhängig von der Erfahrung und
dem Vorwissen unterschiedlich interpretiert werden. Es sind aber auch Irrtümer und
falsche Vorstellungen weit verbreitet. Unter Umständen kann Halbwissen mehr
verwirren, als gar nichts über ein Thema zu wissen. Darum erlauben Sie mir, Ihnen
einige weitere zentrale Begriffe und die wichtigsten Web-Technologien kurz zu
erklären.
1. Technologien und Begriffe
Das Internet ist ein weltweites Netzwerk, bestehend aus vielen Rechnernetzwerken,
durch das Daten ausgetauscht werden. Die bekanntesten Dienste im Internet sind
wohl E-Mail und das World Wide Web. Diese machen aber nur einen Teil des
Internets aus. Viele der anderen Protokolle, wie DNS, NTP, RTP, SIP1 werden von
spezialisierten Anwendungen benutzt, andere, wie NNTP verlieren etwas an
Bedeutung, das sie durch Dienste auf dem WWW ersetzt werden.
Allgemeines: Das Internet ist mehr als das Web
E-Mail ist nur eine Art von Datenübermittlung, Webseiten inkl. Bilder und Videos eine
weitere. Heute werden selbst riesige Datenmengen von Radio, Fernsehen oder
Telefonie via Transmission Control Protocol/Internet Protocol (TCP/IP) versendet.
1
DNS: Domain Name System
NTP: Network Time Protocol (Zeitsynchronisation zwischen Computern)
RTP: Real-Time Transport Protocol (Audio, Video)
SIP: Session Initiation Protocol (Telefonie, VOIP: Voice over IP)
NNTP: Network News Transfer Protocol (Newsgroups)
Seite 4/26
Historisches
Entwickelt wurde das Internet (arpanet) ursprünglich im militärischen Umfeld. Es ging
den Amerikanern zur Zeit des Kalten Kriegs (in den späten 60er und 70er-Jahren)
darum, die anfällige zentralistische Netzwerkarchitektur durch ein dezentrales
System mit vielen unabhängigen Querverbindungen zu ersetzen. Dadurch sollte
verhindert werden, dass ein Atomschlag einen Totalausfall des Netzwerks
verursachen kann und die Kommunikation zwischen militärischen
Kommandozentralen verhindern würde. Das führte zur Entwicklung der
Internetprotokolle.
Diese Internetprotokolle regeln die Verbindung, bzw. den Transport der Daten
zwischen verschiedenen Rechnern und sorgen dafür, dass die einzelnen
Datenpakete in der richtigen Reihenfolge beim Empfänger ankommen.
Anwendungsprotokolle
Anwendungen, die auf diesen Protokollen aufbauen, sind unter anderem das World
Wide Web (HTTP, HTTPS, FTP), E-Mail (SMTP, POP, IMAP) oder das Domain
Name System (DNS).
Für die verschiedenen Anwendungsprotokolle, benötigen Sie jeweils spezialisierte
Programme.
Dienst
WWW
Anschauen von
Webseiten
Mail
Senden und
Empfangen von
Nachrichten
File Transfer
Übertragen von
Dateien (Dokumente,
Webseiten, Bilder) von
und zu einem Server
Protokoll
http
https
smtp
pop
imap
ftp
sftp
ftps
Programm
Browser
• Microsoft Internet Explorer (Windows)
• Mozilla Firefox (Windows, Mac, Linux, AndroidSmartphone)
• Apple Safari (Mac, Windows, iPhone)
• Google Chrome (Windows, Mac, Linux)
• Opera (Windows, Mac, Linux, Telefone, Tablets)
Mailprogramm
• Microsoft Outlook (Windows)
• Mozilla Thunderbird (Windows, Mac, Linux)
• Apple Mail (Mac)
FTP-Programm
• Filezilla (Windows, Mac, Linux)
• Cyberduck (Mac, Windows)
IP-Adressen und Domainnamen
Die Adressierung der Computer über das Internet erfolgt mit sogenannten IPAdressen. Bisher und heute noch vorwiegend sind das IPv4 Adressen. Diese werden
mit vier durch Punkte voneinander getrennten ganzen Zahlen zwischen 0 und 255
dargestellt, also beispielsweise 130.59.31.245. Damit sind über vier Milliarden
Adressen darstellbar. Obwohl das nach viel klingt, sind die Adressen ausgegangen.
Seite 5/26
Im Februar 2011 hat die IANA (Internet Assigned Numbers Authority) die letzten frei
verfügbaren IPv4 Adressblöcke an die APNIC (Asia-Pacific Network Information
Center), einer der fünf regionalen Internet Registry (RIR) ausgegeben. Damit wurde
eine Bedingung für eine Abmachung erfüllt, wonach die letzten fünf Adressblöcke (à
jeweils etwa 16 Millionen Adressen) auf die fünf Regionen verteilt werden. Per Ende
2012 dürften die IPv4 Adressen endgültig aufgebraucht sein.
Figure 1: Die 5 regionalen Registries (RIRs) von Internet Adressen
Obwohl das Nachfolgeprotokoll, IPv6 (eine Version 5 gab es nie) bereits mehr als 15
Jahre alt ist (es wurde 1995 vorgeschlagen und 1998 verabschiedet), begannen viele
Anbieter erst in den letzten Jahren, damit Ihre Geräte und Software IPv6-tauglich zu
machen. Ob Ihre Verbindung via IPv6 funktioniert, können Sie testen2.
Wenn Sie Ihre Webseiten bei switchplus hosten, sind Ihre Webseiten sowohl über
IPv4 als auch über IPv6 jederzeit erreichbar, weil switchplus nach dem Welt-IPv6Tag im Sommer 2011 den Parallelbetrieb eingeführt hat. Vor wenigen Wochen (8.
Juni 2012 haben Firmen wie Google, Facebook, Bing, Yahoo umgeschaltet.
Mit IPv6, deren Adressaufbau normalerweise 8 mit Doppelpunkt getrennte in
sogenannter hexadezimalschreibweise geschriebene Blöcke umfasst (z. B.
http://[2001:620:0:ff:0:0:0:7], können rund 340 Sextillionen Adressen angesprochen
werden. 1 Sextillion hat 35 Nullen. Selbst bei pessimistischsten Rechenvarianten
bedeutet dies, dass auf jedem Quadratmeter der Erdoberfläche (inkl. Meere) weit
mehr als 1000 Adressen zur Verfügung stehen um alle 340 282 366 920 938 463
463 374 607 431 768 211 456 IPv6 Adressen aufzubrauchen.
DNS
Da eine IP-Adresse für Menschen viel schwieriger zu merken ist, als ein Name,
wurde in den Achtzigerjahren das Domain Name System eingeführt. Damit werden
ähnlich wie bei Telefonbüchern Namen und Nummern einander zugeordnet. Das
Domain Namen System (DNS) ist hierarchisch und über die ganze Welt verteilt
2
http://test-ipv6.com/, http://ipv6test.google.com/
DNS Einträge
brauchen Zeit
um weltweit
wirksam zu
werden.
Seite 6/26
organisiert.3 Das bedeutet – und das ist nun wichtiges Basiswissen – Änderungen an
Name-Server-Einträgen müssen an die anderen Name-Server weltweit weitergeleitet
werden, damit ein Domain-Name mit seiner zugehörigen IP-Adresse überall bekannt
ist. Dieser Vorgang, er wird Delegationsphase genannt, kann sich über mehrere
Stunden hinziehen. Das bedeutet, eine Neueintragung oder Änderung bei einer
Web- oder Mailadresse ist meistens nicht sofort wirksam.
Figure 2: Welche Funktion hat ein Name-Server (www.switchplus.ch)
Figure 3: Bilder aus dem YouTube Video:
3
http://www.youtube.com/watch?v=EKGkOVg1L8Y
Seite 7/26
Kleine, aber wichtige Unterschiede:
Homepage, Webseite, Website
Mit Homepage ist eigentlich nur die erste Seite (Startseite) einer Website, also einer
Ansammlung von Webseiten unter der gleichen Adresse (Domain) gemeint. Im
Sprachgebrauch wird aber oft auch der ganze Internet-Auftritt darunter verstanden.
Seite 8/26
Das Web ist nicht aus Papier
Webseiten funktionieren anders als Dokumente, die auf Papier ausgeliefert werden.
Obwohl das offensichtlich ist, sind sich manche der Konsequenzen nicht bewusst.
Wenn Sie ein Dokument erstellen, welches ausgedruckt werden soll, oder am
Bildschirm als Word oder PDF-Datei betrachtet wird, bestimmen Sie das Aussehen,
die Grösse des Papiers, die Schriftarten, Farben und Anordnung der Elemente.
Bei Webseiten ist das grundsätzlich anders. Sie definieren zwar den Inhalt, aber der
Empfänger bestimmt, wie es dargestellt wird. Das mag Sie verwundern und in der
Praxis ist es auch nicht ganz so drastisch, aber tatsächlich kontrollieren Sie
wesentlich weniger, was Ihre Webseite betrifft, als Sie vielleicht gerne würden.
Was wir nicht wissen können
•
•
•
•
•
Wir wissen nicht welchen Browser oder «User Agent»4 der Besucher benutzt.
Wir kennen die Grösse des Bildschirms, oder wie gross das Browserfenster
eingestellt ist nicht.
Wir haben keine Ahnung, mit welcher Verbindungsgeschwindigkeit unser
Besucher verbunden ist, oder wie zuverlässig seine Internetverbindung ist.
Wir kennen weder die Leistungsklasse seines Computers, noch wissen wir,
welches Betriebssystem er besitzt oder welche Schriften auf seinem
Computer installiert sind.
Wir wissen ausserdem nicht, wo sich der User befindet, wie er denkt, welche
Sprachen er versteht, und wie gut er oder sie sich mit Computern auskennt.
Aus all diesen Gründen haben wir nur teilweise die Kontrolle darüber, wie die Seite
beim Empfänger dargestellt wird. Der Browser, also das Programm, welches die
Webseite für den Benutzer darstellt, liest den Quellcode der Seite ein und
interpretiert (rendert5) die Seite.
Aufbau einer Webseite
Wenn Sie also eine Webseite erstellen, kreieren Sie nicht eine fix definierte Seite,
sondern lediglich eine Struktur und gewisse Formatierungsanweisungen, die aber
abhängig vom verwendeten «User Agent» und den Einstellungen beim Benutzer
deutlich unterschiedlich «gerendert» werden können.
4
User agent, nennt man das -Programm mit welchem auf eine Webseite zugegriffen wird.
Neben einem Browser-Programm (wie Firefox, Chrome, Internet Explorer) können das auch
Screenreader (Bildschirmleseprogramm), Programme, welche die Daten für Suchmaschinen
aufbereiten und Vieles mehr sein.
5
«Rendern» nennt man den Prozess, bei welchem der Browser die Struktur aus der
Webseite interpretiert.
Seite 9/26
Verschiedene Sprachen
Eine einzelne Webseite besteht aus Code-Anweisungen (Quelltext) in mehreren
Sprachen:
Die Struktur einer Seite wird in der Hypertext Markup Language (HTML)
geschrieben. Diese «Auszeichnungssprache» dient dem Ordnen des Inhalts. Darin
definieren Sie Layoutbereiche, Überschriften, Absätze, Listen, Links, Bilder und so
weiter. Erst mit Hilfe von Cascading Stylesheets (CSS) geben Sie
Gestaltungsanweisungen für die HTML-Elemente. Sie können damit also die
Anordung der Layoutbereiche bestimmen, was schon ziemlich knifflig sein kann.
Ausserdem definieren Sie Farben, Abstände, Ränder, Schriftarten, also das Styling
und Design der Webseite. Schliesslich können Sie mit Hilfe von JavaScript das
Verhalten von Elementen (beispielsweise beim Darüberfahren mit der Maus) beim
Klicken, beim Senden eines Formulars etc. beeinflussen. Effekte wie das
Vergrössern eines Bildes beim Klicken und Abdunkeln des Hintergrunds (LightboxEffekt) oder manche Dropdown-Effekte bei Menüs werden mit Hilfe von JavaScript
ausgeführt. Auch das Überprüfen von Formularinhalten und die Meldung ,wenn die
E-Mail-Adresse ungültig ist, geschieht mittels JavaScript. Diese drei Sprachen
werden von Ihrem Browser ausgeführt und sind darum auf Ihrem PC sichtbar. Sie
können das relativ einfach kopieren.
HTML CSS JavaScript •  de-iniert die Struktur einer Webseite. •  sorgt für das Design (Styling) der HTML-­‐
Elemente. •  fügt Verhalten (Effekte und Funktionen) hinzu. Seite 10/26
Kurze Demo zum Mitmachen:
Beliebige Webseite öffnen (am besten mit Firefox).
1. Ansicht/Webseiten-Stil Kein Stil aktivieren.
2. Quelltext anzeigen (Kontext-Menü)
Figure 4: Im Firefox «Webseiten-Stil ausschalten»...
Figure 5: ... und das Resultat im Browser
Seite 11/26
Figure 6: Seitenquelltext anzeigen
Figure 7: Keine Geheimnisse: Wie die Webseite gebaut wurde, sieht man im Quellcode
Seite 12/26
Übung: Meine allererste HTML-Datei
Öffnen Sie den Windows Editor (Alle Programme / Zubehör / Editor), geben Sie den
folgenden Code ein und speichern Sie die Datei als hallo-welt.html in einem neu zu
erstellenden Ordner «Websites» in der Bibliothek «Dokumente».
Wichtig ist die Endung html und nicht txt.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Mein erstes HTML Dokument</title>
</head>
<body>
<h1>Hallo Welt</h1>
<p>Das ist mein allererstes HTML Dokument</p>
</body>
</html>
HTML Crash-Kurs
Auch wenn Sie Ihren Internet-Auftritt mit dem HomePageTool ohne HTMLKenntnisse zusammenklicken können, hilft grundlegendes HTML-Wissen spätestens
dann, wenn etwas nicht wie erwartet funktioniert.
Aufbau der HTML-Datei und HTML-Grundgerüst
Jede HTML-Datei besteht aus der Dokumenttyp-Definition, dem HTML-Root-Element
sowie einem Head und einem Body.
Die Dokumenttyp-Definition (Doctype declaration) muss in der ersten Zeile des
HTML-Dokuments stehen und erklärt dem Browser, welcher Dokumenttyp nun folgt
und um welche HTML-Version es sich dabei handelt. Während die früheren HTML
Versionen zum Teil eine mehrzeilige und komplexe Dokumenttyp-Definition
erforderten, genügt beim aktuellen HTML 5 ein einfaches:
<!DOCTYPE HTML>
Anschliessend folgt das HTML-Stammelement <html>, in welches die beiden Blöcke
<head> und <body> eingefügt werden.
Beim <head> handelt es sich um eine Art Vorspann für die Webseite, welcher nicht
im Textfenster des Browsers erscheint. Die Informationen darin werden jedoch von
Browsern oder Suchmaschinen ausgewertet. Der Inhalt des <title>-Tags erscheint in
der Titelleiste des Browsers und wird im Browser-Verlauf, bei den Bookmarks
(Favoriten) und auf der Suchresultate-Seite von Suchmaschinen angezeigt.
Ebenfalls von Suchmaschinen ausgewertet werden Informationen des <meta>-Tags.
Im <body>-Bereich steht der eigentliche Inhalt der Webseite, jeweils innerhalb von
Tags.
Seite 13/26
Die meisten Tags bestehen aus einem öffnenden und einem schliessenden Tag, z.
Bsp. <h1></h1>. Der eigentlich Inhalt steht dazwischen: <h1>Hallo Welt</h1>
Solche HTML-Elemente, bestehend in der Regel aus einem Anfangs- und einem
Ende-Tag und dem eigentlichen Inhalt. Sie können (oder müssen) zusätzlich
Attribute haben. Attribute sind im öffnenden Tag zusätzlich erfasste Werte, die
verschiedene Eigenschaften des Tags auszeichnen. Bei Bildern ist das
beispielsweise der Pfad zur Bild-Datei, der Alternativ-Text, der angezeigt wird, wenn
die Bild-Datei nicht geladen werden kann oder die Höhe und Breite des Bildes,
welche dem Browser hilft, die Seite schon korrekt aufzubauen, auch wenn die
Bilddatei noch nicht fertig geladen wurde.
Zusätzlich können Attribute verwendet werden um einem HTML-Element eine ID (die
pro Seite nur einmal vorkommen darf) oder eine Klasse (die mehrmals vorkommen
kann) zuzuordnen. Diese sind beim Stylen mit CSS wichtig weil man somit
Stilanweisungen ganz gezielt vergeben kann.
HTML Element
<div>
<h1>-<h6>
Attribute
globale
globale
Verwendung
Seiteneinteilung (Divider)
Überschrift (h: heading)
<p>
globale
Absatz (p: paragraph)
<strong>
<em>
<blockquote>
<q>
<ol>
globale
globale
cite: URI
cite: URI
type: a | A | i | I | 1
start: Zahl
type: disc | circle | square
Hervorhebung (meist fett)
Betonung (meist kursiv)
Langes Zitat
Kurzes Zitat
Nummerierte Aufzählung
(Ordered List)
<ul>
Aufzählung
(Unordered List)
<li>
type, value
Aufzählungs-Element
<!-- -->
Kommentar
leere Elemente (kein Ende-Tag, evtl. «selbstschliessender Tag: <img … />)
<img>
src: URI (lokaler oder absoluter Pfad)
Bild
alt: Textinhalt
border: Zahl (Rahmendicke in px)
height: Zahl | Prozent
width: Zahl | Prozent
hspace: Zahl (horizontaler Abstand in px)
vspace: Zahl (vertikale Abstand in px)
usemap: #Name (Klickbare Bildbereiche)
align: bottom | left | middle | right | top
(durch CSS ersetzen)
<a>
href: URI (lokaler oder absoluter Pfad)
Anker / Link
rel: Text: nofollow, Beziehungstyp (XFN)
target: _blank (in neuem Fenster öffnen)
Seite 14/26
Globale Attribute
id: eindeutige Bezeichnung
class: Klassenbezeichnung(en)
dir: ltr | rtl Schreibrichtung
lang: en | de… Sprachcode
style: Inline CSS
title: Text (Tooltip)
Übung: Meine allererste HTML-Datei Teil 2
Ergänzen Sie die HTML-Datei, wie folgt bzw. kopieren Sie die Datei «hallo-welt2.html» zur in vorheriger Übung erstellten Webseite.
Was fällt Ihnen auf?
Kopieren Sie nun die dazugehörige Grafik sowie die .css-Datei in den «bilder»
Ordner und ergänzen Sie die Seite gemäss folgendem Screenshot:
Die Pfadangaben bei internen Links oder zu Bildern können absolut oder relativ
angegeben werden. Absolut bedeutet: die ganze URL, inkl. Protokoll wird
eingetragen, also die gleiche Adresse, die man auch im Browser eingeben würde um
die Seite (oder das Bild) aufzurufen. Relativ bedeutet: man lässt den Anfang des
Pfades weg und gibt nur den Weg von der aktuellen Position zur Datei an. Bei einem
Bild, welches im gleichen Ordner liegt, wie die HTML-Datei heisst das, nur den
Dateinamen, z. B.
<img src="Einstieg-n2.png">
Seite 15/26
Würde das Bild in einem Ordner «images» liegen, müsste der Pfad entsprechend
angepasst werden:
<img src="images/Einstieg-n2.png">
Wichtig ist darauf zu achten, dass die Pfadangabe ohne «/» beginnt, sonst wird ein
sogenannter Root-relativer Pfad verwendet. Das «/» entspräche somit dem «/» nach
.ch.
Um bei der relativen Pfadangabe in der Ordnerstruktur eins nach oben zu springen
verwendet man zwei Punkte:
src="../Ordner/Dateiname">
CSS Crash-Kurs
Mit HTML können wir die Struktur der einzelnen HTML-Seiten und die Verlinkung
zueinander, also eine Navigation erstellen und so unseren Internet-Auftritt (Website)
erstellen. Damit die Schriftarten, Farben, Grössen so aussehen, wie wir das gerne
hätten, müssen wir der HTML-Datei noch Style-Anweisungen mitgeben. Ansonsten
wird unsere Seite einfach mit den Standardstylen designt.
Style-Anweisungen können an drei Orten eingegeben werden
1. in einer externen CSS-Datei, welche im <head> verlinkt wird
Dies ist die übliche und empfohlene Methode.
Vorteil: Stile können an einem Ort definiert werden und gelten für alle Seiten
des Internet-Auftritts (welche dieses Stylesheet verwenden)
Nachteil: bei einem Content-Management-System oder HomepageTool
haben Sie unter Umständen keinen Zugang zu dieser Datei. (in der
switchplus-Version von Yola können Sie das CSS anpassen)
2. durch CSS-Anweisungen direkt im <head>
Vorteil: alles in einer Datei
Nachteil: Sie müssen die Stile für jede Seite anpassen, Ladezeit)
3. als style-Attribut direkt bei einem HTML-Element
Vorteil: Sie können ein einzelnes Wort oder einen Absatz unabhängig vom
CSS gestalten (z. B. innerhalb einer Eingabemöglichkeit im HomepageTool)
Nachteil: Formatanweisungen im externen Stylesheet werden überschrieben
Aufbau einer CSS-Anweisung
Eine CSS-Anweisung besteht immer aus einem Selektor und einer oder mehrere
Paare aus Eigenschaften und Wert. Der Selektor bestimmt, auf welches oder welche
HTML-Elemente die nachfolgenden Eigenschaften angewendet werden sollen.
Das nebenstehende Beispiel zeigt eine CSSAnweisung, die dafür sorgt, dass alle Überschriften 1.
Ranges eine rote Schriftfarbe erhalten.
Selektoren beziehen sich auf ein bestimmtes HTML-Element, auf HTML-Elemente
mit einer bestimmten ID oder Klasse (dargestellt durch # für eine ID und . für eine
Seite 16/26
Klasse) oder auch eine Pseudoklasse, wie zum Beispiel a:hover, was sich auf einen
Link bezieht solange man mit der Maus darüber fährt.
Ein gewöhnlicher Element-Selektor bezieht sich auf ein einzelnes Element oder auf
eine durch Kommata getrennte Gruppe von Elementen.
Durch Leerschläge getrennte Elemente kennzeichnen einen kontextsensitiven
Selektor. Damit kann man beispielsweise nur Listenelement innerhalb der Navigation
ansprechen
#header div.ys-menu-wrap li a:hover { color: #ff0033; } bewirkt, dass die Links im
Menü (in einem Div mit der Klasse «ys-menu-wrap» innerhalb des «headers» beim
Überfahren mit der Maus eine rote Farbe erhalten. (Das können Sie später mit dem
Yola-Menü ausprobieren).
Für weitere Informationen zu HTML und CSS empfehle ich: Little Boxes von Peter
Müller6 und die verschiedenen Online-Referenzen7
Ablauf, wenn Sie eine Webseite aufrufen
URL
Abkürzung für Uniform Resource Locator, die Adresse, die Sie im Browser eingeben
bzw. mit einem Link aufrufen.
6
7
http://little-boxes.de/
http://reference.sitepoint.com/ http://www.w3schools.com/ (nur englisch)
http://jendryschik.de/wsdev/einfuehrung/
Seite 17/26
Seite 18/26
2. Vorüberlegungen/ Vorbereitung
Nachdem die technischen Fragen nun zu einem grossen Teil geklärt sind, geht es
darum den Domain-Namen und die Ziele, Zielgruppen, Inhalte, Struktur sowie das
Layout für Ihr Internet-Angebot festzulegen.
Namensgebung
Der Domainname, unter welchem Ihr Internet-Auftritt gefunden werden kann, ist sehr
wichtig. Nicht nur Menschen sollten ihn sich gut merken können. Suchmaschinen
lesen den Namen ebenfalls. Wenn oder falls der Name mit einem Suchbegriff
übereinstimmt, dann wird die dahinterstehende Site von Google und anderen
Suchmaschinen auch höher gewichtet.
Welche Top Level Domain (TLD) soll ich wählen?
Für Schweizer Firmen, Vereine, Personen, Produkte empfehlen wir eine .ch Domain.
Wenn Sie internationale Kundschaft ansprechen, erwerben Sie zusätzlich die
Länderdomains der Länder, in denen Sie geschäftlich aktiv sind und/oder eine .com
Domain.
Spezielle Domains und Umlaute
Spezielle TLDs, wie die länderspezifische Top-Level-Domain des Inselstaates Tuvalu
(.tv) oder von Antigua und Barbuda (.ag) sind interessante Einnahmequellen der
entsprechenden Staaten, aber für «gebräuchliche» Internet-Auftritte eher nicht
geeignet. Auch die eigentlich für Privatpersonen gedachte TLD .me ist nicht sehr
populär und viele User werden aus Gewohnheit Ihren Firmennamen, Produktnamen
oder sogar Ihre publizierte Domain mit der Schweizer Endung eingeben.
Wenn Ihr gewünschter Domain-Name nicht frei ist, empfehlen wir Ihnen, eher einen
anderen Domain-Namen zu suchen, als eine andere TLD zu wählen,
Umlaute sind in Domain-Namen heute zwar möglich. Trotzdem raten wir von deren
Benutzung als einzige Domain ab, da die Unterstützung nicht in allen Programmen
gewährleistet ist. Weitere Details zu erlaubten Zeichen in Domain-Namen, finden Sie
bei Switchie8.
Registrierung
Wenn Sie sich für einen Domain-Namen entschieden haben, sollten Sie diesen
registrieren. Für die Registrierung ist ein Registrar zuständig, welcher von der
Registry für die entsprechende Top Level Domain bevollmächtigt ist, die Einträge
vorzunehmen.
Die Registry für die Top Level Domains .ch und .li ist die Stiftung SWITCH.
Sie vergibt und verwaltet die der Domain .ch untergeordneten Domain-Namen im
Auftrag des BAKOM. SWITCH ist selber auch ein Registrar, bietet aber kein Hosting
an. Das heisst Sie können bei der SWITCH zwar einen Domain-Namen registrieren,
brauchen aber zusätzlich einen Hoster, also einen Partner, welcher Ihnen
Speicherplatz für Ihre Webseite zur Verfügung stellt.
switchplus ist eine 100%-ige Tochtergesellschaft von SWITCH und bietet nicht nur
die Registrierung von Domain-Namen an, (neben .ch und .li auch .asia, .biz, .com,
.eu, .info, .me, .name, .net, .org), sondern eben auch Hosting für Webseiten und
Mail,sowie zusätzliche Services, wie das HomePageTool, CMS Hosting, Hosted
8
http://switchie.ch/index.php?section=knowledge&cmd=article&id=88
Seite 19/26
Exchange oder die Möglichkeit, fremdgehostete Dienste wie Office 365 von Microsoft
unter dem eigenen Domain-Namen laufen zu lassen (LINK).
Eintrag in Suchmaschinen
Nicht alle Besucher werden Ihre Adresse direkt im Browser eingeben, sondern
stattdessen via Suchmaschine auf Ihr Internet-Angebot gelangen. Damit Google und
Co. von Ihrem Angebot weiss, müssen Sie Ihre Adresse bei Google anmelden9. Ihre
Seite wird von Google auch gefunden, wenn andere, bei Google schon bekannte
Seiten, auf Ihr Angebot verlinken.
Im zweiten Kurs (Analyse: Wie erfahre ich, was auf meiner Webseite läuft) unserer
switchplus-Angebote vermitteln wir Ihnen viele wertvolle Tipps und Tricks, wie Sie
das Erscheinen Ihres Internet-Angebots bei den Suchmaschinentreffern optimieren
können.
Speicherplatz
Nun könnten Sie theoretisch einen Webserver auf Ihrem PC betreiben. Wenn Sie ein
sogenanntes NAS (Network Attached Storage) betreiben (z. B. Synology) ist darin
tatsächlich oft ein Webserver enthalten. Jedoch sprechen verschiedene Gründe
dagegen:
• Der Internetzugang ist in die andere Richtung optimiert, wäre also für
Besucher extrem langsam
• Ihr PC ist kein Server und nicht für 24Std.-Betrieb ausgelegt
• Sie wollen Ihren PC nicht immer in Betrieb haben
• Die IP-Adresse ändert sich
• Ein Webserver sicher zu betreiben erfordert viel Fachkenntnisse
Darum überlassen Sie den Betrieb des Webservers einem sogenannten Hoster oder
Hosting-Provider, wie switchplus.
Inhalt und Design
Nachdem Sie sich für einen Domain-Namen entschieden, diesen registriert und
Speicherplatz erworben haben, kann es jetzt endlich losgehen. Bevor ich aber auf
die Möglichkeiten der technischen Umsetzung («Werkzeugkiste») eingehe, möchte
ich Sie anregen, einige Fragen zu beantworten:
Zuerst ganz allgemein:
•
•
•
•
•
•
9
Habe ich interessante Inhalte für die Website?
Wie oft kann ich diese veröffentlichen?
Verfüge ich über ein langfristiges Ziel?
Welche Ziele möchte ich mit meiner Webseite erreichen?
Wie viel Zeit will ich in die Pflege meiner Website investieren?
Wer aktualisiert mein Internet-Angebot und woher kommen die Daten?
http://www.google.ch/submit_content.html
https://ssl.bing.com/webmaster/SubmitSitePage.aspx (Konto erforderlich)
Seite 20/26
Ziele
Es ist wichtig, sich klar darüber zu werden, was man mit der Internetpräsenz
überhaupt bewirken will:
• Wollen Sie neue Kunden ansprechen?
• Sollen bestehenden Kunden 24-Stunden Support angeboten werden, um die
Support-Abteilung zu entlasten?
• Soll das Webangebot eine reine Broschüren Webseite sein oder auch
Transaktionen ermöglichen?
• Gibt es ein einziges oder mehrere «Conversion»-Ziele?
Besucher sollen
o sich für den Newsletter registrieren
o etwas herunterladen oder lesen
o anrufen / die nächste Filiale aufsuchen
o auf facebook «liken» / darüber twittern
o online bestellen
Nur konkrete Ziele lassen sich später auch auswerten.
Wenn Sie Produkte versenden wollen, müssen Sie sich Gedanken darüber machen,
ob Sie auch ins Ausland liefern, bzw. wie Sie Bestellungen, die Sie nicht bearbeiten
können verhindern. (Beispiel: Käseversand ins Ausland)
Zielgruppen
Selbstverständlich sollten Sie sich Ihrer Zielgruppe bewusst sein. Sind das
vorwiegend Mitglieder eines Vereins oder eher die grosse Allgemeinheit. Sprechen
Sie «digital natives» an oder Menschen, die Internet-Fachbegriffe und/oder die
Terminologie Ihres Geschäfts kaum kennen? Wussten Sie zum Beispiel, dass rund
8% der Männer eine Rot-Grün-Sehschwäche haben? Dieses Wissen und die
Besonderheiten Ihrer Zielgruppe haben einen wesentlichen Einfluss auf die
Gestaltung Ihrer Webseite.
Nur wenn Sie Ihre Zielgruppe kennen, können Sie sie auch angemessen
ansprechen. Es hat sich bewährt, Personas10 zu definieren und sich bei der Planung
der Webseite immer wieder zu fragen, wie diese auf das Internet-Angebot reagieren
würden.
Inhalte
Erst jetzt, wenn Ziele und Zielgruppen definiert sind, können Sie sich mit dem
eigentlichen Inhalt auseinandersetzen. Woher kommt dieser? Gibt es schon
Unternehmensbroschüren, Kataloge, Pressetexte oder andere Quellen, die
herangezogen werden können? Sind die Inhalte mehr oder weniger statisch oder
schnell wechselnd. Wer soll für die Aktualisierung zuständig sein? Sollen
Webseitenbesucher kommentieren dürfen?
Denken Sie auch daran, dass das Leseverhalten online ganz anders ist, als bei
gedrucktem Material. Lange Texte werden im Web oft nicht gelesen, sondern häufig
ausgedruckt. Es empfiehlt sich daher, bestehende Inhalte aus Print-Broschüren für
das Web aufzubereiten. Achten Sie auf kurze Texte und viele Überschriften, die dem
Leser anzeigen, ob der Text das beinhaltet, was er wissen will. Verwenden Sie
Listen und aussagekräftige Grafiken. Lange Texte bieten Sie mit Vorteil zum
10
Fiktive, aber realistische (bzw. realitätsnahe) Persönlichkeit, die auf den Kenntnissen über
reale Personen aus der Zielgruppe basiert und diese repräsentiert.
Seite 21/26
Download als PDF an oder versenden Sie Broschüren per Post. Auf diese Weise
erhalten Sie ausserdem die Anschrift des Besuchers. Missbrauchen Sie diese
Informationen nicht und erklären Sie dem Besteller ausserdem, was Sie mit seinen
Daten tun, bzw. nicht tun werden. Dies gehört zu den Bestimmungen des
Datenschutzgesetzes11.
Impressumspflicht
Seit 1. April 2012 gilt übrigens auch in der Schweiz die Impressumspflicht12. Sie
müssen also auf Ihrem Internet-Angebot klare und vollständige Angaben über Ihre
Identität machen. Weiter wird verlangt, dass es Hinweise auf die technischen Schritte
gibt, die zu einem Vertragsabschluss führen. Zudem müssen Onlineshops eine
Möglichkeit anbieten, Eingabefehler bei einer Bestellung erkennen und korrigieren zu
können. Kundenbestellungen müssen unverzüglich elektronisch bestätigt werden.
Struktur und Layout (Navigation)
Wenn die Inhalte, deren Publikations-Rhythmus sowie die Verantwortlichkeiten
geklärt sind, ist es an der Zeit, die Struktur und die Benutzerführung, bzw. die
Navigation zu designen. Eine leicht verständliche, klare Navigation ist entscheidend
für den Erfolg einer Webseite. Es gibt zu viele Geschichten von Webshops, die nicht
funktionierten, weil Hürden den Kunden vom Kauf abhielten. Das kann das Fehlen
einer passenden Zahlungsart sein, oder der Zwang sich registrieren zu müssen, wie
auch sogar technische Fehler, wie beispielsweise das Fehlen eines gut sichtbaren
Bestellbuttons.
In der ISO-Norm 9241 werden Grundsätze der «Ergonomie der Mensch-SystemInteraktion» beschrieben. Auch wenn die «Anforderungen an die
Gebrauchstauglichkeit» einer Software, wie sie in diesem Standard beschrieben
werden, zu einem grossen Teil trocken zu lesen sind, gelten die «Grundsätze der
Dialoggestaltung» auch für Webseiten:
•
•
•
•
•
•
•
Aufgabenangemessenheit
– geeignete Funktionalität, Minimierung unnötiger Interaktionen
Selbstbeschreibungsfähigkeit
– Verständlichkeit durch Hilfen / Rückmeldungen
Lernförderlichkeit
– Anleitung des Benutzers, Verwendung geeigneter Metaphern, Ziel:
minimale Erlernzeit
Steuerbarkeit
– Steuerung des Dialogs durch den Benutzer
Erwartungskonformität
– Konsistenz, Anpassung an das Benutzermodell
Individualisierbarkeit
– Anpassbarkeit an Benutzer und an seinen Arbeitskontext
Fehlertoleranz
– Die Funktionsweise des Systems auch bei unvorhergesehenen Fehlern
aufrechterhalten
Vielleicht können Sie beim Erstellen Ihrer Webseite nicht alles steuern und
beeinflussen, aber Sie können diese Anforderungen im Auge behalten und eine
11
12
Bundesgesetz über den Datenschutz (DSG) http://www.admin.ch/ch/d/sr/c235_1.html
http://www.admin.ch/ch/d/ff/2011/4925.pdf
Seite 22/26
Navigation erstellen, die diesen Ansprüchen weitgehend genügt. Die Navigation
sollte auf jeder Seite gut sicht- und erkennbar sein, sich beim Darüberfahren mit der
Maus ändern und die aktive Position hervorheben. Achten Sie auf verständliche
Begriffe, die Einschränkung auf maximal sieben Menüpunkte, gute Klickbarkeit und
klare Farben und Kontraste.
Ästhetik im Webdesign
Und wenn wir jetzt schon bei den Farben sind, möchte ich noch Folgendes sagen:
Auch wenn sich über Geschmack nicht streiten lässt, die Wirkung von Farben und
der Anordnung von Elementen ist nicht nur Geschmacksache, sondern hat auch mit
anerkannten Mitteln von Farbe, Komposition und Balance zu tun, die man lernen
kann. Das schaffen wir natürlich nicht in so kurzer Zeit, darum möchte ich einfach auf
Online-Dienste verweisen, die einem helfen, harmonierende Farbkombinationen
zusammenzustellen:
1. http://kuler.adobe.com/
erfordert eine Registrierung zum Speichern, ist aber ansonsten kostenlos.
Hier lassen sich die Farben auch basierend auf einem Bild zusammenstellen.
2. http://colorschemedesigner.com/
3. http://www.colorexplorer.com/
Weitere Tools, die Ihnen bei der Gestaltung Ihres Internet-Auftritts helfen, werde ich
Ihnen später vorstellen.13
Das Staatssekretariat für Wirtschaft (SECO) hat eine «Checkliste Online-Auftritt
KMU14» herausgegeben in welchem Tipps für eine vertrauenswürdige Webseite
gegeben werden.
Einen Überblick über «4 Schritte zu Ihrer Webseite» gibt Ihnen übrigens auch unser
Dokument «Ihr Internet-Auftritt», welches Sie auf der switchplus.ch Webseite unter
«Informationen» finden.
13
http://www.stripegenerator.com/ Ÿ http://www.tartanmaker.com/
http://bgpatterns.com/ Ÿ http://subtlepatterns.com/ Ÿ http://sxc.hu/
14
http://www.kmu.admin.ch/publikationen/02143/index.html?lang=de
Seite 23/26
3. «Werkzeug-Kiste»
Jetzt da Sie wissen, welche Inhalte Sie wem, in welchen Farben, wie präsentieren
möchten, stellt sich die Frage, wie Sie das konkret umsetzen können.
Grundsätzlich stehen Ihnen drei Möglichkeiten offen:
«Von Hand»
Sie erstellen den Code «von Hand», mit einer Software wie Dreamweaver oder
einem anderen Programm, mit welchem Sie den HTML, CSS und allenfalls
JavaScript Code schreiben. Die fertige Webseite laden Sie dann via FTP auf den
Server.
Vorteile
• volle Kontrolle
• schnell ladende Seiten (wenn sie richtig gemacht sind)
Nachteile
• erfordert Einiges an Fachkenntnissen
• fehleranfällig
• hoher Zeitbedarf
• Interaktion (Kontaktormulare, Shop) einbinden ist schwierig
Erforderliche Werkzeuge
• HTML (CSS, JavaScript)-Editor oder Integrierte Entwicklungsumgebung (IDE)
• FTP-Programm
• Software zur Grafikbearbeitung
• Domain-Namen und Speicherplatz
CMS
Sie verwenden ein CMS wie WordPress, Joomla, Contao, Typo3 (oder eines von
Hunderten15 anderer kostenloser Systeme.
Ein kostenpflichtiges CMS kann den Vorteil eines Installationsservices und
zusätzlichem Support haben (z. B. WordPress bei uns).
15
Allein auf http://www.opensourcecms.com sind fast 300 kostenlose Systeme zu
Demozwecken installiert und bewertet.
Seite 24/26
Vorteile
• online ohne weitere Werkzeuge und Kenntnisse bedienbar
• mit entsprechendem Fachwissen ist jedes Design machbar
• Formulare, Shopintegration, Veranstaltungskalender relativ einfach durch
Erweiterungen integrierbar
• Support durch Community/Agenturen
• Sie können die (aufwändige) Entwicklung und die (einfache) Wartung)
personell trennen
• gibt es als Software as a Service (SaaS)
Nachteile
• Installationsaufwand (Serverskriptsprache und Datenbank erforderlich)
• individuelle Anpassungen sind nur beschränkt möglich oder aufwändig
Erforderliche Werkzeuge
• HTML (CSS, JavaScript)-Editor oder Integrierte Entwicklungsumgebung (IDE)
• FTP-Programm
• Software zur Grafikbearbeitung
• Domain-Namen und Speicherplatz (mit PHP16, MySQL Datenbank)
HomePage Tool Yola
Sie nutzen unser kostenloses HomePage Tool Yola.
Ähnliche Tools gibt es auch von anderen Anbietern, wo sie jedoch nur in der
einfachsten Variante kostenlos sind und sonst gerne über CHF 100.-/Jahr kosten.
Vorteile
• bereits installiert, online und einfach zu bedienen, Formulare, Shop
16
PHP ist die verbreitetste Server-Scriptsprache, viele CMS sind damit programmiert. Bei
den meisten Hosting-Providern ist PHP installiert und ebenso die üblicherweise verwendete
MySQL Datenbank.
Seite 25/26
Nachteile:
• Einschränkungen bei individuellen Anpassungen
Kosten
Software:für HTML-, CSS-, JavaScript-Erstellung, Grafikbearbeitung
Adobe Dreamweaver Vollversion, Deutsch Win, Mac
CHF 600.Adobe Creative Suite Web Premium
CHF 2200.Adobe Creative Suite Master Collection
CHF 3750.Alternative: einfacher Editor oder IDE (Integrierte Entwicklungsumgebung)
Notepad ++, Sublime Text 2
gratis
oder IDE (Integrierte Entwicklungsumgebung)
Netbeans
Jetbrains PHP Storm (CHF 100.-) / Web Storm
gratis
CHF 50.-
Offline Tools, ab
CHF 100.-
FTP Programm
FileZilla
gratis
4. Budget
Um das Budget zu kalkulieren, das Sie in Ihr Web-Projekt investieren müssen,
sollten Sie sich zuerst die folgenden Fragen stellen:
•
•
•
•
•
Wie viel Zeit habe ich für die Pflege meiner Website
Wer aktualisiert mein Internet-Angebot und woher kommen die Daten
Was darf die Erstellung der Webseite kosten
Was ist das maximale monatliche Budget für meinen Internet-Auftritt (inkl.
Social Media, Google Adwords, Suchmaschinenoptimierung, Mobile
Webseite, etc.)
Entspricht der Nutzen den geplanten Kosten
Allgemein können Sie von der folgenden groben Kostenstruktur ausgehen:
•
•
•
«einfache» Webseite ohne Shop und Anbindung von Drittsystemen
o HomePageTool optimal (Selbstbedienung, schnelle Erstellung,
einfache Pflege, nichts hochladen, keine W-Updates)
o Aufwand: meist im Hostingpaket enthalten, Erstellung: 1-10 Stunden,
Pflege: 1 Stunde monatlich
«komplexe» Webseite mit der Möglichkeit zusätzliche Funktionalitäten
(Shop, etc.) hinzuzufügen
o CMS optimal (flexibel, Einbindung von Plug-ins für Zusatzfunktionen,
lokales Back-up, Einbindung von Drittsystemen)
o Aufwand: von gratis-SW bis zu CHF 2‘000, Erstellung: 10-1000
Stunden, Pflege: 20-30% der Erstellungsaufwände
«integrierte» Webseite, die mit bestehender Infrastruktur (ERP, CRM, Shop,
etc.) verbunden werden muss
o braucht Beratung von Spezialisten vor dem Entscheid für die Lösung
Seite 26/26
5. Umsetzung: Meine erste Webseite mit Yola
Yola aktivieren
Im switchplus-Konto bei «Produkte verwalten / Hosting verwalten» für die
gewünschte Domain Yola aktivieren17.
In Yola eine neue neue Website erstellen, Firmenname eingeben und WebsiteKategorie wählen. Nun werden Sie noch aufgefordert, Kontaktinformationen
einzugeben. Daraufhin erstellt Yola Ihren Internet-Auftritt inklusive der ersten
vorausgefüllten Seiten (je nach vorher gewählter Kategorie).
Sie können mit der switchplus Variante von Yola (Yola Silver)bis zu 10 unabhängige
Internet-Auftritte erstellen, die Sie Ihren Domains zuordnen.
Zum Testen melden Sie sich auf yola.com mit dem Benutzernamen
«hpt@probeabo[1-20].ch» und dem Passwort «switchplus» an.
17
Immer aktuelle, detaillierte Anleitungen finden Sie bei switchie.ch:
http://switchie.ch/web-de/homepagetool-de/ (switchie.ch Kategorie HomePageTool)
und bei yola: https://www.yola.com/de/tutorials