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;}

Wed Night – Big 4 Concert

by

Megadeth

In case anyone is wondering where I spend Wed night (9/14), I was at the Big 4 thrash metal show at Yankee Stadium in NY City. I got tickets through a friend of a friend. The seats were so-so, but I have been spoiled lately by getting floor “seats” and ending up just back from the rail. (I was maybe 7-10 people back when I saw Megadeth last summer and only 3-4 and right in front of Lemmy when I saw Motorhead last March.) The show was great, though the organization of getting in was piss-poor. I did, however, see Eddie Trunk (hosts a NYC-based metal radio show) while waiting in line. (I was in line. I’m sure he had special backstage passes.)

Slayer

Anthrax opened the show. I’m not a huge fan in the sense that I don’t own/know a lot of their stuff, but it was great to see them for the first time especially as they’re a local band. I did recognize a few songs (Caught in a Mosh, Indians, and I am the Law). Megadeth put on a decent show, though I think they were better last summer. (Dave Mustaine said he shouldn’t even be playing as he was in the hospital on Monday for tests prior to neck surgery.) Slayer was up next and was great. Again, I’m not as familiar with they songs as Megadeth or Metallica. I did recognize War Ensemble, Dead Skin Mask, Hate Worldwide, and, of course, Raining Blood (one of the best opening licks in all of metal.) I was disappointed Jeff Hanneman was still not there (apparently sidelined by a spider bite), but the replacement (Gary Holt from Exodus, another thrash band) was still excellent.

Metallica

Metallica closed out the evening with a spectacular show. It had been a while since I’ve seen them live and I’m not a huge fan of their new stuff, but it was great to see them again. They played a ton of old stuff with only three post-Black album songs. The intro to One was really good with tons of pyro effects. The flames from the large effects behind the stage were hot enough to feel even up in the second tier. (They used these for another few songs.)

Finally, the night “ended” with members of all four bands (and apparently) Exodus coming out and playing Overkill (Motorhead cover) together. Watching four drummers all play at once was hilarious. After that song, Metallica stayed on stage for Battery and Seek & Destroy.

All in all, it was one of the best concerts I’ve been to. I would have loved to be on the floor, but even a bit away was good.

(PS, sorry for the so-so photos, but all I had was my phone.)

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.

First Real CS 601 Post – Felke-Morris Chapter 1 Focus on Web Design

by

First Real Post

The first blog assignment for class is to look at one of the sites referenced in the first chapter of Felke-Morris’ Basics of Web Design: HTML5 and CSS3 (LINK) and answer some questions about it. I decided to use the Creative Commons website. As an serious amateur photographer with (I’d link to think) above average knowledge of copyright issues, the idea of having a series of licenses that allows for sharing media without full release into the public domain. It also allows for more control than something like the GNU public license. (If you’re interested in this, I would suggest reading Siva Vaidhyanathan’s Copyrights & Copywrongs, though it may getting outdated as it was published in 2001.)

Anyway, to the topic at hand (web design). I’ll go through the questions as presented in the book:

  1. What is the purpose of the site? The main purpose of the site is to educate people about the concept of Creative Commons and the organization. (They also provide a mechanism to search for content.)
  2. Who is the intended audience? Basically everybody, but the focus in on media producers & users. However, this includes several groups such as artists, in one form or another, educators, scientists, and governments.
  3. Do you think that the site reaches its intended audience? Yes. The front page has links basic information presented prominently. It also has direct links on the main page to subpages for specific groups.
  4. Is the site useful to you? Yes. I actually have licensed my photos use CC license, and the site has provided detailed information on the different type of licenses. It also has a good description of the overall purpose of CC and why it’s important.
  5. List one interesting fact or issue that this site addresses. That both Al Jezeera and Nine Inch Nails have issued material under a CC license. This is actually important in that it shows it’s not just amateurs that are using CC licenses. Instead, real media creators are doing so as well.
  6. Would you encourage others to visit this site? Definitely. Issues of media ownership and use are very important to the future of information exchange.
  7. How could this site be improved? Personally, I find the very large summit "e;ad"e; distracting and takes away from the content. (On my smallish laptop screen, it cause the real information to be pushed off the bottom.)