Blog CSS

Barrierefrei auf Handybrowsern

webmaster — Mon, 31 Aug 2009 17:12:17 +0000

Ein Aspekt der bei all den Diskussionen um die Barrierefreiheit im Internet gerne vergessen wird ist die Kompatibilität mit Handybrowsern. Schließlich nutzen viele körperlich eingeschränkte Menschen auch Mobiltelefone und damit auch mobiles Internet. Somit sollte eben auch die Barrierefreiheit auf mobiles Internet angepasst werden.

Grundsätzlich lässt sich hierzu sagen dass die Regeln für ein barrierefreies Webdesign eine ganz ähnliche Gültigkeit haben wie bei der Darstellung in normalen Internetbrowsern. Es ist also auch auf für eine saubere Handydarstellung wichtig auf Standards wie eine saubere CSS-Formatierung sowie übliche Regeln wie etwa dem Schließen aller Tags, dem Vermeiden von Text in Grafiken, JavaScript Navigationsmenüs und allem was in eine Ähnliche Richtung geht. Dies kommt im Übrigen nicht nur der Barrierefreiheit sondern auch der Suchmaschinenfreundlichkeit zugute.

Lesen etwa Screenreader (die es inzwischen auch auf Handys für das mobile Internet gibt) sehbehinderter User die Website, können diese zum Beispiel mit Menüpunkten, die sich nicht in einer Textdarstellung befinden wenig anfangen. Sofern man Bilder für Menüs wählt, sollten wenigstens die Alternativtexte stimmen, damit ein solcher Reader erahnen kann, was auf diesem Bild dargestellt wird und es dem Sehbehinderten sprachlich schildern kann.

All diese Regeln sind für normale Browser, wie auch für die Darstellung auf Handys recht identisch. Was allerdings auf Mobiltelefonen zusätzlich beachtet werden sollte, ist die recht geringe Auflösung vieler Modelle. Unter Umständen macht es also Sinn eine Alternativversion seiner Seite mit Platz sparenderen Bildern und Grafiken extra für den Zugriff via Handy zur Verfügung zu stellen.

Kritische Sicherheitslücke in Adobe Flash Player

webmaster — Thu, 22 Jan 2009 21:35:53 +0000

Vor ein paar Tagen wurde eine neue Sicherheitslücke in Adobe Flash Player gefunden (http://www.adobe.com/support/security/bulletins/apsb09-01.html)
Es handelt sich um eine sehr gefährliche Lücke, die einem Angreifer die Möglichkeit bietet, den Rechner zu infizieren, indem das Opfer auf eine infizierte Webseite gelockt wird. Das Opfer muss nichts weiter tun, als die Seite aufzurufen und schon ist man infiziert.
Daher würde ich raten, schnell die Adobe-Webseite aufzurufen (http://get.adobe.com/flashplayer/otherversions/) und eine neue Version von Flash Player besorgen.
Man muss nur das entsprechende Betriebssystem und Browser wählen und das Update installieren.
Übrigens, es scheint, dass die Hacker absichtlich Adobe ausgewählt haben, um in deren Produkten nach Sicherheitslecks zu suchen. Im letzten Monat hat Adobe ganze 7 Sicherheitslecks in Adobe Flash Player gestopft.
Die Tatsache, dass die Software von Adobe immer öfter zum Ziel der Hacker wird, kann man damit erklären, dass mit der Übernahme von Macromedia, Produkte von Adobe sehr populär geworden sind.

Outsourcing in Action

webmaster — Tue, 02 Dec 2008 11:09:02 +0000

Ein Freund von mir hatte vor ein paar Monaten mir einen Job als Webseitenentwickler angeboten. Ich dachte, dass es eine gute Gelegenheit ist, um ein paar Kröten zum BAföG zu verdienen und nahm das Angebot meines Freundes an. Genau gesagt, willigte ich ein, dass ein potentieller Arbeitgeber mich via Skype kontaktiert.
Der Arbeitgeber stellte sich vor, als eine Firma die in Medien-Bereich tätig ist. Sie sagten, dass sie gerade einen Webseitenentwickler suchen, um eine Webseite für eine, in Deutschland ansässige Fitnessstudio zu machen.
Ich stellte daraufhin mich vor und erzählte, dass ich in der Lage bin, Webseiten in XHTML+CSS zu entwickeln und falls nötig TYPO3 als CMS für die jeweilige Webseite einzurichten. Dann sagte der Arbeitgeber, dass der Kunde sehr gierig sei und deswegen ich, für die Einrichtung der Webseite (XHTML+CSS+TYPO3) nur 80$ bekommen könnte. Wozu sagt er mir die Preise in Dollar, wenn wir beide in Deutschland sind? Wahrscheinlich, um eine größere Ziffern nennen zu können.
Ich dachte nach und entschied mich, dass ich bereit bin, auch für 80$ eine kleine Webseite zu machen. Dann kommt der Hammer. Der Arbeitgeber fragt mich, was ist mit dem Design? (Zuvor haben wir aber gesprochen, dass eine Designvorlage mir zur Verfügung gestellt wird). Ich erklärte dann, dass ich kein Grafiker bin und nur die Leitungen anbieten kann, die ich bereits bei der Vorstellung beschrieben habe. Worauf er antwortete, dass es schlecht sei, denn jetzt muss er „ein Mädchen“ beauftragen, die das Design entwirft oder er muss eine Vorlage kaufen. Dann wird mein Honorar schrumpfen. Hallo? Worin soll dann die Arbeit meines potentiellen Arbeitgebers bestehen, wenn ich die Arbeit komplett erledigen soll? Ist er einfach ein Vermittler mit einer schönen Webseite? Die Webseite war eigentlich auch nicht gerade sehr toll, wenn auch viel versprechend. OK, dachte ich mir, ich habe mein Einverständnis gegeben, so werde ich die Sache auch durchziehen.
Aber daraus war auch nichts. Ich habe meinen potentiellen Arbeitgeber gebeten, mir das Pflichtenheft zu zuschicken, damit ich weiß, worauf ich mich eigentlich einlasse. Der hat mir ständig versprochen, dass ich das Pflichtenheft bald kriege. Nach ein paar Monaten hatte ich aber keine Zeit mehr, diese sinnlose Verhandlungen weiterzuführen, was ich auch dem Vertreter der Firma mitteilte.

CSS Standards und wer trägt Schuld für Browser-Inkompatibilitäten

webmaster — Sun, 30 Nov 2008 22:38:08 +0000

Heute bekam ich die letzte Ausgabe von T3N und fand da einen Artikel über die Web-Standards und wie verschiedene Browser-Hersteller versuchen, fehlende Funktionalität mit Hilfe von proprietären Lösungen zu kompensieren. Seit einer geräumten Zeit warten Web-Entwickler und Browser-Hersteller auf die Veröffentlichung von CSS3 Standard. Das Problem besteht darin, dass die rasante Entwicklung von Web, immer neue Aufgaben für die Web-Entwickler und Browser-Hersteller bereitet. Die Webseiten und die Art der Erstellung der Webseiten wird immer komplexer und erfordert neue Möglichkeiten. Diese Möglichkeiten werden langsam erschöpft. CSS3 ist eine Lösung, die das Problem der wachsenden Anforderungen lösen sollte. Allerdings weiß niemand, wann CSS3 endlich veröffentlicht wird. Aus diesem Grund entscheiden sich die meisten Browser-Hersteller für die Einführung der eigenen CSS-Eigenschaften, die den Entwicklern helfen sollen, moderne Webseiten zu erstellen.
Das Problem liegt aber darin, dass Browser-Markt heutzutage nicht mehr von einem Browser dominiert wird, sondern die Anteile zwischen mehreren Browsern geteilt sind. Zwar besitzt Microsoft Internet Explorer nach wie vor die Mehrheit, die anderen Browser konnten aber in der letzten Zeit einen bedeutenden Anteil erkämpfen. Wenn jetzt verschiedene Web-Entwickler proprietäre Eigenschaften einsetzen werden, dann entsteht ein Chaos. Die Webseiten werden je nach Browser unterschiedlich aussehen. Der Aufwand bei der Erstellung einer Webseite wird rasant steigen.
Ich bin der Meinung, dass die Schuld dafür vor allem die Entwickler der Standards tragen. Meiner Meinung nach, sollte dieses Konsortium restrukturiert werden, damit dessen Effizienz höher wird. So, wie die Entwicklung der neuen Standards jetzt verläuft, darf es nicht mehr sein. Ich bin mir bewusst, dass Web noch relativ jung ist und alle diese Kinderkrankheiten irgendwann gelöst werden. Ich sehe zurzeit aber keine richtige Anstrengungen seitens verschiedenen Partien, den Kern von diesen Problemen zu lösen.

Google Chrome bringt Bewegung in Browser-Markt

webmaster — Fri, 31 Oct 2008 06:57:42 +0000

Zwar kann ich mich in der letzten Zeit kaum beklagen, was die Browser-Entwicklung angeht. So bringt Mozilla ständig neue Versionen von Mozilla Firefox auf den Markt, die immer weitere Anteile des Browser-Marktes erobern. Die Macher von Internet Explorer sehen dies als eine echte Konkurrenz an und versuchen jetzt auch, Internet Explorer so zu verbessern, damit dieser konkurrenzfähig bleibt. Man kann sogar einige Innovationen bei IE8 finden, die so toll sind, dass die Entwickler von Mozilla und nicht umgekehrt, wie es früher öfter war, diese Ideen kopieren.
Jetzt tritt Google Chrome in den Kampf ein und bringt nützliche Änderungen, wie schnelle JavaScript-Engine mit. Die Entwickler von Mozilla reagieren daraufhin mit einer eigenen verbesserten JavaScript Engine, die angeblich schneller, als die von Google, laufen soll. Der neue Browser von Google sieht übrigens wirklich toll aus. Ich würde ihn gerne benutzen, wenn die Erweiterungen von FireFox damit nutzbar wären – so hatte ich gesagt, als ich den Browser zuerst sah. Und heute erfuhrt ich, dass Google eine solche Unterstützung tatsächlich plant. Da werden die Vorteile an Open Source besonders deutlich sichtbar. Ich freue mich auf jeden Fall über diese Entwicklung und erwarte spannend die 1-er Version von Google Chrome. Ich kann mir kaum vorstellen, was diese noch mit sich bringen wird.

Webseite für Mobile Safari optimieren

webmaster — Tue, 30 Sep 2008 01:57:47 +0000

Ich erwartete eigentlich kaum, dass iPhone oder iPod touch eine große Rolle bei der Entwicklung der Webseiten spielen würden. Wenn man die heutige Zahlen ansieht, kommt man zum Schluss, dass es doch wichtig ist, Webseiten für Mobile Safari zu optimieren. Zwar liegt der Anteil noch unter 1%, es sieht aber so aus, dass diese Zahl weiter steigen wird. Das neue Handy und Player von Apple sind sehr populär und zwar weltweit. Die Absatzzahlen steigen kontinuierlich. Bald wird auch in Russland iPhone offiziell vorgestellt. Nach meinem Kenntnisstand ist der Anteil an Handybesitzern, die mobile Dienste in Anspruch nehmen, in Russland, sehr hoch. Wenn dazu noch China käme, wäre der Anteil von iPhone ziemlich bedeutend. Für Internetauftritte, die für internationales Publikum ausgelegt sind, ist es ein großer Markt. Genau deswegen möchte ich ein paar interessante und nützliche Tipps hier vorstellen:

Viewport:
Mobile Safari ist in der Lage, normale Webseiten am iPhone und iPod toch darzustellen. Es ist aber so, dass es für manche Designs sinnvoller wäre, einen Teil des Designs auszublenden. Zum Beispiel, wenn man ein Design hat, wo die eigentliche Webseite nach links orientiert ist und rechts einen freien Raum hat, ist es sinnvoll, den freien Raum auszublenden und den Benutzer auf den eigentlichen Inhalt aufmerksam zu machen.
Um dies zu erreichen sollte man Meta-Teg Viewport verwenden:

Die Zahl 480 steht für Anzahl der Pixel und das Wort width für die Breite, auf die Mobile Safari zentrieren soll.

Favicon:
Den Begriff Favicon brauche ich hier nicht zu erklären, weil jeder Webseiten-Entwickler und auch viele Benutzer wissen, worum es geht.
Um Favicon für Mobile Safari zu verwenden, sollte man auf diese wie folgt verweisen:

Interne Applikationen ansprechen:

Ganz wichtig, wenn man den Benutzer eine Möglichkeit geben möchte, durch anklicken der Telefonnummer sofort die Applikation für Anrufe zu starten, sollte man die Nummer in folgendes Tag setzen:
911

Google Maps verlinkt man wie folgt:
Mainz

YouTube Videos verlinken:
Obowhl iPhone ein eigenes Programm zum Abspielen von YouTube Videos besitzt, kann man Videos mit einem einfachen Link verlinken.

Video-Tag in HTML sinnvoll?

Jochen Kurz — Thu, 31 Jul 2008 20:34:32 +0000

Seit der Veröffentlichung von HTML 4.01 hat sich HTML-Standard nicht mehr verändert. Viele erklärten HTML sogar für tot und stiegen auf XHTML um. Ich bin hier auch keine Ausnahme, da ich von HTML zuerst auf XHTML Transitional, danach auf Strict und später komplett auf XHTML 1.1 umstieg. Am meisten entwickle ich Webseiten auf TYPO3-Basis und kann auf zahlreiche Plugins nicht verzichten. Deswegen muss ich viel Arbeit in die Anpassung von Templates investieren, damit diese einen richtigen Code generieren.
Heute erfuhr ich via Golem.de, dass Mozilla bei der Firefox-Version 3.1 ein Video-Tag integrierte. Außerdem unterstützen, laut Golem, Opera und Safari dieses Tag auch. Das bedeutet, dass man bald auf Flash oder Silverlight verzichten kann. Das bedeutet aber auch, dass HTML doch nicht tot ist, da Video-Tag zu der Spezifikation HTML 5.0 gehört.
Es ist halt so, dass wenn man als Informatiker arbeitet, muss man jeden Tag etwas neues lernen. Wenn man für einige Zeit aufhört, neue Technologien zu erlernen, dann hat man schlechte Karten, wenn man im Geschäft langfristig bleiben möchte. Wieso muss man aber es so kompliziert machen? Wieso soll ich parallel HTML und XHTML einsetzen können? Wäre es nicht sinnvoll, eine Technologie ständig auf dem aktuellsten Stand zu halten, anstatt mehrere Spezifikationen zu entwickeln? Ich könnte es noch verstehen, wenn es keine Organisation gäbe, die die Standarte festlegt. Die gibt es aber. Ich hätte lieber auf Video-Tag verzichtet und weiter XHTML eingesetzt.

Qooxdoo ein Ajax-Framework von 1&1

Jochen Kurz — Thu, 26 Jun 2008 21:05:48 +0000

heute bin ich üben ein Magazin auf Qooxdoo (gucksdu) aufmerksam geworden. Qooxdoo ist ein Open Source Projekt, das von 1&1 ins Leben gerufen wurde. Es handelt sich um ein Ajax-Framework. Dieses Framework bietet im Unterschied zu Prototype nicht nur die entsprechenden Schnittstellen, in Form von JavaScript-Methoden an, sondern auch ein GUI-Toolkit. Das heißt, dass man die Möglichkeit bekommt, eine komplexe Web-Anwendung mit einer grafischen Oberfläche zu bauen, ohne dabei HTML,CSS und DOM Kenntnisse zu besitzen. Dabei wird die Anwendung unabhängig von der Server-Technologie entwickelt, sodass man diese sowohl mit PHP als auch mit Java, Python, Perl oder mit der immer populärer werdenden Ruby-Programmiersprache benutzen kann. Qooxdoo benutzt dabei das Prinzip der Objektorientierung. Selbstverständlich werden die von Qooxdoo generierte Skripten von allen gängigen Browser inklusive Internet Explorer, Firefox, Opera und Safari ab Version 3, unterstützt. Das heißt, dass der Entwickler sich keine Gedanken über die Low-Level Bugs von verschiedenen Browser, machen muss. Ein weiterer Vorteil von Qooxdoo ist die Tatsache, dass man keine zusätzliche Plugins, wie Java, Flash oder Silverlight braucht.
Auf der Webseite des Projekts findet man interessante Beispiele, die deutlich machen, was man so alles mit dem Framework anstellen kann und sie sind wirklich faszinierend. Man bekommt das Gefühl, dass man eine Anwendung benutzt, die in C++ oder Java geschrieben wurde. Dank dem internen Optimizer werden die Anwendungen richtig schnell. Wer damit kommerzielle Projekte erstellen möchte, wird sich sicherlich über die eingebaute Opfuscation freuen. Dieses Feature ist sehr wichtig, denn damit kann man einen Quelltext schützen, indem man es unleserlich macht. Das bringt außerdem zusätzliche Sicherheit, was in heutigen Zeit eine große Rolle spielt.
Ein prominenter Beispiel für den Einsatz von Qooxdoo-Framework ist das Webmailer von GMX. Hier werden die Vorteile dieser Technologie besonders deutlich. Die Webmailer-Anwendung von GMX sieht wie ein normales Programm wie Outlook und ist sehr angenehm zu bedienen.
Ich denke, dass es eine sehr clevere Idee von 1&1 war, dieses Framework als Open Source Projekt zu starten. Damit wird nicht nur 1&1 profitieren, indem er an der Entwicklung von eigenen Web-Applikationen sparen kann sondern auch die fremden Entwickler, die ein mächtiges Werkzeug zur Erstellung von Web-basierten Anwendungen kostenlos zur Verfügung bekommen. Am Beispiel von Eclipse-Projekt kann man gut sehen, wie gut diese Strategie ist.

Google Doctype: Was möchtest du heute erfahren?

Jochen Kurz — Sun, 25 May 2008 20:53:00 +0000

Google Doctype ist das neue ambitionierte Projekt von Google. Es handelt sich um einen Versuch, eine freie technische Enzyklopädie für CSS, HTML und DOM zu erschaffen. Dabei sind nicht nur die Artikeln, sondern auch der Code von der Enzyklopädie frei zugänglich. Wie in dem von Google veröffentlichen Video es so schön heißt, „Google Doctype ist eine Enzyklopädie, die von den Entwicklern für die Entwickler geschaffen wurde“.
Obgleich es noch wenige Artikel und HowTo’s gibt, bin ich mir sicher, dass Google damit viele motivierte Anhänger findet, die die Enzyklopädie ständig mit neuem Wissen erweitern werden. Mitmachen kann jeder, der sich mit Google-Konto ausweisen kann.
Ob dieser Dienst als Konkurrenz zu selfhtml.org anzusehen ist? Im Moment ist noch schwer zu sagen, wobei die Themen schon sehr nah an einander liegen. Man muss noch die Tatsache berücksichtigen, dass selfhtml nur in der deutschen Sprache sehr ausführlich und ziemlich vollständig ist. Die englische Fassung und auch die, in anderen Sprachen, sind weniger vollständig.
Daher kann man sagen, dass es weniger als Konkurrenzprodukt zu bezeichnen ist, sondern damit wird die Wissenslücke geschlossen. Früher musste man durch verschiedene Quellen durchstöbern, um die Antwort auf eine Frage zu finden, heute, dank solchen Projekten wie Google und Wikipedia wird das Wissen in einer bzw. wenigen Quellen konsolidiert. Damit spart man Zeit und Zeit ist Geld.

Ein paar Tipps für Ein/Umsteiger

webmaster — Sun, 04 Mar 2007 16:59:45 +0000

Sicherlich ist es nicht so leicht, von HTML auf XHTML + CSS umzusteigen. Ich habe ja auch diesen Schritt gemacht und weiß wie es ist. Man fragt sich vor allem nach dem Sinn der ganzen Sache, denn die Webseite wird ja richtig mit allen gängigen Browsern dargestellt. Was will man eigentlich mehr?
Die Antwort auf diese Frage ist ganz klar – Zukunftssicherheit, denn die Browser entwickeln sich und sie werden immer mehr für XHTML/XML optimiert, es kommt Zeit, wann einige Teile oder sogar ganz HTML von den modernen Browsern nicht mehr unterstützt wird.
Glaubt mir, die Aussage „Never touch a running system“ passt zu diesem Thema überhaupt nicht.
Außerdem sollte man bedenken, dass die Seite, die mit CSS formatiert wurde, deutlich weniger Markup hat und somit besser von den Suchmaschinen indiziert werden kann.
Die Trennung von Content und Design spielen außerdem eine wichtige Rolle beim Thema Barrierefreiheit. Denn auch wenn man kein Ziel hat, breite Masse von Menschen mit eigenem Internet-Auftritt anzusprechen, ist es aus Rücksicht für behinderte Menschen durchaus sinnvoll, die Webseite barrierefrei zu gestalten. Manche Länder haben sogar gesetzliche Vorschriften, wo von den Unternehmen gefordert wird, ihre Internet-Auftritte barrierefrei zu gestalten.

Und zum Schluss, an alle diejenigen, die ich überzeugt habe, gibt es ein Link zum guten, einsteigerfreundlichen CSS-Tutorial:

http://www.webmaster-resource.de/tutorials/css/css-tutorial.php