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. WordPress.com 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

HTML5 & CSS3

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 --> 
    
</div>

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 = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0"            
id = "edu.maricopa.pvc.cis233.yourname" versionCode="10" version= "1.0.0">    
      
<name>Yourname cis233</name>      
    
<description> Explain the website</description>   
         
<author href="https://www.pvc.maricopa.edu/cis233" email="youremail@maricopa.edu"> Hardeep Shoker</author> 
     
<icon src="url-graphic" gap:platform="android"  />  
  
</widget>

Terms:

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.