Transcript Web Design - London South Bank University

Web Design
Lectures by
Dr. D Mukherjee
Acknowledgements
The contents of this presentation are based on published articles
and books which, among others, include:
• Learning Web Design: J. Niederst, O’Reilly publ., ISBN 0-596-00036-7
• Creating web pages, in easy steps publ.: Nick Vandome, ISBN I-84078-280-3
• The complete web building handbook: Future publ.,www.futurenet.co.uk
• Web design start here, Nick Nettleton and others, Ilex,2006.
• www.cadtutor.net/wb/ftp/wsftp/wsftp.html
Fundamental Steps


Understanding how web works
Working knowledge of:





HTML
The role of the server
Importance of the browser
Learning how to construct
Learn area/s of web design
Multiple roles of web designing
task, an analogy:
A householder





Cleaner / DIY Worker
P/T chef
Accountants
Diplomat
Gardener
A solo web designer





Writer
P/T graphic graphic
designer
Artist
Producer
Information architect
Core disciplines






Graphic design
Interface design
Information design
HTML production
Programming
Multimedia
Core disciplines
Graphic Design
How the page looks


For decisions regarding
everything in the web
page, i.e. graphics, type,
colours, layout etc.
Requires image editing
software, I.e. Adobe
Photoshop
HTML production
Tagging language for web
documents

Creation and
troubleshooting of the
HTML documents
Interface Design
How the page works


Requires buttons, links,
navigations, devices etc.as
well as functional
organisations of the page
A specialist job
Information Design
Organisation of contents

Programming
For advanced web functionality
1.
Additional programming
skills for writing scripts,
programmes and
applications and for
working with database,
servers etc.
Deals with flowchart,
diagrams,
Multimedia
Adding multimedia
1.
2.
3.
Incorporating sound, video,
animation and interactivity
Requires an authoring tool,
I.e. Director, Flash
Background in sound and
video production is useful
Web related programming
languages
In order of increasing complexity:

HTML

Style sheets

Javascript

DHTML (Dynamic)

CGI Scripting

XML (eXtensible)

Java
Requirements
Hardware:


Fast computer with enough memory and a large monitor
A scanner and/or digital camera
Software:





Web page authoring programmes, i.e.
Macromedia Dreamweaver, Adobe GoLive, MS Frontpage
HTML editors, i.e.
Allaire HomeSite (Windows), BBEdit (Mac)
Graphics Software, I.e. Photoshop, ImageReady and Illustrator by Adobe,
Macromedia Fireworks,
JASC Paint Shop Pro
Multimedia Tools, i.e.
Flash & Director by Macromedia, LiveMotion by Adobe
Internet tools, i.e.
Variety of browsers, a file transfer programme (FTP), Telnet (optional)
Learning outcomes:
•Familiarity with basic terminologies
•Understanding the role of a server
•Understanding URLs and their components
•The anatomy of a web page
•The function of a browser
Distinction between
internet and web
(often used interchangeably)
Internet:
•
A network of connected computers
•
Not owned by any company
•
A cooperative effort governed by a system of standards and rules for sharing information
•
Information exchange takes place via using one of many available modes of communication (or
protocol), including:
1. e-mail
2. file transfer (FTP), as well as
3. Outdated modes such as gopher, WAIS.
FTP requires special programs which knows the nature of the information flow
The world wide web (WWW)* or web:
It is popular because it is a visual medium combining texts and graphics in a page-like layout without the
requirement of any special coding or complex software, apart from mostly pointing and clicking.
•
It is one of the ways of sharing information.
•
It is a subset of the information on the internet
•
Its own protocol is very unique in inking documents to form a huge web of connected information
•
Linked text is known as a hypertext and the method of information transfer is known as hyper text
transfer protocol or HTTP for short.
*For the history of the web see, for example:
1.
2.
Web Developers’ Virtual Library: WDVL.com/Internet/History
W3C’s History Archives: www.w3c.org/History.html
Server & Client

Server is really the software program that allows a computer to communicate with other
computers in a network. The computer using the software is also commonly referred to as
the server. The role of the server:

Wait for a request for information

Receive and send the information back as possible
The computer as a part of the web must run a special web server software in order to
understand and speak the language of HTTP. This is why web servers are also called the
HTTP servers .
To be identified on the internet each server is assigned a unique number (its IP address)
and a corresponding name (its domain or hostname), i.e. myname.com. Machines
running web servers usually have a name starting with “www”, i.e. www.myname.com.
But this is not a must.
Client is the that software makes the request for the documents
or information. On the web, the browser is the client software.
In web design, the terms “server side” and client side
applications simply indicates which machine is doing the
processing.
The parts of a URL
URL
Protocol
Type of file transfer
used, i.e. here hyper text transfer protocol
http://
Get into web mode
Domain name
The web server to connect to:
i.e.
www.lsbu.ac
Asking to address a web server
Path name
Directories to look in for the target file
i.e.
eent3/staff/mukherd/coursemat/sem1/.....
Specifying path through Dir:
File name
The actual file to be viewed
i.e.
Website eng
to a specific file
Shortcuts
Consider, for example the simplified URL:
www.education.com
The full address should be read as:
http://www.education.com/index.html.
Here;
•
•
http:// is automatically implied.
Index.html is the file searched, if no filename is
specified in the URL.
The index file is useful for keeping URL simple (by naming the top level
document index.html) and for security (through suppressing other files in the
folder from being displayed).
The default file may also have a different name, depending on the server configuration,
such as default.html