Intro to Web Design Assignments

All About Us Wiki

Go to the class Wiki page I have setup on the course server and create yourself an account so you can edit one of the sections and claim it as your own. Remember this is public (although no one is looking for it) so if you have concerns about privacy then share information in an indirect way. There is no obligation to put your email address for example or post a photo although you will notice I posted one of myself. The account creation process is mostly straightforward although I did require that users have a confirmed email address. The account creation page says email addresses are optional and they are not. Once you create an account you must go your email and find the message from the server to confirm your email address before you can edit pages.

What to post: tell us how long you have been a SLIS student and how long you have left; tell us what sort of librarianship you want to do professionally. Perhaps tell us about your current work if it is related to library science. Info about your personal life is optional. The goal here is to edit a Wiki page using the strange but doable code that goes along with using a Wiki. We will be jumping into HTML headlong soon and this is a warmup. Don’t delete mine (or anyone else’s) entry. Everyone has equal access to this page so be careful! Feel free to use my code as a starting point so copy and paste away.

You will notice each entry has the code below:
<br style="clear: both" />
That separates one entry from the next and should be the last line of your entry. Okay good luck!

All About Me

In order to complete this assignment you must first create an account for yourself at PicaVulpes.net. This is my development server and we can play around with it without me worrying about losing my other web content. Once you have an account and you’re logged in create a simple web page with some information about you. Think of the typical things you might share with classmates. You need to include an image of some sort to show us all. It doesn’t have to be you.

Inline Images Assignment

I want each person to create and upload via FTP a web document (HTML file) that uses the images listed below. Note that these images are hosted on a server and you SHOULD NOT download the images. You will be using the complete URL to display the images. Note the URL is a Flickr URL.

Use this page from the book as a guide:
http://www.elizabethcastro.com/html6ed/examples/use_images/floatboth.html

I don’t care which images are on the left or the right as long as they are staggered. You will see that I put links underneath the URL of the image. Follow these links and copy and paste a paragraph or two from each and place near the image in your web document as in the example from the book.

Note: to use the images I have listed below, here is the proper HTML to display an image inline (which means in the page):
<img title="something descriptive" src="http://webaddress.net/imagename.jpg" alt="something descriptive" width="x" height="x" />
Don’t download the images to your computer. Use the whole address — including the http part. Don’t forget the alt and title attributes for each image.

These images are BIG so you should play around with the height and/or width elements to make the image appear smaller on the web page. ^_^

I am hosting these images on my Flickr account and give permission for you to use them in this indirect way. Normally, including an image in a web document that you don’t actually have is more than rude, it can cause bandwidth issues with the web provider of the original image. So always make sure the site that hosts an image you are including doesn’t mind that you use the image in that way.

Make sure the image itself is a link to the Flickr page for that image.

See http://jimmynewland.com/webdesign/image_example.jpg for an example of what the web page might look like when you’re done. Note that my text and images don’t match yours, but I wanted you to get a feel for how a page like your assignment should look when your done.

I used a common technique here to fill in text so you can see what effect lots of text has on the layout. This is a technique used in print publishing that has bled over into web publishing (http://en.wikipedia.org/wiki/Lorem_ipsum).

Feel free to ask me, a classmate, a group member, or anyone else for help if you need it. Web design does not happen in a vacuum.

Image: http://farm4.static.flickr.com/3101/3675763049_002d2c5cb2_o.jpg
Link: http://en.wikipedia.org/wiki/Enterprise_Plaza

Image: http://farm4.static.flickr.com/3325/3180787413_f405b0dc1d_o.jpg
Link: http://en.wikipedia.org/wiki/Tilt-shift_photography

Image: http://farm3.static.flickr.com/2529/3819675030_7aa1fc9aea_b.jpg
Link: http://en.wikipedia.org/wiki/Blowing_Rock,_North_Carolina

Image: http://farm4.static.flickr.com/3449/3959694267_15796d76a5_o.jpg
Link: http://en.wikipedia.org/wiki/Korean_mask

Image: http://farm4.static.flickr.com/3007/2615598573_63bdef7033_o.jpg
Link: http://www.cs.rice.edu/~keith/DuncanHall/

Image: http://farm4.static.flickr.com/3269/2684635473_4450062dd6_o.jpg
Link: http://en.wikipedia.org/wiki/Ocean_Springs,_Mississippi

Image: http://farm4.static.flickr.com/3090/3153951134_64e9831771_o.jpg
Link: http://en.wikipedia.org/wiki/Full_moon#Full_moon_names

You will notes I put these photos into a “set” on Flickr meaning they are grouped according to some topic. One photo can be in many sets. I also tried to give good names and use good tags for these images to show the type of meta-data Flickr can store along with the image.

If you are so inclined you may use the smaller versions of the images on Flickr and go from there. This HTML document should be stored in your web folder online using FTP. Once it is online you can see the web page by putting the whole URL to the file in your browser as in: http://jn0074.picavulpes.net/images_assignment.html

Applying a Cascading Stylesheet

Once you wrap up the images with html assignment you have to go back into the code and make this CSS file work with your page.

Here is the basic outline of the proper HTML to apply to your images page to make the CSS work.

You must edit the HTML for your images page to match the format below and you must upload the newly edited HTML along with the CSS file for the changes to work correctly.

The only CSS editing you will do is for the link tag. You will change the color, the text-decoration, and the background color. See the CSS file attached for more info. In the book see page 146 for a bit of info about altering the “a” tag with CSS. W3Schools has a cool way of explaining HTML and CSS. They give you a live editor so you can see effects right from a browser window. Take a look at their entry about CSS and the link tag.

Add this to your head section:

<link rel="stylesheet" type="text/css" href="images.css" />

The body will need one div with an id of Header containing an h1 tag with the heading of your choice.

Then you will need to put the rest of the HTML from the body inside a div with a class of Content. Also make sure each image has an h2 tag after the img tag but before the pasted text for the paragraph.

There is an example PDF of what mine looked like once I got it all working. I chose orange for the link color and yellow for the link background color. Yes… it is ugly. Do better than me.

Mock-Up of Library Card Form

Create an HTML form meant to be a registration page for a library card at your local library that accepts the following inputs:

Name (one that includes both first and last) as a text box
Email address as a text box
Pull-down menu for gender (m/f/choose not to answer)
Radio button for “county resident (yes/no)”
Textarea for comments
Submit and Reset buttons

Group Project

Each group will create a multi-page website with no less than 5 pages (typically 1-2 pages per member) that acts as either a real or imaginary information resource. That can be a small library website, a special website for a larger library system, some kind of special collection or service website, a public information resource or community website, a school library website, an academic information resource or really anything that you can come up with. The site will be grading using a rubric that involves most of the content from the course.

Site demonstrates mastery of basic HTML markup and structureSite uses correct implementation of DOCTYPE and encodingSite demonstrates mastery of block-level HTML (p, heading, br, etc.)Site demonstrates mastery of in-line image usageSite demonstrates mastery of linking to local or remote files via HTMLSite uses correct implementation of local stylesheet or CSS on multiple pagesSite demonstrates some usage of formatting with HTML-Styles usageSite demonstrates mastery of ordered or unordered listsSite uses correct implementation of HTML tablesSite uses correct implementation of HTML forms with the provided scriptSite uses coherent, consistent, and appropriate look and feelSite adequately demonstrates an appropriate information resourceWhole-group involvement in project design and creation evident

Site demonstrates mastery of basic HTML markup and structure
Site uses correct implementation of DOCTYPE and encoding
Site demonstrates mastery of block-level HTML (p, heading, br, etc.)
Site demonstrates mastery of in-line image usage
Site demonstrates mastery of linking to local or remote files via HTML
Site uses correct implementation of local stylesheet or CSS on multiple pages
Site demonstrates some usage of formatting with HTML-Styles usage
Site demonstrates mastery of ordered or unordered lists
Site uses correct implementation of HTML tables
Site uses correct implementation of HTML forms with the provided script
Site uses coherent, consistent, and appropriate look and feel
Site adequately demonstrates an appropriate information resource
Whole-group involvement in project design and creation evident

Advanced Webdesign Assignments

You First PHP Script

Create a PHP script using variables that stores and prints the following information (one variable per item):

A name:
e.g. Joe Smith

A zip code:
e.g. 77401

Any whole number:
e.g.# of children in the family in which you grew up = 133 (ok not really, but see what I mean)

A phrase in bold & italics (HTML):
e.g. The gecko ate my doughnut.

Any number with a decimal:
e.g. average airspeed of an unladed European swallow (in MPH) = 24.18

Create variables for each of these pieces of data and print the variables using PHP. Save the script as “variables.php” and put the file in your web directory (via FTP). If you don’t have an FTP account of yours isn’t working then email me and I’ll fix it.

To run your script you must enter the entire URL for “variables.php” into a web browser. For example: http://jn0074.picavulpes.net/variables.php

Embedded Widget Discussion

List at least one embedded technology (“widget” or “plugin”) used in web development. For example: a calendar add-on for a site, an RSS feed to add to a web page, a tool for embedding social networking into a site, etc. If possible, describe how such a technology might be used in a library/information science context.
more

Library Donation Exercise

Create a web form and a form-handling PHP script that accepts
donation information from a “Friend of the Library” to the mythical
SLIS Branch of the public library. more

Applying a Stylesheet

Apply the given style sheet to your existing web form for accepting
donations to the library. Also make sure to use this style sheet for the
resulting form handler page as well. Use the URL of the CSS instead of copying
the file to your own folder. Example

Using Loops and Arrays in PHP

Add a checkbox to the library donation form such that user can choose which days
are best to be contacted. Be sure to add square brackets to the name element in
the checkboxes so that you can process the variable as an array in your PHP script with
the “foreach” loop. more

Sending Mail with PHP

Collect all the donation form information together and have the script send you
the data in an email using the PHP mail command. The command for sending email in PHP
requires the following parameters: the recipient’s email, the subject, the message (as
one concatenated string), and optionally CC and Reply-To fields.
more

MySQL & PHP – Simple Blogging

Create scripts to make a database and table on the JayFox.net MySQL server,
add a blog entry to the database, view the blog, edit an entry, and delete and entry.
Feel free to use the example in-class scripts as a starting point.

Library Donation Assignment

Create a web form and a form handling PHP script that accepts
donation information from a “Friend of the Library” to the mythical
SLIS Branch of the public library.

first and last name as two text fields
address (including text boxes for street, city, state and zip use HTML to limit the zip field to 5 characters)
phone number as three separate text fields
library card number (use HTML to limit this to 11 digits)
a radio button set asking whether the donation should remain anonymous
a pull down menu with choices for type of donation: book, dvd, monetary
a text box for either the book or dvd name or the amount of money to donate
call the form page library_donation_form.html
have your form method be post and the action be handle_library_donation.php
don’t forget to include a submit button

print the first and last name in the format Firstname Lastname on one line
print the address and phone number in the format

1001 Street Rd

Cityville ST 12345

713-295-2064
concatenate the phone number fields into one string
print the user’s library card number on a separate line
print “Donation anonymous:”
print the type of donation on a separate line
print either the book or dvd name or the amount of money for the donation

Apply the style sheet donation_style.css to your existing web form for accepting
donations to the library.

Also make sure to use this style sheet for the resulting form handler page as well.
There is an
example page
showing the effects of the style sheet. This design is based on
simplyfluid
from FreeCSSTemplates.org.

You can use the URL
http://www.jimmynewland.com/webdesign/donation_style.css
in your HTML code instead of copying the CSS to your own folder.

You can simply edit the existing page instead of creating a new page.

Add a checkbox to the library donation form such that user can choose which days
are best to be contacted. Be sure to add square brackets – [ ] – to the name element in
the checkboxes so that you can process the variable as an array in your PHP script.

Use the “foreach” loop to process the checkbox variable as an array. Use the
“add an event” (test – source)
from the text as a starting point.

Collect all the donation form information together and have the script send YOU
the data in an email message using the PHP mail command. The command for sending
email in PHP requires the following parameters: the recipient’s email, the subject,
the message (as one concatenated string), and optionally CC and Reply-To fields.

Example:

mail(email@someaddress.net, “Library Donation Form”, $message);

You can always use the in-class example for some guidance.

Webdesign Assignments