Thinkin’ Tags - Visual HTML/CSS Editor

Thinkin’ Tags ist ein visuelle Editor zur Erstellung von anpassungsfähiger (responsiver) Website Prototypen bis hin zu vollständigen CSS Layouts. Entstanden ist das Projekt aus dem Wunsch heraus, im YAML Builder mehr Gestaltungsfreiheit zu haben. Herausgekommen ist ein völlig neuer Ansatz, CSS Layouts vollständig im Browser zu entwerfen. Dieser Ansatz basiert auf dem Gedanken, dass ein visueller Workflow nur dann funktionieren kann, wenn die Applikation den Anwender zurückhaltend unterstützt. Diese Unterstützung besteht darin, dass die Layoutentwicklung auf Basis eines CSS Frameworks erfolgt und die Applikation die Funktionalität dieses CSS Frameworks kennt. Das führt dazu, dass es einerseits möglich ist, dem Anwender komplexe Layoutelemente in die Hand zu geben, um seinen Arbeitsfortschritt zu beschleunigen und gleichzeitig dafür Sorge zu tragen, dass unbedacht gewählte CSS-Eigenschaften die Funktionalität des Frameworks nicht unwissentlich behindern. Diese beiden Aspekte fehlten bisher sämtlichen visuellen Gestaltungsansätzen, weshalb das Klicken und Schieben mit einem enormen Kontrollverlust verbunden war. Thinkin’ Tags unterstützt momentan nur zwei CSS-Frameworks. Dies ist aktuell YAML 4 und Blueprint CSS.

Informationen

Projekt Homepage: http://www.thinkintags.com
Aktuelle Version: Public Alpha Release


CSS Framework YAML

“Yet Another Multicolumn Layout” (kurz YAML) ist ein CSS Framework zur Erstellung flexibler, zugänglicher und adaptiver (responsive) Layouts. Dabei stehen ein Höchstmaß an Flexibilität für den Webdesigner und Zugänglichkeit für die Nutzer im Vordergrund.

YAML wurde im Oktober 2005 in der Version 1.0 veröffentlicht und wird seither kontinuierlich weiterentwickelt. YAML hat sich unter Praxisbedingungen im Agenturalltag bestens bewehrt und wird von einer großen Community, sowie zahlreichen Drittentwicklern durch die Bereitstellung von anwendungsbereiten CMS-Integrationen unterstützt.

Bei der Entwicklung des Frameworks lag der Focus einer größtmöglichen Flexibilität Gestaltungsfreiheit für den Nutzer bei der Erstellung flexibler, barrierearmer Webseiten. Das Framework ermöglicht die Erstellung Raster- oder Spalten-basierter Seitenlayouts, unterstützt dabei den Seitenersteller durch zahlreiche präventive Maßnahmen zur Vermeidung von Browser-Bugs und stellt zahlreiche Hilfsmittel (Formularbaukasten, Typographie, Navigationsbausteine) zur Verfügung. Der ganzheitliche Charakter des Frameworks, sowie die umfangreiche zweisprachige Dokumentation ermöglichen nach kurzer Einarbeitungsphase die Anwendung des Frameworks für fast jede Layoutidee.

Das Framework wurde unter der Creative Commons Attribution 2.0 Lizenz (CC-BY 2.0) veröffentlicht und kann unter Berücksichtigung der Lizenzbedingungen sowohl im privaten, als auch im kommerziellen Bereich kostenfrei verwendet werden. Alternativ stehen für zwei weitere kommerzielle Lizenzmodelle zur Verfügung, die eine Nutzung ohne Rückverlinkung ermöglichen. Nähere Angaben hierzu gibt’s auf der YAML-Website.

Informationen

Projekt Homepage: http://www.yaml.de
Aktuelle Version: 4.0
Veröffentlicht unter Creative Commons Attribution 2.0 Lizenz (Details)


YAML Builder

Screenshot der Webseite Der YAML Builder ist ein Online-Tool zur visuellen Erstellung YAML-basierter CSS-Layouts. Der YAML Builder stellt alle Grundfunktionen des YAML-Frameworks bereit und erlaubt eine sehr einfache und intuitive Erstellung des Layouts mit Drag & Drop-Elementen. Jede Änderung wirkt sich dabei unmittelbar auf die Live-Vorschau aus. Ist das Layout fertig, generiert der Builder automatisch den zugehörigen (X)HTML-Markup, sowie die erforderlichen Stylesheets, die speziell auf die Projektvorlage des YAML-Frameworks abgestimmt sind.

Die erste Version des YAML Builders wurde im August 2007 als Preview in der Version 0.3 veröffentlicht, und sollte die grundsätzliche Machbarkeit eines solchen Entwurfskonzepts in der Umsetzung als JavaScript-Tool bestätigen. Im Februar 2008 folgte die Version 1.0 mit stark verbesserter Code-Ausgabe und einer Vielzahl neuer Funktionen.

Informationen

Projekt Homepage: http://builder.yaml.de
Aktuelle Version: V1.2, basierend auf YAML 3.1


YAML Debug

YAML Debug Application Screenshot YAML Debug ist ein Werkzeug zur schnellen und unkomplizierten Markup Analsyse hinsichtlich Code Qualität, Semantik und zum Auffinden typischer Fehler. Es basiert auf jQuery und kann als Bookmarklet grundsätzlich auf jeder Webseite hinzugeladen werden, ohne deren Funktionalität negativ zu beeinflussen.

Die Funktionalität umfasst Informationen über den Rendering-Mode, die Anzahl eingebundener externer Stylesheets, Scripts und Bilder. Per Klick können veraltete Elemente oder auch Elemente mit Inline-Styles hervorgehoben werden. Ebenso ist es möglich, sich auf einen Klick einen Überblick über die Layoutstruktur (DIV-Verschachtelung) oder die semantische Auszeichnung der Inhalte direkt im Layout zu verschaffen. WAI-ARIA roles, states und properties können hervorgehoben werden, Relationen z.B. über aria-labelledby macht das Tool durch das Hovern mit der Maus über die jeweilige Eigenschaft sichtbar. Schließlich gibt YAML Debug auch Auskunft über alle eingebundenen Stylesheets. Alle externen Stylesheets können zudem deaktiviert, angezeigt oder direk an den Validierungsdienst des W3C gesandt werden.

Informationen

Projekt Homepage: http://debug.yaml.de
Aktuelle Version: V 0.9 beta, Öffentlicher Betatest ist am 16.2.2009 gestartet.


CSSDOC - Regelwerk für CSS-Kommentare

CSSDOC ist ein Regelwerk zur Kommentierung von Cascading Style Sheets (CSS), welches Anwendern beim schreiben, strukturieren und verwalten von CSS-Dateien helfen soll und zugleich die Zusammenarbeit in Teams durch eine einheitliche Sprache fördert. Es ist eine Adaption des bekannten und beliebten JavaDoc / DocBock Schreibweise zur Kommentierung von Quellcode. Einige Unterschiede zu diesen Regelwerken ergeben sich aus der Tatsache, dass es sich bei CSS nicht um eine Programmiersprache handelt, deren Quellcode zur Ausführung kompiliert wird.

Informationen

Projekt Homepage: http://cssdoc.net
Mailingliste: http://groups.google.com/group/cssdoc
Projektstatus: Second Public Draft is available