Intro Web Design

rungabbyInternet et le développement Web

10 nov. 2013 (il y a 7 années et 10 mois)

291 vue(s)

Intro to Web Design • Spring 2012 • Bob Kiesow

Intro Web Design

71 | TR | 600PM 850PM | BOO

Bob Kiesow

The Internet, the Web, and Web Design


What is the Internet?

A global system of interconnected computer networks that use the standard Internet protocol
suite (TCP/IP) to serve billion
s of users worldwide. The network of networks

wires, circuits,
and servers for transporting data all over the world.


What is the World Wide Web?

A system of interlinked hypertext documents accessed via the Internet. Known as “the web,”
it’s only one par
t of the internet. Below is a URL.


What is
Web Design?

Web Design is the process of planning and creating websites.

Web design is the creation of digital environments that facilitate and encourage
human activity; reflect or adapt to individual voices a
nd content; and change
gracefully over time while always retaining their identity.

A List Apart


What is User Experience (UX)?

User experience is how a person feels when interfacing with a (web) system. Those who
work on UX (called UX designers) study an
d evaluate how users feel about a system, looking
at such things as ease of use, perception of the value of the system, utility, efficiency in
performing tasks, and so forth.


What is Information Architecture (IA)?

Creates a framework for the content of yo
ur project

involving an art and science of
organizing and structuring sites.

Good IA lays the necessary groundwork for an information
system that makes sense to users.


What is Content

All components used in building a website and communicating a desire
d message (words,
images, sounds, tables, videos, animations, etc.). It is strongly believed by (quality) web
design professionals that “content is king,” because, simply put, visitors come to websites
primarily to gain information.


What is
User Interfac
e (UI)?

The user interface is (a place) where interaction between humans and machines occur. The
graphical user interface (GUI), sometimes pronounced gooey, is a subset of UI. GUI take
advantage of the computer’s graphics capabilities (icons, visual indica
tors) to make the
program easier to use. Interface design is most often associated with the development of
Web pages, computer software, and multimedia.

Intro to Web Design • Spring 2012 • Bob Kiesow


What is Web Usability?

Web usability is an approach to make websites easy to use for an end
user, with
out the
requirement that any specialized training be undertaken. Site users find what they're looking
for quickly and efficiently. Web usability checklist items include: easy to navigate, pages must
download quickly, information should be easy to retrieve,


no restrictions should be
placed on users.
See checklist PDF, and Don’t Make Me Think.

Note: User experience and usability have become synonymous, but professionals see these two fields are clearly
distinct. UX addresses how a user feels when using a
system, while usability is about the user
friendliness and
efficiency of the interface.

Advanced topics to be aware of (not covered in this class):

User centered design (UCD),

computer interaction (HCI)

Human factors

Interaction design (IxD)

t strategy

Anatomy of a Usable Website

The diagram below is essentially a road
map for what a typical, usable website might contain

sheet for the pieces that any site should consider having. Of course, not all pieces are
relevant to every web

Intro to Web Design • Spring 2012 • Bob Kiesow

Intro Web Design

71 | TR | 600PM 850PM | BOO

Bob Kiesow

Introduction to The Web Standards

In 1994 the
World Wide Web Consortium (W3C)
was formed with a vision to standar
dize the
protocols and technologies used to build the web such that the content would be available to as
wide a population of the world as possible. In 2000, the
released XHTML

towards a more
pure, structured markup. It’s important to realize HTML 5
is on the horizon.

The benefits of web standards


Efficiency of code
: about reusing code, separate HTML content from your stylistic
(CSS) and behavioral (JavaScript) information.


Ease of maintenance
: make a change in one place and it propagates throughou
t the
entire web site


: accessible to everyone, no matter who they are, regardless of

The W3C has guidelines to address “web accessibility” focused on: ensuring graceful
transformation, and making content understandable and navig
able. For those
unfamiliar with accessibility issues pertaining to Web page design, consider that
many users may be operating in contexts very different from your own: 1) They may
not be able to see, hear, move, or may not be able to process some types of
information easily or at all, 2) They may have difficulty reading or comprehending
text, 3) They may not have or be able to use a keyboard or mouse, 4) They may have
a text
only screen, a small screen, or a slow Internet connection, 5) They may not
speak o
r understand fluently the language in which the document is written, 6) They
may be in a situation where their eyes, ears, or hands are busy or interfered with
(e.g., driving to work, working in a loud environment, etc.), 7) They may have an early
of a browser, a different browser entirely, a voice browser, or a different
operating system.


Device compatibility
: across different platforms and alternative browsing devices
(mobile phones)


Web crawlers/search engines
: making your web sites as visible as

possible, with better
search rankings on sites such as Google.

What is Progressive Enhancement?

A strategy for designing websites to ensure the maximum possible access to page content

regardless of user agent. This is usually preformed by starting wi
th well
structured HTML and
then adding additional technologies progressively for those clients that support them.

Intro to Web Design • Spring 2012 • Bob Kiesow

Intro Web Design

71 | TR | 600PM 850PM | BOO

Bob Kiesow

Separating style from content






| JavaScript

Today’s web design philosophy involves separating content and meaning (HTML) from
presentation and style (CSS). This general approach tends to lead to much leaner web pages,
because a single set of presentational instructions (in a
n external CSS file) can be applied to
many pages. This also makes the site much more manageable because global changes can be
made from a single source.

“An escalator can never break, it can only become stairs.”

Mitch Hedberg

Intro to Web Design • Spring 2012 • Bob Kiesow

What is HTML?

Hyper Tex
t Markup Language


language (NOT a programming language) interpreted
by a web browser

(sometimes called “user agent”).

HTML elements are the basic building
blocks of web pages.

HTML consists primarily of two types of things: 1) tags and 2) text c

Historically, o
riginally designed as a simple text document format for scientific research,
and because of this you’ll still see today evidence of this history (doc type).

“Hyper Text” denotes the linking together of documents.

HTML is often referre
d to as “semantic” markup.
For web design, “semantic” means
up is based on the content’s meaning, not art. Great content involves a structured
approach to titles, headlines, subheads, body copy, captions, images, and more.

What are HTML tags?

Tags co
ntain instructions that tell the web browser what to do.

Tags are used to apply structure to content.

HTML tags are keywords surrounded by angle brackets, like <h1>

HTML tags normally come in pairs, like <p> and </p>

The first tag in a pair is the start ta
g, the second tag is the end tag.

Start and end tags are also called opening tags and closing tags.

The Anatomy of an HTML tag:

Opening tag, content, closing tag.

And/or: Opening tag, attribute, value, content, closing tag.

What is meant by “Semantic HTM

Semantics is the study of meaning. Semantic HTML, or "semantically
correct HTML", is HTML
where the tags used to structure content are selected and applied appropriately to the meaning of
the content. Anyone who creates their own HTML pages today shoul
d aim to make their markup
semantically correct.

So, for example, if you want your HTML to be semantically correct …

A <p></p> paragraph tag pair should only be used to indicate a paragraph (which is a
structural concept). It should never be used to apply

space to a web page.

The HTML tags <b></b> (for bold), and <i></i> (for italic) should never be used, many
believe, because they’re primarily for visual effect on a page when designing layout.
Instead, use <strong></strong> and <em></em> (meaning emphasis
), which by default
will turn text bold and italic, while adding meaning to the structure of the content. The
<strong> and <em> tags are called "logical" tags because they are used deliberately
when the designer wants to add emphasis to particular words or


Writing semantic HTML brings a wide range of benefits:

Ease of use


Search Engine Optimization


What is XHTML?

Hyper Text Markup Language

very similar to HTML, yet slightly more restrictive
up langua

The main differences you’ll notice when using XHTML is:

Tags must be lowercase

All parameters in tags must be in quotes

closing (standalone) tags must end with a forward

which must be
preceded with a space

Intro to Web Design • Spring 2012 • Bob Kiesow

Intro Web Design

71 | TR | 6
00PM 850PM | BOO

Bob Kiesow

HTML Basics

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and
display them as web pages. The browser (sometimes called “user agent”) does not display the
HTML tags, but us
es the tags to interpret the content of the page.

HTML Documents = Web Pages

HTML documents describe web pages.

HTML documents contain HTML tags and plain text.

HTML documents are also called web pages.

What is Syntax?

Syntax refers to the spelling a
nd grammar of a programming language. Computers are inflexible
machines that understand what you type only if you type it in the exact form that the computer
expects. The expected form is called the syntax. Note: sometimes the syntax is different between

Use lowercase.

The World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and
demands lowercase tags in XHTML.

Intro to Web Design • Spring 2012 • Bob Kiesow

HTML tags


HTML headings are defined with the <h1> to <h6> tags.

<h1>Header 1</h1>

<h2>Header 2</h2>

h3>Header 3</h3>

<h4>Header 4</h4>

<h5>Header 5</h5>

<h6>Header 6</h6>



<p>The paragraph content goes here.</p>


Bold text.

<strong>This is a line of bold text.</strong>


Emphasized text

<em>This is a line of text with emphasis.



for linking (to a website, or as an on
page anchor)




This is one of the most common tags. Basically, a div is a general
purpose box that takes up the
full width of the space it’s in.


Unordered lists




Ordered Lists


This tag goes in the document’s head section, and displays the title of the web page in the
browser’s title bar (very top).

Intro to Web Design • Spring 2012 • Bob Kiesow

Standalone HTML tags

A few tags don’t have end tags. These are tags that are stand
alone struct
ure, and don’t need to
contain content to be meaningful.

<br />

break. Starts a new line.
(<br >

in HTML)

<hr />

A horizontal rule. Puts a line across the page. (<hr> in HTML)


An image. See below for more information about this.


’t worry about this one for now. It’s also hidden in the document’s <head>, and is a place for
putting content about the document that doesn’t need to be displayed on

Reminder: HTML tags should never be used to apply presentation

that’s the job
of CSS
(Cascading Style Sheets).

Intro to Web Design • Spring 2012 • Bob Kiesow

The Element.

HTML documents are defined by HTML elements. An HTML element is everything from the start
tag to the end tag. Common elements in web design include:

The <html> element:

The <html> element defines the whole

HTML document.

This is the beginning of your
html document, this statement initiates that you are starting an html file.

The </head> element

The head tag is a container for all the head elements such as scripts, directions for the
browser to find style s
heets, meta data information, and more.

The <body> element:

The <body> element defines the body of the HTML document

content such as text,

hyperlinks, images, tables, lists, etc.

The </title> element

This tag defines the title of the document, and is
the only required element in the head
section. The information added between the title tags will display in the browser tab.

The <p> element:

<p>This is my first paragraph.</p>

Elements are usually made up of two tags: an opening tag and a closing tag.

he closing tag has an extra forward slash in it.

Each HTML element tells the browser something about the information that sits between its
opening and closing tags.

Also: some HTML elements have empty content.

Empty elements are closed in the start tag.

br /> is an empty element without a closing tag (the <br /> tag defines a line break).

Note: In XHTML, adding a slash inside the start tag, such as <br />, is the proper way of
closing empty elements in XHTML.

The Attribute.

HTML elements can have attr

Attributes provide additional information about an element.

Attributes are always specified in the start tag.

Attributes come in name/value pairs like:

The most common attributes

for everyday HTML tags:


assigns CSS styles inli
ne for an element


"hypertext reference" simply means the target of a link


provides extra information for a visible element, like a link, image or button.


specifies a classname (additional description) about an element.



a “unique identifier“ for an element

HTML links are defined with the <a> anchor tag. The link address is specified in the

Notice the
" pair in this example:

<a href="">This is a link to RIT.</a>

Attribute va
lues should always be enclosed in quotes.

Intro to Web Design • Spring 2012 • Bob Kiesow

Web Design Fundamentals » Online Training Library

Explores Web design techniques and technologies, concepts, and best practices.

Note: this video does not have exercises.

Exploring Web Design


end: designers, and Back
end: programmers and developers

Web designers (front end) commonly understand minimum scripting and



Good: templates assist in the design process

seen in Dreamweaver, and blog and
social media sites (like

Tumblr, TypePad, WordPress, and many others).

Bad: all good designers need a basic understanding of HTML and CSS.

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are
two of the core technologies for building Web pages. HTML provides


of the page, CSS the (visual and aural)

for a variety of devices.
Along with graphics and scripting, HTML and CSS are the basis of building Web
pages and Web Applications.


Site design

UI: user interface.

Remember, the web itself has
ultimate control regarding presentation intentions.

Attention to design standards, readability, and patterns.

Know your project: your client, your audience, and your goals.

“Content is King:” if your audience can’t access the content

you’ve failed.


mation architecture: the art and science of organizing and structuring sites.

View the site as a system of information.

Define and prioritize the sites goals.

Organize site content and flow (wireframes and sitemaps).

Plan the navigation.

Web usability: the

practice of how others use and view websites. Involves audience
preferences, browsers, and more.


Interaction design: the creation and integration of feature
rich interfaces, video, and
blended media.

Interactive content: Ajax, JavaScript, Flash, Silverlig
ht, QuickTime.

Make it meaningful.

Know your audience.

Provide alternate content.

Intro to Web Design • Spring 2012 • Bob Kiesow

Web Terminology

Clients and Servers

These are the two types of interactions on the web: Clients request and render
content (browsers, mobile devices, more), and Servers
are applications that deliver
web content to the clients (FTP, POP, DNS, more).

URL: uniform resource locator

DNS: domain name servers


A set of rules & regulations that determine how data is transmitted in
telecommunications and computer networkin

HTTP: HyperText Transfer Protocol

FTP: File Transfer Protocol

SMPT: Simple Mail Transfer Protocol

POP: Post Office Protocol

RTP: Real
time Transfer Protocol

Host Server

The location (computer system) where the content of a website resides.

Web browsers

Web browsers have their own internal rendering engines, sometimes making
websites appear different from browser to browser

although web standards have
eliminated much of the concern.

HTML: HyperText Markup Language

XML: Extensible Markup Language

scading Style Sheets

DTD: Document Type Definition

Or DTD: Document Type Declaration (doctype)

The DOCTYPE isn't exactly an HTML tag or XHTML element. Instead it is a
declaration and always appears at the very top of your documents.


dds animation, v
ideo, and interactivity to web page

RSS: Really Simple Syndication


Common/standard graphics for web

Balancing file size and image quality is a common concern.


Adds interactivity and functionality to websites, interactive elemen
ts, dynamic menus.
friendly JavaScript Frameworks include jQuery, Prototype, Spry, and

AJAX: Asynchronous JavaScript and XML

For creating interactive web applications

exchanging data with a server, and
updating parts of a web page

thout reloading the whole page.

DOM: Document Object Model

The API that binds JavaScript and other scripting languages together with HTML and
other markup languages.

PHP, JSP, .NET, ColdFusion

Common server
side applications

great for developing more dyn
amic sites

SQL: Structured Query Language

relational databases

CMS: Content Management Systems

For more info:

API: application programming interface

An exposed set of functions that allow other applications to access features
functionality. For example, Google Maps.

Website using these are often called Mashups

W3C: World Wide Web Consortium

Visit the website (
) for advanced learning and information.

Intro to Web Design • Spring 2012 • Bob Kiesow

What is User Experience (

The diagrams below visualizes key concepts in understanding User Experience (UX).

Smashing Magazine |
What Is User E
xperience Design? Overview, Tools And Resources

Note: see Chapter 2 | PDF

Intro to Web Design • Spring 2012 • Bob Kiesow

Intro Web Design

71 | TR | 600PM 850PM | BOO

Bob Kiesow

Root folder, Local site, Remote site

During our exercises and tutorials

and, indeed, everywhere i
n Dreamweaver

you’ll encounter
a few terms frequently used by web designers.

Root folder.

The first rule of managing a website is that every piece of the site you’re working on

web page (HTML) documents, images, sound files, and so on

must sit in a
single master
folder on your hard drive. This folder is the root folder for your website, and because it’s on your
computer, it’s called the
local root folder
, though Dreamweaver calls it your local site folder. The
root (a.k.a site folder) is the master,
outer, main folder

think of it as the edge of the known
universe for that site: Nothing exists outside the root. Of course, to help organize your site’s files,
you can include any number of subfolders within that main folder.

When you finish creating yo
ur site on your computer, you’ll move the files in your local root folder
onto a web server for the world to see. You call the folder where you place your site files on the
server the
remote root folder

Local site.

The usual routine for creating web page
s goes like this: You create the page on your
own computer

using a program like Dreamweaver

and then you upload it to a computer on the
Internet called a web server, where your handiwork becomes available to the masses. So, it’s
very common for a website

to exist in two places at once, one copy on your computer and the
other on the server. The copy on your computer is called the local site, or the development site.
Think of the local site as a sort of staging ground, where you build your site, test it, an
d modify it.
Because the local site isn’t on a web server, the public can’t see it and you can freely edit and
add to it without affecting the pages your visitors see (they’re on the remote site, after all).

Remote site.

When you add or update a file, you

move it from your local site to the remote site.
The remote, or live, site is a mirror image of your local site. Because you create the remote site
by uploading your local site, the server folder has the same structure as your local site folder, and
ins the same files. Only polished, fully functional pages go online to the remote site; save
the half
finished, typo
ridden drafts for your local site.

Dreamweaver CS5.5

The Missing Manual, Chapter 19 explains how to use Dreamweaver’s
FTP features to de
fine and work with a remote site.

Intro to Web Design • Spring 2012 • Bob Kiesow

Intro Web Design

71 | TR | 600PM 850PM | BOO

Bob Kiesow

A few reminders:

The importance of HTML.

The <h> tags are part of the structural design of html. This means that search engines, indexing
robots a
nd screen readers that read web pages out loud for the visually impaired all understand
<h> tags as headers. Computers that read html expect <h1> to designate the main title, <h2> to
designate the next subdivision, such as a chapter, and so forth. Some sea
rch engines and
indexing robots look for the <h> tags, just as they look at your <meta> tags. Presentation
decisions only change the visual layout of the page, with no impact on the above.

Naming “commandments”


No spaces in filenames

use underscores fo
r adding spaces between words.



Lower case characters only.


Use short filenames that have meaning.

Index.html, about.html


All filenames must end in dot, three letter extension

exceptions: .html, .js (but stay

.png, .jpg, .gif, .m
ov, .swf


Use alphanumeric only

no special characters

Do not use these: party!.html, image#.jpg, money$$$.html