HTML5 vs Objective C, round 1
Welcome to this series of serious mobile web development. Here I'll most humbly guide you through some of my recent projects and show you just how much ass HTML5 and JavaScript (and sometimes frameworks like Titanium Mobile) may kick if handled correctly.
All the code will be hosted on my github and openly licensed. Since I'm a restless soul and my head nearly bursts of all the ideas I'd like to realize, I'll sometimes give you, dear reader, exercises to fork and enhance my projects when I move on. 'nuff said, let's get started.
This week's challenge:
One-upping one of the most popular iPhone apps in Sweden in less than a days worth of development
"Which one might it be?" you ask. GTA Chinatown Wars? Nah... sorry to let you down, but it's not. We have to start this series somewhere, though, so let's one-up the Teletext-reader TextTV, which is currently at place 13 among the Top Paid Apps.
For all impatient coders, here's the obligatory demo, working in iPhone, Safari 4 and Chrome. Enjoy it, and then come back for the rest of the post too, pretty please!
Let's be honest and realize that it's impossible to beat the TextTV app on all points in this short amount of time. I'm sure there are at least a few hundred hours behind it, and it supports a wide range of channels, all with their own web implementation. The point here, however, is that we'll have our prototype up and running in a day, and there's really nothing the TextTV app can do that we couldn't match or enhance.
To stand any chance at acheiving these challenges, it's crucial to have a thorough toolbox with the latest tools. I'll be using:
- jQuery 1.4
- Titanium Mobile
- other fellow web developer's frameworks and snippets as seem fit
Let's start with the markup
Markup
Ok. So lets dissect it. Did you notice the doctype? Take a look. Yes go on!
HTML5
Was your first thought "This dude doesn't even know how to copy and paste a valid doctype"?
Well, it is valid. Welcome to HTML5 - leaner and meaner in every way. I'll be sprinkling more tips and tricks all over this blog, so keep your eyes open.
Manifest
Did you spot the weird attribute on the html tag as well? That's a cache manifest, my friend. It's a plain text file containing paths to which files may be cached, and which must not. When a supporting browser encouters this attribute, it downloads and caches the specified files. Using this and the html5 database or localStorage, we can create web apps that functions without connectivity. Now this might sound like an oxymoron, but think about the possibilities. We can create apps that caches the users interactions while offline, and then sync them to the server once online.
The manifest in action looks something like this:
It tells the browser to cache all assets neccessary to start the app, but keep away from the API endpoint. Wanna read more? Checkout mozillas documentation. And for the love of good, do serve the cache manifest with a mime type of text/cache-manifest or your browser will either cry out in pain or just do nothing.
Web app tags
Worth noting is also the iPhone-specific meta and link tags in the markup. These help you create web apps that are quite native looking. They let us get rid of all the ugly bars and also lets us specify a nice icon for our webapp.
What more? Well, then there's the simple markup to hold the teletext pages, the pagenumber input and the install webapp notice, and that's pretty much all there is to it. We're going to create the rest of the markup we need on the fly and fill it with the teletext pages. Ready for some code? Well, you'd better :)
Code
As this is my first post, and I realized that I wanted to write about it after I wrote the app, I'll just flesh it out here for you to dissect. In the upcoming posts, I'm intending to be more pedagogical and let you follow me on a codeful journey à la 'A christmas carol' and show you just how the rabbit hole is dug. But this time, I'll let you do your thing. The code is quite readable, following the singleton pattern. There are sub objects regarding initializing, touch handling, page handling and pagenum handling.
You'll see som weird -webkit-prefixed CSS properties. These are responsible for the fluid animations using CSS Transitions. The iPhone is a powerful device being a diminutive phone, but its performance fades when compared to full fledged computers. This makes javascript execution slower, so we need to take care of our cycles. Luckliy, Apple has pioneered CSS Transitions and CSS Animations, and made them hardware accelerated. This makes the iPhone capable of handling otherwise impossible feats.
You've read each single character now, right ;)
CSS
The only thing noteworthy in the CSS are pretty much the webkit-specific parts, like the part on line 33 - 36 which are responsible for the smooth transitions.
Demo
Hit http://bit.ly/texttv with your iPhone or a recent webkit browser like Safari 4 or Chrome and play around. Notice that you can press the pagenumber up left and change page. To navigate between pages you swipe up and down, and to reach subpages you swipe left and right. Pretty sweet, hey?! Did I even come close to achieving the challenge of beating the TextTV app? If not, why and how should it be done?
Please bear with me as i find the right way to go along with this blog, and do come with comments and questions!
Now, my head is already bursting with the next idea :)
8 comments
And stay tuned, because in my next post, I'll be making a native iPhone app using Titanium's magic :)
I'm thinking of altering the code though, maybe changing installMessage color to pink and calling it New Supreme Maximised Infoprovider Of The Millenimium Of Awesomeness Ultimate TeleText Viewer.
Yes?
Less is more. :-)
You have better readability without the topbar.
You see more of the page in wide screen wiew.
Nicer jumps between the pages.
Only problem is shaking just resets the page.
If a shake would create a total reset I would use your app for all my texttv reading, i e a lot.
Ciao!
/Niklas
Nice with a quick respons!
I have been thinking a little and I do have some suggestions.
Hope to encourage you even more so wonders do happen. :-)
Do keep txtv lean. That's what is nice with it and it also makes it different from TextTV.
1. The most important thing is the update mechanism. One wants the latest news. That is why you use text-tv in the first place.
I think the problem might be connected to iPhone4. SvT-play has a similar problem.
To make SvT-play update you have to turn the iPhone off and on to clear the memory.
I guess it is because the iPhone4 works with parallell programs and therefor keeps the old information in the memory.
The easiest way to solve the update problem would be to make txtv automatically update all pages when you start it with clicking on the symbol on the homescreen. (Besides the shaking is actually a bit of an awkvard move when you are reading.)
And if so, you could probably make txtv clear its part of the working memory earlier used when you click on the homescreen button.
And what about extra features in a lean product?
Some suggestions :-)
2. You use the up and down sides to go back and forth in order of page numbers. Real nice.
But you could add the left and right sides to go back and forth among the pages one has actually used.
I have no idea how to code it, but it is improtant that the changes of the pages is as smooth as the ones in number order.
Shte smoothness is one of the
3. It would also be really nice to be able to go back to page 100 in an easy way.
What about using a "two-finger-click" for that. Check out "SimpleDraw", nice and simple app.
Or if it is difficult to program, the upper right corner is still free.
4. One also needs to have easy access to the instructions for the app. Even if it is lean and simple. :-)
To begin with it would be nice to see it just a little longer when you start the program.
(Maybe it is so short because the iPhone4 is faster and the instructions only show during the upload of the program?)
You could link the instructions to the shake. Or put it on a left click from page 100, sort of like page 99. Maybe both?
But what I think I would prefer most is page 100 on the two-finger-click and instructions in the upper right corner.
5. This is not as important as the other suggestions, but anyway.
You could include in the instructions that clicking on both the buttons take a snap-shot of the screen.
Or you could link the snap-shot to the two-finger-click, page 100 to the upper right corner and instructions to the shake and "page 99".
A matter of taste, how lean you want it and how much you like to hack code. :-)
Nice things with txtv that would be nice to keep:
To use the number pad through the upper left corner is very good.
The change of pages is extremely smooth and nice. Try to keep it with the left/right-clicks.
Good to see the whole page in wide screen mode.
Simple, lean and gets the job done quick and easy. :-)
Keep up the good work!
Happy Christmas and Best Wishes!
/Niklas
I read some above and realise that I had missed that the under pages are linked to the right and left sweap. Maybe you could link the under pages to the lower left and right corners?! It would be really nice to have the opportunity to also go back and forth among the earlier chosen pages.
And since I obviosuly haven't read the instructions properly, this only shows it would be good with easy access to the instructions... :-)
And by the way, I guess txtv might have to understand sweapes, but I really prefer just klicking on the sides of the page.
Good luck working wonders!
/Niklas
