Project StyleKit - Realtime Cross-Browser Styling

StyleKit - Realtime Cross-Browser Styling

MultiMediaArt & MultiMediaTechnology, 2010

StyleKit ist eine Webapplikation die es ermöglicht beliebige Webseiten zu laden, in Echtzeit deren Aussehen zu verändern und in allen Browsern zu testen. Das Projekt hilf dabei Webdesignern und Entwicklern auf effiziente Weise ihre neuesten Produkte oder existierenden Webseiten zu stylen, alternative Layouts auszuprobieren und diese dann in die Live Seiten einzupflegen.

Die Idee entstand während der Theme-Entwicklung meines eigenen Weblogs in Wordpress die mich kostbare Nerven und Zeit gekostet hat. Mindestens die Hälfte dieser Zeit musste ich Programme wechseln und warten bis die Browser die Seite neu geladen hatten und die Änderungen anzeigten. Natürlich arbeitete ich wo es ging mit Firebug, nur leider ist es mühsam die Veränderungen die man damit gemacht hat übersichtlich nachzuverfolgen. Zusätzlich ist es umständlich in anderen Browsern als Firefox denselben Code zu testen. Selbst mit Firebug-Lite bleibt einem nicht der Copy-Paste-Refresh Workflow erspart.

Die Lösung für dieses Problem lag auf der Hand: Man musste direkt im Browser die Veränderungen durchführen können und am besten das Ergebnis in allen anderen Browsern sehen ohne den Editor zu verlassen. Eigentlich logisch: Die beste Vorschau bieten die Browser selbst.

Die Umsetzung erfolgte mit dem Google Web Toolkit (GWT) und mit Filebasierten Projekten gemanaged mit PHP. Der große Vorteil von GWT: Man programmiert typsicher und übersichtlich in Java und kompiliert zum Schluss zu JavaScript, Html und Css. Da keine Datenbank notwendig ist um StyleKit auf dem eigenen Server zu 'installieren' reicht es die Files per Drag and Drop in einen Ordner unter htdocs zu ziehen und das Tool kann auch lokal verwendet werden.

Appendices

Creators