DIGITAL MEDIA: COMMUNICATION AND DESIGN INTRODUCTION TO THE COURSE F2007 30/01/2007.

DIGITAL MEDIA: COMMUNICATION AND DESIGN

INTRODUCTION TO THE COURSE

F200730/01/2007

Digital Media: Communication and Design F2007

Goals of the lecture

Know about the organisation of the course Learn some basic things about the World

Wide Web Learn some basic web design principles


Index

Teachers Communication Structure of the course Recommended literature History of the World Wide Web Basic design principles


Teachers

Charlie Breindahl, external [email protected]

Javier San Agustín, PhD student [email protected]

Assistant teachers:Jonas Koop – [email protected] Løye – [email protected]


Who am I?

MSc in Telecommunication Engineering from the Public University of Navarra, Pamplona, Spain

PhD candidate at ITU since August 2006


What do I do?

Researching on eye tracking image processing algorithms

In general, systems mainly for severely disabled people

Idea: make possible to use eye trackers in normal applications

First step: make low cost eye trackers using webcams


Communication

Blog: http://www.itu.dk/courses/DMFD/F2007/

Mailing list: [email protected] E-mail: [email protected] Office: 3D04


Structure of the course

Media part with Charlie

Breindahl

Basic web programming

Tables, forms, images

Describing the

presentation

Dreamweaver& multimedia

Make personal

homepage

Photoshop

Use style sheets in your site

Make a nice website ;)


Structure of the course

Plan of the course in the course blog Web design part

Theory: Tuesdays 10.00 – 12.00, Auditorium 4 Exercises: Tuesdays 13.00 – 15.00, 4A56 & 4A58

Media theory part Theory: Thursdays 10.00 – 12.00, Auditorium 4 Exercises: Thursdays 13.00 – 15.00, 4A56 & 4A58


Compulsory exercises (web)

A personal homepage with: Name Background Photo Different sections

A group blog Each group makes a blog Include info about group, a blogroll, links, plugins, etc.

Two exercises in web design Photoshop Publish video in your homepage


Compulsory exercises (media)

One essay about a possible exam topic A media diary Voluntary exercises must be posted in the

blog Every Thursday one or two groups make a

presentation Oral exam


Recommended literature

Rose, G., & Christiansen, H.-C. (2006). Analyse af billedmedier. Frederiksberg: Samfundslitteratur, ISBN: 8759311932

Niederst Robbins, J. (2006). Web design in a nutshell: a desktop quick reference (3rd ed.). Beijing; Farnham: O’Reilly. ISBN 0596009879


Questions


Coffee break


INDEX

Teachers Communication in the course Recommended literature Structure of the course History of the World Wide Web Basic design principles


History of the WWW

1991: Tim-Berners Lee (CERN, Switzerland) makes the World Wide Web publicly available “The WorldWideWeb (WWW) project aims to allow links to be

made to any information anywhere. [...] The WWW project was started to allow high energy physicists to share data, news, and documentation. We are very interested in spreading the web to other areas, and having gateway servers for other data. Collaborators welcome!”

WWW is an Internet technology. The Internet has existed since the 60s


History of the WWW (2)

First browsers text-only:Erwise (HUT)ViolaWWWLynx

Mosaic (later Netscape): first web browser with multimedia support


How it works

Hypertext: links to other resources

Resource identifiers: each resource has a unique name (URL or URI)

Client-server model: one server receives the requests from multiple clients

Markup language: code that indicates structure, meaning and presentation

Server

Clients


How it works (2)

HTTP: Hypertext Transfer ProtocolClient: Web browserServer: Computer that stores and serves the

web contentWorks over Internet Protocol (IP) and

Transmission Control Protocol (TCP).


Browser wars

First war1996 – 1999Netscape had 80% of the market Internet Explorer 4.0 adopted the standards

more faithfully It was in every Windows machineThe usage of Netscape now is around 1.5%


Browser wars (2)


Browser wars (3)

Second war:2004 – ? Initiated with the release of Firefox 1.0MSIE 6.0 since 2001MSIE 7.0 and Firefox 2.0 october 2006Opera 9.0 released in March 2006


Browser wars (4)


Browser usage statistics

http://www.thecounter.com/stats/ http://www.w3schools.com/browsers/

browsers_stats.asp http://en.wikipedia.org/wiki/

Usage_share_of_web_browsers


Statistics of the course blog ;)


Layers in a web document

Structural layer: Describes the structure of the document HTML (now XHTML) and XML

Presentation layer: Provides information on how the document should look CSS, Cascading Style Sheets

Behavioral layer: Scripts that add interactivity and dynamic effects Document Object Model (DOM) JavaScript/ECMAScript Ajax, Asynchronous JavaScript and XML

Example: CSS Zen Garden


(Really brief) Introduction to HTML

HTML is the basic web standard It is a markup language Examples:

<strong>This is bold text</strong><h1>This is a header</h1>

HTML (XHTML) defines the structure of the document


INDEX

Teachers Communication in the course Recommended literature Structure of the course History of the World Wide Web Basic design principles


Design principles

Primary goal:

COMMUNICATION


Design principles (2)

Keep content and presentation apart

Make sure you can make changes



Designers aren’t good testers

Test with external users



Stick to the standards



Seek platform/browser independence Different versions of different browsers

running in different platforms Not all browsers have support for the

same technologies More on standards in following lectures



Screen resolution:

A lot of people still use 800x600 Flexible design vs rigid design vs combined design

2006 Higher 1024x768 800x600 640x480 Unknown

July 19% 58% 17% 0% 6%

January 17% 57% 20% 0% 6%



Never use frames



Design on paper before starting to code



Practice


Questions

DIGITAL MEDIA: COMMUNICATION AND DESIGN INTRODUCTION TO THE COURSE F2007 30/01/2007.

Documents

Transcript of DIGITAL MEDIA: COMMUNICATION AND DESIGN INTRODUCTION TO THE COURSE F2007 30/01/2007.