Transcript 1. Intro to Web Design student version

ONLY TAKE DOWN NOTES ON INDICATED SLIDES
Website Design, Development and Maintenance
Website Design
What you will learn from this Unit
1
The Design Process
2
Graphic Design
3
Information Design
4
Interface Design
5
HTML and Graphics Production
6
Programming and Scripting
7
Multimedia
What is the
purpose of a
website?
What makes a
website
GOOD?
Website Design
• We will focus our attention in these areas: (the basics of
websites)
–
–
–
–
–
–
Graphic Design
Information Design
Interface Design
HTML and Graphics Production
Programming and Scripting
Multimedia
The Design Process
•
•
•
•
Plan
Design
Develop
Evaluate
Graphic Design
• The Web is a visual medium so you must
pay attention to the visual presentation
which is everything you see on the page
including:
•
•
•
•
Graphics
Colour
Layout
Typography
Information Design
• Information Design is an often overlooked
area of Web design that includes the
organization of the content and how you
get to it.
Interface Design
COPY
• This area of Web design focuses on how
the page "works" rather than how it looks,
focusing on methods for doing things
including:
• Buttons
• Links
• Navigation devices
How these three interact
HTML and Graphics Production
• A fair amount of the Web
design process involves the
creation of the HTML
documents that make up a
Web site.
• Graphics need to be
produced in a way that is
optimized for Web delivery.
Programming and Scripting
• Producing dynamic Web pages requires
programming skills for writing scripts, programs,
applications and for working with databases and
servers.
The Internet
vs.
The World Wide Web
The Internet
COPY
• Any time you connect two or
more computers together so
that they can share resources,
you have a computer network.
• Connect two or more networks
together and you have an
internet.
The Internet
COPY
• The Internet is a massive network of networks. It
connects millions of computers together globally, forming
a network in which any computer can communicate with
any other computer as long as they are both connected
to the Internet.
• Information that travels over the Internet does so via a
variety of languages known as protocols such as:
• HTTP (Hypertext Transfer Protocol)
• SMTP (Simple Mail Transfer Protocol)
• FTP (File Transfer Protocol)
The World Wide Web
COPY pt 1&2
• The World Wide Web, simply known as the
Web, is a way of accessing information
over the medium of the Internet.
– It is an information-sharing model that is built
on top of the Internet.
• Uses the HTTP protocol to transmit data.
• The http protocol is only one of the many
languages spoken over the Internet.
The Web
• The Web also makes use of browsers
such as Firefox and Google Chrome to
access Web pages.
• These Web pages are linked to each other
via hyperlinks. Web documents can also
contain graphics, sound, text and video.
The Web
Continued
• It is the millions of hypertext documents and
their links that form the huge "web" of connected
information that we refer to as "the Web".
The Web
The Web has been described by the experts as:
• Interactive, which means:
• Being able to "talk back to the Web server"
• Selecting a link and jumping to another page somewhere else
on the Web
• Being able to communicate with the publisher of the pages you
are visiting and with other readers of those pages
• Dynamic, which means:
• The information that is on the Web can be updated at any time.
• Once updated, users do not have to install a new version or call
technical support to get the updated information.
The Web
The Web has been described by the experts as:
• Cross-platform, which means:
• If you can access the Internet, you can access the World
Wide Web, regardless of the type of computer you have.
• Global and Distributed, which means:
• Information is distributed globally across thousands of Web
sites.
The Web
The Web has been described by the experts as:
• Graphical & easy to navigate, which means:
• Both text and graphics can be displayed in full colour on the
same page.
• Web browsers provide capabilities for graphics, sound, video,
multimedia and embedded applications to be incorporated with
the text.
• Users can easily navigate, jumping from link to link, from page to
page, across Web sites and servers using an easy-to-use
browser interface.
The Anatomy of a Website
Servers
• A Web site resides on a Web server.
• The server is responsible for replying to Web
browser requests for files.
• You need a Web server to publish documents
on the Web.
URL
Uniform Resource Locator
• A URL is a pointer (address) to a specific bit
of information on the Internet.
• URLs contain information about:
• Which protocol to use to find the information (for
example, FTP, HTTP, HTTPS).
• The host name to show how to get to the information
(for example, http://www.nhl.com/schedules/index.html)
• The directory or other location on the host site to look in
to find the specific file that contains the information.
URL
Understanding Parts of the URL
• A complete URL is generally made up of four components and
appears in the following format:
•
•
•
•
protocol - identifies the type of file transfer used
domain_name - identifies the web server to connect to
directory_name - specifies the directories to look into find the file
file_name - the name of the file that will be displayed
Pieces of the URL
Let's look at a real example:
http://www.nba.com/news/nbadaily.html
• http://
– The type of protocol that will be used for the transfer of the
information
• www.nba.com
– The domain name that identifies the server that must be
connected to, to retrieve the requested information
• /news/
– The pathname that specifies the directory on the server that
contains the information you have requested
• nbadaily.html
– The name of the file that you have requested
– It is this file that will be displayed by your browser.
URL
The Hidden Index file
• HTTP is implied so it is left out.
• Index.html is another implied part of a URL
• This means that if you type in www.sony.com, the
browser will try to retrieve the document
www.sony.com/index.html.
– Naming the top-level document in your directory "index.html" will
allow you to keep your URL simple.
A Webpage
The breakdown
• You view this page as one, complete page.
However, it is actually made up of two
separate files:
A Webpage
Source Files & Graphics
• A source file otherwise known as an HTML document
(in this case, called TheBasicPage.html)
• A graphic file (in this case, a gif image called
BasicPage.gif)
• The browser brings these two separate elements
together in the window.
HTML
Hyper Text Markup Language
• This is the plain-text HTML document that makes up our
sample Web page.
• It contains the text content of the page and codes (tags),
indicated by the angle brackets < and >. They explain
how the text is to be displayed, where the graphics
should go and where links occur!
Meta Tags
• <META NAME=xxxx> Meta tags are optional.
They allow search engines to determine the
DESCRIPTION and KEYWORDS of your
document.
– the tag itself doesn't end with </META> like other tags
Browsers
• The browser reads
through the HTML
document file and
displays the text and
images as it encounters
them. Think of the
images and text as
"individuals waiting in a
line-up".
How the site gets on your Screen
• The user requests a Web page by typing the URL into
the browser, or by clicking a link.
• The browser contacts the Web server indicated in the
URL and requests a specific file.
• If no file name is specified, the server will look for a
default index.html file.
• The Web server searches for the file and returns it.
• The browser displays the file in its window or, if file
cannot be found, the browser returns a file-not-found
error.
• If the page contains graphics, the browser again
contacts the Web server to obtain each graphic.
The User Factors
•
•
•
•
•
•
Platform
Window size/monitor resolution
Connection speed
Color support
Font support
Individual preferences
The Browser Factors
• The World Wide Web Consortium (W3C),
is an organization that monitors and
guides the development of the Web. It has
set standards for how the Web should
work. These standards include the
smallest details of HTML and how
browsers should interpret them.
Web Design Evaluation
Assignment
• What are some of the things that make a
website good?
• What are some of the things that make a
website bad?
Poor Websites
• http://www.manolith.com/2009/08/25/worst
-website-designs/