1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4....

26
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 Webdesign-Grundlagen

Transcript of 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4....

Page 1: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

1. HTML?2. Techniken: XHTML, CSS, DOM etc.3. Print vs. Web (Bild/Text, Farben, Fenster)4. Navigation & Struktur5. Browser & Webstandards6. Suchmaschinen7. Accessability8. Tipps9. Server: Scriptsprachen, Webspace, Domain

c3o für wirkstoff

Webdesign-Grundlagen

Page 2: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

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

Page 3: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

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.

Page 4: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

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

Page 5: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 1. HTML?

Neue Alternative: (X)HTML+CSS.

Trennung von Inhalt+DesignSemantisches Markup

HTML beschreibt InhaltCSS beschreibt welcher Inhalt wie aussieht

Bietet mehr und genauere Layoutmöglichkeiten

Hat auch seine Probleme, aber ist die Zukunft

Wired News, Tabellenränder rot

Page 6: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

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.

Page 7: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 2. Techniken

XHTML Beispiel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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

Page 8: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

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.

Page 9: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

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

Page 10: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

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

http://www.espn.com

http://www.wired.com

http://www.devedge.com

Page 11: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

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):

http://brainjar.com/css/positioning/

Page 12: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

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)

http://mozilla.org/docs/dom/samples

(Mozilla benützen!)

Page 13: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

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öglichUser hat Einfluss auf Aussehen: Schriftgröße in allen Browsern einstellbarEvtl. sogar Nur-Text oder Sprachbrowser.

Eh klar: Interaktivität & Animation

Bis zum Rand:

http://ewo.co.at

Ganz flüssig:

http://legowood.c3o.org

http://lindenhof-beinhauer.at

Page 14: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 3. Print vs. Web

Farben: Webfarben, sollen überall gehenMittlerweile ziemlich vernachlässigbar

Popups mit fixer Größe sind kein Ausweg:Usability!

Page 15: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 4. Navigation & Struktur

Auf jeder Seite, auf einen Blick: Wo binich, was gibts hier, wohin kann ich gehen

Breadcrumbs: Home > Kat. > Unterkat > SeiteDropdowns, Flyouts"Mystery meat navigation" vermeiden

HyperlinksAussagekräftige Wörter verlinken: „Spielplan“ statt „Um unseren Spielplan zu sehen

klicken Sie hier“.

Von normalem Text abhebenNichts anderes unterstreichen

Page 16: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 5. Browser & Webstandards

1. IE/Win (5, 5.5, 6)2. IE/Mac, Mozilla, Safari, Opera3. Netscape 44. 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 GrundlageDegradable: abwärtskompatibel

DasselbeMenü,Phoenix& Lynx

Page 17: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

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

Page 18: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 6. Suchmaschinen

Suchmaschinen-Bots prüfen SeiteFinden gut verlinkte Seiten automatischBei manchen kostenfreie Anmeldung

• Google (Yahoo, AOL)• Inktomi (MSN)• FAST (Lycos, T-Online)• Teoma (Ask Jeeves)• Altavista

ODP-Anmeldung (dmoz.org) = Google Directory, usw.

http://google.com/addurl.html

http://alltheweb.com/add_url.php

http://altavista.com/addurl/new/

Page 19: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 6. Suchmaschinen

+ Semantisches Markup <h1>&Uuml;berschrift</h1>

+ Viel Inhalt, Keywords+ Incoming Links von guten Seiten+ Guter Titel vs „Willkommen..“ od. Sonderzeichen.

+ Meta-Tags <meta name="Description" content="Alles &uuml;ber.">

+ alt & title-Attribute <img src=".." alt="Bildaussage" title="Zusatzinfo">

+ Keywords in URL, nicht zu viele Parameter http://wirkstoff.at/tshirt/23 vs. http://wirkstoff.at/katalog?t=23&seite=2&zoom=ja

Page 20: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 6. Suchmaschinen

- Flash & andere Plugins- Inhalt in Bildern, Videos- Inhalt in JavaScript- Frames (<noframes> hilft)- Spam

Page 21: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 7. Accessability

• Textbrowser• Sprechender Browser• Braillezeile

wie für Suchmaschinenbots:Inhalt in maschinenlesbarem Textlogisch strukturiert (<strong> vs <b>!)

DruckbarkeitSeperate CSS-Anweisungen für media="print"(Seitenumbrüche, evtl Menü verbergen, usw)

Accessability prüfen:

http://cast.org/bobby/

Lynx: Informations-design.fh-joanneum.at

Page 22: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 8. Tipps

TabellenWerden erst angezeigt wenn ihr gesamterInhalt geladen wurde. In mehrere aufteilenhilft manchmal (Header schnell da, Restlädt noch)

WYSIWYG-EditorenLegen idR wenig Wert auf Standards,Suchmaschinenfreundlichkeit, AccessabilityOft sieht man es den Seiten anAber mit Wissen gute Ergebnisse erzielbar

Page 23: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 8. Tipps

Dateinamen• Groß- != Kleinschreibung (Unix-Server)• Leerzeichen, Sonderzeichen (+äöüß) riskant

Flashmacht bei Info-Websites keinen SinnUsability, Durchsuchbarkeit,...Gut für Filmwebsites, Kunst, MultimediaIntros sowieso nie

Page 24: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 8. Tipps

Techniken

• gestrichelte Linien• Transparenzen• PNGs mit Alpha-Transparenz• animierte GIFs (Mouseover, 1malig, ...)• Stylesheetwechsler

Page 25: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 9. Server

ScriptsprachenPHP, ASP, Perl/CGI, Python, ColdFusion (CFM), Java-Servlets (J2EE)

Browser: „GET index.php“Server: Interpretiert Inhalt von index.php

Gibt dementsprechend HTML ausBrowser: bekommt ganz normales HTML

AnwendungsgebieteFormularmailer, Onlineshops, Datenbanken, alles was Daten auf dem Server speichern muss

Page 26: 1. HTML? 2. Techniken: XHTML, CSS, DOM etc. 3. Print vs. Web (Bild/Text, Farben, Fenster) 4. Navigation & Struktur 5. Browser & Webstandards 6. Suchmaschinen.

Webdesign-Grundlagen 9. Server

WebspaceSpeicherplatz im Internetbei einem Webhost (idR Linux-Server)Optional: Datenbank, PHP-Unterstützung,…Upload per FTPTransferlimit

Domaincom/net/org/biz/info/name ~ $10/Jahrat = Kopfweh!Weiterleitung oder „echt“ (Voraussetzung: DNS-Einträge, virtueller Server vom Webhost)

Int. Domains registrieren $10/a

http://www.registerfly.com

(Kreditkarte!)