Web Development Intensive

If you are interested in receiving the Certificate in Web Development from NYU SCPS, you need to fill out this form and submit it to the administration ASAP:

certificate-application-form

Here is a presentation which outlines the high level features of the technologies web developers often deal with.

Web Technologies Presentation

//WEB BROWSER

Firefox
http://www.mozilla.com/en-US/firefox/

//FILE TRANSFER PROGRAMS

WinSCP (for PC)
http://winscp.net

Cyberduck (for Mac)
http://cyberduck.ch/

Filezilla (alternative for Mac and PC)

http://filezilla-project.org/

//TEXT EDITORS

Notepad++ (for PC)
http://notepad-plus.sourceforge.net

Smultron (for Mac)
http://smultron.sourceforge.net/

TextWrangler (alternative for Mac)
http://www.barebones.com/products/textwrangler/

// DIAGRAMMING SOFTWARE

Microsoft Visio (for PC)
http://www.webpencil.com/bannersizes.php

OmniGraffle (for Mac)
http://www.omnigroup.com/applications/OmniGraffle/

Microsoft PowerPoint (PC and Mac, poor man’s diagramming tool)
http://office.microsoft.com/en-us/powerpoint/default.aspx

Mockingbird (web-based wireframing tool)

http://gomockingbird.com/

//USEFUL WEBSITES

Guide to Standard Ad Sizes
http://www.webpencil.com/bannersizes.php

Mailinator – disposable email addresses
http://mailinator.com/

BugMeNot – shared usernames/passwords for many sites that require login
http://bugmenot.com
Blogger – blog platform
http://www.blogger.com

Google Reader – blog aggregator
http://google.com/reader

W3Schools – XHTML/CSS code reference
http://w3schools.com/

PHP.net – PHP reference
http://php.net

Tizag.com – PHP tutorials
http://www.tizag.com/phpT/

Lorem Ipsum Dummy Text Generator
http://lipsum.com

//USEFUL FIREFOX ADD-ONS

All Firefox Add-ons
https://addons.mozilla.org/en-US/firefox/

Web Developer Toolbar Add-on
https://addons.mozilla.org/en-US/firefox/search?q=web+developer&cat=all

Firebug Add-on
https://addons.mozilla.org/en-US/firefox/search?q=Firebug&cat=all

MeasureIt Add-on
https://addons.mozilla.org/en-US/firefox/addon/539/

Clear Cache Button Add-on
https://addons.mozilla.org/en-US/firefox/search?q=clear+cache&cat=all

Fireshot Add-on (for PC)
https://addons.mozilla.org/en-US/firefox/addon/5648

ScreenGrab Add-on (for Mac)
https://addons.mozilla.org/en-US/firefox/addon/1146

FlashGot Add-on
https://addons.mozilla.org/en-US/firefox/addon/220

Colorzilla Add-on

https://addons.mozilla.org/en-US/firefox/addon/271

//VERSION CONTROL SOFTWARE

TortoiseSVN (for PC)
http://tortoisesvn.tigris.org/

SvnX (for Mac)
http://www.apple.com/downloads/macosx/development_tools/svnx.html

We will be using Google Reader to read everyone’s blogs through a single unified interface.  Google Reader is what is known as a blog aggregator: it pulls content from lots of blogs into one place.  (In case you’re interested, the technology that makes such a thing possible is RSS, which we will cover towards the end of the course.)

You are going to import a file that contains a list of the class blogs into your Google Reader account.  To get started, follow these steps:

1. Download this file: Google Reader Subscriptions OPML File – this is a list of all of the blogs for everyone in the class.  Remember where you save this file.
2. Go to http://google.com/reader and log in – you will be able to use the same account you used to set up your Blogger blog during class.
3. Once logged in to Google Reader, click the little “Manage subscriptions” link at the bottom left of the page.
4. On the Settings page that comes up, click the “Import/Export” tab.
5. Where it says “Select an OPML file:” browse for the file you downloaded in Step 1.  Then click “Upload” to finish the import.

And Bob’s your uncle.  Now when you go to the Google Reader home page, you should see all the blog posts from everyone in the class in one big list.  If your blog is not listed there, please email the address to me.

This is a class in web development.  For most people, web development is the singular phenomenon of creating websites.  However, those in the business of doing such things generally break the development cycle down into several phases.  Often, each phase is handled by a professional who is specialized in a specific task, and who is not involved in the other phases.

Job specialization

In ad agencies, interactive design firms, and other corporations with available resources, there are a variety of people involved in a typical web development project.  At a minimum, these are: the client, project manager, information architect, graphic designer, front-end developer, back-end developer, quality assurance tester.  In large operations, there may be multiple people in each role.  However, at smaller companies, a single person may handle several of these roles.  And, of course, some talented people perform all of these roles single-handedly.

The typical phases of the web development cycle

Regardless of whether you are a one-person team, or a dozen, it’s often helpful to explicitly think of your web projects in terms of a multi-step development cycle.

Here is an outline of a typical web development cycle broken down into 6 phases:

Concept

• come up with an idea for a web site
• often based on a business or personal need

Requirements

• decide what features, functionality, and other components are necessary on your site
• often, in a corporate setting, these requirements are gathered by talking with clients, managers, and any other core stakeholders.
• this phase should result in a written Requirements document that lists all the necessary features of the project
• it’s very important to be thorough in this step, so that everyone involved in the project has a clearly documented idea of what it is, as well as what it is not… this helps avoid problems and disagreements later on
• however, it is the step that is most often skipped by inexperienced managers and developers

Information Architecture

• group and prioritize information that will be displayed on the site
• decide what the most important information on the site is, and what is least important
• sketch and diagram outlines of what each page will look like, and where each bit of information will go
• professional Information Architects typically use Visio or Omnigraffle to create these diagram, however napkin sketches are just as good
• determine which page will link to which other page, and how the user will get to the information they are looking for
• this phase typically results in the production of information architecture “wireframes” and a “site map“
• click here to see an example of a wireframe

Graphic Design

• convert the information architecture wireframes into “design comps” for each page
• design comps are carefully designed images which show the visual look of each page on the completed site
• typically, designers use Adobe Photoshop to produce these images
• the designer delivers a set of finished “design comps” that ultimately show exactly what the site will look like
• click here to see an example of a design comp

Development

• convert the graphic design comps into actual functioning code
• this phase is the focus of this class
• web developers typically use a mixture of client-side and server-side technologies to produce web sites
• at the end of this phase, you should have a fully functioning site ready for testing

Quality Assurance Testing

• test the site to make sure it works
• fix any problems
• repeat until the site is perfect

If you work on a Mac at home or work, here are some Mac-specific software products that you may find useful for web development.

File transfer

Cyberduck

Filezilla

Text editors

Smultron

TextWrangler

TextMate

Wireframing

OmniGraffle

Making screenshots of websites

ScreenGrab Firefox Add-on

Version control

SvnX

This course assumes no previous knowledge of programming, and only minimal understanding of computers.  This is invariably a source of difficulty, since the course must accommodate everyone, including those with prior programming experience, as well as those students who have very little understanding of what a file is where it goes once it is “saved”.

We have virtually no time in class to go over basic computer usage and terminology, so here is a quick outline of the concepts which you must first familiarize yourself with immediately in order to be ready to learn web development.

Files

All the computers we are likely to deal with store data in files.  The word “file” is used because, conceptually, computer files are meant to be like files in a filing cabinet.  They are documents with something written inside of them.  It just so happens that they are stored virtually in the computer’s hard drive, rather than physically in a filing cabinet.

Folders

Again, we are intentionally using a filing cabinet metaphor when we speak of folders.  Folders (often called “directories”), just like in filing cabinets, are containers in which you put your files.  Since you can often have hundreds or thousands of files, keeping your files nicely organized inside of clearly labeled folders is an important aspect of working effectively as a developer.  Unlike in a legal office, developers do not usually have secretaries to do the filing for them.  For this reason, you must learn to organize your files into folders yourself in such a way that you can easily keep track of them.

Types of files

Different sorts of data are represented in different ways by a computer.  For our purposes, there are two fundamental kinds of files: text files and binary files.

Text files are exactly what they sound like, a bunch of text.  This text can be broken up onto several lines, or it can be all on one line.  The important thing is that the only things contained inside of the files are text and line-breaks.

Text files are the simplest kind of file.  We will be creating text files to store all of the source code we will write in this class.

Binary files are used to store more complicated types of data.  The term “binary” just refers to the fact that all data is fundamentally represented as a series of 1′s and 0′s.  In this class, we will not interested ourselves in exactly how binary data is represented and stored, so long as we understand that binary files contain more than just plain text.

Image files will be stored in a binary format since most images cannot be adequately represented as lines of text.  Image file formats usually contain a lot of more complex information, including the exact color of every pixel in the image, and the relative differences between one pixel and another.

Creating and editing files

Files for web development are usually created and edited on your personal computer.  Text files, including the source code you will write, are created and edited using a simple text editor, a program that deals exclusively with text files.

The software used to create or edit binary files depends on the sub-type of binary file:  we typically use software such as Adobe Photoshop when dealing with image files, which are the most common sort of binary file for a web developer to deal with.

File extensions

A file extension is simply a suffix attached to the name of a file.  For example, an image file named “monkey” may have an extension named “.jpg”.  So the complete file name, as far as the operating system is concerned, would be”monkey.jpg”. Some operating systems will hide the extension from you, so all you see is the name “monkey”.  But rest assured… the file extension is there.  UNIX, Windows, and Mac each use extensions.

The extension typically indicates the type of the file.  So image files typically have “.jpg”, “.gif”, or “.png” extensions, which indicate the sort of binary image format which was used to create the image file.  Text files written in HTML code typically have a “.html” or “.htm” file extension, and text files written in Java usually have a “.java” extension appended to their file name.

Operating systems

Operating systems define the ways in which you, the human, access the resources available on a computer.  Personal computers generally have one of three flavors of operating system: Mac OS X, Windows, or a variety of UNIX.  Each provides more or less the same functionality for our purposes, but do so in slightly different ways.

As web developers, you will have to deal, at some point, with each of these types of operating systems.  Most web servers, which are the computers where you store your websites, such as the computer which stores this site, run a variety of UNIX.  Most people who use the internet do so on personal computers running Microsoft Windows.  Apple Macs, which are generally more expensive than Windows PC’s, use the operating system OS X, and are used by a small but significant minority or internet users, including a large proportion of design professionals.

The computer you are using right now to view this document is, no doubt, a personal computer running Windows or OS X.

File transfer

As a web developer, you will need to create files that contain all of the data you want to show on your website.  This will typically include source code written in a variety of languages, and images.  You may also have video files, animations, PDF files, and a variety of other more specialized types of files.

Only you have access to edit and view these files on your personal computer.  Nobody else can view or access the files you have stored on your personal computer.  In order to publish a website then , you typically want your files to be accessible to anybody and everybody on the Internet.  This means moving copying the files you have created for your website from your personal computer to a computer that allows anybody to view its files.  Such a publicly accessible computer is known as a web server.

To publish your site on the web, you will copy these files from the computer where you created them (your personal Windows PC or Mac) to the web server where they will permanently live (our course will use a UNIX web server for this purpose.)   This copying process between two computers is known as file transfer.  There are software programs that we will use solely to handle this transferring process.

Clients and servers

Your personal computer, the one you use to browse the web, is often called a “client“.   This term is used to differentiate your personal computer from the web “servers” that permanently store the web pages you visit.  The software products you use to view web pages, such as Firefox, Safari, or Internet Explorer, are also sometimes referred to as clients.  Thus the term client can either refer to the computer you use to view the web, or the particular software product you use to do so, depending on the context of the conversation.   The point being that the client is the “thing” you use to access the web.

This website, like all other websites, consists of a bunch of files stored on a web server.  Servers are computers dedicated to hosting and serving web pages when they are requested by clients.  Thus the internet, at a high level, is composed of two types of computers: clients and servers.

In sum: servers “serve” web pages to clients.  Clients request a particular web page from the server, and the server responds with the contents of that page.

There are some computers, such as those involved in P2P file sharing, which act simultaneously as both client and server, but that is a topic beyond the scope of this course.  For most purposes, a computer will either act as a client, or as a server.

Browsing files

On your personal computers, you will often have to find the files you downloaded, created, or copied so that you can use them or edit them.  Finding files (and losing them) is a big problem for the typical person, even those who use computers every day.  But if you have organized your files into clearly labeled folders, and understand the structure of the computer’s file system, managing files will be a simple job.

Finding files is basically the same, whether you are using Windows or Mac OS X.  Windows Explorer is the tool you use on a Windows PC.  Mac Finder is the tool you use on a Mac OS X computer.

Files are stored on a computer hierarchically.  What this means is that files on the computer are organized in folders, and these folders can be put into other folders.  Mac Finder illustrates this nicely:

Mac Finder shows the hierarchy of folders

In this screenshot of Mac Finder, you can see that The “Macintosh HD” hard drive contains several sub-folders, including one called “Users”.  The “Users” folder contains several sub-folders of its own, including one called “amos”.  The folder, “amos”, contains another folder called “Music”, and so on.  Files can be stored within any folder, even if that folder also contains other sub-folders as well.

Windows Explorer looks very similar.  Instead of “Macintosh HD”, the hard drive on Windows is named “C:”, and all folders and files are nested inside this hard drive just as in the Mac.  Although it is less intuitive, the concept behind Windows Explorer is the same as with Mac Finder:  it allows you to navigate through folders within folders within folders…

Web browsers

A web browser is a piece of software that runs on the client.  It allows the user of the client machine (i.e. you) to browse files (i.e. web pages) that are stored on web servers connected to the Internet.  In this class, we will use primarily Firefox as our web browser, since it offers several features that make it especially useful to web developers.

Other popular web browsers include Microsoft Internet Explorer, Apple’s Safari, Opera, and Google Chrome.

The internet vs. the web

The internet and the web are two separate but related things.

The “internet” refers to the global network of interconnected computers.  It is the infrastructure that allows computers around the globe to communicate with each other.

The “web” refers to the vast number of interlinking hypertext documents that exist on the internet.  Thus the web generally refers to only those parts of the internet that are accessible via the HTTP protocol.

The web is just one usage of the internet, and HTTP is just one of many protocols supported by the internet.  Other technologies that rely upon the internet but are not directly related to the web include email (IMAP and POP protocols), file transfer (FTP and SSH protocols), VoIP, streaming media such as webcams and internet radio, and P2P file sharing (RTP protocol and other proprietary protocols), among others.

Click to download the Summer 2010 Web Development Intensive Syllabus.

All development work in this class will follow the same general work flow procedure.

1. Edit a file(s).
2. Upload that file to the web server
3. View the file in the web browser

Edit a file

To edit a file, we will always use Notepad++.

1. Open the file in Notepad++
   • If editing an existing file, click the “File” menu, and select “Open”.  Then find the file you would like to open in Notepad++ and click the “Open” button.
   • If creating a new file, click the “File” menu, and select “New”.  This creates a blank document.
2. When you are finished making changes to the file…
   • If editing an existing file, simply click File->Save to overwrite the existing file.
   • If editing a new file, click File->Save As.  This allows you to navigate to the folder where you want to save the file, and then enter the filename you want to give it.  Click the “Save” button when done.

Upload that file to the web server

To upload a file, we will always use WinSCP.

1. Connect to the server by entering in the correct hostname, username, and password in the initial WinSCP connection screen.  These credentials should have been given in class.
2. WinSCP will now show you a screen with two panes: on the left are the files on your client computer, on the right are the files on the web server computer.
3. Navigate on the files on client side (left side) so that you are “in” the folder where you have saved the file you want to upload to the server.
4. Navigate on the server side so that you are “in” the folder where you want to upload the file on the server.
5. Drag the file from the client-side (left pane) and drop it on the white-space on the server side (right-pane).
6. If WinSCP asks for confirmation, give confirmation.

View the file in the web browser

To view the changes to a web page, we will always use Firefox.

1. At the top of the server-side pane (right pane) in WinSCP, you will find the path where the file is stored on the server. For example, the fiel may be stored in a folder called /home/scps/onepotcooking.com/georgewashington/class10/test/.
2. In the address bar in Firefox, type “http://” followed by everything after and including the onepotcooking.com/ folder from that path you see in WinSCP.  Continuing our example, we would type http://onepotcooking.com/georgewashington/class10/test/
3. Append to this the filename of the file you want to view.  So, if we want to view a file called “index.html”, the full address for viewing this page in Firefox would be http://onepotcooking.com/georgewashington/class10/test/index.html

Repeat all these steps as many times as necessary until your web page is perfect.

DEADLINE

• All final projects must be complete by the last day of class.

REQUIREMENTS

• projects must show your mastery of the technologies we have learned in this class: XHTML, CSS, Javascript (using JQuery), PHP, and MySQL.
• projects must be completely information architected before you start programming
• projects must involve at least 3 distinct web pages.
• you are required to present your site to the class on the last day of class
• all filenames must be all lowercase with no spaces or special characters except underscore “_”
• all variable names in PHP and Javascript must be written in lower camelCase.
• all CSS class names and IDs must be written in lowercase, with no special characters except the underscore “_” character.
• final projects must be working and accessible on the web (if it only works on your client machine, it is not a working web site)
• projects must be linked to from your blog.

GRADING

Grades will be based on your ability to exhibit mastery of Information Architecture and Web Development programming techniques.

• Information Architecture (20%)
• Programming (50%)
• Ability to conceptualize and realize a fully-functioning, well thought-out site (30%)

PRESENTATIONS

You will be required to present your work to the class on the last day of class.

Presentations should be no more than 10 minutes.

Here are some suggested questions to answer in your presentation:

You

• what’s your name?
• remind us… what do you do when not in this class?
• did you have any previous design or development experience?
• any previous experience with the web?

Concept

• three sentence description of your site
• why did you decide to build this site?
• who is your intended audience?
• does this site serve a particular need, either personal or business?

Information Architecture

• how many main pages are there, and how are they conceptually related?  In other words, what is the hierarchical structure of the site?  Perhaps show a simple sitemap diagram to help explain.
• what are the main navigation elements people can use to get from one page to another?
• is there a consistent header, footer, or navigation section on every page?
• how does a user know where they are in the hierarchy of your site?  Breadcrumbs?  Highlighted navigation links?  Or is your site so simple a user couldn’t possibly get lost?
• what kind of content are you showing on each page?
• how are the bits of information on each page related to each other (if at all)?
• what is the most important info on each page, and what is the least important info, and how did that affect the layout of the page?

Design

• what were you thinking in terms of design of your site?
• what design techniques did you use to get the pages to look as they do?
• did you borrow any design ideas from other sites?
• are you happy with the design of your site?

Development

• are you using page “templates” in PHP?
• is there anywhere where you are passing data from one page to another?
• is your data stored in a database or hard-coded into the XHTML?
• if using a database, did that make development easier, or more difficult?
• are you using Javascript, JQuery, and any JQuery plugins?
• did you use any AJAX, and if so, where?
• discuss any interesting development challenges you faced in any of these technologies.

The future

• is this site a good representation of what you originally planned?
• what remains to be completed on your site?
• what parts do you think work, and which do you think don’t work?
• do you plan to continue developing this site?
• are you hoping to actually launch it as a real website?
• are you planning to continue with web development?
• what parts of web development interested you most?
• what parts of web development interested you least?
• how has this class reinforced or changed your view of the web?