ARGH! Firefox bug!

Apparently, the problem I have been having with my XSL has been a firefox bug.

Because this was my first serious foray into XSL in a long time, I just assumed that I was getting the syntax wrong, but apparently firefox has difficulty with applying css rules to elements generated by an xsl transformation. It works "correctly" in Internet explorer, insofar that the displayed page is incorrect in exactly the same way in both the dynamic document as well as a hard translated document. Using a nifty tool that I found online, I found out that the document being produced was accurate, and would work correctly if preprocessed before loading it in firefox. By XMLMind and free for personal use. I might try out another browser for the remainder of this writeup. Notably, web design is not commonly done using XML and XSL documents, so the situation of using a pre-processed XML document is much more common than that of loading an XML document with a transform tag into the browser directly. Still, it is a little disappointing. Maybe Chrome or Opera can do it right?

I think I can promise that we are mostly done with the HTML/CSS segue for now

So, I think I am almost finished with the html and css design. If it were not just for my personal use, I'd have a few more things to fix, but for now, it looks pretty close to my original design in my main browser, Firefox, with a few small, but pretty bad glitches in Internet Explorer. So let's step through a few of the interesting things I found while working the css and html.

First off, I added the tablecloth background that was seen in the first mockup, which was pretty easy. I had to move the Header tag outside of the recipe body for it to display correctly. I used information from this article to get it to display right. I then followed some information from Web Designer Wall to get the gradient that I wanted in the mockup. Notably, because the tab and the recipe body are in two pieces, I had to break up the flow of the gradient into two sections to get the gradient to go over both, so I have some css that does this:

Notably, and the only thing you need to see is that one gradient stops where the next starts. I have three different statements for cross browser compatibility because gradients are still experimental. Next, for the rounded corners I needed this:

Found that information on a blog all about CSS3 features, so again, this is not a mainstream ability yet, but some browsers support it. This is where my big Internet explorer problem comes in. IE9 will round the corners and will do gradients, but it can't do both correctly at the same time, so I have the corners sticking out from the borders, but maybe they will fix it soon? Next is the shadow, which, is another nifty css3 trick, I added it only to the main body of the recipe, because I was having some difficulty getting it to work with the tab, and it really isn't noticed (until pointed out.) but for that, I did:

I liked the effect so much, I replaced the pseudo-shadow on the image tags with this shadow effect as well. My vertical rule in the top section and the horizontal rule are kinda hacks right now created by adding borders to some elements on some sides, but they meet my needs and I'll fix them later.

Next post, I believe, I will start on XSL transformation, and then it might become apparent why I made the mockup.

Recipe Web Page Design: Choosing Fonts

Confession: I don't know much about aesthetic appeal. I delegate the task of finding what might look nice to people online. So, for fonts, I did a search on google for "popular typewriter fonts in web design," because I kinda want to model the look of an old style typewriter, and this article, which seems like a good start. The recommended font for plain text purposes seemed to be "Another Typewriter,"

Which can be seen in the example, or could be, if my site didn't have such a dark theme, but you can still kinda see it. I found a download link here for it. A word of caution is that embedding fonts can be kinda difficult for web developers, but standards for CSS3 are close to being finalized, so now we do have a way to embed a font if desired, so says this page. The page also links this tool which generates some css and some html examples so that you can just cut and paste to your desired pages and css documents. This is what I added to the top of mine (after the import for the reset, mind you!)

This says that all fonts in the body tag should use this font, which is named up above. Now I am going to play around with giving the text some space so that it flows a little better. Here are some tags I added... I don't want to repost my html again, but I am noting that I moved the header outside of the body:

And a few screenshots. I think the shape is starting to come along well now... just need to get the rounded corners, and add some pictures to bring it full circle. Below are screenshots of what it looks like in both firefox and internet explorer. It is always a good idea to try looking at a website in at least internet explorer and in one other browser to make sure that it will work for most visitors.

XML: Recipe Document (part 7)

Ok, haven't had much time for this recently, but let's skip a bit ahead. I have put the following into a css file:

I have retooled my HTML document like so:

First, I want to start off with one statement: I feel like I cheated a little bit by using the clear class. Right now I need it to keep the procedure picture elements from not overflowing the bottom of the entire recipe document section. I hope to get rid of that later. Generally, the HTML document should have as little information about form as possible; this should be left up to the CSS. Second, You might notice I put some weird background colors to each section. It helps me while playing around with css to be able to picture each of the different blocks of text and see quickly where things move. In my css document, I have separated out temporary information towards the bottom. I added a right and bottom border, but no other borders to the image divs to give it the feel of a drop shadow. I am happy to see that I kinda have all the text sections in the right place in the document now compared to my earlier mock up image, but there is still a lot of fine tuning to do in terms of aesthetic improvements, but the shape is starting to come together.

XML: Recipe Document (part 6)

Next, let's work on something that is personally a weakness of mine: cascading style sheets. Cascading style sheets, (commonly css) are what give shape and form and visual appeal to a page. If you take the html example from the previous post, and take a text editor, save it as an *.htm or *.html file, you can open it in a browser, and see a very plain web page. That is ok, and expected, because the html is only supposed to carry information about what kind of information is being displayed; that is it, is kinda like a model for information. CSS is a kinda view, something that makes that information look appealing. So let's get started.

First thing, I recommend getting a css reset sheet to help, here is a reset sheet that will probably work for most of our needs. A reset sheet makes it so that no elements of your document have any style at all; why do we want that? Because most browsers have subtle nuanced differences in the way they present certain elements; if we start off by removing everything, then it is more reasonable to guess that perhaps we will be producing something that looks the same in most browsers. I saved it as reset.css in the same folder as the html mockup I am working on. Then I created my own recipe.css file. Now add this to your <head> tag in your html:

The only line we want to put in recipe.css so far is the following:

Reminder, I have added a <div> tag with an id="Recipe" right inside the body tag of the html between now and the last example. If you open the html file in a browser now, the text is going to look really boring, but that is what we are trying to do with the first step. Let's open up the css document and add the following:

Save your css, and refresh the html file, and you will see that each of the sections named in this file will have the garish colors encoded in those values. I do this because I think visually, and seeing all the sections colored like this helps me place them where I want. Looking back at my mockup, I notice that most of the recipe card's color is actually #eedc5b, so I'll put that in the css for background-color for Recipe, also the recipe card has small margins on each side of the card, and a three pixel black outline, so let's try making the card with some margins on the left and right, giving it a black outline, and giving it a small margin from the top. We will make the #Recipe tag thusly:

Starting to get somewhere now, I'm going to take a break from this and hack at it again later, but as you can see, most of what is listed is kinda self explanatory. We set the border color to black, and made it a solid 3 pixel line, we made the card 80% of the width, and gave it a 20 pixels margin from the top, and automatic left and right margins. This centered it horizontally and moved it down from the top. Next I will arrange the text to flow into their appropriate areas.

XML: Recipe Document (part 5)

Now we need to make a mockup web page taking the design and breaking it down into its constituent parts. I haven't discussed HTML yet, but if you are completely unfamiliar with it, it is a markup language, much like XML with similar tag syntax. It it also not necessarily XML in that tags don't necessarily need to be opened and closed depending on which standard you are using. For me, I decided to use XHTML arbitrarily, which does treat HTML like XML in that it does need matching tags. I validated the document using an online validation service to tell me if all the tags matched and the like. If you want to set up your document to run according to a particular specification, this is helpful for getting the correct document definitions.

So the first thing is to organize the content in the web page according to definition of information and where it might be located. Keep in mind accessibility while you design your HTML. Content in the plain document should run from beginning to end in a logical order which you would read it regardless of where you want to eventually put that information using cascading style sheets. So at a high level the document is like this:

We have split the document into three parts, header, preamble and the procedure. Now we flesh those out with the parts contained inside of them.

Now we have named all the parts of the document that were labeled in the previous image, let's add some Lorem ipsum text and filler so that we have something that might resemble the HTML with content of a complete recipe.

Though it is all nonsense information for now, it will help us decide how to write the cascading style sheets in the next part.

XML: Recipe Document (part 4)

Now I am working on mocking up a display for a recipe in my xml format. I wanted something that looked like an old fashioned recipe card, and then thought that a checkered tablecloth background would work with the theme. Found the texture on this guy's profile, and it seemed that people were free to use it. Right now, it is a little imperfect, you might notice, for example uneven font sizes and things not lining up, but I was just trying to make something that might look decent inside a nominally small 800x600 limit, and I think for that, it came out all right. I also used some Lorem Ipsum text, a common place holder for where one might eventually put a lot of text. At the end of a first try, I made this:

I used Inkscape for mocking up the image.