There are thousands of companies around the world that sell hosting services. Most of them charge per month, but price should not be your only criteria when choosing a host for your pages. You should keep in mind the followings and then find the service that provides the quality you look for at the most affordable cost.

1. Technical support is one the most important issues when choosing a web host. Do they offer support by phone, email? And if so, how long will it take to get back to you?
2. How much disk space is offered to you? Remember that pages uses a very little amount of space, but multimedia files (pictures, videos, sound clips) use much larger quantities.
3. Do they offer domain registration and how much will it cost.
4. Do their servers support CGI-scripts, PHP, MySQL, PostgreSQL, Front Page extensions, SSH connection and Telnet?
5. How fast is their connection to the Internet and do they have multiple connections in case of a problem or damage?
6. If you would like to run Java/Java EE applications on your site or build a site with JSP, your host must support Java apps and run a Jakarta/Tomcat, Jboss, Glassfish or other Java server.
7. Do they offer a stastistics service to let you have a look on your site traffic and hit?
8. How much bandwitch do they offer per month? For example 2GB bandwitch for a site full of videos and images is too low.
9. Do they offer one-click installation for commonly used free web apps (like Drupal and WordPress)?
10. What site management application is used (for example Plesk or Cpanel)?

XML (eXtensible Markup Language) is a meta-language built on SGML. XML can be used to describe data (for example database data) and can be also used for creating other markup languages. HTML was rewritten in XML and the result was XHTML.

With HTML tags, users can format or style pages. With XML users can only describe data. To make it easy for XML parsers to read XML data, users must be aware of uppercase and lowercase syntax. XML provided the background for technologies like RSS, OPML and SAML. XML applications contain typically the following:

• The .xml file containing the XML data
• The DTD (.dtd) or XML schema (.xsd) file that defines the structure of the main file.
• A stylesheet file (optional).

Here is a very simple example to understand how XML works. Let’s say that we have to describe user account data. Our main file (.xml) will have the following code in it:

<?xml version="1.0" encoding="utf-8"?>
<store>
<account>
<username>Typpz</username>
<city>Athens</city>
<realname>Nikos</realname>
</account>
<account>
<username>Johnny</username>
<city>Thessaloniki</city>
<realname>John</realname>
</account>
</store>

For this code above the DTD (.dtd) file should contain the following elements to define the tags used.

<!ELEMENT store (account)*>
<!ELEMENT account (username, city, realname)>
<!ELEMENT username (#PCDATA)>
<!ELEMENT city (#PCDATA)>
<!ELEMENT realname (#PCDATA)>

After building your DTD file, save it as example.dtd (name the file as you want). Then you have to call the .dtd file from your .xml file. To do that, just place the followng line after <?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE store SYSTEM "example.dtd">

The main code will look like this:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE store SYSTEM "example.dtd">
<store>
<account>
<username>Typpz</username>
<city>Athens</city>
<realname>Nikos</realname>
</account>
<account>
<username>Johnny</username>
<city>Thessaloniki</city>
<realname>John</realname>
</account>
</store>

That was a very simple example for understanding XML structure. DTD files have many disadvantages, that can be solved using XML Schemas. These disadvantages and basic schema structure will be part of a following post.

Mozilla released recently a new version bundle of firefox browser: Firefox Campus Edition. Campus edition is not a new version of Firefox. It is just the common firefox browser with some add-ons (extensions) for better music management and social networking. The add-ons that come pre-installed with Campus Edition are: Zotero, FoxyTunes and StumbleUpon.

Zotero helps you organise and manage your research resources. Foxytunes offers media player’s control from your browser window and StumbleUpon is the well-known tool that helps you find web content that meets your interests.

Many people have firefox installed, but they never tried or cared to install some extensions. Firefox Campus edition is a nice way to discover how firefox extensions work and add features and capabilities to Mozilla’s browser.

Nick La wrote a very interesting post for trashing all IE hacks. Web designers spend a lot time on trying to “hack” their site to appear properly on Internet Explorer 6 (Internet Explorer 7 is messy too, but not as IE 6). CSS rendering in IE 6 is extremely bad and web designers have to make some tricks to make their designs (especially if they contain .png images) to appear as they should. Most of the debuging time of a designer is spent on that.

On the other hand there are many users that still use Internet Explorer 6. On Typpz Blog 51% of the users who visit us using Internet Explorer use IE 6 and 49% use IE 7. In general 32% of our visitors use IE and 52% use Firefox. But our site is technology oriented and users know about Firefox and alternative browsers. For the simple user, IE is the only way to surf (half internet users use IE 6 according to stats).

The question is: “Should web designers stop patching their sites for working on IE and advice users to update their browser?” or they should keep working hard on hacking and tricking their designs? You can answer this question by voting here.

Flock is a browser based on Mozilla Firefox. Flock creator call it “the social browser” as it enhanced multiple automations for social networking and web 2.0 services like Flickr, Blogger, Twitter etc. Flock comes with a built-in RSS aggregator for keeping an eye on your favorite feeds and works with almost any of Firefox add-ons. Recently the browser updated to version 0.9 (previous version was 0.7) with a new interface and multiple new features.

A deeper look in the interface and new features

The new theme is full of buttons with many gradients and shiny effects and seems complicated even for users who used Flock’s previous version (0.7). The main menu bar is almost the same with Firefox, with some new buttons for emailing a link and viewing feed options. A search form is also there which supports by default searching using Google, Yahoo and Amazon. Live searching (showing directly results of your recently visited sites and famous web sites) is a feature that I like and use also in Firefox (Google Toolbar supports it too). The second menu bar offers some shortcuts for certain operation like Twitter or opening the Flickr streamline view. If you get used to the new theme, you will find that intergration with Flickr and other services has become much more easy to use. You do not have to run wizards, just log in to the service you want. An option to add more shortcuts to this bar is also there. You can upload any file you want and blog it directly to most of the common used blogging platforms.

The built-in RSS reader is easy to use, offering basic features and by default shows a summary of the articles in a feed. Clicking on an article will get you to the source to read it. If you visit a site that has a syndication feed that you have not subscribed to, the RSS icon will flash and will show you how to subscribe to the site if you like.

Opening Flock will get you to the My World page which is something like a control panel with all the features the Flock supports (its like iGoogle and Pageflakes in a way) and a Yahoo searchbar.

Overall

Personally I prefer the simplicity of Mozilla Firefox which lets me install any extension I like or I am going to use. On the other side, Flock is what it is supposed to be: a social browser, bringing all the “Web 2.0″ services you use together. If you like all that stuff and you get used to the confused interface, you are going to love Flock. Mind also that the version is 0.9 (<1.0), so we have to wait more in the final version. It is kind of beta testing and feedback tracking until version 1.0 is released. If you like to keep an eye on Flock news, visit Flock Blog.

In this tutorial, we will show you how to create a simple script using PHP for user authentication. User data are stored in a MySQL database. So, lets create the database first and one authenticated user called “test”:

create database auth;
use auth;
create table authorised_users ( name varchar(20),
password varchar(40),
primary key (name)
);
insert into authorised_users values ( 'testuser',
sha1('password') );
grant select on auth.*
to 'webauth'
identified by 'webauth';
flush privileges;

Now that we have created the database and the “testuser” authenticated user lets build the form and the PHP script that identifies the user. Here is the code:

<?php
$name = $_POST['name'];
$password = $_POST['password'];
if(!isset($_POST['name'])&&!isset($_POST['password']))
{
//Visitor needs to enter a name and password
?>
<h1>Please Log In</h1>
This page is secret.
<form method="post" action="secretdb.php">
<table border="1">
<tr>
<th> Username </th>
<td> <input type="text" name="username"> </td>
</tr>
<tr>
<th> Password </th>
<td> <input type="password" name="password"> </td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Log In">
</td>
</tr>
</table>
</form>
<?php
}
else
{
// connect to database server
$mysql = mysqli_connect( 'localhost', 'webauth', 'webauth' );
if(!$mysql)
{
echo 'Cannot connect to database.';
exit;
}
// select the database
$selected = mysqli_select_db( $mysql, 'auth' );
if(!$selected)
{
echo 'Cannot select database.';
exit;
}
// query the database to see if there is a record which matches
$query = "select count(*) from authorised_users where
name = '$username' and
password = sha1('$password');
$result = mysqli_query( $mysql, $query );
if(!$result)
{
echo 'Cannot run query.';
exit;
}
$row = mysqli_fetch_row( $result );
$count = $row[0];
if ( $count > 0 )
{
// visitor's name and password combination are correct
echo '<h1>Login Correct!</h1>';
echo 'Enjoy.';
}
else
{
// visitor's name and password are not correct
echo '<h1>Login Failed!</h1>';
echo 'Check username and password again.';
}
}
?>

Save the PHP Code file as script.php and you are ready Note that password is encrypted using sha1().

As anyone who is in graphics and web design, we love small icons. There are many resources for such icons out there (like FamFamFam which has great collections), but the icons are few and all of them illustrate the sames: arrows, feed icons and in general anything that is needed for making a web site operational. Here is when IconBuffet comes. This site is full of free icons (both funny and operational) like the one you see in the image above. The greatest thing is that IconBuffet works like a game. You can trade your icons with others and get badges depending on what you have collected or send. Its community is also great. People who participate in this game are creative minds that want to share icons and spread the icon love. If you would like to be part of that community click here (joining using this link will add you automatically to our friend list, so if you look around IconBuffets website, come back and click this link to join). All icons that are included in iconbuffet’s sets are free for use in websites. Each set contains the icons in various formats and dimensions.

Mint is the famous web-stat program by Shaun Inman. If you use it for tracking your site stats, log in to your mint installation and try the following:

1. Easter Egg 1: After you log in, type ↑ ↑ ↓ ↓ ← → ← → b a and look on your bottom right corner in your mint page!
2. Easter Egg 2: If you want to see the Mintman, log in and type ↓ R ↑ L Y B

Favicon is the shortcut icon that is shown next to the url of a website or next to site’s name in browser tabs. You can see our favicon in the screenshot above. To create a great favicon you should consider these:

1. Select the image you want to use for your favicon and trim part of it so you have a square part of the image (for example if your image is 450x400px trim 50px so it is 400x400px).
2. Resize the square image you want to use as favicon to 16x16px.
3. Save the shortcut as .gif file as it is the most browser friendly format for favicons.
4. Name your shortcut favicon.gif and upload it to your root folder as some browser recognise the file named favicon as shortcut icon by default.
5. For best results and for having a favicon compatible with all browsers that support shortcut icons place the following code anywhere between your <head> and </head> tags:

<link rel="shortcut icon" href="URL" />
Replace URL with the path where you stored your favicon.

Here are five shiny gradients to use for your web 2.0 designs. Note that colors used in these gradient are in RGB mode. The color codes are written in the screenshots. We used Adobe Photoshop CS3 to make the gradients, so if you use a different program, colors may be a little bit different due to the algorithm used by each program. The yellow gradient is the one we used for the beta logo in this post.