Gefiltert nach Kategorie Webentwicklung Filter zurücksetzen

© jQuey Logo: The jQuery Project

Im vorerst letzten Blogpost, zu den während meiner Diplomarbeit bei Namics entstandenen  jQuery Accessible Rich Internet Appllications, stelle ich sortierbare Tabellen vor. Mit dem Widget lassen sich standardkonforme HTML Tabellen sehr einfach um einige nützliche Funktionen erweitern oder man nutzt es als Grundlage komplexer Anwendungen in denen tabellarisch Daten dargestellt werden.

Barrierefreie, sortierbare Tabellen mit jQuery

© jQuey Logo: The jQuery Project

Zeit für Post 3 in meiner Reihe über jQuery Accessible Rich Internet Applications im Zuge meiner Diplomarbeit: Accessible Tabs

 

jQuery UI stellt bereits ein sehr mächtiges UI Widget für Tabs zur Verfügung und so war für mich schnell klar das ich dieses erweitern und verbessern will. Nachdem ich verschiedene Methoden zur Erweiterung vorhandener Klassen in jQuery durch hatte und diese alle nicht hinnehmbare Probleme mit sich brachten, entschied ich mich dafür relativ schlicht die Funktionen zu überschreiben und die Originalmethoden vor meinen Änderungen aufzurufen.

jQuery UI Tabs made accessible

© jQuey Logo: The jQuery Project

Im zweiten Teil meiner kleinen Reihe geht es um einen, mittlwerweile, alten Bekannten: die Lightbox. Ich stelle hier meine barrierefreie Variante auf Basis der jQueryUI Widget Factory vor, die im Rahmen meiner Diplomarbeit bei der Firma Namics entstand.

 

Achtung: Diese Anleitung bezieht sich auf die jQuery 1.3.x bzw. jQuery UI 1.8.x Variante meines Scripts. Im Gallerie-Modus sind jetzt geringfügige Änderungen nötig.

 

Barrierefreie jQuery Lightbox nach WAI ARIA und WCAG 2.0

© jQuey Logo: The jQuery Project

Im Zuge meiner Diplomarbeit bei der Full Service Internetagentur Namics habe ich einige barrierefreie Applikationenhttp://jqueryui.com/ für jQuery entwickelt die den Richtlinien der W3CWCAG 2.0 und ARIA entsprechen.

Eine theoretische Ausarbeitung zur Entwicklung dieser Applikationen und der dazugehörigen Theorie findet ihr in meiner Diplomarbeit. Die dort enthaltenen Hintergrundinfos können wertvolle Argumentationshilfen sein.

 

Die 4 Widgets (Live Validierung, Lightbox, Tabs, sortierbare Tabellen) werde ich in diesem und folgenden Posts vorstellen. Den Anfang macht die Live Formular Validierung.

Barrierefreie Live Validierung von Formularen mit jQuery

Logo des Browsers Firefox von Mozilla

© Mozilla Foundation, Wikipedia

Firefox Logo

Firefox lässt sich einfach und schnell mit vielen Funktionen erweitern. Gerade als Webdesigner, Frontender oder Developer braucht man davon eigentlich einen ganzen Satz. Hier meine Lieblinge. Egal ob es darum geht Wireframes zu zeichnen, per FTP Daten zu übertragen, Flash Versionen zu testen, Testing, Barrierefreiheit oder einen anderen Browser aufrufen. Alles lässt sich schneller und praktischer machen...

Kommentare und Ergänzungen sind mehr als erwünscht!

Die besten Firefox Addon's für Webdesigner

© TYPO3 Association, typo.org

Vielen ist sicherlich die einzige (bis dato) Lösung zum bloggen mit Typo3 bekannt. Namentlich TimTab. Leider ist diese Extension nicht nur schwierig zu installieren sondern hat auch unzählige Bugs und Probleme. Fehlende Bilder im RSS Feed und keine Funktion von Trackbacks wenn xhtml_clean für sauberen Quellcode aktiviert ist.

Das Problem sahen auch die Jungs von Snowflake und entwickeln seit geraumer Zeit eine "Out-of-the-Box" Blogging Extension. Und von eben dieser ist jetzt ein initial Release im TER verfügbar. Sieht gut aus, das ganze: Anständige Doku, netter Funktion Umfang auch ohne zusätzliche Extensions. Wirkt insgesamt durchdachter als TimTab, auch weil das Bloggen nicht dazugefrimelt wurde, sondern mit Modulen eine nutzbare Lösung bietet. Einige Features sind noch nicht ganz ausgereift (z.B. SPAM) oder hätten anders umgesetzt werden können (Kommentare werden innerhalb der ext verwaltet anstatt auf eine der vielen bestehenden Lösungen wie ve_guestbook oder comments zurückzugreifen).

Getestet wird das ganze auf jeden Fall mal, auch wenn eine Import Funktion für TimTab und kommentare noch fehlt, was die ext für einen live Einsatz auf meiner eigenen Pageerstmal untauglich macht.

 

 

Webseite von snowflake

 

www.snowflake.ch/de/leistungen/typo3-extensions/t3blog/

 

Extension im TER

 

typo3.org/extensions/repository/view/t3blog/current/

 

Screenshot Typtester.org
Screenshot Typtester.org

Typografie ist ja im www immer so eine Sache: die Möglichkeiten sind wirklich begrenzt und der Kunde trotzdem oft anspruchsvoll. Für gewöhnlich eine Gradwanderung zwischen Machbarkeit und Ästhetik.

Typetester hilft sich für die richtige Typo zu entscheiden indem es das Vergleichen stark vereinfacht. In drei Spalten kann man live und mit allen Möglichkeiten die einem HTML zur Verfügung stellt an den Fonts herumspielen bis man das perfekte Schriftbild gefunden hat.


sifr3 geht noch einen Schritt weiter. Es ersetzt (absolut Suchmaschinen freundlich!) bestimmte HTML Tags mit einem kleinen Flashfilm - in der eine gewünschte Schriftart angezeigt wird. Hört sich einfach und genial an - ist es auch!

 

Sogar Schlagschatten und ähnliche Efrfekte sind ohne weiteres möglich - sofern mind. Adobe Flash 8 auf dem Client installiert ist. Funkioniert in allen halbwegs anständigen Browsern (IE6+, FF2+, Opera, etc.) und benötigt JavaScript und Flash.

 

http://www.typetester.org

© TYPO3 Association, typo.org

Habs geschafft das bisschen vom 6. Semester hochzuladen. 

Im Prinzip ist das aber ohnhin nur das bereits präsentierte WP Foto Projekt "Konzertfotografie Unleashed Emotions" und unsere (Adrian Damm und ich) Arbeit für Dokumentverwaltung im Internet. 

 

Hierbei haben wir eine Anleitung (anhand einer Webseite) geschrieben mit Hilfe dessen das einbinden von RealUrl für Typo3 keine Schwierigkeiten bereiten sollte.

 

Das 5. Semester mit einigen mehr Sachen muss ich noch mehr Vorbereiten...

Unser FH Projekt Fotografie ist fertig!

 

 

Unser Projekt stand unter dem Namen UNLEASHEDEmotions. Die Idee war nicht nur die Bands vom Mach1 Festival 2008, sondern auch das Publikum, eben dessen Emotionen, abzulichten. Außerdem ist diese Seite auch eine Art HowTo zum Thema Konzertfotografie.

Das Projekt enstand im Rahmen unseres Fotokurses an der Fh Friedberg bei Herrn Schmidt.

 

Angefertigt wurden die Fotos, sowie diese Webseite Mattias Rosenthal und von mir.

 

Du findest auf der Webseite:

  • die üblichen Konzertfotos
  • Bilder aus dem Pogo / Pit und am Graben
  • Alle Bilder mit kompletten Exif Daten (Belichtungszeit, Blende, ...)
  • Tips und Tricks zu Konzertfotografie
  • misslugende Bilder + Erläuterung was schief lief
  • Info's zu unserer Ausrüstung
  • Hinweise zur Nachbearbeitung

 

Konzertfotografie auf dem Mach1 Festial

Ein leidiges Thema...

Viele moderne Design lassen sich nur per PNG Dateien schön umsetzen. Machmal komm man eben kaum drum herum. An sich ja kein Problem, jeder anständige Browser kann das ohne das man ein Wort darüber verlieren müsste.

Gebe es nicht den IE.

Der MS IE ist leider nicht in der Lage von sich aus PNG's mit korrekter Transparenz anzuzeigen. Für gewöhnlich zeigt er einfach nur einen hellen Hintergrund an.

Browser

  • MS IE 5.5
  • MS IE 6

 

Der IE 7 hat nun endlich eine native Unterstützung für PNG's.

Wie geht das denn?

Mit Hilfe von sog. CSS Hacks, die nur vom MS Internet Explorer umgesetzt werden.

Mit diesen Hacks steuern wir, die nur im Internet Explorer verfügbaren, Filtereigenschaften ein. Einmal direkt, einmal per Script. Dieser Filter arbeitet im Fall der direkt eingebundenen Bildern mit einem kleinen Behavior und einer transparenten gif Grafik (die auch der IE transparent darstellen kann) die zum rendern der eigentlichen png Grafik genutzt wird. Alle bnötigten Dateien sind in der zip Datei enthalten.

Ich bevorzuge die reine CSS Variante, die aber nur mit Hintergrundbildern funktioniert. Dafür benötigt sie keine weiteren Dateien (reines CSS), die oft Probleme mit den Pfaden bereiten.

 

PNG Transparenz im IE