If you know jQuery and iPhone, you must know jQTouch. It's a very awesome plugin for iPhone web apps. It supports animation, geolocation, swipes... well, everything. And these apps (made with jQT) aren't limited to iPhone — I can use them on my Windows Mobile phone with Opera 10 :)
So imagine that we need a to-do app. But first you must know the difference between iPhone and iPad applications.
iPhone ones can display only one screen — list of items or one of these items.
iPad ones can display both at the same time. Just because of the biiiiig screen! (we're focusing on landscape mode right now)
Let's design this app. Just one screen with no functionality — I said «design».
<!DOCTYPE html>
<html>
<head>
<title>iPad To-do</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://krosswordr.ru/site_media/i/jqtouch/jqtouch.min.css" />
<link rel="stylesheet" href="http://krosswordr.ru/site_media/i/themes/apple/theme.min.css" />
</head>
<body>
<div id="main" class="current">
<div class="toolbar"><h1>iPad To-do</h1></div>
<ul class="rounded">
<li class="arrow">Inbox</li>
<li class="arrow">Today</li>
<li class="arrow">Tomorrow</li>
<li class="arrow">Scheduled</li>
<li class="arrow">All tasks</li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://krosswordr.ru/site_media/i/jqtouch/jqtouch.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$.jQTouch();
});
</script>
</body>
</html>
Well, it was easy. If you want to make an app for iPhone, you should add another screen now. But we want it for the iPad, right? My latest creation, Invisible CSS Framework comes right there. We'll make two columns instead.
this code! fork it!
That's right. It's awesome! Now it's your job to add functionality and make a better design ;) And follow me on Twitter.
