1 / 26

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

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.

amandla
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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 http://www.espn.com http://www.wired.com http://www.devedge.com

  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): http://brainjar.com/css/positioning/

  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) http://mozilla.org/docs/dom/samples (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: http://ewo.co.at Ganz flüssig: http://legowood.c3o.org http://lindenhof-beinhauer.at

  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. http://google.com/addurl.html http://alltheweb.com/add_url.php http://altavista.com/addurl/new/

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

  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: http://cast.org/bobby/ 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 http://www.registerfly.com (Kreditkarte!)

More Related