Countries Using Champions App

Apple iPad

iPad isn’t the first tablet to hit the market. There were many tablet laptops in recent years. Most of them ran Windows and had a full scale OS behind them. Compared to those iPad doesn’t have a full multi-tasking behind it. Has a closed appstore. Has exactly one connector port. Zero USB connectors. Yet I still think that iPad is going to be a great device.

To figure out why iPad is going to be a great device, let’s think about it from a non-techy, non-developer point of view. Imagine a person who doesn’t spend 16 hours of their day in-front of a computer screen. They are the casual PC users. Most of their activities during the course of the day involve: checking email, chatting, surfing, playing games etc. For all these tasks iPad fit perfectly. Most people use their computers to work on stuff in Microsoft Word, preparing their presentation in Microsoft Powerpoint etc.

iPhone revolutionized the usability of smartphones. For the first time an average consumer could simply browse to a store and buy an application which automagically downloads itself, installs and ready to be used without using any cable or wires or instructions for the users on how to install it. Magical! iPhone wasn’t about the device itself. Yes multi-touch was amazing, yes the screen was good and yes it had an apple logo at the back but what really made it amazing was the Appstore. For the first time a developer could push their work to the consumer in straightforward manner. If you have ever tried to find a decent Blackberry application and then download it and then install it you will know what I mean. It was a painful experience. With iPhone it was a pleasure. All information safe and secure, I don’t need to pull out my creditcard for the purchase, it is already there all safe and secure.

Now as a developer I know that there are issues with Appstore. It isn’t a perfect world out there. So yeah I don’t agree with some of the things Apple does with Appstore. At times their approval process doesn’t make any sense. But from a consumer standpoint, it is exactly what I wanted.

Over the past couple of days I have been having discussions with the team on what would be a great iPad application. We have already decided to create a Champions App for iPad. But we wanted to see how we can leverage that big multi-touch screen to create creative applications.

I am excited. Very excited. This is just the beginning.

So what does Champions do?

• Easy to read summary panels
• Games schedule
• Ball-by-Ball coverage
• Full scorecard

Why did we build this?

Frankly, there are a few cricket applications on Appstore that provide somewhat similar functionality but all of them lacked one  thing – usability. I have written a complete review of Cricinfo’s cricket application on iPhone and you can read my frustration there. We wanted to build an application that will make cricket easy and fun to follow. So this is our first step towards that.

One of the main design decision that went into this application was the “summary panels”. We wanted to allow our users to quickly look at the game summary without scrolling or tapping too much. So we decided to create “summary panels” which give you a quick summary of the game and allow you to view full scorecard or ball-by-ball coverage of the game quickly and easily.

This is just version 1.0, we hope to add many features in our next release.

Give it a try and tell us what you think. If you like the application please leave a review.

So what is wave? why am I talking about it? While the demo itself is simply amazing and the application looks like the next generation of Gmail evolution, what excites me more than anything is behind the scene technology.

If you are a web developer you might remember those good old days of web, when Javascript was a “client-side validation” scripting thingy. Now with the new and upcoming HTML 5 and Javascript ECMAScript5 coming to almost all browsers, we are seeing a new powerful platform. One that can help us built really high quality web applications.

So what’s all that special about HTML 5?

To get some context around this, let me recap what we currently use. Most of the websites (pretty much all of them) are currently on HTML 4 standard — which is a decade old standard. Web has evolved therefore HTML standard needed to evolve too.

So HTML 5 is being developed since 2004 and so far it is still being specd out. Which means that it will change over the next year or so before it is finalized, but the guts are out there now.

I won’t go into a lot of details about HTML5 in this post but would like to touch upon two things that really stood out for me:

1. Structure

How many times you have defined your HTML with class/id attributes structure it with header, footer, content, sidebar etc? HTML5 fixes this issue by providing new elements for representing each of these different sections. So elements like <header>, <nav>, <aside>, <article>, <footer> etc.

Makes it better for everyone to write and read the HTML code. Search engines can target your content and designers get to leverage it as well.

2. Video & Audio

We all have been embedding youtube videos for a while now. There is one in this blog post. HTML really didn’t have any way to allow embedding video and audio content easily into a website. So people had to use flash. So now in HTML5 we have an <video> and <audio> tags. Along with DOM API to manipulate and interact with the video and audio.

There is a lot more to the story. I will write in more details about the upcoming Javascript changes and what it means to us web developers. I am truly excited at the possibilities that it will bring to the web.

One such great technology is powered by PakTranslations.com – To see how awesome the technology is you can see the urdu version of Mazaydar.com!

So what’s this blog post all about? While I love their technology, one thing that bothered me was their UI. I think they can make the site and technology a great hit if can make users life easier. They already have a great way to do it but its sorta hidden.

So I spent about an hour or so last night, while I couldn’t sleep and came up with this small mock layout.

Some thoughts behind the layout:

1. My goal was to keep the focus on the cool technology. I certainly didn’t spend too much time on the logo, which can certainly use some work

2. The “Instant Translation” is a nifty feature. Users need to know that they can place http://www.paktranslations.com/? infront of any url to get it translated.

3. Bookmarklets are also awesome, I have been using them and they are just simply great to translate anything instantly.

I think the whole website is an amazing idea, a much needed innovation coming out of Pakistan. I am sure as they progress the technology will just keep getting better and better. But I also strongly believe that a good technology which isnt’ accessible is not worth much. People need to be able to use the technology easily to be able to provide feedback that is needed.

Note: The design is totally opensource for PakTranslations team to adapt.

So here is a quick tutorial on how to create a dropdown menu using nothing but CSS. I am not claiming that I am the only person to have figured this out. I am also not claiming that this is the best solution out there. This is just here for you to learn, and for you to tell me what/how can I improve on it. Its all about learning.

Here we go:

Markup:

<div id=”menubutton”>
<ul class=”button”>
<li class=”">
<h2><a href=”#”>Share / Bookmark</a></h2>
<ul>
<li class=”first”><a href=”#”>Email Friends</a></li>
<li><a href=”#”>Facebook</a></li>
<li><a href=”#”>Google</a></li>
<li><a href=”#”>Delicious</a></li>
<li><a href=”#”>Digg</a></li>
<li class=”last”><a href=”#”>Stumble Upon</a></li>
</ul>
</li>
</ul>
<ul class=”button”>
<li class=”">
<h2><a href=”#”>I am another button</a></h2>
<ul>
<li class=”first”><a href=”#”>Email Friends</a></li>
<li><a href=”#”>Facebook</a></li>
<li><a href=”#”>Google</a></li>
<li><a href=”#”>Delicious</a></li>
<li><a href=”#”>Digg</a></li>
<li class=”last”><a href=”#”>Stumble Upon</a></li>
</ul>
</li>
</ul>
</div>

The structure is a bit crude (i think) but essentially provides a “menubutton” div container that will contain all of our buttons. Each button is a UL list with an h2 element with an anchor element inside it. This provides us with a simple text heading for the button. The LI also contains another UL list that will be used as a drop down menu. For the sake of simplicity and time, I have given the first and last elements in this list class of first and last respectively. This helps in styling the button. You shall see.

The CSS:

The CSS for this whole this is like this:

#menubutton {
z-index: 30;
}
#menubutton ul.button, ul {
list-style: none;
margin: 0;
padding: 0;
margin-right: 5px;
float: left;
}
#menubutton a, #menubutton h2 {
margin: -2px 0 0;
padding: 3px;
}

#menubutton a {
font-size: 12px;
text-decoration: none;
color: #3c89c8;
text-align: left;
}
#menubutton a:hover {
color: #1b325f;
}
#menubutton li {
position: relative;
}
#menubutton ul.button li ul {
position: absolute;
}
#menubutton ul.button li ul li {
padding: 5px 10px 5px 5px;
background-color: #fff;
border-left: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
}

#menubutton ul.button li ul li.first {
border-top: 1px solid #e1e1e1;
}

#menubutton ul.button li ul li.last {
border-bottom: 1px solid #e1e1e1;
padding-bottom: 5px;
}

div#menubutton ul.button li ul {
display: none;
margin-top: 0px;
}

div#menubutton ul.button li:hover h2 {
border-top: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
}

div#menubutton ul.button li ul li:hover {
background: #eeeeee;
}

div#menubutton ul.button li:hover ul {
display: block;
}

div#menubutton ul.button li ul li {
margin: 0;
font-family: Arial, Helvetica, sans-serif;;
text-align: left;
width: 140px;
}

div#menubutton ul.button li span a {
display: block;
}

li.menubutton ul {
width: 140px;
}

li.menubutton h2 {
padding: 5px;
}

Phew, that’s a lot of CSS.. I am not going to go through the details of the CSS but going to touch on one little trick that is being used here that makes it interesting. The UL that represents the dropdown menu is initially hidden by “display: none” property. We setup over hover monitoring via css on the LI that contains the H2 title and set this property to “block”. Voila! This makes the effect simple and very powerfull.

Give it a try. See it in action.

As always, your comments/suggestions are always welcome. Maybe there is a better way to structure the CSS so that its easily themeable. But I didn’t spend that much time on this so wanted to keep it simple for my own proof of concept.

I really wish I had an android phone right now, Phonalyzr would save me a bundle by giving me that vital information. A very good friend of mine, Martin Drashkov, has come up with a brilliant application for android platform. He showed me a quick demo of the application and I was simply amazed.

Simply put Phonalyzr is like Google Analytics for your phone. It tells you exactly how are you using your phone to talk to the rest of the world. You can monitor yourself with this application and every month tweak your phone plan to the best possible plan for the best possible price. 

The most amazing thing is that this app is free! Awesome. Now I must get an android phone. For those of you who already have one, check out the application.