X52.9742001 Web Development Intensive Fall, 2009

Document Sample
X52.9742001 Web Development Intensive Fall, 2009 Powered By Docstoc
					1

                         NEW YORK UNIVERSITY
             SCHOOL OF CONTINUING AND PROFESSIONAL STUDIES

               X52.9742001 Web Development Intensive
                             Fall, 2009

Instructor: Amos Bloomberg
amos@plasticpast.com

Course Hours: Sept 26 – Dec 19; Saturdays; 9am - 6pm
Room 209, 48 Cooper Square

What we call “the web“, or World Wide Web, has been around for less than 20
years. However, in that time, content on the web has exploded, spawning a
wide variety of technologies and practices in its stead. There is a wealth of
lousy documentation and bad advice available online.

This class takes a practical “best-practices” approach, and addresses the core
technologies and techniques used to make the vast majority of “websites” and
“web applications“. At the end of the class, you will have an in-depth
understanding of how most websites are made.

This is very much a workshop course in which students will work on
assignments and projects for about half of each class. We will be covering a lot
of material in a short amount of time, including XHTML, CSS, JavaScript, PHP,
and MySQL in detail. We will also delve into XML, RSS, and AJAX. Most
semester-long courses cover one or two of these technologies, so this class is
necessarily fast-paced and intensive.

Every class builds off of the material from the last class and homework
assignments. So please ask questions when you don’t understand something,
and follow the examples diligently, or you will find yourself falling behind
quickly.

Required Texts:


We will rely primarily on online resources for all of the class readings. I
strongly recommend getting used to using online reference materials.

However, for those students who wish to have a book as a reference, past
students have found the books by Peachpit press to be well written:

Elizabeth Castro, HTML, XHTML, and CSS, Sixth Edition: Visual QuickStart
Guide, 6th Edition, Peachpit Press, 2006.
http://www.peachpit.com/store/product.aspx?isbn=0321430840
2

Jason Cranford Teague, CSS, DHTML, and Ajax, Fourth Edition: Visual
QuickStart Guide, 4th Edition, Peachpit Press, 2006.

Larry Ullman, PHP for the Web: Visual QuickStart Guide, 3rd Edition, Peachpit
Press, 2008. http://www.peachpit.com/store/product.aspx?isbn=0321442490

Course Site(s) and Requirements
We will be using a standard commercial web platform for this course. The site
address will be http://onepotcooking.com. At the level of logistics, the official
class blog, available at http://wd.onepotcooking.com will function as a
replacement for Blackboard—assignments and readings will be posted,
discussions will be held, etc.

Students will maintain their own class blogs using Google's http://blogger.com
service. The use of a blog aggregator, such as Google Reader,
http://google.com/reader, will allow all students to monitor all discussions on
each other's blogs through a single interface. Aggregators are a common tool
used by the web “digerati” today.

Grading and Other Policies
Course grades are based evenly on three requirements:

    •   Quizzes: 33%

    •   Assignments: 33%

    •   Final Projects: 33%

Participation: All students are highly encouraged to ask questions, share
code, and otherwise be active in collaboratively finding answers to questions.

Final Project Due Date: Dec 19

Files on the server or on the laptops in the classroom may become corrupt or
be overwritten at any time. Therefore, all students are responsible for saving a
hard copy or a backup in some other digital form of all work done in class.

Other Policies

Blogs: All assignments and course documents will be available on the
instructor's blog

Homework: All completed assignments must published online, and must be linked
to from each student's personal blog.

Syllabus: This syllabus is tentative and subject to change at the discretion of
the instructor.
3

CLASS 1
Overview of web technologies (presentation)
Setting up the development environment

    Setup Blogger accounts (http://blogger.com)
    Setup blog aggregation with Google Reader (http://google.com/reader)
    Install Notepad++ text editor (http://notepad-plus.sourceforge.net/)
    Install WinSCP for file transfer (http://winscp.net/)
    Install Firefox web browser (http://www.mozilla.com/en-US/firefox/)
    Install useful Firefox add-ons:
     •   Web Developer Toolbar (https://addons.mozilla.org/en-
         US/firefox/addon/60)
     •   Fireshot (https://addons.mozilla.org/en-US/firefox/addon/5648)
     •   Firebug (http://getfirebug.com/)
    Install TortoiseSVN for source control (http://tortoisesvn.tigris.org/)
    Create personal folders on the class server
Elements of navigation and general information architecture concepts



CLASS 2
Introduction to XHTML

XHTML element syntax

    Selected tag list: a, body, br, div & span, form elements (form, input, option,
    select, label, textarea), h1-h6, head, html, iframe, img, link, embedded media
    elements (object, embed, param), list elements (ol, ul, li), text structuring
    elements (p, pre, strong), script, style, table elements (table, tr, td, th), title

Relevant reading:

    W3Schools HTML tutorial: http://w3schools.com/html/default.asp

    W3Schools XHTML tutorial: http://w3schools.com/xhtml/default.asp

    W3Schools Complete XHTML element reference
    (http://www.w3schools.com/tags/default.asp)
4

CLASS 3
Introduction to CSS
    Where to put CSS code

    Using CSS selectors: changing the styles of XHTML elements

    Creating page layout with float & clear

    CSS positioning: static, relative, and absolute

    Tips for working with design comps

    Workaround for Internet Explorer bugs

Relevant reading:

    W3Schools CSS tutorial (http://w3schools.com/css/default.asp)

    W3Schools CSS examples (http://w3schools.com/css/css_examples.asp)

    Conditional Comments (http://www.quirksmode.org/css/condcom.html)



CLASS 4
Advanced CSS

    Background images, background tiling

    Background positioning and sprites

    Reverse-engineering CSS found on other sites

Introduction to Javascript
    Where to put Javascript code

    Introduction to variables and arrays

    Introduction to functions with parameters

    Conditional statements: if/else

    Loops: for, while, foreach

    Browser event model

    Creating event handlers in Javascript: click, mouseover, mouseout, load,
    submit
5

    Image swaps

    Getting and setting the value of form elements

    Changing the style of an element dynamically

    Making an element appear & disappear

Relevant reading:

    Webmonkey Javascript tutorial
    (http://www.webmonkey.com/tutorial/JavaScript_Tutorial)

    W3Schools Javascript tutorial (http://w3schools.com/js/default.asp)



CLASS 5
Advanced Javascript using JQuery

    The most common uses of Javascript

    The need for standardization

    Common frameworks: JQuery, Prototype, YUI, MooTools

    JQuery: CSS-style selectors

    JQuery: Creating event handlers: click, mouseover, mouseout, load, submit

    JQuery: Image swaps

    JQuery: Getting and setting the value of form elements

    JQuery: Changing the style of an element dynamically

    JQuery: Making an element appear & disappear

Overview of Final Project Assignment

Relevant reading:

    How JQuery works: (http://docs.jquery.com/How_jQuery_Works)

    Core JQuery features: (http://docs.jquery.com/Core/jQuery)

    JQuery CSS-style selectors (http://docs.jquery.com/Selectors)

    Using JQuery to modify CSS styles (http://docs.jquery.com/CSS)
6

    Using JQuery to handle events (http://docs.jquery.com/Events)



CLASS 6
Intro to PHP

    Where to put PHP code

    Variables and arrays

    Functions with parameters

    Conditionals: if/else

    Loops: while, for, foreach

    Associative arrays, multidimensional arrays

    String manipulation

    Outputting to browser: echo, print, heredoc

    Including one file within another

    Redirecting the browser to another page

    Building page templates

Relevant reading:

    Tizag PHP Tutorials (http://www.tizag.com/phpT/)



CLASS 7
Persistent Data in PHP

    Overview of data persistence and the $_REQUEST variable

    Using forms to pass data: GET and POST requests

    Using links to pass data: the query string

    Using cookies to pass data

    Using databases and text files to store data

    Combinations of all methods
7

Advanced PHP topics:

    Sending email

    Reading/Writing to files

    Uploading files

Relevant reading:

    Tizag PHP Tutorials (http://www.tizag.com/phpT/)



CLASS 8
Introduction to MySQL

    Introduction to relational databases: the server, databases, tables, rows, and
    fields

    Setting up tables in MySQL using phpMyAdmin

    SQL syntax for common tasks: create, read, update, delete

    Making database queries in PHP

    Primary and foreign keys

Relevant reading:

    Tizag MySQL Tutorials (http://www.tizag.com/mysqlTutorial/)



CLASS 9
Introduction to AJAX

    The AJAX concept: asynchronous requests

    JQuery: making AJAX requests

    JQuery: submitting form data via AJAX

    Using PHP to respond appropriately to AJAX requests

Introduction to XML

    Overview of the purpose and use of XML

    Using PHP to output XML instead of XHTML
8

    Parsing XML documents

    Adding/Removing Elements from XML documents



CLASS 10

The MVC Architecture

    Overview of Model, View, Controller architecture

    Using PHP to create an MVC site

Introduction to RSS & OPML

    Overview of the purpose and use of RSS and OPML

    Using PHP to output RSS instead of XHTML

    Parsing RSS documents using SimplePie

    Using MVC to display RSS or XHTML depending on context

Work on final projects



CLASS 11

PHP Sessions

    Overview of Session functionality

    Using Sessions to track users

Embedding media files on the web

    Using the object, embed, and parameter XHTML tags

Basic search

Using SQL's LIKE clause to do search

Work on final projects



CLASS 12

E-Commerce
9

    Overview of the elements of an online store

    Overview of payment processing options

Source Control Using SVN

    Architecture of Subversion client/server relationship

    Examples of practical SVN: repository, update, and commit

Facebook Applications

    Brief introduction to FBML

    Using PHP, MySQL, FBML, and XHTML to build compelling apps

Work on final projects



CLASS 13

Final Project presentations