Intro Web Design

rungabbyInternet και Εφαρμογές Web

10 Νοε 2013 (πριν από 3 χρόνια και 8 μήνες)

86 εμφανίσεις

Intro to Web Design • Spring 2012 • Bob Kiesow

Intro Web Design

561
-
71 | TR | 600PM 850PM | BOO
-
3496

Bob Kiesow





The Internet, the Web, and Web Design



1.

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.


2.

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.




3.

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


4.

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.


5.

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.


6.

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.


7.

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

8.

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,

and

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),



Human
-
computer interaction (HCI)



Human factors



Interaction design (IxD)



Conten
t strategy



Anatomy of a Usable Website


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


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




http://www.usereffect.com/topic/anatomy
-
of
-
a
-
usable
-
website

Intro to Web Design • Spring 2012 • Bob Kiesow

Intro Web Design

561
-
71 | TR | 600PM 850PM | BOO
-
3496

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
W3C
released XHTML


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


The benefits of web standards
:

1.

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

2.

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

3.

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



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
version
of a browser, a different browser entirely, a voice browser, or a different
operating system.

4.

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

5.

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

561
-
71 | TR | 600PM 850PM | BOO
-
3496

Bob Kiesow





Separating style from content



Structure

| HTML

Presentation

| CSS

Behavior

| 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


a
markup

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
ontent



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
mark
-
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
L?”

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

phrases.


Writing semantic HTML brings a wide range of benefits:



Ease of use



Accessibility



Search Engine Optimization



Repurposing



What is XHTML?

Extensible
Hyper Text Markup Language


very similar to HTML, yet slightly more restrictive
mark
-
up langua
ge.

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



Tags must be lowercase



All parameters in tags must be in quotes



Self
-
closing (standalone) tags must end with a forward
-
slash


which must be
preceded with a space

Intro to Web Design • Spring 2012 • Bob Kiesow

Intro Web Design

561
-
71 | TR | 6
00PM 850PM | BOO
-
3496

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
H
TML and XHTML.


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

Common
HTML tags




<h1>

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>

Paragraph

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


<strong>

Bold text.

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


<em>

Emphasized text

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


<a>

Anchor


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


<img>

Image.


<div>

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.


<ul>

Unordered lists


<li>

List
item


<ol>

Ordered Lists


<title>

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 />


Line
-
break. Starts a new line.
(<br >

in HTML)


<hr />

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


<img>

An image. See below for more information about this.


<meta>

Don
’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
-
screen.


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.

T
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
ibutes.

Attributes provide additional information about an element.

Attributes are always specified in the start tag.

Attributes come in name/value pairs like:
name
="
value
"


The most common attributes

for everyday HTML tags:

style


assigns CSS styles inli
ne for an element

href


"hypertext reference" simply means the target of a link

title


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

class


specifies a classname (additional description) about an element.

id


specifies

a “unique identifier“ for an element


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

attribute.
Notice the
name
="
value
" pair in this example:


<a href="http://www.rit.edu">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

Lynda.com » Online Training Library

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

Note: this video does not have exercises.



Exploring Web Design

1.

Front
-
end: designers, and Back
-
end: programmers and developers



Web designers (front end) commonly understand minimum scripting and
programming.

2.

Short
-
cuts:



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

the
structure

of the page, CSS the (visual and aural)
layout,

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

3.

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.

4.

Infor
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.

5.

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

Protocol



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


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

CSS: Ca
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.

Flash



A
dds animation, v
ideo, and interactivity to web page

RSS: Really Simple Syndication

JPG, GIF, and PNG



Common/standard graphics for web



Balancing file size and image quality is a common concern.

JavaScript



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

AJAX: Asynchronous JavaScript and XML



For creating interactive web applications



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

wi
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: http://youtu.be/4JjN54aaF74

API: application programming interface



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



Website using these are often called Mashups

W3C: World Wide Web Consortium



Visit the website (
www.w3c.org
) for advanced learning and information.



Intro to Web Design • Spring 2012 • Bob Kiesow

What is User Experience (
UX)?




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

561
-
71 | TR | 600PM 850PM | BOO
-
3496

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
conta
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

561
-
71 | TR | 600PM 850PM | BOO
-
3496

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”

1.

No spaces in filenames


use underscores fo
r adding spaces between words.

web_page.html

2.

Lower case characters only.

3.

Use short filenames that have meaning.

Index.html, about.html

4.

All filenames must end in dot, three letter extension


exceptions: .html, .js (but stay
consistent.

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

5.

Use alphanumeric only


no special characters

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