INLS161-002 | Spring 2017
1|1138|1153|1181|1197HomeSyllabusScheduleTasksContact Grades Class Blog

Web Development Task 2.2

Tasks due by 11:59 p.m. on due date.

Task02 GRADE SHEET (UPDATED w/PHP deletion)

Quick links that are helpful to have:

NEW VIDEO: Integrating Google Fonts in your site
NEW VIDEO: Automatic Push Webhook Setup

This above demo site is built entirely with the skeleton boilerplate and a responsive menu snagged from codepen. Those two items are the basis for the 2.1 theme. Here are links specific to the 2.1 theme:

Below is the html code for alignment; put these in your .htmland they will connect with the css in your custom.css file.

<img class="align-right" src="images/clock.jpg" alt="clock image">
<img class="align-left" src="images/clock.jpg" alt="clock image">
<img class="align-center" src="images/clock.jpg" alt="clock image">

The CSS code for alignment should be in your custom.css file.

If you have a larger image, and you want to contain it to a column, and you want it to resize when the browser size is minimized, use the below image class. This image class was created by the author of the skeleton theme, and if you have linked to the skeleton.css file, then it should work for you.

<img class="u-max-full-width" src="images/image.jpg" alt="Image Description">

The name of the class is important to breakdown: u is for utility. So this is not a foundational css rule; it is a useful utility. The max-full-width part of the name describes what it does. It makes sure that an image will resize and fill up the column.

Text Editors

You may use any applicable tool to do this task. Use the Atom editor or try a different tool. (Atom is probably the best option if you don't want to break your work-flow to go to the command line every time you want to git add and git commit and git push.) But, if you are okay with the command line, you may use a WSIWYG html editor or any other free editor or Dreamweaver. (Adobe has integrated git into Dreamweaver).

You have a lot of sources for ideas:

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 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:

Top Level Page

A top level home page that will incorporate at least your name, links to at least the second level pages on your web site.

Obfuscated Email Address

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

Since we did not incorporate this in the 2.1 starter theme you will need to add it to each page. I will demonstrate how to do a global project search and replace to get this done fast.

Look at the code on my demo site index.html to see an example of this working as a self-contained script:
See line 58 through 60

I have a different example on my demo site about.html page. It is using the DOM tree and getting the element by ID:
See line 60 for the html and line 63 for the src file connection

This is the main.js file with the javascript:
Look at line 3

More info on Document.lastModified from Mozilla Developer Network.

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.

If you follow the tutorial on the web lab page in the lab class session, and use the get element by ID process with the linked main.js file, that will be sufficient for this task, and you will not have to go looking through the links below.

Here are some links to some samples. Some of these are difficult, so don't choose any that are too hard. Go for the easier ones.

You do not have to complete the server side script task

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.

images/head shot.jpg/  <!-- this has a space! -->

Saving to a Carolina CloudApps

When you create this site, create it in the repository that you have pulled from Carolina CloudApps Source Control. You will then git push it to your Source Control Account.

Automatic Push to Console

If you did not get this set up in the class session, here is a video on how set up an automatic build with a webhook.

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.

If you include a custom made SVG graphic, I will be impressed. I demonstrated how to do this in the images class with the method draw web-based editor.

Submission

You will use git push to submit your website to Carolina CouldApps.



last page update: Friday Oct 20, 2017

Quick Links

Instructor

Lawrence Jones

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Office hours by appointment.