seeseekey.net - Invictus Deus Ex Machina

Für ein klei­ne­res Web­pro­jekt war ich auf der Suche nach einem brauch­ba­ren Hin­ter­grund. Aller­dings wollte ich kein klas­si­sches Hin­ter­grund­mus­ter, son­dern etwas was wie aus einem Stück wirkte, ohne das es sich dabei um ein Bild han­delt wel­cher nur gestretcht wird.

Der Generator

Fün­dig gewor­den bin ich beim Zen Back­ground Gene­ra­tor wel­cher unter mudcu.be/bg/ zu fin­den ist. Dort kann man in eini­gen weni­gen Schrit­ten den gewünsch­ten Hin­ter­grund erzeu­gen. Dazu wer­den die Tex­tur, der Gra­di­ent und einige andere Klei­nig­kei­ten ein­ge­stellt. Anschlie­ßend erzeugt der Gene­ra­tor den pas­sen­den Hin­ter­grund. Das ganze kann das als Bild, oder als CSS Anwei­sun­gen mit den ent­spre­chen­den Kacheln expor­tiert werden.

Das mitt­ler­weile mit CSS Dinge wie Logos und For­men abge­bil­det wer­den, hat sich sicher­lich schon her­um­ge­spro­chen. Wit­zig wird das ganze immer dann, wenn neue Gren­zen aus­ge­lo­tet wer­den, wie dies auch bei den „CSS Crea­tures“ geschieht.

bennettfeely.com/csscreatures/

Dort wer­den kleine Mons­ter gezeigt, wel­che voll­kom­men in CSS erstellt wur­den. Dane­ben kann man sich auch eigene Mons­ter erzeu­gen. Zu fin­den ist das ganze unter http://bennettfeely.com/csscreatures/.

Mit den „Casca­ding Style Sheets“ ist mit jeder Ver­sion mehr mög­lich. In neue­rer Zeit wer­den so auch For­men und Logos in CSS nach­ge­bil­det. Einer der Vor­teile die­ser Tech­nik ist die gesparte Band­breite bei der Übertragung.

Die Haupt­seite von „Shapes with CSS

Auf der Seite „Shapes with CSS“ wel­che unter http://cssshapes.iweb.uz/ zu fin­den ist, kann man sich For­men mit den ent­spre­chen­den CSS Quell­tex­ten anschauen. Auch das Vor­schla­gen neuer For­men ist dort mög­lich, wel­che eben­falls auf der Seite erschei­nen sollen.

Kaum nimmt man einen Ser­ver aus dem Ser­ver­schrank, zeigt der ent­spre­chende Ser­ver einem wel­che inter­es­san­ten Feh­ler er über die LEDs an der Front aus­ge­ben kann. In die­sem Fall leuch­tete bei einem Fujitsu Ser­ver die CSS LED. CSS steht dabei laut Fujitsu für „Cust­o­mer Self Service“.

Die leuch­tende CSS LED

Der erste Schritt führt bei einem sol­chen Feh­ler (wenn ein Win­dows auf dem Sys­tem läuft) in die „Com­pu­ter­ver­wal­tung“ und dort in die „Ereig­nis­an­zeige“ in den Unter­punkt „Anwen­dung“. Dort sollte die Quelle „Ser­ver­View Agents“ einen Feh­ler gewor­fen haben:

A cri­ti­cal error hap­pend while BIOS self­test in cabi­net 0 of ser­ver EXAMPLE. See ser­ver manage­ment mes­sage log (reco­very log) for detailed information.

Der Feh­ler an sich ist nicht sehr aus­sa­ge­kräf­tig, so das man hier den Feh­ler­spei­cher des Ser­vers aus­le­sen muss. Dies geschieht über die „Feh­ler­spei­cher­an­zeige“ wel­che Teil der „Fujitsu Ser­ver­View Suite“ ist. Dort sieht man dann auch das der Feh­ler in die­sem Fall nicht wirk­lich dra­ma­tisch ist:

Ursa­chen:
• Key­board error detec­ted during Power-On Self-Test (POST)
Pro­blem­lö­sun­gen:
• Check in the case of head­less mode (wit­hout local key­board) that AVR license is enab­led or key­board check is disa­bled
• Check key­board cable
• If pro­blem per­sists replace key­board / cable.

Die ent­spre­chende Ein­stel­lung wird im BIOS geän­dert und schon läuft der Ser­ver wie­der wie am Schnürchen.

Die Text­ein­ga­be­ele­mente sind unter Safari so z.B. auf dem iPad mit run­den Ecken ver­se­hen. Wer dies nicht möchte, der sollte in die pas­sende CSS Datei ein­fach fol­gen­des eintragen.

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

Damit sind die run­den Ecken dann ver­schwun­den. Das zusätz­li­che „border-radius: 0;“ muss ange­ge­ben wer­den damit das ganze auch unter iOS 5 funktioniert.

Beim bear­bei­ten einer CSS Datei viel mir fol­gen­des Stück Quell­code ins Auge:

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

Die Eigen­schaft „#margin-left“ ist nicht stan­dard­kon­form und sollte nicht inter­pre­tiert wer­den, was zur Frage führte was sie in der CSS Datei zu suchen hatte. Nach eini­ger Suche ergab sich die Lösung, es han­delt sich dabei um eine Form der Brow­ser­wei­che wel­che nur vom Inter­net Explo­rer aus­ge­wer­tet wird.

Wei­tere Infor­ma­tio­nen gibt es unter:
http://de.selfhtml.org/css/layouts/browserweichen.htm

Der pre Tag dient dazu einen Text wie­der­zu­ge­ben wie er ein­ge­ge­ben wurde. Das ist an sich auch ganz schön, kann aber bei klei­nen Auf­lö­sun­gen oder einem responsiven Design zum Pro­blem wer­den. Den dort wird ent­we­der das Lay­out zer­schos­sen oder der Inhalt des pre Tags durch eine over­flow CSS Anwei­sung abge­schnit­ten. Abhilfe schafft hier:

pre
{
        white-space: pre-wrap;
}

im CSS. Dadurch wird der pre Tag im Zwei­fels­fall umge­bro­chen und bleibt somit lesbar.

Wei­tere Infor­ma­tio­nen 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ähig­kei­ten des Aus­ga­be­ge­rä­tes wird die Web­seite ange­passt. Vor eini­gen Wochen habe ich mich auch daran gemacht und mein Design um eine reponsive Kom­po­nente erwei­tert. Das ganze sieht auf klei­ne­ren Gerä­ten nun so aus:

Dabei wird per CSS geschaut ob eine bestimmte Min­dest­breite unter­schrit­ten wird:

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

Wenn das der Fall ist wer­den bestimmte Ele­mente (wie die Sider­bar) aus­ge­blen­det, die Größe der Schrift­art ver­än­dert, et cetera. Nur gibt es anschei­nend ein Pro­blem mit unge­klär­ter Ursa­che. Wenn ich auf einem Mobil­ge­rät die Seite „Blog“ auf­rufe so ergibt sich fol­gen­des Bild:

Er igno­riert anschei­nend das ange­passte CSS für Bild­schirme klei­ner 850 Pixel und zeigt statt­des­sen die „nor­male“ Seite an. Dies pas­siert auf allen getes­te­ten Gerä­ten und auch nur auf der Blog Seite. Nun zum Rät­sel: Woher kommt das? Über Ideen zur Lösung des Pro­blems würde ich mich freuen :)

Wei­tere Infor­ma­tio­nen 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 Word­Press Theme baute, hatte ich das Pro­blem das es die Absätze nicht rich­tig dar­stellte. Nach eini­ger Weile und dem stö­bern in ande­ren The­mes ent­deckte ich das ein einfaches:

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

in der style.css die­sen Umstand behebt. Danach wer­den die Absätze kor­rekt angezeigt.

Bei der mobi­len Anwen­dungs­ent­wick­lung steht man vor dem Pro­blem das man für jedes Sys­tem meist eine andere Spra­che sowie andere Klas­sen­bi­blio­the­ken benut­zen muss. In diese Lücke springt Pho­ne­Gap, wel­ches vor kur­zem in der Ver­sion 1.0 erschie­nen ist. Dabei han­delt es sich um ein quell­of­fen­des Frame­work mit wel­chem Anwen­dun­gen in Java­Script, HTML und CSS geschrie­ben wer­den kön­nen wel­che dann mit dem nati­ven Ele­men­ten der jewei­li­gen Platt­form auf dem Gerät laufen.

Dabei ist es mit Pho­ne­Gap mög­lich Anwen­dun­gen für Android, iOS, webOS, Micro­soft Win­dows Mobile, Nokia Sym­bian OS und RIM Black­Berry zu schrei­ben. Bezo­gen wer­den kann das Frame­work dabei unter http://www.phonegap.com/.

Wei­tere Infor­ma­tio­nen gibt es unter:
http://en.wikipedia.org/wiki/PhoneGap
http://www.pro-linux.de/news/1/17341/phonegap-10-veroeffentlicht.html