Posted: July 14th, 2009 | Author: amos | Filed under: xhtml | Tags: class 1, class 2 | No Comments »
Here is a document that uses all of the most common XHTML elements. You can see the end result of this code by clicking this link.
<?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>Class 1 - HTML FRAME</title>
</head>
<body>
<!--
this is a comment
it won't show up when you view this
file in the web browser
-->
<!-- headings -->
<h1>Class 1 - HTML Frame</h1>
<h2>Less Important heading</h2>
<h3>Even less important</h3>
<!-- paragraphs and text -->
<p>This is a paragraph</p>
<p>
This is a paragraph
<br />
with line breaks
<br />
... two of them
</p>
<p>
This is a paragraph with a
<a href="http://nyu.edu">link</a>
</p>
<p>
This is a paragraph
with a
<strong>very important</strong> part
</p>
<!-- preformatted text that maintains spaces and line breaks -->
<pre>
NYU School of Continuing and Professional Studies
48 Cooper Sq.
New York, NY 10003
</pre>
<!-- images -->
<img src="donkey.jpg" title="donkey" alt="image of donkey" />
<!-- ordered list -->
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
<!-- unordered list -->
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<!-- a table with 3 rows and 2 columns -->
<table>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
<tr>
<td>data for row 1 column 1</td>
<td>data for row 1 column 2</td>
</tr>
<tr>
<td>data for row 2 column 1</td>
<td>data for row 2 column 2</td>
</tr>
</table>
<!-- form controls -->
<form>
<!-- single-line text input -->
<label for="t1">username</label>
<input type="text" id="t1" name="t1" />
<br />
<!-- password input -->
<label for="t2">password</label>
<input type="password" id="t2" name="t2" />
<br />
<!-- drop-down list -->
<select>
<option>---select an option---</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<br />
<!-- radio buttons that are mutually exclusive -->
<!-- note that the name field of each input tag is the same -->
<p>Radio buttons with the same name will be
mutually exclusive</p>
<input type="radio" id="r1" name="r1">
<label for="r1">radio 1</label>
<input type="radio" id="r2" name="r1">
<label for="r2">radio 2</label>
<br />
<!-- radio buttons that are NOT mutually exclusive -->
<!-- note that the name field of each input tags is NOT the same -->
<p>Radio buttons with the different names
will not be mutually exclusive</p>
<input type="radio" id="r3" name="r3">
<label for="r3">radio 3</label>
<input type="radio" id="r4" name="r4">
<label for="r4">radio 4</label>
<br />
<!-- multi-line text input -->
<textarea>this is some text in a multiline textarea</textarea>
<br />
<!-- checkboxes -->
<input type="checkbox" id="c1" name="c1" />
<label for="c1">checkbox 1</label>
<br />
<input type="checkbox" id="c2" name="c2" />
<label for="c2">checkbox 2</label>
<br />
<!-- submit button, submits the form data -->
<input type="submit" value="Submit form!" />
<br />
<!-- reset button, resets the form to its original state -->
<input type="reset" value="Reset form" />
<br />
<!-- generic button -->
<input type="button" value="Do nothing" />
</form>
<br />
<br />
<!-- an iframe puts one page within another page -->
<iframe src="http://nyu.edu"></iframe>
</body>
</html>
Posted: July 14th, 2009 | Author: amos | Filed under: xhtml | Tags: class 2 | No Comments »
Here is the outline of the very minimal number of elements necessary for a blank XHTML web page. Recall that the first two lines are more or less a formality. Every XHTML document begins with an <html> tag and ends with a </html> tag. Inside of this go a <head> and a <body> tag. Inside of the <head> tag, there must be a <title> tag with the title of your page inside it.
<?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>The Title of Your Page</title>
</head>
<body>
<!-- the contents of the page go here -->
</body>
</html>
Posted: July 13th, 2009 | Author: amos | Filed under: information architecture, xhtml | Tags: class 1 | No Comments »
So far today, we have taken a look at some of the basic elements of information architecture, and we have gone through the basic list of XHTML tags that are necessary for creating any website.
Here is a link to a more detailed overview of some concepts in Information Architecture.
And here is a link to a high-level description of the basic syntax of all XHTML documents.
And here is a thorough overview of the most important XHTML tags we will be using.
As a reference, you should review the XHTML section of the w3schools.com website at some point. This is a great resource.
Posted: April 24th, 2009 | Author: amos | Filed under: javascript, xhtml | Tags: class 10 | No Comments »
To play audio or video files on a web page consistently across all the browsers, you will want to use a Flash media player. Adobe Flash is the most widely supported application on the web for playing audio and video files. As we mentioned early in the course, Flash is also commonly used to do animation on the web.
There are a variety of Flash media players available online, some free, some not. One of the most common, and easiest to use, is the freely available JW FLV Media Player. The nice thing about the JW FLV Media Player, and other players of its ilk, is that you can relatively easily skin it to make it fit the design of your site.
The bare bones approach
Note: While the following is the simplest way to put a Flash application on your page, and it is worth understanding, it is not the recommended approach. Skip below for the recommended approach.
To place any Flash application on your web page using simple XHTML, you will need to use either the <object> tag, or the <embed> tags in XHTML. Historically, the <object> tag was used for Internet Explorer, and the embed tag was used for the other browsers. However, these days, <embed> is not considered to be valid XHTML, and it is no longer recommended for use. However, most modern browsers continue to support it.
The FLV Media Player apploication we will be using to play media files can be put on a page using the following embed code:
<embed
src="mediaplayer.swf"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"
quality="high"
wmode="transparent"
flashvars="file=http%3A%2F%2Fwww.mos.org%2Fmedia%2Faudio%2F081121MOS_CSTPodcastTMGrapheneDDEelsX.mp3%3Ffile_extension%3D.mp3&autostart=false&repeat=false&showdigits=true&showfsbutton=false"
width="100%"
height="20"
/>
The “src” attribute tells the embed tag where to locate the flash media player file. Obviously, you need to make sure you have a copy of mediaplayer.swf in your own directories in order for this to work.
We then pass a parameter to this media player that indicates which media file it should play. The path to this media file goes inside the “flashvars” attribute. Notice that in this example, in the “flashvars” attribute, we are telling the media player to load a media file from another server. We could just as easily load a media file on our own server using a relative path instead of an absolute path. Also notice that the path to the media file is urlencoded.
To see this example in action on our server, click here.
The recommended approach
This example is the same as the first example above, but it uses the Javascript SWFObject.js library to put the Flash player on the page instead of using the <embed> tag. The SWFObject.js library is just a bit of code that creates the embed tag in Javascript and then places it on the page without you having to write it in XHTML. You’re probably wondering why you would want to use it…
This page gives a good overview of the two methods, the problems with the XHTML version, and the reasons for using the Javascript version rather than the XHTML version.
The code requires that you have downloaded the swfobject.js script, and have put it in a subfolder called “scripts” on your server. Once you have the file uploaded, you can included it into your XHTML file in the head of the document:
<head>
...the usual stuff in the head
<script type="text/javascript" src="scripts/swfobject.js"></script>
</head>
Once that’s taken care of, you put the JW FLV Media Player onto your page using this example code:
<script type="text/javascript">
var so = new SWFObject('mediaplayer.swf','mpl','100%','20','9');
so.addParam('flashvars','file=http%3A%2F%2Fwww.mos.org%2Fmedia%2Faudio%2F081121MOS_CSTPodcastTMGrapheneDDEelsX.mp3&autostart=true');
so.write('flashplayer');
</script>
Notice that the parameters are basically the same as we saw in the <embed> example: the location of the Flash application file, the width and height of the application, and the location of the media file that we want the media player to play. The difference, of course, is that these parameters are specified in Javascript.
PS: In case you didn’t notice, these parameters are obviously arguments being sent to the constructor function of an object in Javascript, similar to how we used constructor functions in object-oriented PHP.
Posted: March 7th, 2009 | Author: amos | Filed under: css, xhtml | Tags: class 4 | No Comments »
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;
}
Posted: March 7th, 2009 | Author: amos | Filed under: css, xhtml | Tags: class 4 | No Comments »
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>
Posted: March 6th, 2009 | Author: amos | Filed under: assignments, css, graphic design, xhtml | Tags: class 3 | No Comments »
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.
Posted: March 4th, 2009 | Author: amos | Filed under: css, xhtml | Tags: class 3 | No Comments »
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
Posted: February 28th, 2009 | Author: amos | Filed under: css, graphic design, xhtml | Tags: class 3 | No Comments »
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.
Posted: February 28th, 2009 | Author: amos | Filed under: assignments, css, xhtml | Tags: class 2 | No Comments »
Your homework assignment in classs #2 was to convert the wireframes we came up with for our Actor’s home page into valid XHTML & CSS code.
Here is my solution to that problem. You’ll see, if you copy the files from my server account, that there is one XHTML file, one CSS file, and two images that go along with this solution.
The files required for this solution are:
wires.html - the XHTML file
styles/wires.css - the CSS file
images/pixel.png - a placeholder for any images on the page
images/wires.png - a screenshot of the entire information architecture diagram
Here are the contents of the XHTML file, wires.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>Artist Home Page</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- put a any CSS style sheet or JavaScript code here -->
<link rel="stylesheet" type="text/css" href="styles/wires.css" />
</head>
<body>
<div id="container">
<div id="headshot_box" class="column1">
<img id="image_main" src="images/pixel.png" />
<a href="#"><img class="image_thumb" src="images/dummy.png" /></a>
<a href="#"><img class="image_thumb" src="images/dummy.png" /></a>
<a href="#"><img class="image_thumb" src="images/dummy.png" /></a>
<a href="#"><img class="image_thumb last" src="images/dummy.png" /></a>
<div class="clear"></div>
</div>
<div id="title_box" class="column2">
actor's name
</div>
<div id="tab_box" class="column2">
<div class="tab"><a href="#">about</a></div>
<div class="tab"><a href="#">work</a></div>
<div class="tab"><a href="#">contact</a></div>
<div class="tab selected"><a href="#">press</a></div>
<div class="tab last"><a href="#">blog</a></div>
<div class="clear"></div>
<div id="tab_content">
<p>Executive Summary</p>
</div>
</div>
<div class="clear"></div>
<div id="awards_box" class="column1">
awards
</div>
<div id="video_box">
<img class="video_main" src="images/dummy.png" />
<a href="#"><img class="video_thumb first" src="images/dummy.png" /></a>
<a href="#"><img class="video_thumb last" src="images/dummy.png" /></a>
</div>
<div id="dvd_box">
link to buy DVD
</div>
<div class="clear"></div>
</div>
</body>
</html>
And here are the contents of the CSS file, styles/wires.css:
body {
background-color: pink; /*the background color for the whole page */
}
img {
border: 0px; /*remove any borders that the browser may automatically apply to images nested inside of <a> tags */
background-image: url(../images/pixel.png);
}
div {
border: 2px solid red; /*put a red border around all divs to see them easily */
background-color: white;
}
div#container {
/* background-image: url(../images/wires.png); */ /* i used the wireframe diagram as a background image on the container so I could more quickly see if my code matched the diagram... uncomment this code to see how it looks */
margin: 0 auto; /* this is a technique to center the main container on the page */
padding: 31px;
width: 900px;
height: 660px;
}
div.clear {
clear: both;
border: 0px; /*since I've applied a border to all divs, I have to override it for the "clear" divs to make them invisible */
}
div.column1 {
/* all boxes in the left column have some properties in common, so I've placed them in a CSS class */
width: 271px;
float: left;
margin-right: 5px;
margin-bottom: 6px;
}
div.column2 {
/* all boxes in the right column have some properties in common, so I've placed them in a CSS class */
width: 615px;
float: left;
margin-bottom: 6px;
}
/* BEGIN HEADSHOT BOX STYLES*/
div#headshot_box {
height: 447px;
}
div#headshot_box img#image_main {
width: 271px;
height: 369px;
margin-bottom: 0px;
}
div#headshot_box img.image_thumb {
float: left;
width: 58px;
height: 72px;
margin-right: 13px;
}
div#headshot_box img.image_thumb.last {
margin-right: 0px;
}
/* END HEADSHOT BOX STYLES*/
/* BEGIN TITLE BOX STYLES*/
div#title_box {
height: 142px;
}
/* END TITLE BOX STYLES*/
/* BEGIN TAB BOX STYLES*/
div#tab_box {
height: 295px;
}
div#tab_box div.tab {
float: left;
border-width: 0 2px 2px 0;
border-color: green;
padding-top: 10px;
width: 121px;
height: 31px;
text-align: center;
background-color: #f0f0f0;
}
div#tab_box div.tab a {
color: black;
text-decoration: none;
}
div#tab_box div.tab.last {
border-right: none;
width: 122px;
}
div#tab_box div.tab.selected {
background-color: white;
border-bottom: 1px solid white;
}
div#tab_box div.tab.selected a {
color: black;
font-weight: bold;
}
div#tab_box div#tab_content {
border: 0px;
background-color: white;
padding: 20px;
height: 210px;
}
/* END TAB BOX STYLES*/
/* BEGIN AWARDS BOX STYLES*/
div#awards_box {
height: 198px;
}
/* END AWARD BOX STYLES*/
/* BEGIN VIDEO BOX STYLES*/
div#video_box {
float: left; /* since the video box does not inherit from either column1 or column2 class, we need to set its float and width properties specifically here */
width: 250px;
height: 198px;
position: relative; /*by making this box's position=relative, we allow child elements of this to use absolute positioning relative to the position of this element */
}
div#video_box img.video_main {
width: 177px;
height: 198px;
float: left;
margin-right: 10px;
}
div#video_box img.video_thumb {
width: 60px;
height: 80px;
}
div#video_box img.video_thumb.first {
position: absolute; /*since this element's parent element is relatively positioned, this absolute positioning is relative to the position of that parent element, NOT relative to the top-left of the entire browser window */
right: 0px;
top: 0px;
}
div#video_box img.video_thumb.last {
position: absolute; /*since this element's parent element is relatively positioned, this absolute positioning is relative to the position of that parent element, NOT relative to the top-left of the entire browser window */
right: 0px;
bottom: 0px;
}
/* END VIDEO BOX STYLES*/
/* BEGIN DVD BOX STYLES*/
div#dvd_box {
margin-left: 10px;
float: left; /* since the dvd box does not inherit from either column1 or column2 class, we need to set its float and width properties specifically here */
width: 351px;
height: 198px;
}
/* END DVD BOX STYLES*/
You can see how the files display in the browser by clicking here.
Loading ...