Communication - Content and Navigation (Ideas)

[emmell70]

Hi, I'm Marko and I asked the following question a bit earlier as a comment at lakerscompendium.com. Here now again: Is there a way to communicate between Content and Navigation via javascript. I played a few days with lakercompendium and I tried to build a kiosk. the kiosk is running but on the change from magazine to magazine it is necessary to change the navigation.

I'm a journalist and blogger who wants to have a way to bring my blog to the iPad. But i'm not a javascript-expert. More a beginner. lakercompendium makes it easy but for an absolute beginner is it terrible enough.

I found two ways which can solve my problem - maybe?? First way: localStorage - I can change a variable via javascript in the content-area and can read it in navigation-area. But can I change the whole navigation-area when the localStorage-variable is changed in content. There is a Storage-Event in javascript but I don't understand this. (Sorry, I said I'm a beginner!!)

The second way is: If I change the localStorage.Item in content, I read it in Navigation via a timer. This runs now, but it is not very elegant. I think a storage-Event would be better - if I understand this in the future and someone can explain to me ;-)

My English is not very good - I repeat this now in my native language: German ;-)

---

Hallo,

ich fragte das Folgende bereits als Kommentar auf lakercompendium.com. Florian bat mich allerdings, dies hier nochmal zu wiederholen, was ich in doppelter Hinsicht tun möchte - zum einen, weil ich etwas weiter bei der Lösung des Problems bin, aber noch nicht am Ziel. Die zweite Wiederholung auf Deutsch, weil mein Englisch nach jahrelanger Nichtbenutzung doch etwas eingerostet ist.

Also Folgendes: Ich bin auf der Suche nach einer eleganten Lösung, um den Inhalt des Navigationsbereichs zu ändern, wenn im Contentbereich etwas passiert - in meinem Fall der Klick auf ein Cover in einer Kiosk-Lösung, die ich mir mit dem lakercompendium und basierend auf dem Laker-Beispielprojekt gerade zusammenstopple. (Dazu muss ich vielleicht erwähnen, dass ich Journalist und Blogger bin und von Javascript so gut wie keine Ahnung hatte bis vor einigen Tagen - weshalb mir diverse Antworten in anderen Foren auf meine Frage auch nur wenig brachten, denn ich spreche schlecht Englisch aber wohl noch schlechter Programmierer-Sprache. Denn mit den Antworten konnte ich nur wenig anfangen. Weil es aber dank lakercompendium nun einen - vergleichsweise - einfachen Weg gibt meinen Traum zu verwirklichen, nämlich meinen Blog als Magazin aufs iPad zu bringen, habe ich mich mal daran gesetzt und versucht etwas aus Codeschnipseln und einigen Anpassungen zusammenzubauen. Der Wunsch ist dabei immer der Vater des Gedanken.;-) )

Ich habe inzwischen zwei Wege gefunden, wie es möglich sein könnte: Weg 1: localStorage: Bei einem Klick auf das Cover eines Magazins in meiner Anwendung wird dieses Item mit einem Wert gefüllt (Nr. der Magazinausgabe). Gleichzeitig wird via Ajax dann auf der folgenden Contentseite in einen Content-Div-Container der Inhalt der entsprechenden Ausgabe geladen. Leider habe ich das Konzept des storage-Events noch nicht begriffen, weshalb ich in Navigation das localStorage.Item zwar auslesen kann. Aber es passiert nichts automatisch. Leider - dazu fehlen mir wahrscheinlich die Javascript-Basics. Vielleicht weiß hier ja jemand eine Lösung, die ich auch verstehe?

Weg 2: Den habe ich gewählt, auch wenn er mir nicht wirklich elegant erscheint, aber an meinem Code ist insgesamt so wenig Elegantes, dass es darauf nun auch nicht mehr ankam ;-) Im Navigation-Bereich läuft ein Timer (jquery.timers-Bibliothek), der alle paar Sekunden die in LocalStorage gespeicherte Variable vergleicht und im Falle einer Änderung dann etwas macht - nämlich das passende Inhaltsverzeichnis zur gewählten Magazinausgabe laden.

Mein Konzept insgesamt (darf ich das hier verraten? - klar, die App soll es dann ja schließlich kostenlos geben, so dass viele Blogger was davon haben): Ich lege eine Reihe von Dossiers an. Besteht keine Internetverbindung, wird eine Offline-Variante des Magazins angezeigt (allgemeine Infos usw.). besteht eine Internetverbindung werden die Online hinterlegten Magazin-Cover geladen und via Ajax nachgeladen, je nach Auswahl. Durchgeschleift wird immer die localStorage-Variable mit der Ausgabenummer anhand derer immer die passenden Seiten nachgeladen werden. Es gibt also eine feste Anzahl von Dossiers (Kiosk,Startseite,Dossier1....DossierX). Sollte ein einzelner Beitrag mehr Infos verlangen (Hintergrund etc. löse ich das direkt via Ajax-Aufruf auf der Dossierseite. Schön wäre nun, wenn es seitens lakercompendium eine vom AppStore angeratene Meldung gibt, die nach Prüfung des Online-Status anzeigt, dass bei Fehlen einer Internetverbindung nur der begrenzte Funktionsumfang zur Verfügung steht (Apple bittet/verlangt so eine Meldung meines Wissens). Bisher löse ich dies auch via Javascript (erzeugt ein Ajax-Aufruf einen Error wird ein Alert angezeigt), weil ich von der XCode-Programmierung erst recht keine Ahnung habe.

Hier mal der Link zu einem kurzen Video mit meinen ersten Ergebnissen, falls es jemanden interessiert: http://dl.dropbox.com/u/4029068/lc001.mp4

Sollte hier jemand mit Ahnung von der Programmierung Lust haben, an diesem Projekt mit mir zu arbeiten, gerne.

Gerne auch in Englisch, wenn mein rudimentäres Gestammle nicht stört und ich das Wörterbuch daneben liegen habe ;-)

Grüße sendet Marko

Bin für jeden Tipp dankbar....

[ffranke]

Hey Emmel, just to understand it correctly: You load the content of navigation.html dynamically? Or are all information stored in that HTML and depending on a javascript variable only a certain part is displayed?

Overall interesting concept, but I don't know if it's logical from a user-interface-standpoint to display issues on the second "dossier". Or maybe I didn't get it... On your first dossier all issues are displayed and ontouch you get redirected to DossierXY which represents the issue. But how do you manage multiple Dossiers in one issue?

aLittleBitConfused ;)

Cheers, florian

P.S. I write it in english so more people can contribute to your problem...

[emmell70]

Hi, yes I load the navigation.htm dynamically. I hope that I'm understanding the rest of your comment correctly - you know- may English... My concept is: I have an Offline-Set of Pages: Kiosk, Startpage/Titlepage of the magazine and Content-Pages (Dossier1 ... Dossier X). On the initial-load the App is trying to load a file over Ajax from an URL - it is very small, only a json-File thats stored the magazine-number and the date of the magazine (I plan a weekly magazine) . If this successfull then I have a number of the magazine as an variable (locatStorage.setItem("Ausgabe",'001')) for example. That the way Apple recommends to store data (official documentation). If the Ajax-Access isn't successful (error), then the I fill the localStorage with 'off' and display an alert-window, that mean you should better have a net-connect to read more magazines. If my variable is 'off' the User can only read one magazine - the Offline-Magazine stored in the App. If my variable not 'off' then the User has an internet-connect an can read more magazines - you remember - loads with the initial Ajax-json-File that content looks like this: { "002": "23. Mai 2011", "001": "21. Mai 2011" } If there an internet-connect, every Dossier in the App loads over Ajax other files. I use the localStorage-variable for the folder-names on my server. If the is no net-connect it loads the static Dossier in the iPad-App.

I hope, that I explain this right in my bad english. Here my repetition in German:

(Sorry to all native English-Speaker - in German is it a little bit more and in more detail.)

Ja, ich lade die navigation.htm dynamisch. Zuerst habe ich auch gedacht, mir würde das Standard-Beispielprojekt reichen. Aber dann hätte ich immer für jedes Magazin eine neue App in den Store bringen müssen. Sehr mühsam. Außerdem machen es Tagesschau, HuffPost usw. ja auch nicht so, sondern sie laden Inhalte dynamisch nach. Leider habe ich weder das Geld, um mir wie die großen Verlage eine an InDesign gekoppelte Lösung zu besorgen (Woodwing) oder eine App programmieren zu lassen (wie die Tagesschau). Also war noch die Möglichkeit, aus dem Laker Compendium mehr rauszuholen.

Mein Ansatz ist folgender: Ich habe ein Set von Seiten (Kiosk, Start-/Titelseite des Magazins, Artikelseiten - hier Dossier genannt). Beim Laden der App wird die alphabetisch erste Seite von der App angezeigt (A.html bei mir - der Kiosk). Hier wird beim Aufruf (window.load resp. document.ready) versucht über die Ajax-Funktion eine Datei aus dem Netz zu laden. Eine winzige json-Datei die so aussieht wie oben (Ausgabenummer, Datum der Ausgabe - das Datum ist eigentlich Wurscht, aber zunächst plane ich, Beiträge aus meinem Blog wöchentlich für das iPad aufzupeppen, da ist das Veröffentlichungsdatum ein guter Indikator). Geht das schief (error) ist davon auszugehen, dass keine Netzverbindung besteht. Damit die App trotzdem noch einen Sinn hat, kann der User dann eine Offline-Ausgabe lesen, die in der App vorhanden ist (also praktisch wie dein Beispiel-Projekt). Ich packe da allgemeine, vllt. touristisch interessante Informationen über die Region rein, über meinen Blog, angebotene Werbeformen etc.). Meine Variable (localStorage) kennt nur einen Zustand 'off'. Der wird bei jedem Ladevorgang eines Dossiers abgefragt.

War der initiale Ajax-Zugriff aber erfolgreich, dann ist davon auszugehen, dass eine Internetverbindung besteht. Also fülle ich den Kiosk mit den Covern meiner bisher erschienenen Ausgaben - 'off', '001', '002' usw. Den Zeitpunkt der Veröffentlichung kann ich ganz schlicht regeln, indem ich am Anfang meiner json-Datei eine Zeile einfüge: '003':'30. Mai 2011';

So weit so gut. Beim Klick auf eins der Cover setze ich also die localStorage-Variable auf zB. '002'. (Sorry für meine Ausdrucksweise, aber ich bin nun mal kein Programmierer, sondern dichte mir das per reiner Logik immer zusammen und forsche dann im Netz nach Funktionen, die diese oder jene Aufgabe erfüllen könnten.) Die App weiß jetzt: "Ah, Nutzer will Ausgabe 002 lesen und er ist Online, denn sonst wäre die Variable ja nicht 002.' Mit einem Swipe wird dann die Titelseite des Magazins geladen (schönes Bildchen zu einem Thema aus dem virtuellen Heftchen, ein paar Headlines usw. sieht man ja.) Die Titelseite hat keine weitere Funktion, nichts geht da, kein Klick usw.. Erst hatte ich überlegt, ob die Headlines klickbar sein sollten, habe mich aber dagegen entschieden, weil es die Nutzer wahrscheinlich eher verwirrt: Warum kann ich denn nur zwei Artikel anklicken? Gibts hier etwa nur zwei, lohnt sich ja gar nicht etc... Das wollte ich vermeiden.) Also: Titelseite zum Anteasern. Punkt. Aber jetzt bin ich ins Inhaltliche abgedriftet.

Immer beim Swipe wird die neue Seite ja G E L A D E N. window.load war also mein Freund, in das ich die weiteren Ajax-Aufrufe gepackt habe. Aufgerufen wird übrigens anhand der Variable: http:// www. meinblog. de/ipadextern/002/....usw. Die auf dem Server liegenden Seiten sind nur Teil-Seiten. Sie enthalten nur das, was in einen content-Div-Container hineingeladen werden muss. Klappt der Ajax-Zugriff, wird die Datei vom Server geladen und angezeigt. Klappt das nicht (error) weil der Nutzer den Flugmodus eingeschaltet hat oder kein 3G-Netz mehr da ist oder oder oder..., wird localStorage zu 'off', der Nutzer auf die erste Seite geführt wo es dann nur noch das Offline-Magazin gibt. Voila.

Na ja, nicht ganz... denn die navigation.htm hat mir viel Kopfzerbrechen bereitet - eine ganze Nacht habe ich durchgegrübelt. In navigation.htm konnte ich zwar localStorage auslesen. Aber wie die Seite neuladen, ohne dass auf der Seite selbst was passiert? Ich weiß, dass es ein StorageEvent in javascript gibt. Nur hab ich bislang nicht kapiert wie man ihn richtig einsetzt oder einbaut. Da zeigte sich wieder mal, dass ich eben doch nur Anfänger und Nicht-Programmierer bin. Gelöst habe ich es jetzt erstmal über ein TimerEvent (da gab es ein Stück Beispiel-Code irgendwo im Netz, den ich einfach per Copy-Paste geguttenbergt habe.) Alle 5 Sekunden wird überprüft, ob eine initial in Navigation gesetzte Variable mit localStorage übereinstimmt. Ist das der Fall, alles paletti, der Nutzer liest die Offlineausgabe. Hat er aber ein Cover des Magazins angeklickt, liest er eine der Online-Ausgaben und braucht dazu natürlich auch eine andere Navigation, die ich jetzt mal "Inhaltsverzeichnis" nenne. Sind die Variablen also unterschiedlich, wird wiederum eine Ajax-Abfrage gestartet, die keine Contentseite sondern die passende 002-toc.html vom Server inkludiert. Und boom, schon ist die passende Navigation da. Amazing... ;-)

Nun habe ich das Ganze mal ein bisschen weitergedacht und -gemacht, denn die erste Online-Magazinausgabe wächst ja bereits (immer im Hinterkopf behalten, dass ich nur fürs iPad denke, als Freier Journalist, der darin eine große Chance für die Branche sieht): Das iPad ermöglicht Publikationen, die über eine Zeitung hinaus gehen, die aber auch nicht für den Computer gemacht sein können, denn den nimmt man meist nicht mit ins Frühstückscafé. Lesevergnügen, Information - verpackt in multimediale Präsentationsformen, Bildergalerien, durch die man sich "durchwischt" usw. Als Publizist, freischaffend und mit immer schmaler werdendem Geldbeutel und Honorarsatz, bliebe da nur die Möglichkeit, Webseiten zu bauen. Aber das ist ja sowas von gestern, also sowas von.... ;-) Dank Laker Compendium kann man nun aber auch als nicht betuchter Publizist mit HTML-Kenntnissen ein Magazin, mit meinen Anpassungen eine ganze Reihe davon, machen. Dank Hype von http://tumultco.com sind auch HTML5-Animationen möglich für Infografiken usw. Hab ich heute grad zu meiner Unfallgeschichte gemacht: Verkehrsunfallstatistiken mit wachsenden Balken usw. schnuckelig. Worauf ich hinaus will: Dank Deines Compendiums eröffnet sich für freie Publizisten eine ganz neue Plattform und ganz neue Darstellungsformen im Journalismus.

Doch es fehlt noch einiges. 1. Das Inhaltsverzeichnis nicht durch einen Timer laden... ;-), 2. eine Namenskonvention muss eingehalten werden - noch. 3. Die Inhalte auf den Servern müssen (noch) händisch erstellt werden. Aber vielleicht kommt ja ein pfiffiger Entwickler darauf und bietet ein natives Programm an oder ein Plugin für ein Wordpress-Blog oder ähnliches, was natürlich vieles erleichtern würde. Alles Sachen für die BlogMagazine.App 2.0 oder später. Zunächst ist mein Ziel, das Ganze logisch für mich zusammenzubasteln und dann die App tatsächlich in den Store zu bringen. Das geht hoffentlich schnell. Mal sehen. Hab noch nie eine App bei Apple eingereicht.... Bin gespannt.

So nun habe ich viel geschrieben - du kannst dir sicher vorstellen, dass mir das in Englisch sehr schwer gefallen wäre. Grüße sendet Marko

[ffranke]

Hey Marko, wow, thank you for your extensive answer! Clever how you approached the problem. I understood everything, but one question came to my mind: Are the page numbers fixed per issue? I thought the app looks at the book-folder on startup, counts all HTML-Files and generates the swipe-mechanism. Or did you find a way to do that dynamically?

Thanks! florian

[emmell70]

Hi, yes, sorry for so many words. I hope it was not to much? The page numbers are fixed. Thats a problem for a solution in the future. But a classical newspaper has also fixed page numbers - in my region most 16 pages. Only 2 of them are width local informations. But - if i need more than one page for a topic and I don't need the swipe, i can load pages via button and Ajax. Its not so elegant like the swipe but it is a possibility.

---

Sorry für meinen Rede-/Schriftschwall. Ich hoffe, es war nicht zuuu viel.

In der Tat ist die Anzahl der Seiten begrenzt auf eine anfänglich in der App festgelegte Seitenzahl. Zumindest wenn man auf den Swipe-Mechanismus wert legt. Gehts es auch ohne, zum Beispiel bei mehreren Unterseiten zu einem Thema, dann kann man via Ajax und Buttons ja so viele Seiten in den content-Div-Container nachladen, wie man möchte. Das ist nicht sehr elegant aber eine Möglichkeit.

Ich hoffe nur, dass bei all meinem Gequatsche hier nicht mein Hauptproblem unterging: Wie mach ich das denn nun mit dem storage-Event? Irgendwie steht in diesem Fall einer auf der Leitung bei mir... Ich krieg es einfach nicht gebacken - schlimmer noch - verstanden.... ;-)

Ciao Marko

[BTermorshuizen]

Hi,

i'm also playing around with it (a bit).

my present approach is to create a 'library' page containing dossiers (pics), each with buttons 'download' or 'archive' and 'view' next to it. (based on a json data similar to what marco is doing, coming from a web server), all in objective-c.

When a user clicks on the download button, it downloads the dossier in the normal way (unzip & store) When a user clicks on the view button, it's relatively standard laker/baker - only need to set the correct path to the dossier when instantiating. When a user clicks on the archive button, it's freeing up the internal storage.

After i've finished that, i need to change the laker stuff with a button that shows up on double tap that allows the user to navigate back to the library page.

anyways, feedback on this approach is greatly appreciated!

Bart

[ffranke]

So you're implementing that library-page via xcode? Similar to the adobe-magazins? How far have you come?

[BTermorshuizen]

that's the idea - and yes - the adobe digital content viewer (also what conde nast is using) is the inspiration. I havent done much yet - playing around with dynamically creating the ui elements and stuff based on a json string and making sure that the event handling is in. I'm gonna spend some time on it over the weekend. Doesn't look too complex though.

what do you think of the approach?

Maybe we should consider implementing in-app purchases and roaming off a distribution fee to be on-par with adobe ;-) (this is really off-topic)

[ffranke]

Hey Bart,

cool, keep me updated how it's going! Would be cool to integrate it! ;)

Cheers, florian