introduction to web session 01 subject: l0182 / web & animation design year: 2009

18
Introduction to Web Session 01 Subject : L0182 / Web & Animation Design Year : 2009

Upload: benedict-thomas

Post on 19-Jan-2016

219 views

Category:

Documents


4 download

TRANSCRIPT

Page 1: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Introduction to WebSession 01

Subject : L0182 / Web & Animation Design

Year : 2009

Page 2: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Learning Outcomes

At the end of this session, the students will be able to :• Understand the basic of a good web design

Page 3: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Course Outlines

• Hypertext and Hypermedia• User Interface• Good Interaction Design• World Wide Web• Home Page• Website• Top Ten Mistakes in Web Design• Advantages of Using Web

Page 4: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Introduction

• Hypertext was first introduced by Vannevar Bush, on July 1945, in his paper which titled “As We May Think”.

• Bush said that:– There would be information rush– Necessity to build a tool that would allow easily cross reference

inside and inter documents– The proposed information exploration tool was named Memex.

Page 5: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Hypertext and Hypermedia

• Hypertext is:– A series of text chunks connected by links which offer the reader

different pathways.

• Hypermedia is:– Derived from hypertext, extends the notion of hypertext link to

include links among any set of multimedia objects, including sound, motion video, and virtual reality.

Page 6: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Hypertext and Hypermedia

• Hypertext extends traditional linear text with:– Chance to jump to any connected articles– Easy to backtracking– index and table of content that can be click– String searching – Bookmarks (favorites)– The other navigation tools

Page 7: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Hypertext

• The first step to build an effective hypertext is to choose a project in which includes The Golden Rules of Hypertext :– There is a large body of information organized into numerous

fragments– The fragments relate to each other– The user needs only a small fraction at any time

Page 8: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

User Interface• User Interface is a linkage between a human and a device or system

that allows the human to interact with that device or system. • The user interface provides means of :

– Input, allowing the users to manipulate a system – Output, allowing the system to produce the effects of the users'

manipulation.• Currently, the following types of user interface are the most common :

– Graphical User Interface (GUI) accept input via devices such as computer keyboard and mouse and provide articulated graphical output on the computer monitor.

– Web User Interface (WUI) accept input and provide output by generating web pages which are transmitted via the Internet and viewed by the user using a web browser program.

Page 9: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Good Interaction Design

• To improve the usability of an application it is important to have a well designed interface.

• Ben Shneiderman's "Eight Golden Rules of Interface Design" :– Strive for consistency– Enable frequent users to use shortcuts– Offer informative feedback– Design dialog to yield closure– Offer simple error handling– Permit easy reversal of actions– Support internal locus of control– Reduce short-term memory load

Page 10: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Good Interaction Design

• According to Patrick Lynch, 1995– Balancing the structure and the connection between menu or

home page and the content of the page or between graphic and the linked document.

– The purpose is to build a natural and well structured menu hierarchy and pages for users, and not to divert the usage of the web site.

Page 11: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

World Wide Web

• World Wide Web (commonly shortened to the Web) is a system of interlinked hypertext documents accessed via the Internet.

• With a Web browser, a user views Web pages that may contain text, images, videos, and other multimedia and navigates between them using hyperlinks.

Page 12: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Home Page

• Home Page is the main page of a Website. • Typically, the home page serves as an index or table of

contents to other documents stored at the site.

Page 13: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Website

• Website is a site (location) on the World Wide Web.• Each Website contains a home page, which is the first

document users see when they enter the site. • The site might also contain additional documents and

files. • Each site is owned and managed by an individual,

company or organization.

Page 14: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Top Ten Mistakes in Web Design

• Jakob Nielsen's Top Ten Mistakes in Web Design (2005) :– Legibility Problems– Non-Standard Links– Flash– Content that is not Written for the Web– Bad Search– Browser Incompatibility– Cumbersome Forms– No Contact Information or Other Company Info– Frozen Layouts with Fixed Page Widths– Inadequate Photo Enlargement

Page 15: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Advantages of Using Web

• Global audience• Operates 24 hours, 7 days a week• Relatively inexpensive• Product advertising• Distribute product catalogs• Online surveys• Announcements• Online discussion forums• Obtain customer feedback• Immediate distribution of information• Multimedia• Formatting capabilities

Page 16: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Page 17: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara

Page 18: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009

Bina Nusantara