|

Michael HuwilerAmriswiler Strasse

98589 Sitterdorf

T 071 422 72 66 huwi@huwi.ch

H U W I . C H

Selber Websites erstellen

PC-Club Wil, 3. Juli 2002

|

H U W I . C H

Programm• Strategien• Am Anfang steht die Idee• Werkzeuge• Grafikquellen• Todsünden• Profitools• Nützliche Tipps

|

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

|

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

|

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.

|

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.

TraktorSchwimmbadAugentropfenTaschenrechnerFeuerwehrVentilatorBodenseeBleistiftMatterhorn

StempelNussbaumReifenventilDisketteFensterUnterhoseHandbuchFussballZoo

|

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!

|

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

|

H U W I . C H

Logische Struktur

Titelseite (Tunnel)mit Sprachwahl

DeutschsprachigeHauptseite

EnglischsprachigeHauptseite

Inhalt 1 Inhalt 2 Inhalt 1 Inhalt 2

|

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

|

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.

|

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

|

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)

|

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

|

H U W I . C HWebserverWebserver

Auswahl des HostersAuswahl des Hosters

|

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

|

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.

|

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

|

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.

|

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

|

H U W I . C H

Kompression (GIF)

256 Farben31‘464 Bytes

32 Farben16‘368 Bytes

16 Farben11‘189 Bytes

4 Farben4‘474 Bytes

|

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 bei

hohen Kontrasten)

|

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

|

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%

|

H U W I . C H

10 Todsünden beim Webdesign

|

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.

|

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.

|

H U W I . C H

www.corbis.com• Für private und schulische Nutzung

speziell preisgünstige Angebote.

|

H U W I . C H

Antialias

|

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.

|

H U W I . C H

Schrifttypen• Serifenschrift

– Optimale Lesbarkeit, auch für längere Texte

|

H U W I . C H

Schrifttypen• Serifen-lose Schriften (Sans-Serif)

– Ideal für Überschriften– Teilweise optimiert für Bildschirm (Verdana)

|

H U W I . C H

Schrifttypen• Zierschriften

– Gemässigt und gezielt einsetzen.– Auf Charakteristik achten.– Lesbarkeit geht vor Originalität!

|

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)

|

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.

|

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

|

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)

|

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.

|

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...

|

H U W I . C H

10 Todsünden beim Webdesign

10.Broken links

JavaScript-Errors Fehlende Bilder

Ohne seriöse Tests gewinnt man keinen Pokal!

|

H U W I . C H

10 Todsünden beim Webdesign• http://www.snafu.de/~tilman/xenulink.html

|

H U W I . C H

www.webmasterplan.de• Checks

–Ladezeit, Link, HTML• Tools

–Meta-Tag Generator–Keyword-Datenbank–Browser-Screenshot – Image-Komprimierung

|

H U W I . C H

Dr. Web (www.drweb.de)• Die Infoquelle für

Webdesigner• Zahlreiche Tipps und Tricks

|

H U W I . C H

Besten Dank!

Bis irgendwann beiwww.huwi.ch