Dave PC Guy » HTML/CSS

RainyMood.com – A design breakdown

Admin — Tue, 09 Feb 2010 05:45:38 +0000

RainyMood.com.

Rainy Mood is a great, and relaxing website. What does it do? It plays a fifteen minute loop of rain OVER and OVER again. That’s it! How simple.

Why am I even bringing this page up? DESIGN!

Let’s look at this page. It has a great background that fits into the 500kb category, a simple image header that tells you exactly what the site is about, and then a BIG play button with sharing capabilities on the left and right.

If you scroll down, you’ll find a single add and some other stuff.

What I see

The beauty of the design here is simplicity. Just the background of a wet window gives the user the feel of really being there when it rains. The simple interface is amazing, because you know what? It doesn’t give you a million extra options that you wouldn’t use anyways, plus it auto-plays so that whenever you get on the sight, it’ll start up automatically.

It has a facebook fanpage on the left, great for PR, advertising, and all around marketing of the site. Facebook allowed the website to get 6000+ fans that visit the site regularly plus more as people try the site out. On the right is the “tweet” button, that will tell all your followers what a great site it is. I did that.

The big button has only one problem, its hover effect. It has an annoying greenish glow, I wish they would have soften that up and created more stylish buttons. It takes away from the all around “blue” experience.

Under the Hood

I took a look at the source code, the music is played through a javascript player made by voormedia.com and it has been hash encoded so that the ordinary users can’t just look through the code (it looks so illegible!). Of course, you can easily decode it but that’s not the point.

Next, the site uses no DIVs at all, nor a stylesheet. It’s all built into one file (except for the images) and uses tables. Now, people warn against using tables in webdesign but it does not matter too much here, it works well.

PROBLEMS: It’s not XHTML compliant. It has no true header that specifies the usual stuff. It is also not SEO optimized, it has a couple of keywords, no description (other than “rainymood.com”) and it does not have really descriptive alt tags.

The Point

It’s an easily navigatable website that has one simple feature that makes me go back to it over and over again. It has simple coding, though non-compliant, and it seems to work out quite well.

Visit it!

Share and Enjoy:

Creating a Blogging system (part 1)

Admin — Thu, 14 Jan 2010 02:26:53 +0000

Some time ago (a couple weeks), I created my own blogging system. No one told me how to do it and I didn’t read any tutorials on how to do it either so there were a few things I learned the hard way. As you know, Blogs are database-based, they’re all entries in a table.

You have an entry for the id, date, the content, and miscellaneous other information such as tags, and description. In this tutorial, I’d like to teach you how to do all that.

/* LET'S GET STARTED!*/

Creating The Table

For this tutorial, you’ll have to have your own database, and username. Set up a home server, with WAMP, XAMPP or whatever else. Once you have that done, create that database, I’ll call mine “blog”.

I’m not going to get into how to do that, because if you’re doing this on a server online, you’ll need special instructions. Google it and set it up.

So, let’s create an INSTALL script. Make sure that when you use this script, delete it right after:







This creates an installing button. This is only for convenience. I don’t like scripts that automatically add new tables and such without control.
else {
include ('connection.php');

This little bit will connect you to the database. Here’s what my connection.php looks like:


Great, now you’re in the system (btw, you’ll have to make your own username, password, database, and all that, just like I said you’d have to do. Let’s move on to creating your administration for your site:
//creating a user table
$query = "CREATE TABLE users
(
name varchar(15),
pass varchar(255)
)";

$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error());

//making the user name
$password = md5('password you want to use');
$query="INSERT INTO users (name, pass)
VALUES
('admin', '$password')";

//query
$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error());

Great, now you have a database entry for your user (that’s you!), I won’t get into having multiple users, right now. So bear with me. I’m using a md5 hash to make the password a bit harder to crack. Also, I’m using the usual “admin” for username. Let’s move on to the blog table:
//creating a blog table
 $query = "CREATE TABLE blog
(
id int NOT NULL auto_increment primary key,
title blob NOT NULL,
date blob NOT NULL ,
content text NOT NULL
)";
    // execute query
    $result = mysql_query($query) or die ("Error in query: $query. ".mysql_error());

$query = "INSERT INTO blog (title, date, content) VALUES ('Welcome', 'May 5th', 'First blog entry! Aren\'t you excited?');
";
	// execute query
    $result = mysql_query($query) or die ("Error in query: $query. ".mysql_error());

mysql_close($connection);
echo "Done";

}

With this, we just created a simple blog table that will have a specific id, date, title, and content. We’ve also added a dummy entry (with a date format I won’t be using by the way).

If you’re wondering about the backslash in the word “Aren’t”, don’t wonder anymore. A backslash is used to “escape” characters that may hold a different meaning in the world of programming languages.

For example, if I did not escape that character, I would probably get an error where the MySQL wonders what the “t you excited?” is about since the entry ended at “aren’”.
Before we go on, I would like to seriously address this. The best way to avoid an error is to use a well-known php function mysql_real_escape_string(). This function will automatically add backslashes to all potentially problematic characters. Also, if you use this function, don’t add extra backslashes because the function will escape those as well. There’s only one problem with that function but I’ll show you the solution later on.
Coding the Entry
Now, you’ll notice that while coding the entry, I’m leaving the system open to vulnerabilities, but that’s okay. Why is it okay? Well, unless you’re logged in, you won’t be able to get into the system. So you should be the only one who gets in there and adds entries.
You can screw up your entries by dropping tables and whatnot if you want to, but I’ll assume you won’t be making any crazy MySQL stuff. Also, you’ll have the above-mentioned function to protect you from any unfortunate mistakes.
First add the connection.php file using the include() function. Second, let’s create the form:
Add Blog Post
     
    

    
    

    
    

Place this in the body of your html file, I know it sounds redundant and you should know about this stuff but I’m just making sure. What this form will do is send some information using the “post” method (ie. no URL mumbo jumbo like this: ?dkjw=fsjklwe&fjskl=ewjk) No one wants a three thousand character URL up there (what browser would support that anyways?). You have two separate pieces of information: textarea (where your content goes) and input type=”text” (that’s the title). Anyways, put the next piece of code inside the  tag, or at least above the form.
if (isset($_POST['addpost'])) {
		$title = mysql_real_escape_string($_POST['title']);
		$content = mysql_real_escape_string($_POST['content']);
		$date = mysql_real_escape_string(date('m-d-Y'));
		$sql = "INSERT INTO blog (title, date, content) VALUES ('$title', '$date', '$content')";
		$result = mysql_query($sql) or die ("Error in query: $query. ".mysql_error());

		if ($result) {
			echo "Blog id = ".$id." updated";
		}

}

Well, that’s some good stuff. The submit button in the form sent the post variable name “addpost” with the value “Add Post!”. The loop above goes into motion right when that post variable is submitted. I escaped all the strings just in case. Oh, if you didn’t know, you can use html, css, and all that other stuff in your posts. It won’t screw up anything, I promise  
Anyways, you can see I used a date function to specify the date the blog was submitted. Read up more about it if you want to use a different time stamp. This one looks like this “1-13-2010″. We then added all the values we needed into the database. And voila, we just added our first entry!
What’s next?
In my next tutorial, I’ll show you how to correctly show all that data! I’ll also get into how to protect your administration sites and how to create the login site too.
STUFF TO REMEMBER

MySQL uses a lot of special characters. To avoid an error use the mysql_real_escape_string() which will sanitize your entries to some extent. There’s one small problem with the function, but I’ll address that in the next tutorial
Use the include() function for your connection.php file for each site that connects to the MySQL database. It’s easier than rewriting the code numerous times (especially if you decide to change the user name and all that)
Delete the install.php installation script after you’re done. You don’t want anyone messing with your scripts. It also creates a vulnerability if you leave it on the server. If you think you’ll forget, get on PHPmyAdmin and do all the querying manually.
HAVE FUN!





Share and Enjoy:

Mobile Websites (tips)

Admin — Mon, 11 Jan 2010 23:28:37 +0000

I’ve recently started working on some mobile websites. You’ll notice that davepcguy.com has its own mobile alternative as do some other sites. Mobile devices are growing in number and gone are those days when internet was viewed only on the computer screen. WAP is not even used either so that old school coding is gone too.

These days, almost everyone has an iPhone or a BlackBerry, or a Palm device. Some of us even have other devices like PSPs, tablets, and others that require quite a bit different formatting. Here’s how to go about making your mobile website.

Step 1 – The Vision

First, you gotta have a vision of what you want. The best way to get a good vision is by picking up your phone and browsing the internet, looking through some popular websites such as youtube, flickr, facebook, myspace, and other sites that you know get a lot of traffic and are likely to have their own mobile version.

I recently saw a really nice blog post detailing some of the nicer mobile sites. The theme there is common:

Everything is single column. There are no side-bars, there are no fancy tabs. Everything is in a single column. Think of it as a letter. There are no columns in a letter, you have a header, the body, and the footer.

Header: Generally, you’ll use the header of the page to announce the website’s name and to show menu links. You may also place a commercial in this area (Google Adsense uses commercials). Here’s what I used on my Only A Quote mobile site: It’s a simple banner that effectively tells the user what’s going on.
Body: This is pretty self-explanatory, you put the meet of your site here. Try to use well organized information. Don’t just slap stuff there. Mobile users are more likely to leave your site than regular computer users. Also, keep the graphics swift! Not too much.
Footer: Use the footer for copyright info and other blah blah stuff but don’t over do it! I know huge footers are fashionable but not for mobile users!

Keep it all simple!

Step 2 – Design

Here are a few tools that will help you with your design:

Keep in mind that different phones will render your page differently so try to make it as simple as possible. To catch the widest possible audience, focus on the big three: iPhones, BlackBerries, and Palm phones. Samsung and Nokias are common too, especially outside of the US but BBs and iPhones capture most of the market. Android is coming up too, so watch out for them too.

A few simple rules:

Keep the site less then 400px wide.
Cross-browsing is a bitch on Computers, it’s worse on phones, render for Safari and Opera Mobile
Graphics should not exceed 20kbs
Keep the layout basic

There are tons more rules but those are the basics.

Step 3 – Coding

First of all, DON’T USE JAVASCRIPT! It works on a lot of phones, it’s gaining support, but it’s really bothersome (I know, I use my phone to browse the net a lot). There’s no need for it. Hover and other pretty stuff is useless too. Many phones don’t support it.

Use as little mark-up code as you can. If your original site has thirty divs, make it three in this one. There’s no need for all that on phones. If your CSS screws up, so will your divs.

Use the following doctype:

This will tell the browser that it’s meant for phones. It’ll help rendering and it’s the RIGHT thing to do haha. Once you start coding, again, keep in mind that your website should be the smallest possible.

Here are a couple of rules to keep in mind:

Don’t use px/em sizes, do everything in percentages, you never know what kind of a phone the user will use.
Keep all files as small as possible.
If your .PNG graphics do not use transparency, convert them to JPGs with smaller quality
If you use .PNG graphics WITH transparency, consider remaking them into JPGs or GIFs (for transparency) if at all possible
Keep all graphics less than 400px wide. I suggest 350px tops.
Use “ALT” for images, some phones may not render the text and it’s standard .mobi rule
Try not to use tables or javascript
Don’t use external resources (ie pictures from other sites, scripts from other sites, etc)
Define sizes for images with the width = “” and height = “” html tags
NO POP UPS!

That’s about it.

Step 4 – Testing

You’ll need to test your site, so use the resources mentioned in the emulator part. Use your phone as well!

Here’s another resource that will catch ALL of your mistakes:

Ready.mobi

This site checks your markup, the size of your site, and many other features. It will tell you if you did something wrong and will usually tell you what you can fix on your site. It also features five different phone emulators on the spot. It also ranks the speed of your site. Here are my stats:

Oh yeah, that’s a bad rating. It’s mostly because of all the graphics on my site, the CSS involved and inter-linking on my blog. It happens but it does pretty well on my BlackBerry so try to look at your rating positively especially after you do your own tests. As you can see, it tells you the different speeds with GPRS, 3G, and Wi-fi.

Step 5 – Implementation

Let me save you a few hours of searching. In implementation, you’ll have to figure out how exactly you’re going to redirect your traffic to the mobile version whence they use their phones. It took some time for me to figure out but here are a few options:

DetectMobileBrowsers – This is almost a fullproof method of redirecting your traffic. The problem? You can’t use it unless your site is COMPLETELY non-profit. Nope, not even ads are allowed. If you want the commercial version, it will cost you $50 a year to use it
LightWeight Device Detection – This is probably one of the simplest scripts you’ll find and it works really well. It also doesn’t have any restrictions as far as I’m aware.
Mobile Detect – This is a slightly more functional version of the above-mentioned Device Detection. They’re not related but work in a similar way

Let’s move on to actually using these scripts. I haven’t used number one but I’ll tell you how you can incorporate number 2 and 3.

Decide whether you want a separate site for the mobile version. I recommend creating a sub-domain such as m.onlyaquote.com (whence using sub-domains, remember that m.onlyaquote.com = onlyaquote.com/m )
If you did not create a separate sub-domain, you can place the whole thing in a loop but don’t forget to create a backdoor so that the user can switch between the desktop and mobile version.
Put all the script messy stuff into a separate file (so as not to clutter up your index.php file) except for the if/else statement found in number 2. If you’re using number 3, don’t worry about that at all.
Use include(script file ); to put the script back into your index.php file. Put all of your PHP before the tag

If you’re using Number 2, here’s what you do:

include ('scriptfile.php');
if($mobile_browser>0) {
   // do something
header( 'Location: mobilesite.com' ) ;
}

If you’re not using a different site do this:

include('scriptfile.php');
if($mobile_browser>0) {
 // place your mobile site here.
}
else {
   // place your desktop version here
}

You can also simply switch out CSS files with this method (make sure to put the loop inside the tag then). I don’t suggest you use the default CSS method of switching styling according to the device (ie. ) because it doesn’t work that well and most devices will try to read BOTH stylesheets.

For number 3, again place the following loop before the tag:

include("Mobile_Detect.php");
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
    // any mobile platform
header( 'Location: mobilesite.com' ) ;
}

With the number 3 method (ie. Mobile Detect) you can also specify which mobile device you want to do what. You can choose a separate site for an iPhone and Blackberry or separate CSS files. Well, whatever, you can do it all.

CAUTION: The detection system is NOT perfect. With newer phones, newer browsers, and newer software, the detection script may become obsolete. Be always on the look out for better versions!

Conclusion

That’s it, with these few tricks, you should be able to easily make your own mobile site. Here’s what mine looks like (I still have a TON of work to do!):

Share and Enjoy: