Michael Huwiler Amriswiler Strasse Sitterdorf T 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. 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 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.

H U W I. C H | Logische Struktur

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 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 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 |Webserver Auswahl 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 -> Einhaltung der Gesetze –Markenrecht –Namenrecht –Wettbewerbsrecht Gut merkbare (und aussprechbare) Domainnamen bevorzugen! Kosten wiederkehrend (CH 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 -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 Farben 31‘464 Bytes 32 Farben 16‘368 Bytes 16 Farben 11‘189 Bytes 4 Farben 4‘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 × % 96% 1024× 76846% 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 | 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 | 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. -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: 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

H U W I. C H | Checks –Ladezeit, Link, HTML Tools –Meta-Tag Generator –Keyword-Datenbank –Browser-Screenshot –Image-Komprimierung

H U W I. C H | Dr. Web ( Die Infoquelle für Webdesigner Zahlreiche Tipps und Tricks

H U W I. C H | Besten Dank! Bis irgendwann bei