IE6 PNG Fix in reinem CSS

Auch wenn es sicher schon durch unendliche viele Blogs gegangen ist, ist es auf jeden Fall noch eine Erwähnung wert: das leidige IE6 PNG Problem als reine CSS Lösung, einfach und genial!

Kategorie

Tags

Kommentare

Erstellt

  • 18. November 2007

Red Snapper unter OSX 10.5

Update: Red Snapper wird Web Snapper

Red Snapper heißt jetzt Web Snapper. Leider ist es nicht wie vorher ein Safari Plugin, sondern ein eigenes Programm. URLs werden per drag and drop aus dem Browser auf das Web Snapper Fenster übertragen. Neu ist auch eine Statusanzeige wie viel von der Seite schon geladen wurde (war vorher ja nicht nötig, da man es direkt aus Safari verwendete.

Dank Apples “wir ändern die Möglichkeiten für Safari Plugins einfach mal komplett”-Aktion versuchen gerade alle Entwickler von Safari-Tools ihren Weg zu finden. Einige bleiben Plugins, einige Prestart-Programme von Safari und andere werden einfach Selbstständig. Ich vermute mal da hat jemand bei den Safarientwicklern einfach nicht gedacht bzw. ging die Sicherheit (die immer als Begründung dafür genannt wurde) aus PR vor.


Eine der absoluten Must-Have Safari-Erweiterungen, Red Snapper, läuft nicht mehr unter OSX 10.5. Bis die Entwickler Red Snapper an den Leoparden bzw. die neue Safari-Architektur angepasst haben kann man es wieder zum Leben erwecken:

  • Man gehe zum Ordner /Library/Application Support/SIMBL/Plugins
  • Rechter Mausklick auf Red Snapper.bundle -> Paketinhalt anzeigen
  • öffnet Contents/Info.plist in einem Texteditor
  • am Ende der Datei fügt man über </dict></plist> folgenden Code ein
  1. <key>SIMBLTargetApplications</key>
  2. <array>
  3. <dict>
  4. <key>BundleIdentifier</key>
  5. <string>com.apple.Safari</string>
  6. <key>MaxBundleVersion</key>
  7. <string>5523</string>
  8. <key>MinBundleVersion</key>
  9. <string>5523</string>
  10. <key>RequiredFrameworks</key>
  11. <array>
  12. <dict>
  13. <key>BundleIdentifier</key>
  14. <string>com.apple.WebKit</string>
  15. <key>BundlePath</key>
  16. <string>/System/Library/Frameworks/WebKit.framework</string>
  17. </dict>
  18. </array>
  19. <key>TargetApplicationPath</key>
  20. <string>/Applications/Safari.app</string>
  21. </dict>
  22. </array>

Jetzt nur noch Safari neu starten und Red Snapper ist wieder voll funktionstüchtig.

Kategorie

Tags

Kommentare

Erstellt

  • 10. November 2007

Thema CSS Frameworks

Sie sprießen gerade aus allen Ecken und Enden: Frameworks oder auch “The next big thing”. Was bei wirklichen Entwicklungsframeworks wie Ruby On Rails, CakePHP, symfony oder wie sie alle heißen seine Berechtigung hat, ist bei einer Art Seitenbeschreibungssprache wie CSS irgendwie etwas mysteriös.

Reale CSS Projekte mal aufgegliedert

Bevor jetzt persönliche Meinungen ins Spiel kommen, schauen wir uns doch mal wirkliche Projekte an, wo verschwindet die Zeit im Teilsegment “HTML-Umsetzung” eines Layouts?

Seitentypen

Die meisten Webseiten bestehen nicht aus einem Layout mit verschiedenen Inhalten, sondern zum Glück gibt es da Varianten.

Die einfachste Variante:

  • Startseite
  • Contentseite

Damit sind die meisten einfacheren Seiten abgedeckt, alles weitere spielt sich dann im Inhaltsbereich ab.
Bereits hier werden die ersten Farb- und Schriftdefinitionen angelegt, Navigationen gebaut, Listenverschachtelt und andere lustige Spielereien erledigt, die nur für die Umsetzung des Layouts notwendig sind.
Durchschnittlicher Zeitbedarf: 4-12h

Doch was gibt es noch für Varianten?

  • Startseite
  • Contentseite 3-spaltig
  • Contentseite 4-spaltig
  • Mikrostartseite für einen Themenbereich
  • Kategorieübersicht eines Webshops
  • Der Webshop an sich
  • Modale Hilfsdialoge
  • andere spezielle Seitentypen die nicht mit einer normalen Contentseite abgedeckt werden
  • usw.

Durchschnittlicher Zeitbedarf: 10-xh

Es wird schon Anspruchsvoller. Dank unterschiedlichstes Elemente müssen etliche Klassen definiert werden und die meiste Arbeit geht in die Anpassung der Spezialfälle.

Nun gut, hier könnte man noch argumentieren das man mit einem rasterbasiertem CSS wie blueprintcss zu schnellen und guten Ergebnissen kommt. Aber da fängt das Problem schon an.

Kleines Beispiel: blueprintcss trennt die Spalten bzw. Rastereinheiten per margin. Jetzt möchte man aber das z.B. das die meisten Spalten eine durchgehenden Hintergrund bis zu nächsten haben. Man kann nun das Margin entfernen und die Größe Anpassen oder sich eines paddings bedienen. Nur ist es eben nicht einfach mal schnell, wie immer bei solchen Fällen liegt der Teufel im Detail und es gehen 2-3h nur für die Anpassungen drauf.

Contentelemente

Jetzt kommt man langsam zum spassigen Teil. Überschriften, Absatzformate, Listen, Linklisten, Formulare usw. sollen sich natürlich nicht überall gleich verhalten oder manche doch usw. Im Regelfall geht hier die meiste Zeit in die Anpassung der Abstände zueinander, Verhalten in bestimmten Sonderkonstellationen usw.

Verwendet man jetzt ein System das von Hause genau das Gegenteil von dem macht, das man möchte, wird es richtig lustig. Der Zeitvorteil ist schnell weg, wenn man die meiste Zeit mit der Suche nach der Vererbung oder dieser ist. Es wird sehr ermüdend.

Durchschnittlicher Zeitbedarf: 10-xh

Print.css

Das Drucklayout darf natürlich nicht fehlen, aber im Gegensatz zur der Meinung der Webworker die das Framework erstellen möchte der Kunde natürlich Spielereien wie sein Logo, bestimmten Schriften und Farben usw. beim Ausdruck sehen. Also wieder Farben anpassen, Abstände ändern, und eigentlich das ganze Teil wieder fast neu schreiben.

Browseranpassungen

Mittlerweile gibt es viele die den IE (möge er, wenn es ihn gibt, in der Hölle schmoren) verteufeln und gar nicht mehr unterstützten möchten. Die Realität sieht leider anders aus und wenn gerade der Projektmanager des Kunden den IE 6 benutzt, braucht man auch gar nicht mit irgendwelchen Diskussionen kommen. Gerade dann nicht, wenn 80% dieses Kunden genau diesen Browser benutzen.
Also um die Browseranpassungen kommt man einfach nicht herum, und professionell wäre jetzt natürlich auch eine fast perfekte Anpassung des CSS damit das Layout überall wirklich fast gleich aussieht.

Also wieder in die Untiefen eintauchen und eigentlich wie immer Mikrodetails ausbessern.

Durchschnittlicher Zeitbedarf: mind. 8h

Alles Mist? Nein!

Die ganzen Ansätze sind wirklich brauchbar und jeder der möchte darf diese “Frameworks” benutzen ohne das es ein Vergehen wäre. Für die vom Layout einfacheren Seiten sind die “Frameworks” ideal und die Benutzer müssen sich keine großen Gedanken über viele Kleinigkeiten machen, und das ist ja auch gut so.
Aber bei den meisten Projekten ist man mit einer Bibliothek der normalen Inhaltslemente mit minimalen Vorgaben am besten bedient. Webseiten für die Kunden da draußen müssen eben doch etwas mehr her machen als das was die Frameworks immer andenken. Sollte man dies also schon beim Layout beachten? Ich denke eher nicht. Dadurch würden alle Seiten mit der Zeit sich aneinander angleichen, weil es ja sonst zu viel Arbeit wäre.

Jammern können alle!

Richtig! Deswegen will ich nicht nur jammern oder meckern, sondern genau das was ich und vielleicht auch andere benötigen umsetzen:
Eine schlichte Bibliothek eines schlanken CSS für die normalen Inhaltselemente, nicht mehr und nicht weniger. Alles andere wird dem gemein genannten Frontendler überlassen. Freiheit für alle und keine stupiden Arbeiten mehr wiederholt erledigen oder aus vorherigen Projekten kopieren.

Die für die erste Version geplanten Elemente und Ziele werde ich demnächst (wie es die Zeit eben zu lässt) mal veröffentlichen.

Kategorie

Tags

  • No Tags

Kommentare

Erstellt

  • 27. September 2007

Nach dem Shooting

Photoreviewer Icon
Die digitale Fotografie hat viele Vorteile gebracht, aber natürlich auch neue Aufgaben: so muss nach einem Shooting irgendwie die Datenmenge sortiert und der Müll oder die “da probier ich nur kurz was aus kann man ja später wieder löschen”-Fotos entfernt werden.

Als unverzichtbar hat sich da Photoreviewer erwiesen. Das Programm arbeitet nach einem ganz simplen Prinzip: importierten Bilderordner laden, für jedes Bild + (für behalten) oder - (für aussortieren) drücken und in kürzester Zeit ist die Bilderflut sortiert. Wem das noch nicht reicht kann natürlich auch Wertungen von 1-9 vergeben. Daneben gibt es noch eine Lupe mit der man die Schärfe besser überprüfen kann.

Nach der Bewertungsphase kann man dann vorgeben, was mit den Bildern passieren soll also ob die aussortierten gleich in den Papierkorb wandern oder erst mal in einen anderen Ordner verschoben werden soll.

Wer öfters viel fotografiert wird dieses Tool zu schätzen wissen.

PhotoReviewer

Kategorie

Tags

  • No Tags

Kommentare

Erstellt

  • 15. August 2007

Pageshots mit Red Snapper

Red Snapper Icon
Wer gerne Screenshots von Webseiten macht kennt das Problem: sobald die Seite über die eigene Bildschirmgröße hinaus geht ist man auf Tools angewiesen. Hier kommt Red Snapper ins Spiel.

Als Safari-Plugin bekommt man einen neuen Button in der Toolbar, mit dem man von der aktuellen Seite einen Screenshot in allen gängigen Formaten machen kann. Dabei kann man die Breite festlegen und es wird die komplette Seite festgehalten.

Der Clou an der Sache ist die PDF-Unterstützung: der Text wird auch als Text gesichert und sogar Links bleiben erhalten.
Feine Sache für 8$, ich habe es auf jeden Fall gleich gekauft.

Red Snapper

Kategorie

Tags

Kommentare

Erstellt

  • 15. August 2007

Silbentrennung im Browser

Leider gibt es bis dato keine wirklich funktionierenden automatische Silbentrennung. Es existiert zwar das ­ Element, dieses wird aber noch von keinem Browser außer der Firefox 3 beta unterstützt. Dies wird vor allem bei Flattersatz und Blocksatz deutlich. Bisher werden nur komplette Wörter umgebrochen.

Es gibt aber schon eine Javascript Lösung, die genau dieses Problem löst:
zur Webseite

Mit 96 kb noch etwas zu mächtig, aber immerhin ein Anfang für bessere Typografie im Web.

Kategorie

Tags

Kommentare

Erstellt

  • 6. July 2007

Grundlinienraster für Webseiten

Grundlinienraster für Webseiten

Ich habe mich die letzte Zeit intensiver mit Grundlinienraster für Webseiten beschäftigt. Für die Typografen aus dem Printbereich da draußen ist das ein alter Hut, nur im Web wird so gut wie kein Gebrauch davon gemacht.

Ein mögliches Endergebnis vorweg

Was ist das Grundlinienraster?

Sobald Papier beidseitig bedruckt wird scheint der Inhalt der anderen Seite immer leicht durch das Papier. Damit dies nicht störend wird, bedient man sich einem Grundlinienraster an dem der Fließtext ausgerichtet wird. So sind Vorder- und Rückseite deckungsgleich und stören beim lesen nicht.

Wieso bei Webseiten?

Das Grundlinienraster ist vom Prinzip ein vertikales Raster, nach dem die Text- und Bildelemente des Fließtextes angeordnet werden. Es ergibt sich so ein angenehmeres Textbild, auch am Bildschrim. So erscheinen z. B. Randbemerkungen in einer Marginalspalte neben dem Fließtext mit dem gleichen Zeilenabstand harmonischer.

Wo macht es Sinn?

Keine Frage nicht bei jeder Seite muss man dies umsetzen. Aber vor allem bei Textlastigem Inhalt macht eine Ausrichtung des Fließtextes und Überschriften und Bildelemente in der Contentspalte Sinn. Schwierig wird das Ganze bei Listen, Aufzählungen, Formularelementen und Zitaten. Möglich ist es, ob es Sinn macht, muss man für den jeweiligen Fall selber entscheiden.

Wie geht man vor?

Zeilenabstand festlegen

Als Erstes muss man einen Zeilenabstand für das Grundlinienraster festlegen. Die hängt von der verwendeten Schriftgröße des Fließtextes (also der p Tags) ab. Bei der Standardschriftgröße 12px verwendet man meist eine Zeilenhöhe (line-height) von 18px, die einem Verhältnis von 150% entspricht.
Eine Eigenheit gibt es dabei zu beachten: setzt man per CSS eine line-height wird zuerst die angegebene Höhe aufgezogen und das Element dann in dieser vertikal zentriert.

Grundlinienraster anzeigen

Die einfachste Variante ist eine Hintergrundgrafik mit dem Raster zu erstellen. Wichtig ist das die erste Linie erst nach einer Höheneinheit beginnt. So werden die Elemente immer vertikal zentriert im Raster angezeigt. Bei dieser Technik muss man bei jedem Projekt mit anderem Raster eine neue Grafik erzeugen oder eine Bibliothek mit den gängigsten anlegen.
Genau da setzt Typogridder an. Über ein Javascript wird der Zeilenabstand des p Tags (jeder andere ist natürlich auch möglich) ausgelesen und über ein PHP Skript eine Rastergrafik erzeugt. Das ganze kann man als Bookmarklet in jeden Browser integrieren und so für jede Seite ein Grundlinienraster anzeigen lassen. In der Datei getBackgroundImage.php kann die Farbe des Rasters angepasst werden:

Zeile 49:

  1. $border = imagecolorallocate($im, 230, 230, 230);

Hier wird jetzt ein Raster mit 90% Schwarz angezeigt, im Gegensatz zum standardmässigen Rot.

Elemente ausrichten

Der Einfachheit werden alle Werte in Pixeln angegeben, um das Prinzip einfacher zu verstehen. Als Erstes legt man die Standardschriftgröße und den Zeilenabstand fest:

  1.  
  2. body {
  3.         font-size: 68.75%; /* 11px */
  4.         font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  5.         line-height: 18px;
  6. }
  7.  

Alle Abstände müssen ein Vielfaches unseres Grundlinienrasters, in diesem Beispiel 18px betragen. Da p-Tags immer unter einer Headline oder einem anderen p-Tag vorkommen, erhält dieser nur ein margin-bottom von einer Höheneinheit bzw. 18px.

  1. p {
  2.         font-size: 11px;
  3.         line-height: 18px;
  4.         margin: 0 0 18px 0;
  5. }

Interessanter wird die Sache bei Headlines. Möchte man die h1 in 24px setzen muss man die line-height immer auf das passende oder nächst höhere Vielfache unseres Rasters setzen. Eine Schriftgröße von 36px = 2 Höheneinheiten = line-heigt 36px, aber 24px = 1,3 Höheneinheiten = auf 2 Höheneinheiten aufrunden = 36px. Dazu kommt noch ein Abstand von einer Höheneinheit oben und unten.

  1. h1 {
  2.         font-size: 24px;
  3.         line-height: 36px;
  4.         margin-bottom: 18px;
  5.         padding-top: 18px; 
  6. }

Möchte man z.B. einen border unter einer Headline, muss man diesen mit in die Berechnung mit ein beziehen. In diesem Fall ist der border unten, also wird die Größe des borders vom unteren Abstand abgezogen = margin-bottom: 17px.

  1. h2 {
  2.         font-size: 20px;
  3.         line-height: 36px;
  4.         margin-bottom: 17px;
  5.         padding-top: 36px;
  6.         border-bottom: 1px solid red;
  7. }

So kann man die analog für alle Headlines anpassen:

  1. h3 {
  2.         font-size: 18px;
  3.         line-height: 18px;
  4.         margin-bottom: 15px;
  5.         padding-top: 18px;
  6.         border-bottom: 1px solid #888;
  7.         padding-bottom: 2px;
  8.         font-weight: normal;
  9.         clear: both;
  10. }
  1. h4 {
  2.         font-size: 14px;
  3.         line-height: 18px;
  4.         margin-bottom: 18px;
  5. }
  1. h5 {
  2.         font-size: 12px;
  3.         line-height: 18px;
  4. }
  1. h6 {
  2.         font-size: 11px;
  3.         line-height: 18px;
  4.         font-style: italic;
  5.         font-weight: normal;
  6. }

Weitere Elemente wie ungeordnete Listen, Definitionslisten, Tabellen usw. muss man selber entscheiden, ob man diese nach dem Grundlinienraster ausrichten möchte.
Listen z.B. werden durch die global in body festgelegte line-height beeinflusst, sobald man margin und padding auf 0 setzt.

Ein Beispiel wie das ganze dann mit mehreren Elementen aussieht:
Das Endergebnis

Weiterführende Links:

Kategorie

Tags

Kommentare

Erstellt

  • 6. July 2007

Backup Strategie für portable Rechner

Da vor 2 Tagen wieder mal eine Festplatte in meinem MacBook sich verabschiedet hat, denke ich ist es mal wieder an der Zeit zu mehr Backups auf zu rufen! Und ja, ich hatte von allem Backups, es kam zu keinem Datenverlust trotz Totalausfall.
Der hier aufgezeigte Weg arbeitet bewusst nicht mit inkrementellen Backups, da diese für mich als Einzelperson einfach nicht notwendig sind. Außerdem ist der Prozess nicht wirklich per Cronjobs automatisiert, da ich nie weiss, wann der Rechner in der Nähe der Backupplatten ist.

Die Ausstattung

  • 1x interne 160 GB 2,5″ Festplatte, die Systemfestplatte
  • 2x externe 250 GB Festplatten, per Firewire angeschlossen
  • 1x externe 2,5″ 160 GB Festplatte, per USB angeschlossen
  • 1x DVD Brenner

Eine der 250 GB Festplatten ist für das tägliche synchronisieren der Arbeitsdateien zuständig und hält immer den aktuellen Stand der sich ändernden Dateien. Die zweite 250 GB Festplatte hat eine 160 GB Partition, auf dieser wird das komplette System gespiegelt. Bei einem Totalausfall kann man so schnell von dieser starten und hat eigentlich keinen Nennenswerten Zeitverlust (nur portabel ist das ganze nicht mehr). Aus diesem Grund gibt es noch eine 2,5″ Festplatte im externen Gehäuse, die auch das komplette System gespiegelt vorhält. Diese kann man dann bei Gelegenheit einbauen und hat ein wieder lauffähiges System, während die alte Festplatte auf dem Weg zum Hersteller ist.
Alle paar Wochen gibt es noch ein Backup auf DVD, man weiss ja nie, wenn z.B. doch mal ein Blitz über den Überspannunggsschutz kommt.

Tägliche Sicherungen

arRsync ScreenshotDie täglichen Sicherungen erledige ich mit arRsync. Sobald man ins Bett geht, ist es kein großes Problem das Backup an zu werfen und den Rechner seine Arbeit verrichten zu lassen. arRsync ist eigentlich nur eine GUI für das bekannte rsync. Der Vorteil ist eigentlich nur das man komfortabel seine Backupsets verwalten kann und eine Statusbar hat, kann man also im Notfall auch verzichten. Ich benutze auch bewusst keine Scripts die den Backupprozess starten, sobald z.B. die Backup-Festplatte gemountet wurde. Der ganze Prozess ist sehr Festplattenintensiv und stört meistens dann, wenn etwas fertig werden soll.

Täglich gesichert wird folgendes:

  • Arbeitsordner
  • Adressbuch
  • Yojimbo
  • Vienna (ich möchte meine RSS-Feeds nicht wieder zusammensuchen)
  • MAMP
  • Mails
  • mein Downloadordner
  • Musikordner
  • Schreibtischordner
  • iCal
  • TimeLog (wäre schlecht wenn abgerechnete Zeiten nicht auf die Rechnung kämen)
  • Schriftenordner

Somit habe ich meine täglichen Änderungen erschlagen und kann mit ruhigem Gewissen jedem Festplattencrash die Stirn bieten.

Wöchentliche Sicherung

Die wichtigen Daten sind nun gesichert, aber ein Crash kommt meist dann, wenn man etwas Wichtiges fertig bekommen muss. Da kann so eine System Neuinstallation mit der Installation aller Programme schon einen halben Tag kosten.
Deswegen wird das komplette System mit SuperDuper! auf eine externe Festplatte geclont. Alternativ kann man natürlich das bekannte Carbon Copy Cloner verwenden. Auf der externen ist eine Partition die genau so groß wie die interne ist. Dies reicht schon mal, um im Worst-Case sofort von dieser starten und weiter arbeiten zu können. Arbeitsdateien kann man dann von der täglichen Sicherung nachziehen und ist sofort wieder auf dem neusten Stand.
Zusätzlich dazu klone ich das System noch auf eine externe 2,5″, die haargenau die gleiche wie die interne ist. So kann man bei Gelegenheit die interne mit einer funktionierenden austauschen und hat wieder einen portablen Rechner.

Alle paar Monate

Jetzt hat man alle wichtigen Daten mehrfach gesichert und es kann eigentlich nicht mehr groß was passieren. Für den Fall der Fälle backupe ich noch so Sachen wie die Arbeitsdateien und Fotos alle paar Monate auf DVDs, falls doch mal was eintritt was man sich nicht ausmalen kann.
Dank Diskspanning ist es kein Problem einen 25 GB Ordner auf mehrere DVDs verteilt zu brennen. Ich verwende dazu Toast Titanium, aber auch Disco unterstützt dies. Wer noch andere Brennprogramme kennt die dies unterstützen kann dies gerne in den Kommentaren hinterlassen.

Neu: Onlinebackups

Ich teste zur Zeit den Onlinebackup-Dienst mozy. Dort bekommt man 1 GB im kostenlosen Packet.
Das eigene Tool sichert die eingestellten Daten sobald der Rechner 30 Minuten nicht verwendet wurde in der Standardeinstellung. An sich eine sichere Sache, nur gehöre ich noch zu den Leuten die trotz verschlüsselter Übertragung und Sicherung nicht gerne ihre privaten Daten auf den Servern anderer Leute wissen möchten. Erschwerend kommt noch der geringe Upstream trotz DSL 6000 hinzu, was die ganze Sache für z.B. Arbeitsdateien und andere große Daten unsinnig macht.

Zusammenfassung

Natürlich muss man nicht diese Backup-Paranoia teilen, aber man sollte vielleicht doch darüber nachdenken ab und zu die wichtigsten Daten zu sichern. Der Tag wo man es ansonsten bereut wird kommen, das hat die Erfahrung gezeigt.

Kategorie

Tags

Kommentare

Erstellt

  • 10. June 2007