Click a link on the left to view the related content for the project.
Tutorial 1: Leonhard Euler
For this project, I was supposed to mark up a short document on the subject of Leonhard Euler. It included two mathmatical equations that were to be quotes, two citations, and two mathematicians that needed to be bold.
To mark up the equations, I decided to use <span> tags with classes of varible, constant, number, and mathematician to convey semantic meaning, instead of just using generic <i> or <em> tags. I used the <sup> tag to make the superscript sections of the equation.
I also used a linked stylesheet, because I, personally, have to use them. I cannot justify inline style when there is a mechanism to seperate structure from presentation.
Finally, I validated the code with the W3C Validation Tool to make sure that I had nested tags properly, etc.
Link to validated code: Valid Code.
Tutorial 2: Fiddler on the Roof Junior
Tutorial 2: Fiddler on the Roof Junior
For this exercise, I created anchor tags so that you could navigate a slide show. This was a pretty straight forward task, once again.
I created the necessary code in slide1.htm and then copied and modified it for the remaining pages. I then created a link from home.htm to slide1.htm, so that it could be reached from the home page.
I then validated the code. You can view the results here: Validated Code.
Tutorial 3: Center for Diversity
Tutorial 3: Center for Diversity
I did this excercise two different ways. One, was how the directions say to do it; two, is how I think it should have been done.
By The Book
Doing it this way involves using a <span> tag that is not neccesary. You can just add an id to the first <p> tag and then use the :first-letter psuedo-selector. I know it is a small thing, but lots of small things add up to big problems.
Also, they have us use inline and embedded style information. I think that can lead to bad habits that will make larger sites harder to manage.
Ultimately ends up with invalid code, even though it does work. W3C Validator says: Not Valid Code. With two little changes to the code you can make it valid. Just add a <!DOCTYPE> and and xmlns attribute to the <head> tag. It does still complain that there is no character encoding, though.
My Way
I put all my css in one file and linked that file in the <head>.
I also did not use the <span> tag for the first letter of the first paragraph.
I added the <!DOCTYPE> and and xmlns attribute to the <head> tag. I also added some <meta> tags to the head. Which all means my code will validate properly with no warnings: Valid Code.
Tutorial 4: Civil War Studies
This project was very easy to accomplish. The only real problem I had was that Google Chrome for some reason will not render the :first-line pseudoselector properly.
They showed us how to use a second <h2> tag as a drop shadow. There are a couple reasons this is a bad idea. First, it is not a semantic use of HTML. Second, it causes problems for people with screen readers, mostly in the repeating of every heading using this technique. I have created a page that uses a tiny bit of CSS3 to accomplish this effect: Civil War Studies. I used the rule text-shadow: #000 1px 1px 1px; of the <h2> and removed the extemporaniuos <h2> tag out of the code. Althought, this does not work in any version of IE that I currently have (6, 7, 8, 9 beta), it should work in IE9 when it is finalized. Use Firefox 3.5+ or Google Chrome/Safari to see this rule in effect.
The example files still don't include a <!DOCTYPE> or any character encoding information, which are very bad habits to foster.
Tutorial 5: The Japanese Puzzle Factory
Tutorial 5: The Japanese Puzzle Factory
This project needed to have an area to the left the had rounded corners on the top right and left. It also needed a table constructed for the Sudoku board.
I think if it were up to me, I would just use CSS3 to create the rounded corners and IE users can just see square corners, instead of using background images for this effect. I get so tired of supporting a browser that has for so long not supported standards, just so they can try to put competing browsers out of business.
And again, no <!DOCTYPE> was included in the code.
Tutorial 6: Civil War Quiz
This project was fairly easy, since they did not have us write the logic for the quiz. It involved creating a form for a quiz about the Civil War. I used the <form>, <fiedset>, <label>, and <input> tags to create the form. I wish we would have created the logic for the form as well, but maybe in future projects we will do that.
Tutorial 7: Roadways
For this project I added an object for a Flash video. It was pretty straight forward, I used some conditional comment to hide the plugin object from Internet Explorer.
The major problem I had was getting conditional comments to work properly. Fortunalely I have used them before and I know how to make them work. First off, the method in the book does not work. You have to use this structure for a conditional comment to work in IE without causing problems: <!--[if IE]> <![endif]-->. And this structure for other browsers(Firefox, Safari, Chrome, Opera): <![if !IE]> <![endif]>.
This structure: <!--[if IE]><!--> <!--<![endif]-->, did work in IE, but it had a undesireable side effect in other browsers. It caused two videos to be displayed in Chrome(Screenshot [162.3KB]) and in Firefox(Screenshot [238.7KB]) it displayed one video but also displayed "To play this clip you need Adobe Flash Player." at the top competing with the heading.
In IE 64 bit it did not display a video, a small problem since every 64 bit install has a 32 bit version of IE installed along side the 64 bit version. Screenshot [475.2KB]
So, I figured out why I was getting weird results with two videos showing up in some browsers when using the structure from the book for conditional comment. I was closing the <object> tag with a closing tag. When I removed this tag it and left it open the comments worked as explected.Fixed page
In the end though, I think I will use the Conditional Comments that work with closing tag instead of having to sacrifice well defined document structure.
Tutorial 8: SkyWeb Astronomy
So, the files I recieved for this excersize was already done for me by Andrew Weiss, which kind of disappointed me. So, I am going to make sure that it is valid code and semantic markup, etc.
The first check revealed that the images had improper <alt> content and that the <iframe> where using attributes that are depricated. I fixed the <alt> attributes and then moved the iframe attributes into the astro.css file where they belong, translating them into CSS rules. Having done that I then check against the WCAG to see if it would pass a basic accessibility test, which it did.
Then I decided to removed the excess <div> tags that where used to create rounded corners and instead used CSS3 rules to create the effect. That of course, means that IE9 beta is the only Microsoft Browser that can understand those rules, so most of you will have to use Chrome or Firefox to see the effect. Here is a link to the page I created: SkyWeb2.
Tutorial 9: Travel Scotland!
This project was also already done. Oh well, it's not like I don't know how to do this stuff already.
There was a problem with this page in displaying the proper background color. It was supposed to be black, but in my template file it was showing up as white. There were two ways I found to fix this issue. One was to remove the <![CDATA[...]]>, but leave the body{...} (Example). The other was to remove the embeded styles and link to an external stylesheet (Example).
There was the interesting effect of Shadowbox, which I use to present my projects within the context of my home page. It causes the <![CDATA[...]]> to be interpereted correctly (Page in Shadowbox. | Page not in Shadowbox.).
I have done some more research and found another way to make this work. If you change the <![CDATA[...]]> to /*<![CDATA[*/.../*]]>*/, then the CSS is interpreted and applied correctly (Example).
Tutorial 10: Midwest Student Union
Tutorial 10: Midwest Student Union
In this project, I was to use some JavaScript functions to create elements that contained data for the current day. I created a date element at the top of the page and an inline frame that contained a schedule for the day. I used the document.write method and the showDate() function to add the necessary content.
I then validated the project just to make sure that everything was proper. Turns out that the inline JavaScript was throwing errors. So I set them up by linking to then instead of having the code in the page. Then it validated just fine: Valid Code.
There is one thig I don't like about this approach. If JavaScript is turned off, then you have an unused <p> tag and an unused <div>. What I would do if I was doing this for a production page, would be to generate the <div> and <p> tags with JavaScript and use a addLoadEvent() function to trigger the JavaScript. That way, when JavaScript is disabled or fails for some reason, the document will not have extra tags in the structure.
Tutorial 11: Biotech, Inc
In this exercize, I was to fix errors in the XML coding, which is pretty hard to do when the assignment is given to me completed.
It does validate without any tweaking on my part: Valid Code.
Tutorial 12: Bozeman Public Library
Tutorial 12: Bozeman Public Library Website
In this weeks project we were working with namespaces. We had to create a namespace for author and books to seperate the vocabulary were they overlap with common element names. This is not a hard concept to grasp. It is just a way of using XML to create your structure and not having to worry if you have element that are named the same thing.
Tutorial 13: Pixal Productions
Tutorial 13: Pixal Productions
This weeks project I could not complete. The entities never worked for me. They just threw errors no matter how I messed with the code. I read a whole lot on the web. I even used internal parameter entities and it still claimed it could not find the entities content: Internal entity declaration.
Original Code
00 <?xml version="1.0" encoding="UTF-8" standalone="no" >
01 <!DOCTYPE warehouse
02 [
03 <!ELEMENT warehouse (m:models, p:parts)>
04 <!ATTLIST warehouse xmlns CDATA #FIXED "http://www.micahcantrell.com/ivytech/pixal">
05
06 <!ENTITY % modelsDTD SYSTEM "models.dtd">
07 <!ENTITY % partsDTD SYSTEM "parts.dtd">
08 <!ENTITY modelsList "models.xml">
09 <!ENTITY partsList "parts.xml">
10 <!ENTITY MICAH "micahcantrell">
11 %modelsDTD;
12 %partsDTD;
13 ] >
14
15 <warehouse xmlns="http://www.micahcantrell.com/ivytech/pixal">
16
17 &modelsList;
18 &partsList;
19
20
21 &MICAH;
22 </warehouse>Internal Entity References
000 <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
001 <!DOCTYPE warehouse
002 [
003
004
005 <!ELEMENT warehouse (m:models, p:parts)>
006 <!ATTLIST warehouse xmlns CDATA #FIXED "http://www.micahcantrell.com/ivytech/pixal">
007
008 <!ENTITY % modelsDTD
009 "<!ELEMENT m:models (m:model+)>
010 <!ATTLIST m:models xmlns:m CDATA #FIXED 'http://www.micahcantrell.com/ivytech/pixal/models'>
011
012 <!ELEMENT m:model (m:title, m:description, m:ordered)>
013 <!ATTLIST m:model mid ID #REQUIRED>
014 <!ATTLIST m:model parts IDREFS #REQUIRED>
015 <!ATTLIST m:model type (scanner|color_laser|bw_laser|inkjet|camera) #REQUIRED>
016
017 <!ELEMENT m:title (#PCDATA)>
018 <!ELEMENT m:description (#PCDATA)>
019 <!ELEMENT m:ordered (#PCDATA)>"
020 >
021 <!ENTITY % partsDTD
022 "<!ELEMENT p:parts (p:part+)>
023 <!ATTLIST p:parts xmlns:p CDATA #FIXED 'http://www.micahcantrell.com/ivytech/pixal/parts'>
024
025 <!ELEMENT p:part (p:title, p:description, p:instock)>
026 <!ATTLIST p:part pid ID #REQUIRED>
027 <!ATTLIST p:part model IDREFS #REQUIRED>
028
029 <!ELEMENT p:title (#PCDATA)>
030 <!ELEMENT p:description (#PCDATA)>
031 <!ELEMENT p:instock (#PCDATA)>"
032 >
033 <!ENTITY modelsList
034 "<m:models xmlns:m='http://www.micahcantrell.com/ivytech/pixal/models'>
035
036 <m:model mid='pr205' parts='chx201 fa100-5 eng005-2 cbx-450V4 tn01-53' type='color_laser'>
037 <m:title>Laser4C (PR205)</m:title>
038 <m:description>Entry level color laser printer</m:description>
039 <m:ordered>220</m:ordered>
040 </m:model>
041
042 <m:model mid='pr105' parts='chx201 fa100-5 eng005-2 cbx-050V4 tn01-003' type='bw_laser'>
043 <m:title>Laser I (PR105)</m:title>
044 <m:description>Workgroup BW Laser Printer</m:description>
045 <m:ordered>116</m:ordered>
046 </m:model>
047
048 </m:models>"
049 >
050 <!ENTITY partsList
051 "<p:parts xmlns:p='http://www.micahcantrell.com/ivytech/pixal/parts'>
052 <p:part pid='chx201' model='pr205 pr105'>
053 <p:title>Chassis and Roller Kit</p:title>
054 <p:description>JChassis and rollers/JE series</p:description>
055 <p:instock>817</p:instock>
056 </p:part>
057
... ...
087
088 <p:part pid='tn01-003' model='pr105'>
089 <p:title>Toner Kit</p:title>
090 <p:description>PR105 toner kit (b,m,c,y)</p:description>
091 <p:instock>198</p:instock>
092 </p:part>
093 </p:parts>"
094 >
095 <!ENTITY MICAH "micahcantrell">
096 %modelsDTD;
097 %partsDTD;
098 ] >
099
100 <warehouse xmlns="http://www.micahcantrell.com/ivytech/pixal">
101
102 &modelsList;
103 &partsList;
104 &MICAH;
105 </warehouse>If you comment out lines 11 and 12 then the document works, but the &modelsList; and &partList; entities get replaced with the text "models.xml" and "part.xml", not the contents of said files. You can see that &MICAH; gets interperated like it should. This means that I cannot pull in content from outside XML documents. I know it has to be some stupid typing error, but I can't see it. This has been a frustrating exercize.
I even tried to put everything in the same file, and that didn't work. I then realized if I removed the namespace designations, things might start working. Although, I never got parameter entities working the page does display the information and the general entities I set up do work. Hmmm?
So, I fired up Firefox in Windows XP and the Internal entities worked as expected. There must be a bug Google Chrome and Firefox on Linux, because I went back and looked at Linux again and it still says there is an error in my code.
Tutorial 14: Fairway Views
This project was a breeze compared to last weeks. I even got a chance to mess with some more CSS to generate some small amounts of content for the page. I used it to create most of the bold text on the page, that way I did not have to change the document structure. I just used a rule similar to this: element:(before|after) { content: "Example Content: "; }.
Using CSS to change content is sort of a gray area. If you look at the document without the added content, it doesn't make much sense. But since the document structure contains the information (<event>, <wins>, <earnings>, etc), the added information is really just presentational to make it easier for human readers to understand. Without it you don't have much context to put the numbers that are presented to you.
That's how I justify the use of CSS for adding content.
Tutorial 15: Web Accessibility
For this project, I needed to look at my pages I have developed and make sure that they are accessible to all users. I think that is it shameful that this is an afterthought to the class. This should be the number one thing we do as web designers/developers, not a little bit you think about after the project is over.
There are a few things that ease the proccess of making a site accessible. Use semantic, valid HTML/XHTML. Use valid CSS. Use JavaScript for progressive enhancement, don't hang your web site on the fact that everyone will have JavaScript installed or enabled. Use the alt attribute for images.
If you do these things while you are designing, there should be very little to change when looking at accessibility issues.
Tutorial 16: Cookies
I decided to use this page to create a feature using cookies. So I created a little app that shows and hides the footer and then remembers your preference with a cookie when you visit the site again.
I created the app in PHP and then used some JavaScript with the XMLHttpResponse object to communicate with the server in the background, so that the whole page does not have to load when using the feature. I also created a PHP script that works without JavaScript so that if it is not enabled the feature still works, but with a page refresh.
The functionality you should see is that when you visit the page the first time, you will see the footer. If you hide it, from then on when you visit the site, you will see a small show button in the bottom right hand side of the screen.
In the larger scope of things this is a pretty useless feature, but it works well for demonstrating the use of cookies and their function, which is to store little pieces of information.
