Einstieg Wie komme ich zu meinem eigenen Internet- Auftritt?

Transkript

1 1 Einstieg Wie komme ich zu meinem eigenen Internet- Auftritt? Version 1.6 April 15

2 Seite 2/30 Table of Contents EINLEITUNG ABLAUF UND LERNZIELE 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 7 WAS WIR NICHT WISSEN KÖNNEN 7 AUFBAU EINER WEBSEITE 7 VERSCHIEDENE SPRACHEN 8 ÜBUNG: MEINE ALLERERSTE HTML- DATEI 12 HTML CRASH- KURS 12 ÜBUNG: MEINE ALLERERSTE HTML- DATEI TEIL 2 15 CSS CRASH- KURS 16 ABLAUF, WENN SIE EINE WEBSEITE AUFRUFEN 17 URL VORÜBERLEGUNGEN/ VORBEREITUNG 19 NAMENSGEBUNG 19 REGISTRIERUNG 19 SPEICHERPLATZ 20 INHALT UND DESIGN «WERKZEUG- KISTE» 24 «VON HAND» 24 CMS 25 HOMEPAGE TOOL YOLA BUDGET UMSETZUNG: MEINE ERSTE WEBSEITE MIT YOLA 27 YOLA AKTIVIEREN 27

3 Seite 3/30 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/30 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, 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) Transmit (Mac) 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/30 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. 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. Am 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 organisiert. 3 Das bedeutet und das ist nun wichtiges Basiswissen Änderungen DNS Einträge brauchen Zeit um weltweit wirksam zu werden

6 Seite 6/30 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: 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.

7 Das Web ist nicht aus Papier Seite 7/30 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.

8 Seite 8/30 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. HTML definiert die Struktur einer Webseite. CSS sorgt für das Design (Styling) der HTML- Elemente. JavaScript fügt Verhalten (Effekte und Funktionen) hinzu.

9 Seite 9/30 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»...

10 Figure 5:... und das Resultat im Browser Seite 10/30

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

12 Seite 12/30 Übung: Meine allererste HTML-Datei Öffnen Sie den Windows Editor (Alle Programme / Zubehör / Editor) oder TextEdit auf dem Mac, 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

13 Seite 13/30 angezeigt. Ebenfalls von Suchmaschinen ausgewertet werden Informationen des <meta>-tags. Im <body>-bereich steht der eigentliche Inhalt der Webseite, jeweils innerhalb von Tags. 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 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) 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) Bild

14 <a> href: URI (lokaler oder absoluter Pfad) rel: Text: nofollow, Beziehungstyp (XFN) target: _blank (in neuem Fenster öffnen) Seite 14/30 Anker / Link

15 Seite 15/30 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">

16 Seite 16/30 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 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

17 Seite 17/30 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)

18 Seite 18/30

19 Seite 19/30 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 Switchie 8. Neue generische Top Level Domains Seit 2014 werden laufend neue, zum Teil sehr interessante Endungen aufgeschaltet. Welche neuen TLDs Sie bei switchplus vormerken bzw. bestellen können Sie auf der switchplus Wissensdatenbank switchie.ch 9 nachlesen 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

20 Seite 20/30 Sie vergibt und verwaltet die der Domain.ch untergeordneten Domain-Namen im Auftrag des BAKOM. SWITCH ist seit 2015 kein Registrar mehr und bietet auch kein Hosting an. Neben dem Domain-Namen, welchen Sie bei einem Registrar registrieren, brauchen Sie 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 und rund 300 neuen gtlds 10 ), sondern eben auch Hosting für Webseiten und Mail, sowie zusätzliche Services, wie das HomePageTool, CMS Hosting (WordPress), Hosted 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 wissen, müssen Sie Ihre Adresse bei Google anmelden 11. Ihre Seite wird von Google auch gefunden, wenn andere, bei Google schon bekannte Seiten, auf Ihr Angebot verlinken. Figure 8: Seiten bei Google anmelden 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 (Konto erforderlich)

21 Seite 21/30 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? 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.

22 Seite 22/30 Nur wenn Sie Ihre Zielgruppe kennen, können Sie sie auch angemessen ansprechen. Es hat sich bewährt, Personas 12 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 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 13. Impressumspflicht Seit 1. April 2012 gilt übrigens auch in der Schweiz die Impressumspflicht 14. 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: 12 Fiktive, aber realistische (bzw. realitätsnahe) Persönlichkeit, die auf den Kenntnissen über reale Personen aus der Zielgruppe basiert und diese repräsentiert. 13 Bundesgesetz über den Datenschutz (DSG)

23 Seite 23/30 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 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. erfordert eine Registrierung zum Speichern, ist aber ansonsten kostenlos. Hier lassen sich die Farben auch basierend auf einem Bild zusammenstellen Weitere Tools, die Ihnen bei der Gestaltung Ihres Internet-Auftritts helfen, werde ich Ihnen später vorstellen. 15 Das Staatssekretariat für Wirtschaft (SECO) hat eine «Checkliste Online-Auftritt KMU 16» herausgegeben in welchem Tipps für eine vertrauenswürdige Webseite gegeben werden

24 Seite 24/30 Die ständig aktualisierte Wissens-Datenbank switchie.ch hält viele Anleitungen und Tipps für Sie bereit und Sie können Fragen direkt an unser Helpdesk-Team richten. 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

25 CMS Seite 25/30 Sie verwenden ein CMS wie WordPress, Joomla, Contao, Typo3 (oder eines von Hunderten 17 anderer kostenloser Systeme. Ein kostenpflichtiges CMS kann den Vorteil eines Installationsservices und zusätzlichem Support haben (z. B. WordPress bei uns). 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 PHP 18, MySQL Datenbank) 17 Allein auf sind fast 300 kostenlose Systeme zu Demozwecken installiert und bewertet. 18 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.

26 HomePage Tool Yola Seite 26/30 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 Nachteile: Einschränkungen bei individuellen Anpassungen Kosten Software:für HTML-, CSS-, JavaScript-Erstellung, Grafikbearbeitung Adobe Dreamweaver Creative Cloud CHF 28.05/Monat Adobe Creative Suite Creative Cloud CHF 70.15/Monat.- Alternative: einfacher Editor oder IDE (Integrierte Entwicklungsumgebung) Notepad ++, Sublime Text 2, Brackets gratis oder IDE (Integrierte Entwicklungsumgebung) Netbeans gratis Jetbrains PHP Storm (CHF 100.-) / Web Storm CHF 50.- Offline Tools, ab CHF 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)

27 Seite 27/30 o Aufwand: von gratis-sw bis zu CHF 2 000, Erstellung: 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 5. Umsetzung: Meine erste Webseite mit Yola Yola aktivieren Im switchplus-konto bei «Produkte verwalten / Hosting verwalten» für die gewünschte Domain Yola aktivieren 19. In Yola eine neue neue Website erstellen, Firmenname eingeben und Website- Kategorie 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 für jede Ihrer Domains (maximal 10) einen unabhängigen Internet-Auftritt erstellen. Zum Testen melden Sie sich mit Ihrem eigenen Benutzernamen und Passwort oder dem Ihnen zur Verfügung gestellten Benutzer im switchplus Benutzerkonto an. Figure 9: YOLA im Benutzerkonto aktivieren Achtung: Die Bearbeitung öffnet sich in einem neuen Fenster. PopUp Fenster müssen zugelassen werden. 19 Immer aktuelle, detaillierte Anleitungen finden Sie bei switchie.ch: (switchie.ch Kategorie HomePageTool) und bei yola:

28 Figure 10: Kategorie bestimmt Design und Demo-Inhalt, die geändert werden können. Seite 28/30

29 Seite 29/30 Hauptmenus: Site Seite Generelle Website-Eigenschaften: Favicon, Sprache, Kontaktdaten Online stellen: Handyversion, Facebook.Version, normal Inhalte: Dateimanager, Website-CSS, Seiten/Navigation Tracking: Trackingcode, Google Analytics, Google Webmastertools Seiteneigenschaften: Designeditor, Banner, Hintergrund, Metadaten... Layout Widgets In Gruppen eingeteilte Widgets

30 Design Einstellungen: Designeditor, Farben, Schriften, Banner, Hintergrund, Website-CSS... Designs: Premium und kostenlose Designs. Onlineshop Vollwertiger Onlineshop inkl. Zahlung via Kreditkarte oder PayPal (für 2015 kostenlos, ab 2016: CHF /Jahr) Seite 30/30