ilimitado Web Entwickler Blog

Yesterday, while doing a break at work, i had the idea to implement the awesome Nexus live wallpaper for our blog in JS. So i sat down yesterday evening and implemented the Nexus live wallpaper with CSS3 and a little bit of JQuery animation magic. Here is the result:

For now this should just work in webkit browsers!, because i used the -webkit-gradient + opacity properties. I only tested it in the google chrome browser. Support for firefox, a canvas version + the blurring effect will follow.

Dank eines Festplattencrash musste ich mal wieder mein System neu installieren, also nutze ich hier die Gelegenheit einmal zu notieren, wie meiner Ansicht nach eine gute Entwicklungsumgebung, kurz IDE, für Webdesigner, auf Basis von Eclipse aussehen kann, wie man die Entwicklungsumgebung einrichtet und was eine Eclipse IDE so alles bieten kann…
Denn, letztendlich finde ich Eclipse zwar lange noch nicht perfekt, aber es ist meiner Ansicht nach der beste php Editor am Markt und kostenlos, individuell anpassbar und rein theoretisch dank Open Source sogar “umprogrammierbar”. Da es in Java programmiet ist läufts natürlich auch unter Linux!
Bei Interesse, stelle ich außerdem im Lauf der Woche einfach mal vor, welche Tools ich sonst noch so im Einsatz habe für die Homepage Entwicklung und dem Alltag im Internet.

Wer kennt das nicht, valides XHTML als auch XML verlangen die Angabe eines Zeichensatzes. Wir haben diese Angaben auf unseren Homepages auch immer fleißig gemacht. Seit kurzem haben wir begriffen, was so ein Zeichensatz alles beeinflusst. Ums vorweg zu nehmen, der korrekte Zeichensatz erspart es Umlaute durch Entities (z.B. ä) zu ersetzen (escapen),… ok, wie das? Bei falschem Zeichensatz könnte in etwa folgendes Problem auftreten, statt deutschen Umlauten sieht man nur Fragezeichen, Quadrate oder sonsitge komische Zeichen, wie in diesem Bild:

Was muss man denn nun eigentlich so alles beachten um barrierefreies Webdesign zu betreiben? liest man die Regeln für barrierefreies Webdesign (WCAG 2) oder diverse Artikel über barrierefreies Webdesign, liest man stets, welche Barrieren eine Homepage haben kann und welche Zielgruppe diese betreffen und was man alles einhalten soll, damit eine Homepage als barrierefreies Webdesign umgesetzt ist.

Was heisst das nun konkret für den XHTML Markup bzw. die Programmierung einer barrierefreien Homepage?

Wie schreibt man CSS Dateien so, dass die zugehörige Homepage in allen gängigen Browser gleich dargestellt wird? Braucht man für jeden Browser eine eigene CSS Datei? Muss man ständig irgendwelche CSS Hacks anwenden? Macht es überhaupt Sinn seine Homepage an alle möglichen Browser anzupassen oder verlässt man sich einfach auf den Firefox?

Nun, eins vorweg… eine Homepage sollte in allen Browsern gleich angezeigt werden laut Google Analytics wird dieser Blog folgendermaßen besucht:

Hier möchte ich mögliche Barrieren einer Homepage aufzählen und so deutlich machen, wem denn nun barrierefreies Webdesign weiterhilft oder weiterhelfen kann. Denn immer wieder höre ich die Frage: Barrierefreies Webdesign, wem bringt das denn was und was bringt mir persönlich eine barrierefreie Homepage?
Da sind nämlich nicht “nur” blinde oder sehbehinderte Menschen oder Suchmaschinen aufzuzählen, sondern nahezu jedem Besucher der Homepage ist geholfen, wenn die Informationen barrierefrei präsentiert werden. Sogar dem Programmierer oder Verwalter der Seite, kann durch barrierefreies Webdesign die Arbeit erleichtert werden. So weit, so gut. Was sind denn nun solche Barrieren? Hier folgt eine Aufzählung an Barrieren, welche eine Homepage so aufstellen kann:

Beim schreiben eines Blog Beitrages kommt es fast immer vor das man Akronyme setzen muss. Kommt in einem Text z.B die Abkürzung RSS vor, ist es im Hinblick, gerade auf barrierefreies Webdesign Sinnvoll, die Abkürzungen zu erklären.

Dies kann entweder mit dem XHTML Tag <acronym> oder dem Tag <abbr> geschehen. Ist eines dieser Tags gesetzt, bekommt der Benutzer der Homepage wenn er die Maus über dem Wort positioniert ein kleines Fenster angezeigt.
Im Falle von RSS zum Beispiel würde das Akronym so aussehen:

W3CSchools, ist ein freies durch Sponsoren finanziertes Internet Portal, welches sehr gute Tutorials zu fast allem was man sich so vorstellen kann anbietet. XHTML, CSS, XML, JS, PHP, RSS, RDF um nur einige zu nennen. Unter der Rubrik CSS findet sich ein ganz lustiges Quiz. Das ganze besteht aus 20 Fragen und dauert ca. 5 min. Es ist nicht wirklich schwer, aber auch nicht einfach von jemandem zu lösen, der keine Ahnung von CSS hat.

Beim Erstellen dieses Blogs bin ich auf ein interessantes Problem im Internet Explorer gestoßen. Die CSS-Eigenschaft background-image wurde vom Internet Explorer einfach nicht angewendet. Das Problem trat beim Sende (submit) Button einer Form auf. Die CSS-Eigenschaften waren:


#input {
background-image: url("images/ilimitado-blog-send.png");
background-repeat: no-repeat;
background-position: top left;
width: 221px;
height: 53px;
}


Firefox und Opera stellen beide die Hintergrund-Graphik dar. Der Internet Explorer, sowohl in der Version 6, als auch in der neuen Version 7, zeigt nur einen grauen großen Standard-Button an.