selber websites erstellen
DESCRIPTION
Selber Websites erstellen. PC-Club Wil, 3. Juli 2002. Programm. Strategien Am Anfang steht die Idee Werkzeuge Grafikquellen Todsünden Profitools Nützliche Tipps. Am Anfang steht die Idee!. Was will ich mit meiner Homepage? Privat Familie vorstellen Hobby präsentieren - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/1.jpg)
|
Michael HuwilerAmriswiler Strasse
98589 Sitterdorf
T 071 422 72 66 [email protected]
H U W I . C H
Selber Websites erstellen
PC-Club Wil, 3. Juli 2002
![Page 2: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/2.jpg)
|
H U W I . C H
Programm
• Strategien• Am Anfang steht die Idee• Werkzeuge• Grafikquellen• Todsünden• Profitools• Nützliche Tipps
![Page 3: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/3.jpg)
|
H U W I . C H
Am Anfang steht die Idee!
• Was will ich mit meiner Homepage?– Privat
• Familie vorstellen
• Hobby präsentieren
• Gleichgesinnte finden
– Firma
• Werbung
• Kunden gewinnen
• Lieferanten gewinnen
• Mitarbeiter rekrutieren
• Kosten senken
![Page 4: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/4.jpg)
|
H U W I . C H
Inhalte müssen geordnet werden
• Einfach, logisch, konsistent
• Selbsterklärend – für jeden verständlich– Auswahl der Begriffe für Menüs
• Der Informationsmenge angepasst
• Geringe Verschachtelung/Ebenen
• Schnell– Schnell am Ziel mit wenigen Klicks
• Orientierungshilfen– Aktuelle Position immer ersichtlich
![Page 5: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/5.jpg)
|
H U W I . C H
Experiment
• Einige Begriffe werden gleich für 60 Sekunden eingeblendet.
• Merke Dir soviele wie möglich.
• Danach:–Nimm Papier und Stift zur Hand.
–Notiere alle Begriffe, an die Du Dich erinnern kannst.
![Page 6: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/6.jpg)
|
H U W I . C H
Experiment
• 20 Begriffe werden gleich für 60 Sekunden eingeblendet.
• Merke Dir soviele wie möglich.
• Danach:–Nimm Papier und Stift zur Hand.
–Notiere alle Begriffe, an die Du Dich erinnern kannst.
Traktor
Schwimmbad
Augentropfen
Taschenrechner
Feuerwehr
Ventilator
Bodensee
Bleistift
Matterhorn
Stempel
Nussbaum
Reifenventil
Diskette
Fenster
Unterhose
Handbuch
Fussball
Zoo
![Page 7: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/7.jpg)
|
H U W I . C H
Experiment
• 20 Begriffe werden gleich für 60 Sekunden eingeblendet.
• Merke Dir soviele wie möglich.
• Danach:–Nimm Papier und Stift zur Hand.
–Notiere alle Begriffe, an die Du Dich erinnern kannst.
Bitte Begriffe notieren!
![Page 8: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/8.jpg)
|
H U W I . C H
Experiment
• 20 Begriffe werden gleich für 60 Sekunden eingeblendet.
• Merke Dir soviele wie möglich.
• Danach:–Nimm Papier und Stift zur Hand.
–Notiere alle Begriffe, an die Du Dich erinnern kannst.
0
1
2
3
4
5
6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
![Page 9: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/9.jpg)
|
H U W I . C H
Logische Struktur
Titelseite (Tunnel)mit Sprachwahl
DeutschsprachigeHauptseite
EnglischsprachigeHauptseite
Inhalt 1 Inhalt 2 Inhalt 1 Inhalt 2
![Page 10: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/10.jpg)
|
H U W I . C H
Überlegungen zur Struktur
• Optimal: 7 Elemente zur Auswahl• Flache Struktur (eindimensional)
– Sehr übersichtlich– ideal für wenig Informationen
• Zweidimensional– Klassisch bei KMU-Homepages– Komfortabel, übersichtlich– Komprimisse nötig
(Firmenstrukturen aufbrechen)
• Mehrdimensional– unübersichtlich, unverständlich– benötigt viel Platz auf Bildschirm
![Page 11: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/11.jpg)
|
H U W I . C H
MS Word
• Nur einfachste Pages erstellbar.• Export in HTML-Datei sehr
inneffizient.–Datei sehr gross–Viel unnützer Code–Wenig Kompatibilität
• Nicht empfehlenswert.
![Page 12: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/12.jpg)
|
H U W I . C H
Profitools
• Macromedia DreamWeaver• Adobe Golive• MS Frontpage
–Grosser Lernaufwand–HTML-Kenntisse zwingend notwendig– Interaktion (z.B. Gästebücher) nicht einfach zu realisieren.
–Kosten
![Page 13: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/13.jpg)
|
H U W I . C H
Yahoo Geocities• Kostenloser Webspace für private
Homepages.• Umständliche URL
http://www.geocities.com/huwilerm• Werbung wird eingeblendet• Bequeme PageWizards für schnelle
Seitenerstellung.• Top Page-Editor mit vielen Möglichkeiten• Statistiken• Kein FTP-Upload möglich• Leider alles in englisch (oder deutsch, aber
mit wenigen Möglichkeiten)
![Page 14: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/14.jpg)
|
H U W I . C H
Lycos Tripod • 50 MB kostenloser
Webspace für private Homepages.• Umständliche URL
http://mitglied.lycos.de/huwilerm• Werbung wird eingeblendet• Bequeme PageWizards für
schnelle Seitenerstellung.• Statistiken• Seitenupload per FTP• Datenbanken PHP4/mySQL• Alles in deutsch
![Page 15: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/15.jpg)
|
H U W I . C H
WebserverWebserverAuswahl des HostersAuswahl des Hosters
![Page 16: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/16.jpg)
|
H U W I . C H
Organisatorischer Ablauf
• Domain-Reservation (SWITCH)• Anmeldung bei Provider
–Webhosting–Mailhosting
• Domain-Aktivierung (direkt bei SWITCH oder durch den Provider)
• Daten-Upload via FTP
![Page 17: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/17.jpg)
|
H U W I . C H
Domain-Registrierung
• De schnäller isch de Gschwinder -> www.switch.ch• Einhaltung der Gesetze
– Markenrecht– Namenrecht– Wettbewerbsrecht
• Gut merkbare (und aussprechbare) Domainnamen bevorzugen!
• Kosten wiederkehrend (CH 48.- + einmalig 80.-)• Achtung vor Fast-Gratis-Angeboten (vor allem
bei .DE-Domains). Häufig bleiben die Namen auf den Provider eingetragen... Probleme/Kosten beim Provider-Wechsel.
![Page 18: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/18.jpg)
|
H U W I . C H
Webserver-Kenndaten
• Offensichtlich– Kosten für Einrichtung sowie wiederkehrende Kosten.– Webspace (zur Verfügung stehender Speicherplatz)– Datentransfer-Menge– Anzahl E-Mail-Adressen– Zusatzdienste (Statistik, CMS, Backup, etc.)
• Versteckt/schwer zu ermitteln– Zuverlässigkeit– Erreichbarkeit/Geschwindigkeit– Kooperation/Stabilität bei CGI-Skripts– Kundensupport– Kündigungsfrist
![Page 19: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/19.jpg)
|
H U W I . C H
10 Todsünden beim Webdesign
1.
Die Seite lädt und lädt – und es gibt weder etwas zu sehen noch zu lesen.
![Page 20: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/20.jpg)
|
H U W I . C H
Kompression
• GIF
– 2 bis 256 Farben (2,4,8,16,32,64,128,256)
– Gute Kompression bei gleichmässigen Mustern/Flächen
– Ideal für Grafiken, Diagramme, Schriften
– Ungeeignet für Fotos
– Möglichkeit, eine Farbe als transparent zu definieren.
– Verlustfreie Kompression
![Page 21: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/21.jpg)
|
H U W I . C H
Kompression (GIF)
256 Farben31‘464 Bytes
32 Farben16‘368 Bytes
16 Farben11‘189 Bytes
4 Farben4‘474 Bytes
![Page 22: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/22.jpg)
|
H U W I . C H
Kompression
• JPG
– Millionen von Farben
– Gute Kompression bei ungleichmässigen Mustern (Fotos)
– Ideal für Fotos
– Eher ungeeignet für starke Kontraste (Schriften)
– Keine Transparenz
– Farbverschiebungen durch Kompression-
– Verlustbehaftete Kompression (Artefakte, besonders beihohen Kontrasten)
![Page 23: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/23.jpg)
|
H U W I . C H
Kompression (JPG)
100%44‘784 Bytes
75 %12‘188 Bytes
50 %8‘405 Bytes
25 %5‘565 Bytes
5 %2‘382 Bytes
![Page 24: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/24.jpg)
|
H U W I . C H
10 Todsünden beim Webdesign
2.
Design auf 1024×768 ausgelegt.
640 × 480 4% 100%800 × 600 40% 96%1024× 768 46% 56%1280×1024 9% 10%1600×1200 1% 1%
![Page 25: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/25.jpg)
|
H U W I . C H
10 Todsünden beim Webdesign
![Page 26: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/26.jpg)
|
H U W I . C H
10 Todsünden beim Webdesign
3.
Ausgefranste und schlechte Bilder.Cliparts aus Standardsammlungen.
Schlechte Bilder werfen ein ebenso schlechtes (unprofessionelles) Licht auf die Firma.
![Page 27: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/27.jpg)
|
H U W I . C H
www.Photodisc.com/de
• Professionelle Grafiken und Fotos.• Sind nicht gratis, dafür umso
einzigartiger.• Wenige Deja-vu's.• Geeignet als Ideen-
lieferant.
![Page 28: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/28.jpg)
|
H U W I . C H
www.corbis.com
• Für private und schulische Nutzung speziell preisgünstige Angebote.
![Page 29: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/29.jpg)
|
H U W I . C H
Antialias
![Page 30: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/30.jpg)
|
H U W I . C H
10 Todsünden beim Webdesign
4.
Verwendung möglichst vieler Schriftarten
• Vermittelt Unruhe und Unprofessionalität•Die richtige Schriftwahl kann das Geschriebene unterstützen.•Leser benötigt dieselbe Schrift auf seinem Rechner! -> in Grafikprogramm gesetzte Schrift.
![Page 31: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/31.jpg)
|
H U W I . C H
Schrifttypen
• Serifenschrift
– Optimale Lesbarkeit, auch für längere Texte
![Page 32: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/32.jpg)
|
H U W I . C H
Schrifttypen
• Serifen-lose Schriften (Sans-Serif)
– Ideal für Überschriften
– Teilweise optimiert für Bildschirm (Verdana)
![Page 33: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/33.jpg)
|
H U W I . C H
Schrifttypen
• Zierschriften
– Gemässigt und gezielt einsetzen.
– Auf Charakteristik achten.
– Lesbarkeit geht vor Originalität!
![Page 34: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/34.jpg)
|
H U W I . C H
10 Todsünden beim Webdesign
5.
Ausschluss von Nutzergruppen
• Nutzer von bestimmten Browsern (WebTV, Palm, Psion, WAP)
• Nutzer mit Sehschwäche (Schriftgrössen)• Blinde Anwender (Grafiklinks ohne ALT-Tag)
![Page 35: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/35.jpg)
|
H U W I . C H
Ansicht mit einem Text-Browser. Blinde Anwender verwenden solche, da diese über Zusatzgeräte (Braille-Lesezeile, Sprachausgabe) nutzbar werden.
![Page 36: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/36.jpg)
|
H U W I . C H
10 Todsünden beim Webdesign
6.
Man findet den Eingang zu den eigentlichen Inhalten nicht. (Navigation)
Es ist erstaunlich wie Autoren den Zugang zwischen unzähligen Buttons und Grafiken oder in komplizieren Imagemaps verstecken
![Page 37: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/37.jpg)
|
H U W I . C H
10 Todsünden beim Webdesign
7.
Wenn man ein Formular ausfüllen muss, bevor man etwas zu sehen bekommt.
• Zu komplexe, seitenlange Formulare.• Zwingende Eingabefelder (z.B. E-Mail-Adresse, Fax oder Strasse)
![Page 38: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/38.jpg)
|
H U W I . C H
10 Todsünden beim Webdesign
8.
Wenn sich unvermittelt und ungefragt neue Browserfenster öffnen.
Wer sich im Fensterdschungel verliert, sucht das Weite.
![Page 39: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/39.jpg)
|
H U W I . C H
10 Todsünden beim Webdesign
9.
Last update: 13.10.1996
Hoffen wir, Ihre Firma hinkt der Zeit nicht ebenso nach...
![Page 40: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/40.jpg)
|
H U W I . C H
10 Todsünden beim Webdesign
10.
Broken linksJavaScript-Errors Fehlende Bilder
Ohne seriöse Tests gewinnt man keinen Pokal!
![Page 41: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/41.jpg)
|
H U W I . C H
10 Todsünden beim Webdesign
• http://www.snafu.de/~tilman/xenulink.html
![Page 42: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/42.jpg)
|
H U W I . C H
www.webmasterplan.de
• Checks–Ladezeit, Link, HTML
• Tools–Meta-Tag Generator–Keyword-Datenbank–Browser-Screenshot – Image-Komprimierung
![Page 43: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/43.jpg)
|
H U W I . C H
Dr. Web (www.drweb.de)
• Die Infoquelle für Webdesigner
• Zahlreiche Tipps und Tricks
![Page 44: Selber Websites erstellen](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56814911550346895db6491a/html5/thumbnails/44.jpg)
|
H U W I . C H
Besten Dank!
Bis irgendwann beiwww.huwi.ch