Logic’s Last Stand

January 6, 2010

An Ugly Side of Web Development and Design

Filed under: Computers — Tags: , , , — Zurahn @ 11:02 pm

I’ve got time to kill, so indulge my ramblings.

For those who don’t know the world of web development, it’s probably doesn’t work the way you’d think. There are three aspects of web development: Presentation, Logic and Data. Presentation is HTML, CSS, JavaScript — anything that’s run on the client computer; logic is the server side deciding what it needs to do when you visit a page, and data is whatever’s stored on that server to actually provide the user.

The tricky thing here is that you can call anything done on th server-side programming, and JavaScript is a programming language, but the primary aspects on the presentation side — HTML and CSS — aren’t programming languages; they are markup languages. Browsers follow rules that say how the HTML and CSS are supposed to look when used in specific ways, but sometimes those rules are ambiguous, sometimes the browser is wrong, sometimes the action is unspecified, and sometimes the browser just hasn’t implemented the functionality.

This leads to some weird and unique problems and solutions. For example, there is a generic container element in HTML called a DIV tag. You can put anything you want in a DIV, and you can use CSS to style it so it has, say, a black background and white text.

Well, if you say “height: 100%”, that doesn’t work as cleanly as one would hope. If you take a look at The VG Press forum, you’ll see the user information in a sidebar on the left with a darker grey background and a border to the right. Because you can’t just set the height of the sidebar to 100%, how do you get a perfectly flush border and background like that? You have to do a clever, silly and stupid workaround wherein the DIV that contains the sidebar DIV is given a background IMAGE containing both the background colour and border, repeated vertically only. Weird, but it works.

Let the chain reaction begin, though, as a big feature I’m working on is full customization of presentational aspects including colours. Remember that the sidebar background and border is an image, so you can’t just change the colour — what then?

After several weeks of not knowing how to solve this, I now have a solution. In PHP (a server-side programming language), you can create images. Thusly, how I could get around this would be to generate a new sidebar image with the colours specified and cache the image on the server. So if then user specifies a sidebar background colour of #FFFFFF (white) and a border colour of #FF0000 (red), when the user saves his settings, the server receives the request, generates the image, and saves in on the server as FFFFFF-FF0000.png. Then if another user chooses the same colour combination, that file is used, otherwise a new one is generated. Automatic, transparent, efficient and completely obtuse. Gotta love it.

Advertisements

November 22, 2008

Safe Web Browsing with Sandboxie

Filed under: Computers — Tags: , , , , , , , — Zurahn @ 6:05 pm

The web browser is your interface with the Internet, and consequentially all the bad code that is transmitted with it. Your security is primarily compromised by through the browser, as in most Windows machines you’re running programs as a root/Administrator user with far too much access.

One method of protecting yourself is to run a Virtual Machine. This is an emulated Operating System, but that’s a bit overkill. You need to give it all the resources to run the operating system itself when all you want to run is one program.

At the same time, while I still recommend using anything but Internet Explorer as an improvement in security, it’s not as if Firefox, Opera and others are perfect. Ideally the programs you use that are connected to the web can only affect that connection to the web and itself, and nothing on your own system, such as files/folders, the registry or anything else that could potentially do harm, regardless of any exploit found in the browser itself.

This ideal is fully realised in the program Sandboxie.

I wrote a program in college for a report on web security that allowed me to replace Internet Explorer with Notepad via ActiveX code embedded in a web-page. Sandboxie completely thwarts this kind of exploit.

You can set specific directories as accessible for a browser, such that you can still download files to your computer yet not expose anything at all important.

Sandboxie also adds the ability to right-click any program and have it run in Sandboxie quickly and easily. Additionally, for heavily used programs such as a web-browser, you can set program shortcuts to run directly in Sandboxie by right-clicking the shortcut, then adding the Sandboxie shortcut before your program shortcut in the shortcut text field, so that it looks something like this:

“C:\Program Files\Sandboxie\Start.exe” “C:\Program Files\Internet Explorer\iexplore.exe”

This, finally makes Internet Explorer secure.

If you’re thinking, “What about Trojans?” well, good question for one. When installing programs, you can create give the .exe only access to the installation directory and nothing else, allowing an installation while sandboxed and protected. Consequently, it can be used as a method of avoiding registry bloat.

The only downside here is that the program is essentially a 30-day trial before it starts begging for money. But given the amount of time spent with malware issues, the amount of resources wasted on antivirus, 20 Euros is a pretty good investment for near web invulnerability.

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.

April 12, 2008

Beginner’s Guide to a Real Web-site – Part 4 – Server-side Scripting

Filed under: Computers — Tags: , , , , , , — Zurahn @ 6:58 am

The veiled goal of all we’ve done to this point is to be prepared to take on a more suitable basis for creating a web-site, and that is through server-side scripting. This is the method of running a programming language on a web-server to control the HTML that is sent to the client’s browser. In this method, we can re-use one piece of code repeatedly throughout many pages.

The language we’re going to use in our example is PHP. It is a loosely typed language (rules aren’t strict) and isn’t particularly difficult to set-up or understand.

In order to run a server-side language, you need two things: The language installation, and an application server (a program to act as the server to run the language). We’ll be using PHP and Apache. The easiest way to install these is through a packaged installation such as WAMP.

WAMP stands for Windows Apache, MySQL and PHP. MySQL is database software which we’ll use one we get a handle on PHP. You can install all these individually, but the installation of MySQL can have some quirks.

Once installed, you can run the WAMP server and a tray icon will appear on your taskbar. Clicking it will give you several options. The www directory is where all your files will go. Make sure all your services are started (the icon should be white, but you can click Restart All Services to be sure), then open your web browser and enter into the address bar:

http://localhost

This should bring up a page with WAMP information if you have it installed correctly.

In your www folder, delete index.php and create replace it with a blank index.php. Copy over the contents of index.html and open localhost in your browser again. We should see our page.

What we need to do now is segment the page. We will be using includes to do this. Though there are object-oriented ways that are generally an improvement, it goes beyond our scope and would serve at this point only to confuse.

Create a folder called “includes” and in it a file called “top.php”. This will contain our doctype declaration and opening down to the header. Copy this code and put it in top.php

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css" />

Do not copy in the title tag. Save and close the file. Create a new file called middle.php and paste this code into it

</head>
<body>
<div id="container">
  <div id="header">
	<h1>Web-Design HQ</h1>
  </div>
  <div id="main">
    <div id="menu">
	Menus
    </div>
    <div id="article">

Save and close the file, and make one final file called bottom.php and paste this code into it.

	</div>
  </div>
</div>
</body>
</html>

Now, back in the index.php file, we can use our other files to easily insert our page design.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
This is the index page
<?php include_once('includes/bottom.php'); ?>

That’s all that needs to be in index.php now.

The <?php indicator denotes the start of PHP code. You cannot place HTML within this.
include_once is a method. A method is a reusable piece of code, in this instance, to import data from another file.

So in plain terms
-Include the top part of the page up until the <head> tag
-Insert anything specific that needs to be in there, such as the title
-Include the middle section up until where we put our content
-Write our content
-Include the bottom part to close any remaining tags

Now any change we make to any of the included files will apply to every page that includes them. This significantly reduces redundant code and time wasted on repetitious changes.

Part 5 will address the basics of actual programming in PHP.

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.

Blog at WordPress.com.