MODULE1ANDTHE3-WEEKWEBDESIGNBRAINWASHPhdfromtheITUniversityofCopenhagenWorkedaswebeditor,webconsulta

NETMEDIA SPRING 2008

WELCOME TO MODULE 1 AND THE 3-WEEK WEBDESIGN BRAINWASH

JONAS HEIDE SMITH MA in Media studies Phd from the IT University of Copenhagen Has taught webdesign, online communication, media theory and such Worked as webeditor, web consultant Responsible for innumerable nocost/low-cost web projects jhsmith@ruc.dk

www.jonassmith.dk

Be honest...

Who has a RUC logon?

THE WORKSHOP You will learn: The principles of web design and web development We will combine theory and practice (focusing on the latter) You will be planning and building a website Some days we’ll meet in class, some days you’ll work on your own We’ll rely heavily on our blog: jonassmith.dk/netmedia

JONASSMITH.DK/NETMEDIA/

HOW TO PASS Active participation Being present Producing a communication plan and a website Presenting at Show Time

READINGS Readings consist of background material and concrete/technical texts Complements theoretical course literature If you need pointers, ask For more on web design: Jennifer Niederst Robbins’ Learning Web Design.

Register on the blog jonassmith.dk/netmedia

GROUPS!

Quick’n’dirty analysis www.smk.dk/smk.nsf/docs/forside!opendocument

EXERCISE: ANALYZE WEBSITE Each group chooses the website of a Danish university Discuss (20 minutes): ! Communicative strategy (what do they want to say? How do they say it?) ! The interplay of text and images ! Navigation structure ! Other things of note

Present

And now... bits of History

Gathering information is an old idea The Library of Alexandria, 3rd century BC

Many forms

FOUNDATIONS J.C.R Licklider (1915-1990) Concept level genius "A network of such [computers], connected to one another by wide-band communication lines" providing "the functions of present-day libraries together with anticipated advances in information storage and retrieval and [other] symbiotic functions."

"Throughout the period I examined, in short, my ‘thinking’ time was devoted mainly to activities that were essentially clerical or mechanical: searching, calculating, plotting, transforming, determining the logical or dynamic consequences of a set of assumptions or hypotheses, preparing the way for a decision or an insight. Moreover, my choices of what to attempt and what not to attempt were determined to an embarrassingly great extent by considerations of clerical feasibility, not intellectual capability."

FOUNDATIONS Vannevar Bush (1890-1974) As We May Think essay, 1945 The Memex: Stores information in associative structures “Professionally our methods of transmitting and reviewing the results of research are generations old and by now are totally inadequate for their purpose. [...] Those who conscientiously attempt to keep abreast of current thought, even in restricted fields, by close and continuous reading might well shy away from an examination calculated to show how much of the previous month's efforts could be produced on call. Mendel's concept of the laws of genetics was lost to the world for a generation because his publication did not reach the few who were capable of grasping and extending it; and this sort of catastrophe is undoubtedly being repeated all about us, as truly significant attainments become lost in the mass of the inconsequential.�

ARPAnet

FOUNDATIONS Tim Berners-Lee Physicist at CERN Inventor of the World Wide Web (a system on the Internet) •

Free to use

•

Allows information to be made “constantly” available on web servers

•

Allows information to be interlinked (with hyperlinks)

•

No central control

•

An information revolution

WWW takes over a broad range of functions

EXERCISE: ADDING PORTRAITS Have your picture taken Resize it in PhotoShop to 75px X 75 px.

Use “Save for web” and save it as a JPG file.

Upload it to your blog profile (in both image fields) Make sure it gets displayed in posts and comments While you’re there: Update profile

WordPress demo

Terms & Principles

Creates pages and uploads them to a...

Web developer

ar nds

er se

Us

uest

eq

end s r e

s

Web server

e

fil d e t es requ

rv

b se We

The browser interprets the data and displays it to the reader

Terms & Principles

The Web developer either Writes pages which are then uploaded and downloaded directly (with any embedded media)

OR

Terms & Principles

Writes “recipes� for the construction of pages on the server

Writes pages which are then uploaded and downloaded directly (with any embedded media)

OR

Terms & Principles

Writes “recipes� for the construction of pages on the server

EXERCISE: COMM. PRINCIPLES You need to understand the technology, but only to support your communicative goals.

Discuss (20 minutes): ! What characterizes WWW as a (communication) medium? ! How does web communication differ from communication in other media?

Present

The anatomy of the web page

HTML HyperText Markup Language Not a programming language HTML applies structure (and definitions) to content You can see the source code of (mostly) any webpage

THE WEB PAGE LOGIC Behavioral layer JavaScript, Ajax Presentation layer Cascading Style Sheets (CSS)

Separate files

Structural layer HTML

The “page” file

Embedded media Images, sound files etc.

Separate files

THE WEB PAGE LOGIC HTML consists of tags (like <p>) which are typically paired (like <p></p>). Tags define elements. <p>Hello World!</p>

An element can have one or more attributes (in any order). <p id=â&#x20AC;?footerâ&#x20AC;?>Hello World!</p> <img src="/grafik/admin/1x1.gif" alt="" width="1" height="1" border="0" />

THE WEB PAGE LOGIC A web page consists of 1) Doctype 2) HTML 3) Header 4) Body

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>A very simple document</title> </head> <body> <p>Hello World!</p> </body> </html>

EXERCISE: HUMBLE BEGINNINGS Write down this page in Notepad (you can copy the DOCTYPE from the blog).

Save it as humleyourname.html (e.g. humblejonas.html) Put it in a public-html folder on the webserver Write a celebratory post on the blog - with a link to your page

<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html> <head> <title>A very simple document</title> </head> <body> <p>Hello World!</p> </body> </html>

THE WEB PAGE LOGIC Most elements have content, but some are empty. <br /> <hr />

THE WEB PAGE LOGIC Certain elements are particularly important It all happened at <a href=”http://ruc.dk”>RUC</a>.

http://ruc.dk is a Universal Resource Locator (URL) URLs can be absolute (http://ruc.dk) or relative to the current document, for instance: Have a look at our <a href=”schedule.html”>schedule</a>.

THE WEB PAGE LOGIC Non-text (i.e. media) is not contained within the HTML file. <img src=”portrait.jpg” alt=”Author Portrait” />

THE WEB PAGE LOGIC <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>A very simple document</title> </head> <body> <p>Hello World!</p> <img src="http://jonassmith.dk/netmedia/wp-content/authors/ Kristoffer.jpg" alt="Kristoffer" /> </body> </html>

EXERCISE: A NEW DAWN Work in the group (make sure everybody understands the procedure) Make a new page with the old code Add an image to the page Put the page in a public_html folder Post a link to it on the blog

<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html> <head> <title>A very simple document</title> </head> <body> <p>Hello World!</p> <img src="http://jonassmith.dk/ netmedia/wp-content/authors/ Kristoffer.jpg" alt="Kristoffer" /> </body> </html>

THE WEB PAGE LOGIC HTML defines structure, and should be semantic not representational Weird code is <strong>fantastic</strong>

Weird code is <b>fantastic</b>

Weird code is <font color="red">fantastic</font>

HTTP://WWW.WPCLIPART.COM/PAGE_FRAMES/FULL_PAGE_SIGNS/STOP_SIGN_PAGE.PNG

THE WEB PAGE LOGIC Representation is handled separately

<img /> img { margin-left: 2px; }

THE WEB PAGE LOGIC A (cascading) style sheet is just a text file body {background-color: black; color: white; font-family: courier} img {margin-left: 2px;}

It is "attached" to the HTML file like this: <link rel="stylesheet" type="text/css" href="style.css">

THE WEB PAGE LOGIC <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head>

<link rel="stylesheet" type="text/css" href="style.css"> <title>A very simple document</title> </head> <body> <p>Hello World!</p> <img src="http://jonassmith.dk/netmedia/wp-content/authors/ Kristoffer.jpg" alt="Kristoffer" /> </body> </html>

EXERCISE: STYLISH Work in the group (make sure everybody understands the procedure) Attach a css to your page •Change the background

color •Change the font to Verdana •Give the image a left margin

of 10px

body {background-color: black; color: white; font-family: courier} img {margin-left: 2px;}

THE WEB PAGE LOGIC Style sheets are used to layout the page <div id="header">This is the header</div>

#header {background-color: blue; color: white; width: 700px; }

<div id="main">This is the main area</div>

#main {background-color: green; color: black; width: 700px; }

Images

15 14 13 12 11 10 9 8 7 6 5 4 3 2 1

2

3

4

5

6

7

8

9

10

Images

11

12

13

14

15

Images

600 px

400 px 600 px 768 px

800 px 1024 px

Images

WEB GRAPHICS Digital image are saved in particular formats (BMP, TIFF, PSD...)

On the web three formats are used: 1. JPG: Used for photos (relatively small, lossy compression, many colors) 2. GIF: Used for images with clear contrasts such as logos (small, loss-free compression, few colors) 3. PNG: Can be used for either type (relatively large, loss-free compression, many colors)

PhotoShop demo

EXERCISE: IMAGE EDITING Edit a photo and put the picture on the blog - Get the picture at http://flickr.com/photos/jonassmith/ 46169734/ - Cut away everything except the child - Remove any background (the child should appear on a white background) - Resize your image to a width of no more than 400 pixels - "Save for web" (your picture must take up no more than 100kbyte) - Display your image in a blog post

Aesthetics and design

www.folketinget.dk

www.mitkbh.dk

The command line

I was working at IBM in 1979 and somebody asked me for an internal-use-only review of a thing called the Lisa... I said this is a catastrophe. This is the end of language in relation to computers. This is the implementation of the caveman interface. You point and you grunt.

- Eben Moglen

2 logics

1984

1996

1996

1996

1996

2007

MODERN DESIGN • • • • • • • • •

Simple layout Centered orientation Design the content, not the page 3D effects, used sparingly Soft, neutral background colours Strong colour, used sparingly Cute icons, used sparingly Plenty of whitespace Nice big text

- Ben Hunt

EXERCISE: REDO RUC.DK Create a website "mock-up" (using Photoshop for instance) for an alternative ruc.dk Post your proposal on our blog

www.useit.com

WWW.BYMALENEBIRGER.COM/

www.bymalenebirger.com

DESIGN TIPS Use contrast: Don't make things almost the same. Accentuate differences.

Use repetition: Repeat design elements.

Align objects: Make sure everything aligns with something else Use proximity: Put things that are related close to each other

Interaction design The discipline of defining the behavior of products and systems that a user can interact with

Look around you What would you change?

How should a website work?

PRINCIPLES A page should load quickly Navigation should be intuitive (and follow conventions) Representation should be usercontrollable Form should signal function (e.g. buttons should look like buttons) Design should be user-centred See also the criteria of "Bedst p책 Nettet": http://www.bedstpaanettet.dk/ vurderingsgrundlag%202007

Recommended

USABILITY Many standard tests Often think-aloud variations are used: Users are given tasks and time-to-complete is measured

Web site planning

COMMUNICATION TERMS Target group: The group which the sender wishes to (ultimately) influence Text: That which is interpreted (AKA "the media product"). May lend itself to "text analysis".

Strategic communication: Communication with a clear endpurpose (which defines communication choices)

IDEALS AND ASSUMPTIONS Communication efforts should take place because of a real problem or potential The problem/potential (alone) should guide choice of medium and the concrete approach To succeed one needs to analyze one's target audience (preferences and life world) and to test one's product Not all problems are communication problems

WEBSITES A very early question should be: Is WWW the best medium for the job?

Another important question: Why hasn't this been done before? (could there be an obvious reason?

- is there perhaps an organizational reason?)

WEBSITES

PROJECT DEFITION

Client survey Project brief Project plan

SITE STRUCTURE

VISUAL DESIGN

SITE DEVELOPMENT

Draft visual designs Design selection Content overview Site diagram Wireframes

TEST

LAUNCH

Test and refine/change

Build and integrate Data conversion

BASED ON HTTP://WWW.UTEXAS.EDU/LEARN/DESIGNPROCESS/INDEX.HTML

Wireframes

Site diagram

NETMEDIA SPRING 2008

What is a genre?

What is a genre?

What is a genre?

EXERCISE: THINK-ALOUD TEST Work in pairs: One person is the test manager, the other is the test subject (take turns) Begin by each of you identifying a website you wish to test.

- Create 5 tasks for the test subject to complete - Give tasks to the test subject one by one, ask the subject to "think-aloud" while you take notes - Take 15 minutes to write up notes - Change places - Give report to the class Total time: 90 minutes

WORK ON COMM. PLAN Make a site-map for your website (using a tool of your choice) and a time-plan for the project.

Then answer the following questions: - What genre does your website belong to? What are the communicative conventions of that genre?

How does the genre shape your design/ communication?

- How will your users find your site?

- Which kinds of functionality will your website need (beyond standard WordPress page/post publishing)?

- Do group members have all the required skills, or will you need outside help? (how will you get it?)

Post it all (including answers from Wednesday) on the blog

Content management with WordPress

WORDPRESS Originally a blogging tool (easy, regular posting of content) Open source Downloadable version (wordpress.org) and hosted version (wordpress.com)

CONTENT MANAGEMENT SYSTEM

BACKEND

FRONTEND

Core files files

CONTENT MANAGEMENT SYSTEM

Core files

Plugins Core files

Database

Themes

Core files

Plugins

Themes

Database

No blog

strong

em

body h1 p ul li

The box model

Width and height refer to the content area

Margin Padding

Height is automatically calculated based on the contents Sizes specified in percentages refer to the size of the parent element

Content area Width

Height

Inner edge Border Outer edge

The box model

Three variables 1) Style (obligatory) 2) Width 3) Color

Margin Padding Content area Width

Height

<div>Noget mumletekst Noget mumletekst Noget mumletekst Noget mumletekst Noget mumletekst Noget mumletekst</div> div { border-style: solid; border-width: 20px; border-color: #0099FF; width: 250px; } ELLER: div { border: solid 20px #0099FF; }

Border

Inner edge Border Outer edge

COLOR 2-digit hexadecimal RGB: #0000FF 1-digit hexadecimal RGB: #00F Comma-separated value: rpg (0,0,255) Comma-separated percentage value: rgb(0%, 0%, 100%) Color name (16 in all): blue

BACKGROUND COLOR Margin Padding Content area Width

Height

Inner edge Border Outer edge

FLOATING <p><img src="river.jpg" width="216" height="136">Mumletek st er fyldtekst, som kan benyttesâ&#x20AC;Ś </p> img {float: right; margin: 20px;}

CLEARING If an element should not wrap around floated elements it can be cleared img {float: left; marginright: 10px; } h1 {clear: left; topmargin: 2em;}