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.

Picture 1

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

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.

Class 3 – Viewing Firefox’s Default CSS Style Sheet

February 20th, 2010 § 0

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

February 15th, 2010 § 0

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

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)

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

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:

  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. Picture 1
  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.
Google Reader Settings > Import/Export
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:

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.

Class 1 – Typical web development cycle

February 13th, 2010 § 2

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

« Older Entries