Einstieg Wie komme ich zu meinem eigenen Internet- Auftritt?

Transkript

1 1 Einstieg Wie komme ich zu meinem eigenen Internet- Auftritt? Version 1.4 April 14

2 Seite 2/26 Inhaltsverzeichnis Einleitung... 3 Ablauf und Lernziele... 3 Lernziele: 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 HTML Crash-Kurs Übung: Meine allererste HTML-Datei Teil CSS Crash-Kurs Ablauf, wenn Sie eine Webseite aufrufen URL Vorüberlegungen/ Vorbereitung Namensgebung Registrierung Speicherplatz Inhalt und Design «Werkzeug-Kiste» «Von Hand» CMS HomePage Tool Yola Budget Umsetzung: Meine erste Webseite mit Yola Yola aktivieren... 26

3 Seite 3/26 Einleitung Ablauf und Lernziele 1. Technologien und Begriffe 2. Von der Idee zur Webseite (Vorüberlegungen/Vorbereitung) 3. «Werkzeug-Kiste» - Was brauche ich, was kostet es? 4. 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 und das World Wide Web. Diese machen aber nur einen Teil des Internets aus. Viele der anderen Protokolle, wie DNS, NTP, RTP, SIP 1 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 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)

4 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), (SMTP, POP, IMAP) oder das Domain Name System (DNS). Für die verschiedenen Anwendungsprotokolle, benötigen Sie jeweils spezialisierte Programme. Dienst Protokoll Programm WWW http Browser Anschauen von https Microsoft Internet Explorer (Windows) Webseiten Mozilla Firefox (Windows, Mac, Linux, Android- Smartphone) Apple Safari (Mac, Windows, iphone) Google Chrome (Windows, Mac, Linux) Mail Senden und Empfangen von Nachrichten File Transfer Übertragen von Dateien (Dokumente, Webseiten, Bilder) von und zu einem Server smtp pop imap ftp sftp ftps 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 IP- Adressen. 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 Damit sind über vier Milliarden Adressen darstellbar. Obwohl das nach viel klingt, sind die Adressen ausgegangen.

5 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 testen 2. Wenn Sie Ihre Webseiten bei switchplus hosten, sind Ihre Webseiten sowohl über IPv4 als auch über IPv6 jederzeit erreichbar, weil switchplus nach dem Welt-IPv6- Tag 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. 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 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 DNS Einträge brauchen Zeit um weltweit wirksam zu werden

6 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 ( Figure 3: Bilder aus dem YouTube Video: 3

7 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.

8 Das Web ist nicht aus Papier Seite 8/26 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 (rendert 5 ) 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.

9 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 (Lightbox- Effekt) 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 -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. Seite 9/26 HTML de-iniert die Struktur einer Webseite. CSS sorgt für das Design (Styling) der HTML- Elemente. JavaScript fügt Verhalten (Effekte und Funktionen) hinzu.

10 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

11 Seite 11/26 Figure 6: Seitenquelltext anzeigen Figure 7: Keine Geheimnisse: Wie die Webseite gebaut wurde, sieht man im Quellcode

12 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 HTML- Kenntnisse 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.

13 Die meisten Tags bestehen aus einem öffnenden und einem schliessenden Tag, z. Bsp. <h1></h1>. Der eigentlich Inhalt steht dazwischen: <h1>hallo Welt</h1> Seite 13/26 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 Attribute Verwendung <div> globale Seiteneinteilung (Divider) <h1>-<h6> globale Überschrift (h: heading) <p> globale Absatz (p: paragraph) <strong> globale Hervorhebung (meist fett) <em> globale Betonung (meist kursiv) <blockquote> cite: URI Langes Zitat <q> cite: URI Kurzes Zitat <ol> type: a A i I 1 start: Zahl Nummerierte Aufzählung (Ordered List) <ul> type: disc circle square 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) rel: Text: nofollow, Beziehungstyp (XFN) target: _blank (in neuem Fenster öffnen) Anker / Link

14 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-welt- 2.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">

15 Würde das Bild in einem Ordner «images» liegen, müsste der Pfad entsprechend angepasst werden: <img src="images/einstieg-n2.png"> Seite 15/26 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 CSS- Anweisung, 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

16 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üller 6 und die verschiedenen Online-Referenzen 7 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 (nur englisch)

17 Seite 17/26

18 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 Seite 18/26 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 Switchie 8. 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

19 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 anmelden 9. 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: 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? (Konto erforderlich)

20 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, Personas 10 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.

21 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 Datenschutzgesetzes 11. Impressumspflicht Seit 1. April 2012 gilt übrigens auch in der Schweiz die Impressumspflicht 12. 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-System- Interaktion» 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 Bundesgesetz über den Datenschutz (DSG)