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 listviewLab: 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
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
Chapter 11: Building Mobile-Friendly Forms
Lab: Adding a form to a Mobile site
Chapter 12: Deploying Mobile Widgets
Lab 2: Creating Transitioning Popups
Lab 3: Creating A Tabbed Navigation Bar
Week 10: Responsive Design & Bootstrap
Chapter 13: Building a Complete Mobile Presence
Lab 2: Using Responsive Web Design: Desktop/Laptop view, Smartphone view
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
Facebook
LinkedIn
YouTube
Twitter