Barrierefreies Internet [Recherche]

Posted: Oktober 14th, 2008 | Filed under: Internet, Programmieren | Tags: , , , , | No Comments »

Hier mal eine von mir erstellte Dokumentation über barrierefreies beziehungsweise barrierearmes Internet.

Barrierefreies Internet

1.1 Gliederung

  • Einleitung
  • Probleme bei der Informationsverarbeitung
  • Webstandards
  • Techniken
  • Schlusswort
  • Quellen

1.2 Einleitung

Barrierefreies Internet bietet die Möglichkeit allen Menschen unabhängig von technischen und körperlichen Voraussetzungen die verschiedensten Internetinhalte zugänglich zu machen. Die Kunst dabei ist es Webseiten so zu gestalten dass jeder die Informationen nutzen, lesen und verarbeiten kann.

1.3 Probleme der Informationsverarbeitung

1.3.1 Körperlich eingeschränkte Menschen

  • Blinde Menschen benutzen so genannte Screenreader (Bildschirmleseprogramme). Dabei werden Texte und Bedienelemente, mittels akustischer Sprachausgabe, vorgelesen. Befinden sich nun Bilder auf der Internetseite hat der blinde keine Möglichkeit irgendeine Information daraus zu gewinnen. Deshalb sollte zu jedem Bild, zu jeder Animation oder zu jedem Video ein Alternativtext verwendet werden.
  • Durch die Verwendung von Java oder Flash Applikation, vor allem in der Navigation oder auf anderen wichtigen Seitenelementen, werden sehbehinderte automatisch ausgesperrt.
  • Sehschwache oder ältere Menschen benötigen skalierbare Schrift um den Seiteninhalt ihrer Bedürfnisse entsprechend anzupassen.
  • Personen die keine Maus bedienen können weil sie Spastiken oder andere Bewegungseinschränkungen haben navigieren sich meistens mit der „Tab“ Taste und springen so von Link zu Link. Deshalb sollte die Webseite gut mit der Tastatur bedienbar sein und es ist wichtig dass die einzelnen Elemente in einer sinnvollen Reihenfolge sind. Durch Einsatz von z.B. JavaScript Links (onclick Aktionen) können diese Menschen keine Interaktionen durchführen.
  • Gehörlose Menschen können akustische Inhalte nicht wahrnehmen. Deshalb sollte darauf verzichtet werden oder ein Alternativer Text der den Inhalt der Audiosequenz widerspiegelt zur Verfügung gestellt werden.
  • Da manche Menschen Probleme mit langen und umständlichen Texten haben sollte der Inhalt und die Navigation leicht verständlich formuliert werden.

1.3.2 Technisch eingeschränkte Benutzer

  • Durch Verwendung von Flash, Java, Qicktime, RealPlayer, Shockwave oder Windows Media Player Elementen werden Benutzer denen diese Plugins nicht zur Verfügung stehen automatisch benachteiligt.
  • Aus Sicherheitsgründen deaktivieren einige Benutzer JavaScript oder sie besitzen kein JavaScript, weil ihr Browser zu alt ist. Deswegen sollte kein JavaScript verwendet werden. Diese Vorstellung scheint jedoch sehr unrealistisch in Anbetracht der momentanen Web 2.0 Entwicklung. Je höher die Vielfalt die durch JavaScript entsteht, zum Beispiel „Asynchrone http Requests“, desto höher ist das Risiko der ausgrenzenden Mechanismen.

1.4 Webstandards

1.4.1 Auswirkungen auf das Frontend

Auszug aus http://www.lingo4u.de/article/checklist#level-01-01 . Diese Checkliste ist lediglich ein kleiner Leitfaden an dem sich orientiert werden kann. Für ausführlichere Informationen bitte das von „Web Accessibility Initiative“ (Initiative von W3C) erstelle Handbuch (http://www.w3.org/TR/WCAG10/) und die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (BITV) (http://www.einfach-fuer-alle.de/artikel/bitv/ ) verwenden.

• Qualität des Codes
• Hat die Seite einen korrekten Doctype?
• Hat die Seite eine Zeichensatzcodierung?
• Verwendet die Seite gültiges (X)HTML?
• Verwendet die Seite gültiges CSS?
• Nutzt die Seite CSS-Hacks?
• Hat die Seite unnötige Klassen oder IDs?
• Ist der Code gut strukturiert?
• Gibt es tote Links auf der Seite?
• Wie sieht es mit der Größe/Geschwindigkeit der Seite aus?
• Treten JavaScript-Fehler auf?
• Grad der Trennung von Inhalt und Layout
• Verwendet die Seite für die Gestaltung überall CSS (Schriftart, Farbe, Abstände, Ränder etc.)?
• Sind alle dekorativen Bilder mit CSS realisiert oder erscheinen sie im (X)HTML?
• Zugänglichkeit für Nutzer
• Ist das Alt-Attribut für alle beschreibenden Bilder sinnvoll gesetzt?
• Verwendet die Seite relative Einheiten für die Schriftgröße (statt absoluter Einheiten)?
• Wird das Layout beim Vergrößern der Schrift gestört?
• Verwendet die Seite »visible skip menus«?
• Nutzt die Seite zugängliche Formulare?
• Nutzt die Seite zugängliche Tabellen?
• Haben die Farben ausreichend Helligkeit/Kontrast?
• Werden wichtige Informationen nur mit Farben gekennzeichnet?
• Gibt es verzögerte DropDown-Menüs (für Nutzer, mit eingeschränkten motorischen Fähigkeiten)?
• Sind alle Linktexte beschreibend (für blinde Nutzer)?
• Zugänglichkeit für Geräte/Maschinen
• Funktioniert die Seite in neuen und alten Browsern vernünftig?
• Ist der Inhalt der Seite auch ohne CSS zugänglich?
• Ist der Inhalt der Seite auch ohne Bilder zugänglich?
• Funktioniert die Seite auch in Textbrowsern wie Lynx?
• Lässt sich die Seite vernünftig ausdrucken?
• Funktioniert die Seite auf Handhelds?
• Besitzt die Seite ausführliche Meta-Informationen?
• Funktioniert die Seite in verschiedenen Fenstergrößen des Browsers?
• Grundlegende Benutzbarkeit
• Gibt es eine klare visuelle Gliederung?
• Sind die Überschriften unterschiedlicher Ordnung leicht unterscheidbar?
• Besitzt die Seite eine leicht verständliche Navigation?
• Ist die Navigation auf allen Seiten durchgängig?
• Wird eine konsistente und passende Sprache/Formulierung verwendet?
• Gibt es eine Sitemap und ist diese leicht zu finden?
• Ist bei größeren Seiten eine Suchfunktion vorhanden?
• Gibt es auf jeder Seite einen Link zur Startseite?
• Sind alle Links unterstrichen?
• Sind schon besuchte Links entsprechend farblich gekennzeichnet?
• Seitenverwaltung
• Hat die Seite eine aussagefähige und hilfreiche 404-Fehlerseite, die überall funktioniert?
• Hat die Seite lesbare URLs?
• Ist die Seite auch ohne »www« erreichbar?
• Hat die Seite ein Favicon?

1.5 Techniken

  • Gültiges HTML/XHTML nach W3C Standart.
  • Durch CSS strikte Trennung von Layout und Inhalt.
  • Skalierbarkeit von Schriften, Abständen und Größen. Alle Abstände sollten relativ sein, d.h. alle Angaben in „em“ oder „%“.
  • HTML/XHTML Elemente entsprechend ihrer Bedeutung nutzen. Mehr dazu unter http://de.selfhtml.org/html/text/logisch.htm . Hier einige Beispiele: (Überschrift), (stark betont), (wichtiger Text), (Numerische Liste).
  • Quelltext nicht unnötig aufblähen durch anwenden von Div Layouts anstatt Tabellen Layouts.
  • Bilder mit Alternativtext ausstatten.
  • Schaltflächeneffekte über CSS anstatt JavaScript.

Um zu prüfen ob eine Internet Seite in gültigem HTML oder XHTML geschrieben ist gibt es Prüfungsdienste. Zum Beispiel: http://validator.w3.org

1.6 Schlusswort

Durch die rasante Verbreitung von Ajax, visuellen Effekten und benutzerfreundlichen Interaktionen bietet uns das Internet immer mehr neue Chancen und Möglichkeiten um den „normalen“ Internetbenutzer das Surfen angenehmer, unterhaltsame, spektakulärer und interaktiver zu gestalten. Webapplikationen wie http://www.pixlr.com/app oder http://280slides.com Editor lassen uns erahnen was in Zukunft möglich sein wird. Hoch komplexe Software wird auf den Browser projiziert und uns von überall zugänglich gemacht. Dabei wird vor allem auf die Techniken JavaScript und Flash gesetzt.

Der neue Browser „Chrome“ (http://www.google.com/chrom) aus dem Hause Google setzt durch seine neuartige JavaScript Engine neue Maßstäbe im Bereich Geschwindigkeit, Stabilität und Sicherheit.

Diese Entwicklung wird das „Web 2.0“ weiterhin vorantreiben und es wird zu einem verstärkten Einsatz, aller Barrierefreiheit zum Trotz, zu komplexen JavaScript Applikationen kommen.
Jedoch besteht darin die Gefahr, dass die Barrierefreiheit noch schneller und mehr ins Hintertreffen gerät. Durch diese rasante Entwicklung (Neues Web Konzept: http://adaptivepath.com/aurora) werden immer mehr Menschen ausgegrenzt und ihnen der Zugang zu Webinhalten unzugänglich gemacht.

1.7 Quellen

Mit Java die Zwischenablage auslesen / ausgeben

Posted: August 22nd, 2008 | Filed under: Programmieren, Tutorials | Tags: , , , , | 5 Comments »

Zum Feierabend nochn bisschen Quellcode :). Ihr wollte mit Java auslesen was in der Zwischenablage liegt (STRG+C / Kopieren). Mit dem folgenden Quellcode sollte euch geholfen sein.

import java.awt.Toolkit; 
import java.awt.datatransfer.*; 
 
class PrintClipboard{ 
  
  public static void main( String[] args ) throws Exception{
    Clipboard systemClipboard;
    systemClipboard = Toolkit.getDefaultToolkit().getSystemClipboard(); 
    Transferable transferData = systemClipboard.getContents( null ); 
    for(DataFlavor dataFlavor : transferData.getTransferDataFlavors()){ 
      Object content = transferData.getTransferData( dataFlavor ); 
      if ( content instanceof String ) 
      { 
        System.out.println( content );
        break;
      }
    }
  }
}

Quelltext-Quelle: http://openbook.galileocomputing.de/javainsel9/javainsel_19_025.htm#t2t34

PHP: Tutorial Ajax Suche aus einer MySQL Datenbank

Posted: Juli 25th, 2008 | Filed under: Datenbank, Programmieren, Tutorials | Tags: , , , , , , , , , , | 50 Comments »

Heute möchte ich euch zeigen wie man Schritt für Schritt eine LiveSuche(ohne nachladen der Seite) mit PHP, HTML & Ajax realisiert.

JavaScript + PHP + MySQL = Ajax Triple Action

Was ist Ajax ?

Asynchronous JavaScript and XML. Wenn man normalerweise auf einen Link klickt gelangt man meistens auf eine andere Seite. Die Link Url sagt dem Server, was für eine Seite wir zurückbekommen wollen. Dieser sogenannte Request kann man mit JavaScript auch ohne Neuladen der Seite erreichen. Es gibt 2 Grundsätzliche Arten von Requests: POST(wird bei Formularen verwendet) & GET(wird bei Links verwendet). Mit einem sogenannten XMLHttpRequest kann man solche Requests durchführen. Die Antwort des Servers kann man dann auslesen und den zurückgelieferten Inhalt mit JavaScript weiterverarbeiten.

Das Formular

Oft werden Anfragen auch über ein Formular abgeschickt (meistens mit POST). Da wir das Absenden unserer Anfrage per JavaScript realisieren brauchen wir kein herkömmliches Formular…

Im Prinzip reicht uns sogar ein herkömmliches Textfeld (ohne Form):

Die Eingabe eines Users wollen wir natürlich verarbeiten. Da wir eine AjaxSuche schreiben soll also bei jedem Tastendruck eine neue Anfrage an den Server gestellt werden. Per „onKeyUp“ auf dem Texteingabefeld können wir nun eine JavaScriptfunktion ausführen. Wir geben als Übergabeparameter für diese Funktion den eigenen Wert (also was im Textfeld steht) mit, um die Eingabe weiterzuverarbeiten. Zum testen ob das auch funktioniert hat, lassen wir uns unsere Eingabe als Alarmfenster ausgeben. Als Funktionsnamen nehmen wir etwas sprechendes „searchFor“. Und mit this.value können wir einfach auf den Wert des Objektes in dem die Funktion aufgerufen wird zugreifen.

Die Anfrage

Jetzt kommen wir zum schwierigsten Teil. Nun wird in userer JavaScript Methode ein xmlHttp Request erzeugt. Unsere Anfrage soll an die Seite „suche.php“ gehen. Diese URL können wir in Zeile 25 festlegen.

In Zeile 26 werden die Parameter die wir an den mit dem Request übergeben möchten gesetzt. Hier kommt unser Übergabeparameter der JavaScript Funktion ins Spiel. Dieser „suchbegriff“ wird nun dem Parameter mit dem Namen „suchbegriff“ zugewiesen. Es muss natürlich nicht der selbe Namen sein.

In Zeile 38 wird dann das Ergebnis aus dem Request (der Seite suche.php) zurückgeliefert!

Testweise schreiben wir in die Datei suche.php lediglich folgendes

Hier wird nun einfach ein beliebiger Wert ausgegeben. Um zu testen ob der HttpRequest auch funktioniert rufen wir die index.php auf und geben irgendwas ein. Sobald das erste Zeichen eingegeben wurde wird der Text aus der suche.php Datei ausgegeben.

Die Mysql Abfrage

Jetzt kümmern wir uns um die Datenbank. Hierbei sind folgende Dinge notwendig:

  1. Server (bei Webspace und Servern mit Datenbank fast immer „localhost„)
  2. Benutzername (euer Benutzername / Accountname)
  3. Passwort (euer Passwort (TOP SECRET!))

Wir stellen also eine Datenbankverbidung her (Zeile: 3-15) und führen das erstellte MySQL Statement aus (Zeile 19-23). Zum Statement gibt es folgendes zu sagen: „SELECT * “ markiert alle Spalten in einer Tabelle, „FROM „.$tabelle.““ wählt die Tabelle aus die in der Varialen $tabelle steht, „titel LIKE (‚%“.$_POST[„suchbegriff“].“%‘)“ stellt eine Bedingung auf die folgendes bedeutet: gib mir alle Einträge der Spalte titel aus, die wie XXXXXsuchbegriffXXXXX lauten. Also wenn ich z.B. „rlsruh“ Suche und es existiert ein Bild mit dem Titel „Karlsruhe“ wird dieses natürlich auch gefunden.

So das wars auch schon. Hier nachmal der ganze Quellcode als Textdatei.

Demo

Habe eine kleine Testtabelle erstellt mit Sehenswürdigkeiten aus Karlsruhe! Einfach mal zum Beispiel: „Wildparkstadion“ oder „Schloss„eingeben und ihr seht, schon nach dem ersten Buchstabe erscheinen alle möglichen Ergebnisse!

hier klicken

Quellcode

index.php

suche.php

Viel Spaß damit!

Pages: Vorherige Seite 1 2 3 ... 8 9 10 11 12 13 14 15 16
Newer Entries »