Final Project Wireframes

Final Project

So sorry for the delay, but here is the link to my final project:

CIS 303 Referral Center
You can check it out with
email: test@test.com
password: test

This site is still very much under development.
I've put in a lot of time, but in the end its going to be a pretty big venture.
The main idea is for it to be an online referral system for behavior issues in my school. My principal saw something similar on another website, and asked me to try and produce it for us.

Right now, only a few options are available.
1) The main page (this is the admin main) has a drop down where new/pending referrals can be viewed. JQuery was used for the drop down effect.
2) Users and Students can be added, though editing has not been set up yet. I created the highlight and select script using JQuery, eventually these will cause the form on the right to fill in with that users data, allowing for updating and editing. I am also looking to put in a bulk import for adding students.
3) New Referrals can be written and the referral history can be viewed. I used the JQuery UI Calendar widget to be able to have the calendar pop up when selecting a date.

Things I still need to do:
1) Allow for consequences to be assigned for referrals.
2) Make it look a whole lot prettier.
3) Editing functions
4) Create the teacher page, where teachers can write referrals and view student histories.
5) Code all the error messages, I probably should have put these in while coding, but I was a little shortsighted and wanted to make sure everything was working.

Wireframes and Information flows to follow.

Final Project Wireframes

Here are some very bare bones preliminary wire frames for my final project. My end goal is to create an online student information database for teachers. A large part of my current job is processing data and making it accessible for teachers, my hope is that this site will accomplish both of these things.

The main page of the website will mainly be a log-in point.
It will also have product information for people who do not already have accounts. This will include a screen cast demo of the site,
for schools interested in using this resource.









Class Roster Page
I still need to layout some of the pages in between the login and this one. However this section is what I'm most interested in accomplishing at this point. This page will be a class roster page, which will include the students ID#, Name, Age and gender.
This will mainly be a way to get a quick view of the students in the class, as well as a waypoint towards more specific student information. By clicking on the student id# or name, the user will be sent to the students card, which contains all of their important information. I may also try to include some more academic information, likely via tabs, for this roster overview. As for now though, I'd like it to be mainly a waypoint.


Student Info Card
The main idea here was to basically create something of a baseball card for each student. This would be an example of what this card would look like. Basic information is displayed around a tabbed container. This tabbed container will display subject specific information. This information will eventually be inputted by the students teacher. For most classes, the collection of this data is something that we already have set up in the school. I will have to create an interface for teachers to upload this to the site.

Class 9 Assignment

Heres the link to my finished class 9 assignment.
The Blog has functioning comments, loaded through AJAX. It's also got some cool fade in and slide animations courtesy of JQuery.

The Blogosphere:

Blog Homework

Here is my blogging website


The main page looks like this:



I put in a right nav which allows for a couple of different options.
1) People can navigate through and look at any previous posts. Clicking on that link opens just that individual post in the main window
2) People can look at only their own posts by clicking on the view MY posts button.
3) Not in the right nav, but by clicking on any of the usernames, people can look at posts from just that user.

Image Upload Site

Here it is.

The site is pretty much up and running, though pretty bare bones in terms of appearance. I'm gonna work on making it look a little prettier before Saturday.

I played around with some Javascript to add some more functionality.
You can look at only your own pictures, or all the pictures on the site. I pretty much used the same hide/show stuff we did for the class 6 assignment.

I also put a logout and welcome on the top.

Class 6 Homework

Here are my two files for the class 6 homework:

Class 6 Homework

Class 6 Advanced

They look exactly the same, but I guess thats the point.

The second link loads the information from a tab-delimitated text file.

Here's the code I used to load the info from a document:


I struggled and eventually had to just manually tell the code how many entries to put in. I probably could use for each or loops of some sort to be able to populate the array better, but I got tired and just wanted to make sure it could work at all.

JQuery Classwork

Here ya go:

JQuery Classwork

I'm frustrated with making my menu lists compatible with multiple browsers. The top menu looks fine on Firefox, but comes up short in Safari.

Likewise, the site does not look right when running in Firefox on a PC, the widths are a little bit off, and some of the text does not fit into the divs correctly.

HTML/XHTML-Strict/Haiku Compliance

Thought everyone might find this funny. It's a pane from the online comic: xkcd (follow the link to the whole comic).

Duck Duck Goose

I got a little bored at work and decided to play around with Javascript. I tried to use some of the other things we went over in class, such as image/class swapping. What came out of that is some good ole fashioned Duck Duck Goose. It should be a goose about 33% of the time.

Duck Duck GOOSE!

I used some universal variables in order to keep track of the statistics and did a little online research in order to figure out how to generate a random number and make the sound work. I don't know if either is all that efficient, but it works.

Class 4 - Javascript Assigment

Below is my solution to the in-class assignment.

Class 4 Assignment

I used one function, doing so by passing over a the id of the element that was calling it. My HTML was designed so that the elements in the second pane had almost the same name as the corresponding element in the first pane.

for example:
pane1 - "name" pane2 - "name_p2"
pane1 - "password" pane2 - "password_p2"

Thus, in the function I created a new variable that was simply the passed element ID + "_p2".

It may have been more efficient to pass two variables, the initial element, and the element to be changed, that would make the function a little more versatile.

Homework Assignments

Homework Assignments are pretty much done:

Black Book

MTV Music Videos

I've been having trouble lining up images with text. Is there an easy way to do this? Do I just have to play with margins until it works?

MTV Assignment (in progress)

Here's what I've done so far for the MTV project. I've found it a lot more frustrating than the other one, simply because there are so many more elements.


MTV Music Videos



I started using the image as a background, but got a little frustrated with it, so I switched to just looking at the image in a seperate viewer. Unfortunately, I now realize that my left bar is about 60pixels to short, which is just going to make everything look off when I finally do finish. I'm going to have to go back and adjust a lot of different widths, which is not going to be fun. I decide to tackle this section by section (top, left, then right). I left some little things to go back to when i got frustrated.

Blackbook Homework Assignment

Here's what I've done for the Blackbook Assignment so far.

Blackbook assignment



I've still got a little bit of tweaking to do, adjusting some of the fonts and buttons, but nothing major.

I've found that a lot of my colors aren't working right in internet explorer. I've mainly been using the color names (i.e. lightgray, or red) instead of the the Hex (#2f2f3f). I wonder if this is what's causing the problem. Anyone else having that happen to them?

I found it really helpful to get the major structures done first and then go back and touch it up. I layed everything out, and did major elements, but left the tweaking till the end. I found that this helped me get through it a little faster and I didn't wind up spending a lot of time on one section and then get frustrated.

Class 2 HW (part 2) - This one is for the children

So, I had my 6th grade students decide which celebrity should get the privilege of being featured in my Homework Assignment. The consensus was Rihanna. Students produced most of the text and found pictures, I provided the grunt work.

Here is our Rihanna Page.

I wanted to add a little bit more to this than I actually wound up doing. I checked out the tab resource on the Lunarpages' link provided by Jack. It didn't look like it would be all that hard to get the tabs in there, but I wasn't 100% how to make them fully functional. I imagine this would be done with frames, and while I think I could have figured it out, I'd rather go to bed at this point.

Other notes:

1) I really wanted to get the video to autoplay. I found a lot of possible answers, only 1 that worked. Basically you need to add &autoplay=1 to the end of the "src" in the embed code. Unfortunately I did this in the beginning of working on this site, and thus listened to Umbrella every time I reloaded.

2) I would have really liked to have had the pictures all open up in the headshot space. The only way I could think to do this was with frames. Since I didn't want to start playing with frames, I just had them open in a seperate page. Any other ideas?

3) I wound up centering most things, which I didn't really want to do. I probably could have been fixed using some "spans", but it was a little late and I figured sleep was more important.

4) Once again, lining up the different divs became a little bit of a pain. They are fairly well lined up, but not perfect. I'm really hoping that there is an easy way to deal with this.

Class 2 Homework (part 1) - Actor Webpage Wireframe

This exercise took me a little longer than I was expecting it to. While it came out looking exactly how I wanted it to, I'm not all to sure that I accomplished it in the most efficient way possible.

The wireframe can be found here.

One thing I found extremely annoying was formatting. I found myself doing A LOT of trial and error with widths, trying to line everything up. Is there a better way to manage alignment?

Some other thoughts while I was doing this.

1) I wound up using 4 different div containers for this wireframe.

• The large container which held all of the divs


• A container for all of the things on the left side of my wireframe


• A container for all the things in the main body of my wireframe


• A small div within my "main" container which held the two video thumbs

The left side div and the main div definitely made things a little easier when doing this. I'm not quite sure how I would have done it without them. I wasn't sure if was necessary to make the div to hold the video thumbnails. I wanted to keep other things along the same line, so I wasn't sure how to put one on top of the others without that small div.

2) I had to make 3 different types of clear. One was a small clear, which basically just ended the line without making any space between that one and the next. I made a regular clear, which had a height of 5 pixels. Finally, I made a big clear, which had a height of 20 pixels. These were mainly just for formatting purposes. Is there a better way to handle this?

3) I wound up with 16 different items in my css file. I'm not sure what the norm with this was. I would obviously like to keep things simpler if it is possible. On top of that, I feel like certain entries were wasteful. For example, I declared in almost all the divs that they should float: left. I wanted to do this for all divs, but when that seemed to mess up the centering of my main container.

Font Tester

Here's a good resource I found for selecting font types. It also helps produce the CSS code:

Font Tester

Flower Shop

Heres my flower shop from today's assignment:
There is a search and browse in the left nav bar. Most of the page is taken up by what would be a rotating image gallery, going through the tabs and whatever thumbnails are in each tab. These would be images of any promotions, top sellers, or other pre-made packages. On the right is a quick way for users to purchase any of the things they saw on the homepage.

I figured that most of the shipping costs, shipping locations, store locations, etc. could be handled through the location finder on the top right. Once a person put in their zip code, that information would be handled on a seperate page.