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;}