14. April 2014 Einstieg Wie komme ich zu meinem eigenen Internet-Auftritt? Über mich verheiratet, Aargau Trainer bei switchplus Im Web unterwegs seit 1995 begeistert von Yola, Wordpress, HTML5 & CSS3 Mac, Windows und Ubuntu (Linux)-User Familie Geocaching switchplus ag 2 Christian.Zumbrunnen @switchplus.ch Über Sie/dich Ziele Kurs Website Vorkenntnisse switchplus ag 3 Vorname Name 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. switchplus ag 4
Transcript
14. April 2014
Einstieg
Wie komme ich zu meinem eigenen Internet-Auftritt?
Über mich
verheiratet, Aargau Trainer bei switchplus Im Web unterwegs seit 1995 begeistert von Yola, Wordpress, HTML5 & CSS3 Mac, Windows und Ubuntu (Linux)-User Familie Geocaching
switchplus ag 2
Christian.Zumbrunnen @switchplus.ch
Über Sie/dich
Ziele Kurs Website
Vorkenntnisse
switchplus ag 3
Vorname Name
Lernziele
q Sie kennen die wichtigsten Begriffe und Protokolle der Webtechnologie.
q Sie können alle Schritte zum Erstellen Ihres Internet-Auftritts durchführen – von der Registrierung des Domain-Namens bis zum Publizieren mit dem HomePageTool.
q Sie kennen verschiedene Möglichkeiten, wie Sie eine Webseite erstellen und aktualisieren können.
q Sie kennen die wichtigsten Gestaltungsregeln in Bezug auf Benutzerfreundlichkeit.
q Die zu erwartenden einmaligen und wiederkehrenden Kosten für Ihren Internet-Auftritt sind Ihnen bekannt.
switchplus ag 4
Kursablauf:
1. Technologien und Begriffe 2. Von der Idee zur Webseite 3. «Werkzeug-Kiste» 4. Umsetzung: «Meine erste Webseite»
switchplus ag 5
Kursablauf
1. Teil: Grundlagen, Konzept A. Grundlagen im Web
i. Begriffe und Technologien ii. Sprachen iii. Demo zum Mitmachen iv. Domain Name System
B. Schritte von der Idee zur eigenen Webseite i. Domain-Namen, Hosting-Provider ii. Inhalt, Werkzeug iii. Budget
2. Teil: Umsetzung mit HomePageTool von Yola switchplus ag 6
Begriffe
q IMAP q 404 q FTP q Tim Berners-Lee q CERN q Mosaic q DNS q HTTPS
q SWITCH q POP q Domain q Registrar q Blog q Web 2.0 q Wikipedia q Netscape
q Device & User Agent q Bildschirmgrösse, Fenstergrösse, Ausrichtung q Verbindungsgeschwindigkeit q Schriften, Farben, Bilder, Einstellungen q Ort q Kenntnisse und Intelligenz des Nutzers
(Barrierefreiheit, User-Centered Design, UX)
switchplus ag 10
Sprachen
switchplus ag 11
Kurze Demo zum Mitmachen
switchplus ag 12
HTML – Hypertext Markup Language
q Tags, die verschiedene Parameter haben können, zeichnen die einzelnen Teile einer Seite aus.
q Verschiedene HTML Versionen § HTML 4.01 (letzte „offizielle“ Version von 1999) § HTML 5.0 Spezifikation definitiv verabschiedet (Dez. 2012) § W3C Recommendation für HTML 5 erwartet in 2014 § Die meisten Browser unterstützen bereits HTML 5, obwohl es
davon noch keine „offizielle“ Version gibt
switchplus ag 13
Meine allererste HTML-Datei
<!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>
switchplus ag 14
Meine allererste HTML-Datei
<!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> switchplus ag 15
Dokumenttyp-Deklaration Damit der Browser “weiss”, um welchen Dokumenttyp es geht.
head Meta-Informationen Links zu Stylesheets
Body eigentlicher Webseiteninhalt
Die wichtigsten HTML-Elemente und Attribute
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
switchplus ag 16
Die wichtigsten HTML-Elemente und Attribute
HTML Element Attribute Verwendung
<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
<a> href: URI (lokaler oder absoluter Pfad) rel: Text: nofollow, Beziehungstyp (XFN) target: _blank (in neuem Fenster öffnen)
Anker / Link
Globale Attribute id: eindeutige Bezeichnung class: Klassenbezeichnung(en) dir: ltr | rtl Schreibrichtung lang: en | de… Sprachcode style: Inline CSS title: Text (Tooltip)
switchplus ag 17
Absolute und relative Pfade
switchplus ag 18
q Absolut = komplett mit Protokoll und Domaine § http://www.yola.homepage-abc.ch/templates/SchoolNotes/
q nGTLDs... (können vorgemerkt werden) switchplus ag 31
Domain Name System
switchplus ag 32
1. Adresse im Browser eingeben: www.switchie.ch
2. Welche IP Adresse ist das?
3. DNS für .ch: Welcher DNS ist für switchie.ch zuständig?
ns1 / ns2.switchplus.ch
4. Frage einen der beiden zuständigen DNS
5. Antwort: 188.93.10.38 (ipv4) bzw. [2001:620:0:ff:0:0:0:7] (ipv6)
Speicherplatz beim Hosting-Provider
q Meistens reichen die «kleinsten» Hostingpakete der Anbieter in Bezug auf Speicherplatz aus, solange nur eine Webseite eingerichtet werden soll
q Was bietet der Hosting-Provider darüber hinaus (Kundendienst, Homepage Tool, Software, Varianten)
q Im Verhältnis zum Gesamtaufwand für eine Webseite sind die Hostingkosten verschwindend klein.
switchplus ag 33
Inhalt
q Habe ich interessante Inhalte für meine Zielgruppe? q Wie oft kann ich neue Inhalte veröffentlichen? q Verfüge ich über ein langfristiges Ziel? q Welche konkreten Einzelziele möchte ich mit meiner
Webseite erreichen?
switchplus ag 34
Funktionalität
q Welche Funktionalitäten muss meine Webseite besitzen? § Newsletter verschicken § Feedback empfangen § eCommerce § Auswertungen über Marketingkampagnen § Wissensdatenbank § Bildergalerie § Reservierungssystem § ...
switchplus ag 35
Exkurs: Impressum-Generator
q http://www.bag.ch/impressum-generator
q Inhalt des Impressums § klare und vollständige Angaben über Identität und
Kontaktadressen des Anbieters, inkl. E-Mail § Die Bezeichnung «Impressum» ist rechtlich nicht
notwendig, aber empfehlenswert § Positionierung in der Fusszeile (Footer) üblich § Nicht nur Bild oder Formular (Spamschutz)
switchplus ag 36
Zusammenfassung
switchplus ag 37
Werkzeug
q Benötige ich ein Werkzeug, um eine Webseite zu erstellen? q Hat mein Hosting-Provider schon ein ansprechendes Tool? q Unterschied von HomePageTool und CMS q Will ich meine Inhalte selber pflegen und kann ich das
Werkzeug selbst bedienen? q Muss ich Drittsysteme in meine Webseite einbinden? q Wie lange möchte ich die Webseite nutzen, wann erfolgt das
erste grosse Redesign? q Wie viele Personen müssen die Webseite editieren können,
braucht es unterschiedliche Rechte?
switchplus ag 38
Budget
q Wie viel Zeit habe ich für die Pflege meiner Website? q Wer aktualisiert mein Internet-Angebot und woher kommen
die Daten? q Was darf die Erstellung der Webseite kosten? q Was ist das maximale monatliche Budget für meinen
Internet-Auftritt (inkl. Social Media, Google Adwords, Suchmaschinenoptimierung, Mobile Webseite, etc.)?
q Entspricht der Nutzen den geplanten Kosten?
switchplus ag 39
Grobe Kostenstruktur
q «einfache» Webseite ohne Shop und Anbindung von Drittsystemen § HomePageTool optimal (Selbstbedienung, schnelle Erstellung, einfache
Pflege, nichts hochladen, keine Updates nötig) § Aufwand: meist im Hostingpaket enthalten, Erstellung: 1-10 Stunden,
Pflege: 1 Stunde monatlich
q «komplexe» Webseite mit der Möglichkeit zusätzliche Funktionalitäten (Shop, etc.) hinzuzufügen § CMS optimal (flexibel, Einbindung von Plug-ins für Zusatzfunktionen,
lokales Back-up, Einbindung von Drittsystemen) § Aufwand: von gratis-SW bis zu CHF 2‘000, Erstellung: 10-1000 Stunden,
Pflege: 20-30% der Erstellungsaufwände
q «integrierte» Webseite, die mit bestehender Infrastruktur (ERP, CRM, Shop, etc.) verbunden werden muss § braucht Beratung von Spezialisten vor dem Entscheid für die Lösung
