Pyromania: HISTORical MuSeuM: WDS lecture notes

Since I compiled the INCG lecture slides, I might as well do the same for WDS.

Development of Internet & Multimedia Information Technologies

Introduction to the Internet
- The Internet is the most popular and fast growing area in computing today.
- Using the Internet, you can do research, shop for services and merchandise, job hunt, buy and sell stocks, obtain medical advice, watch movies, listen to “live” radio and converse with people worldwide.
- More than 170 million people in over 150 countries throughout the world use the Internet today.
- The Internet is a worldwide collection of networks.
- A network is composed of several computers connected together to share resources and data.
How the Internet Started...
- The Internet was created by combining the ideas and talents of many people. Organizations and individuals have worked together for many years to make the Internet the valuable resource it is today.
- ARPANET
  - In the late In the late 1960s, the U.S. Defense Department created a network that linked military computers together.
  - The network, called ARPANET, was connected in a way that ensured if one section of the network was damages, the remaining computers on the network would still be able to communicate with each other.
- NSFNET
  - The National Science Foundation created NSFNET in the mid-1980s. NSFNET used the technology developed for APRANET to allow universities and schools to connect to each other.
  - By 1987, NSFNET could not hold the amount of information that was being transferred.
  - The NSF improved the network to allow more information to transfer. This improved, thus the high-speed network became the Internet.
- Public Access
  - In the 1980, most people accessing the Internet were scientists and researchers.
  - In the early 90s, many companies started to offer access to home users. This allowed anyone with a modem and a computer to access the Internet.
- World Wide Web (WWW)
  - The World Wide Web (WWW) was created in the early 1990s by the European Laboratory for the Particle Physics.
  - The goal of the World Wide Web was to allow researchers to work together on projects and to make projects information easily accessible.
  - The first publicly accessible website was created in 1991.
- Commercial Sites
  - By mid-1990s, over 30 million people access to the Internet.
  - To reach this huge market, most big companies created their own sites on the World Wide Web to sell or provide information about their products.
  - There are now thousands of companies on the Web.
- How the Internet has grown
  - 1969
    Four host nodes
  - 1984
    More than 1,000 host nodes
  - Today
    More than 150 million host nodes
- Who controls the Internet?
  - Nobody. The Internet is a public, cooperative, and independent network.
  - Several organizations set standards.
    - World Wide Web Consortium (W3C)
      - Oversees research, sets standards and guidelines
      - Tim Berners-Lee, director
    - Internet2 (I2)
      - Internet-related research and development project
      - Develops and tests advanced Internet technologies
The Internet and World Wide Web (WWW)
- The World Wide Web is part of the Internet. The Web consists of a huge collection of documents stored on computers around the world!
- The Internet is a network of computers all over the world.
- There are several parts to the internet, including newsgroups, mailing lists, and the most popular (and fun) of all, the World Wide Web (WWW).
- The WWW consists of millions of individual pages. A related collection of these pages is called a web site
- The first page of a web site is usually the home page.
- Services found on the Internet...
  - Email
  - Web
  - File Transfer
  - Chat
  - Message Board
  - Instant Messaging
- URL (Uniform Resource Locator)
  - Each web page has a unique address, called a URL. You can instantly display any web page if you know its URL.
  - A web page URL usually starts with http (HyperText transfer Protocol) and contains the computer name, directory name and name of web page.
  - They can be in the form of a HTTP, FTP or Gopher (e.g. www.tp.edu.sg and so on). Some URLs also include the directory or other location on that site to find the file.
  - There are other special URLs for things such as sending mail to people (called mailto: URLs), and for using the Telnet program.
  - The URL for an About Us page is commonly written as: http://www.companyname.com/about.html
    - The http:// is the protocol.
    - The www.companyname.com is the domain name.
    - The about.html is the path name.
- Hyperlinks
  - Web pages contain highlighted text or images, called hyperlinks, that connect to other pages on the web.
  - Hyperlinks allow you to navigate easily.
  - You can access vast amount of information by jumping from one web page to another.
- The Web is Graphical and Easy to Navigate
  - The web provides capabilities for graphics, sound, and video to be incorporated with the text, and newer software includes even more capabilities for multimedia and embedded applications.
  - More importantly, the interface to all this is easily navigable-just jump from link to link, from page to page, across sites and servers.
- The Web is Cross-Platform
  - You can access the World Wide Web either on a low-end PC, a fancy expensive graphics workstation, or a multimillion-dollar mainframe.
  - The World Wide Web is not limited to any one kind of machine, or developed by any company. The web is entirely cross-platform.
  - Cross-platform means that you can access web information equally well from any computer hardware running any operating system using any display.
What is Web Publishing?
- Basically, it is a set of HTML pages on the WWW.
- Web pages are like multimedia canvas on which it can display text, images (still or animated), audio and video files.
- It allows users to interact with it in a variety of ways.
Web Browser
- A web browser is a computer program that is used to access the web (to view webpages).
- A browser may also be used to download files, send and receive e-mail or short messages across the internet.
- Commonly-used browsers include:
  - Mozilla Firefox (FF)
  - Microsoft Internet Explorer (IE)
  - Netscape Navigator (NN)
  - Opera
Web Browser Server
- A web server is the program that runs on a web site and is responsible for replying to web browser requests for files.
- You need a web server to publish documents on the web.
Anatomy of a Web Presentation
- It is important to know what the following terms meant and how they apply to the body of work while developing pages for the web:
- Web presentation is a collection of one or more web pages
- Web site is a system on the internet containing one or more web presentations
- Web page is a single element of a web presentation and is contained in a single disk file
- The home page is the entry or starting point for the rest of your web presentation
Content on the Web
- It includes graphics, media, text, interactive forms, diagrams or even games.
- If you are describing to someone about your personal web site, the content would be about you.
World Wide Web (WWW)
- What are the eight basic types of web sites?
  - Portal
  - News
  - Informational
  - Business / Marketing
  - Educational
  - Entertainment
  - Advocacy
  - Personal
- What are plug-ins?
  - Programs that extend the capability of a browser.
  - You can download many plug-ins at no cost from various web sites.
Print vs Web Publishing
- The web is a unique communication and publishing medium.
- Many traditional media companies use the web to expand their reach. For example, The Straits Times who publish a daily online version.
Benefits of Publishing on the Web
- Anywhere - Global Access
- Anything - Entire web as information space
- Anytime - 24 hour access
- Cross Platform
- Web Browser as Multimedia Application Shell
- Low-cost production compared to print publishing
- Easy and instant updates
Limitations of Publishing on the Web
- Lack of context
- Reading from a computer
- Limited attention span
- Limitations of HTML
- User hardware and software limitations
- Security

Web Design with CSS

Advantages of using Tables for Web Pages
- Every mainstream web browser supports tables.
- Simple table layouts are easy to learn and implement if you already understand HTML.
- Great for displaying tabular data
Disadvantages of using Tables for Web Pages
- Redesigns of existing sites and content extremely labor intensive (and expensive).
- It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.
- Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.
- Complex nested tables are error-prone due to the large amount of HTML code that must be used.
- Tracking down bugs in nested table layouts can be very difficult.
- The size of the HTML the client must download can get very large.
- Large, complex nested table designs take longer for the browser to render.
- Mixes presentational data in with your content.
Advantages of using CSS for Web Pages
- The HTML the client is required to download is smaller, improving page load times = make your pages load faster
- You can truly separate presentation from content. The entire look of your site can be changed by applying a different style sheet (think, cell phone browser, text-only browser, screen reader applications).
- Makes your redesigns more efficient and less expensive
- Site maintenance becomes much easier, as the HTML is much less complex and easier to debug.
- Helps you maintain visual consistency throughout your webpages
- Gets you better search engine results
- Makes your sites more accessible to all viewers and user agents
- Gives you a competitive edge (that is, job security) as more of the world moves to using Web standards.
Disadvantages of using CSS for Web Pages
- There are several browsers that support CSS, some better than others, but not every browser does.
- CSS is harder to learn than straight HTML.

Proposal Writing & Sourcing for Materials

Web Development Process
1. Define
  - Goals and Objectives
  - Target Audience
  - Focus and Scope of Content
2. Structure
  - Navigation Diagram
3. Design
  - Design Principles
  - Screen Designs
4. Build and Test
  - Production
  - Local Test
  - User Test
  - Server Test
5. Launch
  - Finished Product
  - Maintenance and User Guide
Step 1: Define
- Defining your site's goals and objectives
  - Why and what you want
  - Learning objective
- Defining your audience
  - Demographics of users
  - Talk to your users or clients
  - Target audience (age group)
  - Internet or Intranet
- Focus and scope of content
  - Understanding your subject (topic)
- Sourcing for materials and gather content
  - Without meaningful content = Empty Shell Site
  - Books
  - Magazines
  - Encyclopedias
  - Maps, charts, diagrams
  - Visual research (Photographs, Typography, Illustrations/Drawings, Paintings, Graphics etc)
Proposal
- Planning / writing proposals
  - Understand the process of writing a proposal
  - Organize a basic technical proposal
  - Have an understanding of what is required in a proposal
- Some questions to help you plan before you proceed.
  - Who are the people expected to read this proposal?
  - What do they need to see?
    (Reading a Project Brief / Client Brief)
  - How will my document be structured?
  - Where will I get my content from?
  - How long do I have to prepare my proposal
  - TIP: Remember your proposal has to be focused
- What do I need to start my proposal?
  - By now you should have all the content you need in front of you.
  - Measure the content you would need. Gather more research if needed.
  - You should also have a drafted idea of what you intend to communicate through your proposal.
  - Your content must be able to fit within the structure of your proposal
- What is the framework of your WDS Project proposal?
  - Your content must fit within this framework and must be relevant to these segments:-
  - Overview
  - Goals & Objectives
  - Focus/Scope of Content
  - Target Audience
  - Navigation Diagram
  - Screen Designs
  - Research Findings
  - Bibliography
- How do I write the content?
  - Start by writing the main facts you are trying to put across
  - Link your sentences so there is a flow/tone to the content
  - This can be done by deciding which points should come first
  - Support your statements with research findings if possible
- Example 1 – Linking Facts Into Your Writing
  - Facts:
  - Age group /Characteristic of my audience/Interest in the website
  - Linking: Target audience
  - My main target audience are teenagers between the age of 13-18.
  - A key characteristic of this demographic, is their existing knowledge of web technology.
  - Taking into consideration their exposure to existing websites, my target audience will be looking towards a highly informative and interactive website.
- Example 2 – Supporting Your Statements
  - Research
    You have a book which tells you teenagers from the age of 13 to18 prefer smaller text size.
  - E.g. According to (author’s name) teenagers from the age of 13 to 18 prefer smaller text.
  - Always ensure that the referred author is in your bibliography
- What are the common standards I must look out for in proposal writing?
  - Use readable fonts (Times New Roman or Arial), size 10 or 12 pts
  - Use proper punctuation
  - Abbreviations should only be used when or if applicable
  - Keep sentences short: split up your sentence if you find that it may be too long
  - Remove repetition in your sentence
  - You can also use bulleted points to point out facts
  - A sentence should contain a single logical thought, not a combination of many ideas
- How do I review my proposal?
  - Check the format: make sure it is prepared in the format that is to be submitted
  - Check diagrams or illustration to ensure they are relevant and all details are printed
  - Use the Spell Check available in Microsoft Word
  - Read through
  - A final review should also be done with the help of a peer (ask a friend to read through it)
  - Revisit areas to be re-written
Principles and Rules of Copyright
- What is Copyright?
  - Copyright is a bundle of rights given to the author of original works to make sure that only he or she can use and reproduce what he or she has created
  - Such works include musical works, films, sound recordings, artistic pieces etc
- What Does The © Symbol Mean?
  - The use of © symbol indicates an assertion of copyright
    e.g. © Intellectual Property Office of Singapore 2004
  - Material can be protected even if it does not display the © symbol
  - Not using the © symbol does not imply a waiver or loss of copyright
- Can Copyright Materials be used without permission?
  - No need for registration – copyright exists automatically
  - You cannot use copyright material without written permission (write or send e-mail to the author or creator for permission)
    Do not use any material until you are given the permission
  - Exceptions are allowed but only in specific instances and with the limitation that the use must constitute "fair dealing"
  - Fair dealing is when a fair and reasonable portion of the work is copied for research, private study, etc.
Proper Citation
- Any information used from magazines, books and the Internet needs to be cited in bibliography
- Citation format
  - Books
    Author’s last name, first name. Title of book. Place of publication: Publisher, copyright year.
  - Magazine
    Article author’s last name, first name. "Title or headline of article." Name of magazine or newspaper. Date of magazine or newspaper, page(s)
  - Online web pages
    Author, “Title of item”. [Online] Available http://address/filename, date of document or, if not available, date of download.
  - Online image/sound/video clip
    Description or title of images/sound/video clip. (Online Image/Sound/Video Clip). Available http://address/filename, date of document or, if not available, date of download

Defining Structure and Design

Web Development Process
1. Define
  - Goals and Objectives
  - Target Audience
  - Focus and Scope of Content
2. Structure
  - Navigation Diagram
3. Design
  - Design Principles
  - Screen Designs
4. Build and Test
  - Production
  - Local Test
  - User Test
  - Server Test
5. Launch
  - Finished Product
  - Maintenance and User Guide
Step 2: Structure/Navigation Diagram
- User-Centered Design
- Topics and Sub-Topics
- Site Map / Navigational Diagram
- Benefits of having a Structure/Navigation Diagram
- Splash Page (only if necessary)
- Home Page
- Sub Topic
- Content Pages
Step 3: Design

Techniques for Designing Web Pages

Identify page type
Sketch out page type
Create prototype
Create templates

Basically, there are four basic Design Principles and they are:

Contrast
Repetition
Alignment
Proximity

Apply these 4 Design Principles and your web pages will look clean, neat and professional.
It will communicate much clearer to your users.
Design Principle 1 - Constrast

Contrast is often the most important visual attraction on a page
It tells your eye what to look at
It helps define what's important on a page
Contrast has to be strong in order for it to be effective
Creates a hierarchy of information.
Contrast can be created by using different sizes in fonts, color contrast or even spacing within the layout

Design Principle 2 - Repetition (also known as Consistency)

Repeat the visual elements of the design throughout the site so as to maintain consistency.
Repetition helps develop the organization and strengthens the unity of a page.
Elements that can be repeated:

Logos
Color Scheme
Navigation Areas
Typeface (Fonts)
Graphics/Illustrations
Background Image

Design Principle 3 - Alignment

Every element on a page should have some visual connection with another element on the page.
Alignment creates a clean, sophisticated and fresh look.
An item can be either:
- Centered
- Left aligned
- Right aligned
Choose only ONE alignment!

Design Principle 4 - Proximity

Spacing between items on a page
Headlines close to their paragraphs
Spacing between paragraphs
Group items that belong together
When several elements are in close proximity to each other, they become one visual unit rather than several separate elements.
Proximity helps organize information and reduces clutter.

General Guidelines on Web Design

Readability
Emphasize important information first
Less is more
White space
Usability and consistency
Three clicks to anywhere
Do not make the viewer scroll sideways
Focus on good organization

Navigation Methods

Types
Buttons
Bars (groups of icons)
Text links
Image maps

Navigation with Frames

Use the same navigation system on all pages
Give visitors a clue on what page are they on (e.g. title page for each web page)
Provide more than one way to navigate
Ensure that all links are working and worth visiting
Make sure where the links are directed to are clear
Provide altenate labels for any graphical links

Don'ts in Web Design

Text in capital letters
Text that stretches from one side of the page to the other
Striking backgrounds that distract the page
Pages that says Home Page
Text that is too large or too small
Animated GIFs that don’t stop
Poorly scanned or distorted images
Scroll bars on small frames
Gray default background color
Anything that blinks
Under construction message
Counters on pages

Visual Research is important:

You will know what your subject look likes
Easier for you to draw, for your screen design
More pictures of your subject the better (different angles/perspective)
Search also for related elements relating to your subject matter
Reference on other web sites for ideas
Research on different navigation systems and design elements (e.g. buttons, icons etc)
Different styles and color used
Content Information Gathering
- Books, magazines, Internet, etc.
Images/Graphics/Illustration Information Gathering
- Digital photos: edited / enhanced / optimized
- Scanned: edited / enhanced / optimized
- Illustrations/Diagrams can be created from scratch!
Copyright issues – giving credit

Sunday, June 01, 2008

WDS lecture notes

No comments:

About Me

Links

Tagboard

Likes:

Dislikes:

Wishlist:

Schools and classes:

Blog Archive

Labels

Blog Layouts

Forum signatures

List of MSN nicks

Academic Stuff