PC or Laptop
In this course, expert web developer and trainer gets you up and running as a mobile site developer using the jQuery Mobile framework. You’ll learn the difference between jQuery Mobile and HTML pages and become familiar with the idea of using libraries and themes to feature and style your mobile website. Then you’ll get started creating and updating pages in the mobile space, and even learn how to add features like a date picker for forms, a Twitter feed, and a photo gallery. Along the way you’ll see how to test your designs on a variety of devices to make sure they’re ready for prime time.
In this course you’ll get started in the mobile workspace using the popular jQuery framework for mobile devices. The contents of this course include:
Becoming Familiar with Mobile Websites
This chapter provides information about mobile websites and how a mobile website differs from a desktop website. 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.
Dreamweaver CS6 Course Setup
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.
Other HTML Editor Course Setup
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.
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 a jQuery Mobile framework page and how to work with pages in it.
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.
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.
Setting Up jQuery Mobile Plug-Ins
The jQuery Mobile frameworks 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.
Building the Photo Gallery
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.
Adding a Twitter Feed
Our Travel Adventures mobile website 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.
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.
The lessons are wrapped in a feature-rich interface that lets you jump to any topic and bookmark individual sections for later review. Full-Screen mode provides a hi-def, immersive experience, and Watch-and-Work mode shrinks the video into a small window so you can play the videos alongside your application. Also included are exercise files that give you an easy way to try out the techniques you learn.
Who this course is for:
jQuery Mobile for beginner