News
IE7 erschienen
Am 18 Oktober ist der Internet Explorer 7 erschienen. In wenigen Wochen soll er auch als automatisches Update auf Windows-Rechner gespielt werden.
Das Gute am IE7 sind Eigenschaften wie tabbed browsing
, Anti-Phishing-Technologien, ein integrierter RSS-Reader und ein überarbeiteter Bookmarkbereich. Allerdings überwiegt das Schlechte, wenn man den vielen Stimmen glauben möchte: Bisher können nur wenige Windows-Nutzer, wie Windows-XP-Nutzer mit installiertem Sercive Pack 2, den Browser herunterladen, zudem ist er nur in englischer Sprache verfübar; die Installation erfordert einen Neustart und der IE7 basiert auf veraltetem IE6-Code, hält Webstandards immer noch nicht ein, und bereits jetzt wurde eine erste Lücke in der Sicherheit des Browsers gefunden. Des Weiteren verfügt er nicht über die umfassenden Eigenschaften von Opera und Firefox und scheint wie die Vorgängerversionen unter dem Microsoft-Fluch zu leiden, das Sicherheitslücken und Probleme eher später als früher aus dem Weg geräumt werden.
Webdesign-Links
In der aktuellen Ausgabe der iX befasst sich Henning Behme mit “Semantic Web von unten” und betrachtet Mikroformate. Sein Artikel Mehrwert-Markup ist auch online auf den Seiten der iX zu finden.
In der vergangenen Woche widmete Eric Meyer sich dem Gedanken einer Webdesigner-Organisation Being Professionals und betrachtete das Dasein eines Webdesigners auf Think Vitamin in ungewohnt witziger Weise: Stand Up For Your Rights!.
Mark Boulton gibt Tipps zur richtigen Farbwahl bei einem Web-Projekt: Five Simple Steps to designing with colour.
Cameron Moll beschäftigt sich mit Webdesign für mobile Endgeräte. In einer Präsentation (PDF-Format) im Rahmen eines W3C-Webinars und in seiner Artikelserie Mobile Web Design ~ The Series weckt er Interesse für das Thema und gibt damit einen kleinen Einblick in die Inhalte seines kommenden Buches Mobile Web Design.
Webentwickler-Tools. Heute: XAMP / MAMP
Ohne sie läuft gar nichts. Aber von ihnen gibt so viele Varianten und Variationen, sodass jeder andere einsetzt. Die Rede ist von Webentwickler-Tools. Programme, Computer und Funktionen, die wir Webentwickler für die Herstellung von Webseiten brauchen und die uns sogar noch inspirieren können. In Technikwürze stellen wir euch einige dieser Tools in loser Folge vor.
Webseiten mit statischen Inhalten kann man bequem auf der eigenen Festplatte speichern, im Browser aufrufen und testen. Ja selbst Programme wie Macromedia DreamWeaver bieten eine Vorschau für die eigenen HTML-Seiten. Doch sobald man mit dynamischen Inhalten arbeitet, schaut man in die Röhre. PHP-Seiten lassen sich normalerweise auf PCs nicht ohne weiteres anzeigen. Beim Mac funktioniert das zwar schon, doch fehlt hier wie beim PC eine MySQL-Datenbankinstanz. Wer also Webseiten selbst entwickelt, und wir sprechen hier ausdrücklich nicht nur von simplem HTML, kann nur live auf dem Server arbeiten. Gut, dass es Programme gibt, die die Arbeit online auf dem Server erlauben. Speichert man bei Zend ein auf dem Server geöffentes Dokument, muss dies vom Benutzer nicht hoch geladen werden, sondern wird direkt auf den Server gespeichert. Doch ist das Alles? Kann man dynamische Webseiten nur auf dem Webserver entwickeln? Nein. Es gibt Abhilfe.
PC-Hardwareschrauber sind so technikafin, dass sie sich aus alten Hardwareteilen einen Linux-Server aufsetzen und dort Apache und MySQL installieren und so eine Entwicklungsumgebung herstellen, mit der man wie auf dem Liveserver arbeiten kann. Doch wer will sich schon einen zweiten Rechner auf seinen Schreibtisch stellen, wenn heute schon ein Mac parallel mit OS X und Windows Vista läuft. Auch für den Gros dieser Entwickler gibt es Tools: XAMP und MAMP.
Beide Wörter sind Akronyme für den kombinierten Einsatz von Programmen und Betriebssystemen um einen Webserver zur Verfügung zu stellen. Das “A” steht für Apache und ist ein HTTP-Server, der am häufigsten eingesetzt wird. Das “M” steht für MySQL, die Datenbank ,und das “P” steht für PHP. Alles in allen also die Dinge die wir benötigen. Das Ziel dieser Programmpakete war uns ist es, dem Benutzer mit einer Installation alles zur Verfügung zu stellen, was er oder sie benötigt. Man wollte vermeiden, dass jeder Benutzer Apache, MySQL und PHP von Hand installieren oder kompilieren muss.
Damals gab es diese Pakete für Windows, welches dann WAMP hieß, und für Linux-Maschinen, das auf den Namen LAMP getauft wurde. Heute gibt es beide Varianten und jeweils eine Variante für Mac OS X und Solaris unter dem Namen XAMP. XAMP ist kostenlos und lässt sich auf jeder Plattform fix installieren.
MAMP hingegen wurde einwickelt von der Firma Living-e , die auch das CMS webEdition schuf, und ist ausschließlich für Mac verfügbar.
Mit beiden Systemen hat man ruck zuck eine funktionierende Umgebung mit Apache, MySQL und PHP parat und kann so seine Applikationen lokal testen. Das spart nicht nur Bandbreite, sondern hat auch den Vorteil, dass man immer eine Sicherheitskopie seiner Live-Webseite lokal hat, mit allen Funktionalitäten. Wer hingegen nicht unbedingt der Powerprogrammierer ist, sich aber gern mal an der Entwicklung von WordPress-Plugin versuchen möchte, findet in XAMP eine gute Möglichkeit, sich eine Testumgebung zu schaffen.
XAMP liegt in der Version 1.5.4.a für Linux und Windows, in Version 0.5 für Mac und 0.8.1 für Solris vor und enthält je nach Spezifikation
- Apache 2.2.3
- MySQL 5.0.24a
- PHP 5.1.6 & PHP 4.4.4
- phpMyAdmin 2.9.0.1
- FileZilla FTP Server 0.9.18
- OpenSSL 0.9.8d
MAMP steht in der Version 1.4 zum Download bereit und enthält:
- Apache Version: 2.0.55
- MySQL Version: 5.0.19
- PHP Version: 4.4.2 & 5.1.4
- eAccelerator: 0.9.5b2
- Zend Optimizer: 2.6.0
- phpMyAdmin 2.7.0-pl2
- SQLite Version: 2.8.16
- SQLiteManager Version: 1.1.3
- Freetype Version: 2.1.9
- t1lib Version: 5.1.0
- curl Version: 7.14.0
- jpeg Version: 6b
- libpng Version: 1.2.5
- gd Version: 2.0.28
Zusammenfassend lässt sich sagen, dass derjenige mit XAMP besser bedient ist, wer auf die neusten Programmversionen setzen möchte. Mac-User, die eine einfache Installation und ein Widget zur Steuerung ihrer Anwendung wünschen, sind mit MAMP besser bedient. Beiden gemein ist allerdings die Funktionalität. Noch nie war es einfacher, einen produktiven Server für die Entwicklung von dynamischen Webseiten aufzusetzen.
Tipps und Tricks
Update-Notifier für Firefox und Erweiterungen
Erst kürzlich stieß ich durch Zufall auf diese extrem praktische Erweiterung. Update-Notifier kümmert sich bei richtiger Einstellung selbstständig und unbemerkt um Aktualisierungen von Firefox und dessen Erweiterungen. Nur noch ein Neustart des Browsers muss noch selbst vorgenommen werden, was sowieso von ganz alleine geschehen sollte.
Natürlich kann man auch Hinweise und Abfragen für Aktualisierungen verlangen. Ist auch wieder eine Sache der Einstellung. Wobei ich die selbstständige Methode bevorzuge.
Aufgeräumte und schlanke Stylesheets dank Clean CSS
Einigen von euch mag der Begriff “CSS Tidy” bekannt sein. Die Rede ist von einer Software, die CSS-Dateien parst und nach Möglichkeit komprimiert. Dies geschieht unter anderem durch die Anwendung der Shorthand-Technik, der Kürzung von Farb- oder Schriftgewichtswerten oder das Entfernen von überflüssigen Semikolons oder Einrückungen.
Wenn man den Begriff “Tidy” ins deutsche Übersetzt, kommt aufgeräumt, rein bzw. sauber heraus. Genau dies kann CSS Tidy auch. Die Software kann z.B. einzeilige Stylesheets wieder zurück zu einem lesbaren Format bringen, oder umgekehrt.
All diese schönen Eigenschaften von CSS Tidy werden auch vom Web-Service Clean CSS übernommen. Clean CSS basiert auf CSS Tidy, was also eine sichere und extrem gute Komprimierung von Stylesheets verspricht.
Zur Benutzung gibt man entweder die URL der CSS-Datei an oder füllt den Inhalt der gewünschten CSS-Datei in ein Textfeld. Nun kann man Einstellungen vornehmen:
- In manchen Fällen sind oft weitere Arbeiten an einem Stylesheet von Nöten. Da bietet es sich z.B. an, die Entfernung von den letzten Semikolons einer Regel wegzulassen.
- Bei Bedarf einer hohen Komprimierung ist auch eine einzeilige Ausgabe der gesamten CSS-Datei möglich. Hierbei braucht man aber glücklicherweise nicht ein “Backup” behalten, um später noch ein lesbares Format für eine Verbesserung vorliegen zu haben, denn eine Rückwandlung in den typischen Formatierungsstil ist – wie schon erwähnt – möglich.
- Clean CSS bietet auch die Möglichkeit, die CSS-Datei von unbekannten oder fehlerhaften Fragmenten zu befreien. Darauf sollten jedoch Nutzer des Underscore-Hacks verzichten, da die Eigenschaften beginnend mit einem Unterstrich unberechtigt als invalid gelten.
- Auch sehr nützlich ist die alphabetische Sortierung von Eigenschaften. Einer Sortierung von Regeln ist aber dringlichst abzuraten, da sonst fehlerhafte Darstellung aufgrund der “umgeworfenen” Reihenfolge der Regeln entstehen könnten.
Die Zuverlässigkeit dieses Web-Services hat sich beim Einsatz bei einem Projekt der Agentur, in der ich arbeite sehr erwiesen. Ich konnte die zahlreichen CSS-Dateien, welche insgesamt eine Datenmenge von mehr als 100 Kilobyte beanspruchten, auf stolze 70 Kilobyte reduzieren.
Seltene/unbekannte Eigenschaften in CSS
White-Space
white-space bestimmt das Verhalten von Zeilenumbrüchen und Darstellung mehrerer aufeinander folgende Leerzeichen.
Zu den wichtigsten Werten gehören:
normal– Der Standardwert. Zeilen werden am Ende des Elements umgebrochen und mehrere aufeinander folgende Leerzeichen werden auf eines gekürzt.pre– Der gesamte Inhalt eines Elements mit dieser Eigenschaft wird so dargestellt, wie er im Quelltext vorgegeben wird. Dazu gehören Zeilenumbrüche und auch Leerzeichen.nowrap– Dieser Wert ist besonders bei Tabellen-Zellen nützlich. Er stellt den gesamten Inhalt eines Elements in einer Zeile dar. Somit kann ein vielleicht unschöner Umbruch in einer Tabellen-Zelle, oder auch woanders verhindert werden.
Content
Die Eigenschaft content fügt, wie man schon vermutet, Inhalte hinzu. Dies ist eigentlich nur bei den Pseudo-Selektoren @:before@ und @:after@ möglich, um Inhalte entweder vor oder hinter dem eigentlich echten Inhalt einzufügen. Der Einsatz kommt wahrscheinlich wegen der fehlenden Kompatibilität mit dem Internet Explorers selten vor. Schade eigentlich.
Es ist jedoch wichtig, dass man auf keinen Fall wichtige Inhalte mit CSS transportiert. Das ist immer noch Aufgabe von Auszeichnungssprachen.
Outline
Die Outline eines Elements ist selten sichtbar. Sie erscheint meines Wissens nach nur im @:active@ und @:focus@-Zustand, zumindest im Firefox. Die Rede ist von der gepunkteten grauen Linie um ein Element herum. Bei mir kommt Verwendung dieser Eigenschaft nur in Verbindung mit Phark’s Image Replacement Methode vor. Denn hier fällt die Outline besonders auf, da sie bis über das Browserfenster hinaus geht. Setzt man den Wert auf none, verschwindet sie.
So, das war mein erster Beitrag für Technikwürze. Mit großer Wahrscheinlichkeit und noch größerer Lust werden weitere Beiträge, vielleicht auch ein regelmäßiger Auftritt in der Sendung folgen. Danke fürs Zuhören und hoffentlich bis zum nächsten mal.
