mail usprint this pagerss feed

www.liip.ch

Liip is hiring!

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).

Related Entries:
Open Sourcing Radios - A PhoneGap iPhone/iPad app
Radios for iPhone/iPad with background audio on iOS 4 released
The technical details behind the Radios App
Liip Mahara Hackday success
What's NIWEA?
Comments (20) |  Permalink

Comments

Walter Schärer @ 22.07.2010 09:28 CEST
I thought Google Chrome was an okay 'modern browser', but your proof of concept doesn't support it?
adrian @ 22.07.2010 09:30 CEST
On my Safari (5.0) it does not seem to work. There is no content showing up :(
chregu @ 22.07.2010 09:31 CEST
Ooops, we forgot to test on Chrome, will try to figure it out. But it definitively works on my Safari 5
chregu @ 22.07.2010 09:37 CEST
Fixed, should now work on chrome, too :)
René @ 22.07.2010 09:40 CEST
I'd like to see some source on github. Thx
René @ 22.07.2010 09:43 CEST
BTW, your hackdays sound like a lot of fun. Are non-liipers welcome to join?
chregu @ 22.07.2010 12:54 CEST
René: yeah, why not. Maybe we will make the next interesting one public
Bertrand Delacretaz @ 22.07.2010 14:50 CEST
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 ;-)
chregu @ 22.07.2010 17:01 CEST
Here it is
http://github.com/liip/niweaapp
retokuhn @ 22.07.2010 17:02 CEST
would like to join a future public hackday as well...
This @ 22.07.2010 22:33 CEST
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?
Chregu @ 22.07.2010 22:44 CEST
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.
This @ 23.07.2010 15:56 CEST
Well, I'll try as soon as I am back in the office on an Archos 7 tablet...
This @ 26.07.2010 20:37 CEST
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?
chregu @ 27.07.2010 09:30 CEST
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)
Hannes Gassert @ 29.07.2010 07:43 CEST
Do you guys plan any next steps here, how does the story continue? Are the Tagesanzeiger folks interested ..?

Cheers from Isfahan/Iran,
Hannes
chregu @ 29.07.2010 14:48 CEST
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 :)
Matthias Saner @ 11.08.2010 17:30 CEST
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.
Fime @ 24.08.2010 19:00 CEST
Very nice App. Would IT Be possible to implement the two Side swipe (horizontal and Vertical) As in the Schweizer illustrierte App.?
chregu @ 25.08.2010 08:24 CEST
Fime: Should technically be possible, I don't see why not :)

add a comment

Your email adress will never be published.
Comment spam will be deleted!

For Spammers Only
Name*
E-Mail
URL
Comment*
Notify me via E-Mail when new comments are made to this entry
Remember me (needs cookies)