Logic’s Last Stand

August 8, 2008

End Fixed Width Layouts

Filed under: Computers — Tags: , , , , , — Zurahn @ 7:49 pm

Web design is more than making a site that looks good to you, or simply looks good in general. Usability and compatibility are essentially to all sites. With such a split between widescreen and 4:3 monitors, it’s more important than ever to accomodate design to all systems.

So why is it that there seems to be, if anything, an influx in fixed-width layouts. Take Youtube for example; nomatter what resolution your system is, what size you have your browser that page displays at the same width.

Blogs are even worse for this. 90% of all blog layouts seem to be fixed width, making the layout very thin on high resolution or widescreen monitors.

It’s not a difficult fix as the CSS for variable width layouts is pretty much down to two lines (one if you do shorthand).

#layout
{
margin-left: 5%;
margin-right: 5%;
}

There, we’re done. You have a bit of buffer space on either side and the layout expands to fill the monitor.

Let’s take a look at the aforementioned Youtube’s code and see what we can find?

#baseDiv{
position:relative;
width:875px;
margin-left:auto;
margin-right:auto;
padding-bottom:25px;
}

And modified…

#baseDiv{
position:relative;
margin-left:5%;
margin-right:5%;
padding-bottom:25px;
}

And it’s no longer fixed to that 900px width, though the content within the layout is designed to fixed width also, compounding the problem.

We’ve an inversion of the problem that persisted, yet perhaps hurried, the transition from 800×600 to 1024×768; sites were written completely ignoring 800×600. It’s not encouraging the adoption of widescreen or higher resolutions when all sites are now ignoring their existence and keep sites thinly displayed in a fraction of the screen.

Advertisements

May 22, 2008

IE8 Furthers My Rage

Filed under: Computers — Tags: , , , , , , , , — Zurahn @ 9:28 pm

I’ve been publicly berating Internet Explorer at every opportunity for several years for various reasons. Given my continuing efforts to create accessible web designs, the Internet Explorer family of cringe-worthy standards compliancy is the source of my derision.

Internet Explorer 8, it’s in BETA right now, and I have it installed. It’s supposed to have improved standards compliancy, and while it does fair much better in the Acid2 test than IE7, it cannot pass a this compliancy test from 11 YEARS AGO.

Internet Explorer has broken inline padding. For once, fix Internet Explorer, Microsoft–wait, scratch that. Don’t fix it. DESTROY IT. Start over. For my sake. For all of our sakes. Put it out of its misery.

April 16, 2008

Beginner’s Guide to a Real Web-site – Part 5 – PHP Programming

Filed under: Computers — Tags: , , , , , , , — Zurahn @ 5:57 am

PHP is a complete programming language, as opposed to XHTML and CSS which are mark-up languages.

Programming languages have a few simple characteristics:
-Variables that store data
-Conditional statements
-Loops

Variables in PHP begin with a dollar sign

$num = 1;

The above statement (which must end with a semi-colon) assigns a variable called “num” the value of 1.

Conditional statements check the value of a variable or variables.

if($num == 1)
{
  echo "YES!";
}
else
{
  echo "NO!";
}

The above if statement checks if the value of $num is equal to 1. If it is, the page outputs the text “YES!”, otherwise, it outputs the text “NO!”.
Anything within the { } brackets applies only for that statement.

There are other conditional operators than “==”. Here are a list of operators in PHP:
== (equal to)
=== (equal in value and in type)
! (NOT)
> (greater than)
>= (greater than or equal to)
< (less than)
<= (less than or equal to)
|| (OR)
&& (AND)

Loops repeat a section of code several times over. There are two basic kinds, the while loop and the for loop.

A for loop is designed for when you know how many times you want to go through the loop.

for($i=0;$i<10;$i++)
{
echo $i;
}

The above loop repeats 10 times, starting from 0. The loop repeats as long as $i is less than 10, and $i increments 1 each time through.
Also note
$i++
This increments the variable $i by 1. ++ is a shortcut. Equivalents to this would be
$i += 1
or
$i = $i + 1;

A while loop lasts while a condition is true.

$count = 0;
while($count < 10)
{
  echo $count;
  $count++;
}

The above loop repeats 10 times. It keeps going as long as the count, which started at 0, is less than 10. In the above case, it works identically to a for loop; however, if you have an uncertain condition, such as a random number or user-input, the number of times is unknown.

All we’re going to do to start is to receive some data from the user, then output it back.

Make a copy of index.php and call it blog.php. This will be the start of our blog page.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
<p><h2>My Blog</h2></p>
<p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<textarea name="blogpost" id="blogpost"></textarea><br />
<input type="submit" value="Submit" />
</form>
</p>
<?php include_once('includes/bottom.php'); ?>

There’s a bit to explain here. A form tag in HTML surrounds a series of data you want to send to the server (our PHP). In this case, we just want to submit the data to itself, so we echo out the page we’re on, which is stored automatically by PHP in the variable $_SERVER[‘PHP_SELF’]. You could just type in ‘blog.php’ to get the same effect, except it won’t work if the page gets renamed.

The input type submit sends everything within the form to the server.

Anything sent to the server (in this case with method post) in PHP will be stored in $_POST. Let’s echo out the value of the blogpost.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
<p><h2>My Blog</h2></p>

<?php
if(isset($_POST['blogpost']))
{
  echo "<p>".$_POST['blogpost']."</p>";
}
?>

<p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<textarea name="blogpost" id="blogpost"></textarea><br />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</p>
<?php include_once('includes/bottom.php'); ?>

All I’ve added is a check to see if there’s a value in the blogpost, and if there is, to display it in a new paragraph.

For the sake of making things look a little nicer, you can create a new CSS file called blog.css and add this to it (and don’t forget to import it into blog.php using the tag)

#blogpost
{
  width: 85%;
  border: 1px dashed white;
}

#submit
{
  border: 1px solid white;
  background-color: black;
  color: white;
}

Our problem now is that the blog doesn’t go anywhere. It needs to be stored in a database, which we’ll cover in Part 6.

April 10, 2008

Beginner’s Guide to a Real Web-site – Part 3 – Linking and Menus

Filed under: Computers — Tags: , , , , , , — Zurahn @ 5:01 am

Now that we have after Part 1 and Part 2, a structured XHTML page with CSS design, we need pages in which to form an entire site. Make a copy of index.html as template.html. This will to keep the overall style of your documents consistent. Make another copy as links.html and open it.

In links.html, we are going to create a series of links to other web-sites. Doing so is simple.

Find this,

    <div id="article">
	  Welcome to my first web-site.<br />
	</div>

And replace the text with this:

    <div id="article">
	  <h2>Links</h2>
	  <p>
		<a href="http://google.com">Google</a>
	  </p>
	</div>

This creates link to Google with the text Google.

The structure of a hyperlink is simple <a> specifies a link, and the href attribute provides the address. Anything between <a> and </a> is linked to the specified page. Note, http:// is required on the link or it is considered a relative path.

But we’re also going to want to link to our index page. While we could add a simple text link, that is not as flexible as we want for a standard menu.

Find this,

    <div id="menu">
	Menus
    </div>

And make the following changes:

    <div id="menu">
	Menus<br />
	  <ul id="menu">
	    <li>Link 1</li>
		<li>Link 2</li>
		<li>Link 3</li>
	  </ul>
	</div>

What we have created is an underordered list (ul). This creates a bulleted list with list items (li). By default these items are block-level, indented and have bullets beside them. We will change this in our CSS file, main.css.

Add the following to main.css,

#menu ul
{
  list-style: none;
  text-indent: 0px;
  padding-left: 0px;
  margin-left: 0px;
}

list-style formats the bullets for the element, in this case, everything within any ul within the menu div. text-indent, padding and margin are all removed to get rid of the indenting. This turns the list in to a simple top-down text list of links.

Now we can link to the index page.

    <div id="menu">
	Menus<br />
	  <ul id="menu">
	    <li>Home</li>
		<li>Link 2</li>
		<li>Link 3</li>
	  </ul>
	</div>

This links back to the index page, obviously. Try it out and see if you notice the problem. Go on… ok, you kept reading. Anyway, the problem is that even though we can copy the template over for new pages, any changes to the main features are only applied to that one, static page. The rest have to be modified to reflect that change. We cannot get around this with XHTML.

What we need to do is venture into what really drives significant web design, and that’s server-side scripting. We’ll do that in Part 4.

April 6, 2008

Beginner’s Guide to a Real Web-site – Part 2 – Intro to CSS

Filed under: Computers — Tags: , , , , , , — Zurahn @ 1:26 am

In Part 1 we looked at the structure of a web-page with HTML. Now we’ll look at the presentational aspects using CSS.

Create a file called main.css – This will be the main file for our CSS. Also, create a folder called “css” and place the CSS file in it. This is a good practice to organize your code. You also have the option of doing the same with your HTML files, but that’s your call (note that if you do this, the path to the other files will be different). Before we add anything to it, we need to import the CSS file to our HTML document.

<head>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>

The link tag is placed between the tags and has three attributes to be XHTML complient: rel, type and href. Rel is used to tell the browser that it’s importing a presentational file, type tells it the format of the file, and href tells it the actual file to import, in this case the main.css located in the folder CSS. The slash at the end is a shortcut for closing a tag that has nothing inbetween it. is the same as saying .

Here are some things to know about file paths, based on examples
href=”main.css” – the file is in the same directory
href=”/main.css” – the file is in the top directory. For example if you have index.html in C:\Web\Files\, “/main.css” looks for main.css in C:\.
href=”css/main.css” – the file is a folder called “css” in the same directory
href=”../main.css” – the file is the folder above the current directory. For example, if you have index.html in C:\Web\Files\, it looks in C:\Web\

Back on task, we’ve imported the CSS file, so let’s add something to it. Let’s organize our div tags first and foremost. Before we start making things pretty, let’s get everything set up first.

#container
{

}

#header
{

}

#main
{

}

#menu
{

}

#article
{

}

A # sign indicates an id tag, which we placed on our div tags. The { } brackets contain the code for that particular element. Let’s make the sidebar act like a sidebar, and add borders for clarity of the boundaries.

#header
{
  text-align: center;
  border: 1px solid black;
}

#menu
{
  border-right-width: 2px;
  border-right-color: blue;
  border-right-style: dotted;
  float: left;
}

#article
{
  border-left-width: 2px;
  border-left-color: black;
  border-left-style: solid;
  float: right;
}

Save that and refresh your page in the browser. It’s still not much, but it’s looking a little more familiar.

The syntax for CSS is simple,
element-attribute: value

So for text-align: center, text is the element, align is the attribute and center is the value. Thus moving the text to the center of the page in the header. This works in a div tag because div tags are by default 100% the width of its containing element (which is another div, which is the width of the screen by default).

Using “float” though, changes this, and makes the width only that required for the div. So if you added text-align: center to menu or article, you wouldn’t see a difference because the text is the width of the div.

float makes a tag ignore the placement of those around it, allowing the two divs (which are block-level elements) sit side-by-side. Just note that some will use a table to do this, which is a bad idea. I’ll explain why at a later time.

The last thing to explain are the borders. There are shortcuts in CSS so that you don’t have to write out the individual attribute every time. In the header, we just used the border element, and specified multiple things. The order determines what is assigned to what.

border-right: 2px dotted blue
is the equivalent to
border-right-width: 2px;
border-right-color: blue;
border-right-style: dotted;

It’s usually cleaner to write thing out, but that can be cumbersome. Try to find a balance, and use your best judgment.

Let’s now remove the borders, and add some formatting to the entire page.

html
{
  color: white;
  background-color: black;
}

#header
{
  text-align: center;
}

#menu
{
  float: left;
}

#article
{
  float: right;
}

Code to the tag affects everything on the page. Traditionally, the code used would have been for the tag, but with an XML declaration, that does not work the same.

The CSS attributes:
color – text color. We’ve changed it to white
background-color – obviously, the background color. We’ve changed it to black.

We see that the article section is too far to the right, now. Also, we probably don’t want things so close to the edge of the screen at all. We need that marginalized. Let’s remove the float attribute from article, and instead use margins to organize.

html
{
  background-color: black;
  color: white;
}

#header
{
  text-align: center;
  margin-left: 150px;
  margin-right: 150px;
  
  border-bottom: 1px dashed white;
}

#main
{
  margin-left: 150px;
  margin-right: 150px;
  border-bottom: 1px dashed white;
}

#menu
{
  float: left;
  width: 150px;

  margin-left: 25px;
  margin-right: 50px;
}

#article
{
  margin-left: 221px;
  margin-right: 50px;

  border-left: 1px dashed white;
}

Make these updates and refresh your page. There’s much more of a structure now, though all we’ve added were margins and borders. A margin is a space that pushes from left to right, or top to down. If you add a margin-left: 10px value to an element, it will be pushed to the right by 10 pixels. If you add a margin-right: 10px, anything to the right of the element will be pushed 10 pixels (as opposed to that element being pushed left).

Even when there’s hardly any data, though, you don’t want things all crampt. We’ll resolve this using height and min-height attributes.

#header
{
  text-align: center;
  margin-left: 150px;
  margin-right: 150px;
  height: 100px;
  
  border-bottom: 1px dashed white;
}

#main
{
  margin-left: 150px;
  margin-right: 150px;
  border-bottom: 1px dashed white;
  
  min-height: 600px;
}

#menu
{
  float: left;
  width: 150px;

  margin-left: 25px;
  margin-right: 50px;
  
  height: 100%;
}

#article
{
  margin-left: 221px;
  margin-right: 50px;
  
  min-height: 575px;

  border-left: 1px dashed white;
}

height is obviously the height of the element–how tall something is.
min-height specifies the height that the element must be at the minimum.

Keep in mind that percentage heights, such as height: 100%; in the menu element, can be the source of browser incompatibility between Firefox and Internet Explorer as they interpret this differently.

We’ll now touch up the layout with padding, and modifying the fonts.

h1
{
  font-size: 2em;
}

#header
{
  text-align: center;
  font-family: courier new;
  font-weight: bold;

  margin-left: 150px;
  margin-right: 150px;
  height: 100px;
  margin-bottom: 25px;
  border-bottom: 1px dashed white;
}

#main
{
  min-height: 600px;
  margin-left: 150px;
  margin-right: 150px;

  padding-bottom: 25px;

  border-bottom: 1px dashed white;
}

#menu
{
  float: left;
  width: 150px;
  padding: 10px;
  padding-top: 0px;
  margin-left: 25px;
  margin-right: 50px;
  
  font-size: .8em;
  font-weight: bold;
  height: 100%;
}

#article
{
  margin-left: 221px;
  margin-right: 50px;
  padding: 25px;
  padding-top: 0px;
  min-height: 575px;
  border-left: 1px dashed white;
}

Make these changes and refresh to see something you wouldn’t be too surprised to see for a web-site layout. The best designs are often rather simple. Admittedly, I am not a good visual designer, so you’ll probably want to look elsewhere for much advice in that department.

Padding is like a margin, except on the inside of an element. Where margins push outward, padding pushses inward, keeping text inside an element away from the edges.

Text (fonts) are formatted with font. font-family denotes the name of the font, such as Times New Roman, Courier, etc. Be careful about selecting a font, because the user can only view fonts he has on his own computer, so the list is limited. Here are some web-safe fonts:

Arial
Comic Sans MS
Courier New
Georgia
Lucida Sans
Times New Roman
Trebuchet MS
Verdana

Note that dingbat fonts (non-standard characters), such as Wingdings and Webdings, are not only not web-safe, they aren’t browser safe (Firefox does not display these fonts).

Also see that we’ve defined some font sizes
font-size: 2em

em is a scalable unit size, which means it changes based on the user’s configuration so that, for example, text doesn’t get too tiny on high resolution screens, or too large on low-res ones. This is a good method of assigning font sizes, but can be problematic in terms of layout sizes such as our menu, which we’ve defined as 150px wide.

That’s the end of our look at CSS, but it won’t be the last we use it. CSS is integral to web design.

In Part 3 we’ll look at linking to multiple pages and menu design.

Create a free website or blog at WordPress.com.