The Tagi iPad App done in NIWEA aka html5/CSS

Some weeks ago, I was pondering if it would be possible to do a native App like the Tagi iPad App (a typical newspaper app) in pure html(5)/CSS/JS (aka Niwea). So I did what a Liiper often does when he wants to explore an idea: Organize a Hackday.
Last Wednesday, Gerhard, Pierre, Fabian and I sat together and started from scratch with the project. To make the content and design part easier, we simply took the Tages-Anzeiger App as the guide. We didn't want to do something completely new, we just wanted to proof, that you can deliver a very similar experience to the end user with "just" an optimized website as with a native app.
So here's the result: http://labs.liip.ch/niweaapp/ (best seen on an iPad, but works on any modern browser)
It uses localStorage for saving the content locally (it doesn't work totally offline yet, but that would be doable in another day :)), fancy CSS stuff and some heavy magic on the swiping stuff. It also uses Pierre's excellent dispatcher library for Javascript based apps (see his talk about PhoneGap for more about that) and Hyphenator.js for more readable text, something the iPad App doesn't provide. It also has different layouts for landscape and portrait. The "app" of course could use some polishing here and there, but for only one day work with 4 persons, I'm pretty pleased with the result.
The code is published on github.
Btw, we didn't ask the Tages-Anzeiger, if it's ok to use their content for this "Proof Of Concept". I hope it is for them, if not, we will certainly find other interesting feeds (it takes RSS feeds as input and converts them to JSON on the server, so it would basically work with any feed, maybe some adjustments needed for the pictures).
Comments
I thought Google Chrome was an okay 'modern browser', but your proof of concept doesn't support it?
On my Safari (5.0) it does not seem to work. There is no content showing up :(
Ooops, we forgot to test on Chrome, will try to figure it out. But it definitively works on my Safari 5
BTW, your hackdays sound like a lot of fun. Are non-liipers welcome to join?
René: yeah, why not. Maybe we will make the next interesting one public
Confirmed, works with Chrome 5.0.375.99 macosx now.
Great stuff...happy to see someone working against the "let's reinvent interactive CDROMs" movement ;-)
Looks great. Let me know, when you are in Bern with your iPad sometimes. I would be glad to see it live. How complicated is it to adapt it for Android?
This: what Happens if you open it in an android web browser? Can you swipe the front pages? Can you click on a picutrenand read an article?
On the iPhone it's all too large but the basics work.
Well, I'll try as soon as I am back in the office on an Archos 7 tablet...
Well, on Android 1.5 (it's still this one on Archos new tablet) it says: "Can't find variable: localStorage"... By the way: Is it possible to use more advanced features like geolocalisation and so on?
This: Oh, looks like Android 1.5 doesn't support the localStorage stuff. We have to rewrite some stuff, to make it work on such devices too. I made a ticket http://github.com/liip/niweaapp/issues/issue/1 :)
Geolocalisation is also supported on such sites (at least on browsers who support it, like Mobile Safari). But for example Vibration and Push Notifications are not possible (but with Phonegap as wrapper to Niwea Apps, they become possible again)
Do you guys plan any next steps here, how does the story continue? Are the Tagesanzeiger folks interested ..?
Cheers from Isfahan/Iran,
Hannes
No, no more big steps planned with it. We did proof it and try some more things with it, but nothing groundbreaking.
We had some great feedback, and it already was useful for some showcases. And The interest of at least one guy of the TA conglomerate is here in the comments :)
Hi Chregu & team. Quite impressive what you did here in a day! It is a valuable and factual input to the whole app development discussion. So I'am happy you used our TA app as a blueprint.
Very nice App. Would IT Be possible to implement the two Side swipe (horizontal and Vertical) As in the Schweizer illustrierte App.?
add a comment
Your email adress will never be published.
Comment spam will be deleted!
