Preamble

  • Course Title: Web Advanced (PGTE 5505-B)
  • Location: University Center, 63 Fifth Ave, Rm 503
  • Day and Time: Tuesdays, 7:00 PM — 9:40 PM
  • Dates: 26 January – 10 May 2016
  • Instructor: Roy Vanegas
    • Office Hour: By appointment
  • Tutor: Qianjing Liu
    • Office Hour: Tuesdays, 2:00 PM — 3:30 PM; Thursdays, 10:00 AM – 11:30 AM; D12

Prerequisite

Bootcamp (PGTE 5410) is the pre-requisite for this course. If you haven’t taken Bootcamp, you’ll have to demonstrate a strong knowledge of HTML and CSS.

Description

From the Department:

“Applications rarely are comprised of a tangled set of static files. They’re dynamic. They update. They remember things. The course will introduce the concepts of a database and Web applications as a set of design problems. The class will investigate server-side applications, third-party data sources and APIs and how applications can become dynamic and highly functional. To approach the design and construction of applications that derive from datasources and databases, this course builds upon an essential knowledge of Web Standards, user interface design, and usability to support the creation of functional and responsive projects for the Web across multiple devices and platforms. Students will incorporate interaction design, visual design, user experience and code to rapidly sculpt data into content. By the end of the course, students should be able to design, build and deploy data-driven Web applications. The course employs a pedagogy suitable for designers, artists and technologists who seek an empowerment achieved by being able to build data-driven applications.

Javascript: We will learn JavaScript properly. Then, we will learn useful design patterns. Then we will pick up useful tools for making cool things better.”

This course is about how to store, organize, and retrieve information on the Web. As a previous teacher of this course once said, “At its core this course is about teaching you how to grapple with the [W]eb. From UX to [f]rontend and [b]ackend we’ll examine how [to] tackle and utilize new frameworks, APIs and platforms. In the end you’ll develop your own methods for understanding, harnessing and executing the web applications of the future.”

Note: Up until fall 2014, this course was called “Web 3.”

Learning Outcomes

Upon successful completion of this course, you will understand…

  • the many elements of a web application, from server to database to user.
  • the primary components of a web server.
  • the essential workflow of a professional modern web development environment, using a task runner.
  • the basic elements of a server-side language, such as PHP.
  • the basic items of a client-side language, such as JavaScript.

Schedule

  • Where: 6 East 16th St, Rm 603
  • Day: Wednesday
  • Dates: 2 September 2015 — 16 December 2015
  • Time: 7:00 PM — 9:40 PM

Note: the topics listed below will be covered in the order listed, time permitting. It’s possible that some topics will be overlooked.

WeekTopicsHomework
(for following week)
1
(September 2)
  • Setting up Bitbucket and GitHub
  • Installing your MAMP stacks
  1. Install all software listed under Software Requirements, and make sure to configure your web stacks.
  2. Read Applying Divine Proportion To Your Web Designs
  3. Read The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!) (2003)
  4. Read All About Unicode, UTF8 & Character Sets (2012)
2
(September 9)
  • Installing Grunt
  • An introduction to Git
  1. Read this document in order to prepare for your final project ideas next week.
  2. Read Understanding Visual Hierarchy in Web Design
  3. Read the excerpts from Thinking with Type.
3
(September 16)
  • An introduction to Git (continued)
  • Some laws on typography
  • Analysis of good design
  1. Read Designing for the New Fold: Web Design Post Monitorism
  2. Read Great Design Hurts: Striving for Pixel Perfection
4
(September 30)
  • Final project idea presentations
  1. Read All The Meanings of “head” in HTML
  2. Read The Style Keyword: The Difference Between Tag and Attribute
  3. Install Sass
  4. Learn the Sass basics
  5. Read Mathematics and Web Design: A Close Relationship
  6. Read An Introduction to Color Theory for Web Designers
5
(October 7)
  • Sass
    • Installing Sass
    • Using Sass at the command line
    • Variables
    • Mixins
  • Data
    • Learning to organize it
    • Learning to store it
    • Learning to update it
    • Learning to retrieve it
    • Learning to delete it
  • An introduction to databases and MySQL
  • MySQL
    • Creating databases
    • Setting up users
    • Creating tables
    • INSERT-ing into tables
    • CREATE-ing tables
    • SELECT-ing content from tables
    • DELETE-ing data from tables
    • UPDATE-ing data in tables
  1. Read HTML5 Audio Tutorial
  2. Read Definitions: User Agent, User, and Author
  3. Read The Web Designer’s Theory of Relativity
  4. Read Unity in Web Design
6
(October 14)
  • Truth tables
  • The seven structures of computer programming
  1. Clone the email-check repository from Bitbucket
  2. Clone the web-app repository from Bitbucket
  3. Read The Gestalt Principle: Design Theory for Web Designers
  4. Read The Scaling Fallacy and Web Design
7
(October 21)
  • JavaScript
  1. Read Understanding the F-Layout in Web Design
  2. Read Understanding the Z-Layout in Web Design
8
(October 28)
  • More JavaScript
  • PHP
    • What is it?
    • Why use it?
  1. Read Errors: Bad Decisions or Bad Design?
  2. Read Less is More: Fundamentals of Minimalist Web Design
9
(November 4)
  • HTML Forms
  • More advanced MySQL: inner joins, unions, nested queries
  • More PHP
    • Connecting to databases from web pages using PDO
    • Storing, updating, retrieving, and deleting data in MySQL via PDO
  1. Read Concept and Inspiration: Design Theory for Web Designers
  2. Read Visual Direction in Web Design
10
(November 11)
  • PHP/MySQL security techniques
  • Login and logout
  1. Read Artistic Distance
11
(November 18)
  • User authentication
  • Mimicking state
12
(December 2)
  • More PHP
  • Including APIs in your projects
  • jQuery
    • Using it to manipulate the DOM
    • Using it to manipulate CSS
13
(December 9)
  • Open lab
14
(December 16)
  • Final presentations

Tutoring Schedule

Qianjing Liu meets students in D12 on Tuesdays from 2:00 PM – 3:30 PM and Thursdays from 10:00 AM — 11:30 AM.

Code

In-class examples of code will be made available here for download.

Assigned Readings

All your readings are assigned from web sites, including http://www.essential-html.com, and are listed under the Schedule section.

Suggested Readings

The following is a list of suggested readings that all web programmers and designers should have on their bookshelves.

Title Author Cover
Sass for Web Designers Chris Cederholm
The Book of CSS3 Peter Gasston
Jump Start Responsive Web Design Craig Sharkie & Andrew Fisher
Introducting HTML5 Earl Castledine & Craig Sharkie
jQuery: Novice to Ninja Earle Castledine & Craig Sharkie
Design with Type Carl Dair
Thinking with Type Ellen Lupton
Interaction of Color Josef Albers
Universal Principles of Design: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design William Lidwell, Kritina Holden, Jill Butler

Software Requirements

Whether you use Windows or Mac, all the necessary software for this course is listed below. It’s all free and downloadable from their respective links.

Browsers

Download all the browsers available at Browse Happy.

A Command Line Interface

Mac and Linux users do not have to install a CLI, because these operating systems already have The Terminal installed. Windows 8 users, however, need to install Cygwin.

Mac users need to install this set of environment files.

Text Editor

The code you write will require a text editor. Consider using Sublime Text (available for both Mac and Windows). Download this compressed file containing the Sublime Text preferences we’ll use in class, and try this tool to help you create and understand how preferences work in Sublime Text.

Fonts

As designers, you’ll likely want to program using a beautiful font instead of the banal fixed width fonts that are stock issue in Mac OS X and Windows. Here are a few options:

A Link Checker

The W3’s Link Checker isn’t software you download, but a utility that verifies links on a web page so you don’t have to. Bookmark it.

A Compression/Decompression Utility

If you’re using Windows and you don’t have a compression/decompression utility, download 7-Zip, which is free and open source. Mac and Linux/UNIX users already have free compression utilities installed at the command line.

Web Stack

MAMP

  1. Enabling the root user account on Mac OS X
  2. Setting up the Apache server
  3. Setting up PHP
  4. Installing MySQL and Configuring MySQL with PHP

WAMP

Download WampServer for Windows — a full WAMP stack web development environment containing the Apache server, MySQL, and PHP in one package.

Grading Standards

Grading Formula

Your grade for this course will be computed entirely on the following formula:

  1. Assignment 1 (25%)
  2. Assignment 2 (25%)
  3. Assignment 3 (25%)
  4. Attendance (25%)

The A Range

A (“Work of exceptional quality”)

Students who earn an “A” produce work that is impressive, goes beyond what is required of the course, and exemplifies a superb work ethic. Their work is exceptional. “A” students might — or should — share their knowledge with their classmates, and they are active participants in class discussions. “A”-grade students do not spend time distracted by others or digital devices, and are contributing members of the class. Lastly, “A”-level students demonstrate an evolving understanding of the material through iterative efforts of their work.

A- (“Work of high quality”)

In the “A-” range, a student has performed very closely to the level of his or her “A”-level counterpart, but has produced at least one project/homework/component of the grading scheme that was below a grade of “A.” Perhaps the student missed too many classes, showed up to class late too often, or submitted an assignment/homework that was not “A”-level.

The B Range

B+ (“Very good work”)

Students earning grades of “B+” produce very good work, which is close with that of their counterparts earning in the “C” range, but offer a sustained and meaningful structure to a critical user experience and design that is more complex than students earning a grade in the “C” range. “B+” students’ work is logically organized, responds to assignments in thoughtful and distinctive ways, and offers a sound user experience. Although minor coding and layout errors may be present, they are under control and do not impede user experience or content.

B (“Good work; satisfies course requirements”)

Overall, “B” range students produce work with good results. He or she possesses a strong understanding of the course’s content and shows a high level of competence in the skill set taught in the course.

B- (“Below-average work”)

Students in the “B-” range are producing work that is above adequate but below average. Their work shows flashes of very good work, but, overall, is not compelling for a grade of a “B.”

The C Range

C+ (“Less than adequate work”)

“These are average assignments. They will demonstrate some success in engaging with the assigned material. The document will show that the student can identify and work with key frameworks and methods with a particular set of content and apply them to ideas and examples found in other precedents, or other outside interactive experiences. Additionally, the assignment will demonstrate effort in the areas of user experience, interaction design. Typical of a “C/C+” assignment, however, is a disjointed sense of content hierarchy and user experience in connection with the page. Generally these assignments contain general coding errors which create unwanted or negative rendering, however, the assignments still work and an effort to debug and fix errors is present.”

C (“Well below average work”)

In the “C” range, a student has show more than minimal progress to pass, but not quite on the level of a “C+” student.

C- (“Poor work; lowest possible passing grade”)

A student who earns a grade of “C-” has performed the bare minimum to pass the course. He or she has performed very near to that of a student who would typically fail, but has some basic understanding of important concepts related to the course. He or she has also shown some attempt at trying to grasp the material of the course. In essence, the student has produced work that shows evidence of minimal effort expended.

F (“Failure”)

Failing grades are earned by students who do not submit required work, produce incomplete work, and/or do not take examinations (without prior notification and approval). Grades of “F” are also earned by students who show no comprehension of the topics discussed in class and no forthcomingness to attempt to comprehend. Students who fail show no interest in learning, make no effort to remedy problem areas, are continually distracted in class by other students and/or mobile electronic devices, and interrupt class.

W (“Withdraw”)

The grade of W may be issued by the Office of the Registrar to a student who officially withdraws from a course within the applicable deadline. There is no academic penalty, but the grade will appear on the student transcript.

WF (“Withdraw Fail”)

The grade of WF is issued by an instructor to a student who has not attended or not completed all required work in a course but did not officially withdraw before the withdrawal deadline. It differs from an “F,” which would indicate that the student technically completed requirements but that the level of work did not qualify for a passing grade. The WF is equivalent to an F in calculating the grade point average (zero grade points), and no credit is awarded.

I (“Incomplete”)

The grade of I, or temporary incomplete, may be granted to a student under unusual and extenuating circumstances, such as when the student’s academic life is interrupted by a medical or personal emergency. This mark is not given automatically but only upon the student’s request and at the discretion of the instructor. A Request for Incomplete form must be completed and signed by student and instructor. The time allowed for completion of the work and removal of the “I” mark will be set by the instructor with the following limitations:

Undergraduate Students: Work must be completed no later than the seventh week of the following fall semester for spring or summer term incompletes and no later than the seventh week of the following spring semester for fall term incompletes. Grades of “I” not revised in the prescribed time will be recorded as a final grade of “WF” by the Office of the Registrar.
Graduate Students: Work must be completed no later than one year following the end of the class. Grades of “I” not revised in the prescribed time will be recorded as a final grade of “WF”.

Important Note

Please, please do not try to negotiate a grade with me — before or after — any work due. By asking me to favor you (“I can’t have this class hurt my GPA,” “My student status depends on my doing well in this class,” or, “I need a B or better for my student loans”), you’re asking me to put you above your classmates. It’s a form of extortion, and I will remember your having asked me to treat you better than your peers.

Manage your time well; I do not accept late work.

Divisional, Program, and Class Policies

  • Responsibility: Students are responsible for all assignments, even if they are absent. Late assignments, failure to complete the assignments for class discussion and/or critique, and lack of preparedness for in-class discussions, presentations and/or critiques will jeopardize your successful completion of this course.
  • Participation: Class participation is an essential part of class and includes: keeping up with reading, assignments, projects, contributing meaningfully to class discussions, active participation in group work, and coming to class regularly and on time.
  • Attendance: Faculty members may fail any student who is absent for a significant portion of class time. A significant portion of class time is defined as three absences for classes that meet once per week and four absences for classes that meet two or more times per week. During intensive summer sessions a significant portion of class time is defined as two absences. Lateness or early departure from class may also translate into one full absence.
  • Blackboard or Canvas: Use of Blackboard may be an important resource for this class. Students should check it for announcements before coming to class each week.
  • Delays: In rare instances, I may be delayed arriving to class. If I have not arrived by the time class is scheduled to start, you must wait a minimum of thirty minutes for my arrival. In the event that I will miss class entirely, a sign will be posted at the classroom indicating your assignment for the next class meeting.
  • Electronic Devices: Use of electronic devices (phones, tablets, laptops) is permitted when the device is being used in relation to the course’s work. All other uses are prohibited in the classroom and devices should be turned off before class starts.
  • Academic Honesty and Integrity: The New School views “academic honesty and integrity” as the duty of every member of an academic community to claim authorship for his or her own work and only for that work, and to recognize the contributions of others accurately and completely. This obligation is fundamental to the integrity of intellectual debate, and creative and academic pursuits. Academic honesty and integrity includes accurate use of quotations, as well as appropriate and explicit citation of sources in instances of paraphrasing and describing ideas, or reporting on research findings or any aspect of the work of others (including that of faculty members and other students). Academic dishonesty results from infractions of this “accurate use”. The standards of academic honesty and integrity, and citation of sources, apply to all forms of academic work, including submissions of drafts of final papers or projects. All members of the University community are expected to conduct themselves in accord with the standards of academic honesty and integrity. Please see the complete policy in the Parsons Catalog. It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension from the university, or dismissal from the university.
  • Student Disability Services (SDS): In keeping with the University’s policy of providing equal access for students with disabilities, any student with a disability who needs academic accommodations is welcome to meet with me privately. All conversations will be kept confidential. Students requesting any accommodations will also need to meet with Jason Luchs in the Office of Student Disability Services, who will conduct an intake, and if appropriate, provide an academic accommodation notification letter to you to bring to me. SDS assists students with disabilities in need of academic and programmatic accommodations as required by the Americans with Disabilities Act of 1990 (ADA) and Section 504 of the Federal Rehabilitation Act of 1973. http://www.newschool.edu/studentservices/disability/.