Class 10 Notes for E-Commerce

Learning Objectives:

You will be able to create a simple HTML App using Dreamweaver


Homework: mobile apps

Review: Quick Start Guide to creating an App using JQuerry Mobile and Phonegap info

Review: Dreamweaver CS6 customization of the APP and Adobe's integration of JQuery

Review: WordPress tutorials if you want to create a WordPress Website. has free hosting for your site.

Review: Wix Tutorials

Create a Website using Dreamweaver, Wix or WordPress or Web App for your Business. Post your Web page or App on your space on E-commerce server



Reminder: Post your articles on Canvas under the Weekly Articles on the Discussion Board Section.


Topics Covered:



Building a Web App to sell your product

Setup an accounts at

  1. Adobe (Free)

  2. PhoneGap (Free)



Dreamweaver creates the App using HTML 5, CSS3 and JQuery


jQuery is a library of JavaScript Functions

jQuery is a lightweight, "write less, do more", JavaScript library.

JQuery Mobile is a library designed for mobile devices


jQuery Selectors - $(CSS selectors) - to identify the elements to be manipulated

$("*") selects all elements.

$("li") selects all <li> elements.

$("h1.main") selects all <h1> elements with class="main".

$("h1#menu") selects the first <h1> elements with id="menu".

$(":animated") selects all elements that are currently animated.

$(":button") selects all <button> elements and <input> elements of type="button".

$(":even") selects even elements.

$(":odd") selects odd elements.

The Basic structure of our Mobile app Page.

<div data-role="page">    	    
  <div data-role="header">  		  		
    <h1>Page Title</h1>  	    
  </div><!-- /header -->    
  <div data-role="content">	  		   	
   <p>Page content goes here.</p>		      
  </div><!-- /content -->    
  <div data-role="footer">  		  		
     <h4>Page Footer</h4>  	    
  </div><!-- /footer --> 

Add a theme: <div data-role="page" data-theme="a" data-content-theme="a"> to your App

Add a Button: <a href="index.html" data-role="button">Link button</a> to your App

Add a back button to a div tag : <div data-role="page" id="page2" data-add-back-btn="true" data-back-btn-theme="b"> to your App

Add a Transition: <a href="index.html" data-transition="pop">I'll pop</a>

Configuring your app for Phonegap:

Config.xml (created when you first use phonegap)

<?xml version="1.0" encoding="UTF-8" ?>        

<widget xmlns = "" xmlns:gap = ""            
id = "edu.maricopa.pvc.cis233.yourname" versionCode="10" version= "1.0.0">    
<name>Yourname cis233</name>      
<description> Explain the website</description>   
<author href="" email=""> Hardeep Shoker</author> 
<icon src="url-graphic" gap:platform="android"  />  


App, JQuery, Phone Gap


Final Step:

Review in your mind everything we covered in class and remember to cover it again before you go to bed so your mind to process this information while you sleep.