Preamble

  • Course Title: Web 3 (PSAM 5150-B)
  • Location: 55 West 13th St (Arnhold Hall), Rm 403
  • Day and Time: Tuesdays, 7:00 PM — 9:40 PM
  • Instructor: Roy Vanegas
  • Email Address: vanegasr@newschool.edu
  • *Download this syllabus in .mobi or .pdf format.

Prerequisite

It’s assumed that Bootcamp (PGTE 5410) has already been taken by MFADT students. (Take a look at what the latest entering class did.) I realize that some of you may have taken this course over a year ago, and that others may have even waived out of it. Therefore, we’ll cover HTML5 and CSS3 in detail over the first two or three weeks of this course to make sure we’re all on the same page — literally.

Description

From the moment Vannevar Bush published As We May Think in the summer of 1945 to the moment that the iPhone was released in June 2007, humanity has become more and more connected and information has become easier to acquire. In the last seven decades, we’ve developed—evolutionized—a stronger, easier, and more symbiotic connection with each other and with information.

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.”

We’ll engage the following keywords and concepts in class: design, usability, user interface (UI), user experience (UX), store, retrieve, share, connect.

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 basic elements of a server-side language, such as PHP.
  • the basic items of a client-side language, such as JavaScript.

Schedule

  • Where: 55 West 13th St (Arnhold Hall), Rm 403
  • Day: Tuesday
  • Dates: 28 January 2014 — 13 May 2014
  • Time: 7:00 PM — 9:40 PM, with a short break at the halfway point.

Note: our class will not meet on 25 March for spring break.

Note: the topics listed below will be covered in the order listed, time permitting. It’s possible — based on the cadence of the class — that some topics will be overlooked.

The Topics section below lists the material we’ll cover during the week listed to the left. The Homework items listed to the topics’ right indicate work due the following week.

For example, on week 1, I’ll introduce the concepts of a web stack, talk about character sets and web-based layout engines, and discuss a few other concepts relating to the Web. And, for week 2 (on 4 February), you’ll read all about character sets in the two readings assigned.

WeekTopicsHomework
1
(January 28)
  • An introduction to the web stack
  • The fallacy of pixel perfection
  • HTML
    • Getting HTML5 right
    • Writing semantic HTML
    • Character sets
    • The HTML doctype
    • The head section section of an HTML document
    • Web layout engines
    • Discuss, <html, <head>, <meta>, <title>, <link>, <h1...h6>, <header>, <footer>, <figure>, <figcaption>, <main>, <img>, <iframe>, <table>, <ol>, <ul>, <dl>, <span>, <div>, <kbd>, <dfn>, <br>, <hr>, <audio>, <video>, <strong>, <style>, <nav>.
    • Block level elements, inline elements, replaced elements, non-replaced elements
    • Special HTML entities
  • CSS
    • Embedded/internal styles
    • External styles
    • Length units
    • The cascade
    • !important declarations
  1. Configure your servers.
  2. Read The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!) (2003)
  3. Read All About Unicode, UTF8 & Character Sets (2012)
2
(February 4)
  • CSS
    • Inline styles
    • Typographical properties
    • WebFonts
    • Shorthand properties
    • The CSS box model
    • General syntax and nomenclature
    • Structure of a rule
    • Borders
    • The 4 combinators
    • The 11 selectors
    • The 13 structural pseudo-classes
    • Color and backgrounds
    • Gradients
    • Browser-specific prefixes (also known as vendor-specific extensions)
    • IDs
    • Classes
  1. See the Assigned Readings section.
3
(February 11)
  • CSS
    • Generated content
    • Interaction between floating elements and position properties
    • Normal declarations
    • Pseudo-classes
    • Pseudo-classes-structural
    • Pseudo-elements
    • Specificity
    • The 9 float rules
    • The 4 position properties
    • Stacking contexts
    • Boxes and Effects
    • Transformations
    • Sass
  1. Install Sass
  2. Learn the Sass basics
4
(February 18)
  • Truth tables
  • CSS
    • Transitions
    • Responsive Web Design (RWD); Media queries
    • More Sass
  • HTML
    • Audio
    • Video
  • JavaScript
    • Control structures
    • Loops
    • Selection structures
  1. Read the progress presentation guidelines for 4 March
  2. Get to work on your final projects
5
(February 25)
  • An introduction to databases and MySQL
  • Data
    • Learning to organize it
    • Learning to store it
    • Learning to update it
    • Learning to retrieve it
    • Learning to delete it
  1. TBD
6
(March 4)
  • Final project progress reports
  • No break
  1. TBD
7
(March 11)
  • PHP
    • The seven structures of computer programming according to PHP
  1. Database critique assignment
8
(March 18)
  • PHP
    • What is it?
    • Why use it?
  1. TBD
9
(April 1)
  • 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. Finalize all the front-end designs of the pages in your project
  2. Follow the MySQL tutorial from the Code section (18 March 2014)
  3. Follow the PHP/MySQL blog code that will be available by Saturday, 29 March 2014
10
(April 8)
  • PHP/MySQL security techniques
  • Login and logout
  1. TBD
11
(April 15)
  • User authentication
  • Mimicking state
  • PHP security techniques
  1. TBD
12
(April 22)
  • More PHP
  • Including APIs in your projects
  • jQuery
    • Using it to manipulate the DOM
    • Using it to manipulate CSS
  1. TBD
13
(April 29)
  • More jQuery
  • More PHP and MySQL
  1. Finalize presentations
14
(May 6)
  • Open lab
  1. Final project guidelines.
15
(May 13)
  • Final presentations. Prepare to stay until about 10:00 PM, as we will need to go through 17 presentations that will undoubtedly put us past our 9:40 PM class ending time.
  1. Enjoy your summer!

Code

Any code I need to share with you, including code I write during class, will be added to this section for you to download.

29 April 2014
The final version of the “upload” project, complete with state, login, logout, file uploading, and file linking
15 April 2014
AJAX; page generation; CSS Selectors
8 April 2014
Login, logout, and uploading files with PHP
18 March 2014
Intro MySQL tutorial and some basic commands
25 February 2014
JavaScript for and while loops; first PHP file
18 February 2014
More Sass and some intro JavaScript
11 February 2014
More style sheets + some intro Sass
4 February 2014
External style sheets
Bash Environment
Bash environment files for The Terminal.

Assigned Readings

Your assigned readings will vary in topics from HTML, CSS, and JavaScript to Sass, jQuery, and MySQL. Because the rhythm of the class and the final projects will likely vary wildly, many readings will be assigned and listed here on a weekly basis.

Also, I rarely give out hard copy handouts of readings, opting instead for electronic documents.

Topic(s) Links Target Reading Due Date Comment
  • Character sets
  • Special HTML entities
  • The HTML doctype
  • The head section section of an HTML document
  • Web layout engines
  • The fallacy of pixel perfection
Tuesday, 4 February 2014 This set of readings covers essential elements related to the web and mobile applications.
  • The head section of HTML
  • Structuring/organizing your HTML content
  • Tags that should never be used
Tuesday, 11 February 2014 The core components belonging at the top of your HTML documents; the setup feature of HTML. Using the correct structural elements to make your markup semantic. The outlining algorithm. Deprecated tags in HTML4.01 and 5.
  • Navigation systems
  • Photo galleries
jQuery: Novice to Ninja, 2nd Edition, by Earle Castledine and Craig Sharkie. Available from O’Reilly. Tuesday, 25 February 2014 We’ll discuss navigation systems and photo galleries using examples from this book, and we’ll return to this book often during the course.

Announcements

12 March 2014
Starting on Sunday, 30 March, I will be holding office hours from 5:00 PM — 7:00 PM every Sunday through 27 April on the same floor as our classroom.
12 March 2014
Your database design critique teams:
  • Galit ↔ Sultan
  • Jiaqi ↔ Zeqing
  • Kayla ↔ Ziqu
  • Matthew ↔ Minh
  • Melanie ↔ Sean
  • Nicole ↔ Elisa
  • Shannon ↔ Feng
  • Anthony ↔ Crystal
  • Shu ↔ Yu-Chien
  • Siu ↔ Soohyun
11 March 2014
Check the Code section for helpful environment files you can use in The Terminal.
18 February 2014
Just a reminder that your midterm progress presentations are on 4 March. Check the Schedule section for the guidelines PDF.
2 January 2014
This is a test.

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. For Firefox, you’ll need to add all the plugins you see here.

Text Editor

The code you write will require a text editor. Mac users should download TextWrangler and Windows users should download Notepad++, choosing the “Notepad++ Installer” link from the download page.

Web Developer Tools

Chris Pederick’s Web Developer Firefox add-on is a helpful HTML and CSS debugging tool.

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. Attendance/participation/caring (20%)
  2. Midterm project: final project progress/presentation (30%)
  3. Final project (50%)

This grading formula will be adhered to quite closely.

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.

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.

Web Programming Resources

HTML

CSS

JavaScript

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/.

Contact and Office Hours

My email address is vanegasr at newschool dot edu. However, you’re strongly advised to see me if you have questions, as I rarely do email nowadays. I’m available by appointment in person — likely in D12, 6E 16th St, 12th flr — or via Skype.