CS 412 Web Application Development

This couse will provide skills that go beyond the basics of creating webpages into creating applications that run on the web. At the end of the course students should be able to create interactive and sophisticated web applications that combine HTML, CSS and Javascript.

Instructor:
Francisco Iacobelli
Meetings:
Wed. 7:05 – 9:45
At:
CBM 114
Website:
The course will be on blackboard
Textbook:
Internet and the World Wide Web. How to Program. P. Deitel, H. Deitel and A. Deitel. Fifth Edition (2012)
Office Hours:
Tu & Th: 3:00pm-5:00pm, Wed: 4:00pm - 6:00pm in person and online (chat)
Must Have:
At least three web browsers installed; a text editor with syntax highlighting (BlueFish is a good option)
Must haves:
You must create an account in StackOverflow and provide me with your ID number by the first class.



Unit

Topic, Objectives and Readings

Assignment & Materials




  • Topic: Type setting with HTML
  • Objective: Be able to create a webpage with formatted content.
  • Contents: HTML as a markup language. Basic tags: P,IMG,TABLE,H1..H3, Etc.
  • Readings: Chapter 1 and 2 of the textbook and The W3 Schools tutorial

  • Assignment: You must go to W3 Schools’ HTML section and play around. Try out building sample web pages, Go to the ”start learning HTML now” link Take the quiz at www3schools. Lastly, create a webpage with actual relevant content, that includes tables, images, links, lists and several sections. If you do not have a topic in mind, here are some suggestions: ”The US constitution”; ”Justin Bieber”; ”Research Methods”; ”Learning to Add”; ”The history of the WWW”; ”The Emperor Pinguin”; ”Chilean Natural Resources”.




  • Topic: CSS –controlling format separately–
  • Objective: Be able to lay out a webpage using almost exclusively CSS
  • Contents: The DIV tag, CSS syntax, basic CSS commands: classes, elements, id’s
  • Readings: Chapter 4; and the tutorial form the W3 schools.

  • Assignment: a) do all the excercises on w3schools.org as well as the quiz; b) Change the previous assignment to use only CSSs The CSS must be stored in a separate file. Bonus points for extra layout enhancements not covered in class.




  • Topic: Events and Basic Javascript
  • Objective: Demonstrate understanding of events and be able to examine the HTML using the document object. Also, cover HTML forms and the prompt command.
  • Contents: alert, onclick, onmouseOver, document.getElementById .value and .html
  • Readings: Chapter 6. Also, go over Codecademy and do the first tutorial.

  • Assignment: Create a webpage that displays a Tic-Tac-Toe board with a table with blank images in each cell of the board. Have an onlcick event on those images.




  • Topic: Javascript.
  • Objective: Students must be able to write small engines behind web based applications using javascript.
  • Contents: For loops, variables, arrays, 2d arrays and functions. Also, detecting the browser and selecting a stylesheet. Perhaps classes.
  • Readings:

  • Assignment: Part 1: Now, when people click on the cells, the images have to alternate between O and X. Also, people should not be able to click on an image that has been clicked previously.

    Part 2. Implement a function isWin(pict) that is called every time a user puts an X or a O in the tic tac toe. This function should show an alert if pic won. Part 2. Instead of an alert, show it in the webpage. Bonus points for making it slowly appear on the screen.

    Part 3. Have the tic-tac-toe play against the user.

    Part 4. Do the w3schools tutorial and quiz




  • Topic: CSS 3.
  • Objective: Demonstrate proficiency with CSS3 components, what works and where.
  • Contents: text-shadow; text-wrap; border-radius, box-shadows, backgrounds, transitions, animation,2D transformations, multiple columns @media
  • Readings: w3schools, chapter 5

  • Assignment: Have the user pick a color for their symbol in the tic tac toe game. Also, create some challenging addition of two random numbers. If the user answers correctly, then she/he can play the tic tac toe. Also, do the w3schools tutorial and the quiz. Have the tic-tac-toe have a different appeareance depending on the screen it is seen on. Lastly, animate the X and Os.




  • Topic: HTML 5.
  • Objective: Demonstrate proficiency with HTML5 components, what works and where.
  • Contents: HTML5 canvas, video and forms such as location.
  • Readings: Chapter 3. w3schools

  • Assignment: Have the user pick a color for their symbol in the tic tac toe game. Also, create some challenging addition of two random numbers. If the user answers correctly, then she/he can play the tic tac toe. Otherwise its the other person’s turn.




  • Topic: Javascript tricks with jQuery
  • Objective: Demonstrate proficiency with basic jQuery components and syntax
  • Contents: Accordion menus, popup windows, animations
  • Readings: jQuery tutorial

  • Assignment: Have the tic tac toe have an accordion menu to select the difficulty of the game and have the problem appear in a jQuery popup window.




  • Topic: Writing for the mobile Web
  • Objective: Students understand the importance of design before development.
  • Contents: Paper prototypes, Design and cretion of mobile apps. PhoneGap.
  • Readings: Several online articles.

  • Assignment: Design an engaging app for students. We will work on these for the remainder of the course. Create a solid paper prototype. Follow the example.




  • Topic: Web Servers
  • Objective: Learn what web servers are, how to install them and the abilities they provide
  • Contents: Apache, IIS basics, install apache, configure virtual hosts and allow/deny domains.
  • Readings: Online documentation

  • Assignment: Install apache, put the tic tac toe website on the root directory.




  • Topic: PHP (or server side programming)
  • Objective: Understand how server applications process requests and respond to them
  • Contents: PhP, post and get parameters
  • Readings: Online documentation, Ch. 19

  • Assignment: Create a webpage that will validate a user and return questions for the tic tac toe.




  • Topic: Databases
  • Objective: Demonstrate understanding and basic skills setting up a database for online apps
  • Contents: Two table database with mysql, select, interacting with PHP. CRUD.
  • Readings: Chapter 18

  • Assignment: Create a user table and a questions table for the TicTacToe game. Create a PHP webpage that validates a login.




  • Topic: Ajax
  • Objective: Demonstrate understanding of Ajax and basic proficiency parsing JSON documents
  • Contents: Ajax, JSON, Type-Ahead
  • Readings: Chapter 16

  • Assignment: JQery and PhoneGap.







//

Grading



Item Weight


Assignment Average 20%
Quiz Average 30%
Final Exam 40%





Weighted AverageCourse Grade



90% or higher A
80% – 89% B
70% – 79% C
60% – 69% D
0% – 59% F



NOTE: You MUST receive at least 60% on the Common Final Exam in order to receive a grade of ”C” or higher for the course. If you do not, you will receive a ”D” or an ”F” for the course, depending on your Weighted Average.

Every Class

Come prepared, google the topics, read the book and, of course, do the homework on your own.

Late Work Policy

Each day1 that your work is late the maximum possible grade decreases by one letter point.

Academic Integrity

Students are required to abide by Northeastern Illinois University’s academic integrity policy. Failure to adhere to this policy will likely result in a failing grade in the class and / or expulsion from the University.

Web Link to Emergency Information

It is recognized that a safe university environment is a shared responsibility of faculty, staff, and students, all of whom are expected to familiarize themselves with and cooperate with emergency procedures. Emergency Procedures and Safety Information can be found on NEIUport on the MyNEIU tab or at:

Main campus:
http://www.neiu.edu/~neiutemp/Emergency_Procedures/MainCampus/
El Centro(English version):
http://www.neiu.edu/~neiutemp/Emergency_Procedures/ElCentro/
El Centro(Spanish version):
http://www.neiu.edu/~neiutemp/Emergency_Procedures/ElCentro_Spanish/
CCICS:
http://www.neiu.edu/~neiutemp/Emergency_Procedures/CCICS/
Chicago Teachers Center(CTC):
http://www.neiu.edu/~neiutemp/Emergency_Procedures/CTC/
University Center at Grayslake:
http://ucenter.ehclients.com/pdfs/UCLCEmergencyPreparedness.pdf