Web Programming

Description

The Undergraduate Catalog describes this course as…

Advanced programming skills for website design. Dynamic content development explored through state of the art programming languages for the creation of interactive web sites. Students will create web pages that utilize the most current techniques in web development. The curriculum in this class emphasizes an integrated and creative approach to web programming, including detailed instruction and practice in the technical aspects. It is designed to give students a basic introduction to the tools and techniques used by web programmers.

Elaborating on the “most current techniques in web development,” this class will expose students to various modern-day, JavaScript-based web programming techniques. Using tools such as Node.js, WebRTC, Tone.js, Gulp, jQuery, and HTML5 Canvas, students will produce creative, interactive web sites revision-controlled with Git and GitHub.

Exposition-quality work created in this course can be showcased in the iArt Mix exhibition that is held every semester.

Prerequisite: Students need to have taken Web Production I (MEDP 28500) or demonstrate competency in HTML and CSS to enroll in this course.

Learning Outcomes

Upon successful completion of this course, students will understand...

• how to automate common web development tasks using Gulp;
• how to draw shapes using P5.js;
• how to write robust JavaScript that handles errors professionally;
• how to find and integrate JavaScript libraries;
• how to use jQuery;
• how to integrate plug-ins into a jQuery-based project;
• how to use Git and GitHub to revision control web (and other) projects;
• how to write methods and objects in JavaScript;
• how to interact with music in the browser using Tone.js;
• and, how to implement some basic Node.js applications.

Class Rules

Consuming food in class. There is no eating inside our classroom, either during class or while on break. The smell of food is very distracting, even offensive to some, and can linger in a room. Please eat before or after class, or outside the classroom during a break. Drinks in covered containers are allowed.

Succeeding in Class. Read carefully what is outlined in this document as a set of policies you can adopt to do well in this course.

Attendance. Attending lectures is crucial, for obvious reasons. Aside from emergencies, everyone should attend each session. If you are absent for any reason, you are responsible for all the material and announcements covered in the session you missed. Please do not ask me for notes, as I do not have any to share. Make one or more note-taking friends in class so you can share notes.

Lateness. If you come to class late and miss roll call at the beginning of class, I will not interrupt the lecture to update my roster from “absent” to “late.” It is your responsibility to come to me after class to let me know that were late. This has to be done in person and on the day you are late. Otherwise, the absence remains. Also, bear in mind that you are responsible for any announcements and/or material you missed before your late arrival to class.

Academic Integrity. Unless a project requires collaboration with one or more classmates, ensure all the work you submit for this course is your own. The College’s full disclosure on academic integrity is available here.

Sexual Misconduct and Violence. Any incident of sexual misconduct or violence on- and off-campus should be reported to NYPD and/or The College’s Public Safety Office on 212.772.4444. Students are further encouraged to contact The College’s Title IX Campus Coordinator, Dean John Rose (jtrose@hunter.cuny.edu | 212.650.3262) or Colleen Barry (colleen.barry@hunter.cuny.edu | 212.772.4534), and seek complimentary services through the Counseling and Wellness Services Office, Hunter East 1123. CUNY’s Policy on Sexual Misconduct is available here.

Software Requirements

All the required software for this course is free.

For Mac users, most of the installation process is automated using this script. Items below marked with a ^※ are not included in the installer script — they must be installed manually.

For Windows and Linux users, all the software listed below must be installed manually.

GitHub (Mac, Windows, and Linux)

All in-class examples, assignments, and help is done via GitHub. Once you’ve opened an account at GitHub, download the client for your computer here.

Text Editor (Mac, Windows, and Linux)

The code you write will require a text editor. And, although there are many on the market, such as Brackets (open source), Sublime Text (nagware), and Visual Studio Code (open source), Atom (open source) is the only editor supported in class.

Markdown Editor/Viewer (Mac, Windows, and Linux)

Although a text editor will suffice to view and edit Markdown files, some may want a full-featured program to deal with Markdown. We’ll use Typora in class.

Browsers (Mac and Windows)^※

Download all the browsers available at Browse Happy. Some of the students in my more in-depth classes might also want Chrome Canary, Safari Technology Preview, Firefox Developer Edition, and Firefox Nightly. I use Chrome and Firefox in class.

File Transfer Protocol (Mac, Windows, and Linux)^※

To transfer files between our local machines and a server, we’ll use FileZilla.

Fonts (Mac, Windows, and Linux)

In addition to the stock issue, monospace/fixed-width fonts included with your OS, give IBM Plex, Fira Mono, Ubuntu Mono, Anonymous Pro, or Inconsolata a try.

Command Line Interface

Mac and Linux users do not have to install a Command Line Interface, or CLI, because these operating systems already have The Terminal installed. Windows users, however, might want to install Cygwin.

Browser Extension for Accessibility Testing^※

Available for Chrome and Firefox, Axe is a browser extension that checks the accessibility of your web pages.

Web Development Environment Configuration Files^※

Once all the software above has been installed, go here and follow the instructions in the README.md file.

Students with Disabilities

Hunter College complies with the Americans with Disabilities Act of 1990 (ADA) and Section 504 of the Rehabilitation Act of 1975. All information from The College is available from http://catalog.hunter.cuny.edu/content.php?catoid=28&navoid=5728.

Contact

My email address is rvanegas at hunter dot cuny dot edu. However, I only communicate with students over email in emergency situations (death, divorce, personal tragedy, pet emergency, etc). For matters related to the course, see me before class, during the break, after class, or make an appointment.

Schedule

Instead of slides, in-class examples are posted to GitHub. Readings are posted under the Homework column.

Important Dates

• 12 February: No Class (Lincoln’s Birthday)
• 23 April: No Class (Spring Recess)
• 14 May: Final Lecture
• 21 May: Final Presentations
• Class Twelve: Midterm project due
• Class Thirteen: Collaborative project due
• Class Fourteen: Semester project due
• Class Fifteen: Final project due

Projects

All projects will be available on GitHub.

• Midterm project: 20%
• Collaborative project: 20%
• Semester project: 20%
• Final project: 30%

Resources

Below is a short list of HTML, CSS, and JavaScript companion resources useful to the material we cover in class.

• Node’s home page.
• P5.js’s home page.
• Gulp’s home page.
• jQuery’s home page.
• Tone.js’s home page.
• ESLint, the JavaScript code linting tool.
• Avoid W3Schools; W3Fools has been the definitive intervention since 2011.
• MDN: A learning resource for developers by developers.
• A specificity calculator that is useful in reinforcing the concepts of specificity.
• A CSS3 gradient generator that helps with the unwieldy CSS3 gradient syntax.
• Can I Use a CSS, HTML, JavaScript, or other web-based syntax in new code?
• HTML5 Doctor is a tutorials/blog about HTML5.
• Web Fundamentals is a set of tutorials and tools from Google.
• Chris Coyier’s CSS-Tricks provides CSS-based tutorials and — of course — tricks.