Class 8 – Assignment

Your assignment this class is to create a message board.  The message board allows users to view all of the messages that have been posted to the board so far.  It also allows users to post new messages.

Here is the user flow of the site:

User flow of message board site

index.php – the message list page

When the user first comes to the site, they see the main page, index.php.  This page shows them a list of all of the messages on the board in reverse chronological order.  The page reads all of the rows of data from the database table and displays them.

This page also has a link to “add a new post”.  When the user clicks that link, she is brought to add_post.php.

index.php wireframe

You will want to use code similar to what is available in the read.php example available on the server here.

Also, you will eventually want to format the dates that you retrieve from the created field of the database table, you will want to read this post about beautifying MySQL timestamps.

add_post.php – the post page

add_post.php consists of a form the user can fill out in order to post a new message.  This form has three fields: the user’s name, the post title, and the post body.  When the user clicks submit, this page makes an HTTP GET request for process_post.php, and passes along the data that the user entered into the form as part of the query string of the URL of the request.

add_post.php wireframe

This page can be a simple XHTML page.  It’s ok to name it add_post.php even if it just has XHTML code inside of it.

process_post.php – the process post page

The process_post.php script receives the data that was passed in the GET request to the server by using the built-in PHP $_GET or $_REQUEST variables, and enters that information as a new row in the database table.

You will want to use code that is similar to the PHP used in the create.php example available on the server here.

This script will then redirect the user back to the main page, index.php.  Check out this example of how to redirect a user from one page to another.  You will be using the built-in header() function in PHP in order to pass a special “Location” HTTP header from the server to the client that instructs it to go make a request for a different page.

For example, this code redirects a user to the nytimes.com website:

header("Location: nytimes.com"); //redirect to another page

Class 7 – Assignment #1

Class 6 – Assignment: create a Tic-Tac-Toe game using JQuery

Advanced assignment

For those of you who are finished with all the previous assignments and feel comfortable with everything so far, here is the advanced assignment.

Your job is to make a tic-tac-toe game online using XHTML, CSS, Javascript, and JQuery.

Tic-tac-toe is a two player game.  One player is “X” and the other player is “O”.

Wireframes

Here is the beginning screen before either player has moved:

Players can click on any empty square.  But once a square has been clicked, it cannot be clicked again.

When the first player clicks on any square, that square becomes an “X”:

The next player then clicks on any empty square, and it becomes an “O”:

The players then take turns until one player has three of their squares in a row, either horizontally, vertically, or diagonally.  For example, the “X” player in this example has three X’s in a row vertically, so she has won:

When a player wins, the browser detect the winning state, and should pop up a message that indicates who has won.

It is possible that neither player has won after all the squares have been clicked.  If this is the case, the browser should show an appropriate message:

Once the player clicks the “Start over” button or clicks the little “x” at the top right of the message box, the game should start over, the message box should disappear, and the game board should become blank again.

Class 6 – Assignment(s)

Please complete all client-side assignments

This week marks the end of covering the client-side technologies, XHTML, CSS, and Javascript.  Next week, we will begin with the server-side technologies, PHP, and MySQL.  So the major assignment for this week is to make sure all your assignments from past weeks are completed, working, and linked from your blog so I can grade them. There will be a general amnesty for late assignments – if you complete them by the end of the week, you will receive a full grade.

PS: Please test the links to your assignments before posting them to your blog.  If the links don’t work, then I can’t see your assignments, which means you get a zero grade for them.  Not a happy conclusion to your hard work.  Also, a screenshot of your assignment is not a substitute for a link to it.  There are several of you who are repeat offenders on both counts – please go through your old posts and make sure all links to past assignments are present and working.

The assignments so far are:

• Class 1 – Information architecture wireframes
• Class 2 – Convert simple wireframe to XHTML code
• Class 3 – Convert three simple wireframes into XHTML & CSS code
• Class 3 – Convert a wireframe from Class 1 into XHTML & CSS code
• Class 4 – Convert BlackBook design comp into XHTML & CSS code
• Class 4 – Convert MTV Videos design comp into XHTML & CSS code (**optional, but recommended)
• Class 5 – Javascript key-logger
• Class 5 – Convert e-commerce wireframe into XHTML, CSS, and Javascript code
• Class 6 – Same e-commerce page as in Class 5′s assignment, but using JQuery
• Class 6 – Tic-tac-toe game using JQuery (**optional, but not heavily recommended)

Quiz

We will be having a quiz next week on the client-side material, so please make sure you have done all the assignments and gone through all the previous reading material that has been assigned.

Class 5 – Assignment #2

Your coding assignment is to convert the following wireframe diagram into a fully functioning page, using XHTML & CSS for the layout and Javascript for the interactive behaviors.

Note: this is a wireframe, not a design comp.  So do not try to use make your pages pixel-perfect based on this diagram.  Use the diagram as a rough guide, and just make sure the Ad Banner and Skyscraper Ads you use are the size that is written into the wireframe.  All other design elements, including dimensions, colors, fonts, and borders are up to you.

When someone mouses over any of the product thumbnails, the thumbnail should disappear, and a div containing information about that product should appear.  The information div should show up as exactly the same height and width in exactly the same place where the thumbnail was on the page.

When the user then mouses out of the product info div, the info div should disappear, and the product thumbnail image for that product should reappear.

So the trick to this assignment will be to first create the layout with all the basic page elements using XHTML & CSS.  Be sure to create an “img” tag and a “div” tag for each product.  The img tag should be visible when the page first loads, and the div tag should be invisible by setting its “display” property to be “none” in the CSS.

Create the mouseover and mouseout Javascript event handlers so that when you mouse over an image the image disappears and the div shows up.  And when you mouse out of the div, the div should disappear and the image should re-appear.

Tips / Spoilers

Note: don’t read this if you want to figure out the solution yourself.

Solution #1: Here is an example of how I would set up the product thumbnails in terms of both XHTLML and Javascript.  You can use this exact code for the thumbnails on your own pages, but be sure you understand how it is working.

Solution #2: It just so happens that you don’t even need to use Javascript to complete this assignment.  Here is an example that has no Javascript and relies instead upon the CSS :hover pseudo-class to do the same thing.

Solution #3: Here is a slight variation on the CSS-only solution outlined in Solution #2.  This version makes the product thumbnail become partially transparent when it is moused-over, instead of disappearing entirely.

Class 5 – In-class Assignment #1

Your assignment in class today is to develop a sort of text-capturing script.  The page is going to be divided into two identical  panels.  In the left panel, you will have one text input, one password input, and one textarea input.  When a user begins to enter text into any of the fields in the left panel, the corresponding field in the right panel will start to be automatically filled-in with the same text that they entered in the left.

To do this assignment, you will have to look into Javascript “keyup” events.

Here is the information architecture wireframe for this in-class assignment:

Text-capturing wireframe

The best way to approach this assignment is to first lay out the page in XHTML and CSS before doing any Javascript coding.  Then start thinking about the how the logic of this type of interaction might be structured.  Break it down into discrete individual steps.

Here are the basic steps that need to be handled in order for something like this works

1. set event handlers to detect the “keyup” event whenever a user types anything into any of the form elements on the left side of the page
2. if a keyup event is triggered, call a function
3. in that function, first get the values of all form elements on the left side of the page and store them each in their own variable
4. Take the values stored in those variables and insert them into the corresponding form elements on the right side of the page

I expect you’ll have questions for me about exactly to do this, so please try to figure it out based on the examples so far, and ask for help when you get stuck.

Hint

Dealing with keypress, keyup, or any other type of supported Javascript event is not so different from the examples we went over for mouseover, mouseout, and click events.  You create an XHTML attribute called “onkeypress” or “onkeyup” in each element you want to detect these events for, and set its value to be a call to a Javascript function…

<input type="text" name="first_name" id="first_name" onkeyup="doSomething();">

To get an XHTML element into memory in Javascript, you access it based on its “id” attribute.  So, for example, to get an element with the id=”first_name” into memory, we would do the following in Javascript:

var firstNameElement = document.getElementById("first_name");

To get the value of a text input, password input, or textarea element, you can use the .value property of the element in Javascript.  So, for example, to get the value of the element retrieved above, we could do something like:

var firstNameValue = firstNameElement.value;

To set the value of a text input, password input, or textarea element, you can do the reverse.  For example:

firstNameElement.value = "some new value here";

where “some new value here” can be left as a string literal, as in what we just saw, or replaced by a variable that holds a string in memory, such as:

var newName = "Amos";
firstNameElement.value = newName;

Class 4 – Assignment #2

For those of you who have completed assignment #1, your next assignment is to go through the same process with this new design comp:

The image files necessary for this assignment are, as with the previous one, available on the server here.

The global navigation buttons (i.e. “Home”, “Friends’ Videos”, “Featured Videos”) should be done using an unordered list <ul> element, as recommended in the previous assignment.

The only font used on this page is Tahoma.

• The light blue font color has hexadecimal code, #AEBEE1
• The dark blue font color is #3B5998
• The dark gray font color used for the regular text on the page is #333333
• The light gray font color used for dates is #999999

Some of the background colors used are #F7F7F7 and #D8DFEA.

The light gray borders used between listings in the “Recent Activity” area is #DDDDDD.

The “+” and heart buttons that show up to the right of each video in the “Recent Activity” section should use the sprite rollover technique we discussed in Class 3.  The example of the sprite technique is available here.

Class 4 – Assignment #1

The first assignment for this week is to convert the following design comp into valid XHTML and CSS code.  All the necessary images have been pre-cut by your thoroughly competent in-house graphic designer, and are available in the images sub-folder on the server.

Fonts

The fonts used on the page are Georgia for the serif font, and Arial for the sans-serif font.

Tips

To begin converting any design comp into XHTML and CSS code, I would recommend setting up a basic page with the design comp applied as a background image to the container div, following the background image technique outlined elsewhere.

Then, start thinking about how you would create an outline structure with the proper rows and columns. This usually means thinking in terms of the container div and second-level divs that you can create to generate the basic sections of the page without worrying about the content that goes into each section yet.

If the design comp shows columns of content that sit side-by-side, you may want to look into using the clear/float layout technique, if necessary, which is how you coerce block elements, such as divs, to sit side-by-side.

Avoid using the CSS position or z-index properties.  It is usually not necessary, and is often a source of trouble for inexperienced developers.  Usually, you can position elements properly through a combination of margin and padding, and the float and clear trick.

For this comp, I would start with an outline of the page in the <body> of an XHTML document, something like the following:

<div id="container">
    <div id="main_navigation">
    </div>
    <div id="search_bar">
    </div>
    <div id="search_results">
    </div>
    <div id="footer">
    </div>
</div>

This simple XHTML code has all the major sections of the page broken up into divs.  Now your job is to use CSS to put them into their appropriate positions and sizes.

Once you have the basic layout of the sections done, you can move on to more specifics, and start to think about how some of the parts of the content would be coded in the XHTML.

Global navigation

The global navigation looks like this:

This is not so different from the global navigation menu example we looked at in class, where we converted an unordered list of elements into a horizontal set of links.

So you might want to do something similar for this assignment.  For example, working off of that example, you might want to set up the XHTML code for this global navigation to be something similar to this:

<div id="global_nav">
   <ul>
       <li class="selected"><a href="#">Recently Opened</a></li>
       <li><a href="#">My Ratings</a></li>
       <li><a href="#">My Friends</a></li>
       <div class="clear"><div>
   </ul>
</div>

Of course, you’ll then have to work on the CSS.  For this example, you will want to use background-images behind each of the list items to give it the red or black background.

Sort options

The sort options allow the user to order the listings shown on the page in a variety of ways.

You will want to be able to apply the proper colors and styles to the links inside of this section, as well as make the “Recently Opened” link look “active”, i.e. bold.

So you would structure your XHTML in such a way that the whole section is contained within its own <div> tag, and the links are within <a> tags.  The “active” link simply has an “active” class applied to it, which allows you to add special styles to that link in the CSS.

<div id="options">
   Sort Listings by
   <a href="#">Venue Name</a>,
   <a href="#">Top Rated</a>,
   <a href="#" class="active">Recently Opened</a>
</div>

As with the selected element in the global navigation section, we can use a special CSS selector to make the link with class “active” look bolder than the other ones.

Listings

The listings of venues should be a table with one row for each listing.  Each row is divided up into several table data cells.

As you can see, each table data cell has a few pieces of content.

Here is an example to give you an idea of how you might code the XHTML for one such row.  You do not necessarily have to do your rows exactly like this, but it should at least give you a starting reference point:

<tr >
	<td class="namecell">
		<div class="name">
                    <a href="#" >Travertine</a>
                </div>
		<div class="location">
                    <a href="#" >Nolita</a>
                </div>
	</td>
	<td class="typecell">
		<div class="type">
			<a href="#" >Restaurant</a>
		</div>
		<div class="subtype">
			<a href="#" >Mediterranean</a>
		</div>
	</td>
	<td class="goingcell">
		<div class="going">
			<div class="checkbox_container">
				<input name="going" type="checkbox" class="going_checkbox" >
			</div>
			<label class="going_here">I'm going here</label>
			<div class="clear"></div>
		</div>
	</td>
	<td class="ratingcell">
		<div class="user_rating">
			BB User Rating: 0
		</div>
		<div class="ratebox">
			<a href="#" >Click here to rate!</a>
		</div>
	</td>
</tr>

Pagination

The pagination section towards the bottom of the page is conceptually a list of page numbers.

And you know that a list should probably be created in code using the <ul> or <ol> tags, as we saw with the global navigation.

Here is an example set of code that could potentially be used to create this pagination section:

<div class="pagination">
	<ul>
		<li class="current"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">6</a></li>
		<li><a href="#">7</a></li>
		<li><a href="#">8</a></li>
		<li><a href="#">9</a></li>
		<li><a href="#">10</a></li>
		<li><a href="#">Next</a></li>
		<li><a href="#">Last</a></li>
	</ul>
</div>

The list item with the class=”current” could be styled differently so that it appears to be “selected with an overline or top border.

Styling the submit button

The submit button in the BlackBook design comp may be a bit confusing.  Here is a tip on how to get your button to look exactly right.

The HTML code is just that for a simple submit button:

<input type="submit" class="blackbooksubmit" value="Submit">

And the corresponding CSS code is:

input.blackbooksubmit {
 background-color:#A30606;
 border:0 none #FFFFFF;
 color:white;
 font-family: Arial,Helvetica,sans-serif;
 cursor:pointer;
 font-size: 11pt;
 font-weight:bold;
 padding:4px 10px 5px;
 text-align:center;
 width:69px;
}

Class 3 – Homework Assignment

Your homework assignment for this week is to take the wireframes you completed last week and convert them into a real web page using XHTML and CSS code.  Do not worry about the design elements, like graphics, or fonts – simply focus on the layout.  And don’t get caught up in every last detail of your wireframes:  focus on only one or two wireframes, and try to get the layout of the pages as close as you can to what you have in your diagram(s).

It will help to first go through all of the tutorials and examples posted on the class 2 XHTML page of the blog and the class 3 CSS page of the blog up to and including “The secret to layout: float and clear“.  That post is especially useful in understanding how to get elements of your pages to sit where you want them, which is what this assignment is meant to explore.  The posts below that post are not necessary to understand this assignment, but might be interesting to read.

Be sure to post links to your completed assignments on your blog.  Your blog post should include a link to each of your assignments so that I and other students can see them live in the web browser.

Class 3 – Assignment #2

Wireframe for Class 2 Assignment

Your assignment in class today is to convert this wireframe into XHTML and CSS code.

The XHTML code will involve headings, paragraphs, and images.

Tips

You will undoubtedly want to look up the reference for the <span> tag on the W3Schools site in order to figure out how to change the colors of some words inside the first paragraph.  Using the <span> tag in combination with the CSS techniques of applying styles to individual elements using the XHTML “id” attribute will allow you to style just those words in CSS.

Getting things to sit side-by-side is always an “issue”.  You will find that out when you try to make the image of the mouse sit side-by-side with the paragraph next to it.  And there are generally two ways of approaching the solution:

• using the display property in CSS to change some block elements (which don’t normally sit side-by-side) to be inline elements (which do normally sit side-by-side). Check out this post to get started with block vs. inline elements.
  
• using the float/clear technique outlined in another (more advanced) post.

We will discuss this further in class.