CMT-509: Mobile Web Application

This course will provide the student with the foundations for creating Mobile Web apps that address the cross platform design needs of multiple platform mobile devices. Mobile Web apps require a design that considers significant factor, such as size, lighting, device speed, and a touch screen interface for mobile devices. Prerequisits CMT-111,  CMT113, CMT117, & CMT125. Register for this class at BHCC website.

 

COURSE OBJECTIVES:

To build a student proficiency in the design, development and production of dynamic Mobile Web pages for deployment on the myriad of mobile devices in use in today's society.

 

Sample Class Syllabus: click here.

 

Week 1: Introduction to Mobile Web & Directory Setup

Lab 1: Create Website Directory Folders
Lab 2: Creating Your Website Host
Lab 3: Creating an FTP User

 

Week 2: Part 1 - Building Animated, Interactive Websites with HTML5

Chapter 1: Solving Mobile Design Challenges with HTML5

Lab 1: Creating an Online Code Editor Account
Lab 2: Setting Up A Webpage

 

Chapter 2: Building and Testing a Multipage Mobile Web App with HTML5

Lab 1: A Crash Course in HTML5 - Students create course site homepage
Lab 2: Creating a Mobile page template

 

Week 3: Part 1 Continue

Chapter 3: Animating Navigation

Lab 1: Navigation With Split Button List
Lab 2: Navigation with Dialog Page
Lab 3: Transitions

 

Chapter 4: Applying Data-Theme Styling

Lab 1: Applying Data-Themes to data-role="page"
jquery-1.3.2 data-theme applied to a data-role page
jquery-1.4.1 data-theme applied to a data-role page
jquery-1.4.5 data-theme applied to a data-role page

 

Lab 2: Applying Data-Themes to List View
jquery-1.3.2 data-theme applied to a List View
jquery-1.4.1 data-theme applied to a List View
jquery-1.4.5 data-theme applied to a List View

 

Lab 3: Applying Data-Themes

jquery-1.3.2 data-theme applied to Headers and Footers

jquery-1.4.1 data-theme applied to Headers and Footers

jquery-1.4.5 data-theme applied to Headers and Footers

 

Lab 4: Applying Data-Themes to Navigation

jquery-1.3.2 data-theme applied to Navigation Buttons
jquery-1.4.1 data-theme applied to Navigation Buttons
jquery-1.4.5 data-theme applied to Navigation Buttons

 

Bonus Lab: Buttons

Lab: Example of data-theme c applied to a listview
Lab: Code for themed button list example

Chapter 5: Customizing Mobile Styles with ThemeRoller

Lab 1: Creating a Custom Theme with ThemeRoller

 

Week 4: Part 2 Mobile Design With HTML5

Chapter 6: Creating Collapsible Blocks

Lab 1: Nested Collapsible List Example

 

Creating Storyboards

Lab 1: Creating a Storyboard Using MSWord

 

Week 5: Part 2 Continue - Review

Review Lab

Lab 1: Mobile Review Lab

Project: Midterm Storyboard

 

Chapter 7: Designing with Grids

Lab 1: Building a 2-Column Grid

Lab 2: Building a Multicolumn Grids

 

Week 6: Part 3 - Using HTML5 to Deploy Mobile Friendly Content

Chapter 8: Providing Native Video

Lab 1: Example of Native Video Using HTML5

 

Chapter 9: Providing Audio for Mobile

Lab 1: Example of Including Audio Using HTML5

 

Week 7: Part 3 - Continue Mobile Friendly Content

Midterm Project 1st Draft

 

Chapter 10: Scaling Images for Mobile Devices

Lab 1: Including an SVG image

Week 8: Midterm

Midterm Project and Presenation

 

Prototyping A Website

Lab 1: Creating a Website Prototype Using InVision

Lab 2: Creating Your First Prototype

 

Week 9: Part 4: Using HTML5 To Manage Mobile User Interactions

Week 10: Responsive Design & Bootstrap

Chapter 13: Building a Complete Mobile Presence

Lab 1: Using Bootstrap

Lab 2: Using Responsive Web Design: Desktop/Laptop view, Smartphone view

Lab 3: Using Geolocation

Lab 4: Using Canvas

 

Chapter 14: Using Templates

Lab: jQuery Mobile Bootstrap Template

 

Week 11: Developing with Bootstrap

Bootstrap Development

 

Final Project

Create Storyboard

 

Week 12: Lab Final Project

Final Project

Prototype

 

Final Project

First Draft

 

Week 13: Lab Final Project

Final Project

Creating email form

 

Final Project

Creating email form

 

Week 14: Final Project

Final Project and Presenation

 

 

 

Student Sites

Fall 2016

Spring 2016

 

 

Helpful Websites

JQuery Mobile

ThemeRoller

jQuery MobileUI

W3Schools jQuery Mobile

Find Jeannette on Social Media

  • Facebook Facebook
  • LinkedIn LinkedIn
  • YouTube YouTube
  • Follow @jrpassanisi Twitter