Tools and techniques used in the creation

Website Design / Web Development / Website Production


jockeyrope_89f3305e
-
b3b1
-
4c77
-
8b60
-
6d64c298f99e.doc

Version 1


Page
1

of
12



HANDOUT
:





THE
TOOLS AND TECHNIQUES USED IN THE CREATION
OF AN INTERACTIVE WEBSITE



BTEC include the following under ‘Tools and Techniques’:


Navigation diagram
–

linear, hierarchy, matrix

Building interactivity tools
–

for example, pseudo
-
code for c
lient
-
server scripting

Animation

Audio/visual elements;

Ensuring compliance with W3C

Meta
-
tagging

Cascading stylesheets


For this part of the assignment you should discuss the following:




Navigation diagrams



Cascading stylesheets



Client
-
side scripting
–

Ja
vaScript



Server
-
side scripting



Using meta
-
tags



Compliance with W3C web standards


Navigation
D
iagrams


N
avigation diagrams for websites define the way that a website’s

information is structured and
accessed
.


There are only three basic types to consider:















Website Design / Web Development / Website Production


jockeyrope_89f3305e
-
b3b1
-
4c77
-
8b60
-
6d64c298f99e.doc

Version 1


Page
2

of
12



Linear

Hierarchical

Matrix

Linear navigation is

only
suitable for the

most basic
websites.

It permits only

forward
and

backward

movement
through

a
series
of linked

pages.

Linear designs can

be
frustrating
for

the user.

A tree
-
like structure

where
each

page opens links to a
number of

different choices.

This is the most typical
structure

for a website.

Higher pages in the hierarchy

help the user to refine their

search while lower pages have

the actual information.

In hierarchical designs, try
to

organise horizontally rather
than

vertically
–

浯r攠扲b慤t栠
i渠捨潩o敳

i猠s整e敲.

f渠n慴ai砠湡癩条ti潮I it i猠si步l礠
t桡t 慮y

p慧攠e慹 b攠e畳t 慳
li步l礠y漠扥 t桥 fir獴s潮e

癩獩s敤
批 愠a獥r.

䙲潭ot桩猠h敲獰散ti癥I t桥r攠e猠
湯 f潲m慬

桯浥灡来 E獨o睮w
i渠
杲e敮I 捯m灡r攠睩th

th攠
li湥慲 a湤 桩hrarc桩捡l 浯摥l猠
t漠o桥 l敦e).

f渠潲d敲 t漠o潭灥湳慴攠aor t桥
l慣欠潦ka

f潲m慬a獴su捴畲攬

浵m
ti灬攠pi湫猠慲e

灲潶楤e搠d桡t
灲o癩摥 q畩u欠慮搠敡s礠
扩摩牥捴c潮慬

p慴桷a祳 thr潵g栠
t桥 捯浰m整e

睥w獩s攮

䝩癥渠n桥 捯浰me硩x
礠潦ys畣栠
li湫慧敳I it is

li步l礠y桡t t桥
捯湴n湴n睯wl搠d攠er敡ted

慵t潭慴oc慬a礠yr潭o扡捫
J
e湤
摡t慢慳e

灲潣敳獩湧.



Cascading
S
tylesheets


Cascading Stylesheets (CSS), sometimes known simply as
s
tylesheets, allow the HTML author
to separate presentation

definitions

(
style

and layout)

from content in HTML documents. In other
words CSS are used to create a number of styles and then consistently apply these styles
throughout a web site. CSS allow you to give a site a consistent look, save you time, tidies

up
your HTML code and allow you to change an entire site (or all the pages that have the CSS
applied to them) by simply changing the one stylesheet.


The t
wo types of cascading stylesheets are embedded stylesheets and external stylesheets.
Embedded style
sheets apply only to the page on which they reside.

External stylesheets are
linked to and used in any number of pages (and so can be used to give a consistent look
throughout a site, and make site maintenance easier).


CSS can be created and edited in a
ny text editor for example Notepad but can also be created in
specialist web design applications such as Dreamweaver.
Even if you choose to

devel
op
most of
your CSS by hand,

keep in mind that you could use the pre
-
defined style sheet templates

and
wizards

that come with say Dreamweaver.


The
current
CSS specification is CCS2, which became a W3C recommendation in May 1998.
However,
the latest standard is CSS3.
The CSS3 specification is still under development by
Website Design / Web Development / Website Production


jockeyrope_89f3305e
-
b3b1
-
4c77
-
8b60
-
6d64c298f99e.doc

Version 1


Page
3

of
12


W3C.

CSS3 is completely backwards compati
ble, so you will not have to change existing
designs. Browsers will always support CSS2.


What are CSS?



CSS stands for cascading stylesheets



Styles define how to display HTML elements



Styles are normally stored in stylesheets



Styles were added to HTML 4
.0 to solve a problem



External stylesheets can save you a lot of work



External stylesheets are stored in CSS files


With CSS, your HTML documents can be displayed using different styles:


Styles Solve a
Big

Problem

HTML was never intended to contain tag
s for formatting a document.

HTML was intended to
define the content of a document, like:


<h1>This is a heading</h1>

<p>This is a paragraph.</p>


When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a
nightmare

for web developers.

Development of large web sites, where fonts and colo
u
r
information were added to every single page, became a long and expensive process.

To solve
this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all format
ting
could be removed from the HTML document, and stored in a separate CSS file.


All browsers support CSS today.


CSS

Save
s

a Lot of Work

CSS defines
how

HTML elements are to be displayed.


Styles are normally saved in external .css files.

External style

sheets enable you to change the
appearance and layout of all the pages in a Web site, just by editing one single file!

If you have
ever tried to change the font or colour of all the headings in all your web pages, you will
understand how CSS can save you

a lot of work.


CSS is a breakthrough in web design because it allows developers to control the style and layout
of multiple web pages all at once. As a web developer you can define a style for each HTML
element and apply it to as many web pages as you
want. To make a global change, simply
change the style, and all elements in the Web are updated automatically.


CSS Syntax

The CSS syntax is made up of three parts: a
selector
, a
property

and a
value
:


selector {property: value}

Website Design / Web Development / Website Production


jockeyrope_89f3305e
-
b3b1
-
4c77
-
8b60
-
6d64c298f99e.doc

Version 1


Page
4

of
12











The
selector

is normally the element/tag you wish to define, the
property

is the attribute you
wish to change, and each property can take a
value
. The property and value are separated by a
colon and surrounded by curly braces:


body {color: black}


If the value is

multiple words, put quotes around the value:


p {font
-
family: "sans serif"}


Note
: If you wish to specify more than one property, you should separate each property with a
semi
-
colon. The example below shows how to define a centre aligned paragraph, wit
h a red text
colour:


p {text
-
align: center; color: red}


To make the style definitions more readable, you can describe one property on each line, like
this:


p

{

text
-
align: center;

color: black;

font
-
family: arial

}




Example CSS Layout
:

The t
echnology news site Slashdot
uses a liquid
CSS
layout that flows
across

the full width of the page.




Website Design / Web Development / Website Production


jockeyrope_89f3305e
-
b3b1
-
4c77
-
8b60
-
6d64c298f99e.doc

Version 1


Page
5

of
12



CSS Zen Garden (
http://www.csszengarden.com/
) is a good example of a site that provides a
number of differ
ent designs that have been created using CSS.


















Client
-
S
ide
S
cripting
–

JavaScript


JavaScript is the most popular scripting language on the internet,
and works in all major browsers
-

such as Internet E
xplorer, Firefox, Chrome, Opera

and Sa
fari.



What is JavaScript?



JavaScript was designed to add interactivity to HTML pages



JavaScript is a scripting language



A scripting language is a lightweight programming language



JavaScript is usually embedded directly into HTML pages



JavaScript is an i
nterpreted language (means that scripts execute without preliminary
compilation)



Everyone can use JavaScript without purchasing a license


Java and JavaScript are two completely different languages in both concept and design!

Java
(developed by Sun Micros
ystems) is a powerful and much more complex programming language
-

in the same category as C and C++.


What can a JavaScript do?



JavaScript gives HTML designers a programming tool
-

HTML authors are normally not
programmers, but JavaScript is a scripting l
anguage with a very simple syntax! Almost
anyone can put small "snippets" of code into their HTML pages



JavaScript can put dynamic text into an HTML page
-

A JavaScript statement like this:
document.write("<h1>" + name + "</h1>") can write a variable text
into an HTML page

Website Design / Web Development / Website Production


jockeyrope_89f3305e
-
b3b1
-
4c77
-
8b60
-
6d64c298f99e.doc

Version 1


Page
6

of
12




JavaScript can react to events
-

A JavaScript can be set to execute when something
happens, like when a page has finished loading or when a user clicks on an HTML element



JavaScript can read and write HTML elements
-

A JavaScript can read

and change the
content of an HTML element



JavaScript can be used to validate data
-

A JavaScript can be used to validate form data
before it is submitted to a server. This saves the server from extra processing



JavaScript can be used to detect the visitor
's browser
-

A JavaScript can be used to detect
the visitor's browser, and
-

depending on the browser
-

load another page specifically
designed for that browser



JavaScript can be used to create cookies
-

A JavaScript can be used to store and retrieve
infor
mation on the visitor's computer


The use of client
-
side scripting has come a long way in recent years with the

realization that it
can actually provide genuinely useful functionality and

enhance a design in ways previously not
considered.

JavaScript is n
ow the basis of many
Web 2.0

applications, and is the J in
AJAX
.

(
AJAX
; an acronym for
Asynchronous

JavaScript

and
XML
)

is a group of interrelated
web
development

methods used on the
client
-
side

to create
interactive
web applications
.

The release
of
frameworks

(for example,
JQuery
,
Dojo
,
Google

Web

Toolkit
,
YUI
)
also assisted the
evolution of this technology’s usage, because i
t gave people

with no scripting experience the
opportunity to create basic interaction with

little knowledge of JavaScript’s fundamentals.


Originally developed in the mid 1990s,

the
JavaScript language
has
transformed the

way we
can

give added flexibilit
y to our designs, achieve things previously

unseen with structure and style,
and let us draw

on the ability to produce plug
-
in
–
free animations and special effects.


While CSS does

allow a limited amount of behavio
u
r (such as applying hover links through

an
chors), the amount of dynamic interaction you can provide is hindered by the

limitations of a
language produced for styling content rather than altering the

way it reacts.


Because of this,
languages like JavaScript were invented to take

hold of the browse
r’s ability to dynamically
render and get information from a

visitor’s browser to enhance the experience.


Scripting
Languages in Use

Many people use the wonders of modifying the website’s

behavio
u
r to give visitors special
effects, usef
ul functionality a
nd
a more streamlined experience.

Because scripting is a powerful
way to

improve your site in browsers that support it, its use has become widely

accepted.

Because of the raw power that it offers, you need to be careful of

the consequences for the visi
tor
in what you do.


Client
-
side scripting that is

abused and overused becomes obtrusive, and
considering some people have

client
-
side scripting turned off or unavailable, you cannot rely on it
for

essential functionality.


JavaScript:

JavaScript (which i
s alternatively and less commonly

referred to as
ECMA
-
Script
) is the industry
standard for producing

client
-
side behavio
u
r on the Web.

While it has mass market support,

JavaScript can be q
uite a difficult language to

learn
.

Version

1.8 is supported withi
n almost every
web browser (though mobile

platforms have their issues), but most problems occur due to patchy

Website Design / Web Development / Website Production


jockeyrope_89f3305e
-
b3b1
-
4c77
-
8b60
-
6d64c298f99e.doc

Version 1


Page
7

of
12


support for elements of the
Document Object Model

(
DOM
), which is

the primary method of
how CSS interacts and targets HTML.

One

disadvantage of J
avaScript is that people can easily
turn off support

for it entirely. S
ome do so because malicious use of scripts in the past

ultimately
undermined trust in the language.














This
lightbox
, which focuses attention on the pop
-
up image, was

produc
ed using JavaScript.


Visual Basic Script (VBScript):

VBScript is the less common of the two

main
client
-
side scripting languages

of the Web. The
reason for VBScript’s lack

of widespread adoption is that it allows a greater level of control over

a
person’
s computer than JavaScript and, therefore, is more open to

the risks of malicious
scripting.

The only browser that actively allows

the use of VBScript (independently) is, of course,
its creator’s browser

Microsoft Internet Explorer.

As a result, JavaScri
pt would be a better

choice
of invoking behavio
u
r and providing a more dynamic user

experience, even though VBScript, on
the surface, is an easier

language to learn in terms of its syntax.



Server
-
S
ide
S
cripting


Server
-
side scripting is most often used w
hen there is a requirement for

interaction between the
visitor and the website, such as sending an email

through a form or creating a web application
.



Google Docs is a web
application powered through
server
-
side scripting.






The script takes the nec
essary steps to respond to each

request for information that is made by
ferrying data back and forth between

the web server and the visitor’s computer (the client).

Due
Website Design / Web Development / Website Production


jockeyrope_89f3305e
-
b3b1
-
4c77
-
8b60
-
6d64c298f99e.doc

Version 1


Page
8

of
12


to the increasing

number of
Rich Internet Applications

(
RIAs
)

and the desire for enhan
ced web
functionality, this area of web

development is rapidly growing.



Let’s take a look at some of the most popular

server
-
side scripting languages; the URLs provided
point to the user manual for

each technology, so you can learn more about the langua
ge if you
wish:



PHP

(
http://www.php.net/manual/en/
)

The
PHP Hypertext Preprocessor
(
PHP
) is among the most well known server
-
side

languages
in use on the web.


It’s an open source platform, which

means anyone

can contribute to the
project, and has wide support

within Linux and Windows servers.


It is quite possibly the most
popular

scripting language in use today.

PHP, like all of the other scripting

languages, is harder
to learn than HTML and CSS, but for th
ose

wanting to add dynamic features and interactive
components or the

ability to connect and save to a database, PHP 5 (version 6 is in

development) has become a popular choice for server
-
side

development.



ASP.NET

(
http://www.asp.net/learn
)

Active Server Pages .NET

(
ASP.NET
) is an evolution of the classic version of ASP.


ASP.NET
itself

is based on Microsoft’s .NET platform, and with a lot of use on

Windows servers, it has
become one of the top choices for enterpri
ses

and organizations who are less trusting of open
source software.

If you

come from a programming background or have written any software,

you
may enjoy the fact that ASP.NET can use Visual Basic, C++, C#,

and other supported syntax and
convert it to AS
P.NET on the fly using

its common language runtime.


ASP.NET is a very popular
language,

and version 3.5 (the most recent) is another fine choice for learners of

server scripting.



Classic ASP

(
http://msdn.microsoft.com/en
-
us/library/aa286483.aspx
)

Before there was ASP.NET, there was Active Server Pages (ASP).

ASP is

supported by
Windows servers, and is proprietary (in terms of how it

functioned), so classic ASP has been a
firm favo
u
rit
e of enterprises and

businesses alike for many years.

While ASP has seen a decline
in use

since ASP.NET was released, version 3.0 still has a following, and some

people prefer it
over ASP.NET due to the reduced system resources it

needs.

Most ASP pages a
re written in
VBScript, and ASP is on par with

PHP in terms of ease of learning.



Python

(
http://www.python.org/dev/
)

Python started off as a fully

fledged programming language and was later adapted for server

sc
ripting on the Web.


Fairly recently, it has seen a sharp rise in the

amount of people who use it
to produce web applications (rather than

small scripts for which other languages are better
suited).

With

framework solutions such as
Django

to help manage c
omplex

applications and
projects and the ability to place Python scripts within

containers, the language has become a firm
favo
u
rite among

programmers coding for the Web and the information security

industry.


It should
be noted that this language is bette
r suited for

applications than for websites.

Website Design / Web Development / Website Production


jockeyrope_89f3305e
-
b3b1
-
4c77
-
8b60
-
6d64c298f99e.doc

Version 1


Page
9

of
12




Ruby

(
http://rubyspec.org/
)

Ruby is the rock star of the bunch.

While it has been around for a very long time, its place on the
Web

has only fairly recently (over the last

few years) become a rags
-
to
-
riches

story.

The most
popular method for using Ruby on the Web is

Ruby on Rails

and essentially provides an entire
framework to help

reduce the complexity of scripting large applications.

Because of this

rapid
development en
vironment, Ruby and Rails have become

commonplace within web servers, and
like Python, they support

containers for managing complex projects.

Ruby is well known for

being fairly easy to pick up and is an excellent choice for individuals

who want to learn
to produce
web applications with little

programming experience.


It should be noted that this language is

better suited for applications than websites.



Perl

(
http://perldoc.perl.org/
)

Perl has been around for a lo
ng

time.


It’s currently at version 5.1 and has seen few updates over

recent years.

However, it has maintained a cult following among

hardcore developers who want
to be free of the bulk and mess that

comes with other server
-
side languages.


I would not
re
commend this

language for beginners, because many people new to scripting have

stated that
it is tricky to learn and the language itself has gone into

decline in terms of usage.

Perl does
have wide support on all

platforms and may be worthy of investigati
on because of its

lightweight
nature.



ColdFusion

(
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/index.html
)

Adobe ColdFusion is another well
-
known server
-
side langua
ge that

has its own dedicated user
base.

The language itself is considered

fairly straightforward to learn and in many ways is
simpler than its

counterparts.

However, any ease o
f use is inhibited by two facts. Firstly,
ColdFusion is limited in its suppo
rt across platforms, as many hosts do

not offer direct support for
it like they do for other languages.

Also, a

ColdFusion server is very expensive to implement,
which prices it out

of reach of average consumers.

Therefore, it probably isn’t what you

wil
l want
to learn as your primary server
-
side language.



JSP

(
http://jcp.org/en/jsr/detail?id=152
)

Finally, JavaServer

Pages (JSP), as you may have guessed, is directly related to both Java

(which drives t
hose little applets you see on pages) and JavaScript.

While JSP has seen limited
success in terms of

usage across the Web, it has seen a moderate increase in use since Sun

Microsystems (its creator) was bough
t by Oracle
.

Like ASP, JSP has been fairly pop
ular in
enterprise
-
level

environments, where its backing by well funded organizations (Sun and

now
Oracle) has created a level of trust.

Because JSP is so broadly

supported across platforms, it is
definitely worthy of consideration.




Website Design / Web Development / Website Production


jockeyrope_89f3305e
-
b3b1
-
4c77
-
8b60
-
6d64c298f99e.doc

Version 1


Page
10

of
12



Using
M
eta
-
T
ags


M
etadata exists to provide your document with a description of the resource

itself (basically, it’s
data about data).


Metadata is very useful on the Web, as we can describe our pages with

a
whole list of information which search engines and other websites,

such as

social networks can
make
use of.


Meta
-
tags

Meta
-
tags provide a way to gain higher ranking within search
-
engines. Mata
-
tags offer the
designer of a website the ability to input certain keywords in the ‘head’ are of their web pages.
Meta
-
tag desc
riptions can also be used
–

with up to 250 characters being indexed.


When you use a search engine, you normally see a couple of things within the

results.

First, you
see a title made up from the
contents of the
<title>

element
.

You will also notice a sn
ippet of text
that describes the page and

its contents.



Many people choose to let the search engine pick the description
. However, you can

add

a short
description that may be used within search

engines to state exactly what your site does

by using

the
following code

-

replacing null for what you would like to see appear within search results.


<head>

<meta name="description" content="null">

</head>


The only other
meta
-
tag
element used by some search engines and worthy of mention is

keywords
. This meta
-
tag

exists to provide comma
-
separated

keywords and search terms to
help you achieve a higher rank in the search

engines.

Of course, this tag was created back in
the day when search engines

trusted people to give accurate descriptions,
but

as a result of
consistent

abuse, keywords are rarely given any notice, especially by the major search

engines
like Google.

However, smaller engines still use the keywords meta
-
tag,

and for that reason
alone, it may be worth including some terms.

Do not use more than 15

keywords, in any case,
otherwise search
engines might decide to ban you.


<meta name="keywords" content="null">


There are a wide range of other meta
-
tags which you might like to investigate.


The
Dublin Core Metadata Initiative (DCMI)

You can create your

own meta
-
tags, but unless you want to start a new

convention, you should
probably just use the most widely recognized ones.


Because no standard existed for metadata, the Dublin Core Metadata Initiative

(DCMI) was
created to provide a specification
for

me
ta
-
tags.



Website Design / Web Development / Website Production


jockeyrope_89f3305e
-
b3b1
-
4c77
-
8b60
-
6d64c298f99e.doc

Version 1


Page
11

of
12



If you would like to learn more about DCMI and the Dublin Core, you can

check out the
specification and user’
s guide at their website at
http://dublincore.org/documents/usageguide/
.



Compliance with W3C web standards


World

Wide

Web Consortium

(
W3C
) compliance is seen as best practice rather than a legal

requirement.


The
W3C

is an international consortium of IT industry heavyweights such as Adobe, Apple,
CERN,

HP, IBM and Microsoft t
hat develops common protocols that promote WWW evolution
and ensure

its interoperability.


Interoperability means there is no single proprietary standard
. A
ll the technology is based on
open

standards for which full information is publicly available.


The

W3C has helped to define and publish standards (known as ‘W3C recommendations’) for

common technologies such as HTML and CSS.


For more information see:


World

Wide

Web Consortium

(
W3C
)

http://www.w3.org/


And for some p
articular web technology standards:


HTML
5

http://www.w3.org/html/wg/html5/

HTML
4.01

http://www.w3.org/TR/html401/

CSS

http://www.w3.org/Style/CSS/current
-
work#news/


W3C validation

Websites that comply (through validation) with theW3C recommendations often publicise the fact

through the use of special icons:


HTML Validator

(
http://validator.w3.org/


Means:

The web page’s code meets theW3C validation for HTML 4.0.


CSS Validator

(
http://jigsaw.w3.org/css
-
validator/
)


Means:

The web page’s code meets theW3C
validation for CSS.



Website Design / Web Development / Website Production


jockeyrope_89f3305e
-
b3b1
-
4c77
-
8b60
-
6d64c298f99e.doc

Version 1


Page
12

of
12



Compliance with W3C standards is important as W3C develops a range of technologies across a
range of international communities and tries to ensure that standards about the Web and Web
usage are enforced.



In addition…


Creating inte
ractivity tools such as
pseudo code

for client
-
side scripting is also important in the
development of an interactive website.


In addition, the use of
animation and audiovisual elements

can enhance the overall
appearance and interactivity of the site.