Selber Websites erstellen

|

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

|

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.




Traktor

Schwimmbad

Augentropfen

Taschenrechner

Feuerwehr

Ventilator

Bodensee

Bleistift

Matterhorn

Stempel

Nussbaum

Reifenventil

Diskette

Fenster

Unterhose

Handbuch

Fussball

Zoo

|

H U W I . C H

Experiment





Bitte Begriffe notieren!

|

H U W I . C H

Experiment





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 H

WebserverWebserverAuswahl 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




|

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)

|

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


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


|

H U W I . C H


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


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


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


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


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


8.

Wenn sich unvermittelt und ungefragt neue Browserfenster öffnen.

Wer sich im Fensterdschungel verliert, sucht das Weite.

|

H U W I . C H


9.

Last update: 13.10.1996

Hoffen wir, Ihre Firma hinkt der Zeit nicht ebenso nach...

|

H U W I . C H


10.

Broken linksJavaScript-Errors Fehlende Bilder

Ohne seriöse Tests gewinnt man keinen Pokal!

|

H U W I . C H


• 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

Documents

Selber Websites erstellen