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;
}

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.

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

wireframe for class 2 in-class assignment

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.

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

Web Technologies Presentation

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

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.

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:

W3Schools.com HTML tutorial

W3Schools.com XHTML tutorial

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:

Basic computer usage concepts

Typical web development cycle

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.

Job specialization

In 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, developer, quality assurance tester.  However, at some companies, a single person can handle several of these roles.  And, of course, some people perform all of these roles single-handedly.

The typical phases of the web 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