ID01: Interaction Design & Development 01

Icon

Thom Meredith

Week 01

Week 01 – Topics

Meet and greet
Review Syllabus
Core Skills of Design
Why Web Design is Different than Print
What is Interactive Design?
Web domains + Hosting
Basics of HTML
Technical lab: File structure and the basics of HTML & CSS. Using WordPress for process blogs.

Assignments

  1. Lab assignment: Create Basic XHTML page (see example in class notes) using TextEdit and post to the class server. Information on how to post your work to the class server is on the FTP page of this website. Please print the following 2 cheat sheets out, review, and bring to class next week: (HTML and CSS: see resources to the right). Create a folder called “web_kit” and place the following files into it:  PDFs of the cheat sheets and an HTML file of the basic XHTML structure.
  2. Project due before next week: To track your weekly design process in this class, set up your own WordPress Blog at wordpress.com. Email me the URL of your process blog along with the URLs of your 5 favorite websites.
  3. Reading for next week: Stylin’ with CSS: Chapter 1: “XHTML: Giving Structure to Content” (pg 2-25)

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 Interactive/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.

Domain Name Registration

The best way to have convenient access to a server is to register your own domain name and purchase a web hosting plan.

While it is not an absolute requirement for this class, I do recommend student’s set up their own web site. I find that many students are already interested in doing so and, honestly, if you are interested in securing clients in the future and designing web sites professionally, you will need your own web site and server space.

I’m happy to help you do this and have provided the following information for those students who are interested in securing a domain name.

  • I highly recommend that you register your domain name with an ICANN-Accredited Registrar. If you don’t want to sift through the hundreds of companies, I would recommend either Network Solutions or Go Daddy.
  • The big difference between Network Solutions and Go Daddy is price and service.
  • To register a domain name with Network Solutions is $34.99 for one year. (Or free if you sign up for a year of web hosting. A one year basic hosting plan is around $120). Network Solutions has good customer service and has been around a long time.
  • GoDaddy is more economical.You can register a domain name for $1.99 for one year with the purchase of a 2 month plan (Two months is the minimum purchase length and costs $3.99 a month) GoDaddy’s customer service has been impressive recently. I’ve been told they send both a followup email and call new customers to answer questions.
  • Feel free to register your domain name at a different company than the two given above. I would recommend you check to see that the registrar you’ve chosen is ICANN-Accredited and you know people who have had a good experience with the company.

Web Hosting

In additon to securing a domain name, you may will also want to purchase a web hosting plan so you can have your own server space.

Both Network Solutions and GoDaddy, and many other web hosting companies, will attempt to get you to sign up for additional add-on services, Rarely, if ever, will you need to add additional services to your web hosting plan. All you need is a domain name and a basic hosting package. Beware of the multiple attempts companies will make to sell add-on services when you order your domain name and web hosting.

If you want to get started slowly without committing to a 12-month hosting plan, the 2 month minimum plan through GoDaddy may be a good choice.

When you purchase your web hosting you will see a box to add a domain name to your order. If you specify a one year registration, you will be charged $1.99. I recommend you choose the Linux/Unix platform rather than Windows for your web hosting. (Unless you need language support for ASP.NET, then you should probably go with a Windows server). Remember to stay clear of the multiple attempts companies will make to sell other add-on services when you order your domain name and web hosting.

Here are some other features you should be aware of:

Disk space: total amount of usable space that you are allotted on hosting company servers. You will only probably need 300 – 500 MB…. at GoDaddy you get 5 GB with the Economy Plan. If you plan to incorporate a lot of video on your site, it is good to have at least 1 GB of disk space.

Data Transfer/Bandwidth: This is the total amount of data that you can transfer to or from your web site.

Below is an example of how many times a page would have to be viewed in order to reach 10 GB of transfer:

Page size 30 kb: 699,050 views

Page size 40 kb: 524,288 views

Page size 50 kb: 419,430 views

Page size 60 kb: 349,525 views

Therefore, most web hosting plans offer plenty of bandwidth.

When signing up for these services, you will be asked to specify a password and will be given a login name. Please make note of all login and password information, You may be given a separate login and password for both your domain registration and for web hosting. You will need all of this information to login onto your server.

Note: You are welcome to use any of my recommendations above. If you have someone else you trust who has recommendations, or if you have purchased a web hosting plan already, or can do it by yourself, I encourage you to follow your direction. It is always good to do as much research as possible and to ask around. In no way are you required to follow any of my recommendations above.

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, Modx 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 , <img width=”55″> the width 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>

Reminder about 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 andUnder “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.

HTML – Basic Tags

For the HTML tags below, please be sure you understand all 20 tags outlined in the notes below. You will need to use these tags in your Assignment for this week. This should be review for you, but if you need to refresh your memory or re-learn how to use these tags, be sure to take the time to do so NOW. Remember, if you have any questions on how to use the tag, please take a look at the example located here:

Link to HTML Example directory

Also, note the name of each tag is hyperlinked and links to an example page. (Click on “background color” below to see example). If you view the source of the example page, you can see exactly how the page is coded.

There is also a great online tool at w3schools.com which allows you to test your code interactively.

1 background color

inline

<body bgcolor=”#000000″>

css

body { background-color: #000000;}

background image

inline

<body background=”images/an_image.gif”>

css

body { background-image:url("images/an_image.gif"); }

use this image as the background image (control-click to download it):

an image

Heading styles

<h1>The biggest heading</h1>

<h4>The sixth biggest heading</h4>

Line break

some text using a br with a line break at the end<br />

Paragraph

<p>some text in a paragraph, always has a blank line after it</p>

Bold and italic

<strong>Some Bold Text</strong> OR <em>Some Italic Text</em><br>

<strong>Some Bold Text AND <em>some bold and Italic text</em></strong>

How would you use html markup to produce this sentence (bold & italic, then italic)?

Horizontal rule

<hr />

<hr size=”20″ />

<hr width=”100″ align=”left” />

<hr width=”50%” />

Image

<img src=”images/an_image.gif” width=”200″ height=”100″ alt=”An image to be displayed” />

Links

A link to another web site, in a new window

<a href=”http://www.latimesmagazine.com/” target=”_blank”>Link to LA Times Magazine</a>

A link to a page within the website

<a href=”about.html”>Link to a the About page on this site</a>

A link that sends an email. Note that this won’t work right on all computers because they are not configure for email.

<a href=”mailto:jane@jane.com”>Email Jane</a>

The next two tags enable you to create a link to a different location on the current web page. When the user clicks on the link, the browser will scroll to the new position – assuming that the link is far enough away to need a scroll. The “href” version is the link and must include the “#”, the “name” version is the location on the page to scroll to and must NOT include the “#”. NOTE: You must have some text between the <a name> tag and the </a> tag, or the link won’t work in Explorer. If you don’t want anything to so in the name tag, use the non-breaking space HTML code:

<a href=”#lowerpoint”>Link to a location lower on this page</a>

<a name=”lowerpoint”>Some text lower on the same page</a>

10 Font

Special note: We will NOT define our font styles inline in the body of the HTML file. In this class, we will define all styling using external CSS files. More about this later in the semester.)

inline (DON’T DO THIS, ever)

<font face=”Arial, Helvetica, sans-serif” color=”#ff0000″ size=”6″>this is some text</font>

css (DO THIS INSTEAD)

body { font-family: Arial, Verdana, sans-serif; }
PC Mac
Arial Helvetica
Times New Roman Times
Courier New Courier
Verdana Verdana
Trebuchet Trebuchet
Symbol Symbol

11 Centering

<center>Using CENTER</center>

PS: this should also be avoided as well as it is being deprecated as it is used for presentation, which we are trying to avoid in our HTML.

12 Indenting a paragraph, creates a paragraph and adds margin on left and right

<blockquote>some indented text</blockquote>

13 Bulleted list

<ul>

<li>this is item 1 in an un-ordered list</li>

<li>this is item 2</li>

<li>this is item 3</li>

<li>this is item 4</li>

</ul>

14 Numbered list, types: numbered=no type, upper letters=”A”, lower letters=”a”, upper roman=”I”, lower roman=”i”

<ol type=”i”>

<li>this is item 1 in an ordered list</li>

<li>this is item 2 in an ordered list</li>

<li>this is item 3 in an ordered list</li>

<li>this is item 4 in an ordered list</li>

</ol>

15 Preformated text allows use of extra spaces and line breaks to format your text

<pre> 

alskf asldk
     aslfk asldkf asdlk

         als faslfk alskfa sldk

            aksdf alsfk laskf alsdkf

     alskf asldk aslkf
als kfasdlk

</pre>

16 Flowing text around an image align=”left”, align=”right”, vspace=”pixels” margin above and below image, hspace=”pixels” margin left and right of image

inline

<img class=”alignleft” src=”images/an_image.gif” width=”200″ height=”100″ align=”left” hspace=”10″ vspace=”10″>

css

img.alignleft {float: left; margin: 10px;}

17 Text colors text=basic text color, link=links color, vlink=visited links, alink=link when mouse down

inline

<body text=”#ff0000″ link=”#003300″ vlink=”#000066″ alink=”#000000″>

css

body {color:#ff0000;}
a:link {color: #003300; text-decoration: underline; }
a:visited {color: #000066; text-decoration: underline; }
a:hover {color: #000099; text-decoration: none; }
a:active {color: #000000; text-decoration: underline; }

18) Meta tags refresh=go to a new page after N seconds, description=used by search engines, keywords=used by search engines

<meta http-equiv=”Refresh” content=”15; URL=http://academy.smc.edu”>

<meta name=”description” content=”The New York Times on the Web”>

<meta name=”keywords” content=”New York Times, newspaper, international, news, business”>

19) Comments, used for identifying different parts of the code, or explaining how the code works. Comments are not displayed in the page, and are ignored by the browser. The format for a comments is: Begin a comment with “<!–”, end it with “–>”, and do not use “–” within the comment.

<!– this is a comment –>

20) Linking CSS file to your HTML page

<link href=”styles.css” rel=”stylesheet” type=”text/css” />

Category: Classes

Tagged:

Comments are closed.