Lab 10 & 11 of CS 203

Dates given on course webpage, please complete within 5 days.

Do some improvements to your page in each the the last 2 weeks, and tell me about it in the form below.
Tell me when your content is ready for final grading,

Do I need to use more Javascript? - No

Javascript is like garlic. Some people hate it, others find it delicious. These people delight in creating tic-tac-toe games or sudoku solvers. You may be one of them. On the other hand, suppose you are not. You know that if you stop me from submitting your form without my email address using Javascript, I can submit it anyway by disabling Javascript in my browser.
I myself use very little Javascript. I prefer to use PHP whenever it is as easy (or easier.) So may you. In 1. below, you can welcome a user back to your index page simply by changing the file name to index.php, and then finding what you want in $_COOKIE.

If you want to do changing pictures, see my simple example on osiris. I made it while doing a video. It uses setInterval()

Some suggestions

1. You should by now have set a cookie based upon your form, by using setcookie() in a php page, or something similar. Now use it in some way in your pages.

For example: Access your cookie on another page, preferably index.html, to "welcome" a user who has previously filled out your form. Or, You could remember someone's language preference, or create an on-line store, using cookies to represent items in the "shopping cart" - and retrieve them from the $_COOKIE array when checking out. (Alternatively, you can store "session" information using php, on the server, using session_start() and the special $_SESSION array.)

Remember that you may set a time to expire, 40 days would be useful for the "end of the course." If you do not, the cookie expires when browser is closed.

2. Also, you could position a div (or other block element) with less than 100% width, by floating it left or right, for example.

3. Create a picture gallery in some way. You could have small versions of the pictures, which when clicked on will show the larger version. You might also want to put some text with each picture. Or, you could create a "slide show" or enable changing pictures, using either php or Javascript.

4. Make something appear in more than one language, either based on a cookie of client choice give a different version of a page, or use gettext in a php page to do the same.

Create a private directory

5. Perhaps you want some pages that can only be accessed by those to whom you have given passwords. For example, to add comments to one of your pages. See my private folder for How To (You will need to know the username cs203 and password, which is interactive)

SEO your pages

6. As we discussed, Optimize your pages for search engines, by, for example, all pages

have distinct, descriptive titles
META tags for description, author, and perhaps keywords
Links to other pages apper in <a href= tags, with descriptive link text
images have an ALT attribute
ONE <H1> tag, near the top, that corresponds to the title or subject of the page...

7. The Internet consumes vast amounts of energy. Scale your images to the size you want to display. For example, if an image is 3000 pixels wide, and you want a width of 300, for each pixel displayed , 100 are transmitted. Each client computer must do the rescaling work, so instead you should do it once.
Besides, you shouldn't give away your possibly valuable full sized image!

Validate a page (For lab 11)

8. There are on-line validation services for both HTML and CSS at .w3.org. (the world wide web consortium) These services check that the syntax is valid, in other words, they verify that it is correct, and otherwise give errors or warnings.
For html, you need to specify DOCTYPE, since text/html can be either HTML or XHTML.

Pick a page with both html and css in it, be sure you have at the top:

<!DOCTYPE HTML>

Save it (Ctrl-S) to your computer if necessary, Then go to each validator page, and validate by URI (address), or by file upload. Click on "Browse..." and you will probably find the file you just saved, else locate it.

For HTML, https://validator.w3.org/nu (I had to "verify your are a human" a few times)
for CSS: https://jigsaw.w3.org/css-validator/

You will probably find some errors, and perhaps many warnings. Try to understand them, and correct what you can. If you get a successful validation for CSS, you get a "sticker", that you can put on your page if you want to. Anyone who clicks on that sticker will get the validator results.

(Since HTML 5 is considered "experimental", no sticker is available.)
In any case, tell me the page you attempted to validate, in the form below.

Each week, do 2 out of the 7 suggistions, OR do some other significant things. ALSO for lab 11 a page should be fully validated. How will I notice what you have done? You will tell me, using the form below.

Tell me your page content is ready for grading:

I would like to grade it soon. If you don't submit by December 4, I will mark it during that week.

Back to Web Design