Webdesign
Montag15. April 2013

Der erste richtig große Meilenstein seit dem Release der Alpha von Thinkin’ Tags ist geschafft. In den vergangenen Monaten habe ich von den ersten wenigen Usern, die den Editor bereits voll nutzen können, wichtigesFeedback erhalten und damit zahlreiche Kinderkrankheiten beseitigen können.

Seit heute morgen ist nun die nächste Stufe gezündet in der über ein Invite-System neue Testpiloten an Bord kommen können. Zunächst starte ich mit 500 freien Plätzen, wofür man sich über das “Request Invite” Formular auf der Startseite von Thinkin’ Tags bewerben kann. Im nächsten Schritt werden bestehende Nutzer selbst neue User einladen können, bevor es in der Beta-Phase die Anmeldung für alle Interessierten Nutzer zugänglich sein wird.

Bereits im Januar gab es einen ersten großen Schub neuer Funktionen und auch auch heute kann ich wieder einige Neuerungen verkünden. Denn ab sofort können die wichtigsten Funktionen innerhalb des Editors auch per Tastatur gesteuert werden.

Auswahl des aktiven Arbeitsbereiches
Über CTRL+ALT+1 bis 5 können die Arbeitsbereiche File, Markup, Screen, Typography und Print ausgewählt werden.
Wahl des Darstellungsmodus
Über CTRL+ALT+6 bis 9 kann zwischen den Darstellungsmodi Live, Structured, Linearized und Source umgeschaltet werden. Über CTRL+ALT+0 kann die Hervorhebung der semantischen Informationen ein- und ausgeschaltet werden.
DOM/CSS Inspector
Über CTRL+ALT+F12 kann der DOM/CSS Inspector aktiviert und deaktiviert werden.
Navigation im DOM
Sobald in der Arbeitsoberfläche ein Element selektiert wurde, kann per Tastatur durch das DOM navigiert werden. Über CTRL+Cursor Up und CTRL+Cursor Down kann das nächste bzw. das vorhergehende Geschwister-Element des aktiven Elements selektiert werden. Über ALT+Cursor Up erreicht man das Elternelement des aktiven Elementes und durch ALT+Cursor Down kann das erste Kind-Element des aktiven Elementes ausgewählt werden.

Das sind die verfügbaren Optionen für den Anfang. Innerhalb einer Webapplikation ist die Auswahl sinnvoller Tastaturkürzel nicht gerade einfach, weil das Betriebssystem, der Browser und ggf. im Browser installierte Erweiterungen bereits zahlreiche Tastaturkombination für sich beanspruchen und aus meiner Sicht eine Webapplikation diese übergeordneten Funktionen nicht blockieren sollte. Ich bin daher sehr gespannt auf Euer Feedback hierzu, denn ich möchte die Möglichkeiten der Tastatursteuerung möglichst eingängig gestalten und natürlich weiter ausbauen.

Mit dem heutigen Release wurde auch die Dokumentation des Projektes deutlich erweitert. Bereits vor einigen Wochen hatte ich ja über den Youtube-Kanal von Thinkin’ Tags berichtet. Nun stehen diese Videos auch direkt im Docs-Bereich in Deutsch und Englisch zur Verfügung.

Soweit der aktuelle Stand. Wie immer freue ich mich auf zahlreiches Feedback und nun natürlich auch auf viele neue Testpiloten.


Mittwoch23. Januar 2013

Es ist soweit, das erste Feature-Update für Thinkin’ Tags ist fertig und seit heute Nacht auf dem Server. Die auffallendste Änderung dürfte sicherlich das überarbeitete Dashboard sein. Es ist übersichtlicher gestaltet und die zwei Funktionen für das Anlegen neuer Projekte wurden zusammengelegt. Mit diesem Feature-Update ist nun auch die von Beginn an geplante Unterstützung das schon etwas betagte, aber dennoch vielfach genutzte CSS-Framework 960.gs mit an Bord. Anwender können nun also zwischen YAML, 960.gs und Blueprint CSS wählen.

Zusammen mit 960.gs wurde auch die Unterstützung für Blueprint CSS deutlich verbessert, die zuvor nur “experimentellen Charakter” hatte. Vergleichbar zu YAML kennt Thinkin’ Tags nun die Grid-Bausteine beider CSS-Frameworks und bietet nun eine Reihe von Hilfsfunktionen zur Erstellung von Grid-Layouts an. So können die CSS-Klassen zur Weiterung einer Grid-Spalte “append_n” und “prepend_n” (bzw. “suffix-n” und “präfix-n” bei 960.gs). sowie die Klassen “pull-n” und “push-n” als Element-Eigenschaften eingestellt werden Zudem stehen für beide Frameworks eine Reihe von vorkonfigurierten Gridsets als Drag & Drop Elemente bereit. Beides führt zu spürbar zu schnelleren Ergebnissen. Und schließlich habe ich ein neues Template mit dem Namen “Company Profile” hinzugefügt, welches für beide Frameworks zur Verfügung steht. Das Template beinhaltet eine Startseite und eine Inhaltsseite als einfacher Zweispalter. Ach ja, eine kleiner Hinweis: Auch wenn die beiden Frameworks schon ein paar Jahre auf dem Buckel haben und nicht mit dem Buzzword “responsive” glänzen können. Sie gegebenenfalls dahingehend zu erweitern, ist eine Frage weniger Zeilen CSS.

Die zweite große Neuerung betrifft den CSS3 Support von Thinkin’ Tags. Im CSS-Inspektor gab es ja bereits eine Auto-Vervollständigung für CSS-Eigenschaften, allerdings nur auf Basis von CSS 2. Ab sofort werden die CSS-Eigenschaften zahlreicher CSS3 Module unterstützt. Und als Sahnehäubchen erstellt Thinkin’ Tags selbstständig und nach Bedarf die notwendigen geprefixten Varianten (-webkit-, -moz-, -ms-, -o- ). Als Anwender ist es somit ausreichend, die Eigenschaften ohne Vendor-Prefix einzugeben. Alles weitere erledigt Thinkin’ Tags. Natürlich ist es gleichermaßen möglich, einzelne mit einem Prefix versehene Eigenschaften zu definieren (z.B. -webkit-appearance: textfield; zur stressfreien Gestaltung von Suchfeldern).

Folgende CSS3 Module werden aktuell unterstützt:

  • CSS Basic Box model
  • CSS Color Module Level 3
  • CSS Backgrounds and Borders Module Level 3
  • CSS Marquee Module Level 3
  • CSS Multi-column Layout Module
  • CSS Basic User Interface Module Level 3 (CSS3 UI)
  • CSS Transforms
  • CSS Transitions
  • CSS Flexible Box Layout Module
  • CSS Fonts Module Level 3
  • CSS Text Module Level 3
  • CSS Animations

Bitte bedenkt aber, dass nur weil Thinkin’ Tags mit den CSS-Eigenschaften dieser Module umzugehen weiß, die Unterstützung seitens der Browser nicht automatisch gegeben ist. Aber es macht aus Thinkin’ Tags auch eine wunderbare kleine Spielwiese zum Testen, z.B. der verschiedenen neuen Layouttechniken von CSS3 (Flexbox und Grids Module).

Und wenn ich schon über mordernes CSS schreibe, dann muss ich natürlich auch das neue Box-Modell ansprechen (box-sizing: border-box;), welches im Internet Explorer seit Version 8, sowie in allen modernen Browsern seit längerer Zeit verfügbar ist. Thinkin’ Tags unterstützt dieses Box-Modell ab sofort, sodass auch in den komplexen Layoutmodi “structural” und “linearized” eine fehlerfreie Darstellung gewährleistet ist.

Abschließen möchte ich die Vorstellung der neuen Features mit einer Ergänzung zum Dashboard. Darin besteht nun endlich die Möglichkeit, die Namen und Beschreibungstexte gespeicherter Projekte zu editieren. Nachfolgend gibt’s eine vollständige Liste aller Neuerungen und Bugfixes. Den englischsprachigen Releasebeitrag gibt’s wie immer auf Google+.

Neue Funktionen
  • Auto-Vervollständigung für zahlreiche CSS3 Eigenschaften im CSS-Inspector
  • Automatische Erstellung der Schreibvarianten mit Vendor-Prefixes für CSS3 Eigenschaften im CSS-Inspector
  • Unterstützung für das alternative CSS3 Box-Modell “box-sizing: border-box” hinzugefügt.
  • Projektnamen und Beschreibungen bestehender Projekte können nun im Dashboard editiert werden
  • Unterstützung für das CSS Framework 960.gs hinzugefügt
  • CSS-Klassen prepend-n/append-n/push-n/pull-n für Blueprint CSS über Benutzeroberfläche steuerbar
  • CSS-Klassen prefix-n/suffix-n/push-n/pull-n für 960.gs über Benutzeroberfläche steuerbar
  • Projektvorlage “Company Profile” für 960.gs hinzugefügt
  • Projektvorlage “Company Profile” für Blueprint hinzugefügt
  • Im “Element Browser” stehen nun zahlreiche HTML5-Elemente (header, footer, ect.) per Drag & Drop zur Verfügung
Änderungen/Verbessungen bestehender Funktionen
  • Das “Dashboard” und der “Element Browser” haben eine neue, bessere Benutzeroberfläche erhalten
  • Über den “Element Browser” stehen nun verschiedene vorkonfigurierte Gridsets für Blueprint CSS and 960.gs als Drag & Drop Bausteine bereit
  • Die Trefferliste für die Auto-Vervollständigung für CSS-Eigenschaften im CSS-Inspector start nun in allen Browsern mit dem ersten Buchstaben.
  • YAML4 Grids sind nun im “structual"und “linearized” Darstellungsmodus per Drag & Drop “sortierbar”
  • Wechsel des Dienstes für Dummygrafiken von Flickholdr.com (momentan offline) zu Lorempixel.com
  • Projektvorlage “My Simple Website” (YAML) leicht überarbeitet.
  • Die allgemeinen Projektinformationen (Name, Beschreibung, Framework) befinden sich nun im File-Menü im rechten Panel.
  • Alle YAML-basierten Projektvorlagen wurden auf YAML 4.0.2 aktualsiert.
Bug Fixes
  • Element Attributes: Bei der Eingabe vonKlassennamen werden nun Punkte automatisch entfernt.
  • Element Attributes: In der Brotkrümelnavigation wurden vor Klassennamen z.T. mehrere Punkte dargestellt.
  • Workbench: Mehrere Rendering-Fehler in den Darstellungsmodi “structual” und “linearized” wurden behoben.
  • Workbench: Die Identifikation von Layoutbausteinen (Gridbausteine, HTML5 Elemente, usw.) erfolgt nun automatisch auch nach Markupänderungen
  • Workbench: Deaktierte Stylesheets wurden beim Wechsel des Darstellungsmodus versehentlich wieder aktiviert. Das wurde korrigiert.
  • Workbench: Das Sortieren von Elementen per Drag & Drop im “structural” und “linearized” Modus sollte nun wieder problemlos funktionieren.
  • Projekt Manager: Mehrere kleine Bugs in der Projektverwaltung/-speicherung korrigiert
  • UI: Das Kontext-Menü der Elmente im “structural” Darstellungsmodus wurde unter bestimmten Umständen nicht korrekt angezeigt
  • Allgmein: zahlreiche kleine und größere interne Korrekturen

 


Freitag14. Dezember 2012

Je länger es dauert, um so besser wirds. Sagt man wohl und im Falle der Videomitschnitte vom Wordcamp 2012 an der Beuth-Hochschule in Berlin, ist dem dann auch so. Die Jungs und Mädels waren nämlich so freundlich, meinen Vortrag “Browser-based Rapid Prototyping - or - I love writing code but I hate counting brackets” in voller Länge mitzuschneiden und das ist ihnen wirklich prima gelungen, denn sowohl mich als auch der Leinwandinhalt wurden abgefilmt.

Und so freue ich mich, dass ich Euch nun auf diesem Wege auch eine deutschsprachige Einführung in die zum Sinn und Zweck von Thinkin’ Tags und seiner Funktionsweise zur Verfügung stellen kann. Im ersten Drittel des Vortrags gehe ich auf die Motivation ein, das Thema WYSIWYG wieder aus der Versenkung zu holen und dabei über einige Gründe für das bisherige Scheitern dieses Ansatzes aufzuzeigen. Im Anschluss folgen ca. 25 Minuten, in denen ich Thinkin’ Tags in einer Live-Demo präsentiere. Dabei stelle ich anhand verschiedener Beispiellayouts die wichtigesten Funktionen der Applikation vor. Viel Spaß beim Anschauen uns ausprobieren.

Natürlich wurden noch weitere Vorträge gefilmt. Die vollständige Liste der verfügbaren Videos findet ihr hier.


Donnerstag18. Oktober 2012

Die Überschriften meiner Blogbeiträge werden offensichtlich vorhersehbar. Aber mal ohne Witz: In diesen beiden Themengebieten zeichnet eines der “next big things” in der Frontendentwicklung ab. Die heute zwingend erforderliche Flexibilität von CSS-Layouts (Stichwort: Responsive Design) bedingt eine möglichst enge und frühzeitige Zusammenarbeit von Designern und Frontendentwicklern. Dies bedingt auf Entwicklerseite, Ideen schnell realisieren und testen zu können.

Zu beiden Themen hat Jens Grochtdreis auf der diesjährigen Webtech gesprochen und ganz offensichtlich zwei sehr interessante Vorträge gehalten. Offensichtlich, weil ich leider nicht in Mainz dabei sein konnte, mich aber die frisch in seinem Weblog veröffentlichten Folien inhaltlich begeistern. Deshalb kann ich Euch nur empfehlen: schaut sie Euch unbedingt an.

Jens erster Vortrag spricht das Thema “Modulares Design” an. Er zeigt dazu einige Beispiele aus dem Projekte Structurae, welches Jens und ich gemeinsam bestritten haben und bei dem eben diese Modularität – und damit deren einfache Wiederverwendbarkeit – ein extrem wichtiger Erfolgsfaktor war, denn als Aufgabe stand ein vollständiges Redesign einer sehr datenintensiven Website unter großem Zeitdruck und dem Bedarf an Flexibilität bei der Positionierung einer Vielzahl optionaler Layoutbausteine. Beide Ziele haben wir unter Einhaltung von Zeitplan und Budget geschafft, was im Vorfeld alles andere als sicher war. Ich kann diese Enge Zusammenarbeit der Entwickler deshalb wärmstens empfehlen.

Der zweite Vortrag von Jens dreht sich vollständig um das Thema “Rapid Prototyping” mit YAML. Er basiert auf den Erfahrungen von Jens bei seiner Arbeit mit YAML und dem Workflow, den Jens über die letzten Jahre für sich entwickelt hat. Jens diese Erfahrungen seit vielen Jahren mit mir, wodurch ich extrem wertvolles Feedback für die Weiterentwicklung meines CSS Frameworks erhalte. Ich empfehle die Folien dieses Vortrags insbesondere den YAML-Nutzern, die noch immer ein wenig Hemmungen vor dem Umstieg auf YAML 4 und dem neuen Dokumentationskonzept haben. In seinen Folien zeigt Jens sehr anschaulich, wie sich das Benamungskonzept der CSS-Klassen bei YAML 4 funktioniert, und welche Vorteile die neue Dokumentation für bei der unmittelbaren Arbeit mit sich bringt.

Also schaut Euch den Blogbeitrag und die Folien der Vorträge an und vielleicht hält Jens ja einen oder gar beide Vorträge bei anderer Gelegenheit noch einmal.


Sonntag30. September 2012

Vor wenigen Tagen ging Thinkin’ Tags nach dreijähriger Entwicklungsarbeit endlich live. Nachdem auch dieser Schritt recht reibunglos ablief ist jetzt ein guter Zeitpunkt, dass ich ein paar Worte über meine Motivation und die Zielrichtung dieses Projekts verliere.

Motivation

“Da geht noch mehr!”. So dachte ich im Somer 2008, wenige Monate nachdem ich die Version 1.0 des YAML Builders veröffentlicht hatte, der seinerzeit neben dem bis heute unveränderten YUI Grid Builder ziemlich alleine stand mit seiner Funktionalität. Mittlerweile gibt es einige Projekte dieser Art, z.B.  Jetstrap oder auch einige Wordpress-Themes mit visuellen Anpassungsmöglichkeiten (z.B. Elegant Builder). Was mich jedoch bereits damals störte, war der Umstand, dass man mit diesen Buildern auf recht einfache Weise das HTML-Gerüst eines Layouts zusammenstellen konnte, CSS jedoch außen vor blieb. Letztlich konnte man sich also einen groben Rohbau einer Seite zusammenklicken, landete anschließend aber doch im Texteditor seiner Wahl, in dem 90% der eigentlichen Arbeit erledigt wurden. "Webseiten bauen ist halt Handarbeit!" – sagt einem schließlich jeder professionelle Webentwickler.

Den gesamten Beitrag lesen


Seite 1 von 13 Seiten

 1 2 3 >  Letzte »