Category Archives: BU MET CS 601 Fall 2011

Category to hold my blog posts for MET CS 601 that I am taking during the Fall 2011 semester.

CS 601- Putting input labels on top of text boxes

by

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>&nbsp;</span>
                <input class="button"type="submit" value="Log In" />
            </label>
        </form>

The <span>&nbsp;</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.)

CS 601 – Using Google Fonts

by

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:

  1. Go to the Google web font site.
  2. Click “Quick Use”
  3. Under 3., choose the @import tab. Copy this text and paste it into your CSS file. (the text should look like: 
    @import url(http://fonts.googleapis.com/css?family=Federant);
  4. Use the font in your declarations, remembering to include a fall back. 
    .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.)

CS601 – Tools for Website Design – MS Visio

by

A few classes back, Prof Sheehan mentioned using Miscrosoft Visio to help with website design and layout. (Keep in mind, by design I mean architectural design and not visual design.) As part of the BU Metropolitan College’s MSDN license, we have access to Visio. I downloaded it and gave it a shot to see what it offered. It does offer templates for design a seems useful.

Using this template gives you access to a number of shapes for website pages:

In building my site design, I used the Web Page and Page Group. There are also the map nodes, which I didn’t explore, but which might be useful for a larger sit In addition to simple shapes, the big advantage to something like Visio is using connectors to show how pages will interact and make you think about how someone might travel through your website. There is another panel (Web Site Shapes) which has more detailed shapes and other items that may be useful. (I didn’t use any of these as I was looking for a high level overview.)

And how does it look when all together?

For actual page layout, I have been using Powerpoint. This has proved useful thinking about what goes on each page and how users will interact with the page.

The other major part of this project is design of the underlying MySQL database. I explored doing this with Visio as it has a database design module. However, I couldn’t get the MySQL specific datatypes imported. Instead, I came across and started using MySQL Workbench, but I’ll talk more about this later.

CS 601 – MySQL enum vs. reference table

by

During last nights class, I asked Professor Sheehan about using the enum MySQL data type vs using a reference table. The MySQL enum type is basically a simple list of valid values. For instance, in an employee database, we might have a number of employee types, manager, clerk, janitor, IT. We could then assign an employee one of these values. A reference table accomplishes the same task, but with a second table:

The question is, which is better? Professor Sheehan said he doesn’t use the enum type. I did some searching and found that reference table is much preferred method for a number of reasons most related to needing to change the allowed values. Even if you think you’re never going to have to do this, you never know. Here’s a few of the sites I found:

  1. 8 Reasons Why MySQL’s ENUM Data Type Is Evil
  2. MySQL Forums :: Newbie :: using enum versus tiny int and lookup table
  3. Mysql ENUM type vs join tables
  4. Enum Fields VS Varchar VS Int + Joined table: What is Faster? – Shows that in most cases, the performance loss when using reference tables is minimal.

CS 601 – Tip for long divs

by

While working on this weeks homework, I had a couple of times when I lost track of which ending div tag went with the starting tag. I started adding it and commenting it as soon as I write it:

<div id="content">
</div> <!-- END content -->

I then add the content in between. This way, as the content gets very long, I still know which </div> goes with which <div>. In fact, I have also starting do this for other elements that might be long (tables, lists) in html and for code blocks in PHP.

CS 601 – Murach Product Manager “correction”

by

While working through the Product Manager application in Murach’s Chapter 4, I was getting errors on the following statement:

1: if(!isset($category_id)) {
2:   $category_id = $_GET['category_id'];
3:   if (!isset($category_id)) {
4:     $category_id = 1;
5:   }
6: }

The error was an invalid index for the expression on line 2. 

Notice:  Undefined index: category_id in C:\xampp\htdocs\
cs601\week4\HW\index.php on line [2]

I had originally rewritten the code, but also tried with a direct copy and paste. I fixed the error using the isempty function:

1: if (!isset($category_id)) {
2:   if (!empty($_GET)) {
3:     $category_id = $_GET['category_id'];
4:   } else {
5:     $category_id = 1;
6:   }

(Note, I’m running in PHP 5.3.5, the book requires 5.3.)

CS 601 – Centering Body

by

While doing the table to divs exercise, I was having trouble centering the body text. I finally managed to do it using the following css code:

#main {
width: 800px;
margin: auto;
}

This didn’t seem to work, and I couldn’t figure out why. It turns out I missed the size unit (px) on the width, which caused it to be ignored. So, as a note for the future, ensure all lengths have a unit. (I might even use it for 0 lengths despite the fact that it’s not needed. That way, if I ever change it later, I won’t miss it again.) Luckily, the validator will catch this (as I just found out by validating an old version of the css file). When I have problems that I can’t figure out, I should validate it as a debeugging check.

CS 601 – Useful Firefox Plugins

by

While working on the current week’s extra credit assignment (converting a page based heavily on tables for layout to a page based on divs), I came across a few useful Firefox plugins for web development:

  • Firebug: Lets you interactively inspect and change CSS styles for elements on any page. One of the really nice features is that is shows the values for all the properties for a given element. It also shows the inheritance stack, i.e., which values are overwritten by later elements. This can be useful for finding unexpected inherited style settings. (I have used this a bit before, but not the capabilities I used this week.)
  • MeasureIt: A very simple plugin that let you add a “ruler” button to the toolbar. This then brings up a tool to allow you to measure areas on the page. This is very helpful for adjusting layout, spacing, and alignment.
  • ColorZilla: Adds a color picker tool. This tool allows you to select any item on a page and find it’s color. You can also directly copy the hexidecimal RGB color to paste in your CSS/HTML file.

CS 601 – CSS Attribute Selector

by

Last Tuesday’s class was an introduction to CSS (Cascading Style Sheets). This was very interesting as it was something I had encountered during my work with websites, but not something I had a good handle on. As explained during class, it’s really quite simple, at least for basic CSS. One topic that came up was the use of attribute selectors. I found an nice use of this in the BU Flexi Theme to give icons to links:

Here’s the CSS code:

#content a[href^="mailto:"] {background:url(images/icons/email.png) no-repeat right center;padding:2px 20px 2px 0;}
#content a[href$=".pdf"] {background:url(images/icons/pdf.png) no-repeat right center;padding:2px 20px 2px 0;}
#content a[href$=".doc"], #content a[href$=".docx"] {background: url(images/icons/doc.png) no-repeat right center; padding:2px 20px 2px 0;}
#content a[href$=".xls"], #content a[href$=".xlsx"] {background: url(images/icons/xls.png) no-repeat right center; padding:2px 20px 2px 0;}

CS 601 – Fragment Linking

by

Just a short post today. While reading through chapter 3 of the Felke-Morris book, I actually learned something new. While most of the chapter covered basic anchor items, it turns out that the name attribute for fragment linking has been deprecated. Instead the mechanism is to use <div id="foo"> (or any (block only?) element) and the reference it using <a href="#foo"> (as before). This is interesting considering the fact that name is still being used in the BU WordPress 3.1 installation. I’ll have to keep this in mind when writing new pages.