Vorheriger Artikel Nächster Artikel

treesaver: JavaScript-Framework für Web-Magazine im iPad-Stil

Mit dem Open-Source-Framework „treesaver“ soll man mit möglichst wenig Aufwand Web-Magazine im iPad-Stil erstellen können, die nicht nur auf Tablets gut aussehen. Es setzt auf , und und funktioniert daher in jedem (modernen) Browser. So ein Magazin hat sogar entscheidende Vorteile gegenüber vielen Magazin-Apps, die man bislang gesehen hat – allerdings auch mindestens einen großen Nachteil.

treesaver: JavaScript-Framework für Web-Magazine im iPad-Stil

Die vielen Magazine auf dem haben nicht nur dazu geführt, dass sich vielerorts Menschen Gedanken über die Zukunft digitaler Zeitschriften und Zeitungen machen. Auch aufs Webdesign färbt der Ansatz hier und da ab. Gestern berichteten wir beispielsweise darüber, wie man Websites grundsätzlich fit für Tablets macht. Und gerade erst hat das amerikanische Blognetzwerk Gawker sein Design in einer Art Tablet-Style überarbeitet.

Das Framework treeserver könnte dabei bald zur Grundlage vieler neuer Web-Magazine werden. Es steht zwar noch ganz am Anfang, hat aber bereits eine rege Community.

treesaver als Basis einer neuen Generation

Eine Seite im Magazin „Real Eats“ im Safari-Browser in der Desktop-Version, erstellt mit treesaver.

Beispiele für Magazine mit treesaver sind Real Eats und ICIJ. Das Designparadigma: Man nehme bekanntes Print-Layout und passe es an die Gegebenheiten des Webs an. Das ermöglicht einerseits Animationen, erfordert aber auch neues Denken: Print-Magazine sind in der Regel hochkant, Bildschirme quer. Tablets wiederum sind sowohl hochkant als auch quer. Ein Print-Magazin hat eine feste Größe, Bildschirme haben unterschiedliche Auflösungen. Das Design muss das alles berücksichtigen und im Idealfall auch noch funktionieren, wenn der Nutzer eben nicht den allerneuesten Browser hat.

Mit treesaver soll man als Webentwickler nur mit HTML und CSS beschäftigt sein und sich beim JavaScript ganz aufs Framework verlassen können. Dabei ist treesaver mit 25 KB recht kompakt. Es funktioniert mit „modernen Browsern“, sprich: ab Internet Explorer 7, Firefox 3.5, Safari 4, neuester Chrome, Opera 10.5, iOS Safari Version 3.2, Android Version 1.6. Der Inhalt des damit erstellten Web-Magazins ist aber auch mit älteren Browsern oder bei ausgeschaltetem JavaScript erreichbar, was beispielsweise für Suchmaschinen-Bots wichtig ist.

Am besten funktioniert treesaver derzeit mit einfach strukturiertem Text und Bildern. Komplexe Tabellen, Videos oder JavaScript-Widgets können funktionieren – müssen es aber nicht. Das Framework sei eben noch nicht vollständig, heißt es auf der Seite dazu. Viele Informationen für Entwickler finden sich im treesaver-Wiki auf Github. Nützlich ist beispielsweise dieses Tutorial, um einen ersten Eindruck zu gewinnen. Alle Ressourcen sind hier auf Github zu finden.

Dieselbe Seite wie oben, diesmal im Browser des iPads. Hier kann man dann auch per Fingerwisch weiterblättern.
Und noch einmal dieselbe Seite, diesmal auf dem iPad im Hochkantformat.

Fazit zu treesaver

Ich hatte jetzt noch keine Gelegenheit, mir treesaver selbst anzusehen und es auszuprobieren. Die oben verlinkten Beispiele machen aber auf jeden Fall Lust auf mehr.

Streiten kann man sich darüber, ob ein Magazin im Browser eine sinnvolle Sache ist. Wozu mit Mühe ein Print-Layout nachahmen, wenn man Texte und Bilder doch schon seit ewigen Zeiten problemlos im Netz veröffentlichen kann?

Es ist auf der anderen Seite Fakt, dass die Verpackung mitbestimmt, wie der Inhalt wahrgenommen wird - ob einem das nun gefällt oder nicht. Und es gibt Themen und Anwendungsfälle, bei denen das Magazin-Layout zum Durchblättern einfach besser passt.

Richtig gut kommt das Design auf jeden Fall auf Tablets. Hier hat das Trio JavaScript, HTML und CSS den unschlagbaren Vorteil, dass es plattformunabhängig ist. Apps müssen hingegen bekanntlich in speziell angepassten Versionen herausgebracht werden. Und wer iPad-Magazine kennt, sieht auch weitere Vorteile: Bisherige Beispiele haben riesige Dateigrößen von leicht und locker 500 MB. Das liegt u.a. daran, dass Texte meist als Bilder dargestellt werden, damit das Layout auch so aussieht, wie es aussehen soll. Magazine mit treesaver zeigen, dass es anders geht, sofern man zu dem einen oder anderen Kompromiss bereit ist. Zudem lassen sich Texte im Gegensatz zu solchen Apps auch kopieren, Links abspeichern und weitergeben, die Inhalte finden sich in Suchmaschinen und vieles mehr. Ein treesaver-Magazin kann einfach um soziale Funktionen erweitert werden, integriert sich in ein bestehendes Projekt... Die Liste ließe sich fortsetzen.

Nur einen Haken gibt es: Das Bezahl- und Geschäftsmodell ist nicht integriert wie beispielsweise in Apples App Store. Und dieser Haken wird nun einmal mitentscheiden, wie viele und welche Inhalte wir wo finden in den kommenden Monaten und Jahren. Denn am Ende muss das ja alles jemand bezahlen…

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von Chris am 09.02.2011 (16:06Uhr)

    Das sieht ja mal richtig lecker aus! Hat es zufällig schon jemand installiert und kann mir sagen, ob der Install Prozess krampig oder easy ist?

    Vielen Dank vorab!

    Antworten Teilen
  2. von lina.wolf am 09.02.2011 (16:28Uhr)

    Ja, das ist ein hübsches Framework. Aber es ist weder Open Source noch frei. Natürlich muss eine gute Arbeit auch bezahlt werden. Aber das T3N ist ein Open Source Magazin und sollte keine Werbung für kommerzielle, nicht freie Produkte in Artikelform machen.

    Antworten Teilen
  3. von Andreas Lenz am 09.02.2011 (17:17Uhr)

    hallo lina,

    wie kommst du darauf?

    ...Treesaver is an open source JavaScript framework. It uses web standards to dynamically lay out and paginate publications. To start using the code all you need is a basic knowledge of HTML and CSS to create dynamic layouts.


    siehe auch http://treesaver.net/technology/ unten...
    also viel spaß beim testen! ;)

    Antworten Teilen
  4. von Jan Tißler am 09.02.2011 (17:32Uhr)

    @lina.wolf: Ich habe den Link oben im Artikel von treesaver.net auf treesaverjs.com geändert. Ich könnte mir denken, dass der zu dem Missverständnis geführt hatte. Das eine ist nämlich die Firma, die auch Dienstleistungen zu dem Thema anbietet, und das andere ist die Website zum Framework, das frei zur Verfügung steht, wie Andreas bereits erklärt hat.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema iPad
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst

Mit Breach gibt es einen neuen Open-Source-Browser, dessen Oberfläche vollständig in JavaScript geschrieben wurde. Dank der modularen Natur des Browsers soll sich das Interface per JavaScript und … » weiterlesen

Open Source: Portabler Lasercutter Mr Beam landet auf Kickstarter
Open Source: Portabler Lasercutter Mr Beam landet auf Kickstarter

Das deutsche Team hinter dem Mr Beam getauften Lasercutter und Gravierer sucht auf Kickstarter nach Unterstützern. Das Open-Source-Gerät ist portabel und versteht sich auf den Umgang mit Papier, … » weiterlesen

Adobe Brackets: Cooler Code-Editor auf Basis von Web-Technologien
Adobe Brackets: Cooler Code-Editor auf Basis von Web-Technologien

Adobe Brackets ist ein Code-Editor aus dem Hause Adobe. Wir verraten dir, was das Tool zu bieten hat und was Brackets von anderen Editoren unterscheidet. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen