Posts
To become familiar with what Mobile Boilerplate is, follow these steps:
1. Navigate to http://html5boilerplate.com/mobile in your
WebKit browser.
While you don’t have to use WebKit to view this site, you should get into
the habit of using it. Your browser screen should look similar to . Look this page over for a moment. Notice the fancy headlines and text styling, along with the cool star icons. If you’re familiar with the pre-
HTML5 way of developing web pages, you’re about to get a surprise.
2. Choose View.View Source from the main menu.
A text file will open up, which will contain the source code for the
Mobile Boilerplate, as shown in Figure 3-5. This page itself uses Mobile
Boilerplate. Note all of the different commands and tags in the header of
this page (between <head> and </head> in the source code). Each one
of these serves a specific purpose in helping to provide a great mobile
user experience to the largest number of users.
3. If you have a mobile phone with a web browser, try opening this site
with that device.
Yes, I realize that this URL is a bit long to be easily typed into many
phones, so I’ve taken the liberty of creating a short URL for you:
http://bit.ly/wkfdmbp.
Doing anything for mobile requires you to be very concerned with eliminating
clutter and unnecessary bulk wherever possible. By creating a
shortened link, I cut the number of characters almost in half and created
an easy to remember link for you too (the letters after bit.ly stand for
WebKit for Dummies Mobile Boilerplate).
If you don’t have a mobile phone with a web browser, or if you just
don’t feel like bothering with it right now, scroll down about half way on
mobileboilerplate.com/mobile, and you’ll see a screenshot showing
what it looks like on various devices,
4. Click the Boilerplate Documented link to start the download of Mobile
Boilerplate.
Two versions of Mobile Boilerplate are available:
• Boilerplate Documented contains copious notes about everything
it’s doing so you can see exactly how it works.
• The “stripped” version (just plain Boilerplate) is designed for
use with live Mobile Web apps and is reduced to a much smaller
file size.
5. Unzip the file you just downloaded.
• On Mac OS X, you can extract the files by double-clicking the
zip file.
• On Windows, you can extract them by double-clicking the zip file
and then selecting Extract from the options in the left the folder
window that opens.
The next step is to import the Mobile Boilerplate into your project. The
directions for doing this depend on your version of Komodo Edit and operating
system.
0 comments:
Post a Comment