Information Technology Reference
In-Depth Information
Your First Mobile Web Application
Grab yourself some coffee and do a little stretching because now it is time to start some
coding. The first application we are building, “Who's That Tweet?”, will be a small and
simple game that takes a collection of verified Twitter users and celebrities and
randomly displays one of their tweets. The user will then be presented with a list of four
Twitter users that could have possibly created that Twitter post. If the end user chooses
the right Twitter user to go along with that post, then they will get 100 points added to
their score and move on to the next random post. If not, they will be presented with a
visual cue that their guessing skills were inferior and will move on to the next random
Twitter post.
The first thing we are going to do is create a very basic HTML layout, or foundation, for
our game. After that, we will move on to styling that bland skeleton layout with a little
CSS3 and, once it looks pretty, we will finally move on to writing our JavaScript, which
will tie everything together in our first mobile web application.
The HTML
Listing 2-1 contains the basic HTML for our game.
Listing 2-1. Basic HTML for Who's That Tweet?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=" initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0;
user-scalable=0;" />
<title>Who's That Tweet?</title>
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans&v1' rel='stylesheet'
type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<header>
<div class="score"><strong>Score:</strong> <span>0</span></div>
<h2>Player 1</h2>
</header>
<section>
<div id="tweet">
<div class="avatar"></div>
<div class="content"></div>
</div>
<ul></ul>
</section>
</body>
</html>
The HTML markup for the page is very bland and basic. Starting from the head element,
the first thing you might notice that is slightly different from standard Desktop-based
 
Search WWH ::




Custom Search