Class 11 Notes for Web Publishing II

Learning Objectives:

You will be able to describe the differnce between JavaScript or JQuery

You will be able to describe what is Document Object Model (DOM)

You will be able to identify the differences between JQuery and Angular

Homework: Web time

Work on Final Project 

Review: W3Schools JQuery Tutorials

Review: W3Schools Angular Tutorials

Review: How Servers Work

Review: SEO Tips to get your site Noticed

Watch: SEO Rap (Design Coding)

Topics Covered:

Apache & Windows Servers.

Netcraft's Survey of Servers. Check out who is using what type of servers!

Secure Sockets Layer (https) protocol & certificates

Accessibility test your Website!

Check your site on several devices at once Modern.IE screenshots

Review Another Students Website!

Does the site meet the creators Stated objectives?

Is the site appropriate for the intended audience?

Does the site have Title Tags and Meta Tags on every page?

Does the site have contact information on every page?

Does the Website download quickly? (10 to 20 seconds max.)

Did you enjoy the site & would you return to this site in the future?

Does the layout of the page make sense? (text, color scheme & graphics)

What is the Quality of the content. (Typos& Grammar): Excellent, Good, Needs Improvement, Scrap

Is the text (font size, color & style) easy to read and does the font change? (two different fonts are ok but more is questionable)

Did they have italics or all caps on the page?

Can you easily find the information you consider critical?

What is the Quality of the graphics: Excellent, Good, Needs Improvement, Scrap

Are the graphics appropriate for the content?

Are the graphics size appropriate for the Webpage?

Does every page have contact information?

Dose navigating the site make sense?

Is the navigation of the site consistent (same type of info)?

Does every page have a link to the main page?

Does the navigation for the site remain on the same area of the page?

Does all the links on the pages work?

Does the site have Frames?

Does the site have Animation that continually runs on the main pages?

Does the site have sound files on the main pages?

Each topic will be evaluated and given a point value of between 1 - 5 (5 being excellent)

 

 

 

 

 

 

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

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

jQuery is a library of JavaScript Functions

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

 

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.

JQuerry Mobile is a JavaScript library designed for mobile devices

Video on how to use the PhoneGap Panel inside Dreamweaver

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">

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

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

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>

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.