====== Webdesign ======
Webdesign ist sowohl eine technische-, handwerkliche- als auch eine kreative Sache, für Unbegabte gibt es [[cms:CMS|Content Managing Systeme]] oder [[wikis:Wikis]] die das Webdesign übernehmen und den Inhalt mehr in den Vordergrund stellen.

Dazu gehört im engeren Sinne die
  - **Struktur** ([[HTML]]) und das
  - **Design** ([[CSS]]).
  - **Inhalt** (Texte und Bilder)

siehe auch:
  * [[programmiersprachen:ajax]]
  * [[Flash]]




===== Links =====
  * **[[http://jendryschik.de/wsdev/einfuehrung/|Einführung in XHTML, CSS und Webdesign]]**
  * **[[http://validator.w3.org/unicorn/|W3C Validator (Unicorn)]]**
  * [[http://browsersize.googlelabs.com/|browsersize @googlelabs - prozentuale Aufmerksamkeitsverteilung]]
  * [[http://t3n.de/news/homepage-baukasten-10-besten-tools-eigene-website-312622/|Homepage-Baukasten]]
  * [[http://inpics.net/htmlcss.html|HTML & CSS Tutorial]]
  * [[http://www.photoshoplab.com/web20-design-kit.html|Web 2.0 Design Kit]]
  * [[http://www.usability.gov/|usability.gov - Step-by-Step Usability Guide]]
  * [[http://friendlybit.com/js/flash-only-vs-ajax-sites/|Flash-only vs. AJAX sites]]
  * [[http://www.stichpunkt.de/css/zeilenbreite.html|Testseite zur Zeilenbreite incl. Erklärung zum Maßstab em]]
  * [[http://www.stichpunkt.de/bookmarklets/bm-design.html|Bookmarklets: Webdesign analysieren]]
  * [[http://www.oswd.org/|free designs]]
  * [[http://support.microsoft.com/kb/294714|Transparente Hintergründe von PNG-Dateien werden in Internet Explorer nicht angezeigt]]
  * [[http://internetweiten.de/|Tipps zum Start von Internetprojekten]]
  * [[http://www.josiahcole.com/2007/02/14/a-webmasters-19-commandments/|19 Things NOT To Do When Building a Website]]
  * **[[http://code.google.com/p/ie7-js/|ie7-js A JavaScript library to make MSIE behave like a standards-compliant browser.]] + [[http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html|Introduction]]**
  * [[http://raphaeljs.com/|Raphaël—JavaScript Library]]
  * [[http://www.heise.de/ct/artikel/2-Klicks-fuer-mehr-Datenschutz-1333879.html|2 Klicks für mehr Datenschutz]]

==== Brosertests ====

  * **[[http://browsershots.org|browsershots.org]]**: Screenshots von Browsern auf unterschiedlichen Systemen
  * [[http://cwa.dcn.de/2010/03/07/cross-browser-testing/|Cross-Browser-Testing]]
  * [[http://www.spoon.net/Browsers/|Spoon Browser Sandbox]]
  * [[http://www.my-debugbar.com/wiki/IETester/HomePage|Browser Compatibility Check for Internet Explorer Versions from 5.5 to 9]]
  * [[https://browserlab.adobe.com/de-de/index.html|Adobe Browserlab]]


=== IE ===

  * [[http://finalbuilds.edskes.net/iecollection.htm|Final Builds Site - IE Collection]]
  * [[http://msdn.microsoft.com/en-us/library/hh673549%28v=vs.85%29.aspx|Internet Explorer 10 Guide for Developers]]
  * [[http://msdn.microsoft.com/en-us/library/ff986083%28v=VS.85%29.aspx|Internet Explorer 9 Compatibility Cookbook]]
  * [[https://blogs.msdn.com/b/ie/archive/2012/01/20/ie10-compat-inspector.aspx?Redirected=true|IE10 Compat Inspector]]
  * [[http://www.heise.de/newsticker/meldung/Microsoft-stellt-aeltere-Versionen-des-Internet-Explorer-zum-Testen-bereit-1180269.html|Microsoft stellt ältere Versionen des Internet Explorer zum Testen bereit]]
==== Ladezeiten messen ====

  * [[http://code.google.com/intl/de/speed/page-speed/|Page-speed]] [[software:Firefox]]-Plugin das Ladezeiten anzeigt
  * [[http://code.google.com/intl/de/speed/page-speed/download.html|mod_pagespeed]] [[apache:Apache]]-Modul

===== HTML =====
[[http://de.selfhtml.org|Selfhtml]]
[[http://www.theserverside.com/news/thread.tss?thread_id=43237|HtmlCleaner]]
[[http://www.useit.com/alertbox/9605.html|Top Ten Mistakes in Web Design]]
[[http://catb.org/~esr/html-hell.html|Welcome to The HTML Hell Page]]

  * [[http://www.screem.org/index.php|SCREEM]] - a web development environment
  * [[http://haha.nu/misc/html-tags-illustrated/|HTML Tags illustrated]]


===== Icons / Buttons =====

  * [[http://iris-design.info/photoshop/web-20-style-buttons/|Web 2.0 style buttons]]

[[http://iconsurf.com/|IconSurf.com - Visual Surf Engine]]
[[http://yellowicon.com/downloads|Free Community Icons]]
[[http://ktd.sytes.net/cpg132/thumbnails.php?album=9|Kick The Donkey's Web Buttons]]
[[http://jimmac.musichall.cz/icons.php|Gnome Icons]]
[[http://www.chami.com/html-kit/services/favicon/|FavIcon from Pics]]
[[http://www.wholenotherthing.com/Docs/moods.html|mood Icons]]
[[http://ndesign-studio.com/resources/pixel_icons.htm|free mini Pixel Icons]]

===== Barrierefreiheit =====
Unter [[wpde>Barrierefreies_Internet|Barrierefreiem Internet]] versteht man die Möglichkeit uneingeschränkt durch körperliche als auch durch technische (mobile Geräte, Textbrowser) Hindernisse das Internet nutzen zu können.

Die Webseiten sollen mit Hilfe von Screenreadern 


==== Links ====
  * [[http://friendlybit.com/tutorial/quick-accessibility-testing/|Quick Accessibility Testing]]
  * [[http://www.heise.de/ix/artikel/2007/08/144/|Barrierefreies Surfen (WWW für alle )]]
  * [[http://it-infothek.de/barrierefrei/inhalt.html|Barrierefreie Internetseiten]]
  * [[http://www.digitale-wertschoepfung.de/news/175/barrierefreies-webdesign-geschaeftsvorteile/|Geschäftsvorteile durch Barrierefreies Webdesign oder „16 Tipps, wie Sie mit Barrierefreiheit mehr Geld verdienen.“]]
  * [[http://www.barrierefinder.de/start.asp|Test: Ist Ihre Webseite barrierefrei?]]
  * [[http://www.einfach-fuer-alle.de/|Barrierefreies Webdesign - Einfach für Alle]]
  * [[http://www.heise.de/ct/04/18/186/default.shtml|Internet ohne Ausgrenzung Teil 1]] [[http://www.heise.de/ct/04/19/194/default.shtml|... Teil2]]
  * [[http://webxact.watchfire.com/|WebXACT Validator]]
  * [[http://www.fbi.fh-koeln.de/institut/projekte/BF/liste.htm|Linkliste Barrierefreiheit]]
  * [[http://www.knowware.de/barrierefrei.htm|Heft "Barrierefreies Webdesign"]]
  * [[http://download.bluemars.de/webmontag/2007-07-02/|„Nicht unsere Zielgruppe“: Wirtschaftlichkeit von Barrierefreiheit]]



==== gesetzliche / offizielle Vorgaben ====
  * [[http://www.w3c.de/Trans/WAI/webinhalt.html|Richtlinien des W3(C): WAI I+II+III]]
  * [[http://www.wob11.de/|Web ohne Barrieren - gemäß Paragraph 11 des Bundesbehindertengleichstellungsgesetzes]]
  * [[http://www.heise.de/newsticker/Neuer-Webstandard-fuer-Barrierefreiheit-WCAG-2-0-verabschiedet--/meldung/120343|WCAG 2.0]]

==== Software ====
  * [[http://www.accessify.com/tools-and-wizards/|Accessibility Tools & Wizards]]
  * [[http://www.webforall.info/html/deutsch/aistoolbar.php#download|Web Accessibility Toolbar für den IE]]

=== Screenreader ===
  * [[http://www.incobs.de/produktinfos/screenreader/test/index.php|Screenreader - Test 2006/2007]]
  * [[http://www.novell.com/de-de/products/linuxprofessional/blinux/|SUSE-Blinux (Screenreader für Linux)]]
  * [[http://live.gnome.org/Orca|Orca]]
  * [[http://www.heise.de/open/news/meldung/71254|LSR]]

  * [[http://tcts.fpms.ac.be/synthesis/mbrola/mbrola_entrypage.html|The MBROLA Project]] - Projekt zur Sprachsynthese

==== Zentrale Punkte ====
  * konsequente Trennung von
  - **Struktur** ([[XHTML]], HTML4, ...)
  - **Design** ([[CSS]]): schlankere Webseiten und einheitliches Design
  - **Inhalt** (Texte und Bilder)
  - und **Funktion** ([[Programmiersprachen:PHP]], [[Datenbanken:MYSQL]])

Allgemein sollte man seine Seiten einmal standardgemäß gestalten in einem Textbrowser oder von einem Mobilgerät abrufen und schauen ob die Seite noch benutzbar ist. 


==== Konkrete Maßnahmen ====
  * Benennung von
    - Feldern
    - Schaltflächen
    - Bildern (title+alt-Attribut): nicht zu lang, 1-2 Wörter wäre gut
  * Maßnahmen zur Vermeidung von Spammern (z.B. [[wpde>Captchas]]) sperren natürlich auch Besucher mit Sehbehinderungen aus! Mögliche Lösung: dyn. erzeugte mp3-Datei. siehe [[http://netbank.de|Netbank]].
  * Tabellen logisch und mit ''summary'' und Überschriften gestalten, max. 3-4 Spalten
  * nicht Links in neuen Fenster öffnen, wenn nicht nötig. Z.B. nur bei externen Links.
  * Accesskey auf den Seiten überschreiben oft die Hotkeys von Screenreadernm, also nicht bzw. nur selten vorbelegte Kombinationen (z.B. solche mit Nummern) verwenden
  * keine dynamische Inhalte wie Flash oder Laufschriften
  * kein Hintergrundsound (Screenreader geben dann nichts aus, bzw. Soundmix)
  * keine bzw. nur unbedingt notwendige automatische Aktualisierungen (refresh) der Seite (Grund: Screenreader lesen von oben nach unten, oben ist erstmal die Navigation. Wenn nun schnell aktualisiert wird bekommt man den Inhalt nie zu Gesicht)
  * Anker setzen: nicht unbedingt notwendig, hilft aber bei wiederholtem Besuch
  * Frames: wenn man sie schon unbedingt benutzen muss (muss man nicht, CSS iframes o.ä. geht besser) dann wenigstens die  [[http://www.netmechanic.com/news/vol5/javascript_no7.htm|Frames zusammen halten]]
  * Abkürzungen definieren entweder mit dem ''abbr''-Attribut kennzeichnen oder so:
<code html>
<acronym title="Content Managing System">CMS</acronym>
</code>
  * ''tabindex''(e) oder ''Accesskeys'' setzen (am besten aber nur Zahlen, da Doppelbelegung bzw. Menüs sonst nicht mehr über Tasten(-kombinationen) erreichbar sind).

==== typische Fehler ====
  * Frames (wenn man sie denn unbedingt noch einsetzten muss) ohne sinnvolle Beschreibung (frame01, frame02, ...)
  * Bilder ohne Beschreibungs- (alt-) Text (oder Bild1)
  * javascript ohne Alternativversion, Javascriptlinks

  * „Tag Soup“ (Tags werden nicht zur logischen Gliederung des Inhaltes benutzt
  * Layout-Tabellen und verschachtelte Tabellen
  * <div>-Container für Überschriften

===== Impressum =====
bei Webseiten mit gewerblichen Charakter (auch private Seiten mit Werbung als Einnahmequelle) muss ein Impressum zu finden sein. [[http://www.heise.de/newsticker/meldung/79621|Wo das Impressum stehen muss]] hat jetzt der [[http://www.bundesgerichtshof.de/|BGH]] entschieden.