Notes on Site Construction

1
Notes on Site Construction File Management
2
Organization and Site Structure

• Organizing your site carefully from the start can
  save you frustration and time later on
• Break down your site into categories and put
  related pages in the same folder

3
Site Structure Example

• Root
• Images
• Photo1.jpg
• Logo.gif
• Main (index.html)
• Company Services
• Products
• About Us
• Contact

4

• Root
• Main Page
• Company Services
• Service A
• Service B
• Images
• Products
• Product A
• Product B
• Images
• ProductA.jpg
• ProductB.jpg
• About Us
• Company History
• Bios
• Images
• Contact
• Images
• Images

A More Elaborate Site
5
Source File Management

• As you build your portfolio of web pages and
  other files, it is critical that you manage the
  source for all of those products
• .html
• .gif
• .jpg
• .pdf
• Develop a set of practices that you always use to
  work with your source

6
Source File Management

• You should ...
• Establish and follow file naming conventions
• Lowercase
• Underscore between words
• Keep a copy of all source files in your
  possession
• Don't rely on DePaul, your employer, or your ISP
  to keep your work

7
Source File Management

• You should ...
• Make a working copy of files before making
  sweeping changes, then use the working copy once
  you are sure everything works
• Create an archive of sources that you are not
  actively using, but may want to use sometime

8
Source File Management

• If you do not manage your source files, you may
  experience the following
• Time wasted in trying to figure out which of your
  multiple copies is the right one
• Inability to re-create your site in another
  environment, such as if you change ISPs or
  employers

9
Error Checking

• ALWAYS check and double-check the site for
  spelling and grammatical errors
• Make sure the images and links are all working
  properly (TEST!!!)
• Errors make a site appear to be unprofessional

10
Troubleshooting

• If your page doesn't look like you think it
  should look, check the following
• Make sure all tags are closed correctly. Check
  that.....
• there is a closing tag, especially for
• Lists, headings, bold, font
• the tag name is spelled correctly
• htm or html?

11
Troubleshooting

• Cont
• the end tag matches the start tag
• lth2gt lth3gt
• both angle brackets are there
• the tags are nested properly
• Wrong ltligtltbgtItem namelt/ligtlt/bgt
• you have quote marks around values of attributes

12
Troubleshooting

• Make sure you refresh your browser if you have
  made a repair to the code and come back to look
  at it again

13
Relative paths

• What if the destination is not in the same folder
  as the source
• We can use relative path syntax for navigation
• Elements
• /
• go back up to the very top
• foo/
• go down to a child folder named "foo"
• ../xyz.html
• go up to the parent folder and access file
  xyz.html
• ../foo/abc.html
• go up to the parent folder, then to the folder
  foo (in the parent folder and then access file
  abc.html in foo.
• Note this applies when linking to other pages
  (using ltagt tag) or when embedding an image in the
  html file (the ltimggt tag).

14
Relative paths - Examples
public_html
main.html
file1.html
hci201 folder
images folder
hw_ images
hw.html
hw.jpg
lta hreffile1.htmlgt
Link main.html to file1.html
lta hrefhci201/hw.htmlgt
Link main.html to hw.html
ltimg src images/hw_images/hw.jpggt
hw.jpg as an image in main.html
lta href../main.htmlgt
Link hw.html to main.html
ltimg src../images/hw_images/hw.jpggt
hw.jpg as an image in hw.html
15
Your Workspace Structure

• Your local directory structure
• where you are writing your web pages
• Must match the structure on the server
• contents of public_html directory
• Otherwise
• links will work when you test locally
• but not after being uploaded

16
Logical Site Structure

• Logical
• How documents relate to each other
• Physical
• Where a document lives - location on server
• A sites logical structure is more important to a
  user than its physical structure

17
Logical Organization Models

• Linear
• Hierarchy
• Full Mesh

18
Linear
Page 1
Page 4
Page 3
Page 2

• Pros
• Corresponds to traditional print media
• Step-by-step
• Good for presentations, tutorials, or online
  sales pitch
• Cons
• User may find restrictive
• Suggestions
• Let users know how far they are in a linear
  structure
• E.g. page 4 of 10
• Side Trips
• Can be used in conjunction with other
  organizational models

19
Hierarchical

• Most Common
• Can be modified to hide or expose as much
  information as necessary
• As the user clicks deeper into the site, the
  choices get more specific

20
Hierarchy Narrow Trees

• Main disadvantage
• May increase number of clicks

21
Hierarchy Wide Trees

• Main disadvantage
• Too many options
• Confused users
• Links get lost in the crowd

22
Full Mesh

• Every page links to every page
• of links of page x ( of pages - 1)
• E.g.
• 5 page site has 20 links
• 10 page site has 90 links
• Usually a complex navigation bar is needed

23
Deep vs. Shallow Site

• Characterized by number of clicks
• Studies suggest that users prefer sites that
  require fewer clicks and are more satisfied with
  a wide selection of choices
• Aim for click depth of 3