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 Creating web pages, in easy steps publ.: Nick Vandome, ISBN I The complete web building handbook: Future publ., Web design start here, Nick Nettleton and others, Ilex,

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 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 Deals with flowchart, diagrams, HTML production Tagging language for web documents Creation and troubleshooting of the HTML documentsProgramming For advanced web functionality 1. Additional programming skills for writing scripts, programmes and applications and for working with database, servers etc.Multimedia Adding multimedia 1. Incorporating sound, video, animation and interactivity 2. Requires an authoring tool, I.e. Director, Flash 3. 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: 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. Web Developers’ Virtual Library: WDVL.com/Internet/History 2. W3C’s History Archives:

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. 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 Get into web mode Asking to address a web server Specifying path through Dir: to a specific file Shortcuts Consider, for example the simplified URL: The full address should be read as: Here; 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