Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Webdesign-Grundlagen
1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen 7. Accessability 8. Tipps 9. Server: Scriptsprachen, Webspace, Domain c3o für wirkstoff
2
Webdesign-Grundlagen 1. HTML?
HTML = Seitenbeschreibungssprache. Zum Austausch von aufeinander verweisenden Dokumenten, unabhängig von der Plattform. Anfangs nur simpelste Formatierungs- möglichkeiten. Alle Tags waren semantisch: <title>...</title> Zuerst Netscape und später auch Microsoft erfanden Erweiterungen: Schriftarten, Farben, Bilder, Filme, bewegter und blinkender Text, ...
3
Webdesign-Grundlagen 1. HTML?
Semantik vs Layout: <strong>Wichtiger Text</strong> Dem Browser bleibt überlassen, wie er den Inhalt anzeigt: Fett, bunt, gross, betont,... <b>Fett geschriebener Text</b> Ist nicht mehr semantisch, sondern eine Layoutanweisung ohne inhaltl. Bedeutung.
4
Webdesign-Grundlagen 1. HTML?
HTML ist nicht PDF, war nie zum Layouten gedacht. Die Möglichkeiten sind signifikant eingeschränkt. Man suchte Wege, mit HTML genau zu formatieren: - Tabellen in Tabellen in Tabellen in ... - Blind GIFs (durchsichtig, 1x1px) Solche Hacks lieferten selten auf allen Browsern die exakt gleichen Ergebnisse --> Kopfweh. Bartelme Design, Tabellenränder rot
5
Webdesign-Grundlagen 1. HTML?
Neue Alternative: (X)HTML+CSS. Trennung von Inhalt+Design Semantisches Markup HTML beschreibt Inhalt CSS beschreibt welcher Inhalt wie aussieht Bietet mehr und genauere Layoutmöglichkeiten Hat auch seine Probleme, aber ist die Zukunft Wired News, Tabellenränder rot
6
Webdesign-Grundlagen 2. Techniken
XHTML = HTML nach XML-Regeln (strenger) z.B.: Jeder Tag muss geschlossen werden (in HTML musste das nicht jeder: <br>) Rückwärtskompatibel, hat wenig praktische Auswirkungen, ist nicht zwingend nötig Validator: Software auf w3c.org-Website die die Korrektheit (Wohlgeformtheit) von (X)HTML überprüft.
7
Webdesign-Grundlagen 2. Techniken
XHTML Beispiel <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <title>Meine erste XHTML-Seite</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body lang="de"> Hallo, Welt! </body> </html> DOCTYPE HEAD META CONTENT-TYPE BODY
8
Webdesign-Grundlagen 2. Techniken
CSS = Cascading Style Sheets Legt Formatierung für bestimmte Stellen im HTML-Quellcode genau fest. Mehr Möglichkeiten als pures HTML (z.B. Zeilenabstand, Zeichenabstand, Einrückung..) CSS in HTML oder seperater Datei -> gleiche Datei auf allen Unterseiten der Website benützen: Weniger Ladezeit.
9
Webdesign-Grundlagen 2. Techniken
CSS Beispiel (in HTML) <html> <head> <title>Bla</title> <style type="text/css"> .wichtig { color:red; } </style> </head> <body> <span class="wichtig">Wichtiger Text</span> </body> </html> HEAD: STYLE-ANGABEN BODY: KLASSENZUWEISUNG
10
Webdesign-Grundlagen 2. Techniken
CSS-P (Positioning) Methode der Positionierung der Elemente auf einer HTML-Seite mit CSS und dem <div>-Tag, anstatt Tabellen. Pixelgenau und sehr flexibel In GoLive: "Schweberahmen" = <div> Große tabellenlose (CSS-P) Sites
11
Webdesign-Grundlagen 2. Techniken
CSS-P Beispiel (in HTML) <html> <head> <title>Bla</title> <style type="text/css"> #logo { position:absolute;left:20px;top:10%; width:100px; height:2cm; } </style> </head> <body> <div id="logo">Wichtiger Text</div> </body> </html> CSS-P Tutorial (Quelltext):
12
Webdesign-Grundlagen 2. Techniken
JavaScript & DHTML JavaScript = clientseitige Scriptsprache z.B. für einfache Berechnungen, Popup- Fenster, Mouseovers usw. Hat mit JAVA nichts zu tun! DHTML = Mit Hilfe von JavaScript CSS- Eigenschaften verändern. Z.B. <div>s ein und ausblenden, Schneeflocken animieren u.s.w. Mozilla DOM Samples (DHTML) (Mozilla benützen!)
13
Webdesign-Grundlagen 3. Print vs. Web
Papier vs. Browser: Web: Man kann sich auf nichts verlassen: Auflösung, Fenstergröße, Schriftarten, Farbtiefe, installierte Plugins, Gamma,... Flexible, flüssige Designs sind möglich User hat Einfluss auf Aussehen: Schriftgröße in allen Browsern einstellbar Evtl. sogar Nur-Text oder Sprachbrowser. Eh klar: Interaktivität & Animation Bis zum Rand: Ganz flüssig:
14
Webdesign-Grundlagen 3. Print vs. Web
Farben: Webfarben, sollen überall gehen Mittlerweile ziemlich vernachlässigbar Popups mit fixer Größe sind kein Ausweg: Usability!
15
Webdesign-Grundlagen 4. Navigation & Struktur
Auf jeder Seite, auf einen Blick: Wo bin ich, was gibts hier, wohin kann ich gehen Breadcrumbs: Home > Kat. > Unterkat > Seite Dropdowns, Flyouts "Mystery meat navigation" vermeiden Hyperlinks Aussagekräftige Wörter verlinken: „Spielplan“ statt „Um unseren Spielplan zu sehen klicken Sie hier“. Von normalem Text abheben Nichts anderes unterstreichen
16
Webdesign-Grundlagen 5. Browser & Webstandards
1. IE/Win (5, 5.5, 6) 2. IE/Mac, Mozilla, Safari, Opera 3. Netscape 4 4. iCab, Lynx, Arachne, Handy/PDA, TV,... Kompromisse eingehen (1~2) Zumindest benutzbar (2-3) Notfalls verschiedene CSS je nach Browser (Erkennung JS oder PHP, etc) W3C-Standards als Grundlage Degradable: abwärtskompatibel Dasselbe Menü, Phoenix & Lynx
17
Webdesign-Grundlagen 5. Browser & Webstandards
Auflösung: 800x600 Grundlage, Zielgruppe! Achtung: Taskbar, Scrollbar, Fenster! Netscape 4 kann kaum CSS(-P) IE6/Win, IE5/Mac, Moz, Opera7 halten sich gut an Standards IE5/Win und IE6/Win: Wichtiger Unterschied bei CSS-P (Größe von <div>s) -> Tanteks Box Model Hack Mozilla: CSS-2 (position:fixed, abgerundete Ecken, usw.)
18
Webdesign-Grundlagen 6. Suchmaschinen
Suchmaschinen-Bots prüfen Seite Finden gut verlinkte Seiten automatisch Bei manchen kostenfreie Anmeldung Google (Yahoo, AOL) Inktomi (MSN) FAST (Lycos, T-Online) Teoma (Ask Jeeves) Altavista ODP-Anmeldung (dmoz.org) = Google Directory, usw.
19
Webdesign-Grundlagen 6. Suchmaschinen
+ Semantisches Markup <h1>Überschrift</h1> + Viel Inhalt, Keywords + Incoming Links von guten Seiten + Guter Titel vs „Willkommen..“ od. Sonderzeichen. + Meta-Tags <meta name="Description" content="Alles über."> + alt & title-Attribute <img src=".." alt="Bildaussage" title="Zusatzinfo"> + Keywords in URL, nicht zu viele Parameter vs.
20
Webdesign-Grundlagen 6. Suchmaschinen
- Flash & andere Plugins - Inhalt in Bildern, Videos - Inhalt in JavaScript - Frames (<noframes> hilft) - Spam
21
Webdesign-Grundlagen 7. Accessability
Textbrowser Sprechender Browser Braillezeile wie für Suchmaschinenbots: Inhalt in maschinenlesbarem Text logisch strukturiert (<strong> vs <b>!) Druckbarkeit Seperate CSS-Anweisungen für media="print" (Seitenumbrüche, evtl Menü verbergen, usw) Accessability prüfen: Lynx: Informations-design.fh-joanneum.at
22
Webdesign-Grundlagen 8. Tipps
Tabellen Werden erst angezeigt wenn ihr gesamter Inhalt geladen wurde. In mehrere aufteilen hilft manchmal (Header schnell da, Rest lädt noch) WYSIWYG-Editoren Legen idR wenig Wert auf Standards, Suchmaschinenfreundlichkeit, Accessability Oft sieht man es den Seiten an Aber mit Wissen gute Ergebnisse erzielbar
23
Webdesign-Grundlagen 8. Tipps
Dateinamen Groß- != Kleinschreibung (Unix-Server) Leerzeichen, Sonderzeichen (+äöüß) riskant Flash macht bei Info-Websites keinen Sinn Usability, Durchsuchbarkeit,... Gut für Filmwebsites, Kunst, Multimedia Intros sowieso nie
24
Webdesign-Grundlagen 8. Tipps
Techniken gestrichelte Linien Transparenzen PNGs mit Alpha-Transparenz animierte GIFs (Mouseover, 1malig, ...) Stylesheetwechsler
25
Webdesign-Grundlagen 9. Server
Scriptsprachen PHP, ASP, Perl/CGI, Python, ColdFusion (CFM), Java-Servlets (J2EE) Browser: „GET index.php“ Server: Interpretiert Inhalt von index.php Gibt dementsprechend HTML aus Browser: bekommt ganz normales HTML Anwendungsgebiete Formularmailer, Onlineshops, Datenbanken, alles was Daten auf dem Server speichern muss
26
Webdesign-Grundlagen 9. Server
Webspace Speicherplatz im Internet bei einem Webhost (idR Linux-Server) Optional: Datenbank, PHP-Unterstützung,… Upload per FTP Transferlimit Domain com/net/org/biz/info/name ~ $10/Jahr at = Kopfweh! Weiterleitung oder „echt“ (Voraussetzung: DNS-Einträge, virtueller Server vom Webhost) Int. Domains registrieren $10/a (Kreditkarte!)
Ähnliche Präsentationen
