WebsiteExpress Tutorial
A comprehensive introduction to
the WSX website template
|
|
 |
PAGE UNDER CONSTRUCTION
WebsiteExpress,
or WSX, is
a website template
that
enables a large class of users to easily and economically build,
publish, and maintain a multi-lingual presentation-oriented website.
Throughout this tutorial, we will refer to a website that is built
based on the WSX template as a 'WSX-based website',
or simply 'WSX website'.
The primary focus points of the WSX template are:
- to make the WSX template accessible to a very
large audience by requiring the
prospective web developer to be familiar only with some elementary
web-related terminology such as 'HTML document' or
'hyperlink', and twith a very basic set of computer-operating skills
such
as the ability to manage files and folders, edit a simple HTML document
in a
commonly used
editor such as Mozilla
Seamonkey, or upload a file or folder on the internet with
a commonly used FTP
program such as FileZilla.
- to impose minimal
conditions on the web servers where a WSX-based
website is to be hosted, such that even
the most simple, and often free,
webhosting plans can be used as a
publishing platform, all while providing an uncompromising browsing
experience to the end user on a WSX-based website
The present document is a tutorial introduction to the structure
and
features
of the WSX template, and it constitutes an integral part of the WSX
template development kit. The tutorial starts with
presenting the basic
concepts around
which the WSX template is designed, it continues with an incremental
introduction to each of the features of the template, and ends with a
detailed presentation of the individual steps
required for creating a new website based on the WSX
template.
@toc@Table of Contents
Basic concepts
The WSX template
The WSX template
consists of a small fully-functional template website
which is meant to serve
as the
skeleton for building
a new full-fledged WSX-based website from the ground up. This
chapter presents in detail how to download the WSX template on a
computer, and then explains how to open the downloaded copy of the WSX
template
website in a web browser.
Obtaining the WSX template
The first step to obtaining the WSX template is to download the
WebsiteExpress archive from here.
For the sake of simplicity, let us consider that the archive file will
be placed
on the desktop, thus obtaining
a zip file named 'wsx-*.*.*.zip' where *.*.*
represents the
version number (e.g. the archive file might be called 'wsx-0.9.2.zip').
Once the 'wsx-*.*.*.zip' archive has been downloaded on the desktop,
the next
step is to
extract its contents using any available de-archiving method; for
example, in Windows the archive file can be opened by double-clicking
it, and
then the 'WSX' folder can be dragged out from the archive
window onto
the desktop as illustrated
in Fig.x below.
- IMPORTANT: in order to
have a
well-defined
setup for the rest of this tutorial, we will here-forth consider that
the 'WSX' folder contained in the archive will be
extracted
onto the Desktop, thus resulting a single folder named
'WSX' placed
directly
on the
desktop.
Fig.x:
Extracting the 'WSX' folder from the WSX archive on the
desktop in
Windows XPThe root folder
of the
WSX template
The 'WSX' folder that has
been extracted from the
'wsx-*.*.*.zip'
archive onto the desktop constitutes the '
root folder' of
the WSX template website,
and
it
contains all the
files and folders of the website. In this context,
the process of creating
a new website based on the WSX template essentially consists of
customizing the name and contents of
the 'WSX' root folder, such that
a
WSX-based website will always consist of a [customized] 'root folder'
which
"packs together" the entire contents of the website.
The contents of the 'WSX' root folder of the WSX template is
illustrated in Fig.x below (this view is obtained Windows by
right-clicking the 'WSX' folder on the desktop and
selecting "Explore" from the
pop-up
menu):
Fig.x: The
contents of the 'WSX' root folder of the WSX
template
The root file of
the WSX template
In order to display the WSX template website in a web browser, the
website's "entry point" file,
or 'root file',
has to be opened. The root file of any
WSX-based website, and thus also of the WSX template website, is a
predefined
file named 'index.html'
that is
contained in the
root folder of the
website; this file is
illustrated on blue
background
in the right-hand side of Fig.x
above.
A snapshot of the WSX template website as it is displayed in a browser
window is
illustrated in Fig.x below:
Fig.x: The WSX
template website opened in a web browser
- note: the present tutorial makes extensive use of examples which
can often be tested on the WSX template website itself; it is thus strongly recommended
to actually download the WSX template and use it as a reference by opening the template website in a web
browser before continuing with reading this document.
The logical
organization of a WSX-based website
The WSX template provides a
framework for organizing
the
content of a WSX-based website into one
or more 'language sections',
where each such section should contain an autonomous version of the website
authored in one given language; this is exemplified in Fig.x
below:
Fig.x: A
WSX-based website is logically partitioned into autonomous language
sections
- note: there
is no intrinsic
requirement to have the content of a
WSX-based website organized in the same way for each of the available
languages, e.g. a company website may well contain a complex
multi-page
structure in the english section while only having a single "company
overview" page in chineze; additionally, a WSX-based website can contain only one language
section, in which case the very notion of 'multi-lingual content'
becomes
irrelevant.
WSX documents
Most of the contents of a WSX-based website is meant to be published as
HTML documents, with said
documents logically residing in one of the website's language sections
(depending on the language in which each document is authored). We will
here-forth refer to the HTML documents contained in a WSX-based
website
as 'WSX documents'.
An example of how the WSX
documents are logically organized into language sections
is illustrated in Fig.x below:
Fig.x:
The WSX documents are logically clustered into language
sections
- note: although the intended
role of the WSX language sections is to "cluster together"
documents that are written in one given language, the WSX template does not enforce this provision in
any way. However, in order to preserve the logical coherency of a
WSX-based
website, it is recommended to have each document contained in a WSX
website authored in such a way as to allow it to be naturally placed in one of the
language sections of the website.
For example, consider a WSX document that presents a certain product
and
is which written mostly in french, but said document also
includes an english-language data sheet; in this case, said document
can
still be logically thought of
as a
french-language document, and it can thus be naturally integrated in the
french-language section of the website:
Cover pages
A mandatory condition for each of
the language sections of a WSX website is to be organized in
such
a way that one
of its documents serves the role of a "entry page" for that
language content: we will refer to these special-purpose
documents
as the
'WSX cover pages',
or simply the
'cover pages',
of the language sections of the website. The cover page document of a
language section does
not
(have to) have any special structure, e.g. to be organized as a
"main menu" containing links to
the other pages in the website, etc; instead, the cover page
of a language section only has an
intended role
of
acting as a "welcome page" for the content published in that language,
e.g. where a (brief) introduction to the website can be presented in
the corresponding language.
- note: at the current stage of this presentation, the requirement
for each language section to contain a document designated as its cover
page may
look
as an un-necessary condition,
especially
since it
was specifically stated that the cover page documents do not need to be structurally different
from any other document in their content domain; however, as
it
will become clear in a later chapter of this presentation, the existence of a
'cover
page' for each language section of a WSX-based website is a key
organizational condition upon which the WSX template's browsing
facilities are built.
The "logical position" of a WSX website's cover
pages within the internal structure of a WSX website is illustrated in
Fig.x below:
Fig.x:
Each language section must contain its own cover
page
Data files
Apart from containing WSX documents, a WSX-based website can also
include other types of files which are
not HTML documents,
e.g. PDF files, zip archives, flash animations, stand-alone images,
etc; we will here-forth refer to
these files as the
'WSX
data files', or simply the
'data
files' contained in a WSX website. The most important
characteristic that differentiates the WSX data files from the WSX
documents is that
a data file is not
required
to logically reside inside one of the language sections of a WSX
website, i.e. the
logical
position
of a data file within the internal structure of a WSX website
can be
outside any-and-all of the language sections.
For example, consider the situation where a PDF document is assumed to
be authored in english and can
thus
be logically placed inside the english-language section of the website,
while a stand-alone image is not related to any specific language and
is thus logically positioned outside any of the language sections of
the website; this is illustrated in Fig.x
below:
Fig.x:
The data files contained in a WSX website can logically reside both
inside a language section, and outside any of the language sections
- note: the presence of data files is not mandatory on a WSX
website, e.g. a website may contain no data
files at all, or it may contain data file(s) only in some of its
language sections, etc
The WSX front page
A key
characteristic of a WSX-based website
is related to the way the website content is displayed in a browser
window: specifically, the exclusive view that a WSX-based website ever exposes to a reader consists of one single web page that we'll here-forth refer to as the 'WSX front page',
and all the documents contained in a WSX-based website,
together with all the website navigation controls, are always displayed
as "embedded items" inside the WSX front page.
In order to accommodate multiple "embedded items" on a single web page,
the
graphical layout of the WSX front page is divided into several
"graphical parcels" as
illustrated in Fig.x below, with each of these "parcels"
serving a specific role (e.g. the 'page browser' exposes the page
navigation menu, the 'document viewer' acts as the a "window" through
which the documents contained in the website are made available to the
reader, etc); we
will refer to these graphical parcels as
the 'layout
elements' of the WSX front
page.
Fig.x:
The layout elements of a typical WSX website Front Page
- note: when designing a new WSX-based website, the WSX template
allows the graphical appearance of the WSX
front page to be customized to a certain extent (e.g. to hide the page
navigation menu, or to hide the page header, etc) by means of several 'WSX
configuration files' which will be discussed in detail later in
this
tutorial; however, in any customization scenario the 'document
viewer' element will always be visible on the WSX front page as
it represents the exclusive
"window" through which the website's documents can ever be displayed to the reader,
i.e. without the presence of the 'document viewer' element on the WSX
front page there wold be no way of displaying the WSX documents to the
reader.
The WSX home page
The WSX 'home
page' is specially-designated
document that is contained in a WSX website, whose role is to
be
displayed on the WSX front page
(specifically, inside the 'document
viewer'
element) when the
website is opened in a web browser for
the first time. The WSX home page must
be one of the WSX cover
pages.
- note: the information that
specifies which WSX document represents the website's home page is
specified in a special configuration file that will be discussed later
in this
tutorial.
WSX states and selections
A
very
important
notion that will be used throughout this tutorial is the
'WSX
state': a WSX state "encapsulates"
two correlated parameters which
together describe
the
state of a
WSX-based website at a given moment:
- we'll use the term 'selected document' to
represent the WSX document that
is being displayed on the WSX front page at a given moment (i.e.
inside the document
viewer element)
- we'll use the term 'selected language'
to represent the language section where the
selected document resides
(this will usually correspond to the language in which the selected
document is written)
- note: a WSX state will be occasionally be represented throughout
this tutorial by using the curly braces notation '{selected_language,
selected_document}'; for example, the notation {English, Document#1}
will represent the state of a WSX website when the selected document is 'Document#1'
of the english-language section of website.
The state of a WSX-based website
at
any given moment (i.e. the 'WSX state')
is
"reflected" in
two
special-purpose layout elements on the WSX front page, namely the
language
selector element and
the page
browser element, which
always highlight the "currently" selected language and the "currently"
selected document.
- note: the language selector element and the page browser element
not only "reflect" the state of a WSX-based website at a given
moment, but they can also be used to change
the language selection on a WSX website and/or
the document that is displayed on the WSX front page, i.e. these layout
elements also act as navigation
elements
on a WSX-based website; the functionality of these two
elements will be detailed later in this tutorial.
For example, Fig.x below illustrates the correspondence between a WSX
state where the
'selected language'
is 'English' and the
'selected
document' is the [english-language] 'Welcome page' document, and
the way this WSX state is "reflected" on the WSX front page:
Fig.x:
The WSX state and the corresponding layout elements on the WSX front
page
- the language selector displays
the languages that are available on a website, and highlights the "currently"
selected language
- the page browser
displays the documents that are available in
the currently selected language, and highlights the
document that is "currently" displayed in the document viewer
Summary
The following list is intended as a both a recap, and a quick
reference for the notions introduced in this chapter:
- the content of a WSX-based website is organized into one or
more language sections, with the content of each such seaction
being authored in one given language
- the exclusive interface
that a
WSX-based
website ever exposes to the
reader is the WSX front page, and when opening a document contained in
the website said
document is always displayed as an
embedded item on the 'WSX front
page' (namely, inside the
'document viewer' element)
- a key concept that will be used throughout this tutorial is the
state of a WSX-based website, or the 'WSX sate': a WSX state
indicates which language and
which document are selected on a WSX-based website at a given moment
The functional
components of a WSX website
The notion of 'functional component' is a key
concept upon
which the functionality of a WSX website is based; specifically,
behind the unitary appearance
of the WSX front page, the
internal structure
of a
WSX-based website in fact consists of multiple autonomous functional
components which
each serve a specific purpose, and, in this context, the
role of the individual layout
elements
on the WSX front page is to serve as user interfaces, or "windows",
through
which the internal functional components of the
website are made accessible in a web browser.
A generic illustration of
the relation between an internal
functional component of a WSX
website and its corresponding layout element on the WSX front page is
presented in Fig.x below:
Fig.x:
Each internal functional component has a corresponding "visual
interface" on the WSX front page
- note: as illustrated in Fig.x above, a functional component of a
WSX-based website may logically reside either inside one of the
language sections of the website, or outside all of the
language sections
The
following paragraphs in this chapter will incrementally
introduce all the individual functional
components of a WSX-based website, and explain how, and in which
conditions, these
components are "reflected" in
the layout elements on the
WSX front page.
Throughout the remainder of this tutorial we will often use
the term 'component'
as short for '[internal]
functional
component', and 'element'
as short for 'layout element'
The WSX documents
As it was previously
explained, the "logical position" of the WSX documents within the
internal
structure of a WSX
website can be illustrated as in Fig.x below:
Fig.x: The
logical position of the WSX documents within the internal structure of
a WSX website
Given the logical organization of the WSX documents as illustrated in
Fig.x above, we will here-forth
consider the WSX documents as functional components
of a WSX website.
The visual interface of a WSX document on the WSX front page is the 'document viewer'
element which, at any given
moment, displays the document that is "currently" selected
on the website.
For example, if at a given moment the selected language on a WSX
website is 'english' and the selected document is the
[english-language] "Welcome page' document, then the 'Welcome page'
document will be displayed inside the document viewer
element on the
WSX front page; this is illustrated in Fig.x below:
Fig.x: The
selected document is displayed inside the document viewer element
The WSX data files
As it was previously
explained, the "logical position" of the WSX data files within the
internal
structure of a WSX
website can be illustrated as in Fig.x below:
Fig.x: The
logical position of the WSX data files within the internal structure of
a WSX website
Given the logical organization of the WSX data files as illustrated in
Fig.x above, we will here-forth
consider the WSX data files as functional components
of a WSX website.
- IMPORTANT: the
WSX data files are an exception among the WSX functional components
in terms of how they are displayed on a WSX website:
specifically,
whereas all the other functional
components have a
graphical representation on the WSX front page, a
data file is never displayed on the WSX front page (as an
embedded item);
instead, when attempting to display a WSX data file, said data file is
either displayed
in a
new browser window/tab if an appropriate plug-in is installed in
the browser (e.g. a PDF reader plug-in will allow PDF files to be
displayed by the browser in a new window/tab), or, if no appropriate
plug-in is installed, then a "Save
As..." pop-up dialog will be displayed by the browser allowing
the reader to
save the data
file on their computer (e.g. trying to open a ZIP archive will
[typically] result in
having the "Save As..." dialog displayed by the browser).
Fig.x below illustrates the behavior of a WSX website when attempting
to open a ZIP archive data file: specifically, the "Save As..." dialog
is displayed by the web browser:
Fig.x:
Attempting to open a ZIP archive will [typically]
display
the "Save As..." dialog
The page browser menus
A page browser menu is a functional component of a WSX website that is
displayed inside the page
browser layout element
on the WSX front page, and whose intended
role is to provide the "table
of contents" for
the documents contained in a given
language
section of the website.
In order to achieve this functionality, each language section of a WSX
website has its own associated page
browser menu component, which should list the documents
contained in the
corresponding
language section.
The "logical position" of the page browser menus within the internal
structure of a WSX website is
illustrated in Fig.
below:
Fig.x:
Each language section has an associated page
browser menu
Out of all the
individual pager browser components (i.e. one page
browser
component for each
language section of a
WSX website) only one pager browser
component is displayed on the WSX front page at any given moment,
namely the pager browser menu of the
"currently" selected language.
For example, if at a given moment the selected
language on a WSX
website is 'English', then the page
browser menu displayed on the front
page will be the one associated with
the english version of the website:
Fig.x:
The language selection determines which page browser menu is
displayed
- note: as a general recommendation, a page browser menu should
list all
the documents contained in its corresponding language section; however,
this is not strictly
necessary as log
as all the language section's pages are
reachable in some other way (i.e. by following some other links than
the ones in the page browser itself). As a simple example to illustrate
this possibility, consider a "multi-page document" which might consist
of several web pages that are linked with one-another by means of 'Next
page' / 'Previous page' links contained
in each of the document's pages:
in this case it is possible (although not generally recommended) to
have only the first page of the "multi-page document" listed in the
page browser menu, while all the other pages of the "multi-page
document" could be reached starting from the first page of the document
by following the 'Next page' / 'Previous page' links contained in each
page of the document:
Fig.x:
A
"multi-page document" may have only one page listed in the page
browser menu
The page headers
A page header functional component is an internal component of a WSX
website that is displayed inside the page header
layout element at the top
of
the WSX front page, and it consists of a customizable image that may be
either centered at the top of the WSX front page or it may stretch on
the entire width of the front page.
In order to provide an increased
level of flexibility, the page header image displayed at the top of the
WSX front
page can
be
different depending on which language is selected
on the
website at a given moment; this feature is achieved by
having a separate page header image
for each
language
section of a WSX website.
The "logical position" of the page header functional components within
the internal structure of a WSX website is
illustrated in Fig.
below:
Fig.x:
Each language section of a WSX website has an associated page header
Out of all the
individual pager header components (i.e. one page header
component for each
language section of a
WSX website) only one pager header
is displayed on the WSX front page at any given moment,
namely the pager header of the
"currently" selected language.
For example, if at a given moment the selected language in Fig.x
below
is 'English', then the pager header
component that is automatically displayed
on the WSX front page will be one associate with
the english language
section of the WSX website:
Fig.x: The
language selection determines which pager header is displayed
The page footers
A page footer functional component is an internal component of a WSX
website that is displayed inside the page footer
layout element at the bottom of
the WSX front page, and it consists of a (simple) customizable HTML page that can
contain a combination of text, images, and/or links, possibly arranged
inside a table.
In order to provide an increased level of flexibility, the page footer
element on the WSX front page can display a different content depending on which language is selected on the
website at a given moment; this feature is achieved by having a separate page footer component for each
language section of a WSX website.
The "logical position" of the page footers within the internal
structure of a WSX website is
illustrated in Fig.
below:
Fig.x:
Each language section of a WSX website has an associated page footer
For example, if at a given moment the selected language in Fig.x
below
is 'English', then the pager footer
component that is automatically displayed on the WSX front page will be
the one
associated with the english language
section of the WSX website:
Fig.x: The
language selection determines which page footer is displayed
The language selector
The language selector is a functional component of a WSX website
that is displayed on the WSX front page, and it provides a means to
change the language
selection on a
WSX
website.
The "logical position" of
the language selector component within the internal structure of a WSX
website is illustrated
in
Fig.x below:
Fig.x: The
logical position of the language selector within the internal structure
of a WSX website
The visual
interface (on the WSX front page) for the language
selector component is the language
selector element, and at
any given moment it
highlights the "currently" selected language on the website.
For example, if at a given moment the selected language on the website
is 'English', then the language
selector displayed on the WSX front
page will highlight the 'English'
item (i.e. the
"currently" selected language):
Fig.x:
The language selector is
displayed inside the language selector element
The website icon
The website icon is a functional component of a WSX website that
consists of an
icon-sized image which is
displayed in the URL bar of
the web browser,
and whose intended role is to serve as a quick visual identifier for
the entire website.
The "logical position" of
the website icon within the internal structure of a WSX website is
illustrated
in
Fig.x below:
Fig.x:
The logical position of the website icon within the internal structure
of a WSX website
The visual
interface in a browser window for the website icon component is located
in the browser's URL bar, as illustrated in Fig.x below.
Fig.x:
The website icon is displayed
in the web browser's URL bar
The toolbox
The website toolbox is a functional component of a WSX website that
allows the reader to perform various website-wide
operations, e.g. to search through the WSX documents, or to
change the skin of the website, etc.
The "logical position" of
the website toolbox within the internal structure of a WSX website is
illustrated
in
Fig.x below:
Fig.x:
The logical position of the toolbox component within the internal
structure
of a WSX website
The visual
interface (on the WSX front page) for the toolbox component is
the
toolbox layout element, as illustrated in Fig.x below:
Fig.x:
The toolbox component is
displayed in the toolbox layout element on the WSX
front page
The full picture
This chapter has incrementally introduced the internal functional
components of a WSX website, and explained how, and when, these
components are "reflected" into the layout
elements of the WSX front page. A quick
reference diagram of the
internal
structure of a WSX website is summarized in
Fig.x below:
Fig.x: The
complete diagram of functional components of a WSX website
The behavior of hyperlinks
The HTML hyperlinks contained in
a WSX-based website, or the 'WSX hyperlinks',
have the same functional role
as the hyperlinks contained in a "traditional" website, i.e. they
provide a means for navigating the documents contained in a website by
clicking on a link; however, due to the specific characteristics of a
WSX-based website, the
WSX hyperlinks have a complex behavior that is different from the
"standard"
behavior
of a hyperlink, specifically:
- when a hyperlink is clicked on a WSX website, the corresponding
document (i.e. the
document "indicated" by the link) is displayed on the WSX front page inside the document viewer element,
and
- the state of the WSX website is automatically
updated according to the
language section where the newly opened document resides.
The general behavior of the WSX hyperlinks is graphically exemplified
in Fig.x
below, where a
hyperlink that is located anywhere on a WSX
website "points to" a french-language document titled
'Page #3'; in this case, clicking said link will always
result in the following sequence of
events:
- opening the
'Page #3' document in
the document viewer element on
the WSX front page
- updating the
language selection on the website to
'french' (i.e. the state of the
WSX website
will now become {French, Page #3})
- updating all
the layout
elements on the WSX front page to reflect the contents of the
french-language section (e.g. the page browser element will list the
french-language page
browser menu,
the page header element will display the french section's page header image, the
language selector
element will highlight the 'french' language, etc):
Fig.x:
The effect of clicking ANY
link on a WSX
website which points to the french-language 'Page#3'
- note: the WSX hyperlinks are the
basic "building block" of all the navigation functions on a
WSX-based website, i.e. all
the "clickable items" on a WSX website, whether contained in a WSX
document, or in a page browser menu, etc, are in fact based on a
hyperlink.
Example 1
The image in Fig.x below illustrates the logical position of a link
that crosses the boundaries of a WSX
website's language sections; specifically, the link is located on the french-language
'Page#2' and it points to the
'Welcome page' of the english-language section:
Fig.x:
Cross-language hyperlink (from french document to english document)
The way in which the link illustrated
above is reflected on a WSX website's
front page, together with the effect of clicking such a link, are
illustrated in Fig. x below:
Fig.x:
Clicking a cross-language link displays the "target" document
and changes
the language selection on the website
- The green-text
link to 'WELCOME PAGE (ENGLISH)'
displayed in the document viewer element in Fig.x above is a WSX
hyperlink that
"crosses the boundaries" of
the website's language sections; specifically, the
link itself resides in
french-language
document 'Page #2', but it "points
to" the english-language 'Welcome page' document
- The effect of clicking the green-text link highlighted in Fig.x
above is to both display the "Welcome page' document inside the
document viwer element, and also to change
the website state
from {French, Page #2} to {English, Welcome page} by updating all the WSX front page
elements according to the new language selection
Example 2
The image in Fig.x below illustrates the logical position of a link
that is confined within the
boundaries of the same language section of a WSX website;
specifically, the link is located
on the french-language page footer and it points to the front page of the
french-language section (i.e. the french-language 'Page#1'):
Fig.x:
Same-language hyperlink (from the french page footer to a french
document)
The way in which the link illustrated above is reflected on a WSX
website's
front page, together with the effect of clicking such a link, are
illustrated in Fig. x below:
Fig.x
: Clicking a same-language link displays the "target" document
and
leaves the language selection unchanged
- The red-text
link to 'PAGE #1 (FRANÇAIS)'
displayed in the page footer element in Fig.x above is a WSX hyperlink
that is
"confined within the
boundaries" of one language section; specifically, the link
itself resides
in the french-language page footer, and it "points
to" the
french-language 'Page #1'
document
- The effect of clicking the red-text link highlighted in Fig.x
above is to change the document that is displayed inside the document
viewer
element, but without changing the
language selection on the WSX website
The implementation of the language selector
As it was previously described, the language selector component is a
functional component of a WSX website
that provides a means to change the
selected language on a WSX
website. In terms of
implementation, the language selector component contains a set of links to the cover
pages of the website, as
illustrated in Fig.x below:
Fig.x: The
language selector component contains hyperlinks to the website's cover
pages
Given the above, the action of clicking
one of the items
displayed in the language selector element on the WSX front page
actually translates in clicking one of
the hyperlinks that are part of the language selector component,
which results in:
- "opening" the
corresponding cover page document in the document viewer element, and
- automatically updating
the language selection on the website
to
the language of the newly-opened cover page.
For example, Fig.x below illustrates the situation where an
english-language document is displayed on a WSX wesite (and thus the
english language is selected on the website), and then the 'french'
item is clicked in the language selector: as a result, the
french-language section's cover page gets displayed in the document
viewer element, and all the other layout elements
of the WSX front page are automatically updated to "reflect" the
contents of the french-language section (e.g. the page header is
changed to the french-section page header image, the page browser menu
will display the contents of the french-language section, etc):
Fig.x: Clicking the language selector's 'Français' link displays
the french-language cover page
and changes the
language selection on the website to 'french'
The role of the WSX cover pages
At this point in this presentation, the role of the WSX cover pages as "local
home pages" for each language section of a WSX website should
become
evident: specifically, each
time the language is
changed by using the
language selector element (i.e. by clicking on one of the language
selector's links), the document that will be automatically "opened" on
the WSX front page (i.e. in the document
viewer element) will always be the cover page of the newly-selected
language section.
An alternative (and probably more intuitive) behavior of a WSX website
when changing the language selection would have been to simply
re-display the document shown in the document
viewer in the newly selected language; however, this behavior cannot be
implemented
because the WSX template explicitly allows
the contents
of a WSX website to be organized
differently for each of the available languages, i.e. the
contents of a given language section can
consist of totally different sets of
documents, such that there is no guarantee that a document that
is displayed at a given moment in a given language is also available
(as a translation) in another language.
For example, consider a company where the
english version of the website contains a cover page
with a (brief) presentation of the company, plus a
number of other pages that each describe an individual product or
service; additionally, consider that the chinese version of the
website only contains an
introductory cover page, without any
additional pages
for detailing the individual products or services that the company
offers. In this case, if at a given
moment the selected language on the website is be english and the
browser displays one of the company's product pages, attempting to switch the language to
chinese by displaying said
product's page in chinese would not be possible because that product's
page does not exist in a chinese translation; this situation is
illustrated in Fig.x below:
Fig.x: Having
an alternative, more intuitive, language selector that would simply
change
the
language in
which the "currently" selected document is displayed is not feasible
on
a WSX website, because the
website's content can
be organized
differently in each of
the available languages
In summary, the choice
to
always display a language section's cover
page whenever
the language selection is changed on a WSX website allows a
consistent
behavior to be obtained, while minimizing the restrictions as
to how the website's multi-lingual content has to be organized.
The implementation of the page browser menus
As it was previously described, a page
browser menu component is
a functional component of a WSX website that is
intended to provide a "table of contents" for
a given language
section of the website.
In
terms of implementation, each page
browser menu component contains of a collection of links
that should "point" to
the documents contained in its corresponding
language section; this is illustrated in Fig.x below:
Fig.x:
Each page browser menu component contains links to WSX documents
Cross-language menu entries
Although the intended
usage of a page browser menu is to contain links that point to documents in its corresponding
language section, links to documents that belong to a different
language section (i.e. which are
written
in a
different language) are
also allowed; this type of links is illustrated in Fig. x
below, where a link from the
english-language page browser menu "points to" a french-language
document:
Fig.x:
Cross-language link contained in the english-language page browser menu
As it was previously
explained, if any
hyperlink on a WSX website
"crosses the
boundary" of a language
section, then clicking said link will not only display the
"target" document, but also change
the
language selection on the
website according to
the
language section where the link "points to"; thus, given the fact
that the page browser entries in fact consist of hyperlinks, the effect
of
clicking a cross-language link contained in a page browser menu is to
both display the "target" document in the document viewer element on
the WSX
front page, and also to automatically
change the language selection on the website according to the language
of the newly opened document.
For example, consider a real-world scenario that illustrates the
situation described in Fig.x
above, i.e. a WSX website whose english-language
page browser menu contains a link to the french-language 'Page #3'
document: in this case, the effect of clicking said [cross-language]
link will be to both display the 'Page #3' french document in the
document viewer element, and also to
change the language selection on the website to 'French' such
that all the layout elements on the WSX front page will be updated to
reflect the french-language content of the website; this is illustrated
in Fig.x below:
Fig.x:
Clicking a cross-language entry in the page browser menu
Creating a WSX-based website
The process of creating a
WSX-based website essentially consists of incrementally
customizing the internal
structure
of
the WSX template, according to the desired structure of the
website that is to be
created.
An overview of the functional
components that are part of the
WSX
template website is illustrated in Fig.x below:
Fig.x:
Overview of the functional components of the WSX template website
The file structure of the WSX template
Each functional component
of the WSX template is represented in the
template's file structure by a
dedicated file or folder contained exclusively inside the 'wsx_content'
sub-folder
of the template's root folder 'WSX'; in other words, all the
customizable files and folders of the WSX template (which together
represent the
template's functional components) reside inside the 'wsx_content'
sub-folder, while the remaining files and folders represent the
"fixed backbone" of the template which is "inherited" as-is by any
website that is built by customizing the WSX template; this is
illustrated in Fig.x below:
Fig.x:
The customizable and non-customizable content of the WSX template
The file structure of the 'wsx_content'
folder
The file
structure of the 'wsx_content' folder closely mirrors the logical
organization of the website, specifically:
- each language section of the website is represented by a language
sub-folder contained in the 'wsx_content' folder, and
- each functional component of the
website is represented by a
dedicated
file or folder that is contained in the
'wsx_content' folder or in one of the language sub-folders
The correspondence between the file structure of the
'wsx_content' folder and the logical organization of the WSX template
website is illustrated in the following diagrams:
- Fig.x below illustrates the complete file structure of the
'wsx_content' folder, together with
the correspondence between said file structure and the logical
organization of the WSX template:
Fig.x:
The correspondence between the file structure of the 'wsx_content'
folder and the functional components of the WSX template website
- the file structure of a language sub-folder, together with the
correspondence between said file structure and the logical
organization of a language section, are exemplified in Fig.x below in
the case of the english
language section of the WSX template:
Fig.x:
The correspondence between the file structure of the english-language
sub-folder and the functional components of the english section of the
WSX template website
The file
structure of the WSX documents
A WSX document has the same file structure
as any typical HTML document, i.e. it consists of a mandatory
HTML "skeleton file" which contains the native HTML elements that are
part of the document (e.g. text, tables, buttons, etc), plus an
optional collection of files which represent
the embedded objects that may
be part of the
document (e.g. images, media clips, applets, etc).
- note: the
only file that uniquely represents a WSX document is the document's
HTML skeleton file, while the other files that represent the optional
embedded objects can be shared between multiple documents (i.e.
a given image, or a media clip, etc, may be contained in more than one
WSX document)
The multi-file structure of a WSX document is exemplified in Fig.x
below with a generic document that consists of:
- a block of text and a button which are both native HTML
elements, and are thus contained inside
the HTML skeleton file 'document.html'
- an image and a flash video clip, which are both embedded objects and are contained
in the separate files
'image.jpg' and 'video.flv'
Fig.x: The
file structure of a WSX document
Given the file structure
of a WSX document as presented above, the WSX template imposes several
conditions on how
these files can be arranged inside the file structure of a
WSX-based
website; specifically:
- the HTML
skeleton
file of any WSX document has to reside inside one of the
language section folders of the website, either directly or in a
sub-folder, thus reflecting the mandatory condition that a WSX document has to logically reside strictly
inside
one of the language sections of a WSX-based website
- the files
that represent the various embedded objects that may be part of a WSX
document (e.g. images, video
clips, etc) can reside anywhere inside
the 'wsx_content' folder of a WSX
website, i.e. either directly in the 'wsx_content' folder, or in one of
the language folders, or in a sub-folder of a language folder, etc
The above conditions applied to the WSX template website are
graphically
illustrated in Fig.x below:
Fig.x:
The skeleton file of a WSX document must reside inside one of the
language folders, while the embedded objects files may reside anywhere
inside the 'wsx_content' folder
An illustrative example for how the files that constitute a WSX
document can be positioned inside the file structure of a WSX website
is the french-language document 'Page#3' of the WSX template website.
For example, the french-language document 'Page#3' illustrated in Fig.x
below consists of three files
that are "spread" in
the file structure of the WSX website, namely the HTML skeleton file
'page3.html' and two image files 'img.jpg' and 'book.png'
- the 'page1.html' skeleton file resides in the french language
sub-folder 'fr' of the 'wsx_content' folder, and it contains the
document's native HTML elements (i.e. the page title, the
sub-title,
and the line under the sub-title)
- the 'img.jpg' file contains the embedded image centered inside
the
document, an it resides "next to" the document's skeleton file in the
french section sub-folder 'fr'
- the 'book.png' file contains the small page-decoration image
placed at the
right of the
page title; a particularity of this page-decoration image is that it is not specific to the 'Page #3'
document, i.e. it appears not only in the 'Page #3' document but
also in other documents on the website, including in documents that belong to a
different language section (specifically, it appears in all the
documents contained in the french section and the english section of
the website)
Fig.x: a WSX
document is represented by a skeleton file that has to reside inside a
language section folder, plus a set of files that represent the
document's embedded objects which can reside anywhere inside the
'wsx_content' folder
Customizing the WSX template's folder structure
The root folder
The language sections folders
Using sub-folders for organizing the website content
Using hyperlinks
Internet links
Local links
Relative links
Creating a WSX document
Using the SeaMonkey editor
Orginazing a document using headings
Inserting an automatic table of contents
Inserting embedded items
Gotchas
Customizing the WSX control files
Defining the WSX home page document
The website icon
The pager headers
The page footers
The language selector menu
The page browser menus
Advanced options
Creating the site index for search engine optimization
Publishing a WSX website
This section presents the steps
required for uploading a WSX-based website on a webhosting server. It
will be assumed that the reader has some basic knowledge about the
process of creating a user account on a webhosting server, as well as
some experience with uploading files by using a common FTP program
such as FileZilla.
Requirements for the webhosting servers
The WSX template has been specifically designed to be deployable on
even the most simple, and often free, webhosting plans by reducing the
requirements on the webhosting servers to the bare minimum of providing
a simple web server, without requiring any of the more advanced
assisting technologies such as server-side scripting or data bases. In
brief, the only requirement for deploying a WSX-based website is that
the webhosting server runs a bare-bones HTTP server, which requirement
is guaranteed to be met by any
webhosting server.
Possible limitations of the free webhosting services
It is a common practice for free webhosting services to insert
(or "push") advertising messages and/or banners in the users' websites,
which
procedure interferes with the inner
workings of the hosted websites. Although special care has been
taken to make the WSX template very tolerant to "externally pushed"
content, it is possible that in some specific circumstances a
WSX-based website will not operate properly when hosted on such
webhosting plans. If a WSX website operates properly when browsed
locally on a computer (i.e. by opening the website's root file
before the website is uploaded
on a web server) but produces errors after being uploaded, it means
that the webhosting service interferes with the website in a way that
is not tolerated by the WSX template, and a different webhosting server
will have to be used.
Uploading a WSX-based website on the internet
The first step for publishing a WSX website on the internet is to register a user account with a webhosting
company, which will result in being provided with a private 'user
account folder' on the company's webhosting server(s).
Next, because all the files and folders of a WSX website are always
"packed"
inside a single top-level folder (namely, the root
folder of the
website),
the
process of publishing a website consists of simply
renaming the root
folder of the website to a desired name, and then uploading said root
folder of the
website into the user account folder created on the
webhosting server.
- note: because the root folder of a WSX website becomes a
sub-folder of
a user account folder when it is uploaded on a webhosting server, one can publish more than one WSX-based
website in the same user account for as long as the root folders
of the websites have distinct names
An example of publishing a WSX-based
website on the internet is
illustrated in Fig.x below:
Fig.x:
Publishing a WSX website on a web server
- the name of the web server in the example above is
'TheWebhostingCompnay.com'
- the user account folder is 'user-123'; this folder is
provided by the web hosting company when
a user creates a new account 'user-123', and it
is usually invisible to the user when uploading a website
- 'MyWebsite' is the [renamed] root
folder of the WSX website
that is being be published
The internet address of a WSX-based website
Given a webhosting server 'http://TheWebhostingCompany.com' and a user
account 'user-123' on the webhosting server (i.e. the situation
illustrated in Fig.x
above), a webhosting company will typically
make the contents of the user
account folder available over the
internet at one of the following two addresses (the decision of which
format to use typically belongs to the webhosting company):
- http://TheWebhostingCompany.com/user-123
- http://user-123.TheWebhostingCompany.com
Thus, for a WSX website whose root folder is named e.g. 'MyWebsite', the full internet address of the
website will depend on which format is used by the webhosting
company for publishing its users' account folders over the
internet:
- if the webhosting company uses the format
'http://TheWebhostingCompany.com/user-123'
for publishing a user
account folder over the internet, then the internet addresses of the
website will be: http://TheWebhostingCompany.com/user-123/MyWebsite
- if the webhosting
company uses the format
'http://user-123.TheWebhostingCompany.com'
for publishing a user account folder over the internet, then the
internet addresses of the the website will be: http://user-123.TheWebhostingCompany.com/MyWebsite
Simplifying the internet address of a WSX website
As presented in the
paragraph above, the "native" internet address of a WSX-based
website includes both a user account
name and the name of the website's root folder, e.g.
'http://user-123.TheWebhostingCompany.com/MyWebsite'; however, the internet
address of the website can be brought to a
simpler form, such that it will only
contain the desired website name.
Specifically, the process of simplifying the internet address of a WSX
website consists of the following steps:
- when creating a user account on a webhosting server in order to
publish the website, select
the name of the user account to reflect the desired name for the
website, e.g. for a website whose name should be 'MyWebsite'
select the user-account name 'MyWebsite'
- before uploading the website
into the user account, the
root folder of the website must
not be renamed from its default name 'WSX'
(i.e. in order to have a simplified address for a WSX website, the root
folder of the website must
have the
name 'WSX')
- finally, after uploading the website's root folder (which is
named 'WSX') on the
webhosting server, separately upload
the 'index.html' file contained in
the 'short_url' subfolder of the
website's root folder directly into the user account
folder
For example, for a website with the desired name 'MyWebsite', the
resulting file
structure on the webhosting server
is illustrated in
Fig.x below:
Fig.x: The
file structure on the webhosting server for a WSX website with a
simplified internet address
- CAUTION:
the 'index.html' file that has to be uploaded from the 'short_url'
sub-folder into the user account folder is NOT
the website's root file (the root file of the website is
the 'index.html' file
contained inside
the website's root folder)
By following the procedure described above, the website whose file
structure is illustrated
in Fig.x above will now be accessible at the simplified internet
address 'http://
MyWebsite.TheWebhostingCompany.com'
or 'http://TheWebhostingCompany.com/
MyWebsite',
depending on
the
internet publishing format
chosen by the webhostig company.
- note: if multiple websites are hosted in one single user account, the
method described in this paragraph can only be used to simplify the
internet address of one of
the hosted websites (specifically, the website for which the
root folder has
not been renamed from its default name 'WSX'), while the other websites
(i.e. the website for which the root folder has been renamed to a
customized name) will still be
accessible over the internet only via their "native" address as described in the preceding
paragraph.
Linking multiple websites published in the same webhosting
account
Internet links
Relative links
Appendix
The SeaMonkey HTML editor
Hacking
Editing the site skins
What's next
Gotchas
Temp
