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.
Your assignment in class today is to create a set of wireframe diagrams (between 2 and 3 diagrams, no more) that show how the information on a restaurant’s website should be arranged.
Your client, the restaurant owner, and you have agreed that the site must have the following types of information:
Working off of the concepts outlined in this post about information architectural navigation elements, as well as using these samples of professional wireframes as a set of references, you should make sure that all the information on this restaurant site is easy to find and the site itself is interesting and easy to navigate.
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”
In our first class, we analyzed several websites in terms of their information architecture: how information was organized and grouped in their user interfaces. Although many of you are accustomed to the normative standards of how to navigate websites, it’s helpful to sometimes explicitly enumerate the different ways that you, as information architect (and soon to be web developer), can lead the user to explore various parts of your site.
To that effect, here are a few of the most common architectural concepts and elements at your disposal:
Hierarchical Classification - this is a general term that refers to the hierarchical categorization of information on a site. Most sites with a lot of content categorize information in this way, allowing users to navigate through the information by drilling-down into categories and subcategories until the desired content is found. With this system, any category can have only one parent category. For example, take a look at this sitemap from http://heels.com, which shows a clear hierarchy of shoe categories. “Ankle Boots” is clearly a subcategory of “Women’s Shoe Styles”, which is presumably a subcategory of “Shoes”.
Sitemap on Heels.com
Message boards and comment boards often have a hierarchical relationship between posts known as message threading. Threads are most often displayed visually using a tree structure, which clearly shows the hierarchical structure of the message board using indents to indicate the relationship of any message to its parent. For example:
example of a threaded message board
Faceted Classification – unlike in a Hierarchical Classification, a Faceted Classification allows information to be organized, and thereby navigated, along multiple dimensions. For example, on a blog, users may be able to browse posts by author, by date, or by category – these would all be different facets of the same information. As another example, it may be that users buying flowers online want to browse by a variety of classifications, such as by “Occasion”, “Color”, or “Price”. With Faceted Classification, any flower may be listed under any or all of these classifications. These categories are not related to each other in a clear hierarchy – they are all independent axes along which flowers can be browsed. Most sites that use Faceted Classification combine it with some sort of Hierarchical Classification. For example, see the Faceted Navigation links at the top of the http://teleflora.com site homepage:
Faceted navigation on Teleflora.com
Folksonomy – similar to Faceted Classification is the concept of a Folksonomy (or Tagsonomy). Tags are arbitrary keywords that users of many social networking sites attach as labels onto any piece of content. Folksonomies, in their purest state, are entirely user-generated, meaning that there is no top-down control or limit to the number or variety of tags that can be used. As a result, tags are often inconsistently applied, misspelled, redundant, and generally of little practical use for large sets of data unless there is some sort of control over the vocabulary to make it more consistent. For example, Flickr.com, a photo sharing service, allows users to tag any photo with any keyword. Users can search for all photos with a particular tag:
Tags on a photo on Flickr.com
Global Navigation – these are links that are available on all pages of a site that point to the top level categories of a hierarchical navigation structure. They are often displayed in the interface as Tabs at the top of the page, or as a series of links on the left navigation section of the page. For example, see the links at the very top of all pages on http://netflix.com
Global navigation on Netflix.com
Secondary Navigation (or Local Navigation) – these are generally links to a subcategory of a hierarchical navigation structure. They usually appear horizontally at the top, underneath the Global Navigation, as a drop-down menu that appears when a user mouses over a Global Navigation item, or vertically on the left side of the page. For example, see the second row of tabs at the top under the Global Navigation in the New York Times World section – these links are specific to the World section:
NYTimes.com World Secondary Navigation
NYU.edu‘s Home page displays the secondary navigation as a horizontal drop-down list:
Secondary Navigation as a Horizontal Drop-Down Menu on NYU.edu
The Google Reader Settings page has secondary navigation as a set of tabs. Notice also the link to return one step up back up the hierarchy, “Back to Google Reader”:
Secondary Navigation as Tabs on Google Reader Settings Page
Nth-Level Navigation – in the New York Times World section example above, you can actually see a third level of navigation as a third row of tabs underneath the second tier. Users have come to expect categories and subcategories of content, but due to the limited amount of space and navigation tools available in a web browser, sites have difficulty displaying three or more levels of classification. The Mac Finder offers an interesting solution to the problem of displaying many levels of hierarchy, although this is not common on the web:
The Mac's Solution to Displaying Multiple Levels of Hierarchy
Breadcrumbs – breadcrumbs are links that are used to show your position in a hierarchy of information, and allow users to navigate linearly back up the hierarchy. They usually appear horizontally, towards the top of a page. For example, in the following top navigation from ESPN.com, you can see a breadcrumb underneath two rows of navigation (Global and Local, in a two-tiered tab interface). The breadcrumb, which reads “ESPN > Fantasy & Games > Basketball”, indicates that we are viewing the “Basketball” page within the “Fantasy & Games” section of the “ESPN” site. Each section of the breadcrumb is a link to a different level in the hierarchy of information on the site.
Breadcrumbs on the ESPN.com Sports site
Another example combining all of the aforementioned navigation elements in one interface is the NYU SCPS site. For example, on the “Academic Programs” page, you can see Global Navigation, Secondary Navigation, and Breadcrumbs:
Navigation structures on the NYU SCPS site
Home Button – almost all sites have a button on all pages that takes the user directly to the Home page, no matter where they are currently in the hierarchy of content on the site. Very often, the Site Logo, which is almost always found at the top left of the page, also doubles as a link to the Home page.
Search -you may not immediately think of Search as being a navigation element, but it most certainly is. Search functionality allows users to jump directly to content that may be buried deeply in the information hierarchy of a site. Search is most commonly positioned as a text input box somewhere on the top of the page, as in the Amazon.com example below, although it does appear sometimes in the left navigation area, as is the case on Wikipedia.
Amazon.com search box
Wikipedia.com search box
Advanced Search – sites offering advanced search sometimes use it as a tool for browsing through a Faceted Classification system. Using Facets is a relatively obvious way for users to narrow search results. For example, the Phillips Academy Andover E-Store allows users to select both a Category and a Manufacturer as dimensions for their search, in addition to keyword matching and other text-based search. The site will return only those results that match both the Category Manufacturer Facets:
Advanced search with facets
URLs – yes, you can think of the URL of your pages as being navigation elements. Short, cleanly formatted URLs are easy to remember, and often show clearly how the content on the current page fits into the hierarchy of the content of a site, making it easy for users to understand where they are on your site. For example, compare the following URLs:
An example of a URL that is totally useless in navigation
An example of a URL with obvious hierarchical structure
An example of a URL that is mostly useless
Text Hyperlinks – navigation using text hyperlinks allow for arbitrary navigation from one part of your site to another. While it’s a good practice to use Global Navigation, Secondary Navigation, URL formatting, and the various other elements we’ve mentioned, sometimes the type of navigation an information architect needs to achieve doesn’t fit into any of these other navigational categories. For example, Wikipedia’s entry on Hyperlinks uses hyperlinks in the text to allow users to navigate to related topics:
Arbitrary hyperlinks in Wikipedia's page about hyperlinks
Contetual Navigation – contextual navigation includes simple text hyperlinks, but it may also manifest itself more obviously as links from one piece of content to other “Related items”, “Recommended items”, “Most Popular items in <category name>” or “See also” links. Sometimes these links point to siblings in the information hierarchy, meaning pieces of content at the same hierarchical level as the current content. For example, a news site’s article about Finance may point to another news article about Finance. In this example, an article on NYTimes.com about Facebook has on the same page several different contextual navigation sections to sibling articles in the Technology classification:
A "Most Popular" contextual navigation section with sibling articles
A "Related Articles" contextual navigation section with sibling articles
A "See More" contextual navigation link to view more sibling articles
But often, the nature of the relationships is more editorially-controlled, or controlled by complex algorithms, and less determined so easily by simple hierarchical relationships. For these cases, the Contextual Navigation offers a chance to lead the user to more remote pieces of content on the site or to other categories besides the one they are currently viewing. For example, see Amazon.com’s personalized recommendations, which depend mostly upon user purchasing behavior, point to books of a variety of topics:
Amazon.com personalized recommendations
Sitemap – when a site has a large hierarchical navigational structure, a Sitemap can often display visually how pages on the site are grouped, and where the various content is located within a site. Sitemaps usually link to the pages displayed, as in Apple.com’s Sitemap:
Apple.com sitemap
Site Indexes – similar to Sitemaps and Search, Site Indexes provide yet another way for users to jump directly to content that may otherwise be buried deep in the hierarchy of the site. They offer an alphabetical list of links to the content available on the site. While Sitemaps work well with hierarchical data, Site Indexes are usually more useful than Sitemaps for sites that do not have a clear hierarchical classification structure, as exemplified by the UN.org Site Index:
UN.org site index
Loading a web page involves multiple requests for various files from the server
When a user loads a web page in a web browser, a sequence of HTTP requests are made to the server for the various files necessary to display the web page properly in the browser.
For example, let’s say a user loads this site, http://wd.onepotcooking.com/. Here is a set of steps that may be triggered as a result of a simple action such as this:
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.
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.
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.
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.
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.
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 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.
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.
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.
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…
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 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.
All development work in this class will follow the same general work flow procedure.
To edit a file, we will always use Notepad++.
To upload a file, we will always use WinSCP.
To view the changes to a web page, we will always use Firefox.
Repeat all these steps as many times as necessary until your web page is perfect.
Your assignment today is to convert a set of Requirements for a Musician’s Web Site into wireframe diagrams that indicate what information will be displayed on each page of the site, and how it will be organized.
Here are the requirements we came up with for the Musician’s Site. These outline the content that the client wants to see on the site. How you organize and represent these pieces of content is up to you. Please convert these into wireframe diagrams using PowerPoint.
You will have to group and organize these requirements however you see fit, based on the concepts we have discussed today of information architecture and navigation. This post gives a broad guide of the navigation elements you may want to consider when tackling this assignment.
Click here to see a similar assignment I gave to the summer class I taught. And here are a set of wireframe diagrams I created that show one possible solution to the assignment. Each diagram is meant to show how the information and requirements for the site would be translated and broken down into actual content on a set of web pages.
Efficient file management is a prerequisite for any successful development work. Over time, you will become acclimated with how files are stored on a Unix server, Windows PC, or a Mac. In the meantime, here is a set of conventions that may help you effectively manage files during the duration of this course. By following a few simple rules, we can make sure that file management does not prevent you from learning to be a great developer.
Create a folder that will always function as your workspace. Store all other files and folders you create inside of this workspace folder. This way, you will always know where your files live, and how to find them.
For example, I may create a subfolder in the Documents folder (a.k.a. My Documents on a PC) and call it “webdev”. This will function as my workspace folder for all the web development work I do. Whenever I want to find some files I worked on, I know that I have to look inside of the webdev folder inside of the Documents folder.
To create a new folder, navigate with Windows Explorer (or Finder on Mac) to the location where you want to create the folder.
In this example, I will navigate to the Documents folder, where I want to create my workspace folder.
Navigate to your Documents folder in Windows Explorer or Mac Finder
Once you are in the location where you want to create your workspace, click the File menu, and select New -> Folder. Enter the workspace folder name, and click the Enter button to create that folder.
Then double click on the new folder name to go into that folder.
Create the workspace folder
Navigate into the new workspace folder
For each project, assignment, or other task, create a new subfolder within your workspace folder.
For example, when beginning a project called “project1″, from within your workspace folder, click File -> New -> Folder, and create a folder called “project1″. Then double-click that folder to go inside it.
Create a project folder inside the workspace folder
A typical project will have XHTML files, Javascript files, CSS files. It is important to be organized about where you store each type of file. As a general rule, within each project folder, you should:
So for a project called “project1″, for example, you would set up subfolders that look like this:
A typical project folder setup
And we will eventually put XHTML files in the main project folder. So a typical setup after we create our first XHTML file will eventually look like this:
Typical project folder with XHTML file
Notice that the main XHTML file, called “index.html”, is in the root project folder. And there are subfolders for each other type of file.
To avoid complication, you should use the exact same folder structure on the server as what you created on your client computers.
When you use a file transfer program, like WinSCP (or Cyberduck on Mac), you will be able to view the files on the client side-by-side with the files on the server. The structure of your project folder should look the same on each.
Note that WinSCP on PC will show you files on both the client and server in two different panes. With Cyberduck on Mac, you will have to have the Finder open to view files on the client, and use Cyberduck to view files on the server.
Viewing client and server files side-by-side in Cyberduck and Finder on Mac
When you’re ready to test your files to see what they look like in the web browser, you have to know the location of your files on the web. When using WinSCP, you can infer the location of the files on the web from the location of the files on the server’s hard drive.
In WinSCP, at the top of the right pane (the server pane), you will see the location of your files on the server’s hard drive. The location of these files on the web is included in this path.
The URL of your files on the server
This is the location you should enter into Firefox’s address bar.
The URL to enter into the Firefox address bar
Note: Not all servers are set up exactly like this, but you can usually infer the location of your files on the web from the location of your files on the hard drive in a similar way.
Here is a document that uses all of the most common XHTML elements. You can see the end result of this code by clicking this link.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Class 1 - HTML FRAME</title> </head> <body> <!-- this is a comment it won't show up when you view this file in the web browser --> <!-- headings --> <h1>Class 1 - HTML Frame</h1> <h2>Less Important heading</h2> <h3>Even less important</h3> <!-- paragraphs and text --> <p>This is a paragraph</p> <p> This is a paragraph <br /> with line breaks <br /> ... two of them </p> <p> This is a paragraph with a <a href="http://nyu.edu">link</a> </p> <p> This is a paragraph with a <strong>very important</strong> part </p> <!-- preformatted text that maintains spaces and line breaks --> <pre> NYU School of Continuing and Professional Studies 48 Cooper Sq. New York, NY 10003 </pre> <!-- images --> <img src="donkey.jpg" title="donkey" alt="image of donkey" /> <!-- ordered list --> <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ol> <!-- unordered list --> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> <!-- a table with 3 rows and 2 columns --> <table> <tr> <th>heading 1</th> <th>heading 2</th> </tr> <tr> <td>data for row 1 column 1</td> <td>data for row 1 column 2</td> </tr> <tr> <td>data for row 2 column 1</td> <td>data for row 2 column 2</td> </tr> </table> <!-- form controls --> <form> <!-- single-line text input --> <label for="t1">username</label> <input type="text" id="t1" name="t1" /> <br /> <!-- password input --> <label for="t2">password</label> <input type="password" id="t2" name="t2" /> <br /> <!-- drop-down list --> <select> <option>---select an option---</option> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select> <br /> <!-- radio buttons that are mutually exclusive --> <!-- note that the name field of each input tag is the same --> <p>Radio buttons with the same name will be mutually exclusive</p> <input type="radio" id="r1" name="r1"> <label for="r1">radio 1</label> <input type="radio" id="r2" name="r1"> <label for="r2">radio 2</label> <br /> <!-- radio buttons that are NOT mutually exclusive --> <!-- note that the name field of each input tags is NOT the same --> <p>Radio buttons with the different names will not be mutually exclusive</p> <input type="radio" id="r3" name="r3"> <label for="r3">radio 3</label> <input type="radio" id="r4" name="r4"> <label for="r4">radio 4</label> <br /> <!-- multi-line text input --> <textarea>this is some text in a multiline textarea</textarea> <br /> <!-- checkboxes --> <input type="checkbox" id="c1" name="c1" /> <label for="c1">checkbox 1</label> <br /> <input type="checkbox" id="c2" name="c2" /> <label for="c2">checkbox 2</label> <br /> <!-- submit button, submits the form data --> <input type="submit" value="Submit form!" /> <br /> <!-- reset button, resets the form to its original state --> <input type="reset" value="Reset form" /> <br /> <!-- generic button --> <input type="button" value="Do nothing" /> </form> <br /> <br /> <!-- an iframe puts one page within another page --> <iframe src="http://nyu.edu"></iframe> </body> </html>
Home page
Location page
Photo detail popup
Diary page
Contact page
About page
Loading ...