HUWI.CH
Michael Huwiler
Amriswiler Strasse 9
8589 Sitterdorf
T 071 422 72 66
[email protected]
Selber Websites erstellen
PC-Club Wil, 3. Juli 2002
|
HUWI.CH
Programm
•
•
•
•
•
•
•
Strategien
Am Anfang steht die Idee
Werkzeuge
Grafikquellen
Todsünden
Profitools
Nützliche Tipps
|
HUWI.CH
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
|
HUWI.CH
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
|
HUWI.CH
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.
|
HUWI.CH
Stempel
Traktor
Experiment
Nussbaum
Schwimmbad
• 20 Begriffe werden gleich
für 60 Sekunden
Reifenventil
Augentropfen
eingeblendet.
Diskette
Taschenrechner
• Merke Dir soviele wie möglich.
Fenster
Feuerwehr
• Danach:
Unterhose
Ventilator
– Nimm Papier und Stift zur
Hand.
– Notiere alle Begriffe, an Bodensee
die Du Dich
Handbuch
erinnern kannst.
Fussball
Bleistift
Zoo
Matterhorn
|
HUWI.CH
Experiment
Bitte Begriffe notieren!
• 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.
|
HUWI.CH
6
Experiment
5
• 20 Begriffe werden gleich für 60 Sekunden
4
eingeblendet.
• Merke Dir soviele wie möglich.
3
• Danach:
– Nimm Papier und Stift zur Hand.
2
– Notiere alle Begriffe, an die Du Dich
erinnern kannst.
1
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
15
16
17
18
HUWI.CH
Logische Struktur
Titelseite (Tunnel)
mit Sprachwahl
Deutschsprachige
Hauptseite
Inhalt 1
Inhalt 2
Englischsprachige
Hauptseite
Inhalt 1
Inhalt 2
|
HUWI.CH
Ü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
|
HUWI.CH
MS Word
• Nur einfachste Pages erstellbar.
• Export in HTML-Datei sehr inneffizient.
– Datei sehr gross
– Viel unnützer Code
– Wenig Kompatibilität
• Nicht empfehlenswert.
|
HUWI.CH
Profitools
• Macromedia DreamWeaver
• Adobe Golive
• MS Frontpage
– Grosser Lernaufwand
– HTML-Kenntisse zwingend notwendig
– Interaktion (z.B. Gästebücher) nicht einfach
zu realisieren.
– Kosten
|
HUWI.CH
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)
|
HUWI.CH
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
|
Webserver
Auswahl des Hosters
HUWI.CH
|
HUWI.CH
Organisatorischer Ablauf
• Domain-Reservation (SWITCH)
• Anmeldung bei Provider
– Webhosting
– Mailhosting
• Domain-Aktivierung (direkt bei SWITCH oder durch
den Provider)
• Daten-Upload via FTP
|
HUWI.CH
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 .DEDomains). Häufig bleiben die Namen auf den Provider
eingetragen... Probleme/Kosten beim Provider-Wechsel.
|
HUWI.CH
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
|
HUWI.CH
10 Todsünden beim Webdesign
1.
Die Seite lädt und lädt – und es gibt weder etwas
zu sehen noch zu lesen.
|
HUWI.CH
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
|
HUWI.CH
Kompression (GIF)
256 Farben
31‘464 Bytes
32 Farben
16‘368 Bytes
16 Farben
11‘189 Bytes
4 Farben
4‘474 Bytes
|
HUWI.CH
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 bei
hohen Kontrasten)
|
HUWI.CH
Kompression (JPG)
100%
75 %
50 %
44‘784 Bytes 12‘188 Bytes 8‘405 Bytes
25 %
5‘565 Bytes
5%
2‘382 Bytes
|
HUWI.CH
10 Todsünden beim Webdesign
2.
Design auf 1024×768 ausgelegt.
640 × 480
800 × 600
1024× 768
1280×1024
1600×1200
4%
40%
46%
9%
1%
100%
96%
56%
10%
1%
|
HUWI.CH
10 Todsünden beim Webdesign
|
HUWI.CH
10 Todsünden beim Webdesign
3.
Ausgefranste und schlechte Bilder.
Cliparts aus Standardsammlungen.
Schlechte Bilder werfen ein ebenso schlechtes
(unprofessionelles) Licht auf die Firma.
|
HUWI.CH
www.Photodisc.com/de
• Professionelle Grafiken und Fotos.
• Sind nicht gratis, dafür umso
einzigartiger.
• Wenige Deja-vu's.
• Geeignet als Ideenlieferant.
|
HUWI.CH
www.corbis.com
• Für private und schulische Nutzung
speziell preisgünstige Angebote.
|
HUWI.CH
Antialias
|
HUWI.CH
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.
|
HUWI.CH
Schrifttypen
• Serifenschrift
– Optimale Lesbarkeit, auch für längere Texte
|
HUWI.CH
Schrifttypen
• Serifen-lose Schriften (Sans-Serif)
– Ideal für Überschriften
– Teilweise optimiert für Bildschirm (Verdana)
|
HUWI.CH
Schrifttypen
• Zierschriften
– Gemässigt und gezielt einsetzen.
– Auf Charakteristik achten.
– Lesbarkeit geht vor Originalität!
|
HUWI.CH
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)
|
HUWI.CH
Ansicht mit einem Text-Browser. Blinde Anwender verwenden solche, da diese
über Zusatzgeräte (Braille-Lesezeile, Sprachausgabe) nutzbar werden.
|
HUWI.CH
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
|
HUWI.CH
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)
|
HUWI.CH
10 Todsünden beim Webdesign
8.
Wenn sich unvermittelt und ungefragt neue
Browserfenster öffnen.
Wer sich im Fensterdschungel verliert, sucht das Weite.
|
HUWI.CH
10 Todsünden beim Webdesign
9.
Last update: 13.10.1996
Hoffen wir, Ihre Firma hinkt der Zeit nicht ebenso nach...
|
HUWI.CH
10 Todsünden beim Webdesign
10.
Broken links
JavaScript-Errors
Fehlende Bilder
Ohne seriöse Tests gewinnt man keinen Pokal!
|
HUWI.CH
10 Todsünden beim Webdesign
• http://www.snafu.de/~tilman/xenulink.html
|
HUWI.CH
www.webmasterplan.de
• Checks
– Ladezeit, Link, HTML
• Tools
– Meta-Tag Generator
– Keyword-Datenbank
– Browser-Screenshot
– Image-Komprimierung
|
HUWI.CH
Dr. Web (www.drweb.de)
• Die Infoquelle für Webdesigner
• Zahlreiche Tipps und Tricks
|
HUWI.CH
Besten Dank!
Bis irgendwann bei
www.huwi.ch
|

heruntergeladen - PC