Am Mittwoch beginnt die Landrush-Phase für die neue Top-Level-Domain .asia und macht somit den Weg frei für tolle neue Domainnamen wie www.funt.asia, script.acul.asia oder ähnliches. Eine gute Gelegenheit also für all die neuen Startups da draussen, mal auf Domainfang zu gehen.
Der AlphaImageLoader ist ein proprietärer Filter, den man häufig verwendet, um den Internet Explorer 6 dazu zu bringen, Alpha-Transparenzen von PNG-Dateien anzuzeigen. Ein Problem, welches beim Einsatz des AIL auftreten kann: Links und Formelemente innerhalb des Bereichs, auf den der Filter angewendet wurde, sind nicht mehr klickbar. Schnelle Abhilfe schafft in diesem Fall das Setzen von position: relative für die entsprechenden tags (<a>, <input />, etc.).
Sehr geehrte Norisbank,
Aufgrund eines Programmierfehlers, verursacht durch einen Ihrer Webentwickler, ist ein Fehler aufgetreten. Bitte beenden Sie dessen Vertrag und verlangen Sie umgehend eine kostenlose Nachbesserung. Kontrollieren Sie danach, ob dieser Auftrag auch ausgeführt wurde, indem Sie versuchen, mit der Vor- und Zurück-Taste Ihres Internet-Browsers innerhalb Ihrer Webanwendung zu navigieren. Bitte rechnen Sie künftig damit, dass Ihre Kunden selbst entscheiden möchten, wie sie auf Ihren Internetseiten navigieren und auch damit, dass jegliches von Ihnen als “Bedienfehler” tituliertes Verhalten in jedem Fall auftreten wird. Machen Sie dafür jedoch bitte nicht Ihre Kunden verantwortlich, sondern verbessern Sie gefälligst Ihr Internetangebot!
Ihr Maurice Kühlborn
Mit tingelets starte ich heute ein kleines Projekt, dass euch Webentwicklern und -designern das tägliche Leben ein wenig erleichtern soll:
Bei mir kommt es recht häufig vor, dass ich zu Debug-Zwecken zusätzliche Regeln in meine CSS-Dateien einfüge. Meistens handelt es sich dabei um Hintergrundfarben, die bestimmte Elemente hervorheben sollen, damit man die Größen und Abstände parallel in mehreren Browsern vergleichen kann.
div#column {
margin: 2em 0;
float: left;
background: #5ff; /* debug */
}
Da dies oft recht mühsam ist, vor allem wenn man später wieder die richtige Zeile zum Herauslöschen finden will, habe ich es mir angewöhnt, Debug-Angaben immer einen Tab weiter nach rechts einzurücken.
Dennoch hab ich mich oft gefragt, ob das nicht noch einfacher geht. Sicher gibt es tolle Tools, die diese Aufgabe mit Bravour erledigen, man schaue sich nur das großartige Firebug Plugin, den Safari Web Inspector oder Xyle scope an. Das Problem bei der Sache ist allerdings, dass diese Lösungen immer auf eine Rendering-Engine begrenzt sind – um Ergebnisse zu vergleichen, also unbrauchbar.
Kürzlich hatte ich eine Idee, die genau an dieser Stelle ansetzt: Warum nicht das ganz über Bookmarklets steuern? Gesagt getan hab ich mich die letzten Tage mal hingesetzt und die tingelets Bookmarklets Suite gebastelt, die als Ergänzung zu den oben genannten Tools das Leben des gemeinen Webdesigners erleichtern soll.
Einmal eingerichtet, kann man in Windeseile beliebige Tags, CSS-Klassen oder auch IDs einfärben und sich so einen schnellen, browserübergreifenden Eindruck von einer beliebigen Seite verschaffen:
Auf dem tingelets-Server liegt zum einen die Datei tingelets.js, die alle Funktionen enthält sowie für jedes Bookmarklet ein eigenes kleines Script, dass den Funktionsaufruf erledigt. Beide werde über das Bookmarklet in die aktuelle Seite geladen und ausgeführt. Passende Hintergrundbilder werden ebenfalls vom tingelets-Server geladen und angezeigt.
Mehr Infos und natürlich die Bookmarklets findet ihr unter www.tingelets.com.
Über Feedback würde ich mich natürlich freuen, besonders im Hinblick auf die Weiterentwicklung: Was fehlt, was könnte man weg lassen, was könnte man noch ändern/optimieren, welche bugs gibt es?
Und weil getingete Seiten so hübsch aussehen, hab ich gleich noch eine flickr-group angelegt, auf die ihr eure Screenshots hochladen könnt. Viel Spaß.
Templates in einem HTML-Textfeld zu bearbeiten macht keinen Spaß. Leider ist dies bei diversen Blogtools standardmäßig der Fall. Für alle TextMate User gibt es aber Abhilfe: Edit in TextMate. Dieses kleine Tool lässt sich ganz einfach über Bundles -> TextMate -> Install Edit in TextMate installieren und nistet sich fortan im Bearbeiten-Menu aller Programme ein. Befindet man sich nun z.B. in Textpattern in einem Textfeld zum Bearbeiten eines Templates (oder in einem beliebigen anderen Formularfeld), kann man über die Tastenkombi Control-Apfel-e den enthaltenen Text in einem neuen TextMate Fenster öffnen und bearbeiten. Nach Speichern und Schließen des Fensters wird der bearbeitete Text automatisch wieder in das HTML-Textfeld eingefügt.
Der Titel lässt ja schon vermuten, worum es geht: Dieses Buch erklärt die Grundzüge der Programmiersprache Ruby, jedoch immer im Hinblick auf die Anwendung in Rails bzw. an Hand von Beispielen aus dem Web-Framework. Es richtet sich in erster Linie an Leser, die bereits mit Rails Erfahrungen gesammelt haben zudem aber gerne besser verstehen möchten, was im Hintergrund der Applikation abläuft und wie die einzelnen Teile einer Rails-Applikation zusammenspielen. Es lohnt sich auch insofern, dass man viele Ruby-eigene Sprachelemente entdecken und besser verstehen kann, wie zum Beispiel Module oder Blocks, die die Sprache so effektiv und einfach machen. Das Buch geht wie ein Tutorial vor, eigenet sich aber dennoch auch prima als Nachschlagewerk für den täglichen Gebrauch, gerade für Leute wie mich, die nicht ausschließlich programmieren sondern die meiste Zeit mit HTML, CSS und Photoshop beschäftigt sind.
Und weils so schön ist, hier noch ein kleiner Auszug aus dem Vorwort, verfasst vom Großen Meister persönlich:
[…] Tasks that would have made my eyes roll in PHP or Java made my smile light up as Ruby time and time again showed that programming could be simple, fun, and outright beautiful. […]
[…] David clearly has an encyclopedic knowledge of Ruby. Not only does he understand how to use it, but he can also explain why things are the way they are. He connects the dots and allows you to see the bigger picture, providing the missing piece that turns puzzle into picture. […]
Zum Weiterlesen:
Resource für Buttonvorlagen, Formelemente verschiedener Browser und Betriebssysteme sowie Screenshots von Browserfenstern für Präsentationslayouts.
Lockeres Treffen für Webmaster aus dem Raum Leipzig.
Was ist eigentlich der Unterschied zwischen FTP, FTPS und SFTP
Jon Hicks gibt einen guten Überblick über nützliche Features und Plugins für Safari
Sweet fancy Mosesa Bugzilla for IE? There was no mention of this within my earshot at Mix 06, so Im as surprised as anyone else. Did I fall down a rabbit hole and quaff a bottle labeled DRINK ME? If this is a dream, I dont ever want to wake up.
Eric Meyer zur geplanten öffentlichen(!) Bugtracking Site für den IE.
Ein weiteres Wunder ist geschehen: Internet Explorer 7 unterstützt min-width, min-height, max-width und max-height. Endlich werden Liquid Layouts möglich, ohne dass man durch irgendwelche Hacks oder JavaScripts eine minimale Breite erzwingen muss. Das wars aber auch schon in Sachen frohe Kunde.
Die neue Beta Version (IE7 Beta 2 Preview Release 2, puh!) ist allerdings insofern wichtig, dass die Implementation neuer (Layout-)Features laut IE Entwickler-Team jetzt abgeschlossen ist. Das Rendering steht somit weitesgehend, man kann also so langsam anfangen, seine Seiten zu testen.
Die Podcasts des kürzlich statt gefundenen Carson Workshops “The Future of Web Apps” stehen ab sofort zum Download bereit. Unter anderem dabei: David Heinemeier Hansson (37 Signals), Joshua Schachter (del.icio.us), Cal Henderson (Flickr) und Shaun Inman (Mint). Nix wie hin, es lohnt sich!
Update: Die SubEthaEdit Transcriptionen der Vorträge findet ihr hier (Danke für den Link, Alex).
Allan Odgaard schreibt im TextMate Blog über die geplanten Features für das nächste größere TextMate Update. So soll unter anderem der Project-Drawer eine Generalüberholung erhalten und auch mit SFTP und Subversion zusammenarbeiten können. Neben vielen weiteren geplanten Verbesserungen und Erweiterungen soll auch eine Split-View Funktion eingebaut werden, die es erlaubt (wie in jedem guten Editor) das Editor-Fenster zu zweiteilen und zwei unterschiedliche “Stellen” einer Datei parallel zu editieren.
Das IE Entwickler-Team lädt zum Expert Chat über den Internet Explorer. Dürfte sicher eine sehr interessante Veranstaltung werden. Bleibt nur zu hoffen, dass es nicht zu einem kollektiven “endlich kann ich mich mal persönlich beschweren”-Event ausartet.
via: IEBlog
Heute bin ich auf einen wirklich fast schon witzigen Bug im IE gestoßen. So verschieben sich nämlich Aufzählungspunkte von HTML-Aufzählungen, wenn man dem li-Tag eine feste Breite zuweist. Die Bullets erscheinen an der Unterkante des Aufzählungspunktes ausgerichtet.
ul {
padding-left: 15px;
}
li {
padding: 5px 0;
width: 300px;
}
Und so sieht das ganze im Internet Explorer 6 aus:
Zur Lösung des Problems kann man einfach die Breite statt dem li-Tag dem umschließenden ul-Tag zuweisen.
ul {
padding-left: 15px;
width: 300px;
}
li {
padding: 5px 0;
}
Ist dies nicht möglich, muss man sich mit margin bzw. padding behelfen.
Ihr kennt sicher alle die Möglichkeit über das CSS-Attribut AlphaImageLoader im IE transparente PNGs anzeigen zu lassen. Prima. Zu diesem Thema ist mir was interessantes aufgefallen, nachdem ich zuvor fast eine halbe Stunde einen Fehler gesucht habe, der gar nicht existiert hat. Bei einem aktuellen Projekt von mir existieren verschiedene Verzeichnistiefen in der URL, so in der Art: ”www.seite.de/”, “www.seite.de/portfolio/”, “www.seite.de/portfolio/kategorie/” und so weiter. Auf jeder Seite ist irgendwo das Firmenlogo positioniert, dass über eine mit Conditional Comments eingebunde separate Stylesheet-Datei definiert wird. Das sah zunächst ungefähr so aus:
#logo {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../img/logo.png’, sizingMethod=’crop’);
}
Auf der Startseite hat das auch wunderbar funktioniert, nur auf den Folgeseiten wurde das Bild nicht angezeigt. Nach langem Suchen dachte ich, es könnte vielleicht an der Verzeichnistiefe der Seite liegen. Und genau so war es.
Komischerweise nimmt der Befehl AlphaImageLoader die HTML-Seite als Ausgangsbasis für die Pfade und nicht wie gewöhnlich die Stylesheet-Datei in der der Befehl steht. Wieder einmal unverständliche Logik aus dem Hause Microsoft.
Seit kurzem bin ich wieder passionierter BBEdit User. BBEdit ist ein toller Editor und läßt wirklich kaum Features vermissen, außer vielleicht eine Autocomplete Funktion, wie sie Editoren wie Dreamweaver, GoLive oder SKEdit schon seit langem unterstützen. In BBEdit gibt es leider keine klassische Variante davon mit automatisch ausklappendem Auswahlfeld, das kontextsensitiv die möglichen Vervollständigungen anzeigt. Es gibt allerdings eine nette kleine Funktion, mit der man sich eine eigene Codevervollständigung bauen kann: Auto-Complete Glossary.
Dabei geht man wie folgt vor:
Man kann innerhalb des Glossarys (Window > Palettes > Glossary) mehrere Sets anlegen. Zu diesem Zweck erstellt man im Ordner ~/Library/Application Support/BBEdit/Glossary/ einfach Unterordner, die die Endung der jeweiligen Sprache haben, für die sie verwendet werden sollen. Also XHTML.html für HTML Dateien und CSS.css für Stylesheets und so weiter. BBEdit wählt abhängig von der gerade geöffneten Datei dann automatisch das richtige Set aus. Glossary Items, die global verfügbar sein sollen kann man direkt im Glossary Ordner ablegen.
Nehmen wir mal an, wir wollen einen Glossary Eintrag für das Attribut class erstellen. Dazu öffnen wir eine neue Textdatei und schreiben folgende Zeile
class=”#INSERTION#”
Der Platzhalter #INSERTION# markiert die Stelle, an der nach dem Einfügen der Cursor platziert wird. Jetzt speichert man die Datei im Ordner ~/Library/Application Support/BBEdit/Glossary/XHTML.html/ unter dem Namen “class” ab. Der Name der Datei bestimmt den Begriff, den man eintippen muss, um die Codevervollständigung ausführen zu können. Das kann also ein beliebiger Begriff sein. Damit es sich wie eine echte Codevervollständigung verhält halte ich es jedoch für sinnvoll, direkt die Namen der Attribute bzw. Tags zu verwenden. Bei Tags sollte man darauf achten, das < Zeichen am Anfang wegzulassen, da dieses von der Funktion Auto-Complete Glossary leider ignoriert wird (also z.B. "input" statt "< input />”).
Im Menu Edit findet man die Funktion Auto-Complete Glossary. Diese kann dazu verwendet werden, Glossary Einträge anhand der zuletzt geschriebenen Zeichenfolge zu finden und einzufügen. Tippt man also ”cl” und führt dann Auto-Complete Glossary aus, findet BBEdit unseren zuvor angelegten Eintrag class und fügt ihn ein. Damit die Funktion auch wirklich sinnvoll nutzbar ist, sollte man ihr allerdings über Set Menu Keys ein Tastaturkürzel zuweisen (z.B. Apfel-Return).
Auch sehr nützlich ist das Zuweisen von Tastaturkürzeln zu Glossary Einträgen. So kann man zum Beispiel sehr einfach Textbereiche von Tags umschließen lassen. Als Beispiel nehmen wir mal eine normale Headline. Der Glossary Eintrag sieht wie folgt aus:
<h1>#INSERTION##SELECT#</h1>
Bei diesem Eintrag ist nun zusätzlich zum #INSERTION# Platzhalter noch der #SELECT# Platzhalter hinzugekommen. Er macht es möglich, dass man einen beliebigen Textabschnitt auswählen kann und dann über einen vorher gesetztes Tastaturzkürzel (z.B. Apfel-alt-Shift 1) als Headline taggen kann. Der ausgewählte Text wird dann an Stelle des #SELECT# Platzhalters eingefügt.
Damit ihr jetzt nicht alle wie wild HTML Tags nachtippen müsst, hab ich mal meine aktuellen Glossary Sets für XHTML und CSS zum Download in ein Disk-Image gepackt. Einfach runterladen und in den Ordner ~/Library/Application Support/BBEdit/Glossary/ kopieren.
Eine meiner Lieblings Software-Firmen hat jetzt einen kleinen Shop für die eigene Marke gelauncht. panic haben uns unter anderem mit dem FTP-Client Transmit beglückt, der sehr bald schon in Version 3 erscheinen wird. Den Shop sollte man sich auf jeden Fall mal anschauen, selbst wenn man nicht daran denkt etwas zu kaufen. Hier wird wirklich DHTML zur Kunst.
It reduces the entire browsing and purchasing experience to two pages, dynamically calculates your shipping costs on the fly (based on your address), and integrates completely with a back-end system that prints bar-coded receipts and shipping labels with correct electronic postage ready to go. Don’t miss the little touches either, like the “poof” when an item is removed from the cart, the cross-fading item preview photos, and the eList signup dialog… And not an ounce of Flash in sight. (via stevenf)
Abgespeckte aber kostenlose Version von Barebones BBEdit
Ich habe kürzlich im Rahmen eines Jobs ein paar Tests bezüglich des druckbaren Bereichs von HTML-Seiten gemacht. Dabei bin ich von einer eins zu eins Ausgabe ausgegangen, also ohne die Inhalte vorher über spezielle Druck-Stylesheets zu verändern. Um nun rauszufinden, welcher Bereich einer Internetseite denn überhaupt auf eine DIN-A4 Seite passt, habe ich einfach mal ein Testdokument erstellt, in HTML eingebettet und anschließend auf allen möglichen Browsern ausgedruckt. Die Ergebnisse sehen wie folgt aus:
(Und wieder einmal belegt das, wie steinzeitlich der IE doch ist.)
Hab mir mal die Demoversion runtergeladen und das Icon ist wirklich fürchterlich. Das dachte auch Jon Hicks (Designer des Firefox- und Thunderbird-Icons) und hat prompt over lunch ein Alternativ-Icon erstellt, dass man kostenlos runterladen kann.
Wer hätte das gedacht: BBEdit 8 ist raus.
… bei selfhtml. Nachdem das Projekt seit kurzem endlich unter einer vernünftigen Domain erreichbar ist (www.selfhtml.org), gibt’s jetzt den seiteneigenen Validator. Bei Fehlern wird direkt in den Inhalt von selfhtml verlinkt.
Gefunden bei css-technik.de
… ist ein nettes kleines Tool für OS X, zum Simulieren unterschiedlicher Bildschirmauflösungen. Grade für Webdesign eine feine Sache, wie ich finde. Man kann beliebig viele “Fenster” öffnen und auf verschiedene Abmessungen einstellen. Das ganze ist kostenlos, bzw. kann man zur Unterstützung etwas spenden (Donationware).
Zu finden unter: http://www.lorenb.com/software/smallscreenx/.
Dean Edwards hat ein paar Scripte geschrieben, die den IE standardkonform machen.
Ein interessanter Artikel über die Vorteile von “lesbaren” URLs. (via: Usability Inside)