Brackets: Open Source Web-Editor von Adobe

Brackets Web-Editor (Screenshot)

Es mag erstaunen, dass ausgerechnet Adobe – Hersteller von Dreamweaver, dem unangefochtenen Standard bei den kommerziellen Web-Editoren – einen frei verfügbaren Web-Editor mit MIT-Lizenz herausbringt. Und doch ist Brackets eines der von Adobe unterstützten Open-Source-Projekte. Ebenfalls überraschend ist der Umstand, dass Brackets nicht in einer der für Desktop-Applikationen typischen Programmiersprache entwickelt wird, sondern mit den Web-Technologien HTML, CSS und JavaScript. Dadurch ist die Software vergleichsweise einfach erweiterbar.

Brackets zeichnet sich insbesondere durch folgende Eigenschaften aus:

  • Die Applikation ist schlank und effizient. (Dafür ist sie keine vollwertige Entwicklungsumgebung, sondern ein reiner Code Editor.)
  • CSS- und JavaScript-Code wird im HTML-Code inline dargestellt und editiert. Dies bedeutet, dass man nicht ständig zwischen verschiedenen Files wechseln muss.
  • Jede Änderung am Code wird sofort in einem parallel geöffneten Browser sichtbar – und zwar ohne die übliche Save & Reload-Prozedur. 

Wie sich der Editor in der Praxis anfühlt, kann man als Normalanwender allerdings nicht ohne weiteres ausprobieren: Nebst der eigentlichen Applikation (Brackets) benötigt man auch eine Shell für das jeweilige Betriebssystem (Brackets App). Ausserdem ist die Software noch nicht wirklich fertig:

“Brackets isn’t ready for general use yet. It’s still very early in development, is missing a lot of basic editor features, and probably has bugs.”

Das nachstehende Video zeigt allerdings schon recht genau, wie Brackets daherkommen wird und welches seiner herausragenden Eigenschaften sein werden:

Wer es etwas genauer wissen möchte, dem sei die Präsentation von Adam Lehmam bei Adobe empfohlen:

hyphenator.js: Silbentrennung auf Web-Seiten per JavaScript

image 

Warum benutzen fast alle Websites Flattersatz? Weil Blocksatz im Web unansehnliche und schlecht lesbare Texte erzeugt. Aber warum ist das so? Weil ein Browser keine automatische Silbentrennung bietet und deshalb – besonders bei schmalen Textspalten – übergrosse und sehr unregelmässige Wortzwischenräume entstehen.

Was wir seit rund 15 Jahren als gegeben hinnehmen, ist allerdings kein Naturgesetz. Wie man bei Textverarbeitungsprogrammen sieht, kann man einer Software durchaus die Trennregeln unterschiedlicher Sprachen beibringen. Grundsätzlich könnten auch Web-Browser mit Silbentrennung ausgestattet werden, nur hat das bisher kein Browser-Hersteller getan. Das einzige, was heute alle wichtigen Browser bieten, ist die Unterstützung des weichen Trennzeichens (­ = Soft Hyphen, in Microsoft Word “bedingter Trennstrich” genannt): Enthält ein Wort, das nicht mehr auf eine Zeile passt, ein weiches (unsichtbares) Trennzeichen, so ersetzt es der Browser durch ein normales (sichtbares) Trennzeichen und bricht die Zeile an dieser Stelle um.

So weit, so gut – aber wer fügt diese weichen Trennzeichen in den HTML-Code ein? Hierzu gibt es zwei Ansätze:

  • Client-side: Das JavaScript hyphenator.js des Schweizer Entwicklers Mathias Nater fügt die Soft Hyphens ein, nachdem die Seite vom Browser geladen wurde. Weil dieses JavaScript auch in Form eines Bookmarklets genutzt werden kann lässt es sich grundsätzlich auf jede Website anwenden.
  • Server-side: Das PHP-Skript phpHyphenator ist eine Portierung des obigen JavaScripts und fügt die Soft Hyphens vor der Auslieferung der Seite ein. Eine solche Lösung muss zwingend vom Website-Betreiber implementiert werden.

Es ist beeindruckend, was hyphenator.js leistet. Trotzdem hat diese Lösung prinzipbedingt einige Schwächen. Zunächst wird die Website etwas langsamer, weil sowohl das Laden des JavaScripts als auch das Einfügen der weichen Trennzeichen Zeit beansprucht. Zudem lassen sich gewisse Suchmaschinen und Screen Readers (siehe hier) von weichen Trennzeichen irritieren und erkennen nur noch die Wortteile statt die ganzen Wörter. Und schliesslich ist zu sagen, dass die Worttrennung von hyphenator.js zwar gut, aber nicht perfekt ist und man bei Sonderfällen die Trennung nicht manuell übersteuern kann.

Offenbar wird Firefox 6.0 erstmals eine integrierte Silbentrennung besitzen. Bis es so weit ist (und bis auch die anderen Browser nachgezogen haben) ist hyphenator.js fast die einzige Alternative.

subwayMap: U-Bahn-Pläne per JavaScript

Information Architects: Web Trend Map 2007

Spätestens seit der Web Trend Map von Information Architects ist uns allen klar geworden, dass sich mit Liniennetzplänen nicht nur der Öffentliche Verkehr, sondern auch logische Zusammenhänge visualisieren lassen (vgl. Ten Examples of the Subway Map Metaphor). Wer den Aufwand nicht scheut, kann dank dem Subway Map Visualization jQuery Plugin selbst solche Pläne erstellen. Wie das ausführliche Tutorial zeigt, muss man dazu kein Computer-Grafik-Spezialist, sondern nur ein leidlich begabter HTML-Programmierer sein. Nebst etwas Fleiss braucht es allerdings auch einen HTML5-fähigen Browser – dafür ist das Resultat auch für Suchmaschinen indexierbar. Ein spannendes Experiment für ein verregnetes Wochenende!

(via WebAppers)

SELFHTML startet als Wiki

SELFHTML Wiki

Im deutschsprachigen Raum ist SELFHTML die bekannteste und umfassendste Online-Dokumentation zu HTML und CSS. Ihre Weiterentwicklung ist allerdings ins Stocken geraten, und nach redaktionsinternen Differenzen über die zukünftige Strategie hat der Gründer Stefan Münz anfangs 2007 das Projekt verlassen. Münz wollte SELFHTML in ein Wiki überführen und so die Schwelle für die Mitarbeit neuer Autoren senken, während ein Teil der Redaktion an den bisherigen Technologien und Prozessen festhalten wollte.

Inzwischen scheint das Wiki-Konzept weitere Anhänger gefunden zu haben, und so wurde Mitte März 2010 das SELFHTML Wiki lanciert (offizielle Ankündigung). Dieses (wie die Wikipedia auf der MediaWiki-Software basierende) Wiki soll langfristig die alte Dokumentation ablösen. Ob dies gelingen wird, ist derzeit noch nicht abzuschätzen: Das Wiki wird derzeit zwar regelmässig, aber auf niedriger Frequenz bearbeitet, und es besteht momentan noch das Problem, dass im Wiki kein ausführbarer Demo-Code eingefügt werden kann. Bis alle Inhalte der alten Dokumentation in das Wiki überführt sind, wird es wohl noch einige Zeit dauern. Und ob das SELFHTML-Wiki eine ähnlich stringente Struktur entwickeln wird wie die alte SELFHTML-Dokumentation hängt massgeblich davon ab, wie gut die Redaktion das Projekt begleitet. Zu wünschen wäre es, denn wenn dieser Versuch scheitern würde, dann hätte SELFHTML wohl keine langfristige Zukunft mehr.

Glow: JavaScript-Library der BBC wird Open Source

image

Die BBC hat ihre – bisher nur für eigene Zwecke genutzte – JavaScript-Library Glow als Open Source Software freigegeben und unter die Apache-Lizenz 2.0 gestellt. Als wichtiger Vorteil dieser Library wird die Unterstützung älterer Browser (namentlich Safari 1.3) genannt.

Persönlich hat mich vor allem das obige Beispiel einer grafischen Zeitleiste angesprochen, welche mit Glow erstellt wurde: Die Royal Timeline zeigt die Regentschaft der britischen Monarchen und bietet eine variable Vergrösserung sowie schnelles Anspringen von bestimmten Punkten auf der Zeitachse.

simpleCart(JS): Einfache Shop-Lösung ohne Programmierung und Datenbank

image

simpleCart(JS) ist eine Shop-Lösung, die lediglich aus einer 10.5 KByte grossen JavaScript-Datei besteht und für deren Nutzung man nur HTML-Kenntnisse benötigt. Damit lässt sich sogar auf einer statischen Website ohne Datenbank ein einfacher Shop mit Warenkorb integrieren – ideal für Websites, die nur ein paar wenige Artikel im Angebot haben und nicht viel Aufwand betreiben wollen. Die Zahlung erfolgt ausschliesslich über PayPal: Sobald der Kunde im Warenkorb den “Checkout”-Button anklickt, landet er direkt auf der PayPal-Seite.

image

Den im Screenshot gezeigten Turnschuh-Shop kann man hier als Demo ausprobieren. simpleCart(JS) unterliegt der MIT-Lizenz.

Aptana Studio: Entwicklungsumgebung für HTML, CSS, JavaScript, PHP, Ruby on Rails, Python und mehr

image

Lassen Sie mich zunächst eines klarstellen: Ich bin kein Entwickler. Ich habe zwar ganz gute HTML- und CSS-Kenntnisse und schreibe zur Not auch einfache PHP-Skripts, aber mein übriges Wissen über Programmierung ist rein theoretischer Natur. Insofern kann ich Aptana Studio nicht bis ins letzte Detail beurteilen – aber das, was ich verstehe, gefällt mir ausserordentlich.

Aptana Studio ist eine Entwicklungsumgebung (Integrated Development Environment IDE), die – abgesehen von Microsoft-Technologien und Java – so ziemlich alle Sprachen unterstützt, welche derzeit angesagt sind, wenn es um Web-Applikationen geht. Das beginnt bei HTML und CSS, geht weiter über JavaScript (wobei zahlreiche populäre AJAX Frameworks wie Scriptaculous, YUI, Prototype, Mootools, jQuery oder ExtJS zum Lieferumfang gehören) und schliesst auch PHP, Ruby on Rails sowie Python ein.

Die Entwicklungsumgebung glänzt mit guter Unterstützung zur Fehlervermeidung und -suche: Bereits beim Schreiben des Codes werden Syntaxfehler moniert, und es gibt einen Debugger, der die Fehlersuche zur Laufzeit ermöglicht. Elegant ist auch die Art und Weise, wie man ein Skript (z.B. PHP) direkt ausführen und erst noch in unterschiedlichen Browsern ausgeben kann – und zwar ohne dass man einen lokalen Webserver installieren müsste.

Aptana Studio basiert auf Eclipse und kann entweder als Eclipse-Plugin oder als eigenständige Applikation für Windows, Mac OS oder Linux installiert werden. Die Community Edition ist kostenlos und kann wahlweise unter der GNU General Public Licence oder unter der Aptana Public Licence genutzt werden. Interessant ist übrigens das Businessmodell von Aptana: Während die IDE kostenlos zur Verfügung gestellt wird (sofern man nicht die Pro-Version wählt) ist die Nutzung der Server in der Aptana Cloud kostenpflichtig. Und weil das Deployment mit Aptana Cloud so elegant in Aptana Studio integriert ist, wird sich wahrscheinlich manch ein Entwickler entschliessen, seine Test- und Live-Umgebungen bei Aptana zu betreiben.

Firefox 3: Was ist neu?

Inzwischen liegt die Beta 2 von Firefox 3 vor – Zeit, sich den neuen Open Source Browser etwas genauer anzuschauen:

image

Die auffälligste Neuerung beim Firefox 3 ist die Adresszeile (engl. Location Bar): Beginnt man eine neue URL einzutippen, erscheinen im Dropdown nicht nur Vorschläge aus der History, sondern auch aus den Bookmarks. Ausserdem wird der Seitentitel mitangezeigt, was unter Umständen wesentlich informativer ist als die URL.

image

Wer häufig grosse Dateien herunterlädt und keine allzu performante Internet-Anbindung besitzt, wird die Möglichkeit schätzen, neu einen Download zu unterbrechen und später wieder aufzunehmen.

 image

In der aktuellen Beta 2 noch nicht sichtbar ist das Redesign, das Firefox in der Version 3 erhalten soll. Dabei geht es nicht einfach nur darum, ein schöneres, moderneres Design umzusetzen, sondern Firefox möglichst in die Design-Welt des jeweiligen Betriebssystems zu integrieren – wie obige Grafik am Beispiel eines einzelnen Icons sehr schön zeigt.

image

Ebenfalls überarbeitet worden ist der Lesezeichen-Manager: Bookmarks (Lesezeichen) und die History (Chronik) werden nun im gleichen Fenster angezeigt. Dies scheint mir eine gute Entscheidung, denn letztlich geht es in beiden Fällen darum, wichtige URLs wiederzufinden. Auch die Unterstützung von Tags wurde verbessert, Bookmarks können nun direkt bearbeitet werden (ähnlich wie bei der Extension Flat Bookmark Editing), und offenbar gibt es auch eine automatische Backup-Funktion, dank der man seine Bookmarks gemäss dem Stand der letzten Tage wiederherstellen kann.

Auch für Web-Entwickler und Extension-Programmierer hat die neue Firefox-Version einige Verbesserungen zu bieten, namentlich eine bessere CSS-Implementierung und die Unterstützung von JavaScript 1.8. Mehr Informationen zur aktuellen Beta 2 gibt es auf der Mozilla-Website.

AJAX ohne J(avaScript)

„ZK is an open-source AJAX Web framework that enables rich user interface for Web applications with no JavaScript and little programming.“

Über 130 AJAX-Frameworks gibt es gemäss einer Präsentation von Tom M. Yeh, dem Begründer des ZK-Projekts. Trotzdem hat er das 131. Framework entwickelt, denn er findet alle anderen zu kompliziert, was die Entwicklung von Web-Applikationen mit AJAX-Oberflächen unnötig teuer mache.

Tatsächlich ist die Notation mit ZK erstaunlich einfach und für jeden nachvollziehbar, der schon mit HMTL oder XML gearbeitet hat. Um beispielsweise ein Feld anzuzeigen, das ausschliesslich ein Datum als Eingabe akzeptiert und gleich auch noch einen praktischen Datumswähler mitbringt, genügt der folgende Code:

<window title=“Geburtsdatum“ border=“normal“ width=“150px“>
<datebox id=“db“/>
</window>

Ausprobieren kann man das ZK-Framework auch ohne vertiefte Programmierkenntnisse auf der sehr anschaulichen Demo-Seite. ZK ist derzeit eines der aktivsten Projekte auf SourceForge und wird unter der GNU General Public Licence (GPL) angeboten.

css.php