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:
Class 4 – Submit Button Style For In-Class Assignment #1
March 8th, 2010 § 0
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:
<input type="submit" class="blackbooksubmit" value="Submit">
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!
March 3rd, 2010 § 0
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)
February 21st, 2010 § 0
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
February 20th, 2010 § 0
Your assignment is to convert this wireframe diagram into valid XHTML code:
wireframe for class 2 in-class assignment
As always, start with the bare minimum elements necessary to make an XHTML page, and move forward based on the XHTML common elements example code.
Hint: you will want to use the align attribute of the <img> tag in order to have the image sit next to the paragraph of text. You should look up the <img> tag reference page on the w3schools.com site for more information.
Class 3 – Default CSS style sheets for the major web browsers
February 20th, 2010 § 0
Firefox
There are two default CSS style sheets 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
Safari and Chrome
Apple’s Safari and Google’s Chrome browsers are built using an open-source layout engine known as Webkit.
Here is a link to the official WebKit source code for the default CSS style sheets of Safari and Chrome.
Internet Explorer
At this point in you will not be surprised to know that Microsoft Internet Explorer does not provide you access to it’s default CSS style sheet files.
Overriding the browsers’ default CSS style sheets
You’ll see in Firefox’s default CSS files that, by default, Firefox attaches an 8px margin on the <body> tag
body {
display: block;
margin: 8px;
}
If you don’t want an 8px margin on the <body>, then you can override that CSS setting by creating your own CSS for the <body> tag, for example:
body {
margin: 0px;
}
The same principle applies to the other major browsers.
The unofficial chart of all browser default style sheets
Here is a nice chart showing the browsers’ default CSS rules
Class 1 – Web Technologies Presentation
February 15th, 2010 § 0
Here is a presentation which outlines the high level features of the technologies web developers often deal with.
Class 1 – Required software and useful websites for web development
February 15th, 2010 § 0
//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)
//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)
//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
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
February 13th, 2010 § 0
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.
- 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.
Class 1 – Homework
February 13th, 2010 § 0
Your homework for this week is to complete the wireframe diagram assignment we began in class.
Next week, we will begin to convert these diagrams into real web pages written in XHTML, so it is important that you complete your diagrams to your satisfaction, and then go through the following XHTML tutorials prior to next class:
And please familiarize yourself with the class syllabus.
You should also read at least once through the following information, which we will cover many times over. It is critical in the understanding of the web and web development:
Typical workflow for web development
Loading a web page sends multiple requests to the server
If you are a Mac user, you will want to take a look at the recommended equivalent software for Mac development.