There are a number of database management systems (DBMS) suitable for web applications. MySQL is possibly the most ubiquitous, but other DBMS may be better suited for specific applications

MySQL is, as mentioned above, extremely common. It is suitable for most applications because it provides many different ways of storing information. One format may be faster, another may allow for more users at once.

An alternative DBMS is PostgreSQL. PostgreSQL offers more flexibility, and as such has significantly more complexity. It can recognize several different languages for retrieving data, rather than just SQL, and has many object orientated features, such as tables being able to inherit properties of ‘parent’ tables.

I, personally, am only familiar with MySQL, and in the rest of this article I’ll discuss how MySQL works with PHP.

Connecting to and accessing a database

In PHP, there are five steps to accessing a database. The first is actually connecting to the host where the database is found. For MySQL the method of connecting follows the form mysql_connect(DB_HOST, DB_USER, DB_PASSWORD). DB_HOST being the address where the database is found, DB_USER and DB_PASSWORD being the username and password used in MySQL.

The second part is selecting the database to be used. A particular copy of MySQL can, and probably will be hosting several databases. mysql_select_db(DB_NAME) is how to choose a particular MySQL database, where DB_NAME is the name of the database in question.

The third part is to create a SQL query. SQL, or Structured Query Language is an almost universal way of accessing data from databases. Most types of database use this language, including MySQL, Microsoft Access and many others. The results of the query are usually stored in a variable for later access. $linkresult = mysql_query("SELECT * FROM `links` WHERE `category` = 'games'"); is an example of a SQL query being used to access a MySQL database in PHP.

The fourth stage is reading and displaying the results from the query. The following snippet reads off the results and displays them as an HTML list of links with images:

if (mysql_num_rows($linkresult) > 0) {
while($row = mysql_fetch_object($linkresult)){
echo "<li><a href=\"".$row->url."\" title=\"".$row->linkname."\" ><img src=\"img/".$row->id.".gif\" alt=\"".$row->linkname."\" /></a></li>";
}
}

This is a fairly complicated example, but there are many different ways to display the query results.

Finally, after using the database’s data, one should clean up after oneself, to free up system resources, and to prevent clashes should you need to run other database queries in the same script. mysql_free_result($linkresult); empties the variable holding the query results.

To summarize, the steps in connecting to and accessing a database are:

1. Connecting to the database host
2. Selecting the database
3. Querying the database
4. Displaying query results
5. Cleaning up

The game is completely voice-acted, which is both a good and a bad thing. The problem is that there is so much dialogue needed that short cuts needed to be taken. There are only four or five voice sets for each gender. So, every male Nord has the same voice, which is also shared by the Orcs, for example

High Points

• You can take any quest, whenever you want to. Wherever you go the enemies will be about the same power level, so you don’t have to worry about stepping into an area designed for a higher-level character (although, the thieves and dark brotherhood quests will be tricky without a decent sneak skill)
• Stealth! The sneaking system is very well done, taking into account light, movement, equipment weight, and other factors. It can be very satisfying to drop down behind a bandit and introduce her back to your dagger. Two of the guilds are stealth based, so there’s plenty of opportunity sneaking around.

Low Points

• The levelling system is somewhat counter-intuitive. The way it’s set up, the seven skills that you define as your ‘major skills’ are best the skills that you plan to use the least, or can otherwise strictly control their use. This is because your major skills make you level up as you advance, but all your skills count for how much benefit you can get for levelling. With monster power being based on your level and not your power, having too many sub-optimal levels can hurt.
• Poor storytelling. Some things make little sense. The old arch-mage was willing to promote me, the newest member of the Arcane University, to arch-mage over wizards who he has known for years? He barely knows my character! Hell, I barely know any magic. I know this isn’t much of a role playing game, but still, disproportionate recognition is a bit silly (and the arch-nemesis of the mage’s guild was a pussy, anyway).
• Repetition. There’s only so many ruins you can delve into before they all start to look the same

Conclution

This is a steath/action game in a fantasy world, not a RPG. Having said that, it’s a damn good stealth/action game (my favourite moment was stealthily dropping down behind a major enemy while he was chatting with an under-cover ally of mine, then introducing said enemy’s back to my sword for that beautiful ×6 damage). It’s not the most deep game, but nevertheless it can handle the player trying unusual routes. I don’t feel it has great replay, as it is very possible to have one character do everything in the game, but doing everything in the game will take a very long time.

(I’ll add screenshots later, I haven’t the ‘print screen’ key on my keyboard. I may add more to this review as I play more, I’m not half done yet!)

In XHTML there are a number of tags which have been dubbed ‘bad’ for being purely presentational. For a person that’s only beginning to learn the right way of writing HTML it’s a useful simplification to call these tags out of bounds. However, in most cases these tags do have legitimate use.

<i> and <b>

The tags with the least legitimate use, bold and italic are used where convention dictates there should be bolded or italicised text, but only if there is not another tag that covers this instance. An example of where one might use <i> is when writing the name of a ship. The ship’s name would conventionally be italicised, such as the HMS Hobart, but there is no tag for it.

There are tags for strong text (<strong>), emphasised text (<em>), quotes (<q> and <blockquote>), citations (<cite>), editorial insertions (<ins>), abbreviations and acronyms (<abbr> and <acronym>), sample output (<samp>), definitions (<def>), variables (<var>), text to be typed in by the user (<kbd>) and addresses (<address>) and probably a few others beside.

There aren’t many situations where <i> or <b> should be used, and they should be only considered where you are sure there isn’t a better option.

<br/>

The line break tag should only be used when line breaks are part of the actual information being presented. Examples include command-line output, street addresses and poetry.

If a ‘goblin (hob) waylays you,<br/>
Slice him up before he slays you.<br/>
Nothing makes you look a slob<br/>
Like running from a hob’lin (gob).<br/>

<hr/>

The <hr/> tag stands for ‘horizontal rule’, however, it’s meaning is a separator in text. If you’ve read a novel where the author switches between multiple story threads you’ve probably seen these. Maybe as a single star, maybe as a row thereof, maybe even as a horizontal rule. All of these would be <hr/>s in HTML.

The <hr/>’s use is to show where there is a clear change in the focus of the text. Such as where there is a change from the point-of-view from one person to another.

The name of the tag is a bad one, which is why in XHTML 2 it’s being changed to separator. Hell, if a page is being written in a top-to-bottom direction the ‘horizontal rule’ tag will be a vertical separator.

Definition List

Definition lists are probably the least used of the three HTML list types. They are used primarily for things such as glossaries or other dictionary-type setups, but can be effectively used for anything where you need an expanded description attached to something.

Above was an example of a definition list. The words ‘Definition List’ was the term, and the indented text was the definition of that term. I will expand on these below.

Anatomy of the Definition List

The definition list has three tags:

<dl>

The <dl> tag goes around the outside of the list in the same way as <ul> goes around an entire unordered list.

<dt>

The <dt> tag goes around the term that is to be defined

<dd>

The <dd> tag goes around the definition for the preceding term

An example of code for a definition list:

<dl>
  <dt>
    HTML
  </dt>
  <dd>
    "Hyper Text Markup Language"
    used for writing web pages.
  </dd>
  <dt>
    CSS
  </dt>
  <dd>
    "Cascading Style Sheets"
    used for applying visual effects to web documents.
  </dd>
<dl>

This code has the effect of:

HTML

“Hyper Text Markup Language” used for writing web pages.

CSS

“Cascading Style Sheets” used for applying visual effects to web documents.

Uses for the Definition List

On my Cert 2 website, I used definition lists for lists of links. The ‘terms’ are the names of the sites, and the definitions are short descriptions of the same sites.

A perhaps more interesting use is for adding captions to images. I used this technique here and here, with the image in the term and the caption in the <dd> (Each of the image/caption pairs were put in a separate <dl>, and each of the <dl>s were floated left to get ‘em side by side).

Definition lists seem to have a very specific purpose, and that makes them one of the least used HTML tags. However, with some thought and imagination, the <dl> provides a logical and accessible way to link any kind of term to an expanded description.

And remember, most every aspect of its appearance can be altered using CSS.

• MaxDesign: Definition lists – misused or misunderstood?

]]> http://ogremindes.net/blog/definition-lists/feed/ 0 http://ogremindes.net/blog/what-fonts-should-i-use/ http://ogremindes.net/blog/what-fonts-should-i-use/#comments Tue, 25 Apr 2006 00:12:57 +0000 Ogremindes http://ogremindes.net/what-fonts-should-i-use/

When Aldona posted asking for help on the google group, one snippet of code surprised me: font-family: "High Tower Text", "Balloon", "Arial", "Harlow Solid Italic", "Times New Roman" ;. What surprised me was how, well, wrong that font-family was, while being entirely correct code. In this post I will cover how the font-family property works, good practice for its use and what fonts are good to use for the web.

The font-family Property

As we know, font-family is generally given a list of fonts, separated by commas. So far so good, Aldona’s example is spot on there. However, correct use is not necessarily good use. Forthwith, I shall demonstrate what could be improved.

1. All Fonts in a Family Should be Similar

   Looking into the various fonts Aldona chose, I found them to be quite the mish-mash. The majority are formal looking serif fonts, but Balloon is a ‘handwriting’ font and Arial, of course, is a clean sans-serif font. They should be removed, leaving us with: font-family: "High Tower Text", "Harlow Solid Italic", "Times New Roman" ;.

2. Go From Less Common to More Common

   A browser will always try to use the first font in the list, failing that it will try each of the remaining fonts in turn until it finds one it can display. As such, having the highly common Arial in the middle of the list is pointless, as the following fonts will almost never be used.

3. End the List with a Generic Font

   What happens if the browser cannot find any of the fonts you list? Unless you have a generic font to finish the list it’ll use it’s default font, and god knows what that’ll be. Generic fonts tell the browser to find any font from a given category. The categories are serif, sans-serif, monospace, cursive and fantasy. CSS tips & tricks: Font Families, on the W3C site, explains what each of the generic fonts are. In Aldona’s case we have serif fonts, so it becomes: font-family: "High Tower Text", "Harlow Solid Italic", "Times New Roman", serif ;.

4. Use Web Safe Fonts

   There are only a handful of fonts can be found on users computers with any surety, and neither High Tower Text or Harlow Solid Italic are amongst them. I had to do a google search just to find out what they look like!

   The font Georgia is similar in style to those two, and is commonly found on Windows and Mac systems, and according to Web Space Works, on about half of Linux systems(although with such a small sample these results must be taken with a grain of salt. Generic fonts are still important). With this change the code becomes: font-family: Georgia, "Times New Roman", serif ; and it will now reliably work on most systems.

   If one must use a special font, it is better to make a graphic out of it that to rely on a user having that font. Just don’t use pictures for body text!

Web Safe Fonts

There are only 9 fonts that are commonly considered ‘web safe’ They are Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS and Verdana. These fonts were at one point shipped with Internet Explorer, and have since been taken up by both major OSs.

Additionally, Helvetica, Courier and Times are common enough to be considered part of this category.

Web Space Works has a survey of ‘web safe’ support. Design Tutor has examples of the 9 web safe fonts and examples of how to use them.

]]> http://ogremindes.net/blog/what-fonts-should-i-use/feed/ 0 http://ogremindes.net/blog/the-quest-for-a-better-category-list-part-the-first-a-basic-cssjavascript-popup-menu/ http://ogremindes.net/blog/the-quest-for-a-better-category-list-part-the-first-a-basic-cssjavascript-popup-menu/#comments Fri, 24 Mar 2006 04:15:11 +0000 Ogremindes http://ogremindes.net/the-quest-for-a-better-category-list-part-the-first-a-basic-cssjavascript-popup-menu/ One of the reasons I switched from Blogger to WordPress is wp’s category system, which would allow far easier access to anything of intrest I post. The category list is nice and all, and with a little tweaking displays in a nice hierarchal view.

However, a after a bit of thought I realised with my resolve to put everything in ‘child’ categories, the number of categories could rapidly rise. With that, the category list would become behemothian and as such all but useless. What I need is a way to restrict the categories shown, so that the user would only see what information they needed at the time.

Popup Lists

The Popup List technique allows for lists that display only when the ‘parent’ element is hovered over. In this example the parent shall be a <li></li> in another list that is id’d as ‘list’. The popup list will remain visible so long as the curser is over it, or it’s parent.

By default, the popup list will be absolutely positioned way off the screen, for, as we know, if it was set to display:none or visibilty: hidden the popup list mightn’t be read by screenreaders. Then again, maybe that would be preferable.

When the parent <li></li> is hovered over, the popup list’s position will be set to static, bringing it to it’s normal position in the document, shuffling other things out of the way to fit. The CSS is:

#list li ul {
  position: absolute;
  left: -5000px;
}
#list li:hover > ul {
  position: static;
}

The first rule states that a unordered list inside a list item inside the container ‘list’ should be positioned well away from the window. The second rule states that when a list item inside ‘list’ is hovered then an unordered list that is the direct child of said list item should be positioned normally, as opposed to absolutely, for example. These two together achieve the desired effect.

An example of the code in action.

There is a catch, however. Internet Explorer 6 doesn’t recognise :hover on anything but an <a></a>, nor does it recognise any of the more contorted CSS selectors that would make it otherwise possible to use this technique. What to do, what to do… Ah-ha! JavaScript.

Add a little JavaScript

The JavaScript getElementById() method returns the HTML element of the ID given. I want to modify a HTML element — the child ul. As such, I examined the W3Schools HTML DOM Reference.

The DOM , or Document Object Model is a way of referring to many of the parts of the document object, such as the HTML elements within. We already use this to call up form inputs so we can get their value. However, we can do more than just read off data. We can acually change the existing elements on the screen. In this case I’ll change the style.

On W3Schools I found the code snippet:

document.getElementById("id").style.property="value"

This little piece of code would let me call up an element and change a property of it’s style. Using onMouseOver() and onMouseOut events would let me change the style to make it visible on the hover and then hide it again when the curser leaves.

The styles applied would be something like:

#hiddenlist {
  position: absolute;
  left: 5000px;
  margin-bottom:0px;
}

Again, this tells the popup list to hide.

then the javascript functions:

The first of these two function reveals the popup list, the second hides it again.

And the HTML:

<ul>
  <li>
    Hover Over Me
  <ul>
    <li>Lookit Me!</li>
  </ul>
  </li>
</ul>

The two JavaScript events in the HTML call the showList() function when the cursor is over the <li></li> and call the hideList() funtion when the cursor leaves. As the popup list is within the <li></li> it stays open when the cursor is over it.

An example of the code in action.

The Road Goes Ever On

Well it looks like it works, so job’s done, time to apply it to the category list. All it would take is giving each of the lists a unique id and having a copy of each function to match. …or not. You see, the list is automatically generated by a wordpress function, so there is no easy way for me to add ids. And I dont wan’t to have repeated code apout the place and besides, if I add new parent categories in the future I don’t want to have to go back and edit the template again. Also, it may be more useful to have clickable toggles than roll over effects…

And so the quest continues. I’ll be looking at the hierarchy of the DOM in the near future, and maybe I’ll end up writing a custom category list function in PHP.

]]> http://ogremindes.net/blog/the-quest-for-a-better-category-list-part-the-first-a-basic-cssjavascript-popup-menu/feed/ 1