Kategorie: CSS

CodeBurner von SitePoint

Das bislang schon fast unverzichtbare Werkzeug für Web-Entwickler Firebug bekommt zusätzliche Unterstützung:

CodeBurner ist ein Firefox Addon, das sich in Firebug integriert. Die Autoren des Plugins sind http://www.brothercake.com/, zur Verfügung gestellt wird das Tool jedoch von SitePoint. Dabei wurde schon eine Namensänderung vorgenommen. Vormals FireScope, heißt das Tool nun CodeBurner um eine Verwechslung mit der gleichnamigen Firma entgegen zu wirken.

Nach der Installation gibt es einen neuen Reiter „Reference“ innerhalb von Firebug. Dieser beinhaltet eine Suche über HTML Elemente, Attribute und CSS Eigenschaften. Das Ergebnis zeigt das jeweils gefundene Element, bzw. die gefundenen Elemente, inklusive einer kurzen Beschreibung, an und zeigt direkt, welche Browser dies wie unterstützen. Mit einem Klick auf „more“ erreicht man die ausführliche Referenz von Sitepoint.com.

Zudem klinkt sich CodeBurner in verschiedene Kontextmenüs von Firebug ein, so dass es auch in den verschiedenen Inspektoren verfügbar ist. Die Funktion „Show Code Examples“ rundet das Angebot von CodeBurner ab.

Für mich auf jeden Fall eine gute Hilfe und seit Heute eine meiner Standard Firefox Addons.

Teste dein Webdesign in verschiedenen Browsern

Das funktioniert jetzt ziemlich gut. Und zwar mit Browsershots.org. Das ganze ist zwar eher für den finalen Test gedacht, trotzdem bietet es eine Möglichkeit für ein immerwährendes Problem beim Entwickeln von Webseiten.

Das Tool erstellt von einer eingegebenen Webseite Screenshots, wie sie aktuell in den ausgewählten Browsern aussieht. Dabei werden eine große Auswahl von Browsern unter Linux, Windows und Mac Os unterstützt. Sogar verschiedene Auflösungen, Farbtiefen und sogar unterschiedliche JavaScript und Flash Versionen werden zur Auswahl angeboten.

Nachdem der Auftrag gestartet wurde, wird er in eine Queue verschoben. Unter einer festgelegten URL werden dann die Screenshots aufgelistet und zum Download angeboten. Diese sind für 30 Minuten verfügbar, können jedoch einfach neu angefordert werden.

Auf CSS basierene Navigationsmenüs

Wieder einmal vom Smashing Magazine kommt eine Liste von 53 auf CSS basierenden Navigationsmenüs. Da sind tatsächlich einige sehr schicke Sachen zu finden.

Allerdings dürfte die Liste eher vergänglich sein, hier werden nämlich nur Screenshots, bzw. Teilbereiche von Screenshots angezeigt, die dann mit der Seite verlinkt sind, auf der das Menü implementiert ist. Trotzdem einen Blick wert.

Prototype 1.5 – Was ist neu?

Mit dem release des Javascript-Frameworks Prototype in der Version 1.5 kam einiges neues, auch wirklich abgefahrenes und interessantes dazu. Bei XML.com findet man einen lesenswerten Artikel über die Neuerungen. Was ich persönlich befremdlich finde, ist das erst mit Version 1.5 eine offizielle Dokumentation erhältlich ist, und man dies doch tatsächlich als Feature bezeichnete. Für mich war das fehlen einer Doku eher ein Grund Prototype fast schon zu meiden.

Wirklich interessant und gleichzeitig sehr „Freaky“ finde ich die einfache Templating-Engine . Einfach mal durchlesen, wirken lassen und sich seine eigenen Gedanken machen. Ich hatte schon einige Anwendungsfälle, wobei ein Template in JS nützlich gewesen wäre.

Alles in allem holt Prototype mit V1.5 tierisch gegen jQuery auf. Aber was man benutzt, ist meiner Meinung nach eine „Glaubensfrage“ – Wobei Prototype sich auf das wesentliche beschränkt, und jQuery teilweise zuviel „Effekthascherei“ betreibt.

Canvas Fun (Updated)

Sascha hat es hier schon geschrieben. Ich will wissen wie ich es selbst anwenden kann. Dabei bin ich auf ein Tutorial im Mozilla Developer Center (natürlich absolut Web 2.0 konform BETA!) gestoßen. Jetzt muss ich noch Freizeit finden und das ganze mal ausprobieren.

Wer kennt weitere Tutorials oder Dokus?

Man, was ist nur aus der guten alten Zeit geworden, als ein Web-Browser noch HTML-Seiten anzeigen sollte 😉

UPDATE: Apple, Erfinder des Canvas-Tags, hat natürlich auch eine Seite dazu!