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.
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Σχόλια 0
Συνδεθείτε για να κοινοποιήσετε σχόλιο