CS324: Advanced Programming

Course Summary:

The goal of this course is to explore software engineering strategies for building web applications. A recurring theme is the separation of presentation, processing, and content. Web technologies are also covered including: HTML, CSS, Server Frameworks, Javascript, DOM, and Ajax. Homework consists of weekly programming assignments and a final project demonstrating software engineering and web technology skills.

Syllabus

Read the Academic Integrity Policy >here<

Amazon Web Services

• Setup an Amazon Web Services (AWS) account by going here.
• Configure a bucket server, then upload and view html file: [video]
• Login to your AWS account and edit the default security group: [video]
• Configure a virtual machine: [written][video]
• Learn how to use emacs, a program editor: [video]
• Assign a permanent IP address to your virual machine: [video]

Hypertext Markup Language (5)

• HTML Tutorial
• HTML Reference
• Class Notes
• Class Examples
• • Basic HTML (header, paragraph, list)
  • Hypertext HTML (hypertext, anchor)
  • Media HTML (image, audio, video)
  • Screen Readers
  • Table HTML
  • Form HTML (form, textfield, password, radio button, checklist, drop down list)
  • Meta, Elements, HTML Validator, bit.ly
• Image Map Tutorial
• <meta> Element Reference [terse] [verbose but dated]
• HTML Entity Reference (for things like >)
• Description of robots.txt file

Cascading Style Sheets (CSS)

• CSS Tutorial
• CSS Reference
• Class Examples:
  • Department Web Page (organized, but no css)
  • Department Web Page (organized, with css)
  • CSS file for Department Web Page
  • Column Example
• Fonts: [font families],[em], [arabic]
• Color
• Color Picker
• Selecting Compatible Colors
• Color Blind Design
• Color Contrast Checker
• Opacity
• CSS Box[a][b]
• Position Property[a]
• Understanding the tricky position property
• CSS Element Flow (via the position property)
• Avoid too many <div> elements
• Media Types Tutorial
• CSS property defaults by element

Python-based Web Server Applications

• Hello Web CGI: a web application using Python cgi [download][tutorial]
• Bookvoter CGI: a web application using Python cgi [download][tutorial]
• Bookvoter CGI Framework: a web application framework using design patterns and Python cgi [download]
• Bookvoter Flask Framework: a web application framework using design patterns and the Python Flask framework [download][Flask reference][Flask template reference][sqllite reference]
• Logger: a sample logger application using Python [download]

Javascript (technically ECMAScript)

• Class Notes: Javascript Prototyping
• Examples:
• prototyping
• guessinggame
• Tutorial/Reference
• ECMAScript Standard
• Debuggers: Chrome Firefox
• nulls vs. undefined
• Object Oriented Programming? (eek!)

Document Object Model (DOM)

• DOM Methods/Members Reference
• Browser support for DOM 0 -> 3
• DOM Events Reference
• Simple Event Example Using Event Property & Event Function
• Text Event Example
• Text Event Example Using Password
• Simple Mouse Event Example
• Drag and Drop Mouse Event Example

jQuery (a sample Javascript Framework)

• Main Site (code/documentation/tutorials/examples)
• Hello World
• Memory Game
• jQuery UI
• jQuery Datatables
• api
• example

Flask/jQuery/AJAX/JSON

• Bookvoter Ajax I
• Bookvoter Ajax II