im web unterwegs seit 1995 begeistert von yola, einstieg ... · begeistert von yola, wordpress,...
Post on 18-Oct-2020
1 Views
Preview:
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
switchplus ag 7
q Chrome q W3C q URL q Provider q Firefox q HTTP q SSL q Registry
Achtung Schnellzugstempo
switchplus ag 8
Zusammenfassung: Technologien und Begriffe
q Das Internet ist mehr als das Web § Anwendungsprotokolle
– HTTP, HTTPS, FTP (www) – SMTP, POP, IMAP (Mail) – DNS (IP-Adressen und Domainnamen)
§ Homepage, Webseite, Website
q Das Web ist nicht aus Papier § Eingeschränkte Kontrolle der Darstellung
(Betriebssystem, Browser, Bildschirmauflösung) § Sprachen: HTML, CSS, JavaScript
switchplus ag 9
Unbekannte
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/
resources/banner-over.png § file:/// […]/code-snippets/images/bg.png
q Relativ = von aktueller Position ausgehend § Relativ: von .html oder .css Datei
– ../images/bg.png § Rootrelativ: von “/” nach Domain
– /images/bg.png
switchplus ag 19
HTML Code von hallo-welt-2.html
switchplus ag 20
Kommentar mit absolutem Pfad zu Stylesheet
Relativer Pfad zu einem Bild
URL - Uniform Resource Locator
http://www.switchplus.ch/schulung/datei.html
switchplus ag 21
Protokoll
Host
Domain-Name
Top Level Domain
Verzeichnis Datei
länderspezifisch (cc: Country Codes)
generisch
URL mit Parameter
http://www.switchplus.ch:80/suche.php?q=wert&a=0
switchplus ag 22
Protokoll
Host
Domain-Name
Top Level Domain
Query String/Parameter
Datei
länderspezifisch (cc: Country Codes)
generisch
Port
CSS und Java Script
q CSS – Cascading Style Sheets § Während HTML die Struktur des Dokuments festlegt, dient CSS
dazu die Struktur zu formatieren.
q JavaScript (clientseitig) § HTML ist selber keine Programmiersprache.
Seit der Version 4 von HTML wird aber in der Spezifikation von HTML definiert, wie der Zugriff auf Scriptsprachen zu erfolgen hat.
§ JavaScript bzw. ECMA Script § Erlaubt die Manipulation der Schnittstelle für den Zugriff auf HTML
(das Document Object Model) § AJAX (Asynchronous JavaScript und XML)
switchplus ag 23
So funktioniert CSS
h1 { color: #ff0033; }
Selektor
Wert Eigenschaft
Selektoren: ID, Klasse & Pseudoklassen
q ID § #ID
q Klasse § .Klasse
q Dynamische Pseudoklassen § :link, :visited, :hover, :focus, :active
q Struktur-Pseudoklassen § :first-child, :first-letter, :first-line
Selektoren: Typselektor
q Element-Selektor § Z. B.: body, h1, p Mit Komma getrennt: bezieht sich auf alle und jedes Element
q Kontextsensitiver Selektor § Z. B.: .sidebar1 a Leerschlag getrennt: bezieht sich auf Links innerhalb der (einer) Sidebar
Eigenschaften
q Farben und Hintergründe: § Farbangabe als
– Farbname: black, green, purple… – Hexadezimaler Wert : #000, #008000, #800080
websicher: 00, 33, 66, 99, cc, ff
§ Bild-Wiederholung – background-repeat: repeat-x, repeat-y, no-repeat
Eigenschaften
q Abstände, Masse, Position § Margin, Border, Padding
§ Position – top, left, z-index
§ Masse – px, %, em
Schritte von der Idee zur eigenen Webseite
q Sie benötigen einen ansprechenden Domain-Namen
q Speicherplatz auf einem ständig mit dem Internet
verbundenen Server (Hosting-Provider)
q Guten und ansprechend aufbereiteten Inhalt, der laufend
aktuell gehalten und ergänzt wird
q Ein Werkzeug, um Ihre Webseite zu bauen
q Klare Vorstellung über Budget und laufenden Kosten
switchplus ag 29
Schritte von der Idee zur eigenen Webseite
q Sie benötigen einen ansprechenden Domain-Namen
switchplus ag 30
Domain-Namen
q hoher Wiedererkennungswert q Alle ccTLD von den Ländern, die ich erreichen
will, d.h. .ch, falls hauptsächlich Besucher aus der Schweiz
q .com, .net, .org, .eu, .asia q «exotische» Endungen q vertrauenswürdiger Registrar
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
switchplus ag 40
Werkzeug-Kiste: Links
q http://www.kmu.admin.ch/publikationen/02143/index.html?lang=de
q http://bgpatterns.com/ q http://colorschemedesigner.com/ q http://www.colorexplorer.com/ q http://www.colourlovers.com/ q https://kuler.adobe.com/ q http://www.stripegenerator.com/ q http://cssmenumaker.com/ 41 switchplus ag 42
URL: yola.com Passwort: switchplus
Fragen
switchplus ag 43
top related