Lecture Summary 5
Prepared by: Anthony Larrain
Project
- Details Posted later.
- Due a couple of days from the final. (No late projects accepted)
- Worth 20% of your grade.
- A 5 - 7 page website centered around you, a hobby or an activity you are involved with
- You must have a link on your homepage that solves some javascript problems. I will post those problems a week before the due date. Note these problems probably will not be related to your website. So if you design a site that you want to use after the class. You can simply remove the link once you receive your grade.
- One of the pages must contain some javascript code written by you.
- Must follow design guidelines.
- You must do your own project. The project is NOT a group effort.
- Start thinking about your topic.
- Once you have the topic start thinking about content.
- Spend allot of time surfing the web and look at similar sites. Save the links, write down ideas. Allot of time 5,10,15 hrs. Don't worry about other sites layout, fancy graphics, you are looking for ideas pertaining to content.
- Talk to friends, classmates, teachers etc.. about content.
- You can develop from scratch or use my template.
- We will spend most of todays lab working with the project template.
- Put some time into this and enjoy.
Website
- A set of interconnected web pages, usually including a homepage, generally located on the same server, and prepared and maintained as a collection of information by a person, group, or organization
- The web pages of a web site should obey the 4 basic design principles
- Each web page should look like it belongs to the same web site.
- The template we will look at today will take a nice and simple structured approach.
- Each web page associated with the "template" site will be broken down into 4 simple divisions
- A header, this is were the site logo and introduction will go. Domain name often appears here.
- Navigation Link. Links that take you to other pages of your web site. They must be easily located and precise.
- The content area. This will contain the content of that page. Use HTML and CSS to structure and present your content. Use headings, paragraphs, lists, tables etc.
- The Footer area. Copyright info and contact information.
4 Basic Design Principles - C.R.A.P
Taken from The Non-Designers Web Book by Williams & Tollett
- Contrast
- Avoid items on a page that are merely similar.
- If the items are not the same, make them very different.
- Contrast is often what draws a reader to the page in the first place.
- Rule: Do not use more than two different fonts per page. Make the fonts very different to make their difference obvious.
- Fonts can contrast in family, size, weight, and, color.
- Repetion
- Repeat visual elements of the design throughout the web site.
- Different pages in the site should look stylistically the same.
- Alignment
- Do not place items on a page arbitrarily.
- Every element on a page should be placed in relation to the other elements on that page.
- Center page elements rarely. Left alignment usually works better.
- Stay away from justified text. Note: Your teacher violates this one
- Proximity
- Items related in meaning should be grouped together.
- Proximity keeps a page organized and reduces clutter.
Project Templates
I suggest using the template. This way you can focus on the structure and presentation of the content.
Here is the project template without any styles
Don't forget to change the data in the template to reflect your site. Also, you should play with the styles and come up with your own colors, fonts etc..
I will go through the HTML code in class. In lab you will add the styles.
Here is an example of content being added to the homepage
Linking to files on your web site.(More on relative URL's)
Your directory structure at your webhost or students account should be similar to this
public_htmlis the parent ofit130hw labs projectare children or sub directories ofit130hw labs projectare all siblings of each other- Different directories can contain files with the same name.
Example - public_html, lab and project can all contain a file called index.html
For the following code examples, assume we are in any HTML file in the project directory.
This assumes about.html is also in the project directory
This assumes cumberland1.jpg is also in the project directory
This assumes the project directory has a sub directory called images with a cumberland1.jpg file in it.
This takes you back one directory, back to it130, now we move forward to the hw directory and get the hw1.html file from the hw directory.
What does this do ?
Checking your Disk Space Usage
For 000Webhost
- Login and go to control panel.
- Look for account information on the panel to your right.
- You should see something similar to this
000webhost provides a lot of free space. Should'nt have to worry for this course.
For Student Accounts
- Your students account gives you 15MB(mega bytes) of storage.
- If you exceed this limit you will not be able to upload any files.
- Two ways to check your usage: First start SSH, and log in to your account.
- From the main MENU --> Window ---> New Terminal
- Hit enter once or twice in the new window
- You should see a prompt similar to: students %
- At the prompt type in
quota -v. If this command works this will tell you how much space you are using and how much is available. - If the above command does not work, type in
du -k - Look at the last number, when this number approaches 15000 this means you are getting close to using up your allocated space.
- To free up some space , just delete some files.
- Before you delete files you may want to save them on your home computer.
- Make sure you do not delete files needed for your projects or future lab checks.
- If your spacing is filling up, check for large image files and delete those.
Hosting A Site Beyond Depaul
- Need to locate a server
- Online services, like AOL provide some space for you to host a web site for free.
- Your ISP may provide web hosting services. Talk to your ISP.
- Your job may provide server space
- Find a Web Hosting Company
- Some companies like, Geo cities provide free hosting
- The free sites typically give you a small amount of space and flash banner adds across your visitors screen
- If you can afford it the pay sites are the way to go.
- Here are a few I have used
There are many web hosting companies. Go to yahoo and type "web hosting companies" into the search box.
.Get Your Own Domain Name
- You to can be a
www.yourname.com - Go to a registry and check to see if your domain name is available
- In addition to .com there are other suffixes for domain names. Here are a few.
- .net
- .org
- .biz
- .info
- .us
- Like web hosting companies there are many Registries. Most web hosting companies provide you with registry services.
- Yahoo has a registry
- Once you have a domain name registered, you can point that domain name to an existing site
Check out www.tonylarrain.com
Here, I registered my Domain name through Yahoo and then pointed the location URL to condor.depaul.edu/~alarrain/hci201