I just finished posting the batch from July and August. This also includes photos from September from our trip to Vermont to have them all included in the same album.
At the Bronx Zoo
My (Second) Fish
I know I have been very remiss in not posting recent photos of Kyle. (The most recent ones were posted in April.) I have finally managed to go through and tag/catalog all the ones I have (up to a couple of weeks back). I’ll be posting them over the next few days. Please keep in mind that in order to finally catch up, I decided to simply batch process all the images, so they may not be up to the usually standards. (Normally, I manually process each image, but that’s quite time consuming.) Anyway, the first batch is up at Kyle: May & June 2011. Here’s a couple of images:
At Ben & Jerry's
At the Providence Zoo
As a surprise to us all, Kyle decided not to be a firefighter on Halloween this year. Instead he was a zookeeper. (He was a firefighter for the trick-or-treating on Sunday in downtown Westfield.) As another surprise, we ended up trick-or-treating with snow on the sidewalks in Westfield. Here are a couple of photos.
While working on my project site, I noticed the layout pane of Firebug:
I think this could be very useful for examining and adjusting margins and padding values.
One of the issues that came up was where cases where divs floated (left, but I suppose it could happen to right floated ones as well) is that they are misaligned when they don’t fill the space. Below is an example of this from my registration form. What I want is to get fields in the form:
City State Zip Phone Email
Instead I get:
I fixed this to get the desired result:
How did I do this? I used a “clearing” div as follows:
<label for="zipcode"><span>Zip</span>
<input type="text" name="zipcode" />
</label>
<div class="clearing"></div> <=== Relevant Code
<label for="phone"><span>Phone</span>
<input type="text" name="phone" />
</label>
<label for="email"><span>Email</span>
<input type="text" name="email" />
</label>
(Note, I omitted the City and State as the State select input has a bunch of irrelevant PHP code.)
An here's the CSS:
.clearing {
clear: both;
}
Based on some quick reading, this is telling the browser to not allow floating elements on both sides, hence resetting the floats. I have to admit, I didn't realize this now. Instead, I have been using it extensively for float issues in the BU WordPress installation used for the Chemistry website. (It works even better now that they're not lost when someone edits a page with the visual editor instead of the HTML editor.)
Based on some additional reading, it seems like another way to do this is to put the objects in a containing div and then setting the width and overflow: auto . (See http://www.quirksmode.org/css/clearing.html.) I actually think the "old" way is better as you don't have to readjust the width of the container if the inner elements change and you don't have to have the extra CSS to set the width for each and every container. (Instead, I have one CSS selector for div.clearing.) Also, In my mind it's cleaner to have the single, self-contained div line in the HTML instead of the div wrapping a bunch of other code.
While doing my styling, I realized the menu is going to be much longer than the space I have allotted for it in the design. I used the technique listed at http://www.htmlite.com/faq015.php to make the menu div scrollable. Here’s the CSS:
.menu {
height: 700px; /* Same height as content div */
overflow: auto;
}
Here’s what it looks like:
I’m not sure I like what it looks like, and I may replace it with some nicer Javascript. For now, however, it works.
One of the things I’m doing with the site is to have different footers depending on if a user is logged in. The footer will contain a second, static menu for accessibility reason. This would be pretty straightforward to do in PHP in the footer page except I have different numbers of items depending on if a customer is logged in, if an employee is logged in, or if no one is logged in. This means the div widths have to change to keep it centered in the footer menu wrapper div. I could do this in the page, but I thought it would get messy and cumbersome. Instead I use includes.
In index.php:
$loggedinCustomer = True; // Just here for styling testing. $loggedinEmployee = False; // Will be extracted from login cookie.
In footer.php:
if ($loggedinCustomer) {
include('footermenuCustomerLoggedIn.html');
} else if ($loggedinEmployee) {
include('footermenuEmployeeLoggedIn.html');
} else {
include('footermenuNotLoggedIn.html');
}
Each of the HTML pages is the html for just the menu and not a complete page (with head and body elements, etc.) The main.css file then contains selectors for different divs, etc., classes of NotLoggedIn, CustomerLoggedIn, and EmployeeLoggedIn. In fact, considering it, I could even import different CSS files depending on the login state, but that might be overkill for this.
This looks like an interesting solution. and I may use it for more than this. It also follows the model-view-controller (MVC) desing concept presented by Murach.
PS, coming soon will be the post about MySQL developer which I promised a couple of weeks back. I’m also going to do one on the Netbeans IDE. For the latter, suffice to say that if you’re not using it (or an equivalent IDE), get it.
While Googling for the W3C HTML validator page to add it as a bookmark, I found that there is a plugin for Firefox that will validate the code right in the browser. It has the option to run the same backend validator engine as the service at W3C (the SGML parser), to run a more thorough validation engine (the Tidy parser; also developed by the W3C) or to run them serially (i.e., the W3C engine and then the more thorough one if no errors are found.) The Tidy parser can also do accessibility checks and suggest fixes, among other things. The plugin can be found at https://addons.mozilla.org/en-US/firefox/addon/html-validator/. Keep in mind that you will get more errors with the Tidy parser. Playing with some “real” sites is interesting. Google yields 60 errors. Amazon came up with either 160 or 1566 depending on how the results are read. (I think it’s different reading a frame vs the entire page.) Reddit has 45. It looks like it might have some issues with HTML5, but you simply have to “view source” in the plugin menu. It also has a direct link to the online HTML validator (sending the page) as well as the CSS validator.
I was working on my login form and wanted to put the text labels above the text boxes. While searching for how to do so, I came across an interesting blog post on thinking about where they’re placed. The bottom of that post links to an article on UXmatters.com that analyzes eye-tracking data for different placements that was also interesting. (That site looks like it might have other interesting and applicable information.)
Anyway to the topic at hand. Taking inspiration from a post on Stackoverflow.com, I managed to get it working and tweaked to look decent.
Here’s the HTML code (in header.php):
<form>
<label for="username">
<span>Username</span>
<input type="text" id ="username" />
</label>
<label for="password">
<span>Password</span>
<input type="text" id="password" />
</label>
<label class="button">
<span> </span>
<input class="button"type="submit" value="Log In" />
</label>
</form>
The <span> </span> is to help align the button with the text fields. I could also do this by using positioning in the CSS, but I thought this might be more robust as changes to the font sizes on the labels (which I’m still playing with) don’t require a change in the positioning. (I do have to make the box a bit smaller for some reason, but I do that in the CSS.)
Here’s the CSS:
.loginform {
float: right;
position: relative;
top: 70px;
}
.loginform label {
width: 150px;
float: left;
margin: 0 10px 0 0;
}
.loginform label.button {
width: 50px;
}
.loginform span {
display: block;
margin: 0 0 3px;
color: white;
font-size: 0.7em;
}
.loginform input {
width: 150px;
border: 1px solid #000000;
padding: 0px;
height: 20px;
}
.loginform input.button {
width: 50px;
height: 19px;
font-weight: bold;
font-size: 0.7em;
color: #FFFFFF;
background-color: #3B5998;
}
I think a key is the block display setting for the span. I’m not exactly sure what this does, but I’ll look into it more to understand it better. The .button selectors are simply to style the button a bit differently than the other inputs and to make it narrower since it doesn’t have to accept text. I also want to add a “Forgot your password?” link and maybe a register button. (I’m not sure how I’ll layout the register button yet.)
I started building my actual page template after building most of my pages as pages in Powerpoint for quick drafting. I currently have the main sections laid out and now need to start doing more of the design. (Actually, first I have to figure what I want the restaurant to be, but I have some ideas.) While working on this, I started exploring the use of Google’s open source web fonts. This is pretty straightforward as is done as follows:
@import url(http://fonts.googleapis.com/css?family=Federant);
.content h1 {
font-family: 'Federant', cursive;
color: #330099;
}
What it looks like:
(P.S. — No comments on the actual font please. I’m just using this as an example and trial.)