Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009.
-
Upload
benedict-thomas -
Category
Documents
-
view
219 -
download
4
Transcript of Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009.
![Page 1: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/1.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/2.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/3.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/4.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/5.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/6.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/7.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/8.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/9.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/10.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/11.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/12.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/13.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/14.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/15.jpg)
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.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/16.jpg)
Bina Nusantara
![Page 17: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/17.jpg)
Bina Nusantara
![Page 18: Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009.](https://reader036.fdocuments.in/reader036/viewer/2022062519/5697c0071a28abf838cc5dba/html5/thumbnails/18.jpg)
Bina Nusantara