Task 02: Web Development


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

Task02 GRADE SHEET 02.01 Finished Sample One Page "Creative" Finished Sample One Page "Green" Starter Files

2.1 Download the 02.01 Starter theme. If you are going to use the 2.1 Starter theme, this will satisfy your hard coded page requirements and it will give you clear directions to flesh out your final project. However, if you find a good theme that you like, you may find that more to your liking. You will have a better idea of how to proceed after completing the first two classes.

The README.md file that goes with this theme has a lot of helpful links and examples which will help you make the most of this template.
due 02/04/19
2.2 Regardless of your theme choice, you must complete all of the tasks detailed below which are also detailed in the Grade sheet.

A good success strategy is to highlight each row in the spreadsheet after you have completed the task.

The information below is keyed to the grade sheet by task number [02.01] or [02.02] + a letter [a],[b],[c] etc.
due 02/24/19
2.3 Common Problems when trying to finish this project

Task 02.01: Create page in the 02.01 Starter theme

The instructor needs to see that you can make basic edits and get a test site up on opal

a. create at least an index.html page with 02.01 theme

b. link CSS files

Link to the CSS stylesheets in your 02.01 template directory

c. ftp entire 02.01 folder into your public_html directory on opal

If you have an index.html page in your public_html directory root, it will hide all of your directories, so you will not be able to see any directories in there from a browser view. Rename it or delete it, so I can see your directories, for now. To repeat, Any index.html or index.php file will take over the directory and the web browser will not show the files or folders in that directory. For the purposes of teaching this class, that is what I want you to do, but that is not best practice when you do post a final project to a public_html directory.

At the end of this class, you may move your website into the public html directory and let the index.html serve up your home page for that directory, if you wish. (You will have access to your opal account until you graduate from UNC.)

So do follow the best-practice rule for your web directory versions: always use an index.html for your home page.

d. send instructor a note

Send the instructor an email note with the full URL for the site. This will load the index.html page in the root of the directory (see above). Instructor should be able to click link in the email to view page. Example: http://opal.il.unc.edu/~onyen/task-02.01 (obviously onyen will not work; you will have to provide the link to your account.)

Task 02.02 Continue with the 2.01 starter theme, or choose a free responsive theme.

free theme sites where you can search for a responsive theme:

02.02 Structural Skills

a. just as in your 02.01 task, Home page should be named index.html. Do not name it home.html

b and c. HTML Validation and CSS 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 does not validate, the W3C tool will point out the line of code where the invalid code is located. This is an all or nothing grade. One wrong character will drop a high A grade to an A-. You are allowed to fix this after the project is graded, so don't tie yourself up with worry over this.

The final version of Home Page should validate here: https://validator.w3.org/. Click your home page menu link and copy that link that is in the URL bar. Then paste the copied link in the at the validator service where it asks for the Address: The validator needs an actual file ending in .html,
so use this:

 https://opal.ils.unc.edu/~onyen/website-final/index.html ✅

Don't use this:

https://opal.ils.unc.edu/~onyen/website-final/  ❌

(This applies to the CSS validator, too.)

The final version of index.html page CSS should validate here:https://jigsaw.w3.org/css-validator/

If the validation fails due to a problem with the theme, or the theme css, or a code problem with a cut and paste, it will not count against you. This will apply only to your coding. This will be obvious when you check it, as it will point out the error. Validation warnings are not a problem.

Spaces and Naming

In general, do not allow your page titles or directory titles to contain spaces. Use linux naming conventions. Use lowercase and hyphens. Rename My image.PNG to my-image.png.

Watch out for the fact that the file extensions may be hidden from you on your laptop; so, you might see this after you post to OPAL:

my-image.PNG.png
If this is the case, then you will need to correct/confirm both your file name and the link (to that file) in your html page.

These problems are not all or nothing, but I will expect you to fix them for full credit for this Structural grading section.

Page last updated and contact info

d. Page updated in footer of each page

Add a date updated on each page. Build this out from the template, or use global search and replace. This is javascript, but it is cut and paste, so it does not fulfill the javascript requirement.(see below)

<p>
  <script>
    document.write("Page last updated on " + document.lastModified);
 </script>
</p>

e. Obfuscated Email Address

Ensure there is a way to contact the person responsible for the web site on your home page.

Your email address should not be retrievable by a web crawler. You should obfuscate your email address. You may use this email riddler 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.

If you create a contact form, it will not be possible to use the contact from from opal.

If the link is harvestable, you will receive 80% for this component.

If you choose to use a contact form, you may have to include your email in your hard code. This task may also be javascript, it does not count towards your javascript example

02.02 Content

f. Résumé

Create a relative link to a resume that is stored in your root folder. Put your link to the résumé on the home page or the about page. Put your resume in your root folder so that you can simply link to it like this:

<a href="resume.pdf">Download my Résumé</a>

Do not put any diacritical marks on your file name, but you may do so on your inner html (see above example). 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. If your résumé is in either HTML or a proprietary format, you will receive 70% for this component. If your résumé is in PDF format, you will receive 100%."

g. Lists

Create a second level Interests page that lists areas of personal interests. 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, but you can expand the interests page as a palate to place anything you want on it.

h. Links

Relative Links

All of your navigation links should be relative links and your resume link is a relative link, so you already have some relative links. Next, you are going to copy and paste some relative links on your INLS 161 class web page. It is not critical that you understand the full scope of this section by the web development due date, but do try to read it over. At the minimum, get the first code block copy and pasted.

For the purpose of grading this 02 project, all you really have to do is copy and paste the code block (below) on your INLS 161 page.

Here is the code block that you should cut and paste into your INLS 161 page:


      <ul class="text-center">
         <li><a href="../tasks/03-lastname.firstname.docx">Task 03 Word Project (not posted yet)</a></li>
         <li><a href="../tasks/04-lastname.firstname.xlsx">Task 04 Spreadsheet Project(not posted yet)</a></li>
         <li><a href="../tasks/05-lastname.firstname.accdb">Task 05 Access Project (not posted yet)</a></li>
         <li><a href="../tasks/06-lastname.firstname.pptx">Task 06 Powerpoint Project(not posted yet)</a></li>
      </ul>

After you paste the code change lastname.firstname to your last name and first name. Remember to name the link exactly the same as you have named it in your task file. Don't leave it with the lastname.firstname text.

As you add projects for the remainder of the course, your need only to remove the (not posted yet) qualifier. We are going to revisit this over and over for the remainder of the course.

This section might be considered the fulcrum of your INLS 161 experience. It brings together a lot of key concepts we cover in this class, and we will be revisiting this section four more times before the end of the course. It might seem overwhelming, but once you get it down, you will have learned how to bring together a lot of complex layers that all must work together. Leaving out any part will cause the system to breakdown.

For everything to work, you must leverage a different layer:

  1. Security Layer: Continue to add files to your password protected directory in the PUBLIC_HTML directory, and keep it protected.
  2. File Naming Convention Layer: You must name your future projects correctly. They must match your code in the anchor link.
  3. FTP Layer: You must ftp those projects in your tasks directory correctly
  4. HTML Coding Layer: Then you must change the commenting on html code in your website so that you will reveal a link to the project-file in the password protected directory.
  5. Organization and Time Management Layer: This needs to be done each time you submit your future projects.

I will make this fairly easy by giving you the code you need, so you do not have to code it yourself.

Copy and paste the ul list of relative links to your INLS 161 page on your website. These links will point to the projects in the protected tasks directory (which is on your server, so they should not be absolute links). When they are clicked, the user ( you when testing, or the instructor when grading) will be prompted to enter the login and password. After entering the login information, the file should automatically download to the instructor's computer. This folder is outside of your website folder. It is also in the public_html folder, so you have to put two dots ../tasks before the directory name so that the browser knows to look for the directory above the current directory.

This is similar to the following scenario: A future employer asks you to post a sensitive project for an important client and make a workable link. He expects you to keep it secure and make it so the client can get it with a user name and password.

  • Worst case outcome: you put up a workable link so that anyone can download it.
  • Embarrassing outcome: you put it in the password protected directory, but you get a call from your boss telling you to fix the link; the client got an error page.
  • Best case outcome: you get it all right and your boss and the client are impressed that you understand how to coordinate multiple data layers to deliver secure information!

Absolute Links

Put absolute links on all of your class subpages that link to the home pages for each class you are taking so that you can always find the bookmark for your class pages. If your class does not have a home page, then you can create some absolute links on your interests page(s), or about page(s) or home page. Make at least one of your absolute reference links open in a new page. (use the target="_blank" attribute)

Write out the full URL including the http protocol http:// . The class web page is on RUBY and your site is on OPAL, so these are different servers, even though they might be in the same room on campus.

i. Finished and fleshed out site

You must have real content in this site. It does not have to be a lot of content, but it needs to be "finished." No *lorem ipsum* text or any other type of placeholder text should be in your final site. You may use *lorem ipsum* text during the development phase. Every page should at least have one h1 tag and one p tag. Having blank pages on your site, or having pages on your site with placeholder images, or text, will prevent you from getting 100 percent on your content grade.

j. Google Fonts

You should use at least two complementary Google fonts in your site. This will require you to connect to the Google server in the <head></head> element of each page that has the font (should be all of them for consistency)

Therefore, add two Google font links in the head of each page. (It is possible to get the code for two fonts in one line of code.) Place the google font code in your CSS file. The link the head is like plugging in a TV: it has the potential to be turned on. The code in the CSS tells the browser where, specifically to use the font. For example, if you want all of your h1 tags in one font, you put the code for that font in the brackets for the h1 tag. Do the same for the other font for other tags. This will be demonstrated in class.

k. javascript example

The Other two required javascript elements (obfuscated email and page update) do not count towards this task because they are dead simple cut and paste actions.

However, you may find that the javascript that you find might be just as easy.

Find a simple javascript example from the web and incorporated it into your site. Document where to find it in a README.md file at the root level of your site.

If you are using the 02.01 Theme, you will already have a README.md file. If you are dragging and dropping your entire folder into OPAL, it is going along with the ride. You may add your documentation to the top of that file and leave the other data in there, or you can delete the data and put your documentation there, or you can delete the entire file and add a new one. If you are using a different theme that you found online, you may already have a README.md file. Do the same. If your theme does not have one, then create one.

Here are a few links to help you find something:

02.02 Esthetics

l. Clean looking home page that loads quickly and and is eye-catching

The home page loads quickly and does not require scrolling right or left. Home page must include an image or graphic. Site must have a minimum of 4 nav bar level pages and 4 sub level pages. Can be 1 nav bar page with 4 subpages or 1 nav bar page with 2 subpages plus 1 nav bar page with 2 subpages. Can be more. Four total is the minimum.

m. consistent formatting for the rest of the site

The formatting from page to page is consistent. You should have some images on other pages in the rest of the site. If you use the 02.01 theme, change the background color and the active link background color from the default. This will be demonstrated in class. You should also make use of the "active" code in the top navigation bar and in the sub-navigation links so that it is clear what page the user is currently viewing. The one that is "active."

02.02 Navigation

n. home page navigation

Home page should have links to all second level pages (home should be shown on same level as secondary pages, but must be in left-most position, if using horizontal navigation bar.

o. Second level navigation

Second level pages should have links to the home page, to other second level pages, and to any third level pages directly below them

p. Third level navigation

Third level pages should should have links to the home page, to their parent second level page, and to other third level pages in their subgroup

If you are using the provided 2.1 theme here is an example of a finished site with all navigation working as expected.

Notice that only the "Classes" section has sub-navigation links

Quick links

opal login: ssh ONYEN@opal.ils.unc.edu
opal password: ONYEN password

Instructor

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

Office hours by appointment.