Tools & Technik

99 / 66 – Die App

99-66-App-Sonderzeichen

Touch · Select · Copy · Paste

„Ich habe mir dann mal eine App dafür gebaut …“

99 / 66 — Die smarte App zum Kopieren von Anführungszeichen, Satzzeichen, Sonderzeichen und Akzentbuchstaben.

Sie kennen es bestimmt selbst. Manchmal sucht man ein ganz konkretes Produkt, findet es nicht und erstellt es dann einfach selbst, bevor man lange weitersucht. So war es mit der 99/66-App.

Ich bin in den Social Media aktiv und poste bei Twitter, Facebook und Instagram. Meist tue ich das nicht vom Notebook oder Desktop-Computer, sondern mit einem Smartphone oder Tablet. So macht Social Media für mich erst richtig Spaß. Und nicht nur, weil ich ich dort unter dem Pseudonym GrafTypo schreibe, habe ich den Anspruch, zumindest die orthotypographisch richtigen Satzzeichen zu verwenden. Bekanntlich gibt es ja ein paar Zeichen mehr, als die, die auf der Tastatur vorhanden sind. Das fängt schon bei Anführungszeichen und Guillemets bzw. Chevrons an. Möchte man dann noch einen Eigennamen (z.B. aus dem slawischen Sprachraum) korrekt schreiben, der einen Buchstaben mit einem diakritischen Zeichen, also einen Akzentbuchstaben, enthält, dann ist bleibt oft nichts anderes, als im Internet zu suchen und den Buchstaben einfach zu kopieren.

Die Anführungszeichen brauche ich relativ oft, denn in Twitter- und Instagram-Posts oder in SMS sind keine Textauszeichnungen mit kursiver oder fetter Schrift möglich. Den Gedankenstrich (Halbgeviertstrich) und manchmal auch den Geviertstrich möchte ich ebenso wenig vermissen wie den Mittepunkt. Alle diese Zeichen gibt es, und man muss nur wissen, wie man sie schnell in den Text einfügen kann. Beim iPhone ist vieles unproblematisch. Berührt man die Taste mit den [] auf der Smartphonetastatur etwas länger, kann man zwischen einer ganzen Reihe Anführungszeichen auswählen. Genauso lässt sich der Halbgeviertstrich ansteuern und zahlreiche Buchstaben mit Akzenten. Braucht man jedoch ein ą oder ein ż für einen polnischen Eigennamen, steht man auf dem Schlauch. Diese Buchstaben lassen sich dafür mit meinem Samsung Galaxy Note prima ansteuern, Anführungszeichen und Guillemets sind dort aber erst einmal Fehlanzeige.

Die auf dem iPhone fehlenden polnischen Akzentbuchstaben kann ich verschmerzen. Ich brauche sie selten und habe dafür immer die App Unicode-Pad verwendet, mit der man alle möglichen Zeichen kopieren kann (sofern man sie denn dort gefunden hat). Die fehlenden Anführungszeichen auf dem Galaxy Note ärgerten mich jedoch immer. Vielleicht passen die sehr zahlreich vorhandenen Emojis eher zur Zielgruppe des Galaxy. Das Problem kann man schnell lösen: durch Installation einer anderen Tastatur. Nur, ich mag diese Geräteeingriffe mit Add-Ons nicht und habe auch keine Tastatur gefunden, die mich optisch gut überzeugt hätte. Also habe ich mich erst einmal beholfen, indem ich mir die Satz- und Sonderzeichen, die ich brauche, in ein Notiz-Dokument kopiert, aus dem ich sie dann bei Bedarf rauskopiert habe. So auch z.B. das Zeichen ™, schreibt man doch in Twitter manchmal früher™ oder damals™.

Da ich im Moment öfter mit dem Galaxy Note arbeite als mit dem iPhone wurde mir dieses Herauskopieren von Zeichen aus einer Notizen-App etwas unbequem – mindestens, wenn ich in der gleichen Notizen-App gerade etwas schreibe, ist es nervig. Also habe ich mir eine kleine App erstellt, die genau die Satz- und Sonderzeichen enthält, die ich gerade brauche. So entstand die 99/66-App, benannt nach der deutschen Konvention für die Anführungszeichen (99 unten, 66 oben). Auf dem Galaxy läuft die 99/66-App jetzt immer im Hintergrund, und ich kann die wichtigsten Sonderzeichen schnell kopieren und einfügen. Zusätzlich habe ich noch eine Übersicht der Tastaturkürzel für Windows und Mac für die wichtigsten Satz- und Sonderzeichen in die 99/66-App aufgenommen. Schreibt man am Mac, so kann man viele Zeichen schnell per Tastatur einzugeben, ohne sie erst in irgendeiner Zeichenübersicht zu suchen. Leider vergesse ich diese Tastaturkürzel immer wieder, auch weil ich nicht täglich damit zu tun habe. Jetzt kann ich sie schnell nachschauen, in der 99/66-App (das Smartphone liegt sowieso immer neben der Tastatur).

Technisch gesehen ist die 99/66-App eine mit jQuery mobile erstellte HTML-Seite, die ich mit Phonegap in eine native Android-App umgewandelt habe.

9966

★ Für Android

gibt es die 99/66-App jetzt gratis im Google-Play-Store. Testen Sie gerne:

qrcode01

https://play.google.com/store/apps/details?id=com.graftypo.satzundsonderzeichen

So geht’s: Die App aus den Google-Play-Store laden, Finger auf das Zeichen, das kopiert werden soll, kopieren, zurück zur App, in der das Zeichen gebraucht wird und einfügen. Fertig. Die App funktioniert (mit adaptivem Design) sowohl auf Android-Smartphones als auch auf Tablets.

Für iPhone und iPad

gibt es die 99/66-App als Web-App. Mit HTML5 funktioniert sie offline und wenn man sie auf dem Home-Bildschirm ablegt, steht sie einer nativen App in nichts nach.

qrcode02

http://9966.graftypo.de/

Wie es geht? Im mobilen Safari den Link aufrufen und wenn die 99/66-Webapp geladen ist, via [↑] und zum Homebildschirm auf dem Homebildschirm des iPhone oder iPad ablegen. Das schwarze 99/66-Icon erscheint auf dem Homebildschirm und die App verhält sich wie eine native App – und funktioniert auf offline. Das kann man testen, indem man WiFi und die Mobilfunk-Verbindung abschaltet. Die 99/66-App funktioniert trotzdem. HTML5 und das Ablegen im Application Cache machen es möglich.

Freilich, jeder der sich mit App-Development etwas auskennt, weiß dass mit PhoneGap ebenso wie für Android auch eine iOS-App erzeugt werden kann. Nur, einen Apple-Developer-Account habe ich im Moment nicht und einer der 126 Ablehnungsgründe von Apple hätte bestimmt verhindert, dass diese simple App im App-Store platziert wird, z.B., weil sie eben auch als Web-App angeboten werden könnte. Also habe ich eine Veröffentlichung im iOS-Store gleich ausgeklammert. Im Google-Play-Store hingegen kann man ohne Hürden schnell eine Android-App einstellen.

★ Für Notebook und Desktop-Computer

http://9966.graftypo.de/

Einfach den Link in einem separaten Tab im Browser aufrufen und schon stehen alle Satz- und Sonderzeichen oder Akzentbuchstaben zum schnellen Herauskopieren bereit ;)

 

 

Tools & Technik

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?