DIGITAL MEDIA: COMMUNICATION AND DESIGN INTRODUCTION TO THE COURSE F2007 30/01/2007
Dec 21, 2015
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
Digital Media: Communication and Design F2007
Index
Teachers Communication Structure of the course Recommended literature History of the World Wide Web Basic design principles
Digital Media: Communication and Design F2007
Teachers
Charlie Breindahl, external [email protected]
Javier San Agustín, PhD student [email protected]
Assistant teachers:Jonas Koop – [email protected] Løye – [email protected]
Digital Media: Communication and Design F2007
Who am I?
MSc in Telecommunication Engineering from the Public University of Navarra, Pamplona, Spain
PhD candidate at ITU since August 2006
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
Communication
Blog: http://www.itu.dk/courses/DMFD/F2007/
Mailing list: [email protected] E-mail: [email protected] Office: 3D04
Digital Media: Communication and Design F2007
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 ;)
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
INDEX
Teachers Communication in the course Recommended literature Structure of the course History of the World Wide Web Basic design principles
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
History of the WWW (2)
First browsers text-only:Erwise (HUT)ViolaWWWLynx
Mosaic (later Netscape): first web browser with multimedia support
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
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).
Digital Media: Communication and Design F2007
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%
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
(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
Digital Media: Communication and Design F2007
INDEX
Teachers Communication in the course Recommended literature Structure of the course History of the World Wide Web Basic design principles
Digital Media: Communication and Design F2007
Design principles (2)
Keep content and presentation apart
Make sure you can make changes
Digital Media: Communication and Design F2007
Design principles (3)
Designers aren’t good testers
Test with external users
Digital Media: Communication and Design F2007
Design principles (5)
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
Digital Media: Communication and Design F2007
Design principles (6)
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%
Digital Media: Communication and Design F2007
Design principles (8)
Design on paper before starting to code