This chapter provides information about mobile websites and how a mobile website differs from a desktop site. You'll learn the difference between jQuery and the jQuery Mobile framework, what devices and operating systems are supported, and how to use some of the built-in features of jQuery Mobile.
Becoming Familiar with Mobile Websites
A mobile website is different from a desktop website for a number of reasons. In this video you'll learn how mobile devices modify standard desktop websites and explore the differences between mobile websites and desktop websites.
In this lesson we'll preview the jQuery Mobile framework Travel Adventures website that will be built in this course. We will take a look at the various features of this mobile site, including the photo gallery and Twitter feed, on an iPad 2 device.
In this lesson we'll preview the jQuery Mobile framework Travel Adventures website that will be built in this course. We will take a look at the various features of this mobile site, including the photo gallery and Twitter feed, on a Windows mobile phone device.
What devices and operating systems support the jQuery Mobile framework? In this lesson you'll learn about the three different grades of support for browsers and devices, along with the various versions of these supported platforms.
There are various ways to access the jQuery Mobile files - you can either download them yourself or use the hosted version that does not require a download onto your website. This video explains the different versions and hosting options available for jQuery Mobile files and gives you some information about jQuery Mobile versions.
This chapter is specifically for Dreamweaver users. You'll learn how to get set up for this course in the Dreamweaver interface, including obtaining course files, defining a local site, and letting Dreamweaver provide all of the jQuery Mobile files needed for the course.
Dreamweaver CS6 Course Setup
This lesson walks you through setting up your root folder and copying in the course files if you are using Dreamweaver as your HTML editor.
When working in Dreamweaver, you need to define a local site in order to view all of the files in the Files panel. This movie walks you through defining a local site in Dreamweaver, using Dreamweaver to add the jQuery Mobile framework files, and creating the home page for the Travel Adventures website.
Dreamweaver offers built-in jQuery and jQuery Mobile support that includes three different versions of mobile starters for the jQuery Mobile framework. These mobile starters add all of the jQuery Mobile files needed to create a mobile website using the jQuery Mobile framework. You'll learn about the differences between these three mobile starter versions in this lesson.
In this lesson you'll learn more about the new expanded features in Dreamweaver CS6 for jQuery Mobile support, including the new jQuery Mobile Swatches panel, which makes theming your jQuery Mobile site very easy.
This chapter provides course setup information for anyone who is not using Dreamweaver as their HTML editor. Before you begin to build your website, you need to obtain the jQuery Mobile framework files that will be added to your website. This chapter explains where to obtain these files and how to set up your site in order to use the jQuery Mobile framework.
Other HTML Editor Course Setup
This lesson shows you how set up and organize the jQuery Mobile files you will need to work through this course.
This lesson walks you through organizing and setting up the course files if you are not using Dreamweaver. The Coffee Cup open source HTML editor is shown in this lesson as an example, but any HTML editor can be used for this course.
Creating a page in jQuery Mobile is a bit different from creating a basic HTML page. This chapter will familiarize you with the basics of the jQuery Mobile framework and how to work with pages in it.
What is the difference between an HTML page and a jQuery Mobile page? In this lesson you'll learn about the differences while we get the course files set up in order to create the Travel Adventures mobile website.
Every website requires planning before you start building the site, and a mobile website is no different. In this lesson you'll learn what a wireframe is and view the wireframe layout for the mobile website we will build in this course.
In order to build a jQuery Mobile page from scratch, you need to obtain the coding for that page. This course includes a starter file for you to use, but in this lesson you'll learn where to locate the basic page template coding for any other jQuery Mobile website.
The index file for this course contains all the coding needed by the browser in the head section of the page that is required by jQuery Mobile. In this lesson you'll learn what each portion of this code means and why that coding has been added to the page. You'll also learn about the importance of the meta viewport tag when working with mobile browsers.
The jQuery Mobile framework uses Ajax to tell the browser to store all of the pages in a single HTML page and display only one page at a time to the user. In this video you'll see how the browser loads a jQuery Mobile page and transitions between the various pages in a mobile website.
In this chapter we'll create the foundation for our jQuery Mobile site. You'll learn about how jQuery Mobile understands pages by creating and working with content features built into the jQuery Mobile framework as we add content to our various mobile site pages.
In this lesson you'll learn more about what content can be added to a mobile web page and how to attach an additional stylesheet.
The jQuery Mobile framework uses an attribute called a listview to navigate a mobile website. In this video you'll learn what a listview looks like in a mobile browser and how to create listviews within your HTML pages.
Working in jQuery Mobile pages can be a bit confusing because a single HTML page can contain multiple mobile pages. In this lesson we'll organize our pages so the home page for our website will link correctly to the rest of the pages.
The jQuery Mobile framework allows you to categorize lists and add subcategories, and even automatically adds styles for these subcategories. In this lesson we'll add the tour and country listings to the appropriate pages and set up the list dividers in our coding to create subcategories for the tours and countries pages.
Count bubbles can be added to content in jQuery Mobile to let the user know how many items are listed in a specific area of the page. In this lesson we'll create a count bubble for the tours and countries listings for our website and add the logo to the home page.
Every mobile page needs a way to move backward within the website, and jQuery Mobile makes it easy to create a back button with a left arrow icon. This lesson walks you through the steps involved in creating the back button for each page.
Now that we have the footer navigation buttons set up in a single jQuery Mobile page, we need to add that footer area to the other pages of our website. In this lesson we will make sure that all of our mobile pages contain the footer navigation buttons.
The jQuery Mobile framework uses the concept of themes to create the look of the mobile website. This chapter looks at jQuery Mobile's built-in themes as we add theming to style the various pages and content areas of our mobile site.
Now that the Travel Adventures website has content and is beginning to look like a website, we need to be sure that we are previewing it on actual mobile devices to be sure there are no problems. In this video we'll take a look at the Travel Adventures website on an iPhone device.
jQuery Mobile uses CSS files to create the look of the mobile website. If you want to change that look, you can use jQuery Mobile themes instead of having to modify the CSS itself. This video looks at the different themes that are available for a variety of page elements.
The Travel Adventures website is going to use the default themes built into jQuery Mobile to give different page elements different color schemes. In this lesson we'll add theming attributes to each of our separate page elements, using different themes for the various items on the page.
The Travel Adventures website has a centered logo at the top of the home page, and the list dividers on both the tours and countries pages are yellow. This lesson uses a default theme built into jQuery Mobile to change the color of the list dividers on both of these pages. We will also center the logo image using the navbar feature of jQuery Mobile.
The jQuery Mobile framework lets you add additional features to your website through plug-ins. This chapter explains what a plug-in is and walks you through adding the PhotoSwipe plug-in to the Travel Adventures website.
Setting Up jQuery Mobile Plug-Ins
You can add features that other people have created to your jQuery Mobile website through plug-ins. This lesson explains what a plug-in is and where you can find plug-ins for your jQuery Mobile websites.
The Travel Adventures mobile website is going to contain a photo gallery of pictures from various regions of the world. In this chapter we'll use the PhotoSwipe plug-in for jQuery Mobile to create this gallery.
Building the Photo Gallery
The first step in building the photo gallery is to create a new HTML page to use as the base page, which is exactly what we'll do in this lesson.
In order to use a jQuery plug-in, you need to add additional plug-in files to your pages. In this lesson you'll see what files are required in order to use the PhotoSwipe plug-in and what coding you need to add to the photo gallery page.
The photo gallery feature needs separate pages to display the photos for various regions of the world. In this video we'll add the pages for each of these photo galleries by making copies of the Europe page.
Since we copied the Europe page to add new pages to the photo gallery page, we will need to modify the code for these new pages by changing IDs, text, and hyperlinks before we can get the navigation working correctly. In this lesson we'll make all of those corrections.
The photo gallery page is not themed the way that we want our final version to look. In this lesson, we'll use the data-inset attribute built into jQuery Mobile to modify our photo gallery list, adding curved corners and margins surrounding our list of photo gallery regions.
Once the photo gallery feature within the Travel Adventures website has been created, we need to preview it in a mobile device to be sure that everything is working correctly. In this video we will take a look at the photo gallery on an iPod Touch device.
Our site should contain a Twitter feed that shows the three latest tweets that have been sent by Travel Adventures. In this chapter we'll add the Twitter feed to the site and customize it to match our theme.
Adding a Twitter Feed
Before we can add a Twitter feed to the About Us area of the website, we must create a new jQuery Mobile page for it. In this lesson we'll create the new page that will contain our feed.
In order to add a Twitter feed to a website, you need to obtain the code to place on the page. This lesson explains how you can obtain the coding from Twitter and customize that coding to match your website.
With the photo gallery and Twitter feed added, the Travel Adventures mobile website is complete at this point. In this lesson we'll test the website on an iPad 2 to make sure everything is working correctly and figure out what final adjustments need to be made.
In this chapter we will put the final touches on the Travel Adventures mobile website. This includes adding icons to all the footer navigation buttons, adding image icons for each website region on the home page, and correcting some other small issues. Once these changes have been made, we will test the website on various mobile devices to confirm that everything is working perfectly.
In this lesson we'll correct some icon and text issues that became apparent when the website was uploaded to a web server and tested on an iPad 2. We will add icons to the footer navigation buttons and add a header.
There are still a couple of final items that the Travel Adventures website needs before it can be considered complete. In this video we will add the image icons for the various regions of the website for the home page, and also replace the Twitter follow link on the About Us page with the link to our Travel Adventures Facebook page.
Previewing the website in mobile browsers reveals what seems to be an issue with the PhotoSwipe plug-in images. In this lesson you'll see how to correct this issue and learn the importance of plug-in folder structure.
Before the Travel Adventures mobile website can be considered final and ready to go live, it needs to be tested across multiple devices and platforms. In this lesson we'll test the site on an iPhone device.
Before the Travel Adventures mobile website can be considered final and ready to go live, it needs to be tested across multiple devices and platforms. In this lesson we'll test the site on a tablet device.
Before the Travel Adventures mobile website can be considered final and ready to go live, it needs to be tested across multiple devices and platforms. In this lesson we'll test the site on a Windows phone device.