The Quirksmode site has a good chart outlining all the majors browsers’ support of standard CSS commands.
The red elements in the chart indicate the features of CSS not supported by the browsers. This chart makes it easy to see why web developers dislike Microsoft Internet Explorer.
Your in-class assignment today is to update your e-commerce pages from the previous class to be more “dynamic” and “templatized”.
Use separate PHP include files for the top ad banner, global navigation, breadcrumbs, skyscraper ad, and footer. On a real site, these sections would be the more-or-less the same on all pages, so you would want to have them stored in reusable files. These files will be included into the main XHTML file for each page using the include() function of PHP. Feel free to check out the include examples that are up on the server.
Once you have finished that, it’s time to start templatizing the actual products that are displayed on the page as well. This would, in theory, allow you to use the same page template for multiple categories of products.
We will do this in a different way than how we templatized the repeating sections of the page. We will be using multidimensional arrays this time. This exercise will be useful as a preparation for when we start to store data in databases.
Eventually, we will want the data for the products to be pulled from a database. But for now, we’re just going to store data in an array as an intermediary step to that goal.
To templatize the products, create a PHP multidimensional array that contains all of your product data. And use a PHP foreach loop to loop through that array and display the product data for each product on your page, rather than having it all hard-coded in the XHTML.
You are going to have to go through all the PHP tutorials on the Tizag site and my introduction to arrays in order to get a grasp of arrays and multidimensional arrays in particular.
Here is an example of how to get starting using a multidimensional array for this assignment. I did not show how to use the foreach loop here, so you will have to investigate that, based on the example of looping through an array using the foreach command shown here.
Be sure to keep a backup of the work you did on the e-commerce page in previous classes – do not overwrite it, just make a copy of it.
Today we enter the realm of server-side technologies. PHP is the server side scripting language that we will be focusing on, but many of the high-level concepts we will be exploring with PHP could just as easily apply to other server-side languages like ASP.NET, Ruby, Python, Java Server Pages, and others.
You may wonder why we even need server-side languages, given the we have seen how the vast majority of web pages are created with a combination of XHTML, CSS, and Javascript. Use Firefox to View -> Page Source on any web page and you will probably see XHTML, CSS, and Javascript code, but absolutely no PHP.
Web developers use XHTML, CSS, and Javascript to control how content shows up in the web browser and how the user interacts with that content. That’s the sole purpose of client-side technologies. Server-side technologies, like PHP, are used to control how that content is assembled and managed on the server before it has even been sent to the browser. Thus, PHP is used to dictate what is often referred to as the “business logic” of a web site.
There are three main uses of PHP:
These three uses are not mutually-exclusive. For example, templating and tracking users depends upon the ability of PHP to store and retrieve content.
Most web sites have elements of the page that are repeated on each page. Very commonly, global navigation or other important navigation elements are repeated on all pages of a site. For example, Google uses the same global navigation links across many of its sub-sites. Notice that the global navigation remains mostly the same from page-to-page, with slight changes:
Global navigation of Google home page
Global navigation of Google home page with logged-in user
Global navigation of Google Images with logged-in user
Global navigation of Google News with logged-in user
It is very unlikely that Google engineers have hand-coded each of the pages on the Google site individually to have the same XHTML and CSS code for this top section. If this were the case, and Google decided to make a slight change to the layout of this top navigation section, the engineers would have to go through the code of each one of the pages of all these Google sub-sites, and change the XHTML accordingly. This would be a very inefficient and expensive way of maintaining a site.
It is much more likely that the engineers have coded this top section once, and are reusing that same code on each of the pages, with slight variations. If they then wanted to make a change to this top section across the site, they would change that one bit of code, and the rest of the site would update automatically. This would be referred to as being a template.
Take another look at the websites you frequently visit, and you will probably see that there are many sections of content that are repeated on each page.
When you visit many sites, you will see that the content is updated regularly but the design often does not change. For example, news sites, e-commerce stores, and blogs all have regularly udpated content (news, products, and blog posts, respectively), while maintaining a consistent design.
Every time a new product is added to a store, the web developers do not usually have to hand-code the new product information. Rather, they build a site that allows an administrator to enter the details of a new product into a form, and when they click submit, that information is stored in a database. And each time a consumer visits the e-commerce site, the server-side code retrieves the latest list of products from the database and fits them into a web template.
As an example, consider the products on Amazon.com. The listings of Sheets and the listings of Comforters look identical in layout and design, however the products that are listed in those two sections are different. This is because the data is being pulled from two different data sets in a database – one for sheets, and one for comforters, but the data in each case is being fit into the same template.
Amazon.com Sheets
Amazon.com Comforters
Thus, the storage and retrieval of data is critical for any dynamic web site. And this use of server-side scripting generally goes hand-in-hand with the templating of web pages. In this case, the template would control the general layout and design of the products section of the site.
Data can be stored and retrieved to/from a variety of different places
PHP can be used to handle the details of using each of these storage mechanisms.
It is often desirable for a web site to be able to track visitors. For example, a user who logs in to their webmail account expects to see their own mail and not someone else’s. Thus, in order for the webmail web server to properly determine which user is currently using the site, it must track each visitor to the site in some way in order to differentiate between multiple users visiting the site at the same time.
Sometimes you want to track users even when they haven’t logged into your site. For example, if you were giving a tutorial on your site, you may want to know how far each user has gotten in the tutorial, even without requiring them to log in.
Tracking users usually involves using cookies at the very least. Often, it will also involve the other sorts of data storage as well.
You should have received notification that you are subscribed to the Web Dev Intensive email discussion list. That email should have information on how to send email to the list, as well as how to subscribe or unsubscribe from the list, so please don’t delete it.
Emails sent to this list at
will be received by everyone in the class, as well as former students from past classes. So it might be useful if you have questions, problems, or anything else you want to share with the class. Use it however you want.
If you have not yet received notification of the list, send a test email to the list address above. If for whatever reason, you have not been subscribed to the list yet, I will be notified automatically and will add you to the list.
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”.
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.
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:
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.
In your studies of Javascript, you will most likely come across the Document Object Model (DOM for short) at some point. The DOM is simply the internal representation the browser has of the contents of a web page. We have already discussed some aspects of the DOM without calling it such.
Whenever you write XHTML and CSS code, the web browser does some internal processing to determine out how the page is supposed to look. The part of the browser responsible for this task is known as the layout engine. The different browsers often have slight different layout engines which means the browsers sometimes display the contents of any given page slightly differently.
The internal representation that the browser makes of the page, the DOM, is made accessible to any Javascript code on the page as a series of built-in Javascript variables. For example, “window” is a built-in variable that holds information about the entire browser window. “document” is another built-in variable that contains all the information about the content in the <body> section of the page.
Developers can write Javascript code to interact with the DOM to either detect or to change how the page is internally represented.
These built-in variables that hold the browser’s internal DOM information are object-oriented, which for our purposes means that these variables do not necessarily hold just text or numbers. They often are wrappers that contain other properties, functions, or other objects “inside” of them. For example, the “window” object has a “title” property inside of it, which is simply a variable that holds the text inside the <title> tag in the XHTML.
When one property, function, or object is inside of another, we use dot notation to indicate the hierarchical relationship. So window.title indicates that title is a sub-property of the window object. The code window.close() tells the browser to run the function called close() that is inside of the window object, which happens to close the window automatically. Similarly, window.alert(“hello”) tells the browser to run the alert() function of the window object and pass it the parameter, “hello”.
There are lots of built-in variables, objects, and functions in the DOM, and it can easily become overwhelming. However, in practice, we only use a few of these. Don’t try to memorize them all. By following the conventions taught in this class, it is not necessary that you delve too far into the details.
There are some things you will want to know:
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.
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.
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
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.
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;
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.
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.
Loading ...