All currently editable chapters are in the Working Version section. -- All finished versions are in the Finished Version section.
Please create an account and log in to start editing
Chapter 2. Metaphors for a Page
From Digital Foundations
Contents |
[edit] Download Materials For Chapter 2
Text left here for verbiage/syntax
No files are required to begin the last exercise in Chapter 1; however you can download our final Adobe Illustrator file to see how we completed it. Double-click on the ZIP archive to decompress the archived file and reveal our AI file, called, "ch1-ourfinalfile.ai".
Click here for our Chapter 1 final exercise file.
[edit] 2. Metaphors for a Page
Formal Principles: Organization and Structure
Computer software interfaces are built on metaphors. These metaphors link the digital interface to real life tools and processes.
An operating system is software that we use to operate the computer. Operating systems like Mac OS, Windows, or Linux, use graphical interfaces to enable us to create, move, and delete files, and use other software to edit the contents of those files.
Regardless of the operating system you are using, most share a few central metaphors such as document, folder, file system, and desktop. Before today’s so-called “paperless office,” office workers created documents on paper, filed them in folders, and organized the folders in cabinets near their desks. The most important or current project folders might have been sitting on their desktops. Of course the original paper system persists alongside the computerized system, as well as in the computer’s metaphorical structure.
If the operating system is like your home office, your hard drive is like a filing cabinet, with folders, and files, and even folders inside folders. Your server is like a filing cabinet that lives somewhere else, that anyone can look at, but only you can made changes to.
A web page is just a document written in HTML put in a folder on a server computer that has software that enables it to recieve requests for these documents and return them to the requesting client. The server is kind of like a librarian who takes a request from a patron, finds the book in the archive of books and presents the book to the patron.
Getting a book into a library is really hard. First you have to write it, edit it, find a publisher, who has to take the manuscript and create a print ready document, print copies, convince the library to buy it, the library has to put special binding on it for durability, insert it into the card catalog database, and put in on the shelf. If you are reading this book in a library, we had to do all of those things.
Putting a file on a server is much easier. It is more like taking a document composed of pages and putting it in a filing cabinet; this filing cabinet is your server, which is able to display this document to anyone in the world that asks to see it.
A web page is an HTML file that is stored on a web server.
A server is a computer with software installed on it that allows it to send and receive requests for web pages.
A client is a computer running software, such as a web browser, that sends requests to the server. When you click a link on the web, your computer sends a request to the server through the web browser and the server returns the requested web page.
Each web page has its own unique address, called a Universal Resource Locator, or URL. A properly formed URL has a domain name, such as www.digital-foundations.net. URLs may include folders and file names. Folders are denoted by forward slashes, and HTML files end in .html. For example, www.digital-foundations.net/folder/file.html is a URL pointing to a file named file.html stored in a folder named folder on the server that hosts the domain digital-foundations.net. Files and folders on a server are like folders on your own computer. The difference is that anyone on the Internet can view them!
One way of thinking about URLs and servers is through the metaphor of the postal mail system. An address specifies the exact location of the addressee. To do this, it takes a name, street name and number, city, state, postal code, and country. Likewise, a URL is the exact location of the file you are requesting. The domain name is like the city, state, zip and sometimes the nation, the folder is like the street address, and the file name is the addressee’s name. Everything has to be included, or the right file will not be requested.
[edit] Visual References
http://www.0100101110101101.org/home/life_sharing/index.html Life Sharing by Eva and Franco Mattes
A server is a computer loaded with software that delivers files requested by web browsers. The artist duo Eva and Franco Mattes work as 0100101110101101.org. In their project, Life Sharing they turned their own computer into a web server, exposing their entire computer and all of its contents. By revealing their private information to the public, this work of art challenges the serious implications of of privacy and security online.
http://michaeldemers.com/colorFieldPaintings_browser/index.html Color Field Paintings by Michael Demers
[edit] Results of Chapter 1 Exercises
insert image here
In the final Chapter 1 exercise you will create...
[edit] Exercise 1: Adding headers, links, and images to an HTML page
This probably has to be rewritten, but here's what we had for LINKS, IMAGES, + TYPE in DF INTRO
LINKS
Hyperlinks, or links as they are commonly called, are a one-click route from one HTML file to another. Links are the simplest form of interactivity on the web.
1. Open a new web browser tab or window and search for the phrase “Hello World! Collection." Click on the Hello World Collection which is at this URL at the time of writing: http://www.roesler-ac.de/wolfram/hello.htm.
This collection of Hello World! examples started in 1994, although "Hello World!" first appeared in a programming book in 1978. Copy the site's URL from the browser's address bar and return to the file we modified in Exercise 2 in Dreamweaver.
2. In Design view, select the text “the first exercise you learn in any code or markup language” by highlighting it with your mouse. If it isn’t already active, click on the HTML button on the left edge of the Properties inspector. Paste the URL you just copied into the field labeled Link.
| Tip: If the Properties inspector is missing, select Window > Properties or reload the Designer workspace in the Application bar. |
3. Press the Return key and it will change the selected text from body copy to a hyperlink. This is important: save the file. If the file is not saved, the updated work will not load in the browser.
4. Go to the browser and refresh the helloworld.html page. The link should function in the browser. Return to Dreamweaver and inspect the code that was created.
IMAGES
To add an image to the HTML page, you need to have an image prepared for online viewing (see Chapter 12). For this exercise, we will search for an image on Flickr. In Chapter 2 we explained that Flickr is an online photo sharing website where viewers can search for images by tags. In this exercise we will use an image that has been placed in the public domain with a Creative Commons license.
1. Go to flickr.com. If you are not signed in, the search field is vertically centered on the right half of the page. If you are signed in, use the search field in the top left corner. Search for "Hello World."
2. Click on the Advanced Search button on the results page.
| Note: Web interface design changes often. It is possible that by the time you are reading this, these specific directions for Flickr will be out of date. |
3. Scroll down and check the boxes next to “only show Creative Commons licensed photos.” Creative Commons is a licensing schema that presents an alternative to the standard US copyright laws. All photographs uploaded to Flickr are automatically copyrighted, preventing other people from using or building upon them. Creative Commons allows you to post your work online and license it openly, allowing others to use it in their work. Online culture is a culture of sharing, remixing, and collaboration. Creative Commons licensing enables and empowers this culture. Reference Chapter 2 for a more detailed synopsis of copyright laws, fair use, and alternative licensing with Creative Commons.
4. Click on an image that you found in the Creative Commons "Hello World" Flickr search. Now the image appears on the Flickr page maintained by its author.
5. Contol-click or right-click on the image and select Copy Image Address or Copy Image Location. This copies the URL. The URL is the path to the location where the image file is saved on the server. The next time you use Edit > Paste in any text field, this address will be pasted. We will use this in Dreamweaver in the next step.
| Tip: URL stands for Universal Resource Locator. This is the web address that points to a file that is saved on an Internet server. |
6. Go back to Dreamweaver and view the helloworld.html file in Code view. Type a new paragraph tag. Note that Dreamweaver automatically closes the tag. Now add an image tag like this, <img src=“url” />. Replace the letters "url" with the URL that you copied from flickr.com by pasting it into that area. Leave the quote marks in the tag, and the space before the closing bracket.
The image tag closes itself. The combination of space, slash, and bracket at the end of the tag signifies a closing tag.
7. Save the file and refresh the page in your browser. The image appears on the page, with a paragraph break between it and the link we made in Exercise 3.
TYPE
If you have printed documents from Microsoft Word to a laser printer, you have used a markup language. The difference between working in Dreamweaver and printing from Word is that you are aware that you are creating the markup language in the HTML code. In essence, the B button in Word is a user interface component that marks up the selected type so it displays and prints as bold. The printer reads the file sent by the program and formats the typography. In Dreamweaver, you use the interface to add formatting, and you see the code that is being written for the browser. Thinking of the browser like a printer (and the web as the page) can be helpful for understanding markup language. You will discover that it is not always the perfect simile, as user interaction varies from the printed page to the web browser. The media environment always affects the audience.
1. The h1 tag will transform the words “Hello World!” into a headline. Insert the tag as demonstrated.
2. Formatting type in Dreamweaver is like formatting type in other Adobe programs. Bold and italic styles are one click away, but do notice the tags that are added to the HTML so that the styles are displayed properly in the browser. Click on Split view. Make the word "first" bold by selecting it and clicking the B button in the Properties inspector. Dreamweaver will surround the word with the strong tag.
3. Select the word "any" and click the italicize button in the Properties inspector. Dreamweaver uses the em tag to italicize the word.
[edit] Exercise 2: Visiting an unformatted web directory
For the most part, websites are made up of individual files stored in folders. The folders (called directories) are stored on a special kind of computer (called a server) which allows other users to connect and see these files. HTML tells web browsers to display the content of each file in a specific, formatted way, but that doesn't chance what they really are - files inside of folders.
Go to any webpage. Look at the URL in the address bar. It should begin with "http://". This stands for Hyper Text Transfer Protocol. By adding this prefix to the web address, you are telling your computer to look for and display HTML content. But there is another way to connect: using FTP or File Transfer Protocol.
1. Open Firefox and type: "ftp://ftp.gnu.org/" in the address bar.
This should display all of the files stored on [gnu's] public server. Notice that nothing is formatted, every file just appears as a name and icon in a list in the window - the same way it would appear on the desktop of your computer.
2. Click one or two of the folders (or directories) in the list. Notice that the files here are organized the same way you would organize files on a computer.
