Gefiltert nach Kategorie Webentwicklung Filter zurücksetzen

Barrierefreie Live Validierung von Formularen mit jQuery

16. November 2009, Felix Nagel - jQuery, Accessibility, Open Source, Studium

© 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 W3C WCAG 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

Die besten Firefox Addon's für Webdesigner

15. Februar 2009, Felix Nagel - Webentwicklung

Firefox Logo

© Mozilla Foundation , Wikipedia

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

Bloggen mit Typo3

01. Dezember 2008, Felix Nagel - TYPO3

logo-typo3 01

© 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/

 


Typographie im Internet

10. September 2008, Felix Nagel - Webentwicklung

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


6. Semester Material

11. August 2008, Felix Nagel - TYPO3, Studium

logo-typo3 01

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


Unleashed Emotions

25. Juli 2008, Felix Nagel - Webentwicklung, Fotografie, Studium, Konzertfotografie

logo-unleashed-emtions

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


PNG Transparenz im IE

10. Juni 2008, Felix Nagel - Webentwicklung

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

Animiertes Favicon in TYPO3

20. Mai 2008, Felix Nagel - TYPO3

Jeder kennt die Favicons in den Browserleisten und dern Bookmarks. Sie dienen der besseren Auffindbarkeit und dem steigern des Wiedererkennungswert.

 

Eben diesen Effekt kann man steigern in dem man ein animiertes Favicon benutzt.ie man das macht möchte ich hier erklären - das ganze auf Bitte von Angie.

Beispiel

siehe die Browser-Adressleiste dieser Seite wenn du einen nicht Mircosoft Internet Explorer benutzt. Meines Wissens geht das in allen modernen Browsern, soll heissen Opera, Konquoror, Netscape, Mozilla und seine Freunde (z.B. FireFox)

How To

Da Typo3 eine Browsererkennung mitliefert ist das an sich ganz einfach. Nur das ich nichts zum Thema gefunden habe. Also hab ich mich entschlossen selbst ein Tutorial zu schreiben.

 

Folgenden Code muss man einfach nur in das Haupttemplate einbinden und schon läuft das ganze...

[browser = msie]
	page.headerData {
		20 = TEXT
		20.value = <link rel="shortcut icon" href="fileadmin/templates/favicon.ico" type="image/x-icon" />
	}
[else]
	page.headerData {
		20 = TEXT
		20.value = <link rel="icon" href="fileadmin/templates/favicon.gif" type="image/gif" />
	}
[global]

mehr Info


Animiertes Favicon

19. Mai 2008, Felix Nagel - Webentwicklung

Jeder kennt die Favicons in den Browserleisten und dern Bookmarks. Sie dienen der besseren Auffindbarkeit und dem steigern des Wiedererkennungswert.

 

Eben diesen Effekt kann man steigern in dem man ein animiertes Favicon benutzt.ie man das macht möchte ich hier erklären - das ganze auf Bitte von Angie.

Beispiel

siehe die Browser-Adressleiste dieser Seite wenn du einen nicht Mircosoft Internet Explorer benutzt. Meines Wissens geht das in allen modernen Browsern, soll heissen Opera, Konquoror, Netscape, Mozilla und seine Freunde (z.B. FireFox)

Wie gehts?

Diesen PHP Code einach innerhalb des head einbinden.

Das animierte Bild ist ein einfaches animiertes gif. Um ein animierts gif zu gibts es verschiedene Möglichkeiten: Photoshop, Flash und sehr viele andere Programme. Am End einfach mal googlen!

Der php Code ist nötig um auszuschließen das beide angezeigt werden. Wenn man einfach hingeht und beide link tags angibt, stellen auch moderne Browser nur das normale Favicon dar.

<?
if(strchr($HTTP_USER_AGENT, MSIE)) {
	echo '<link rel="shortcut icon" href="favicon.ico">';
else {
	echo '<link rel="shortcut icon" href="favicon.gif">';
}
?>

Mehr Infos

 

Animiertes Faicon für TYPO3

  • Animiertes Favicon für TYPO3