Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- webdesign:webdesign [2009/05/05 22:21] – st
+++ webdesign:webdesign [2012/01/23 23:26] (aktuell) – [Brosertests] st
@@ Zeile 1: / Zeile 1: @@
+====== 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.