Montag,
25. November 2013

Thinkin’ Tags - das browserbasierte Prototyping-Tool für CSS-Layouts - ist seit nunmehr 14 Monaten online. Seit heute morgen steht mit der Alpha-Version v0.5 ein weiteres umfangreiches Feature-Update bereit. Das erste große Update (v0.3) im Januar 2013 brachte umfangreiche Erweiterungen in der CSS3-Unterstützung. Mit dem zweiten Update (v0.4) im Mai diesen Jahres kam die lang ersehnte Unterstützung für Responsive Webdesign sowie eine grundlegend neu gestaltete Website. Die aktuelle Version 0.5 bringt die bisher größten Veränderungen mit sich.

Eine neue Benutzeroberfläche

Applikationen mit immer neuen Funktionen zu versehen, ist nicht weiter schwer. Die stetige Evolution der Oberfläche führt jedoch nicht selten zu Inkonsistenzen und schon von Beginn an war Thinkin’ Tags deutlich komplexer sein Vorgänger. Das sahen auch viele Nutzer so und so gestaltete sich die Einarbeitung in den ebenfalls neuen visuellen Arbeitsablauf nicht immer einfach. Im Verlauf des Sommers reiften die Gedanken hinsichtlich einer spürbaren Vereinfachung der Benutzeroberfläche. Im Kern bestanden folgende Kriterien an die neue Benutzeroberfläche:

  • eine einfachere Menüstruktur
  • kürzere Mauswege
  • mehr Raum für den Arbeitsbereich

Das Ergebnis der sich daraus ergebenen Mühen zeigt sich in den beiden folgenden Screenshots.

Das Dashboard bekam eine leichte optische Auffrischung, verbunden mit einer effektiveren Nutzung des zur Verfügung stehenden Platzes bei der Darstellung der Projektlisten sowohl auf relative kleinen Notebook-Displays als auch auf sehr großen Bildschirmen.

Die grundlegenden Änderungen hat die eigentliche Entwicklungsumgebung erfahren. Die Anzahl der Hauptmenüpunkte wurde von fünf auf drei reduziert, die nun “Projekt”, “Markup” und “Design” lauten. Dahinter verbergen sich nicht ganz unerwartet die Dialoge zur Projektorganisation (File Management), den Funktionen zur Erstellung und Bearbeitung des HTML-Markups und dem umfangreichen Gestaltungsbereich auf Basis von CSS, welcher die ehemaligen Menüpunkte “Screen Layout” und “Typographie” zusammenfasst. Der zweite entfallende Menüpunkt “Print Layout” entfällt. Bereits in den früheren Versionen diente dieser Menüpunkt lediglich dem Wechsel auf die Emulation des Medientyps “print” und demzufolge ist die Vorschau hierfür in die entsprechende Auswahlbox für das “Output Device” gewandert, über welches sich auch die Viewports diverser Mobilgäte emulieren lassen.

 

Die zweite wichtige Veränderung ist der Wegfall des Panels auf der linken Seite. Sämtliche Dialoge wurden in ein Panel am rechten Bildschirmrand verschoben. Hieraus entsteht ein gewaltiger Platzgewinn (knapp 400 Pixel) für den eigentlichen Arbeitsbereich. Während bisher mehr oder minder eine FullHD-Auflösung nötig war, um bei beidseitig geöffneten Panels ein Layout mit ca. 1024 Pixel Breite ohne horizontales Scrollen bearbeiten zu können, ist dies jetzt bereits bei einer Viewportbreite von ca. 1400 Pixeln möglich. Damit wird Thinkin’ Tags endlich sinnvoll auf Notebooks nutzbar.

Sämtliche Dialoge in der Sidebar (dem Panel am rechten Bildschirmrand) wurden ebenfalls grundlegend neu gestaltet, wobei wem Dialog “Stylesheet Management” (früher CSS Rules”) im Design-Menü die größte Aufmerksamkeit bei der Überarbeitung zu teil wurde, um die Übersichtlichkeit im Umgang mit vielen Stylesheets, Media Blöcken und Selektoren zu verbessern.

Und um den Anwender nicht schon bei kleinen Hürden aus dem Konzept zu reißen, bietet die neue Benutzeroberfläche ein integriertes Hilfesystem. Sowohl für die Benutzeroberfläche an sich als auch für die verschiedenen Dialoge in der Sidebar können kurze textbasierte Tutorials direkt aus der Applikation heraus aufgerufen werden.

Kürzere Reaktionszeiten - bessere Performance

Die Verbesserungen unter der Haube stehen den sichtbaren keinesfalls nach. In Vorbereitung auf zukünftiger Features wurde die interne CSS-Engine stark überarbeitet, sowie das gesamte Aktualisierungsverhalten der Applikation bei HTML- und CSS-Änderungen im Projekt. In der Folge reagiert die Applikation nun in fast allen Situationen flüssig und ohne spürbare Verzögerungen auf Nutzereingaben. Diese Performanceverbesserungen (vieles läuft annähernd doppelt so schnell wie zuvor) sind insbesondere auf nicht mehr ganz taufrischen Notebooks und Desktopmaschinen deutlich spürbar.

Bei diesem Punkt gesellen sich die weiterhin spürbaren Verbesserungen der Browser in Sachen JavaScript-Performance hinzu (wobei Google Chrome unangefochten an der Spitze steht) und in der Summe auf halbwegs aktueller Hardware ein nahezu weitgehend flüssiges Arbeiten ermöglicht, wie man es vom Desktop her gewohnt ist.

Benutzerfreundlichkeit

Auch diesem Bereich hat sich etwas getan, wobei ich hier maßgeblich auf das Feedback der Anwender gebaut habe, um den Einstieg wie auch den Arbeitsalltag zu erleichtern. So wird nach dem Öffnen eines Projekts nun die Datei “index.html” direkt geöffnet. Sollte es im Projekt keine Datei mit diesem Namen geben, wird als Fallback die erste im Projekt enthaltene HTML-Datei geladen und die Applikation wechselt in den Darstellungsmodus “structure”. Für Einsteiger sinkt die Hürde, sich mit der komplexen Benutzeroberfläche zunächst vertraut machen zu müssen, nur um eine Datei zu öffnen und die Applikation spielerisch entdecken zu können. Der Wechsel in den “structure” Modus stellt sicher, dass auch die Drag & Drop Funktionen zum Erstellen von Elementen und zur DOM Manipulation in vollem Umfang genutzt werden können.

Das Editieren des HTML Quelltextes ist zwar noch immer über den expliziten Klick auf das Stift-Symbol des aktiven Elements möglich, aber fortan reicht auch ein einfacher Doppelklick auf ein beliebiges HTML Element im Arbeitsbereich oder im DOM-Baum, um den HTML-Editor zu aktivieren. Dieser wiederum unterstützt neuerdings Emmet, was das Schreiben von HTML enorm beschleunigen kann. Mehr dazu später.

Das Anlegen neuer CSS-Selektoren direkt im “CSS Selectors” Tabs des “Stylesheet Management” Dialogs ist ebenfalls deutlich komfortabler geworden. Der Anwender erhält beim Schreiben des Selektors ein unmittelbares Feedback, ob der Selektor valide ist, informiert über Doppeldefinitionen und falls ein HTML aktiviert ist, informiert die Applikation auch unmittelbar darüber, ob der neue Selektor das aktive Element treffen wird. Derartige Hilfe ist weder in Desktop-IDEs ala Dreamweaver zu erwarten, noch findet man sie in den Developer-Tools der verschiedenen Browser.

Weitere Feature-Highlights

Neben der neuen Benutzeroberfläche, gibt es zahlreiche weitere interessante neue Features und Freiheiten in Thinkin’ Tags zu genießen, die ich nachfolgend kurz umreißen möchte:

Bequemes Editieren von HTML und CSS

Ich nutze CodeMirror zwar intern schon seit längerer für die Quelltextvorschau, jedoch erst in v0.5 löst er den für HTML und CSS nur schlecht zu gebrauchenden Texteditor Markitup vollständig ab. Für das Editieren von HTML Quelltexten bedeutet dies: Syntax Highlighting und Live Code Linting (das automatische Überprüfen des Quelltextes auf Syntaxfehler schon während der Eingabe). Hinzu kommt die Unterstützung von Emmet (ehemals ZenCoding). Mit Emmet lassen sich komplexe Markupstrukturen auf Basis einer an CSS-Selektoren angelehnten Syntax mit sehr geringem Tippaufwand schreiben und mit Druck auf die Tabulator-Taste zu validem HTML umformen.

Und auch im CSS-Bereich zieht mehr Bequemlichkeit ein. Zwar ist es auch weiterhin nicht möglich, komplette Stylesheets zu editieren, dafür jedoch zumindest einzelne Medienblöcke (z.b. @media screen { ... magic css ... }). Die Übernahme umfangreicher bestehender Stylesheets und CSS-Codeschnipsel in Thinkin’ Tags (wie auch die Übernahme der CSS-Codeschnipsel aus der YAML-Doku) ist fortan sehr einfach möglich. Und auch hier gibt selbstverständlich Syntax-Highlighting (das Theme heisst “Monokai”) und eine Syntax-Kontrolle in Echtzeit (Live CSS Linting). Die Syntax-Kontrolle ist für die Öffnung der Applikation hin zur Editiermöglichkeit im Texteditor eminent wichtig.

Mehr Stylesheets – Mehr Freiheit – Mehr Prototyping

Ab sofort können innerhalb der Applikation (konkret: im “Project Browser” Dialog) Stylesheets nach Belieben neu angelegt, umbenannt, dupliziert und gelöscht werden. Weiter kann für jede einzelne HTML-Datei im “Stylesheet Management” Dialog festgelegt werden, welche Stylesheets in die jeweilige Seite eingebunden werden und in welcher Reihenfolge.

Damit stehen die Zeichen voll auf Rapid Prototyping: Ob zwei unterschiedliche Farbschemas eines Layouts, zehn verschiedene Variationen einer Navigation oder sogar einem vollständig modularen Prototypen, bei welchem die einzelnen Layoutbausteine in separaten HTML-Dateien angelegt und als Einzelmodule gestaltet werden – all dies ist fortan ohne Hürden in Thinkin’ Tags möglich.

Erweiterter Umgang mit Grafiken

Bisher ist es für den Anwender in Thinkin’ Tags nicht möglich, eigene Grafiken auf den Server hochzuladen und dem Projekt zuzuordnen. Dennoch wurde der Umgang mit Grafiken an zwei Stellen sinnvoll erweitert. Zum einen stehen ab sofort vier hochauflösende Dummygrafiken in drei verschiedenen Proportionen (Verhältnis Höhe/Breite), sowie ein Dummy-Avatar als Drop-Down-Elemente bereit. Diese Grafiken lassen sich bequem über die width und height Attribute des IMG-Elements über die Benutzeroberfläche modifizieren und sind auf diese Weise sehr hilfreich beim Prototyping.

Die zweite Erweiterung betrifft die Implementation von 300 Hintergrundgrafiken aus dem Projekt subtlepatterns.com. Diese Grafiken stehen unter Creative Commons Lizenz für nicht-kommerzielle und kommerzielle Projekte zur Verfügung. Die Autoren verlangen lediglich einen Quellennachweis im Quelltext (z.B. in Form eines Kommentars im Stylesheet). Innerhalb von Thinkin’ Tags stehen diese Grafiken im Dialog CSS Backgrounds” bereit, der weiterhin auch eine recht umfangreiche Sammlung vordefinierter Farbverläufe (CSS3-Gradients) bereithält, die ebenfalls per Klick in das eigene Projekt übernommen und anschließend an die eigenen Bedürfnisse angepasst werden können.

Nutzeraccount wird Pflicht

Bevor hier zum Abschluss das vollständige Changelog (in Englisch, wie die gesamte Applikation) folgt, möchte ich noch auf eine weitere Änderung hinweisen. Die Nutzung von Thinkin’ Tags ist ab sofort nur noch mit einen Benutzeraccount möglich. Eines der wichtigsten Grundsätze bei der Webentwicklung ist das Testen des Layouts in verschiedenen Browsern. Und dieser Grundsatz gilt nicht weniger beim Erstellen von Prototypen, auch wenn es hierbei weniger um die Kompatibilität zu alten IEs als vielmehr um die Kontrolle der Darstellung moderner CSS-Techniken (z.B. Flexbox) in verschiedenen Browsern geht. Dafür und für zahlreiche Funktionen, die Thinkin’ Tags zukünftig erweitern sollen, ist es wichtig, dass die Projektdaten in jedem beliebigen Browser zur Verfügung stehen.

Die Anmeldung ist auf der Website seit Mai 2013 über ein Invite-System möglich. Für das Anlegen eines Accounts ist lediglich der eigene Name und eine verifizierte E-Mail-Adresse nötig. Bereits bestehende lokal im Browser gesicherte Projekte werden nach dem erfolgreichen Einrichten eines Accounts durch einmaliges Öffnen und Speichern des Projekts automatisch auf den Server übertragen werden.

Das vollständige Changelog

Website / Account
  • The public access to the builder application has been removed. Users now need to register with their name and email address for an account to use Thinkin’ Tags.
  • After successful login users will be redirected directly to the builder application
User Interface - Redesign
  • Completely redesigned the UI for the builder application. Its now cleaner and it requires significantly less space.
  • Simplyfied main menu: “Screen Layout” and “Typography” menus are now combined under menu “Styles”. Former “Print Layout” menu was removed. The print preview is now available from all menus via “Output Device” selector in the main pane of the application.
  • All feature dialogs are now located in a single right-aligned sidebar. This saves much space for the workbench and greatly improves the user experience on smaller desktop resolutions.
  • Improved readability of overlay messages (horizontal & vertically centered, more contrast, larger font size)
  • UI now looks great on retina displays. Almost all PNG icons were replaced by vector icons.
Performance Improvements
  • The user interface is now much faster an responsive. Even on older / slower computers, the application immediately responds on any user action.
  • The CSS engine got several performance improvements that speeds up handling of stylesheets and UI updates (CSS Inspector & dialogs in “Styles” menu) noticably.
Workflow Improvements
  • Implemented an in-app help-system for the builder UI and quick guides for all feature dialogs
  • When opening a project, the application automatically tries to load “index.html” or as fallback the first HTML file availabe in the project.
  • The viewmode “structure” is now the default mode when opening a file.
  • Added dynamic filters to all file-related dialogs
Workflow: Workbench & DOM Inspector
  • Double-click on any HTML element now opens the HTML text editor and shows the markup of the selected element.
Project Browser Dialog
  • Implemented full-featured file management for stylesheets (create / rename / clone / delet).
  • Create new stylesheets, based on templates provided by the CSS framework
  • Implemented simple file management for images. Unused images can be deleted from project
YAML Module Settings Dialog
  • combined former “YAML Layout Properties” and “YAML Column Properties” dialogs
  • Dialog now shows target stylesheet and target selector that are used by the application to write CSS settings
Element Browser Dialog
  • Added three universal image placeholders (ratios 1:1, 4:3, 16:9) and an avatar placeholder. All placeholders are available in high resolutions and can be used for prototyping by modifing image attributes “width” and “height”.
  • The full element (icon + description) is now draggable, not only the icon itself
  • Added a set of default configurations for YAMLs grid module
  • Creating a YAML fullpage-module by drag & drop doesn’t require an ID anymore
  • Creating a YAML column-module by drag & drop doesn’t require an ID anymore
Stylesheet Management Dialog (former CSS-Rules Dialog)
  • Reimplemented the creation of new selectors. Selectors now can be defined as multi-line selectors in a much simpler dialog
  • CSS content of a media blocks can now be edited in a text editor
  • Stylesheets can be deactivated temprarily from the “Stylesheet Configuration” section
  • The user now can define a default stylesheet in the “Stylesheet Configuration” section for every HTML file, that is used by the application as target for automatic selector-creation and to write CSS settings (YAML layout modules).
New internal HTML/CSS text editor
  • supports syntax highlighting
  • supports live code linting (HTML and CSS)
  • supports Emmet (ZenCoding) in HTML mode
Font Management Dialog
  • The application now provides a better preview for installed webfonts and system fonts
CSS Backgrounds Dialog
  • the “CSS3 Gradients” section provides a wide range of predefined CSS3 gradient definitions (semi-transparent grayscale and  fully colored)
  • the “Background Patterns” section provides 300 patterns from  http://subtlepatterns.com

Important Bug Fixes

  • Column module: Application now resolves the placeholder in .ie-clearing container correctly
  • Google Font API: Fixed a rare bug where Thinkin’ Tags generated bad formatted font-urls
  • Fixed wrong indention for first-child elements in HTML generator
  • Fixed positioning of modal dialogs

 


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.