• Welcome from Instructor 
• Introduction
• Server Account
• Unix Tips
• Other:
  • web interface patterns
  • accessibility

File Transfer tools connection to remote servers and transfer of files from and to remote servers is considered pre-requisite knowledge. If you need to review look at one of the following videos. There are many SFTP (secure file transfer protocoal) and remote SSH shell client tools out there. Here are few I recommend: Our server we use (csweb01) support use of SSH / SFTP clients.   Here are some free tools for edu use I quickly searched on.  I like GUI interfaces though if you are into using Putty --then okay for this. **** NOTE: if you need help you must come the 1st week of office hours. ******* For Windows: SSH client: http://www.ohlone.edu/org/webcenter/sftptutorial/windowssftp-downloadinstall.html video demoing use For Mac: Cyberduck  video demoing use

 

1

Class Lecture,

• LAMP, WAMP, and more
• Other: go to CS6320 class

Class Lecture, Chapter 1,2

• html intro lecture, html5 a few features
• HTML intro
• Review (hopefully) of Useage
  • URL and Hostnames
  • REVIEW: About WWW browsing, HelperApplications
  • FreeSpeech, powerpoint
• Design - Instructor assigned CS2020 material (assigned in class)
  • design intro
  • prototyping
  • web design process/patterns
  • more ideas
    

Design Concepts

• Design Issues
• 2020 more
• UI
• Color
• Navigation
• typography
• Evaluating a Site
  • 2020 brief checklist
• Other sites on design:
  
  • Web Style Guide,
    More Usable Sites,
    6 principles - html writers guild,
    Educational Guidelines
    
    
• TOOLS (borrowed from 2020)

  Web Authoring: Dreamweaver NOTE: these videos are done with an older version of dreamweaver but, the concepts are the same even if the interfaces are a little different --- search on YouTube if you want for updated videos using the version of dreamweaver you are using (e.g. "Dreamweaver CC and site setup") OR go to https://helpx.adobe.com/dreamweaver/tutorials.html Basics of using Dreamweaver (site setup, web page creation, template creation and use) Video MP4 on YouTube CSS in DW: what is CSS , layout with div JavaScript and DreamWeaver: pop-up window roll-over images to user created javascript Interactive media, web components: Flash overview Fireworks Logo Banner Flash Animated Banner, Flash button created with DreamWeaver directly Image Editing: Photoshop,Gimp Paint, etc.

  ALTERNATIVE - BlueGryfon -http://bluegriffon.org/ A collection of resources: set of tutorials Set of video tutorials (2016): create wegpate,    part 2 links and images more on links forms: part 1, part 2 NOTE: there is no concept of a template you can create to generate a design that you can use to generate new webpages and also serves as a single place to edit your design and correct all the pages using it. This is ONLY available in dreamweaver. Transfer of files: by default there is no capability to transfer to a server (unlike Dreamweaver), so you have to do manually or install a separate plug in (read here) to do this. NOTE: I use Dreamweaver and not BlueGryfon --if you choose this option, that is fine but, you are expected to look for online help if you have questions regarding this tool. Like a programming IDE, this is something that you need to learn on your own. I suggest unless you want to pay for dreamweaver that you choose BlueGriffon.

 

• Exercises:
  • ex1,

Class Lecture, chapter 2

• Layout
• ImageMaps
• Sound/Video
• Animation (some simple in HTML)
• Gimp basics 1, basics 2
• Exercises:
  • ex 2,

Class Lecture, Chapter 3

• CSS part 1 , CSS part 2 lectures
• Style Sheets
  • CSS
• Forms, lecture
• CGI
• debugging CGI code
• Testing Tools:
  • Web Site Testing Tools
  • Performance testing
  • BrowserShots.org
• Exericses:
• Ex3

2

• lecture: ppt
  • Bootstrap basics
• Bootstrap Setup in WebStorm

Class Lecture, Chapter 9

• PHP (videos inside)
• Exercises:
  • PHP 1: Setup PHP and PhPStorm on your computer
    , AND create a beginning Project and associate a deployment to csweb01 account (due April 12- no points)
  • VIDEO covering PHP1 topic
  • ANOTHER video going over the basket code AND how to debug using local AMPP server
  • *******NEW Video discussing shopping cart code AND shows me debugging it ***********
  • PHP 2: Ex 4- tip use the PHP shopping cart code I gave you THIS is an IMPORTANT exercise!!!!

4

Class Lecture, Chapter 4-6

• Lecture: Overview
• Intro
• Standasrd Output
• Objects, Functions
• Event Handeling
• Conditionals and Loops
• Form Validation
• JavaScript resources
• DOM
• DOM and Cookies
• DOM office site
• JavaScript to Server side Program (*** copied here from bb announcement ***)
• Javascript and Language Detection
• JQuery- A JavaScript Framework
• Examples
  • 1
  • 2
  • 3
  • 4

4(or later)

Class Lecture, Chapter 10

• Intro
• AJAX website
  • AJAX website
  • XMLHttpRequest Object
• XMLHttpRequest Object
• TIP: use something like Chrome developer tools plugin to monitor AJAX calls.

On your own: server side JavaScript - NodeJS

Exercise:(not turned in) AJAX w/XML, AJAX w/Database

MidTerm

10 NodeJS and the EN of MEAN/MERN and introduction of GIT

Class Lecture, Chapters in MEAN 1-4 (note:we are using Webstorm for creating project, running locally, debugging, and deployment to Heroku, ignore section 3.5) and chapter MEAN 7

• Intro Lecture as YouTube
• MEAN lecture
  • MEAN stack
    
    
• NodeJS basics lecture
  • NodeJS basics
  • NodeJS files
    
    
• Express Lecture and template (interface) options
  • Express
  • Reading Request Data (from URI query or forms)
  • express and mvc
    
    
• Heroku (with creation on command line)
  
  

Design

• quick design steps for a MEAN application
  
  
  

Development using Webstorm IDE and Git and auto deploy to Heroku

• Install IDE WebStorm
• demo: Create a NodeJS Express project in WebStorm
  • run configurations
• GIT & deployment to github or bitbucket & deployment from github to heroku app directly (NOTE: in this class we will use :
  • git as YouTube
  • GITHUB: how to create a repository (or see below how to do directly by sharing in WebStorm)
  • BITBUCKET: create repository on bitbucket
  • GIT & Webstorm setup with examples of deploying to both bitbucket and github
  • Read Webstorm documentation on using git
  • AUTOMATIC deployment from GitHub to Heroku app
  • Manually (from heroku console) triggering copy of code from GitHub to Heroku app
    
    
• Optional: NodeJS on Google App Engine Flexible and gcloud (command line deployment tool) and gcloud tips
• Exercise: May 3- setup WebStorm with Git and Heroku and create beginning NodeJS+Express project and show deployed to both your local machine and running on Heroku
• Exercise PHP_to_Node: May 15 (start of class) - Calling NodeJS app from PHP program (via POST and sending data) and displaying the response.

7,8

Class Lecture, Chapter 13, Chapter in MEAN 6

• Lecture Database
  • Database, gTerms
  • SQL
  • Oracle (a relational database)
• MongoDB
• setup mLab MongoDB as addon to Heroku app & how to add Collections (like tables) and data to mLab MongoDB account via mLab Console
• NodeJS with MongoDB
• MongDB NodeJS Querries
  
  
• Data Access Architecture
  
  
• revisit: PHP and Databases
• Example: Loading Images with PHP and storing in Oracle DB using BLOB datatype
  
  
• Traditional Relational Database Accounts: recall you were sent accounts for both Oracle and MySpace servers at start of quareter in email from CS tech.
  • NOTE: you can not connect with SSH but, need to use a DBA tool (see next)
    
    
• Database Administration tool (useful when don't have web interface like mLab, good say for Oracle): Navicat(how to use), get 30 day trial version of Navicat Premium
  
  
• Exercises M1(May 17)

12 AngularJS

Class Lecture, Chapters in MEAN 9-10

• Lecture part 1, part 2 on services+data,
• intro
• processing http requests and responses from AngularJS
• How to add Angular to a NodeJS+Express Webstorm project

9 

• search engine lecture
• Search Engine Optimization
  • SEO tips
• Hosting Solutions
• Authoring Tools
• Content Management Solutions
• Application Service Frameworks
• Ecommerce

• YQL Lecture, intro (console)
  some YQL examples
  YQL Open Tables Lists (already existing YQL access to web services)
• Google Maps Lecture
  • Google Maps Source and Explained
  • Example Stylized Maps
• Google Analytics Lecture
  • Why Google analytics
  • Google's demos
  • Get Google Analytics
  • Demo- how to add web profile to Google Analytics
• Mozilla Firebug
  • get Firebug from Mozilla
  • My Firebug demos
  • Firebug movie demo
• Yahoo! YSlow Demo
  • get YSlow from Yahoo!
• Google and Yahoo! advertising
• Google Checkout
• Apple Pay (mobile iOS)
• Others Topics to search on: Twitter, Yelp, Amazon, Yahoo! Pipes, and more, Yahoo! YUI

• Features of Java 
• Java versus C++ 
• "Javac- the compiler" 
• "Java- the interpreter" 
• "Java- files" 
• "Commenting and Writing Style" 

• Overview of OOP 

• "Java- basics" 
• Exercises:
• Ex5:  Class w/variables 
•  Static Variables 

• "Java- objects" 
• "Java- methods" 
• "Java- packages" 
• "You Try it- Exercise"
• Exercises: (NOT COLLECTED)
• Instances 
• Ex6:_Subclass 
• Abstract 
• reflect package 
•  Comparing Objects 

• Applications 
• Exercise 

• "Java- arrays" 
• "Java- Flow of Control" 

• Methods-Part 2 

Class Lecture, Chapter 11

• Introduction to Java Servlets
• The Basics-lifecycle/structure

Class Lecture,

• what is Jva Web Start (also known as JavaWS, javaws or JAWS) --- a JNLP file

• more GUI

Class Lecture,  Chapter 8

• about exceptions

A3

Class Lecture, Chapter 16

• about threads in Java
• Exercises:
  • 1
  • 2

• Basic Network Communications

• about swing

• JDBC & Databases 
• JDBC Driver Types  
• Example ...link with oracle DB...for  
• README file from Oracle Installations (8.0.4)

•  Servlet Use

• On-line JavaDoc documentation, Need Internet Access 
• Example 
• Appendices A,B
• Exercise: 
• Using javadoc 

•  HTAccess 
• Java Runtime