jQuery Mobile offers us some big advantages. It is very simple, very elegant. Drag and drop editors are great in theory, but in practice they are often buggy and don’t do what you wanted them to do. jQuery Mobile editing is all based in HTML and CSS elements that are familiar with anyone who has done any light coding.

This does however mean that one must know a bit about how to code. Luckily, one doesn’t need to know that much about coding. This lesson will be geared toward figuring out just how proficient a person must become with HTML and CSS before they start using jQuery Mobile.

What Must They Know?

In my preliminary workings with jQuery Mobile, I’ve found that there are a few things that you have to know what they are. But before we get to that, let’s talk about something more abstract: comfort.

The most important thing that we can instill is a feeling of comfort in working with code. Think back to the first few weeks of web design and how intimidating it was to see all that incomprehensible code staring at you from the computer screen. Our crucial task in the beginning is to make the campers ok with seeing that.

The Concepts

<h1> – <h6>

These are obviously used for labeling things like sections, headers, and lists

<ul>

These are super important for creating list view. Any time you see a list box or accordion or anything, they’re built upon unordered lists.

<a>

Crucial for navigating between app pages.

<div>

These are probably the most important of all. So much of what jQuery Mobile is and does is based around putting things into <div>’s.

id and class

You need a firm grasp on how to use id’s and why they’re important.

Attributes

id and class are attributes. So is href and title. jQuery Mobile relies on special attributes that start with “data-” This will be more clear later on, but for now it’s just important to know that you can put stuff in between ‘<‘ and ‘>’

This lesson will be focused on refreshing you on your HTML. There will be explanations of the elements followed by a guided worksheet. Since most of these relate to each other, there is no real order to the next section.

Headings

Think of these as section headings. When you wrote your proposal outline in 30B, you had several sections like “Executive Summary” and “Methodology”. If you were making an HTML version of your proposal (and that would be good practice) then you would use <h1> or <h2> to write those headings. Very straight forward.

There are six headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

<h1> is the largest and <h6> is the smallest. Duh.

Unordered Lists

Writing things in list form keeps things very neat and forces you to write things concisely. Let’s go over how to use lists. The basic syntax goes like this:

Screen Shot 2014-05-16 at 12.56.20 PM

<ul> starts the unordered list. <li> stands for ‘list item’. Everything in between ‘<li>’ and ‘</li> will be an item. By default it just shows up as normal text but list item can be anything. Even another list! Give this list a try in your tester page:

Screen Shot 2014-05-16 at 12.57.28 PM

As you can see, there is a lot you can do with a list. We had links, plain text, heading, and even other lists as items in our list! Lists come into play in mobile apps as well. The picture below is of an unordered list.

Screen Shot 2014-05-16 at 12.59.07 PM

That looks complicated doesn’t it? Well not really actually. All you need to do is make an unordered list and add the attribute ” data-role=”list-view” ” to the <ul> tag. Here’s what the code looks like:

Screen Shot 2014-05-16 at 12.58.00 PM
That was easier than you thought it would be I bet.

Attributes

This is a tremendously important concept to grasp. Attributes are little pieces of information placed inside an opening tag that define information about the element. An attribute you’re probably familiar with is ‘href’. You’re used to putting that in an <a>, or ‘anchor’, tag to define the destination. There is also a ‘title’ attribute for the anchor tag which floats a little tooltip when you mouse over the link. What other attributes can you think of? Here’s some examples:

 <a href="http://google.com" title="Google">Link to Google</a>

Both “href” and “title” are attributes. They define where the link is going and what to display when you mouse over the link

<img src="giip.png" alt="GIIP Logo" />

“src” and “alt” are attributes. They define where the image is coming from and what text to display if the image can’t be found

The important thing to take away from this is that attributes are pieces of information placed into an opening tag to define something about that element. Let me repeat that and put it in bold because that shows that it’s important: attributes are pieces of information placed into an opening tag to define something about that element. The syntax looks like this:

name="value"

Selectors: id and class

This concept overlaps with CSS, but we’ll be using it in a slightly different way regarding mobile apps. Selectors are used to identify elements. When we use them in CSS, it’s to identify the element we want to change.

Class and Id are both attributes which, as you recall, are pieces of information placed into an opening tag to define something about that element. Consider the example below of how id and class are added to elements and how they are used for CSS. (note we are using internal CSS so that we can see everything on the same page)

Screen Shot 2014-05-16 at 1.19.19 PM

That’s nothing new to you. But to one of the campers, that is a whole bunch of concepts to learn. Luckily, jQuery Mobile doesn’t require us to mess with any style. It includes a massive stylesheet with everything we could need. Where id and class come in is as a way of identifying parts of the page.

Mainly, you’ll be using the id attribute. This is used to identify pages. Below is an example of a generic jQuery Mobile page. Don’t worry that it’s got attributes you won’t recognize, just notice the use of attributes and especially where you see ‘id’

Screen Shot 2014-05-16 at 1.21.03 PM

So how many attributes do you see there? There are 5 in total. 4 of them are the “data-role” attributes that are part of jQuery Mobile and 1 of them is id=”page-1″. We’ll explain what all these divs are a little later and more fully in lesson 2. For now, just know that you’ll be making a lot of those ‘pages’ you see above. Most importantly, note that the div with the data-role=”page” also has the id=”page-1″. This is how navigations will happen throughout the app.

<a>: Making Links

We’ve covered how to make links pretty thoroughly in the previous sections, so there’s no need to review the basic mechanics other than saying:

 <a href="URL">Link Text</a>

What you may not know how to do is link to locations within a page rather than between pages. It’s extremely simple. Typically, you would put an internet or file address as the href value. To link to a location on a page, you put an element id as the href value.

Still confused? If you click here, you will jump to the attributes section of this page. This was accomplished with the code you see below.

 <p>Still confused? If you click <a href="#attributes">here</a>,
 you will jump to the attributes section of this page. This was accomplished with the code you see below.</p>

I knew that that section had the id “attributes” because, well, I wrote this page, so I know what id I wrote.

Look at your address bar after you clicked the link. See how it has #attributes at the end of it now? This isn’t strictly related to this lesson, but if you know the id of something on a page, then you can add the #id directly to a link and send someone directly to that part of the page. Like when people link to Wikipedia, they sometimes link to a particular part, like this.

This is important to jQuery Mobile because it’s the crux of how you get around the app. Again, we’ll go more into it in the next lesson, but the way we write the apps is by putting all of our ‘pages’ as defined by <div data-role=”page”> into one single HTML document and then linking to different parts of it using <a href=”#location”>link</a>. Look again at the list example from above.

Screen Shot 2014-05-16 at 12.58.00 PM

As you may have guessed, each item is a link to a different <div data-role=”page” id=”meet-x”>.

<div>

This one is important. You’re used to HTML elements that have a visible result. <p> produces a paragraph. <ul> creates a list. But what about <div>? Put <div>…</div> then you’ll get nothing. That’s because <div> is for structuring content. It does nothing on its own. You can throw <div>’s all over the place and it won’t affect anything. <div> is there to wrap around other elements and act as a container. Copy the page below and see what it does.

 <html>
 <head>

 <style type="text/css">
 #header {
   background-color: #e27c7c;
 }
#content {
   background-color: #8656c9;
 }
#footer {
   background-color: #55c675;
 }
 </style>
 </head>
 <body>
 <div id="header">
   <h1>Site Title</h1>
   <h3>Site Description</h3>
 </div>
<div id="content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliqudecima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
 </div>
<div id="footer">
  <p>Powered by <a href="http://giip.org">GIIP</a></p>
</div>
</body>
</html>

The background colors allow you to see the <div>s. Basically, <div>s are invisible until you do something to them with CSS. Or, in the case of jQuery Mobile, we alter them with those magical “data-role” attributes.

With jQuery Mobile, you’ll need to get a firm grasp of <div>s and how we use them. Basically, it’s all about wrapping our content up in the appropriate <div>s and letting the program take care of the rest.

Homework

Div-stravaganza

You are going to create a  webpage with a series of <div>’s nested within one another. There should be 7 in all.

  • Make the largest be 600px wide by 600px high. The second should bee 500×500 and so on so forth
  • Using CSS, give them each a different background color. I suggest red, orange, yellow, green, blue, purple, because that’s the way the colors go. If you wanna be fancy you can add another dive between blue and purple that’s indigo colored.
  • Refer to this page (you can view the source code by right clicking on the page and hitting “view source”.)

 HTMLizing Your GIIP Proposal

Make your Project Proposal into an HTML page. That’s it.

Simple, eh?

Just take your project proposal from 30B and put it into HTML form.

Parameters

  • Make each section header (Executive Summary, Methodology, etc.) a <h1>
  • Give each heading a descriptive id (like id=”goals”)
  • At the end of each section, include a link that links to the section header
  • <a href=”#goals”>Back To Top</a>
  • Wrap each section in a <div>. Don’t worry about giving the <div>’s an id. Just put them there
  • Make sure everything is correctly marked up. By that we mean no content not inside an HTML tag. If you open a tag, you better close it. A good way to make sure you’re doing this is to see if you can collapse your <div>. That’s the little triangle or +/- sign on the line number next to your opening <div>. They allow you to make things neater.
  • Make an HTML table for the budget

When you finish, upload it to your server and send me a link.

Download “lesson-1″ from the YEI GitHub page to see an example of  completed HTMLized proposal