Web Design Principles

1
Web Design Principles

• Large Site Design

2
Setting up your Own Web Server
3
What is Localhost?

• In order for a computer to provide network
  services it must be able to route packets to
  itself.
• By convention, 127.0.0.1 is called the loop back
  address.
• localhost or sometimes localhost.localdomain is a
  common name reference to the loop back interface

4
Downloading the Package

• http//httpd.apache.org
• http//www.webdevelopersjournal.com/software/apach
  e_web_server.html

5
Installation and Testing

• If using windows XP pro, install as a service.
• Service should be on by default
• Once you have installed attempt to point your
  browser to http//localhost

6
Installation and Testing

• If using windows XP pro, install as a service.
• Service should be on by default
• Once you have installed attempt to point your
  browser to http//localhost

7
Configuring Apache

• C\Program Files\Apache Group\Apache2\conf
• httpd.conf is the main configuration file for
  apache regardless of the operating system you use.

8
Basic Run-time Directives

• ServerName Specifies the name of the server.
  This is usually the hostname.
• ServerAdmin The email address of the server
  administrator (thats you!)
• DocumentRoot This is the main directory to look
  in for looking up web page requests.
• ltDirectory gt - This directive allows you to
  specify the permissions that apache should apply
  to a service directory
• DirectoryIndex Specifies the file to use when
  no file is specified (usually index.html)
• There are many more!

9
Host File

• Yes, there is one in Windows too!!!
• C\Windows\System32\drivers\etc\hosts

10
Host File

• Yes, there is one in Windows too!!!
• C\Windows\System32\drivers\etc\hosts

11
Extras (Not testable)

• ScriptAlias This aliases a directory for
  special use as a repository for storing
  executable programs. Database access and things
  like that.
• Example ScriptAlias /cgi-bin/ C/Project/CGI-Prog
  rams/
• VirtualHost
• IP Based This allows you to host multiple web
  sites with one web server using different ip
  addresses for each site.
• Name Based This allows you to host multiple web
  sites with one web server using a single ip
  address but with different host names.

12
Server-Side Includes
13
What are SSI?

• SSI (Server Side Includes) are directives that
  are placed in HTML pages, and evaluated on the
  server while the pages are being served.
• They also allow you to place content which is
  common to many pages in a single location and
  include them on all your pages.
• They let you add dynamically generated content to
  an existing HTML page, without having to serve
  the entire page via a CGI program, or other
  dynamic technology.
• The upside to all of this is that it makes it
  easier to maintain your web site.

14
Configuring Server-Side Includes

• Directives to enable SSI for the server
• AddType text/html .shtml .shtmAddOutputFilter
  INCLUDES .shtmlAddOutputFilter INCLUDES .shtm
• Directives to enable SSI for the site
• Place an Includes Option in the directory
  definition
• ExampleDocumentRoot C/Projects/WebPrinciples/ww
  wltDirectory C/Projects/WebPrinciples/wwwgt
  Options Indexes Includes FollowSymLinks
  AllowOverride All Order allow,deny Allow
  from alllt/Directorygt

15
Basic SSI directives

• SSI directives have the following
  formatlt!--element attributevalue
  attributevalue ... --gt
• It is formatted like an HTML comment, so if you
  don't have SSI correctly enabled, the browser
  will ignore it, but it will still be visible in
  the HTML source.
• If you have SSI correctly configured, the
  directive will be replaced with its results.

16
Dates and Time

• Todays Date
• You can place todays date (according to the
  server) on the web page when requested by
  usinglt!--echo var"DATE_LOCAL" --gt
• Last Modified Date
• ltpgt This document last modified on
  lt!--flastmod file"index.html" --gt lt/pgt
• Date Time Format
• You can set the format for the date and time as
  followslt!--config timefmt"A B d, Y" --gt

17
Dates and Time

• Todays Date
• You can place todays date (according to the
  server) on the web page when requested by
  usinglt!--echo var"DATE_LOCAL" --gt
• Last Modified Date
• ltpgt This document last modified on
  lt!--flastmod file"index.html" --gt lt/pgt
• Date Time Format
• You can set the format for the date and time as
  followslt!--config timefmt"A B d, Y" --gt

18
File Inclusion

• Arguably the most important reason to use SSI for
  large sites.
• Examples
• lt!--include virtual"/footer.html" --gt
• lt!--include virtual../header.html" --gt
• lt!--include virtualheader.shtm" --gt
• Conventions
• .shtml or .html represent Full Documents
• .shtm or .htm represent Document Fragments

19
Example
/cp_content.shtm
ministries/index.shtml

• lttable cellpadding"0" cellspacing"0"
  border"0"gt
• lttrgt
• lttdgtltimg src"/images/cp_very_bottom_banner.
  jpg" alt"" border"0"gtlt/tdgt
• lt/trgt
• lttrgt
• lttd valign"top" class"cpcontent"
  background"/images/cp_content_background.jpg"gt
• lt!--if expr"QUERY_STRING ''" --gt
• lt!--include virtual"/DIRECTORY/index
  .htm" --gt
• ltp style"font-size 10px"gtThis Page
  Last Modified lt!--flastmod virtual"/DIRECTORY
  /index.htm" --gtlt/pgt
• lt!--else --gt
• lt!--include virtual"/DIRECTORY/QUER
  Y_STRING.htm" --gt
• ltp style"font-size 10px"gtThis Page
  Last Modified lt!--flastmod virtual"/DIRECTORY
  /QUERY_STRING.htm" --gtlt/pgt
• lt!--endif --gtlt/tdgt
• lt/trgt
• lt/tablegt

• lt!--set var"DIRECTORY" value"ministries"--gt
• lthtmlgt
• ltheadgt
• lttitlegtWelcome to Crossway Churchlt/titlegt
• ltlink rel"STYLESHEET" type"text/css"
  href"/site.css"gt
• lt/headgt
• ltbody class"contentpage"gt
• lt!--include virtual"/cp_menubar.htm"--gt
• lt!--include virtual"/cp_header.shtm"--gt
• lttable border"0" cellpadding"0" cellspacing"0"
  width"757"gt
• lttr height"500"gt
• lttd valign"top" width"156"
  background"/images/spacer.gif"gt
• lt!--include virtual"menu.htm"--gt
• lt/tdgt
• lttd background"/images/spacer.jpg"gt
• lt!--include virtual"/cp_content.shtm"--gt
• lt/tdgt
• lt/trgt
• lt/tablegt

20
Complete List of Basic Directives
21
SSI/CGI Environment Variables
22
Concurrent Versioning
23
What is CVS?

• CVS is a system that lets groups of people work
  simultaneously on groups of files
• It works by holding a central repository' of the
  most recent version of the files.
• You may at any time create a personal copy of
  these files by check out' of the files from the
  repository into one of your directories.
• If at a later date newer versions of the files
  are put in the repository, you can update' your
  copy.
• You may edit your copy of the files freely. If
  new versions of the files have been put in the
  repository in the meantime, doing an update
  merges the changes in the central copy into your
  copy.
• When you are satisfied with the changes you have
  made in your copy of the files, you can commit'
  them into the central repository.
• When you are finally done with your personal copy
  of the files, you can release' them and then
  remove them.

24
Basic Words and Descriptions

• Repository
• The directory storing the master copies of the
  files. The main or master repository is a tree of
  directories.
• Module
• A specific directory (or mini-tree of
  directories) in the main repository. Modules are
  defined in the CVS modules file.
• RCS
• Revision Control System. A lower-level set of
  utilities on which CVS is layered.
• Check out
• To make a copy of a file from its repository that
  can be worked on or examined.
• Revision
• A numerical or alpha-numerical tag identifying
  the version of a file.

25
Basic Command Set

• cvs checkout (or cvs co)
• To make a local copy of a module's files from the
  repository execute cvs checkout module where
  module is an entry in your modules file (see
  below). This will create a sub-directory module
  and check-out the files from the repository into
  the sub-directory for you to work on.
• cvs update
• To update your copy of a module with any changes
  from the central repository, execute cvs update.
  This will tell you which files have been updated
  (their names are displayed with a U before them),
  and which have been modified by you and not yet
  committed (preceded by an M).
• It can be that when you do an update, the changes
  in the central copy clash with changes you have
  made in your own copy. You will be warned of any
  files that contain clashes by a preceding C.
  Inside the files the clashes will be marked in
  the file surrounded by lines of the form ltltltlt and
  gtgtgtgt.
• You have to resolve the clashes in your copy by
  hand. After an update where there have been
  clashes, your original version of the file is
  saved as .file.version'.
• If you feel you have messed up a file and wish to
  have CVS forget about your changes and go back to
  the version from the repository, delete the file
  and do an cvs update. CVS will announce that the
  file has been "lost" and will give you a fresh
  copy.

26
Basic Command Set contd

• cvs commit
• When you think your files are ready to be merged
  back into the repository for the rest of your
  developers to see, execute cvs commit.
• You will be put in an editor to make a message
  that describes the changes that you have made
  (for future reference).
• Your changes will then be added to the central
  copy.
• If you haven't updated to the most recent version
  of the files, CVS tells you this then you have
  to first update, resolve any possible clashes,
  and then redo the commit.
• cvs add and cvs remove
• If changes involve a completely new file, or
  removing an existing one.
• You still have to do a commit after these
  commands to make the additions and removes
  actually take affect.
• When another person checks out the module in the
  future they will not get the files that were
  removed.
• But if asking for older versions, the file will
  be checked out of the Attic.
• cvs log
• To see the commit messages for files, and who
  made them, use cvs log filename(s)'
• cvs diff
• To see the differences between your version of
  the files and the version in the repository do
  cvs diff filename(s)'

27
Basic Command Set contd

• cvs tag
• One of the exciting features of CVS is its
  ability to mark all the files in a module at once
  with a symbolic name. You can say this copy of
  my files is version 3'. And then later say this
  file I am working on looked better in version 3
  so check out the copy that I marked as version
  3.'
• Use cvs tag to tag the version of the files that
  you have checked out. You can then at a later
  date retrieve this version of the files with the
  tag.
• cvs tag tag-name filenames Later you can do
• cvs co -r tag-name module
• cvs rtag
• Like tag, rtag marks the current versions of
  files but it does not work on your local copies
  but on the files in the repository.
• To tag all my libraries with a version name I can
  do cvs rtag LIBRARY_2_0 lib This will
  recursively go through all the repository
  directories below lib and add the LIBRARY_2_0 tag
  to each file. This is one of the most useful
  features of CVS (IMHO). Use this feature if you
  about to release a copy of the files to the
  outside world or just want to mark a point in the
  developmental progression of the files.
• cvs history
• To find out information about your CVS
  repositories use the cvs history command.
• By default history will show you all the entries
  that correspond to you.
• Use the -a option to show information about
  everyone.

28
Using Smart-CVS

• http//www.smartcvs.com/tutorial/html/tutorial.htm
  l

29
File Types

• Image files are binary
• CVS has been programmed on the server to
  automatically commit gif, jpg, png, pdf, doc, etc
  files as binary.
• However, you can not guaranty that this was done
  on any given cvs server.
• Always, be sure to commit text files differently
  then binary files.
• Binary files that are saves as text will be
  corrupted