DGM2740 Principles of Web Languages
This course was built by Dr. Paul Cheney for the Digital Media Department at UVU
Unit13 jQuery Mobile
- Create a phone specific site using jQuery
- Implement a script to direct traffic to this alternate site.
There are several approaches to handling mobile phones and tablets. One is to build several custom applications and put them in the mobile stores and hope customers will download them. Another is to build a responsive site which you have been practicing all semester long. A third approach is to redirect mobile traffic to a site build especially for the phone.
The jQuery mobile framework allows you to design a single web site OR application that will work on all popular smartphone, tablet, and desktop platforms including:
- Apple iOS
- Palm WebOS
- Firebox Mobile
- Opera Mobile
- Kindle 3 and Fire
- Nook Color
- Chrome Desktop
- Firefox Desktop
- Internet Explorer
- Opera Desktop
The thing that's so awesome about jQuery Mobile is that when you add phone gap, you can build a custom app that uses the phones camera and accelerometer.
In this unit you will practice this third approach using the Adobe jQuery mobile framework.
All videos listed below are available on UDEMY
- Watch Demonstration which is a demonstration of the completed example file on a phone
- Watch Template Explained which shows how the demplate I provide is organized
- Watch Accordian which shows how to build an accordian
- Watch ButtonTheme which shows how to add a button and the apply a color theme
- Watch Checkboxes which shows how to add checkboxes
- Watch RadioButtons which shows how to build radio buttons
- Watch Dialog which shows how to create a popup dialog
- Watch FixedPosition which shows how to stick the footer to the bottom of the screen
- Watch FlipSwitch which shows how to implement a flipswitch in a form
- Watch Slider which shows how to make a flrm slider from 1 to 10
- Watch Grids which shows how build a multi column grid
- Watch Icons which shows how customize any icon
- Watch NavigationBar which shows how build a horizontal bar
- Watch Tables which shows how to manipulate a data table
- Watch TextInput which shows how create a text input box (really easy)
- Watch Transition which shows how add a transition to an anchor
- Watch CustomCSS which shows how add your own CSS rules to a project
- Watch PHP Redirect To MOBI which shows how to use an opensource script to redirect traffic to a different folder or subdomain.
- Read the jQuery mobile demo center for 1.3.0
- Use the code for Accordians > Markup to create collapsable content
- Use the code for Buttoms > Basic markup to build a button (use Inline to modify the buttoms)
- Use the code from Buttons > Thems to see the 5 basic color schemes avaliable
- Use the code for Checkboxes > Basic markup to build a checkbox (use Horizontal group to buiuld them side by side)
- Use the code for Collapsibles > Basic collapsible to create hidden content (use Expanded to to create an expanded navigation box)
- Use the code for Controlgroups > Radio button to make a radio group (You can also make it Horizontal)
- Use the code for Dialogs > Basics to create a popup (use transitions to make it cool)
- Use the code for Fixed toolbars > Fixed Basics to get the footer to stay aat the bottom of the screen
- Use the code for Flip switch > Basic switch to create an toggle switch
- Use the code for Forms > Sliders and Forms > Range Slider and Forms > Checkboxes to spice up your form
- Use the code from Grids > Two column grids to create table layouts
- Use the code from Headers > Buttons to add a menu or home icon
- Use the code from Icons > Icon set to add any icon to any button
- Use the code from Navbar > Navbar basics to create menus
- Use the code from Popup > Popup basics to make all kinds of different popups
- Use the code from Column Toggle to make tables on information with optional columns
- Use the code from Text inputs to make text input ares for a form
- Use the code from Transitiions to make cool transitions for popups
- Read about a way to redirec a mobile user to your .mobi site.
- View a mobile detection script
- Watch "Dreamweaver CS5.5 - jQuery Mobile" on Adobe TV (we will be using this)
- Watch the 3 min video on Sencha (we will not be using this)
You will please submit the answers to these questions in Canvas
- Chapter 4 - Summarize what you learned and how it applies to any work you may do in the future.
- Chapter 5 - What accomidations do you have to implement for small devices?
- Chapter 6 - Verify that you read this chapter and let me me know what new information you learned.
- Summarize the Adobe Max Video (1/2 page)
View an example of a jQuery mobile site