Technikwürze begrüßt seinen dritten Stammmoderator: Neben David Maciejewski und Nadja Müller modert nun auch Martin Labuschin für euch. Martin ist seit der ersten Stunde Hörer der Technikwürze und hat sich für euch einen interessanten Themenmix ausgewählt: “Update-Notifier für Firefox und Erweiterungen”, “Aufgeräumte und schlanke Stylesheets dank Clean CSS” und “Seltene/unbekannte Eigenschaften in CSS”. Nadja Müller bringt wieder heiße News, unter anderem Neuigkeiten vom IE 7, sowie wieder vielen Linktipps. David startet heute eine lose Serie über Webentwickler-Tools und stellt XAMP und MAMP vor.

Diese Folge jetzt anhören

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.

Diese Folge jetzt anhören

Tags: , , , , , , , , , , , ,

Dieser Beitrag wurde am Montag, 23. Oktober 2006 um 00:00 Uhr in der Kategorie Podcast veröffentlicht.
Du kannst einen Kommentar hinterlassen, oder einen Trackback von deiner Seite aus senden.

Kommentare

  • Avatarbild von /T /T
    am 23. Oktober 2006, 10:24 Uhr

    Richtig ist, dass es den IE7 erst ab XP SP2 gibt. Ob das aber für die Aussage “wenige Windows-Nutzer” reicht wage ich zu bezweifeln. Und wer XP in einer ungepatchten Version benutzt ist selbst ein Sicherheitsrisiko und sollte mal dringend die Software-Aktualisierung anwerfen.

    “zudem ist er nur in englischer Sprache verfübar” ist zurzeit auch richtig, aber: so what? Die deutsche Version kommt in den nächsten drei Wochen.

    “die Installation erfordert einen Neustart” – der Himmel wird uns auf den Kopf fallen. Windows muss man ja sonst nie neustarten :-)

    “hält Webstandards immer noch nicht ein” – ähm, kurze Gegenfrage: welcher Browser hält denn denn die relevanten Webstandards ein?

    “erste Lücke in der Sicherheit des Browsers” ist nicht korrekt – die Lücke ist nicht im Browser, sondern im Betriebssystem bzw. in Outlook Express und hat nix mit dem IE7 zu tun.

  • Avatarbild von Martin Martin
    am 23. Oktober 2006, 11:20 Uhr

    Mir ist gerade aufgefallen, dass Clean CSS aktuell leider nicht erreichbar ist. Ich hoffe, der Dienst ist bald wieder online…

  • Avatarbild von Rajko Rajko
    am 24. Oktober 2006, 08:56 Uhr

    CSS outline:
    wenn man dieses entfernt ist es harte Kost. Wie soll ich bei einer Navigation per Tastatur denn wissen, welchen Link ich gerade habe? Die gestrichelte Linie hat schon ihren Sinn und sollte niemals auf “none” gesetzt werden.

  • Avatarbild von Martin Martin
    am 24. Oktober 2006, 10:11 Uhr

    Erstmal liegst du völlg richtig. Man kann jedoch :focus und :active auch anders per CSS kennzeichnen, z.B. mit anderer Hintergrundfarbe oder so etwas in der Art. Und ich verwende es ja auch nur bei der Phark-Image Replacement Methode

  • Avatarbild von Björn Seibert Björn Seibert
    am 24. Oktober 2006, 21:52 Uhr

    Endlich mal gescheite Musik bei der TW :-) Das kann von mir aus so bleiben.

    Martin: War schon ganz gut. Generell gefällt mir die Themenvielfalt und die kurzeweilig vorgetragenen Inhalte richtig gut.

    Wie wärs eigentlich mal mit einem Themenspecial: “Websites der Hardcore und Blackmetal Bands unter der Standards-Lupe” :-)

  • Avatarbild von Martin Martin
    am 24. Oktober 2006, 22:27 Uhr

    Gute Idee, leider sieht es bei Band-Sites allgemein nie gut aus… Es kommt mir manchmal so vor, als wäre es immer dasselbe Template mit anderen Bildern und anderen Inhalten ;)

    Danke für dein Kommentar!

  • Avatarbild von Rajko Rajko
    am 27. Oktober 2006, 01:24 Uhr

    Ein schönes Thema wäre auch einmal XSLT, da man viele tolle Sachen damit machen kann. :)

    Zur Musik: Der Hardcore war vor 10 Jahren wesentlich besser. HC ist schon lange tot bzw. es hat ihn nie gegeben!

  • Avatarbild von Klaus Langner Klaus Langner
    am 28. Oktober 2006, 13:59 Uhr

    He, macht weiter so, ihr werdet von mal zu mal besser! Die Themen sind auch immer ansprechend!
    Klaus

  • Avatarbild von BMW Fan BMW Fan
    am 4. November 2006, 18:24 Uhr

    Na da können wir wohl auf die weiteren Shows. Diese Show hat mir gut gefallen, die Themen schön frisch.
    @Martin:
    Clean CSS funktioniert einwandfrei bei mir. Sollte bei dir nu nauch gehen.

  • Avatarbild von Arne Kriedemann Arne Kriedemann
    am 6. November 2006, 15:14 Uhr

    Hi Technikwuerze-Team,

    mal wieder schöne aktuelle und interessante Themen.
    Endlich kann ich auch mal Nadja verstehen (Lautstärke schön ausgepegelt!).
    Martin war entweder extrem aufgeregt, hat nicht direkt in das Mikro gesprochen, vom Blatt abgelesen oder alles drei auf einmal.
    Das wird sich bestimmt noch legen ;o)

  • Avatarbild von alex farkas alex farkas
    am 29. November 2006, 14:40 Uhr

    a:hover {
    outline: none;
    }

  • Avatarbild von BMW BMW
    am 16. April 2007, 15:55 Uhr

    sehr guter podcast. Danke.

  • Avatarbild von Fernabitur Fernabitur
    am 15. November 2007, 13:32 Uhr

    Muss mich BMW anschließen – Sehr guter Podcast. Danke, danke!

Und was hast du zum Thema zu sagen?

Fülle bitte alle mit *-gekennzeichneten Felder aus.


Du darfst Textile verwenden, um deinen Beitrag auszuzeichen.