seeseekey.net - Invictus Deus Ex Machina

Für ein kleineres Webprojekt war ich auf der Suche nach einem brauchbaren Hintergrund. Allerdings wollte ich kein klassisches Hintergrundmuster, sondern etwas was wie aus einem Stück wirkte, ohne das es sich dabei um ein Bild handelt welcher nur gestretcht wird.

Der Generator

Fündig geworden bin ich beim Zen Background Generator welcher unter mudcu.be/bg/ zu finden ist. Dort kann man in einigen wenigen Schritten den gewünschten Hintergrund erzeugen. Dazu werden die Textur, der Gradient und einige andere Kleinigkeiten eingestellt. Anschließend erzeugt der Generator den passenden Hintergrund. Das ganze kann das als Bild, oder als CSS Anweisungen mit den entsprechenden Kacheln exportiert werden.

Das mittlerweile mit CSS Dinge wie Logos und Formen abgebildet werden, hat sich sicherlich schon herumgesprochen. Witzig wird das ganze immer dann, wenn neue Grenzen ausgelotet werden, wie dies auch bei den „CSS Creatures“ geschieht.

bennettfeely.com/csscreatures/

Dort werden kleine Monster gezeigt, welche vollkommen in CSS erstellt wurden. Daneben kann man sich auch eigene Monster erzeugen. Zu finden ist das ganze unter http://bennettfeely.com/csscreatures/.

Mit den „Cascading Style Sheets“ ist mit jeder Version mehr möglich. In neuerer Zeit werden so auch Formen und Logos in CSS nachgebildet. Einer der Vorteile dieser Technik ist die gesparte Bandbreite bei der Übertragung.

Die Hauptseite von „Shapes with CSS

Auf der Seite „Shapes with CSS“ welche unter http://cssshapes.iweb.uz/ zu finden ist, kann man sich Formen mit den entsprechenden CSS Quelltexten anschauen. Auch das Vorschlagen neuer Formen ist dort möglich, welche ebenfalls auf der Seite erscheinen sollen.

Kaum nimmt man einen Server aus dem Serverschrank, zeigt der entsprechende Server einem welche interessanten Fehler er über die LEDs an der Front ausgeben kann. In diesem Fall leuchtete bei einem Fujitsu Server die CSS LED. CSS steht dabei laut Fujitsu für „Customer Self Service“.

Die leuchtende CSS LED

Der erste Schritt führt bei einem solchen Fehler (wenn ein Windows auf dem System läuft) in die „Computerverwaltung“ und dort in die „Ereignisanzeige“ in den Unterpunkt „Anwendung“. Dort sollte die Quelle „ServerView Agents“ einen Fehler geworfen haben:

A critical error happend while BIOS selftest in cabinet 0 of server EXAMPLE. See server management message log (recovery log) for detailed information.

Der Fehler an sich ist nicht sehr aussagekräftig, so das man hier den Fehlerspeicher des Servers auslesen muss. Dies geschieht über die „Fehlerspeicheranzeige“ welche Teil der „Fujitsu ServerView Suite“ ist. Dort sieht man dann auch das der Fehler in diesem Fall nicht wirklich dramatisch ist:

Ursachen:
• Keyboard error detected during Power-On Self-Test (POST)
Problemlösungen:
• Check in the case of headless mode (without local keyboard) that AVR license is enabled or keyboard check is disabled
• Check keyboard cable
• If problem persists replace keyboard / cable.

Die entsprechende Einstellung wird im BIOS geändert und schon läuft der Server wieder wie am Schnürchen.

Die Texteingabeelemente sind unter Safari so z.B. auf dem iPad mit runden Ecken versehen. Wer dies nicht möchte, der sollte in die passende CSS Datei einfach folgendes eintragen.

input {
    -webkit-appearance: none;
    border-radius: 0;
}

Damit sind die runden Ecken dann verschwunden. Das zusätzliche „border-radius: 0;“ muss angegeben werden damit das ganze auch unter iOS 5 funktioniert.

Beim bearbeiten einer CSS Datei viel mir folgendes Stück Quellcode ins Auge:

a {
	padding: 5px;
	#margin-left: -12px;
}

Die Eigenschaft „#margin-left“ ist nicht standardkonform und sollte nicht interpretiert werden, was zur Frage führte was sie in der CSS Datei zu suchen hatte. Nach einiger Suche ergab sich die Lösung, es handelt sich dabei um eine Form der Browserweiche welche nur vom Internet Explorer ausgewertet wird.

Weitere Informationen gibt es unter:
http://de.selfhtml.org/css/layouts/browserweichen.htm

Der pre Tag dient dazu einen Text wiederzugeben wie er eingegeben wurde. Das ist an sich auch ganz schön, kann aber bei kleinen Auflösungen oder einem responsiven Design zum Problem werden. Den dort wird entweder das Layout zerschossen oder der Inhalt des pre Tags durch eine overflow CSS Anweisung abgeschnitten. Abhilfe schafft hier:

pre
{
        white-space: pre-wrap;
}

im CSS. Dadurch wird der pre Tag im Zweifelsfall umgebrochen und bleibt somit lesbar.

Weitere Informationen gibt es unter:
http://www.css4you.de/Texteigenschaften/white-space.html
http://blog.bissinger.biz/zeilenumbruch-im-pre-tag/
http://de.selfhtml.org/html/text/praeformatiert.htm

Responsives Design ist schon eine tolle Sache. Je nach den Fähigkeiten des Ausgabegerätes wird die Webseite angepasst. Vor einigen Wochen habe ich mich auch daran gemacht und mein Design um eine reponsive Komponente erweitert. Das ganze sieht auf kleineren Geräten nun so aus:

Dabei wird per CSS geschaut ob eine bestimmte Mindestbreite unterschritten wird:

@media screen and (max-width: 850px)
{
 ...
}

Wenn das der Fall ist werden bestimmte Elemente (wie die Siderbar) ausgeblendet, die Größe der Schriftart verändert, et cetera. Nur gibt es anscheinend ein Problem mit ungeklärter Ursache. Wenn ich auf einem Mobilgerät die Seite „Blog“ aufrufe so ergibt sich folgendes Bild:

Er ignoriert anscheinend das angepasste CSS für Bildschirme kleiner 850 Pixel und zeigt stattdessen die „normale“ Seite an. Dies passiert auf allen getesteten Geräten und auch nur auf der Blog Seite. Nun zum Rätsel: Woher kommt das? Über Ideen zur Lösung des Problems würde ich mich freuen :)

Weitere Informationen gibt es unter:
http://www.elmastudio.de/webdesign/webseiten-optimierung-fur-mobile-gerate-verschiedene-losungen-im-vergleich/
http://www.elmastudio.de/webdesign/diskussionsanregung-wie-wichtig-ist-die-webseiten-optimierung-fur-mobile-gerate-heute-schon/

Als ich an einem WordPress Theme baute, hatte ich das Problem das es die Absätze nicht richtig darstellte. Nach einiger Weile und dem stöbern in anderen Themes entdeckte ich das ein einfaches:

.entry p
{
    margin-bottom: 1em;
}

in der style.css diesen Umstand behebt. Danach werden die Absätze korrekt angezeigt.

Bei der mobilen Anwendungsentwicklung steht man vor dem Problem das man für jedes System meist eine andere Sprache sowie andere Klassenbibliotheken benutzen muss. In diese Lücke springt PhoneGap, welches vor kurzem in der Version 1.0 erschienen ist. Dabei handelt es sich um ein quelloffendes Framework mit welchem Anwendungen in JavaScript, HTML und CSS geschrieben werden können welche dann mit dem nativen Elementen der jeweiligen Plattform auf dem Gerät laufen.

Dabei ist es mit PhoneGap möglich Anwendungen für Android, iOS, webOS, Microsoft Windows Mobile, Nokia Symbian OS und RIM BlackBerry zu schreiben. Bezogen werden kann das Framework dabei unter http://www.phonegap.com/.

Weitere Informationen gibt es unter:
http://en.wikipedia.org/wiki/PhoneGap
http://www.pro-linux.de/news/1/17341/phonegap-10-veroeffentlicht.html