Web Development Task 2.2

Task02 GRADE SHEET | Tasks due by 11:59 p.m. on due date.

You may use any applicable tool to do this task. Use the Atom editor or try a different tool. You may use a WSIWYG html editor or any other free editor or Dreamweaver.

You have a lot of sources for ideas:

• Free CSS3 Templates
• Free HTML5
• Open Design Community website
• Free Open Source Web Designs
• OS Templates Premium & Free Website Templates - CSS / (X)HTML + PSD

You may make your site exactly like the examples if you wish, but I hope that you will find this task useful enough to custom-build your sites to meet your own needs and design ideas.

You may build upon Task 2.1 or use the foundation demo site. Or you may use a template to create an entirely different look. But the site must meet the conditions specified for this task.

You will create a web site for use in your work with this and other classes. In its structure, your site will look something like this diagram:

In particular, your site will include the following:

A top level home page that will incorporate at least your name, links to at least the second level pages on your web site, and your email address which should not be retrievable by a web crawler. You should obfuscate your email address. You may use this service to obfuscate the email address, or some other strategy. If you decide to use a contact page you can put your email address there or use a form.

Three or four second level pages

1. A second level page about you. The information on it may be real or imaginary, but it needs to be somewhat professional. The page needs to include a link to a pdf version of an on-line résumé. Again, the information on the résumé may be real or imaginary, but it needs to be somewhat professional.
2. A second level page that lists all the courses you are currently taking. This page will also have third level pages.
3. A second level page that introduces topics or items of interest to you. This second level page should incorporate an ordered list of the 10 books you’d take with you if you were marooned on a desert island.
4. An optional contact page where you put a form.

Four third level pages

1. In the model above, there is a third level page for each of your classes. On each of these pages put a brief paragraph about each class.

Look and feel

Keep your site consistent in look. If you don't choose to use a template, at least ensure that all the pages share a similar look in terms of backgrounds, font style and color, and use of bullets.

Don't overload your home page. Keep it simple so that it loads quickly

Navigation

use hyperlinks (either as text or as linked image objects) to ensure the user can navigate throughout your site.

Every page in the site should have hyperlinks to your home page.

All pages should have links to other pages on the same level in the site structure.
In our example above,

• about should have links to home, classes, and interests
• classes should have links to home, about, and interests
• interests should have links to home, about, and classes
• each of the four task pages should have links to all other task pages

All pages should have links to pages one level below it in the site structure.
In our example above,

• home would have links to about, classes, and interests
• classes would have links to each of the four task pages

All pages should have links to pages one level above it in the site structure.

• the links to home will suffice for this requirement for about, classes, and interests
• each of the task pages should have a link to the classes page and to the home page

Put a page updated link on each page

http://javascript.about.com/od/reference/fl/How-to-Find-When-a-Web-Page-Was-Last-Modified.htm

Add some dynamic HTML to your site

Client-side Script

one example of a javascript client side script somewhere on your site. This is in addition to the  page updated link. Here are some links to some samples

• http://www.htmlgoodies.com/beyond/javascript/article.php/3887346/Top-10-JavaScript-Snippets-for-Common-Tasks.htm
• http://www.javascriptsource.com/snippets/
• http://www.webhostingsecretrevealed.net/blog/featured-articles/15-cool-javascript-sample-snippets/
• https://webdesignledger.com/javascript-code-snippets/

Server Side Script

Create filename example.php somewhere on your site. Link to it from any page. Put a custom php echo in the page and upload it. Don't use hello-world. Change it to something else. See this page for how to create the php page

This will satisfy your server side script requirement.

W3C Validation

At a minimum, your home page needs to meet W3C validation for HTML and for CSS. It must validate in order to get any points for this component. If it doesn't validate, the W3C tool will point out the line of code where the invalid code is located.

If you are using the Bootstrap framework or a Bootstrap based theme, then use this validation service: validator.nu.

If your non-Bootstrap HTML or CSS does not validate

at W3C, and you don't think it is your error, run it past the validator.nu service to double check the errors. Your sites that you have to build do not usually need all the CSS that is in a theme, so you might try deleting and offending line. Make sure you back up your home page.

Please validate your pages and fix what you can before you submit for early review. One thing that the validation wont catch, but that I will catch, are your page titles.

This is not valid code for your project:

<title>Innovation Theme - Home Page</title>

<title>Task-2.1</title>

Every page requires a custom title:

home page:     <title>Your Name - Home Page></title>

level 2 page:  <title>Your Name - Interests</title>

level 3 page:  <title>Your Name - Classes - INLS161</title>

File Naming

Dont leave any spaces in your file names or directory names.

https://opal.ils.unc.edu/~lblakej/task 2.2/  <!-- this has a space! -->

Saving to a server

When you create this site, create it to a folder on your computer give the folder the name you want for your site.

When you publish it to Opal, publish the entire folder.

Esthetics

The esthetics grade is going to be the toughest part to gain a full credit. ( But this is not the majority of the grade, so don't get too anxious!) If you only have one image on your site and the flow does not work from page to page, then you are not going to do as well on this section as someone that puts in the work.

The top students will have CSS or HTML images on every page and it will be obvious that they have put in significant time and thought. If you are using a fancy theme, and you don't make it your own, you may not do as well as someone that uses the 2.1 theme, but adds a lot of custom work. In short, this is my career, so I will know what you did or did not do.

Here is the link to the all the code examples that I covered in the last class. Navigate to the code you need, right click to see the code and copy and paste as you need.

If you include an SVG graphic, I will be impressed. I demonstrated how to do this in one of the classes.

CSS Review

Make sure that you put CSS code in your CSS file and in your HTML page, or it won't work.

Let's say you want to align an image to the right and resize it to medium. You need two classes.

Put this in your css file:

img.align-right   {
float: right;
margin-left: 10px;}

img.medium {
width: 250px;
height: 250px;}

Put this in your html page file:

Then inside your <img> add a class="first-class second-class"

Example:

<img src="images/my-image.jpg" class="align-right medium" />

If you just need one class, that will work also, you do not need two classes.

Submission

After you have published your web site, send me a note telling me that it is ready for viewing and tell me your site's URL so I can find it. When I type in
 http://opal.ils.unc.edu/~yourOnyen
or
 http://opal.ils.unc.edu/~yourOnyen/yourFolderName
I should open up your home page. This means your home page should be named index.htm or index.html.