Web Page Design Basics
INTERNET BASICS
USES FOR THE INTERNET
TEACH-ICT.COM
TYPES OF INTERNET CONNECTIONS
Connections Link
WEB ADDRESSES
http://www.nypl.org/sitemap/index.html
Let's study more closely what the parts of this string indicate.
The parts of the URL:
http Protocol used in the communication between the browser and the web server.
'Protocol' is a set of rules a browser and a web server use to communicate with and understand each other.
: Colon simply separates the protocol from the other part of the web address.
// Indicates that a contact to a server is to be achieved. (For example, when sending email the notation 'mailto:<email address>...', without slashes, could be used). Note that this doesn't mean a connection between a browser and server. When a browser has sent a request, there is no connection between the browser and the server. (You can read more about how the web actually works here.)
www Name of a server listening to messages using the http protocol. Note that this name is not always shown in the URL in the Location Box. And the name can be something other than 'www'.
nypl.org Name of the domain where the web server belongs. Domain is like an address by which you can get to some specific 'area' on the Net. For example, the domain name 'nypl.org' is registered to The New York Public Library and there are probably several server programs in that domain each dedicated to different tasks.
www.nypl.org
This part of the URL is actually the name of the web server seen over the Internet. In other words, it's the server that hosts the web site of The New York Public Library. By using it the request a browser sends can be directed to the right web server.
You may wonder how a request can be directed to the right server if the name is not shown in the URL. In fact, the sequence is such that a request is first directed to the domain and then in the domain the right server is found. In the domain an http request goes to the server that is listening to messages using the http protocol.
/ Indicates the root folder of the folder system hosted by
the web server www.nypl.org.
sitemap/ Indicates a folder in the root folder.
index.html The name of the document file requested.
Note that though there is a URL seen on the Location Box, the browser doesn't have a direct connection to a folder and a document file there on the disk of the server machine. It is always the web server that fetches the document and sends it to the browser. So nothing can be 'disturbed' on a web server by using a browser.
In folders hosted by a web server there is usually a file which is returned in case only the name of the folder is given. (For example, you can try what happens when you type 'nypl.org/sitemap/' on the Location Box and press Enter.) This specific default page can be named in several ways:
· index.htm
· Index.htm
· index.html
· Index.html
· default.html
· default.asp
· etc.
However, the name doesn't make a difference; a default page is shown if no other file is mentioned after the name of a folder.
You can study these things yourself by trying different URLs.
Guide Link
TARGET AUDIENCE
The people your web site is design for viewing or use. You must remember to address your specific audience in design, layout, color, and concept when creating a web site.
WORK SHEET ON CREATING A WEB SITE:
WEB DESIGN
DEVELOPMENT
The phases of web development are: PLANNING, ANALYSISING, DESIGN AND DEVELOPMENT, TESTING, IMPLEMENTING AND MAINTAINING.
Planning: consist of asking the questions:
What is the purpose of the site?
Who will use the site?
What are the users' computing environment?
Who owns and authors the information on the site?
Who decides if/where the information goes on the site?
Analysis: consist of asking and examining what you need or know.
What tasks does the users need to perform?
What information is useful to the users?
What process consideration must be made?
Design and Development: the actual creation of your web
How will the page be organized?
What type of site structure is good for the content?
What type of multimedia will be used?
How will accessibility issues be addressed?
Do we need consider international audiences?
Testing: examining the site to make sure it works.
Is the site content correct?
Does the site work correctly?
Are users able to find information easy?
Is the navigation easy to use?
IMPLEMENTATION AND MAINTENANCE
How is the site published?
How is the site updated?
Who updates the site?
How do you notify users of updates?
Is the site monitored?
SITE DESIGN
Linear: X -X -X
Hierarchical: X
X X
XXXXX
XXXXXXXX
Webbed: S
SSS
S
Broad: X
xxxxxxxxxx
Deep: X
X X
X X
XX
- AVI - (Audio Video Interleaved) A Microsoft Corporation multimedia video format. It uses waveform audio and digital video frames (bitmaps) to compress animation.
- Bandwidth - The capacity of an electronic line, such as a communications network or computer channel, to transmit bits per second (bps).
- Bitmap - A representation, consisting of rows and columns of dots, of a graphics image in computer memory. The value of each dot (whether it is filled in or not) is stored in one or more bits of data. For simple monochrome images, one bit is sufficient to represent each dot, but for colors and shades of gray, each dot requires more than one bit of data. See more graphics formats
- Bits and bytes - Bit stands for binary digit: 0 or 1
- A byte is made up of 8 bits
- It takes 1 byte to store one ASCII character ASCII stands for the American Standard Code for Information Interchange
- The combination of bits (which makes up one byte) below represents the letters below
A 0100 0001
B 0100 0010
C 0100 0011 - K stands for kilo and = 1024 (2 to the tenth power)
- M stands for mega. A MB, megabyte is about a million bytes (1024x1024)
- G stands for giga. A GB, gigabyte is about a billion bytes (1024x1024x1024)
- T stands for tera. A TB, terabyte is about a trillion!
- RAM is usually measured in MB
- Hard disk spaces is usually measured in gigabytes
- Blog - A blog is information that is instantly published to a Web site. Blog scripting allows someone to automatically post information to a Web site. The information first goes to a blogger Web site. Then the information is automatically inserted into a template tailored for your Web site.
- Bookmark - a way of storing your favorite sites on the Internet. Browsers like Netscape or Internet Explorer let you to categorize your bookmarks into folders.
- Boolean logic - a type of logic (using AND, OR, NOT operators, for example) used by search engines to find information on the Internet and in electronic databases. (For example, to find computer viruses instead of human viruses, you might try the keywords "computers and viruses.")
- Browser - A software program that allows users to access the Internet.
Examples:
Non-graphical a user interface for computers which allows you to read plain text, not pictures, sound, or video, on the Internet. It is strictly text based, non-Windows, and does not place high memory demands on your computer. An example is lynx .(http://lynx.browser.org/)
Graphical a user interface for computers which enables people to see color, graphics, and hear sound and see video, available on Internet sites. These features are usually designated by underlined text, a change of color, or other distinguishing feature; sometimes the link is not obvious, for example, a picture with no designated characteristic. Examples are Netscape and Internet Explorer. - CGI (Common Gateway Interface script) - a specificiation for transferring information between a Web server and a CGI program, designed to receive and and return data. The script can use a variety of languages such as C, Perl, Java, or Visual Basic. Many html pages that contain forms use a cgi program to process the data submitted by users/clients.
- Chat - real-time, synchronous, text-based communication via computer.
- Cookie - Information (in this case URLs, Web addresses) created by a Web server and stored on a user's computer. This information lets Web sites the user visits to keep of a user's browsing pattterns and preferences. People can set up their browsers to accept or not accept cookies.
- Cyberculture - "a collection of cultures and cultural products that exist on and/or are made possible by the Internet, along with the stories told about these cultures and cultural products." David Silver, "Introducing Cyberculture," Resource Center for Cyberculture Studies: http://www.com.washington.edu/rccs/ [last accessed11/24/2001].
- Digit - A single character in a numbering system. In decimal, digits are 0 through 9. In binary, digits are 0 and 1. The os and 1s equate to "on and off functions. Digitization allows for perfect copying. When text, music, voice and video are in digitized, they can be electronically manipulated, preserved and regenerated without degredation of quality at high speed. Each copy of a computer file is exactly the same as the original. See more comprehensive definitions.
- Domain Name - A method of identifying computer addresses. Your e-mail address has a domain address. If you have an "edu" at the end of your e-mail address that means your account is affiliated with an educational institution. A "com" extension means you have a business account. A government account has a .gov suffix.
- dpi - (dots per inch) the way the resolution of display and printing is measured.
- FAQs - Frequently Asked Questions. A list of questions and answers to explain products and troubleshoot problems.
- Firewall - The name "firewall" derives from the term for a barrier that prevents fires from spreading. A computer "firewall" is a barrier between your computer and the outside world. Just like a fire is most likely to
- spread through open doors in a building, your computer is most vulnerable at its ports (the doors). Without ports you could not go on the Internet or let Internet traffic enter your computer.
- An effective software firewall isolates your computer from the Internet using a code that sets up a blockade to inspect each packet of data, from or to your computer — to determine whether it should be allowed to pass or be blocked.
- Firewall software operates in various ways: Packet filters block traffic from IP addresses and/or port numbers. Proxy servers can break the connection between two networks. NATs (Network Address Translators) hides the IP addresses of client stations by presenting one IP address to the "outside" world. Stateful inspection verifies inbound and outbound traffic to be sure the destination and the source are correct. Firewall software can allow your computer to operate in stealth mode, so that its IP address is not visible.
- Flash - Animation software used to develop interactive graphics for Web sites as well as desktop presentations and games (Windows and Mac) by the company Macromedia. Flash on the Web is displayed by a browser plug-in. Non-Web presentations are run by a Flash player, included on a floppy or CD-ROM. Flashcan be used to create vector-based graphics in one or more timelines that provide a sequential path for actions.
- FTP - Using file transfer protocol software to receive from upload) or send to (download) files (text, pictures, spreadsheets, etc.) from one computer/server to another.
- .gif - (graphic interchange format) the usual format for a graphic that is not a photo. Animated gif files are embedded with coding that creates movement when the graphic is activated. See more graphics formats
- Home page - Generally the first page retrieved when accessing a Web site. Usually a "home" page acts as the starting point for a user to access information on the site. The "home" page usually has some type of table of contents for the rest of the site information or other materials. When creating Web pages, the "home" page has the filename "index.html," which is the default name. The "index" page automatically opens up as the "home" page.
- HTML - A type of text code in Hypertext Markup Language which, when embedded in a document, allows that document to be read and distributed across the Internet.
- HTTP - The hypertext transfer protocol (http) that enables html documents to be read on the Internet.
- Hypertext - Text that is non-sequential, produced by writing in HTML (Hypertext Markup Language) language. This HTML coding allows the information (text, graphics, sound, video) to be accessed using HTTP (Hypertext Transfer Protocol).
- Hyperlink - Text, images, graphics that, when clicked with a mouse (or activated by keystrokes) will connect the user to a new Web site. The link is usually obvious, such as underlined text or a "button" of some type, but not always.
- Instant Messaging (IM) - a text-based computer conference over the Internet between two or more people who must be online at the same time. When you send an IM the receiver is instantly notified that she/he has a message.
- Interlaced - A graphics formatting technique that causes an image to gradually appear on your screen instead of appearing all at once. The image appears blurry at first and is replaced by successive waves of bit streams that gradually fill in the missing lines until the image fully appears in full resolution. This gradually rendering of the image is helpful for Web users who have slow modems and connections, since this technique allows the viewer to see enough of the image to decide whether or not to continue loading it. For fast connections, there is no discernible difference.
- Internet - A global network of thousands of computer networks linked by data lines and wireless systems.
- [Background history on the Internet -The Internet, originally the ARPAnet (Advanced Research Projects Agency network), began as a military computer network in 1969. Other government agencies and universities created internal networks based on the ARPAnet model. The catalyst for the Internet today was provided by the National Science Foundation (NSF). Rather than have a physical communications connection from each institution to a supercomputing center, the NSF began a "chain" of connections in which institutions would be connected to their "neighbor" computing centers, which all tied into central supercomputing centers. This beginning expanded to a global network of computer networks, which allows computers all over the world to communicate with one another and share information stored at various computer "servers," either on a local computer or a computer located anywhere in the world. The Internet is not governed by any official body, but there are organizations which work to make the Internet more accessible and useful.]
- IP Address - (Internet Protocol) The number or name of the computer from which you send and receive information on the Internet.
- JAVA - a computer language, developed by Sun Microsystems, that lets you encode applications, such as animated objects or computer programs, on the Internet
- Javascript - A Web scripting language developed by Netscape. It was developed independently of the full JAVA language and is an "open" language, free for anyone to use and adapt. For example, The Java Script Source has many scripts people can adapt for their own purposes.
- .jpg (or jpeg)- (joint photographic expert group) a file format for photographs on Web pages. The "jpg" format compresses large photo files so they don't take up as many kilobytes of memory. See more graphics formats
- Listserv - An e-mail list of e-mail addresses of people with common interests. Software enables people who belong to a list to send messages to the group without typing a series of addresses into the message header. Usually members of the group in the listserv have to subscribe to the mailing list.
- Modem - A device that connects your computer to the Internet, when you are not connected via a LAN (local area network, such as at work or on a campus.) Most people connect to a modem when using a home computer. The modem translates computer signals to analog signals which are sent via phone lines. The telephone "speaks" to the computer/server which provides your Internet access.
- MPEG - (Short for: Moving Picture Experts Group).
MPEG-1 Format for compressing video with audio for playback from storage media with low data transfer rates such as CDROMs or over the network at VHS quality.
MPEG-2 Format for compressing video with audio at broadcast quality resolution for playback in higher data transfer rate environments. Usually used for real-time encoding in the professional market, satellite digital television (DirecTV, USSB), and for DVDs and other types of video CDs. - MP3 Format for compressing audio only defined in both MPEG-1 and MPEG-2. Commonly used for digital music played on personal computers
- MPEG Layer 3(MP3 songs) but also targeted at applications such as digital phones and new hardware MP3 players intended as discman or car CD player replacements.
- Multimedia - The Web's integration of audio, video, graphics and text.
- Newsgroup - An Internet "site" centered around a specific topic or course. Some newsreader software can "thread" discussion so there can be various topics centered around a central theme. An advantage over e-mail is that the messages are archived and don't reside in your e-mail account, taking up your memory, unless you set up a "sent mail" or "carbon copy" option. The messages can often be threaded according to a particular discussion.
- PHP - (Hypertext Preprocessor) open source, server-side HTML scripting languaage used to create dynamic Web pages. PHP is embedded within tags, so the author authorr can move between HTML and PHP instead of using large amounts of code. Because PHP is executed on the server, the viewer cannot see the code. PHP can perform the same tasks as a CGI program can do and is compatible with many different kinds of databases.
- Portal - A Web site "gateway" that provides multiple services, which could include Web searching capability, news, free-email, discussion groups, online shopping, references and other services. A more recent trend is to use the same term for sites that offer services to customers of particular industries, such as a Web-based bank "portal," on which customers can access their checking, savings and investment accounts.
- RSS - (Rich Site Summary or RDF [Resource Description Framework] Site Summary). An XML format for sharing content among different Web sites such as news items. How does it work? A Web site can allow other sites to publish some of its content by creating an RSS document and registers the document with an RSS publisher. A web publisher can post a link to the rss feed so users can read the distributed content on his/her site. Syndicated contentcan can include news feeds, listings of events, stories, headlines, etc.
- Search Engine - specialized software, such as AltaVista and Yahoo, that lets WWW browser users search for information on the Web by using keywords, phrases, and boolean logic. Different search engines have different ways of categorizing and indexing information. Search engines are accessed by typing in the URL of that engine or using a browser's compilation of search engines in its Internet search function.
- Shockwave - A three dimensional (3D) animation technology/format creataed by the Macromedia company. Macromedia Director producess Shockwave files, which can be viewed through a Shockwave player, a browser"plug-in" computer program or other multimedia applications that access the player. Shockwave can be used to create more sophisticated animations than the Macromedia Flash format. Shockwave uses the .dir file extension for source files and .dcr extension for Shockwave "movies."
- Telnet - The command to log on to another computer on the Internet.
- URL - A universal resource locator (a computer address) that identifies the location and type of resource on the Web. A URL generally starts with "http."
- Vector - A line in computer graphics designated by its end points (x-y or x-y-z coordinates). A vector layer does not use pixels for storing image information. Instead, it stores a vector object as a set of properties that describe its attributes, dimensions, and position in the image. Each time an image is opened, these properties are used as instructions for drawing the objects. Because the objects are independent elements, you can move them without affecting the rest of the image.
- Virtual Community - a term commonly used to describe a group of people who exchange ideas through computer networks, listservs, newsgroups, and Web-based bulletin boards. They might not ever meet face-to-face. Generally these people meet over the long-term, on a regular basis, and share their ideas about a variety of subjects, depending upon their special interest. The discussions could relate to hobbies, music, health, self help issues, and professional and scholarly activities.
- Virus - a computer program usually hidden in an existing program. Once the existing program is executed, the virus program is activated and can attach itself to other programs or files. Viruses can range from benign activities such as attaching a harmless message to performing malicious activities such as destroying all the data on a computer hard drive. Viruses are commonly distributed as e-mail attachments which activate when the attachment is opened. Virus protection software, updated regularly with the latest virus definitions, can help protect computers from viruses.
- Web Bot - A term that applies to programs/applets (macros and intelligent agents) used on the Internet. Such bots perform a repetitive function, such as posting messages to multiple newsgroups or doing searches for information.
- Wide World Web (WWW) - A hypermedia information storage system which links computer-based resources around the world. Computer programs called Browsers enable words or icons called hyperlinks to display, text, video, graphics and sound on a computer screen. The source of the material is at a different location - a different file in the same directory, a file in another computer, which can be located anywhere in the world.
- WORM - A destructive computer program that replicates itself throughout your computer's hard drive and and memory. Worms use up the computers resources and pull the system down. Worms can be spread in mass-e-mailing if the user opens an attachment.
- (2) A program that moves through a network and deposits information at each node for diagnostic purposes or causes idle computers to share some of the processing workload.
- XML (Extensible Markup Language) - is a less robust variety of SGML, a system for organizing and tagging elements of a document so that the document can be transmitted and interpreted between applications and organizations. Human readable XML tags defines "what it is," and HTML defines "how it looks." XML allows designers to create their own tags. For example:
- HTML
<font size="2">Jane Doe</font>
<b>March 27, 1975</b>
XML
<firstName>Jane</firstName>
<lastName>Doe</lastName>
<dateBirth>03-27-75</dateBirth> - In the HTML version the tags identify formatting options, such as font size and bold. In the XML example, the tags identify the content.
- Because XML can support business-to-business transactions by making the transmission and interpretation of data easier, it has the potential to become the standard for the exchange of data over the Internet.
USES FOR THE INTERNET
- Research and Homework
- Communication
Email
Blogs
Social Networking Sites
Chat-rooms
Forums
VOIP - Shopping
- Leisure and Entertainment
- Exploring the World
TEACH-ICT.COM
TYPES OF INTERNET CONNECTIONS
- Dial Up
- Broadband
- Fixed Broadband
- Fixed Wireless and Satellite
- Mobile Broadband
- Mobile Phone
- Wireless Hotspots
Connections Link
WEB ADDRESSES
http://www.nypl.org/sitemap/index.html
Let's study more closely what the parts of this string indicate.
The parts of the URL:
http Protocol used in the communication between the browser and the web server.
'Protocol' is a set of rules a browser and a web server use to communicate with and understand each other.
: Colon simply separates the protocol from the other part of the web address.
// Indicates that a contact to a server is to be achieved. (For example, when sending email the notation 'mailto:<email address>...', without slashes, could be used). Note that this doesn't mean a connection between a browser and server. When a browser has sent a request, there is no connection between the browser and the server. (You can read more about how the web actually works here.)
www Name of a server listening to messages using the http protocol. Note that this name is not always shown in the URL in the Location Box. And the name can be something other than 'www'.
nypl.org Name of the domain where the web server belongs. Domain is like an address by which you can get to some specific 'area' on the Net. For example, the domain name 'nypl.org' is registered to The New York Public Library and there are probably several server programs in that domain each dedicated to different tasks.
www.nypl.org
This part of the URL is actually the name of the web server seen over the Internet. In other words, it's the server that hosts the web site of The New York Public Library. By using it the request a browser sends can be directed to the right web server.
You may wonder how a request can be directed to the right server if the name is not shown in the URL. In fact, the sequence is such that a request is first directed to the domain and then in the domain the right server is found. In the domain an http request goes to the server that is listening to messages using the http protocol.
/ Indicates the root folder of the folder system hosted by
the web server www.nypl.org.
sitemap/ Indicates a folder in the root folder.
index.html The name of the document file requested.
Note that though there is a URL seen on the Location Box, the browser doesn't have a direct connection to a folder and a document file there on the disk of the server machine. It is always the web server that fetches the document and sends it to the browser. So nothing can be 'disturbed' on a web server by using a browser.
In folders hosted by a web server there is usually a file which is returned in case only the name of the folder is given. (For example, you can try what happens when you type 'nypl.org/sitemap/' on the Location Box and press Enter.) This specific default page can be named in several ways:
· index.htm
· Index.htm
· index.html
· Index.html
· default.html
· default.asp
· etc.
However, the name doesn't make a difference; a default page is shown if no other file is mentioned after the name of a folder.
You can study these things yourself by trying different URLs.
Guide Link
TARGET AUDIENCE
The people your web site is design for viewing or use. You must remember to address your specific audience in design, layout, color, and concept when creating a web site.
WORK SHEET ON CREATING A WEB SITE:
WEB DESIGN
DEVELOPMENT
The phases of web development are: PLANNING, ANALYSISING, DESIGN AND DEVELOPMENT, TESTING, IMPLEMENTING AND MAINTAINING.
Planning: consist of asking the questions:
What is the purpose of the site?
Who will use the site?
What are the users' computing environment?
Who owns and authors the information on the site?
Who decides if/where the information goes on the site?
Analysis: consist of asking and examining what you need or know.
What tasks does the users need to perform?
What information is useful to the users?
What process consideration must be made?
Design and Development: the actual creation of your web
How will the page be organized?
What type of site structure is good for the content?
What type of multimedia will be used?
How will accessibility issues be addressed?
Do we need consider international audiences?
Testing: examining the site to make sure it works.
Is the site content correct?
Does the site work correctly?
Are users able to find information easy?
Is the navigation easy to use?
IMPLEMENTATION AND MAINTENANCE
How is the site published?
How is the site updated?
Who updates the site?
How do you notify users of updates?
Is the site monitored?
SITE DESIGN
Linear: X -X -X
Hierarchical: X
X X
XXXXX
XXXXXXXX
Webbed: S
SSS
S
Broad: X
xxxxxxxxxx
Deep: X
X X
X X
XX
Your browser does not support viewing this document. Click here to download the document.