Web-App Archives - netznotizen

Advents- und Weihnachtslieder App

Bereits vor zwei Jahren hatte ich die Idee, Noten und Texte von Advents- und Weihnachtsliedern als App zu veröffentlichen, zeichete sich doch ab, dass Smartphones immer größer wurden und das Phablet-Format im kommen war. Warum also nicht Inhalte, für die man vorher Fotokopien und Bücher brauchte, direkt aufs Smartphone bringen? Das hatte sich nämlich längst von einem digitalen Guckloch mit 4-mal-6cm-Display zum komfortablen Gerät entwickelt. Also entwickelte ich eine Web-App (die schon in ihrer ersten Version im Application-Cache des Smartphone-Browsers gespeichert wurde und daher auch offline, ohne dass sich das Smartphone im Internet befindet, nutzbar war).

Jetzt gibt es ein Relaunch dieser App, mit mehr Liedern und an die Breite von heutigen Smartphones angepassten Notenzeilen. Natürlich ist die App wieder kostenlos und frei verwendbar. Basis ist die Sammlung des Vereins Musikpiraten e.V. (PDF „Singen im Advent“) mit gemeinfreien Liedern, die auch öffentlich gesungen werden dürfen. So muss keiner die GEMA oder Ansprüche der Erben lange verstorbener Urheber fürchten, und ein spontanes Handyauspacken und Singen auf der Weihnachtsfeier oder während des Adventsspaziergangs ist möglich.

Für Android habe ich eine native App im GooglePlay eingestellt:
→ Hier entlang !

Oder einfach mit dem Android-Smartphone diesen QR-Code fotografieren und die App installieren:

Für iOS (iPhone) habe ich eine Web-App erstellt. Diese wird mit dem Safari-Browser des iPhones aufgerufen:
→ http://weihnachtslieder.kuratiert.com/

Oder alternativ über folgenden QR-Code:

Legt man die Web-App auf dem Home-Bildschirm des iPhones ab (im Safari über das Symbol [↑] und dann via „[+] Zum Home-Bildschirm“), kann sie vom Home-Bildschirm aus wie jede andere App über ein Icon gestartet werden. Nach dem ersten Aufruf werden alle Daten lokal auf dem iPhone im Application-Cache-Speicher gesichert, so dass die App auch funktioniert, wenn das iPhone keinen Internetzugriff hat (z.B. im Flugmodus, draußen im Gelände, auf der internetfreien Weihnachtsfeier, etc.).

Dann kann jetzt nichts mehr schiefgehen …

Wie auch immer, ob Sie nun musizierende Familienmenschen oder Smartphone-addicted Nerds sind oder einfach nur Eltern und Erbtante unter dem Weihnachtsbaum beeindrucken möchten: Mit der Weihnachtslieder-App sind Sie text- und notensicher.

Und ja, nachher lächeln Sie, denn „Singen macht Lächeln“.

Viel Spaß!

PS: Wer Smartphones nicht mag, Fotokopien vorzieht, lieber mit Taschenlampe „vom Blatt“ singt oder ein iPad bzw. ein großes Android-Tablet benutzt, verwendet am besten gleich das Original-PDF des Vereins Musikpiraten e.V. !

Tools & Technik

Weihnachtslieder-App

Mit dem Smartphone in der Hand Weihnachtslieder singen.

———————————————

UPDATE 28. November 2015:

Einiges hat sich in den letzten 2 Jahren getan. Das iPhone hat mit dem Modell 6 und 6s ein größeres Display bekommen und in der 6-plus-Version sogar ein noch größeres. Android-Smartphones gibt es fast nur noch in der 5″-Klasse oder größer. Alle Displaygrößen sind jetzt also richtig gut geeignet, um darauf Inhalte anzuzeigen, so auch für kurze Notenzeilen und Liedtexte. Daher habe ich ein Relaunch der Weihnachtslieder-App veröffentlicht, mit mehr Liedern und besserer Darstellung der Notenzeilen. Lesen Sie hier!

———————————————

Und hier weiter mit dem ursprünglichen Blog-Beitrag von 2013:

Jetzt ganz einfach mit meiner Web-App. Einfach den Link im mobilen Browser öffnen oder den QR-Code fotografieren.

→ xmas.barnimkante.com

Es gibt bestimmte Dinge, bei denen selbst Nerds und Menschen, denen das Smartphone ihr liebstes Gerät ist, diametral unterschiedlicher Meinung sind. Dazu gehört z.B. der obligatorische Adventskranz und das Singen von Weihnachtsliedern. Die einen mögen es, die anderen nicht. Zu denen, die Weihnachtslieder mögen, gehören natürlich Musiker und Sänger und auch meist Menschen mit Kindern. Und für richtige Familienmenschen gehört das gemeinsame Musizieren oft seit Kinderzeiten sowieso dazu.
Zu denen, die mit alldem wenig anfangen können, gehörte ich vor vielen Jahren als technoider IT-Nerd auch, wurde dann jedoch von meiner ersten länger längeren Freundin wachgeküsst, was Sachen wie gemeinsames Singen angeht.

Heute beobachte ich immer wieder so manche Menschen, denen zum Adventssingen nur vermeintliche Synonyme wie »spießig« und »albern« einfallen. Kommen sie dann als junge Eltern zu Advents-Events der Kita, machen sie notgedrungen bemüht mit, weil der Nachwuchs fröhlich mit den anderen Kindern Weihnachtslieder trällert – freilich ohne eine richtige Beziehung dazu zu bekommen.

Gemeinsames Singen ist jedoch eine sehr schöne Erfahrung, und Adventssingen gehört zur Weihnachtszeit dazu, genau wie Glühwein und Weihnachtsmarkt. Fast jeder kennt zumindest die Titel der bekannten Weihnachtslieder aus Kindertagen.

Damit keiner sagt, er könne nicht mitsingen, weil er ja weder Text noch Melodie kennt, habe ich eine Web-App mit 32 GEMA-freien Weihnachtsliedern zusammengestellt. Ein digitales Liederbuch sozusagen. Damit können Smartphone-Addicted-People mit dem Smartphone in der Hand singen. Ganz klassische Weihnachtslieder, wie in Kindertagen. Eine schöne Vorstellung, gemeinsam draußen am dunklen Winternachmittag bei Glühwein mit dem beleuchteten Smartphone in der Hand Weihnachtslieder zu singen.

Die Web-App

Eine Web-App ist ja nichts anderes, als eine Website, die für Browser von Smartphones und mobilen Geräten optimiert ist. Die zugehörigen Dateien können im Application Cache des mobilen Browsers gespeichert werden (mit einer Manifest-Datei), so dass die App genau wie native Apps komplett offline nutzbar ist, z.B. im Flugmodus, oder wenn gerade kein WLAN oder Mobilfunknetz vorhanden ist. Weiterhin können Web-Apps – und damit auch die Weihnachtslieder-App – auf dem Homescreen eines iPhones abgelegt werden und können dann wie eine ganz normale App benutzt werden.

Die Weihnachtslieder-App besteht aus einer einzigen HTML-Datei. So ist sie zusätzlich offline verfügbar, so lange sie im mobilen Browser geöffnet ist. Man muss sie also nicht einmal auf dem Homebildschirm ablegen – was sich jedoch trotzdem sehr empfiehlt, falls das Browserfenster einmal aus Versehen geschlossen wird.

Link im mobilen Browser aufrufen oder QR-Code fotografieren — warten bis Web-App komplett geladen ist — auf Homebildschirm sichern — und gemeinsam Spaß haben.

Draußen muss nicht in jedes iPhone kompliziert den Link neu eingeben werden, sondern es reicht, wenn die App auf einem Smartphone vorhanden ist. Einfach von Smartphone zu Smartphone den QR-Code fotografieren, und schnell kommt ein kleiner Chor zustande.

Viel Spaß beim Singen.

PS: Für die Nutzung der Web-App kommt dieser Beitrag der @netznotizen etwas spät, da der dritte Advent ja bereits vergangen ist und dieses in der Regel der Sonntag für das Adventssingen ist. Daher erfolgte das Release der Web-App bereits am letzten Freitag via Twitter und Facebook und hat inzwischen ganz gut die Menschen erreicht, deren Smartphone ihr ständiger Begleiter ist. Schön wären jetzt natürlich noch ein paar Fotos vom gemeinsamen Weihnachtslieder singen, jeder mit dem Smartphone in der Hand.

Reisen · Tools & Technik

Die Web-App zum
Schlösser-Hopping im Schlesischen Elysium

▸▸▸ HIER

Für alle, die unsere Zeitschleifenberichte angetriggert haben, möchte ich hier noch einmal meine Smartphone- und Tablet-optimierte Web-App empfehlen.
schlesisches-elysium.lima-city.de – Das Gateway zu den Schloss-Hotels im Hirschberger Land bzw. Vorland des Riesengebirges.

Mit dieser Web-App habt Ihr gleich alle Links auf dem Smartphone und musst nicht hin- und hergooglen. Es sind dort nicht nur die Links zu den Internetseiten der Schloss-Hotels enthalten, sondern auch zu Google-Maps und Booking.com. Natürlich funktioniert das auch auf dem PC oder Notebook, einfach schlesisches-elysium.lima-city.de aufrufen.

Zusammengebaut habe ich diese Web-App bereits im letzten Sommer und wurde auch schon mal gefragt, was dieser Schnickschnack genau soll. Nun, für mich eine kleine Linksammlung, damit ich die Seiten der Schloss-Hotels nächstes Jahr einfach vom Smartphone aufrufen kann. Und für Euch vielleicht hilfreich, wenn Ihr auch Schlösser-Hopping im Riesengebirgsvorland machen möchtet, immerhin nur 80km von der deutschen Ostgrenze entfernt.

Technisch gesehen besteht die Web-App aus einem kleinen CMS (Content Management System), für das ich in anderem Zusammenhang das Template mit dem off-canvas* collapsible* Menu und dem look-and-feel* einer App entwickelt habe. Dieses CMS braucht keine MySql-Datenbank und kann einfach auf einen Webserver hochgeladen werden. Inhalte reinkopieren, fertig. Ok, das Zusammentragen der Linksammlung mit den Links zu den Homepages der Schloss-Hotels und zur jeweiligen Booking.com- und Google-Maps-Seite dauerte dann doch etwas länger – wie das so ist, wenn man Links zusammenkopiert. Die Web-App ist bei lima-city.de gehosted, da ich diese kleinen non-commercial-just-for-fun*-Projektchen ganz gerne immer noch einmal fremdgehosted veröffentliche.

* Webdesign-Bullshit-Bingo-Begriffe

Tools & Technik

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.

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.

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.

Design & Typo · Gesellschaft · Tools & Technik

QR-Code – Augmented Reality gestempelt

QR-Code-Stempel

Crossmedia und die Kombination von Holzmedien mit digitalen Medien ist ja ein Dauerbrenner. QR-Codes und ähnliche musterbasierte Marker sollen den Print-Medien Mehrwert auf Teufel komm raus verschaffen.

Auf diesen Zug bin ich aufgesprungen. Meine Briefe, Bücher und allerlei Papiersachen, auf die man gewöhnlicherweise einen Adress-Stempel aufstempelt, haben jetzt mit einem aufgestempelten QR-Code den Zugang zu einer »erweiterten Realität«, im Zeitgeist auch Augmented Reality genannt.

Ich habe mir einen Stempel mit einem QR-Code anfertigen lassen, der zu einer Mini-Website verweist. QR-Reader-App im Smartphone gestartet – Klick – zur URL der Website – alle Infos sind da. Vielmehr als je auf einen Gummistempel gepasst hätte.

Natürlich könnte der QR-Code auch auf ein Facebook-Profil, auf dieses Blog, auf eine Firmenwebsite oder auf ein LinkedIn- oder Twitter-Profil verweisen. Der Code kann ja schließlich zu jeder Internetadresse der Welt verlinken. Ich fand jedoch, dieses ist nicht die richtige Augmented Reality für meine Briefumschläge oder meine Bücher. Daher hab ich mir schnell eine kleine Website erstellt, natürlich optimiert für Smartphones und Tablets, denn den QR-Code fotografiert man ja in der Regel mit diesen Geräten und nicht mit Notebook oder Desktop-PC. ►Hier gehts zu der Augmented Reality des abgebildeten Stempels. Diese simplen smartphone-optimierten Websites erstelle ich übrigens schnell und ganz ohne Programmieren mit einer iPad-App (die ich demnächst einmal vorstelle).

Nachmachen? – Empfohlen, ganz klar.

Den QR-Code kann man online erstellen bei http://goqr.me/. Davon wird dann einfach ein Stempel angefertigt. Fairerweise platziere ich noch die Internet-URL unter dem QR-Code, da manch einer ja keinen QR-Code fotografiert, von dem er nicht weiß, wo der hin verlinkt. Da soll ja denn auch keiner die Katze im fotografieren, ohne zu wissen, dass es eine Katze ist.