Class 2 – Separation of presentation from content

In today’s web development environment, and in software development in general, there is a popular principle of separation of presentation and content.  In terms of web development, this would mean that the contents of a web page should not be dependent upon the style or design of how that content is displayed on the page.

In some ways, this is a question of efficiency.  Until the last few years, a website’s style was completely and permanently interwoven with its content.  The parts of the code that conveyed the meaning of the site, i.e. its text, were coded in such a way that they also were intermingled with code that indicated how that text should look, what font it should be displayed in, what color, etc.  Thus if someone wanted to change the style, they would have to also change the content, and sites were thus difficult to maintain.

In today’s web environment, where users can be viewing a website through one of many web-enabled devices, such as screen readers for the hearing impaired, mobile phones, set-top boxes, as well as the regular personal computer, separating the presentation of a website from its content allows developers to use the same content but present it differently depending on the device that is accessing it.

By separating presentation from content, an iPhone user, for example, may see a version of a website that is optimized for a small screen, while a Mac laptop user would see the full-size version. They would both see the same content presented in different ways.  You can imagine that a visually-impaired user could also benefit from a different presentation of the same content.

Use XHTML for content and CSS for presentation

This is the fundamental principle that we, as trendy web developers, will try to apply to our usage of XHTML and CSS code.  We will make every effort to use XHTML code purely for the content of our web pages.  And we will use CSS code to indicate how that content should be presented.

We will also do our best to keep CSS code in separate files from our XHTML code, so that the two are not mixed and mingled.  Our CSS code will be kept in files with a “.css” extension, while our XHTML code will be kept in “.html” files.

All is for the best in the best of all possible worlds

This all sounds great in theory, but the web is a messy place.  Given the tools available to us today, the pure separation of presentation from content will not allow us to achieve the sophisticated visual designs we might want our sites to have.  We will find that we must often structure our XHTML code in such a way that the CSS can easily make the page look the way we want it to, thus making the one somewhat dependent, or at least influenced, by the other.

Furthermore, this separation is predicated upon the notion that a site’s design has no importance to its meaning.  One could argue that many sites, especially heavily branded sites, rely primarily upon visual impact to impart their message.  The idea that a message is conveyed solely or primarily through text with no reliance upon presentation is to ignore the complexity of social interaction, and this principle probably says more about the people who profess such things than it does about technology.

But despite these shortcomings, as things stand today, there are still practical benefits to separating presentation from content as much as possible.  Although it is awkward at first, one gets better at it with practice, and it does save time and make maintenance of sites easier in the long run.  So you should do your best to separate content from presentation by using XHTML to demarcate your content, and CSS to indicate styles for the presentation of that content.

Class 3 – Block vs. Inline Elements

Inline elements take the shape of whatever content is inside of them. They stretch to fit only the width of the content inside of them, not any more. And they do not break the flow of the page with automatic line breaks.

Here is an example file highlighting the shape differences between a div and a span. Divs are block elements, while spans are inline elements.  In fact, <divs> and <spans> are identical in all other ways except this difference.

It is possible to convert a block element into an inline element and vice versa using CSS.  You simply adjust the display property of the element in the CSS.

Here is an example where we have converted an element that normally has a block display into one that has an inline display by overriding the default display setting in the CSS code.

Common “block” tags:

• div
• ul, ol, and li
• h1 to h6
• p
• pre
• table
• form

Common “inline” tags:

• span
• a
• strong
• em
• img
• br
• input

Other display types

Note: In reality, the browsers internally use more than just these two display properties to generate the layout behavior of elements on the page.  There are varieties of each of them for elements with special layouts, like table cells, list items, etc.  However, it is useful to generalize all elements into one of these two types to simplify how we code, as well as to overcome browser inconsistencies in how they deal with some of the more specialized types of display.  For a full list of display types and information on browser support for each of them, see this Quirksmode.org page.

Class 4 – Formula for Calculating Widths of Columns in Layout

When working on the layout of a web page, it helps to have a formula for calculating the width setting you should apply to boxes inside of the container div.  This formula takes into account all padding and margins that might have an effect on the dimensions.  Here is the formula:

width of inner boxes = width of container
 - left padding of container
 - right padding of container  
 - (number of inner boxes * left margin of inner boxes)
 - (number of inner boxes * right margin of inner boxes)
 - (2 * number of inner boxes * border width on inner boxes)

Class 2 – CSS Selectors and Web Layout

Today we will be reviewing and continuing to play with CSS selectors.  This post from my class last semester gives a good overview of the basic CSS selectors you can use to style particular parts of your web pages.

Once we are comfortable using CSS to style individual XHTML elements or groups of XHTML elements, we can begin to put together the layout of web pages.  Laying out a web page is a bit tricky, but there is a very specific technique for doing so.  This post outlines the CSS layout technique we will be mastering today.

And I highly encourage you to take the CSS tutorials on the w3schools website whenever you have a chance.  That website also has a very handy reference page for all CSS properties, which will be very useful once you are comfortable with the basic CSS concepts.

Class 4 – MTV Example Layout

Here is the example code for the general high-level layout of the MTV Layout Assignment.   This example was meant to show you the general approach you should take when trying to convert a design comp into XHTML and CSS.  I’ve shown how to lay out the main parts of the page using the basic float and clear technique, but haven’t gone into detail of how to then subdivide those parts.  You can view a live version of this example code here.

The XHTML file, index.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>MTV Assignment Layout</title>
	<link type="text/css" rel="stylesheet" href="styles/mtv_layout.css" />
  </head>
  <body>
	<div id="container">

		<div id="header_box">Header</div>
		<div id="topnav_box">Top Nav Buttons</div>
		<div id="left_box">Left Box</div>
		<div id="right_box">Right Box</div>
		<div class="clear"></div>

	</div>
  </body>

</html>

And here is the CSS file, styles/mtv_layout.css:

div#container {
	background-image: url(../images/mtv_screenshot.png);
	width: 760px;
	height: 1000px;
}
div.clear {
	clear: both;
}
div#header_box {
	height: 72px;
	background-color: yellow;
	opacity: 0.5;
}
div#topnav_box {
	height: 32px;
	background-color: blue;
	opacity: 0.5;
}
div#left_box  {
	float: left;
	margin-top: 10px;
	width: 448px;
	height: 800px;
	background-color: pink;
	opacity: 0.5;
}
div#right_box {
	float: left;
	margin-left: 10px;
	margin-top: 10px;
	width: 302px;
	height: 800px;
	background-color: orange;
	opacity: 0.5;
}

Class 4 – Background Images & Positions

This example shows you how to use a background image as an icon, similar to some of the icons that were displayed in the MTV Music Video Facebook App design comp.

Click here to view this code in your browser.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Aligning Background Image</title>
	<style type="text/css">
div#menu_item1 {
	width: 150px;
	height: 20px;
	line-height: 20px;
	background-image: url(images/button_playlist.gif);
	background-repeat: no-repeat;
	float: left;
}
div#menu_item2 {
	width: 150px;
	height: 20px;
	line-height: 20px;
	background-image: url(images/button_favorite.gif);
	background-repeat: no-repeat;
	float: left;
}
div#menu_item1:hover, div#menu_item2:hover {
	background-position: 0px -46px;
}
a.menu_link {
	display: block;
	width: 23px;
	height: 20px;
	float: left;
	margin-right: 5px;
	outline: 0px;
}
	</style>
  </head>
  <body>
	<div id="menu_item1">
		<a href="#" class="menu_link"></a>
		<span>Add to Playlist</span>
	</div>
	<div id="menu_item2">
		<a href="#" class="menu_link"></a>
		<span>Add to Favorites</span>
	</div>
  </body>

</html>

Class 3 – Homework Assignment

I just realized that I haven’t yet made an “official” post about the homework assignment for this week, but you all are no-doubt already working on it.  For the record, the homework this week is to convert these two design comps into actual XHTML and CSS code:

Design comp for BlackBook Guides app

Design comp for MTV Music Videos app

All the images you will need for each design are in my folder under class3/assignment2/images/ and class3/assignment1/images/.  Please make a copy of these images and use them in your own pages.

Try to get your pages as picture-perfect as possible.  It might help to use the trick of placing the actual design comp as a background image behind your page as you work on it.  This will allow you to easily compare the placement and size of the elements you create in code on the page with those that were originally in the actual design comp.  The former will be superimposed over the latter.

Class 3 – Tools for Reverse Engineering CSS & HTML

When you take an existing product (including websites) and try to determine how it was created, you are doing what is called reverse engineering.  There are several tools at your disposal that may help you discover how a particular website was created in terms of XHTML and CSS code.

View Source

Each web browser allows you to view the source code of the site.  This is the crudest technique for determining how a page was built.  In Firefox, if you click the “View” menu at the top of the browser, you will see a “Page Source” option.  This allows you to view the HTML code of any website.

Firefox menu with option to "view source"

To view the corresponding CSS code, find the <link> or <style> tags in the XHTML code.  If the XHTML is loading an external CSS file, enter the URL of that file (found in the “href” attribute of the <link> tag) directly in the browser address bar.

View Selection Source

If you select any text on the page, and then right-click (i.e., control-click on Mac), you will see the “View Selection Source Option.  This allows you to view the HTML code for only the elements on the pag that you selected.

Firefox context menu, showing "View Selection Source"

Outline Current Element  (using Web Developer Add-on)

With Firefox’s Web Developer Add-on, you can mouse over any element on the page to put a temporary red border around that element, as well as see the CSS selector that applies to the element.  To use this, click on the “Outline” button in the Web Developer toolbar, and select “Current Element”.  This can be useful for determining the approximate size and position of an element that seems to be behaving differently than you expect – the red border will show you its true outline.

Web developer toolbar's "Outline Current Element"

This tool will also show you, directly  underneath the toolbar buttons, how the currently selected element fits into the hierarchy of elements on the page.  This information is shown in a CSS selector-style format, although it is meant for your information on hierarchical structure only, and is usually not how the actual CSS selectors for this element actually appear in the code.

The position of the current element in the document's hierarchy

View Element Information (using Web Developer Add-on)

The Web Developer Firefox Add-on allows you to view the complete information of any element on the page.  To use it, click the “Information” button on the Web Developer toolbar, and then select “Display Element Information”.

Web developer toolbar's "Display Element Information"

This tool allows you to view any CSS settings or id and class XHTML attributes, as well as other information about parent and child elements.  Once you have selected “Display Element Information” from the toolbar, click on any element on the page to get that element’s information.  The selected element will show a red border around it:

Element information about the "history" tab on Wikipedia

Viewing and Editing Source Temporarily (using the Firebug Add-on)

The Firebug Firefox Add-on allows you to not only view XHTML and CSS source, but also edit it to make quick changes and see immediately how they affect the page.  To activate the Firebug Add-on you need to click the firefly icon at the bottom-right corner of your browser window.

Click the grey firefly to activate Firebug

To view XHTML or CSS source code for the page, simply click the “HTML” or “CSS” tabs in the Firebug sub-window.  To edit either the XHTML or the CSS, simply click the “Edit” tab at the top – bear in mind that you cannot save these edits, except by cutting and pasting the code into your text editor (NotePad++ for PC or TextWrangler for Mac)

Viewing CSS code with Firebug

Note that some pages may use multiple external style sheet files.  To swtich between style sheet files in Firebug, click on the drop-down list of file names at the top of the Firebug sub-window:

Switching between multiple CSS files in Firebug

Viewing Element Information (using the Firebug Add-on)

Similar to the the Web Developer Add-on, Firebug allows you to view the CSS and XHTML attribute information of any element on the page.  To use this, select the “HTML” tab in the Firebug sub-window, and simply click on any tag name in the XHTML code that is displayed.  Firebug will highlight that element on the page, as well as show you the corresponding CSS code in the right panel. Even if the corresponding CSS code is spread between several different external files, Firebug will compile them all in the right panel.

Viewing element information in Firebug

Additionally, Firebug allows you to visually see any element’s layout information by selecting “Layout” in the right panel:

Viewing element layout information in Firebug

Determining Exact Colors of Elements (using Colorzilla Add-on)

Using the Colorzilla Add-on, you can determine the exact color of any element on any page.  To activate Colorzilla, click the eye-dropper icon on the bottom left of the browser window.

Activate Colorzilla by clicking on the eye-dropper at the bottom-left of the browser

Once activated, you can click on any element of the page, and the color information will show up in the bottom-left of the browser.  Color codes are displayed in terms of both RGB (useful for PhotoShop work), as well as hexadecimal codes (useful in your CSS code).

Using Colorzilla to detect the color of the "Details" link at http://nyu.edu

Class 3 – A Tip When Working With Design Comps

As you work on the in-class assignment today, you will find that you constantly need to compare your work in XHTML and CSS with the original design composition (called a “comp”) to make sure the widths, heights, and styles of each of the elements matches those in the design comp.

There are several ways to do this.  One easy way to do this is to apply the original design comp as a background image to the container div.  That way, as you are working, you will constantly have the original design comp as a backdrop to your page.

Here is an example of applying the design comp as a background-image to the container div.

You will want to check out both the XHTML and the CSS files.

Class 4 – CSS Positioning

The CSS “position” property has three possible values: “static”, “relative”, and “absolute”.

Static is the default value used by the browser if none other is specified in the CSS.  Statically positioned elements are often referred to as “unpositioned” since no special positioning has been applied to them.  Here is an example of a simple page with two boxes, with no special positioning applied:

Example of static positioning

Relative positioning is used to shift any elements position relative to where it would normally be if it had the default static positioning.  If, for example, we wanted to shift an element over 10 pixels to the right from where it would normally sit on the page, we could give it relative positioning and set the “left” CSS property to be 10px or so.  This would shift it 10 pixels to the right.

Here is an example of an element with relative positioning.  You can see that the yellow box is shifted a few pixels up higher on the page than where it would normally sit.

Example of relative positioning

Absolute positioning allows us to set any element’s position relative to the absolute top-left corner of the browser window.  So if you always wanted an element to sit 20 pixels down, and 30 pixels to the right of the top-left of the browser window, we could give it absolute positioning, and set its “top” property to be “20px”, and its “left” property to “30px”.  This would shift it that exact position relative to the top left of the browser window.

Here is an example of an element with absolute positioning.  Notice that if you resize the window, the red box (the parent element) stays in the center, but the yellow box (the child element) never moves out of position.  Its position is always fixed relative to the top-left of the browser window.

Example of absolute positioning

There is one important special case in which absolute positioning is not relative to the top-left of the browser window.  This is when the absolutely positioned element is a child of another positioned parent element.  The parent element can be either absolutely or relatively positioned… it doesn’t matter so long as it has its position set to something other than “static”.  In these cases, the absolutely positioned child element will be positioned relative to the top-left corner of its parent element, not the browser window.

Here is an example of an absolutely positioned child element within a relatively positioned parent element.

Example of an absolutely positioned element within a relatively positioned element

For each of these examples, the basic XHTML structure of the page is identical.  It is only the CSS position properties (“position”, “top”, and “left”) which make these pages behave differently.