Webstandard & Webdesign - CSS, HTML

 

Vom IE5.5 bis IE8b alles unter einer Haube, dank dem IETester

Viel von Euch sind auf das Testen von Webanwendungen auf den gängigen Plattformen und die Vielzahl an Browsern angewiesen. Die den meisten sicherlich bekannte Applikation "Multiple IE" ist für Vista-Rechner nicht nutzbar. Diesen Punkt macht sich der Browser "IETester" (Version 0.2.2) zu eigen. Diese zwar noch den alpha-Status (!) besitzende Anwendung, hat die Versionen IE5.5 bis IE8b1 unter einer Haube und läuft unter XP und Vista. Das gute daran ist, dass all diese IE-Versionen ihre eigene jeweilige Rendering- und JavaScript-Engines mitbringen und somit unter einer Oberfläche zusammengefasst sind. Und es wird noch besser! Ihr könnt die einzelnen Browserversionen, wie auf der Abbildung (Acid2-Test für IE8b1, IE7, IE6, IE5.5 von links) zu erkennen, als Tabs direkt nebeneinander aufrufen! Damit Ihr auch nicht die Übersicht verliert, sind die Tabs mit der jeweiligen IE-Version gekennzeichnet. Noch komfortabler kann das Testen der geliebten IE-Versionen doch nun wirklich nicht mehr werden.

Dekorative CSS Galerien

Auf WebDesignerWall.com eine Anlaufstelle für die kreative Dinge im Web, werden in einem Artikel zahlreiche Lösungsansätze für dekorative CSS Image-Galerien beschrieben. Ob ein Pin, die in letzter Zeit sehr häufig anzutreffenden "transparenten Klebestreifen" oder die altbewährte Büroklammer. All diese, allein doch oft sehr unscheinbar wirkenden grafischen Elemente können dafür sorgen, dass bspw. eine Bilder-Galerie ein wenig mehr Dekoration erhält. Interessante Lösungsansätze, für die es im Artikel einen JavaScript-freien und ausschließlich auf CSS basierenden Lösungsansatz gibt, sowie einen weiteren Ansatz der auf jQuery basiert. Auch die Unfäghigkeit der älteren IE-Versionen alphatransparente PNG-Grafiken abzubilden, wird mit einem entsprechenden Ansatz bedinet. Sehr Lesenwert!

Wo und wie präsentiere ich mein RSS-Feed-Icon am besten?

Jeder kennt es. Das RSS-Feed Icon. Jenes Icon welches dem User visuell sofort die Info verschafft - du kannst mich abonnieren! Aber immer wieder trifft man auf Weblogs, deren Inhalte zwar sehr interessant sind, man diese auch abonnieren möchte, dass angesprochene Icon oder gar der Link zum Feed aber nicht auffinden ist. Nicht jeder Webseitenbesucher surft im aktuellsten Browser und hat bspw. über Extensions die Möglichkeit den Feed direkt abzuspreichern. Was kann man also tun, damit der eigene Blog bzw. der Feed von den Besuchern auch "gefunden" wird. Kein langes Suchen, ...

 (weiter)

Firefox-User haben den höchsten IQ

Zu dieser Meinung kommen zumindest die Macher von IQLeague.com. Diese Plattform auf der Webseitenbesucher IQ-Tests durchführen können, gibt es laut nerdcore.de eine Statistik, in deren Auswertung die verwendeten Browser und Plattformen der IQ-Tester einfliessen. Und diese bringt eines deutlich zu Tage: Firefox-User sind clever ;o) Bei einer Statistik bezüglich der cleversten Nationen, rangiert Deutschland im übrigen auf Platz 18. Also nix wie ran und Deutschland nach vorne bringen! ;o)

CSS-Design, die Webseite zum Buch

Wie bereits seit geraumer Zeit in der rechten Marginalspalte des Blogs zu erkennen ist, bin ich aktuell am Schreiben meines ersten Buches. Zum mittlerweile fortgeschrittenem Zeitpunkt des Projektes, kann ich nun etwas mehr Einblick in "CSS-Design. Tutorials für moderne Webseiten" gewähren. Nach der ersten Satzfahne, weiteren inhaltlichen Anpassungen, der Durchsicht von Manuela Hoffmann, die auf meinen Wunsch hin, das Buch fachlich gegengelesen hat und einem überarbeitetem Cover für das Buch, läuten nun so langsam die letzten Wochen der Entstehung ein. Entgegen der ursprünglichen Idee des Buches, bekommt es nun im übrigen auch eine DVD hinzu. Diese enthält selbstverständlich alle Workshopdateien. Weiterhin enthält sie (X)HTML- und CSS-Editoren und viele andere nützliche Tools, die zur Erstellung von Webseiten nötig sind. Ein weiteres interessantes und für den ein oder anderen sicherlich auch sehr nützliches Feature der DVD, sind ausgewählte Video-Lektionen der DVD "Einstieg in CSS" von Suzana und Thomas Kötter, von ca. 1 Std.

Diejenigen die mehr über das Buch erfahren möchte, können ihre Neugier auf der extra zum Buch erstellten Webseite stillen. Diese beinhaltet neben einer kurzen Beschreibung des Buches und einem Überblick über die einzelnen Workshop-Inhalte, auch eine Beschreibung der Zielgruppen des Buches. Nach Abschluß der 2.Satzfahne, wird es zudem eine Vorschau in Form von PDF's geben. Die bisher angegebenen 380 Seiten werden mit nun 440, um einiges "überboten". Man bekommt als mehr zu Lesen ;o) Außerdem möchte ich an dieser Stelle die Möglichkeit nutzen, mich bei all denjeinigen zu bedanken, die direkt und indirekt zum Gelingen des Buches beigetragen haben.

Inspirationen für Background-Pattern

Das die Grafiken einer Webseite je nach Dateigröße unterschiedlich lange Ladezeiten besitzen ist kein Geheimnis. Nicht immer muss eine Grafik daraufhin in ihren Ausmaßen verkleinert oder der Qualität gemindert werden. Denn es gibt auch Möglichkeiten, eine große Fläche einer Webseite mit einer Grafik auszustatten, ohne dabei eine diese Möglichkeiten in Betracht ziehen zu müssen. Im Bereich der Hintergrundgrafiken bspw. gibt es die Möglichkeit eine kleine Grafik mit bspw. 30x30px zu erstellen und diese durch einfaches Wiederholen in x- und y-Richtung zu kacheln. Durch diesen Wiederholungseffekt auch Background-Pattern genannt, entsteht eine Art Muster. Die nun folgenden Webseiten beinhalte zahlreiche Beispiele dieser Technik.

 (weiter)

Ersten Release Candidate von Firefox 3 downloaden

Nach mehreren Beta-Versionen der 3er Version des Firefox Browsers, bietet Mozilla nun endlich die erste Release Candidate Version des Browsers für alle gängigen Systeme zum Download an. Die finale Version des 3ers soll im Sommer diesen Jahres, nach einer weiteren Release Candidate folgen. Zuvor heißt es nun aber ersteinmal testen, testen, testen...

Hintergrundgrafiken mit CSS in ihrer Größe skalierbar umsetzen

Auf css-tricks.com zeigt der Autor Chris Coyier wie man mit JavaScript, in diesem Fall mit dem Framework jQuery, Hintergrundgrafiken in ihrer Größer veränderbar machen kann. Je nach Größenausmaß des jeweiligen Bereiches in dem sich eine solche Hintergrundgrafik befindet, verändert die Hintergrundgrafik ihre eigene Ausmaße. Voraussetzung hierfür ist allerdings eine nicht gerade kleine Grafik, die somit bis zu einem bestimmten Maße verändert werden kann. Das diese Problematik auch ein JavaScript-freie Lösung anbietet, zeigt der Lösungssansatz von Stu Nicholls.

Kostenloses Photoshop Buch mit 101 Web Design Tips, Tricks und Techniken

Die Woche des Buches führt uns heute zu einem kostenlosen Photoshop-Buch des Sitepoint-Verlages. Das fast 300 Seiten starke Buch The Photoshop Anthology mit 101 Web Design Tips, Tricks & Techniques im PDF-Format, befasst sich in 9 Kapiteln mit allem was das Herz zur Erstellung Grafiken in Photoshop begehrt. Von Basisgrundlagen im Umgang mit der Software, über das Gestalten von Buttton, Hintergrundgrafiken, der Möglichkeit der Bearbeitung und Manipulation von Bildern, der Designerstellung einer Webseite bishin zu Tipps für fortgeschrittene Anwender. Einzige Bedinung um an dieses Buch zu kommen, ist es den Download in den nächsten 29 Tagen durchzuführen. Im Design Tagebuch gibt es im übrigen die Möglichkeit an zwei weitere Bücher zum Thema Photoshop bzw. InDesign zu kommen. Allerdings ist die Möglichkeit bei der Anzahl der Kommentatoren zu gewinnen, mitlerweile mit sehr viel Glück verbunden. Viel Spass beim Lesen!

Ruby on Rails 2 Buch zum Download

Ab sofort steht die aktuelle Auflage des Entwickler-Handbuchs "Ruby on Rails 2" von Hussein Morsy und Tanja Otto als HTML-Version zur Online-Lektüre und zum Download auf der Website von "Galileo Computing" zur Verfügung. In dem Handbuch werden die zahlreichen und komplexen Möglichkeiten von Ruby on Rails 2 ausführlich und verständlich dargestellt: Von der Installation über die Entwicklung von eigenen Anwendungen bis hin zur Einführung in die verschiedenen Module des Frameworks. Laut dem Galileo-Verlag bleibt das Buch stets praxisbezogen, was durch die praxisnahen Beispiele des Buches deutlich wird. Alle Applikationen sind dabei systematisch aufgebaut, von einfachen bis hin zu komplexen Anwendungen. Für alle, die zum ersten Mal mit Ruby arbeiten, enthält das Buch außerdem eine umfassende Einführung in die Programmiersprache.

CSS Selektoren, eine vergessene Spezies?

Sie gibt es bereits seit Jahren, genauer gesagt seit CSS1 und der Entwurf seitens des W3C wurde 1996 veröffentlicht. Die Rede ist von CSS Selektoren, genauer gesagt von den beiden Pseuo-Elementen :first-letter und :first-line. Für die meisten bietet diese Information nichts neues. Warum nur, werden sie dann nur so selten eingesetzt? In den wenigesten Fällen eines Webseitenentwurfes wird Text ohne jegliche gestalterischen Eigenschaften zurückgelassen. Das heißt, entweder sorgen typografische Raffinessen oder grafische Elemente für eine besondere Gestaltung von Textinhalten. Warum nur, werden dann all zu oft zusätzliche HTML-Elemente wie bspw. ein span- oder b-Tag mit dieser Aufgabe beauftragt? Wozu zusätzlichen HMTL-Code anlegen, wenn die Aufgabe genauso elegant von den beiden angesprochenen Pseuo-Elementen erledigt werden kann?

 (weiter)

Opera Dragonfly

Vielerorts ist bereits über Opera Dragonfly spekuliert worden. Gestern ist der Countdown abgelaufen und der Browserhersteller Opera ermöglicht den Usern der neuen Browserversion Opera 9.5 beta 2 nun einen Blick auf dieses neue Entwicklungstool. Hinter dem noch in der Alpha-Version befindlichen Dragonfly verbrigt sich eine Debug-Konsole, in der die verwendeten Standards einer Webseite bis in kleinste Detail, ähnlich dem WebInspector für Safari oder dem Firebug für Firefox., begutachtet und untersucht werden können. Die Entwicklungsabteilung von Opera hat hierzu zwei lesenswerte Artikel verfasst, die einem Dragonfly nähervorstellen bzw. die Architektur die hinter dem Tool steckt.

Homer Simpson only made by CSS

Das CSS nicht nur zum Gestalten von Webseiten, sondern auch zur Erstellung von Abbildungen gut ist, zeigt Román Cortés. Denn er hat Homer Simpson nicht als Grafik umgesetzt, sondern ausschließlich mit absolut positionierten Buchstaben und Zeichen via CSS. Eine 8 hier, ein Punkt dort, eine geöffnete Klammer hier und eine schließende Klammer an anderer Stelle. Das eine ist ein Teil des Auges, dass andere ist ein Teil seiner doch recht übersichtlich gewordenen Haare. Diese von der Schriftart Verdana dargestellten Zeichen sind aufgrund relativer Angaben zudem noch skalierbar. Auch wenn sich über Sinn und Unsinn einer solchen Fleißarbeit streiten lässt, sie verdient es Erwähnung zu finden, ohne wenn und aber!

Ein kleiner Test via firebug, lässt bei den Augen von Homer und dem Verändern des dort verwendeten Zeichens mit einer Null und einer entsprechenden Größenanpassung, der Eindruck erwecken das er in Moe's Taverne mal wieder zu tief ins Glas geschaut hat ;o) Gleiches hat Román im übrigen auch mit George Bush getan, aber man muss halt Prioritäten setzen wessen Erwähnung einem wichtiger erscheint.

Update: In einem weiteren Artikel seines Blogs verweist Román auf einen Anwendung mit der es möglich ist, Bilder im JPG-Format in reines CSS umzuwandeln. Man sollte beachten, dass die Umsetzung vor allem bei Bildern mit deutlichen Konturen am besten funktionieren. Ideal ist hierfür eine schwarz-weiß Abbildung. Wie die Anwendung funktioniert, zeigt das kleine Video mit Che Guevara (siehe "Recommended Video").