Web Development Intensive

Class 4 – Quiz Results

amos — Sun, 14 Mar 2010 21:33:43 +0000

These charts show the breakdown of grades for the quiz.� Here’s a quick chart to convert your scores to percentages:

Percentage	Score out of 20
25%	5
30%	6
35%	7
40%	8
45%	9
50%	10
55%	11
60%	12
65%	13
70%	14
75%	15
80%	16
85%	17
90%	18
95%	19
100%	20

Class 5 – Certificate Application Form

amos — Sat, 13 Mar 2010 19:23:23 +0000

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

Class 4 – Submit Button Style For In-Class Assignment #1

amos — Mon, 08 Mar 2010 16:27:01 +0000

The submit button in the BlackBook design comp from Class 4’s in-class assignment #1 may be a bit confusing.� Here is a tip on how to get your button to look exactly right.

The HTML code is just that for a simple submit button:

And the corresponding CSS code is:

input.blackbooksubmit {
 background-color:#A30606;
 border:0 none #FFFFFF;
 color:white;
 font-family: Arial,Helvetica,sans-serif;
 cursor:pointer;
 font-size: 11pt;
 font-weight:bold;
 padding:4px 10px 5px;
 text-align:center;
 width:69px;
}

Class 4 – Quiz Warning!

amos — Wed, 03 Mar 2010 19:55:12 +0000

We will be having a quick quiz on Saturday that reviews the basic concepts we have covered in class so far.� Anything from the readings or assignments from Class 1 to Class 3 is fair game, so make sure you are up to date.� Topics covered include (but are not limited to), basic HTML syntax and common elements covered in class, CSS syntax, CSS selectors, information architecture navigation concepts, Javascript’s relationship to Java, the relationship between client and server.

There will also be questions about file management.� Please refer to this post for guidelines on file management for class projects:
http://wd.onepotcooking.com/2009/07/15/class-1-managing-project-files

So make sure you understand how you are supposed to structure your files for projects in class, how your file and folder structures on the server that you create with WinSCP correspond to the addresses you type into the web browser, and the difference between relative and absolute paths.� This site has a decent description of absolute and relative paths that is a good recap of what we discussed in class: http://www.communitymx.com/content/article.cfm?cid=230ad

The quiz will *not* cover using CSS for layout with the float and clear properties.

Class 1 – In-class Assignment (Sunday Class)

amos — Sun, 21 Feb 2010 20:16:48 +0000

Your assignment today is to create the information architecture wireframes of a New York cultural magazine’s website.� Your imaginary client and you have agreed upon the following list of requirements for the website.

Each of these requirements does not necessarily have to be on its own page or section of the site.� You should try to organize and group these bits of information in such a way that they are intuitive.� Then start to create wireframes that show how a user would navigate from the home page to find each of these pieces of content.� Refer to these ideas about web site navigation and try to use as many of these navigation concepts as is appropriate for your site.

Refer to these professional samples of wireframe diagrams as your reference point for how detailed to make them.� Also, look around at similar websites to get ideas from how they structured their own sites.

You can also view other students’ blogs from the Saturday class to see how their wireframes look by viewing their blogs in Google Reader.� Their wireframe assignment was to create wireframes for a restaurant website.

When you have finished the assignment, please save each wireframe as an image file (either JPG, PNG, or GIF file type), and post them to your blog on blogger.com.� The title of your blog post should be �Class 1 � Assignment � Restaurant Wireframes�

New York Cultural Magazine Requirements

Content to include

Local events
local businesses (bars, restaurants, movies, hairdresers)
park listing
politics
news
weather
sports
classifieds
search
logo
editorial, opinions
ads

how do you want to organize the content: (optional)

by borough

target demographic: (optional)

young active
affluent

Class 2 – In-class Assignment

amos — Sat, 20 Feb 2010 22:02:38 +0000

Your assignment is to convert this wireframe diagram into valid XHTML code:

wireframe for class 2 in-class assignment

Hint: you will want to use the align attribute of the tag in order to have the image sit next to the paragraph of text.� You should look up the tag reference page on the w3schools.com site for more information.

Class 3 – Viewing Firefox’s Default CSS Style Sheet

amos — Sat, 20 Feb 2010 21:20:39 +0000

There are two default CSS files that firefox uses to display web pages.� Type these into the address bar of the browser to view them:

resource://gre/res/html.css
resource://gre/res/forms.css

Class 1 – Web Technologies Presentation

amos — Mon, 15 Feb 2010 23:38:11 +0000

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

Web Technologies Presentation

Class 1 – Required software and useful websites for web development

amos — Mon, 15 Feb 2010 23:34:40 +0000

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

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

Class 1 – List of All Class Blogs

amos — Sun, 14 Feb 2010 04:05:37 +0000

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:

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.
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.
Once logged in to Google Reader, click the little “Manage subscriptions” link at the bottom left of the page.
On the Settings page that comes up, click the “Import/Export” tab.
Where it says “Select an OPML file:” browse for the file you downloaded in Step 1.� Then click “Upload” to finish the import.

Import/Export" src="http://wd.onepotcooking.com/wp-content/uploads/2009/02/Picture-1-300x175.png" alt="Google Reader Settings > Import/Export" width="300" height="175" />: Google Reader Settings > Import/Export

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.