Week 01

Topics: Syllabus, Core Skills, Constraints, What is Interaction Design?, How the Internet Works, WordPress, XHTML
Studio
Experiment: Create XHTML page using TextEdit and post to the class server.
Project:
To track your weekly design process in this class, set up your own WordPress Blog at wordpress.com Please print these out and review: HTML Cheat Sheet and CSS Cheat Sheet

Reading for next week:
Designing for Interaction:
Chapter 1: “What is Interaction Design?” (pg 1-22)
Designing for Interaction:
Chapter 2: “Starting Points” (pg 23-29)
W3C.org: Introduction to Web Accessibility: http://www.w3.org/WAI/intro/accessibility.php


Core Skills of Design1
  1. To synthesize a solution from all of the relevant constraints, understanding everything that will make a difference to the result.
  2. To frame, or reframe, the problem and objective.
  3. To create and envision alternatives.
  4. To select from those alternatives, knowing intuitively how to choose the best approach.
  5. To visualize and prototype the intended solution.

Design depends largely on constraints… the sum of all constraints. Here is one of the few effective keys to the design problem — the ability of the designer to recognize as many of the constraints as possible — the willingness and enthusiasm for working within these constraints — the constraints of price, of size, of strength, balance, of surface, of time etc.; each problem has its own peculiar list. – Charles Eames

1Bill Moggridge, Designing Interactions, 649.

William (Bill) Moggridge, a British industrial designer, is co-founder of the Silicon Valley-based design firm IDEO. He helped design what was arguably the first laptop computer, the GRiD Compass. He advocated user-centered design process in product development cycles and also worked towards popularizing interaction design as a mainstream discipline. (Wikipedia)

Charles and Ray Eames were American designers who worked and made major contributions in many fields of design including industrial design, furniture design, art, graphic design, film and architecture. (Wikipedia)


Design Constraints
Why Web is Different than Print


SVA Dot Dot Dot Lectures: Jason Santa Maria
from MFA Interaction Design on Vimeo.

Jason Santa Maria
Jason has been recognized for designing stylistic and imaginative web interfaces that maintain a balance of usability and readability. Jason is a celebrated speaker worldwide at such conferences as South By Southwest, An Event Apart, @media, and Webstock. He also maintains a popular website where he frequently holds discussions on design for the web. Jason recently transitioned from a long-time position as Creative Director for Happy Cog Studios, a web design consultancy. He serves as Creative Director for A List Apart, an online magazine for people who make websites.

About the Lecture Series
The Dot Dot Dot Lecture Series is meant for broad explorations of interaction design, business, and aesthetic inspiration. Practitioners and thought leaders give short talks in an informal setting. Wisdom will be revealed and methods will be shared in a environment intended to satisfy both social and scholarly pursuits.


What is Interaction Design?

dan_saffer_diagramfinal

Above is a revised diagram posted on Dan Saffer’s blog “Kick it” on Thursday, December 4, 2008.

.
.

Interaction-Design-Disciplines

“Interaction design is an applied art; its usefulness comes in its application to real problems, such as figuring out the best way to send e-mail. Its purpose is to foster communication—an interaction — between two or more human beings or, to a lesser degree, between a human and an artificial entity capable of responding in some manner, such as a computer, mobile phone, or digital appliance. These communications can take many forms; they can be one-on-one as with a telephone call, one-to-many as with a blog, or many-to-many as with the stock market.” – Dan Saffer

“The medium of Interaction Design is Behavior” – Robert Fabricant

A broad definition of interaction design is: “The design of everything that is both digital and interactive.” -Bill Moggridge

Dan Saffer is “founder and principal of Kicker Studio, a design consultancy for consumer electronics, appliances, devices, and interactive environments, specializing in touchscreens and interactive gestures. He curates a site called No Ideas But In Things that collects physical interfaces for design inspiration. He also oversees a wiki for the collection of new interaction paradigms called Interactive Gestures that has spawned a new book: Designing Gestural Interfaces, which O’Reilly published in December 2008.

Robert Fabricant is an Executive Creative Director at frog design where he leads frog’s efforts to expand its creative offerings into new markets and disciplines.

Gillian Crampton-Smith – Visiting Professor at IUAV University of Architecture, Design and Arts, Venice. Founding Director of Interaction Design Institute Ivrea (Italy), established by Telecom Italia and Olivetti for advanced teaching and research. Personal Chair in Computer Related Design at the Royal College of Art. Founded its Computer Related Design (later Interaction Design) department and research centre. Worked as interaction designer at Interval Research and Apple in Silicon Valley, California.


History of Interaction Design
View more presentations from David Malouf.

History of the Internet


History of the Internet
from PICOL on Vimeo.


How the Internet Works

Take a look at the diagram below and read through the notes so you understand how the internet works. (Note that “Client” refers to the computer where the web page is viewed…)

clientserver

Servers

The Server is where the web site files live. The web server software runs on the server machine, responding to client requests by sending files back to the client. The server also processes CGI (Common Gateway Interface) requests, runs programs, and accesses databases.

Clients

The client is the computer where the web page is viewed. The browser software runs on the Client computer and sends requests to the Server computer. When the client receives files from the server, the Client assembles the web page and displays it.

Composition of a web page

A web page is composed of the following elements:

  • The HTML file, which describes the page layout, defines links to other web pages, and contains the text for the page
  • Elements that come from the same server where the HTML files is, or from a different server
  • Image files (.gif, .jpg, .png)
  • Audio files (.mp3, .wav, .aif )
  • Video or animation files (QuickTime movies, Flash etc.)
  • JavaScript

See the links to the directories below for examples. Take a look and note the various elements that comprise the web pages. Notice all the HTML files. (.htm and .shtml files are also HTML files).

Monterey Pop Web Site
Nike Annual Report Web Site

Building a website
WordPress

In this class, we’ll use a Content Management System to create websites for our Process Blogs. A content management system, commonly referred to as a “CMS” is “a computer application used to create, edit, manage, search and publish various kinds of digital media.” For our Process Blogs, we’ll use WordPress but there are many other CMS applications available such as Drupal, Joomla, and Expression Engine.

“WordPress is an open source blog publishing application. WordPress has a templating system, which includes widgets that can be rearranged without editing PHP or HTML code, as well as themes that can be installed and switched between. The PHP and HTML code in themes can also be edited for more advanced customizations. WordPress also features integrated link management; a search engine-friendly, clean permalink structure; the ability to assign nested, multiple categories to articles; multiple author capability; and support for tagging of posts and articles. Automatic filters that provide for proper formatting and styling of text in articles (for example, converting regular quotes to smart quotes) are also included. WordPress also supports the Trackback and Pingback standards for displaying links to other sites that have themselves linked to a post or article. Finally, WordPress has a rich plugin architecture which allows users and developers to extend its functionality beyond the features that come as part of the base install.”

Web file naming conventions

When creating your web site, you must be very methodical when naming your files. First, never use spaces, uppercase letters, or any special characters in your file names. While your site may seem to work OK in an applicaton, on your local computer, once you put the web site on the server, violating these rules can cause you no end of problems.

For the web page file names, be sure you use “index.html” for your first web page. Using this special name will tell the server to display this page as the default page for any directory of html files.

Other HTML files should have meaningful names such as products.html or about_us.html, rather than convenient names such as page1.html. Name your files as if you giving the web site to someone else to work on, and who won’t be able to ask you any questions about it (for example, you 6 months after the project is finished when you can’t remember anything about it).

Web file naming rules:

  • No spaces in the file names
  • Use all lowercase letters
  • No special characters in the filenames: For example none of the following are acceptable in web filenames: “!~:&(,
  • The files MUST have the proper suffix (.html, .gif, .jpg)
  • Be consistent in your naming of files, for example use the same prefix in a series of files. Also, to ensure that the files alphabetize correctly, always “zero-pad” your filenames when they have numbers in them. In other words, if you have a series of files numbered 1-20, the first file should be something like myfile01.jpg, and the last file should be named myfile20.jpg.

And again, it’s critical that you name your files correctly from the start. If you attempt to rename your files after you’ve created your site, you will, in all likelihood, break all the links in your web pages.

Sample project file structure

One of the most important principles of web production is setting up the structure of your files correctly. (I’ll talk about this often since it is so important.) There is definitely a right way to set up your files and multiple wrong ways to do it. If you get in the practice of ALWAYS setting up your file structure correctly at the beginning of all your web projects you will eliminate the headache of fixing everything later. Note the structure below and that the images folder is located in the same folder (named “project_yourlastname”) as the HTML files. Your HTML files should never live inside your images folder. And your images should always be in your images folder– never loose.

file_structure

XHTML
Markup, the basis of every page

HTML and XHTML are markup languages composed of elements, which contain attributes (some optional and some mandatory.) These elements are used to markup the various different types of content in documents, specifying what each bit of content is supposed to be rendered as in web browsers (for example headings, paragraphs, tables, bulleted lists etc.) As you’d expect, elements define the actual content type, while attributes define extra information about those elements, such as an ID to identify that element, or a location for a link to point to. You should bear in mind that markup is supposed to be as semantic as possible, i.e.– it is supposed to describe the function of the content as accurately as possible.

Figure 1 shows the anatomy of a typical (X)HTML element.

A typical HTML element

Figure 1: Anatomy of an (X)HTML element. Read Figure 1 description

With that in mind, just what is the difference between HTML and XHTML?

What is XHTML?

The “X” in XHTML means “extensible”. One of the most common questions for those starting out is “should I be using HTML or XHTML, and what the heck is the difference?”. They pretty much do the same thing; the biggest difference is in the structure. For now, we’d recommend that you don’t worry too much about whether you are writing HTML or XHTML. Use an HTML doctype (see article 14 for more on doctypes) and you shouldn’t go far wrong.

XHTML Introduction

XHTML is a markup language that has replaced HTML. It incorporates a web technology called XML that makes web pages more flexible and the content in the pages accessible like a database. Some rules to follow to make your code compatible with XHTML:

  • all your tags and attributes should be lowercase
  • all tags must be closed–for example, a paragraph tag <p> is not allowed without a corresponding closing paragraph tag. </p>
  • for tags such as the line break and image tags, they must end with a space and slash. e.g. <br />, <img src=”image.gif” />
  • all tag attributes should be quoted. For example, in this tag , <body bgcolor=”#FFFFFF”> the background color must be quoted.

For more information see: http://www.w3schools.com/xhtml/default.asp

Tags

An HTML tag is always contained between a left angle bracket “<” and a right angle bracket “>”. These tags are special instructions designed to mark or “tag” a particular section of the web page, for example to identify a set of text as bold. The tags do not appear in the visual display of the web page. In general, HTML tags have a starting tag “<tag>” and an ending tag that has the same name as the starting tag but with a forward slash at the beginning “</tag>”. The text in between the starting and ending tags is the only text affected by the tags.For example, to make some text bold, the HTML would be written as follows:

Here is some text, and <b>this text will show bold</b> when displayed in a browser.

HEAD & BODY Sections

An HTML web page is divided into to two major sections, the head and body.
The head section is a description of the page, with its title, any meta tags, JavaScript, and other special information about the page. The head section does not contain any displayed content.
The body section contains a description of how the page should look and work, including the text, text markup, links for in-line images, form descriptions, links to other pages, and page enhancements such as Flash, JavaScript, etc.

Basic XHTML

A simple example of a web page

<html>
<head>
   <title>HTML Example</title>
</head>

<body>
   Some text for a web page that demonstrates the basic form of HTML in a web page.
</body>
</html>

HTML coding style

The format of your HTML code does not affect how the page will be displayed in a browser. For example, this example of poor HTML style:

 <html><head> <title>a title </title>
</head><body> Example of BadHTML Coding style
<ol type="A"><li>item #1
 </li><li>item #2</li> </ol>
</body></html>

Displays exactly the same as this example of good HTML style.

<html>
<head><title>a title</title></head>
<body>
Example of Good coding style
<ol type="A">
    <li>item #1</li>
    <li>item #2</li>
 </ol>
</body>
</html>
Creating a webpage using TextEdit

  • Using Apple’s simple text editor called TextEdit (found in the Applications folder on your computer), type in the HTML for the “Good HTML” style above. Do not copy and paste the html–you will only learn if you actually type in the code!
  • Very important– when usingTextEdit, be sure to make the following change: under “Format” > “Make Plain Text.”
  • Also, be sure to make the following changes in the Preferences in TextEdit. Open Preferences and
    Under “New Document” > “Format” > select “Plain Text.”
    Under “Open and Save” > Under “When opening a file” > select “Ignore rich text commands in HTML files.”
  • Save the file with the extension .html in order to view it in a Browser application such as Firefox or Safari.
Basic XHTML example
<html>
<head>
   <title>Basic HTML Example</title>
</head>

<body>
   Some text for the basic html example page
</body>
</html>

Please print these out and review:

HTML Cheat Sheet

http://lesliefranke.com/files/reference/htmlcheatsheet.html

CSS Cheat Sheet

http://lesliefranke.com/files/reference/csscheatsheet.html



Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Interactive Design 01