SchlagwortHTML

Rahmenwerk

Nerd-Warnung vorweg

Die Stammleser der @netznotizen und die, die mich persönlich kennen, wissen es: Publishing war noch nie so einfach und preiswert wie heute. Smartphone, Mobile Computing und dem werten weltweiten Netz sei Dank. Stand bei mir Print-Publishing in den letzten 20 Jahren im Vordergrund, so schlägt das Herz heute für digitale Medien. Viel bequemer als Printmedien können sie auf Mobile Devices, Smartphone, Tablets und eReadern konsumiert werden. Einiges habe ich in Planung für den Sommer und die Zeit danach. Und dafür brauche ich eine gute Möglichkeit, Inhalte schnell und einfach in HTML formatieren und zu gestalten.

Wer von Ihnen hier mitliest und sich zwar gut mit der Verwendung von Internet, Bloggen, SocialMedia, etc. auskennt, jedoch noch nie ernsthaft einen Blick unter die Motorhaube von Internetseiten getan hat, könnte jetzt zum Beispiel gut ein Eis essen oder woanders weiterlesen. Es wird nämlich ziemlich nerdig im Folgenden, und bevor Sie die @netznotizen gleich aus dem Feed-Reader kicken, lesen Sie lieber temporär Themen von allgemeinem Interesse, z.B. warum Gefrierbeutel und Feuchttücher die größten Errungenschaften der modernen Zivilisation sind, oder über die globale und lokale Bedeutung des einzig relevanten Zitats von Ex-Bundeskanzler Gerhard Schröder (»Ich will da rein«). Über solche Dinge schreibe ich demnächt auch wieder, versprochen.

Persönliches Rahmenwerk

Eine individuelle Sammlung von CSS-Anweisungen und JavaScript-Funktionen. Braucht man nicht, gibt es doch galore im weltweiten Netz. Doch, brauche ich. Ziemlich intensiv habe ich mich in der letzten Woche mit HTML5 und CSS auseinander gesetzt, verschüttetes Wissen aufgefrischt und mir ein kleines individuelles Framework zusammengestrickt, so dass ich Texte und Bilder schnell nach meinen Erfordernissen formatieren kann. Zudem kann ich jetzt grafische Elemente einfach herzaubern, ohne immer wieder Ränder und Positionierungen neu zu definieren und die CSS-Anweisungen neu schreiben oder zusammenzukopieren zu müssen, die dann z.T. noch recht unterschiedliche Bezeichnungen haben, in die ich mich dann jedesmal wieder neu reindenken muss.

Also: Ich habe ein großes CSS-File erstellt, das so ziemlich alle Formatierungs- und Positionierungs-Situationen mit – zumindest von mir – leicht merkbaren Abkürzungen enthält. Mit fast allen denkbaren Rahmen-Effekten, Schatten und runden Ecken, bis das Quadrat zum Kreis wird. Sprechblasenartige Formen für Überschriften,  Rotationsmöglichkeiten, etc. inklusive. Diese Formatierungen kann ich schnell und einfach mit mehreren CSS-Klassen zuweisen. Ohne Google, Suchen, Rauskopieren und Anpassen. Definitiv ist jetzt das Erstellen Buttons und Formen mit Photoshop vorbei, anachronistisch ist es sowieso seit langem.

Einen Nachmittag habe ich mich mit zueinander passenden Farben beschäftigt, mehrere Farbpaletten zusammengestellt und diese als CSS-Klassen in die Stylesheet-Datei eingetragen. Damit werden zusammenpassende Farben jetzt per CSS-Klassen hergezaubert und die nervige Recherche nach Farben, die hinsichtlich Farbton, Sättigung und Helligkeit gut harmonieren, entfällt vielleicht noch nicht ganz, jedoch zunehmend. Für die Realisierung von Gestaltungsrastern mit möglichen vertikalen Teilungen bis 12fach gibt es Anweisungen zur Längen- und Ränder-Formatierung  in allen möglichen Vielfachen. Ergänzt wird meine Sammlung durch Standard-Elemente aus üblichen JavaScript-Frameworks, wie zum Beispiel den per Mausklick oder Fingertouch ausklappenden oder reduzierbaren Inhaltbereichen. Oder dem klassischen Akkordeon-Effekt oder Registerkarten, mit denen schnell verschiedene Inhalte aufgeklappt werden können.

Ich hab‘ es also jetzt, mein ultimatives Stylesheet. Die CSS-Datei hat inzwischen mehrere tausend Zeilen und ist gute 600 KB groß. Alle CSS-Klassen sind so angelegt, dass sie responsive Darstellung bei unterschiedlicher Displaygröße (Monitor, Tablet, Smartphone, Reader) ermöglichen. Ein paar CSS-Klassen gibt es zudem, die es via Media-Queries ermöglichen, dass Textbereiche oder andere Elemente bei Darstellung auf schmalen Smartphone-Displays sich aus dem Gestaltungsraster lösen und auf der ganzen Seitenbreite angezeigt werden. Im Grunde genommen habe ich für die zahlreichen CSS-Klassen eine kleine Meta-Sprache entwickelt, die genau meine Bedürfnisse erfüllt.

Zufrieden. Bin ich noch nicht ganz, denn einiges muss noch ergänzt werden. Im Groben steht das Personal Framework jedoch und ist sicher ein guter Schritt in Richtung effizienteres Arbeiten.

Wofür des Ganze? Nun, einige eBooks, Web-Apps, Apps per Phonegap und Internet-Projekte sind in Planung. Außerdem für HTML-Email-Useletter.

Entstauben – Dust me, Baby

Entfernen überflüssiger CSS-Anweisungen

Ganz sicher ist ein 600 KB großes Stylesheets zu groß für ein kleines, schlankes responsives HTML-Projekt, das ggf. auch bei schmaler Edge-Verbindung vom Smartphone sicher aufgerufen werden soll. 500o CSS-Anweisungen, von denen nur 30 gebraucht werden? Wie erfährt man jetzt, welche 30 das sind (außer man notiert sie sich manuell), und wie kann man die überflüssigen aus der CSS-Datei schnell herauslöschen?  Dazu gibt es ein Firefox-Plugin namens →Dust-Me Selectors. Schnell reduziert sich die CSS-Datei auf wenige Zeilen – und kann sogar direkt ins HTML kopiert werden, wenn man zum Beispiel ein Single-File-Konzept verfolgt für schnelle, schlanke Web-Apps. 

Freeware – Der Link zum Testen und Runterladen

Nein, den gibt es nicht. Nachmachen, heißt die Devise. Zumindest für alle, die nicht nur Gelegenheits-HTML-Kreateure sind und Inhalte etwas anspruchsvoller formatieren möchten. Überlegen Sie, was Sie genau für Ihre Projekte brauchen und erstellen Sie sich eine CSS- und eine JavaScript-Sammlung. Dazu dann eine Dummy-HTML-Datei in der alle Formate enthalten sind, für die schnelle Übersicht. Alle Klassen und IDs benennen Sie so, dass es für Sie gut mnemonisch ist und schnell im HTML-Code geschrieben ist.

Nerdig genug?

Herzlichen Glückwunsch. Sie sind kein Programmierer und haben diesen Beitrag trotzdem bis zum Ende gelesen. War es denn jetzt nerdig genug?

 

 

Web-Apps leicht gemacht

Touch App Creator

Web-Apps sind ja bekanntlich nichts anderes als Internetseiten, die speziell für Smartphones optimiert sind. Oft lassen sie sich ohne Browserleiste im Vollbild-Modus öffnen und haben das Look and Feel nativer Apps. Dazu können sie vom Homescreen des iPhone via Icon gestartet werden, hat man sie dort einmal abgelegt.

So eine Pseudo-App lässt sich relativ einfach mit HTML und Javascript erzeugen. In der Anfangszeit der iPhones und Smartphones ein gab es ähnlich wie um native Apps einen ziemlichen Hype um diese Web-Apps. Inzwischen hat man Frameworks wie jquery mobile oder Sencha touch, mit denen man Web-Apps ziemlich schnell generieren kann. In 2013 also keine Herausforderung mehr, business as usual.

Neben der Arbeit mit so Schwergewichten wie Dreamweaver mit integriertem jquery mobile Framework entdecke ich immer wieder das ein oder andere Tool, das zwar nur einen Bruchteil der Funktionen abdeckt, jedoch für kleine und kleinste Projekte die sehr schnelle Lösung ist. Und wenn es dann noch auf dem iPad funktioniert, umso besser. So habe ich vor kurzem den CreativeBookBuilder von Tiger Ng vorgestellt, eine iPad App, mit der sich sehr schnell eBooks im epub-Format erstellen lassen.

Fast genauso cool und hilfreich wie der CreativeBookBuilder ist der TouchAppCreator, ebenfalls von Tiger Ng und auch eine iPad-App. Damit kann man auf sehr einfache Art Web-Apps erstellen. Schnörkellos, im jquery-mobile-Einheitsdesign, dafür aber mit dem Look-and-feel einer Handy-App, inklusive Homescreen-Icon und Vollbildmodus. Ein Beispiel für ein Ergebnis des TouchAppCreators ist unsere Web-App barnimkante.com. Natürlich sind auch noch Untermenüs mit Slider-Effekt bis in tiefste Ebenen möglich.

 

20130609-150410.jpg

Klar, umfangreichere Web-Apps erstellt man nicht am iPad mit einer App für 3,59€. Geht es dagegen darum, mal eben ganz schnell eine abgeschlossene Mini-Site bzw. eine smartphone-optimierte Web-App ins Netz zu bringen, dann ist der TouchAppCreator ein gutes Tool dafür. Klick, klick, Seiten anlegen, Content einfügen, Bilder dazu, Vorschau, fertig. Dann noch FTP-Server-Zugangsdaten eingeben und hochladen,… im Netz, weltweit verfügbar. Die längste Zeit für das Auswählen und Zusammenkopieren des Contents gebraucht.

Die Site bzw. Web-App lässt sich natürlich nicht nur per Smartphone aufrufen, sondern auch am Desktop-PC oder Tablet. Das Look and feel ist dort auch akzeptabel, nun mit der Navigation links. Ok, für eine Desktop-Site ist die Anmutung vielleicht etwas ungewohnt und zu wenig individuell. Die Funktionalität ist hier jedoch ebenso gut wie auf dem Smartphone oder Tablet.

Hop oder Top?

Top natürlich. Mit dem TouchAppCreator lassen sich mit dem iPad in der Badewanne oder im Biergarten mal eben schnell kleinere Websites bzw. Web-Apps erstellen. Und meine »Nie war Publishing so einfach«-Standardfloskel ist sicher wieder einmal bestätigt.

Grenzen

Eine iPad-App für 3,59€ hat natürlich ihre Grenzen, so auch der TouchAppCreator. Das Design der erzeugten Sites bzw. Web-Apps sieht definitiv immer gleich aus. Jquery-mobile-like eben, mit den Wahlmöglichkeiten der Standardfarben für Header, Menu und Footer: blau, schwarz, gelb, grau, Hintergrund immer hellgrau, das war's.

Und natürlich ist es genauso, wie beim CreativeBookBuilder: man kommt zwar um jegliches Schreiben von HTML-Code herum, ohne Vorkenntnisse über Webdesign und Website-Erstellung geht's jedoch nicht. Da wird der TouchAppCreator mit seinen Funktionen ziemlich schwer durchschaubar sein. Besitzt man jedoch Vorkenntnisse, kommt schnell zum brauchbaren Ergebnis. Minimale Änderungen am Stylesheet oder den Austausch der Worte »back to parent« durch »zurück zum Hauptmenü« im HTML-Code sind dann auch kein Problem. Damit wird das Ergebnis dann auch richtig rund.

Leider werden die mit dem TouchAppCreator erzeugten Web-Apps im Smartphone nicht im Cache gespeichert, um auch wie native Apps offline zur Verfügung zu stehen. Technisch wäre das ja möglich, und man kann es sich mit etwas Aufwand per Manifest-Datei nachbauen – schließlich ist das Aufrufen von nicht gecachten Web-Apps ja im Ausland mit unnötigen Roaming-Kosten verbunden. Diesem Mangel wird durch die kostenlose TouchAppViewer-App abgeholfen.

 

20130609-150434.jpg

Der TouchAppViewer ist eine native Container-App, mit der die Web-Apps, die mit dem TouchAppCreator erstellt wurden, offline gespeichert werden können. Damit kann z.B. die barnimkante.com-Web-App lokal auf dem Smartphone gespeichert werden. Den kostenlosen TouchAppViewer aus dem App-Store oder Google-Store laden, Public-Link barnimkante.com hinzufügen, fertig. Jetzt ist alles offline verfügbar.

Fazit

Empfehlenswert. Für die schnell am iPad erstellte Mini-Site bzw. Web-App, und auf jeden Fall, wenn man ein Faible für Mobile Publishing, Tablets und Smartphones hat. Probieren Sie's aus.