Wenn’s einmal funktioniert, dann macht’s ja richtig Spaß! Und deshalb finden Sie ab jetzt hier das nächste Theme von mir bei WordPress.
Und natürlich gibt es das auch wieder in der deutschen Version, und zwar hier (Version 2.2).
“Aestival” bedeutet übrigens “sommerlich”. das kann ja dann schonmal auf die wärmere Jahreszeit einstimmen.
Schönes Wochenende!
:)-
Mal angenommen, Sie haben ein grafisch gestaltetes Feld, das im CSS aus drei Teilen besteht, wobei alle Grafik-Elemente als Hintergrund-Grafiken in CSS-Stilen definiert werden:
Der erste Teil (CSS-Klasse “oben”) enthält die Grafik für den oberen Rand des Feldes und ist 7 Pixel hoch.
Der zweite Teil (CSS-Klasse “mitte”) enthält die Grafik für den Mittelteil des Feldes, welche so lange gekachelt wird, wie textliche Inhalte vorhanden sind.
Der dritte Teil (CSS-Klasse “unten”) schließlich enthält die abschließende Grafik und ist auch 7 Pixel hoch.
Im Quellcode haben wir also stehen:
<div class=”oben”></div>
<div class=”mitte”>Testtext<br />mit Zeilenumbruch<br />etc. pp.</div>
<div class=”unten”></div>
In der Regel funktioniert das auch ganz wunderbar … nur nicht im Internet Explorer bis zur Version 6.0, denn in diesem finden sich unerklärliche Lücken zwischen dem Teil, in dem der Text steht, und den beiden “Abschluss-Stücken” oben und unten.
Tjaa, der IE ist nämlich ganz schlau! An Stellen, wo kein Text steht, tut er einfach so, als würde dort trotzdem welcher stehen, und das hat fatale Auswirkungen, wenn Sie, wie im Beispiel oben beschrieben, DIV-Container notieren, zwischen deren einleitendem und ausleitendem Tag nichts weiter notiert ist, weil nichts notiert werden muss, denn alles wird durch das Stylesheet im Hintergrund gesteuert.
Bei <div class=”oben”></div> und <div class=”unten”></div> nimmt der IE also einfach mal an, dass selbstverständlich Text zwischen einleitendem und ausleitendem Tag vorhanden ist, und zieht deshalb die Höhe der DIV-Container auf die Größe des nichtvorhandenen Textes, wenn Sie verstehen, was ich meine. Da in den seltensten Fällen die Standard-Schriftgröße einer Webseite bei 7 Pixeln liegen wird, entsteht zwischen den Grafiken eine Lücke.
Also müssen wir dem IE beibringen, dass der nicht vorhandene Text kleiner sein soll als die 7 Pixel der Grafikhöhen aus unserem Beispiel. Das erreichen wir am besten, indem wir den beiden o.g. DIV-Containern jeweils die Angabe “font-size:1px;” mitgeben.
Und schon funktioniert das auch im Internet Explorer.
Von der Trockenübung weg: rechts sehen Sie, wie ein grafisches Feld mit und ohne Angabe für die Schriftgröße aussieht; im Internet Explorer bis Version 6.0 erkennen Sie im ersten Beispiel die Lücken. Alle, die einen anderen Browser oder zumindest den IE 7.0 nutzen dürfen, sollten zwei völlig gleiche Felder sehen. (Wenn nicht, würde mich interessieren, mit welchem Browser Sie gerade auf diese Seite schauen.)
Beim Stöbern im Frische-Zitronen-Blog von Jutta Kemperle stieß ich auf ein Posting, das auf eine Schriftart von Manfred Klein verweist.
Der Designer Manfred Klein bietet seit einigen Jahren schon viele Schriftarten im Open- oder TrueType-Format und für den Mac an. Ich habe mir vor einiger Zeit mal die Mühe gemacht, mich durch alle Jahresarchive durchzuwühlen und mir alles herunterzuladen, was ich für meine Zwecke eventuell gebrauchen kann … da ist einiges zusammengekommen.
Was mir besonders gefällt, ist, wie jede einzelne Schriftart dort präsentiert wird, denn für jeden Font gibt es eine Grafik, auf der Text mit der jeweiligen Schrift arrangiert wird. Das ist nicht nur schön anzuschauen und inhaltlich teilweise sehr lustig, sondern vermittelt auch gleich einen Eindruck davon, wie die Schriftart so wirken kann.
Das Smashing Magazine hat erneut eine Liste mit größtenteils wirklich schönen Favicons zusammengestellt, die deutlich machen, dass die Erstellung dieser winzigen Grafiken zur wahren Kunst werden kann … da kommt einer ja schon die eine oder andere Idee …
In einem früheren Beitrag finden sich auch Links auf Favicon-Generatoren, mit deren Hilfe Sie Favicons online erstellen können.
Sonderzeichen, auch “Benannte Zeichen” oder “Entities” genannt, tragen - ganz grob erklärt - in XHTML dem Unstand Rechnung, dass es mehr Zeichen gibt als die Buchstaben von A und a bis Z und Zahlen von 0 bis 9.
Da gibt es beispielsweise Buchstaben einer Sprache (im Deutschen beispielsweise ä, ö und ü) oder Symbole mit fester Bedeutung, die nicht auf jeder Tastatur dieser Welt zu finden sind. Ist ja schon praktisch, wenn wir die dann trotzdem darstellen können.
Außerdem werden gerade die o.g. Umlaute der deutschen Sprache je nach dem Zeichensatz, der im Browser eingestellt ist, nicht richtig dargestellt. Die Verwendung von Entities hilft hier, dass auch Menschen in England, Australien und Frankreich die Buchstaben ä, öund ü als solche angezeigt bekommen und nicht etwa fiesen Zeichensalat, der das Lesen erschwert oder gar unmöglich macht.
Wissen Sie beispielsweise, wie “ð”, ” ï”, ” å” und ” Þ” “in HTML” geschrieben werden? Nicht? Macht nix!
Über das “HTML Entity Character Lookup” können Sie das ganz schnell nachschlagen. Geben Sie doch einfach mal zur Probe ein “o” (wie in “OOooh”) in das Formularfeld ein: als Ergebnis erhalten Sie eine Liste, in der nicht nur das deutsche “ö” mit vetreten ist, sondern auch so schicke Dinge wie ? (Phi) und ? (Theta).
Es gilt also: suchen Sie nach der Zeichenform, die so ungefähr passen könnte, und sie werden garantiert fündig.
http://leftlogic.com/lounge/articles/entity-lookup/
gefunden bei F-LOG-GE
Mit vielen Technik-Foren habe ich ja so meine Schwierigkeiten, denn oft werden die simpelsten Fragen nicht beantwortet - eben weil sie “zu simpel” sind und offensichtlich das “Niveau” der “Cracks” im Forum unterschreitet (und ich rede jetzt nicht von dezidierten Experten-Foren). Das schlägt sich dann schnell im Tonfall und in der Qualität der Antworten nieder, macht also ab und an nicht wirklich Spaß.
Dabei hängt es doch gerne an ganz einfachen grundsätzlichen Problemen, wenn etwas beispielsweise in XHTML oder CSS nicht funktioniert.
“Wer nicht fragt, bleibt dumm!” Genau. Deshalb fällt mir das XHTML-Forum doch eher positiv auf, denn hier können tatsächlich grundsätzliche Fragen gestellt werden, ohne dass eins gleich in Gefahr läuft, digital gelyncht zu werden (um es mal ein bisschen übertrieben auszudrücken).
Eben habe ich ein Posting entdeckt, in dem jemand einfach mal seinen Frust beim Erlernen von CSS-basiertem Layout losließ (kennen wir das nicht alle, die mit dieser Materie zu tun haben?) … es folgen zehn Antworten mit Aufmunterungen und Aufzählungen, warum es sich durchaus lohnt, sich durch die Materie durchzubeißen. DAS nenne ich mal Unterstützung!
Neben den Themen XHTML und CSS werden auch Barrierefreiheit generell, PHP, JavaScript mit Ajax sowie Tipps zum Layout-Check behandelt.
Das Wissen aus dem Forum zusammengefasst ist dann im dazugehörigen Wiki nachzulesen.
Thiemo Gillissen hat auf csshilfe.de schon vor einigen Tagen den Typetester vorgestellt. Der Typetester ist ein Tool, mit dem alle, die sich mit Schriften im Internet herumschlagen müssen (also quasi ;) ), Hilfe bei der Wahl der passenden CSS-Eigenschaften für die Schriftart sowie Vorder- und auch Hintergrundfarbe an die Hand bekommen.
Dem möchte ich nur hinzufügen, dass oben rechts in dem kleinen Fenster unter "step by step" ein Link auf den "Lipsum Generator" zu finden ist; eine Seite, auf der dem (tatsächlich vorhandenen!!) Ursprung des wohl meistgebrauchten Blindtextes überhaupt nachgegangen wird. Generator nennt sich die Seite deshalb, weil Sie dort auch Ihren eigenen Blindtext zusammenstellen lassen können.
Ja, ok, der Typetester ist mal wieder auf englisch, aber sobald man sich daran gewöhnt hat, dass mit "leading" die Zeilenhöhe und mit "tracking" der Zeichenabstand gemeint sind, klappt das eigentlich ganz gut.
Stellen Sie sich vor, Sie haben zwei Dateien mit dem gleichen Namen (z.B. eine Original-Datei und eine geänderte) und möchten auf die Schnelle herausfinden, inwiefern sich diese beiden Dateien unterscheiden. Das kann ganz schön mühsam werden, je nachdem, wieviel verändert wurde und wie lange diese Änderungen schon zurückliegen, Sie sich also vielleicht nicht mehr richtig daran erinnern können.
Ein Tool, das Ihnen garantiert eine Menge Arbeit und Gekrame im Gedächtnis erspart, ist das Text-Diff-Werkzeug im PSPad, einem Freeware-Editor, der ohnehin einiges an Funktionalitäten mitbringt, was WebdesignerInnen und ProgrammiererInnen gut gebrauchen können.
Um zwei Dateien miteinander zu vergleichen, öffnen Sie die erste Datei, wählen dann über das Menü "Werkzeuge" den Unterpunkt "Text-Diff: Aktuelle Datei vergleichen -> Datei für Text-Diff auswählen" und öffnen dann die zweite Datei. Beide Dateien werden nun nebeneinander angezeigt. Beide Dateien werden auch gleichzeitig gescrollt, so dass Sie nie den Überblick verlieren können, an welcher Stelle Sie sich nun befinden.
In der Grundeinstellung wird grün hinterlegt, was lediglich geändert wurde (wenn Sie beispielsweise einem CSS-Style andere Werte zugewiesen haben); blau erscheint das, was in der zuletzt gewählten Datei neu hinzugekommen ist, und einen roten Hintergrund erhalten die Passagen, die in der Vergleichsdatei völlig fehlen.
Rechts am Rand des Programmfensters finden Sie einen schmalen Balken, der Ihnen auf einen Blick anzeigt, an welcher Stelle überhaupt Unterschiede zu entdecken sind: hier finden Sie die farbigen Hinterlegungen aus der Hauptansicht wieder und hier können Sie auch eine solche farbige Hinterlegung direkt anwählen.
Neben diversen Programmiersprachen wie C/C++, Perl, PHP, Visual Basic etc.pp. kommt PSPad eben auch mit (X)HTML und CSS zurecht und für jede unterstützte Sprache kann das Syntax-Highlighting individuell verändert werden.
Da haben sie sich aber was einfallen lassen, die Leute von Diskokaine: das österreichische Musiklabel, das sich ganz dem sogenannten “Italo-Disco-Sound” verschrieben hat, lässt auf seiner Website die guten alten Zeiten des Teletext wieder aufleben.
Auf schwarzem Hintergrund tummeln sich je nach Kategorie quietschbunte, mehr schlecht als recht lesbare Textzeilen (das soll so!), die die Navigation ersetzen. Hinter jeder Zeile steht die Seitenzahl, die eingetippt werden muss, um zur entsprechenden Unterkategorie zu gelangen. (Ein bisschen schwierig wird es, wenn Sie wie ich in Firefox die automatische Suche bei Texteingabe aktiviert haben - da hilft dann nur ein Klick irgendwo auf die Seite, damit die Zahlen wieder in die gelbe Zeile ganz oben auf der Seite eingegeben werden.)
Zum Glück erinnerte ich mich dunkel daran, dass bei Teletext die Haupt-Übersicht immer auf der Seite 100 zu finden ist, sonst hätte ich die Startseite wohl nicht so schnell wiedergefunden - ach, steht ja auch immer ganz unten; hatte ich erstmal übersehen.
Dennoch: nach ein bisschen Eingewähnung finden Sie auf der Seite viele Informationen über das Label an sich und die KünstlerInnen, die dort veröffentlichen. Auf Seite 202 gibt es einige Mixe, die Sie sich kostenlos herunterladen können (Vorsicht! PopUp-Blocker müssen ausgeschaltet werden, sonst wird das nichts!). Gerade höre ich “diskokaine aka marflow: cybermixage” - dieser Mix passt prima zur gewollt schrappelig anmutenden Aufmachung der Website und kann abends, so mit ein, zwei alkoholischen Getränken intus, ganz beschwingend wirken, stelle ich mir vor. ;)
Wer den Italo-Disco-Sound live erleben will, kann Diskokaine feat. Princess Superstar auch am 27. und 28. Juli beim Berlin Festival im Poststadion in Berlin-Mitte genießen.
Fazit: die Site ist absolut überhaupt nicht barrierefrei (Flash, sag ich nur) und die Eingabe von 2.768 Zeichen (mit Leerzeichen) in die Meta-Tags macht für Suchmaschinen auch nicht unbedingt Sinn, aber es macht Spaß, sich mal eben auf so ganz was anderes einzulassen.
Bei der Gestaltung einer Internet-Seite ist es wichtig, sich das Ergebnis immer in ganz verschiedenen Browsern anzuschauen, denn jeder Browser interpretiert (X)HTML und CSS ein bisschen anders. Nun können wir aber nicht immer alle gängigen Browser auf einem Rechner haben … für ein einzelnes Betriebssystem lässt sich das ja bei entsprechender Festplattenkapazität noch bewerkstelligen, aber was ist dann mit den anderen Betriebssystemen?
Praktisch ist da ein Service wie der von browsershots.org. Hier können Sie Screenshots von einer Internetseite "bestellen", welche es Ihnen ermöglichen, das Ergebnis Ihrer Webdesign-Mühen auf den unterschiedlichsten Plattformen und mit ganz verschiedenen Browsern zu überprüfen.
Auf der Startseite des Service geben Sie die korrekte Adresse der Seite an, die Sie überprüfen möchten, und klicken dann auf "Start". (Es wird logischerweise immer nur eine Seite geprüft; für verschiedene Seiten müssen Sie auch verschiedene Anfragen losschicken.)
Auf der nächsten Seite wählen Sie dann die Betriebssysteme und Browser aus, auf denen die Seite getestet werden soll. Dabei reichen die Browser von Firebird über Iceweasle und Konqueror bis zu diversen Versionen von Mozilla für Linux; auf Windows werden jeweils verschiedene Versionen von Opera, Firefox, Mozilla und des Internet Explorer getestet und auf dem Mac Firefox, Safari und anderen Browser.
Zu beachten ist dabei Folgendes: Es werden nur die Betriebssysteme und Browser in der Auswahlliste angezeigt, die gerade Kapazitäten haben, Screenshots zu erstellen. Es kann also sein, dass Sie heute um 15:00 Uhr lediglich drei Einträge in der Liste stehen haben, morgen früh um 9:00 Uhr aber 25 … es lohnt sich also, zuerst mal nachzuschauen, ob die Browser und Betriebssysteme, auf die es Ihnen besonders ankommt, auch wirklich "Zeit" haben.
Neben diversen Einstellungen, die Sie für die Überprüfung von Flash, Javascript und anderem vornehmen können, ist es auch möglich, den Zeitraum zu bestimmen, wie lange Sie auf Ihre Ergebnisse warten wollen. Hier sind 30 Minuten der kürzeste Zeitraum. Wenn Sie innerhalb dieser 30 Minuten in der Warteschlange an die Reihe kommen, bekommen Sie auch Ihre Screenshots; reicht die Zeit nicht, fallen Sie aus der Warteschlange heraus. Ich stelle inzwischen immer vier Stunden Wartezeit ein, soweit es sich nicht um eine dringende Angelegenheit handelt.
Gut, Sie haben jetzt also alles angekreuzt, was Sie testen lassen wollen, also klicken Sie nun auf den Button "Submit Jobs".
Die nächste Seite bestätigt Ihre Anfragen und, was ich besonders klasse finde: diese Seite können Sie nun in Ihren Bookmarks speichern und immer mal wieder nachschauen, welche Screenshots denn schon angefertigt wurden – kein Rumsuchen, nix! Auf dieser Seite werden Ihnen irgendwann Ihre ganz persönlichen Screenshots angezeigt.
Natürlich macht es auch Spaß, sich auf der Seite von browsershots.org unter "Screenshots" (ganz oben in der Navigation) die schon getesteten Seiten Anderer anzuschauen …