SchlagwortInternet

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?

 

 

Gedruckte Internet-Kurzweil

20131024-180641.jpg

Internet-Themen – in einer Zeitschrift.

Langsam aber sicher arbeite ich die Post ab, die sich im Herbsturlaub angesammelt hat. Genauer gesagt, die unwichtigeren Sachen, die anderen sind bereits erledigt. Einladungen zu irgendetwas, zu ziemlich teuren Messen und Konferenzen und außerdem einige Freiexemplare von Zeitschriften, die ich mit regelmäßiger Unregelmäßigkeit bekomme. Meist mit Themen rund um mein altes Metier, der Produktion von Printmedien, sprich Druckprodukten.

Dieses Mal ist noch eine in Folie eingeschweißte Zeitschrift im Papierstapel, die →Internet World Business. Auf der Titelseite sind die Begriffe Internet und Business gut zu erkennen und im begehrten →above the fold-Bereich, der bei einer gefalteten Zeitung oben ist, ist das farbige eBay-Logo ein deutlicher Eye-Catcher. Es geht also um Deals.

Nun, eine Zeitschrift? Ein Printmedium, das Themen rund ums Internet enthält. Schon etwas komisch, diese Mischung. Soll hier Entscheidern und Führungskräften die neue Technik beziehungsweise die neue Zeit näher gebracht werden. Mit dem Medium einer Zeitschrift im Tabloid-Format, hälftig gefaltet und in Folie eingeschweißt. Mindestens diese unwirklich anmutende Kombination macht mich neugierig.

Soweit ich mich erinnere, habe ich diese Zeitschrift schon mehrfach in den Händen gehalten. Irgendwo als Freiexemplar im Flugzeug oder in einer Lounge. Dort, wo diese Big-Business-Titel eben so rumliegen. Dem Exemplar, das ich jetzt in in der eingeschweißten Klarsicht-Verpackung erhielt, war übrigens noch ein Anschreiben beigefügt, in dem mir die Internet World Business als Abo angeboten wird. Ok, wäre ich Friseur oder Zahlarzt mit digitaler Nerdkundschaft, wäre es eine Option.

Was steht nun drin in so einer Zeitschrift, die sich mit dem Internet beschäftigt, sogar mit dem Internet Business? Es gibt auf jeden Fall Köpfe zu sehen. Köpfe, und nochmal Köpfe. Sehen und gesehen werden im Big Business, das ist wohl wichtig. Mmh, und ich nicht dabei, wo ich doch nicht nur diese @netznotizen schreibe, sondern als Gründer von Stories & Places quasi Betreiber einer Social-Media-Plattform bin. Dazu noch der Generalförderer von @aktuell-im-Netz. Wie komme ich da hinein, in diese Lounge-und-Flugzeug-Zeitung? Gut, das gelingt schon noch… Ideen gibt es ja hier noch genug, das eine oder andere StartUp vielleicht demnächst auch.

Zu den Themen der Internet Business World. Wie das prägnante eBay-Logo auf Seite 1 schon vermuten lässt, ist das ganze Blatt etwas E-Commerce-lastig. Natürlich, es geht nur um das Internet – Business-Machen ist hier im Focus. Dazu gibt es leicht Erfassbares zu lesen. Der Reihe nach einfach aufgelistet:

eBay – Targeting – Banken – ABC kauft XYZ – Mobile Commerce – Statements der Köpfe – online und stationärer Handel – online Marketing – App-Nutzer zurückgewinnen – Deutsche Telekom und digitale Werbenetze – nochmal Targeting – Hornbach – Facebook – SocialMedia-Marketing – E-Mail-Newsletter für Mobile Devices – online verkaufen – nochmal online verkaufen – E-Commerce-Messe und -Konferenz – Bildrechte und Bildkauf – Lastschrifteneinzug – eigener Shop – Tools- und Technik-Tabelle – Klimaschutz in E-Commerce – Business-Partys. Außerdem noch Dienstleister in Classifieds, Köpfe, Köpfe, Köpfe – und natürlich im Impressum das
→ivw-Logo, wodurch sich die Zeitschrift schon etwas als Streumaterial outet.

Weitgehend also Modethemen rund ums Internet, vieles nur kurz angerissen. Und vor allem irgendwie austauschbar. Inzwischen ist längst eine neue Ausgabe der im Abstand von 14 Tagen erscheinen Zeitschrift herausgekommen. Mangels Flug, Hotel- oder Lounge-Aufenthalt habe ich sie nicht bekommen. Wetten, es gibt ähnliche Themen rund um das Big Business Internet?