iOS Flipboard - How does it work?

[jnoxx]

Hai guys! 🙂

Im new to this forum 🙂 So let's give this a go, I have some questions etc.

I am trying to try some new things for idea's as apps.
Let's say there is a website, with some articles on it (so an image/title/article).
How would I render it into something like Flipboard? No one knows how this works?
i heard they have buttloads servers who render everything and then send it back to the user.

What I want to do is, like, scrape all the info, put it into, let's say, view 1.
And then switch over to view 2, and show second article there. But I have no idea where to start, or find info, I hav ebeen googling since last friday, and meh. All I hear is like, use Indesign 5 plugins like woodwing, and mobify me etc. and then show it to the user like that.

Hope some people have more experience in what im trying to accomplish! 🙂

Greetings, Noxx

 

[mrl72]

I was actually able to reproduce their functionality to a degree. I am not sure why they are pre-rendering the pages but my guess is they couldn't do it natively in the app so instead they have a webview which displays the rendered page. My test app pretty much did the same except I kept the html pages local. Here's how I did it:

1. Create a photoshop template and drew the areas/columns. Pretty much copied one of their page layouts. Slice up the page using the slice tool and export as HTML. This creates a nice html layout that you can easily insert images and text into.

2. Opened html page and typed in a variable into each area ie top_area, left_area, right_area.

3. Wrote some code that pulls in from a RSS feed and then opened the HTML page and did a find/replace. So for example if I had 3 articles. For the first article find/replace top_area with article_text, then 2nd article left_area and so forth. Obviously you'll need to figure out things like image size so you can resize it to fit within the area and truncate the text so it doesn't overflow the area etc.

The problems I found was mainly with the RSS feeds. Some feeds include full articles, some just titles and links, some images, some not, some small images, some articles have a bunch of crap at the end of them that I had to remove etc. So in the end I just gave up since Flipboard/Tweetmag etc. seem to dominate that space and will be hard to develop something better (at least for me anyway!).

Hope that helps.

 

[jnoxx]

I was actually able to reproduce their functionality to a degree. I am not sure why they are pre-rendering the pages but my guess is they couldn't do it natively in the app so instead they have a webview which displays the rendered page. My test app pretty much did the same except I kept the html pages local. Here's how I did it:

1. Create a photoshop template and drew the areas/columns. Pretty much copied one of their page layouts. Slice up the page using the slice tool and export as HTML. This creates a nice html layout that you can easily insert images and text into.

2. Opened html page and typed in a variable into each area ie top_area, left_area, right_area.

3. Wrote some code that pulls in from a RSS feed and then opened the HTML page and did a find/replace. So for example if I had 3 articles. For the first article find/replace top_area with article_text, then 2nd article left_area and so forth. Obviously you'll need to figure out things like image size so you can resize it to fit within the area and truncate the text so it doesn't overflow the area etc.

The problems I found was mainly with the RSS feeds. Some feeds include full articles, some just titles and links, some images, some not, some small images, some articles have a bunch of crap at the end of them that I had to remove etc. So in the end I just gave up since Flipboard/Tweetmag etc. seem to dominate that space and will be hard to develop something better (at least for me anyway!).

Hope that helps.

Dear sir,

That was one nice answer, thanks alot! Now I have a bit more stable basis to do my research on, if u know what I mean 🙂

I'm still interested tho, in how to accomplish this.
Since u dropped the project, maybe we could work together on it, and eventually make it as an tutorial for the community? (Macrumors, iphonedevsdk, etc?) 🙂
Just an Idea, because, i'm also interested in some stuff, to check it out.
Since im like UNABLE to work with photoshop x) im just a programmer who normally uses basic interface.
So hit me up if u have anything to share, or piece/bits, or the whole stuff u did.
🙂 think alot of people are looking after it, and they can maybe improve it too ^_-

Hope to hear from u soon man,

Gz, Noxx

 

[mrl72]

I wish I could provide some example code but I only got as far as a quick test.

 

[jnoxx]

I wish I could provide some example code but I only got as far as a quick test.

Well if it works, i'd like to see it bro 🙂

Thanks alot

 

[iansampaio]

Just an Idea, because, i'm also interested in some stuff, to check it out.
Since im like UNABLE to work with photoshop x) im just a programmer who normally uses basic interface.

Have you heard of Boxee? I'm developing some content to it using Yahoo Pipes to scrap the content from websites when I find limited rss! As a designer I'm limited on programming but I can tell that I'm also very keen in do for watching TV what Flipboard have done for reading!

 

[jnoxx]

What i'm doing is just build several frameworks for making magazines, and after they are done, I think I will sell them for people who are interested. easy as that x)
The RSS stuff like Flipboard aside, because they are doing illegal things, and Apple lets them do it, which makes me angry as a normal developer. Because they are all about the rules, but can't even rely on them theirselves..