iBlog random » webmaster http://blog.zurka.us Just another WordPress weblog Tue, 28 May 2013 20:28:47 +0000 en-US hourly 1 http://wordpress.org/?v=3.6 Check if A Number is Even or Odd with PHP http://blog.zurka.us/check-number-even-odd-php/ http://blog.zurka.us/check-number-even-odd-php/#comments Thu, 14 May 2009 15:04:29 +0000 nasal http://blog.zurka.us/?p=921

I’m going to show you a very simple method for finding out if a number is even or odd in php. You could use this for many things but usually this is mostly used when you have a, let’s say, table and you want to color the background of every second row differently.

The php code looks like this:

if ($number % 2) {
    echo 'The number is even';
} else {
    echo 'The number is odd';
}

In real life we would use something like this:

$i = 0;
while ($something = mysql_fetch_assoc($query)) {
    echo '<div style="padding: 5px; background: #' . ($i % 2 ? 'eee' : 'ddd') . ';">Content</div>';
    $i++;
}

And of course, likewise you could check if a number is divisible by another number using this:

if ($number % 3 == 0) {
    echo 'The number is divisible by 3';
} else {
    echo 'The number is not divisible by 3';
}

Easy peasy, as always!
Have swing!

]]> http://blog.zurka.us/check-number-even-odd-php/feed/ 0 Design A Simple Layout In HTML and CSS (LMAWT, part 1) http://blog.zurka.us/design-simple-layout-html-css/ http://blog.zurka.us/design-simple-layout-html-css/#comments Tue, 20 Jan 2009 00:15:36 +0000 nasal http://blog.zurka.us/?p=797

Sorry for not writing recently but my laptop decided to stop working and actually it really did stop working. It has some motherboard problems again I guess, keeps dying and the keys in the last row aren’t working (except for y, b and n). So it sucks, can’t really write anything. Luckily I’ve got a very kind girlfriend who lent me her laptop so I could work. “Work”.

As I wrote in the first “lesson” (Let’s Make A Website Together), this post will be about designing a simple interface using HTML and CSS. I already wrote everything but unfortunately it went lost along with my laptop. Sucks.

So what we’ll be doing is something like the image below. Nothing complicated as you can see.. Let’s keep it simple for the beginning.

Sample page

As you can see form the image, the page will be composed by 7 elements, having the #container keep our other elements “tight” and centering the page. We will have two #menus (I will make those menus simple, links only, without the use of ordered/unordered lists), a #header with the logo, a #sidebar with the latest news and our favorite links, the #content where we will load our content and the #footer with the copyright notice or our email, whatever we want.

So let’s start at the beginning. We need to open our new document, write some lines in and save it as index.php. I usually write the same lines in every file I start and save it, so it is there in the folder, waiting to be updated. And I save my work after everything I make, even for just a smaller change.. I got used to this because once the electricity went off and I lost like 2 hours of work. After all the CTRL+S combo is not that hard to hit and it can for sure spare a lot of bad mood (or nerves).

Okay so let’s see the first few lines of code:

<!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" xml:lang="en" lang="en">
    <head>
        <title>My First Website</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <meta http-equiv="Content-Type" content="text/html;charset=windows-1250" />
            <meta name="keywords" content="this, is, my, first, website" />
            <meta name="description" content="Creating my first website by scratch. It's a simple one but good for learning." />
    </head>
    <body>

    </body>
</html>

As you can see, I start my project like every webpage should start, with the DOCTYPE declaration, so keep the first two lines somewhere you can easily find them and copy/paste them into your new projects. We then open the HEAD part of the site in which we put our page title, charset, styles, meta keywords, the meta description and everything that we have to load before the rest of the page. For the charset I usually use windows-1250 encoding since I’m from Slovenia and I use special charactes like č, Å¡ and ž and I don’t really like UTF-8. The meta keywords and description are used by the search engines which get an idea about what our site will be talking about and rank you higher in the results. The description will be shown in the search result of a search engine. It is the text that you see under the site’s title.

google

In the head I also load my style.css file which will include the (guess what?) style of the page. It is best to load an external file since it gets stored into the cache of the browser and helps the site load faster.

As you can see I open and close the BODY tag and then close the HTML tag. I save the file and I go make myself a sandwich. It’s time to start working. From now on I will write the code that comes between the body tags.

I will now put down the HTML part, explain it and then go to the CSS part, put it down, explain and confront the results I get. The HTML part is going to be without styles and since the DIV is a block element, all of our site elements will be listed one under the other, in the hierarchy I put them in the code. Let’s start.

<div id="container">

    <div id="top-menu">
        home | contant | sitemap
    </div>

    <div id="header">
        Our big fat logo comes here
    </div>

    <div id="main-menu">
        home | news | members | whatever | link
    </div>

    <div id="main-content">
        Something really nice here, this will be our content soon.
    </div>

    <div id="sidebar">
        My friends:
    </div>

    <div id="footer">
        &copy; 2009 OurSiteName.Domain
    </div>

</div>

I created a file with these lines in it so you can see our result. It’s basically nothing but 6 lines of text written one under the other which we are now going to style using Cascading Style Sheets.

I start by wrapping everything in the #container div, to which I will define a specific width, position on the page and everything else I want to style inside of it. Since the layout will be simple the only thing you need to understand is what will happen to the #content and #sidebar divs. We will float them one next to the other. Floats are a bit hard to understand since they can get pretty tricky and we very often have problems with them because of the incompatibility between web browsers (it’s not an incompability between them but they render the site in a different way), like for example Firefox and Internet Explorer. I have to admit that I lost my nerves lots of times because of IE, mainly because of IE6, but I can see nobody actually cares about IE6 nowadays since it’s being replaced by IE7.. But I still see many users use it so I think we should take it into consideration as well.. But it’s a lot of work, including hacks and so on, we are not gonna do this in this lesson. Maybe when we finish the site, we are going to look into tweaking it some more.

Let’s start with the styling. I will do this step by step, so you can see or results as we keep on going on. We put the following code in the style.css that we put in the same folder as our index.php file.

/* here I style the body, select the font size and family and background color */
body { font-family: arial; font-size: 12px; background: #f8f8f8; }

#container {
width: 800px;
position: relative;
margin: 0 auto;
background: white;
border: solid 1px black;
}

What I do to the container is define the width of 800px, “paint” it in white, give it a simple solid border and position it relatively and center it using the MARGIN property. See the result by yourself. Please note that I’m using html files for now since I didn’t install apache and php on this laptop and can’t use .php files locally. And if you check the source code of that file you will see that I am putting the styling directly into it and not into the style.css file. It works the same but reloads every time so the loading time takes longer but it really doesn’t matter with such small codes. Anyway, you put it into the style.css file and you’ll be fine.

#top-menu {
background: #55bdda;
text-align: right;
padding: 5px 10px;
}

#header {
background: #3a8195;
text-align: center;
font-size: 20px;
color: white;
padding: 40px 0;
}

#main-menu {
background: #244f5c;
color: white;
padding: 5px 10px;
}

With this I’ve styled the top part of the site, including as you can see the top menu, header and main menu. Every property is self explanatory except for the padding, which I’ll try to explain now. The padding is basically the space that you make between the border of the box and the content of the same box. The values of this property are like this: padding: TOP RIGHT BOTTOM LEFT. Why did I write only two values then? Because if we leave them out, they will get the same value as their opposite. So in that statement I say the padding should be 5px 10px 5px 10px.

EXAMPLE
padding and margin example

Since I know I explained this in a shitty way, I suggest you read the w3schools article about padding. But the main point is that the padding will push your text to the inside of it’s container. See the result here.

Now that we styled the head we move on to the body and footer. Let’s see the code.

#main-content {
width: 550px;
padding: 10px;
background: #cee1e6;
float: left;
}

#sidebar {
background: #007394;
color: white;
padding: 10px;
float: left;
width: 210px;
}

#footer {
clear: both;
background: #163741;
color: white;
text-align: right;
padding: 5px 10px;
}

Since I will be floating the content and sidebar, I have to use a little bit of mathematics now. At least that’s how I do it. What we do now is define the width of the sidebar. Let’s say that we want it 230px wide so we have 570px for our content. Do make the content of the sidebar clearer, we are going to give our box the padding property, so we move the text into the center a little. We are goingo to apply a 10px padding on each side, so we will define the width to 230px – 10px*2 = 210px and float it to the left.
Now we have 570px for our main content. But since we want this box to be clear as well, we apply the same padding as to te sidebar. So here, we again have 570px – 20px = 550px od width. We float this box to the left as well.

Now that we have floated the content and sidebar, we kinda messed up with the layout and it’s “path”. If we now style the footer without taking the floats in consideration, the footer will come out messed up. Lifted a bit or maybe even in a position that it’s not what it should be. To save ourself from this mess we must clear the footer. To clear means telling the box that we don’t want it to be touching other elements according to the value that we clear it with. In this case we clear it with a both value, which means it won’t touch anything on the left and on the right side. This makes it slide down and fix itself like it should.

Check our today’s final result here.

One last thing, make you have a good host, not some terrible fly by night operation. You can find the best cheap web hosting plans and if you’re a super serious person, a dedicated server.

I’m sorry if anything wasn’t clear, I’m sleepy and my head will explode but I had to write it. I will go through it again today and correct the mistakes and make things clearer.

If there’s any question on your mind don’t hesitate to ask it, I will be happy to reply you.

]]> http://blog.zurka.us/design-simple-layout-html-css/feed/ 5 Color meaning http://blog.zurka.us/color-meaning/ http://blog.zurka.us/color-meaning/#comments Mon, 06 Oct 2008 14:36:04 +0000 nasal http://blog.zurka.us/?p=536

Did you ever wonder what color should your website be? Depending on what the content of the site is, different colors will suit best. I give you a list of colors, their meaning and what the human brain feels when it comes in contact with them.

Red

Red is the color associated with energy, strength, power, determination as well as passion, desire, and love.

Red brings text and images to the foreground. Use it as an accent color to stimulate people to make quick decisions; it is a perfect color for ‘Buy Now’ or ‘Click Here’ buttons on Internet banners and websites. In advertising, red is often used to evoke erotic feelings (red lips, red nails, red-light districts, ‘Lady in Red’, etc). This color is also commonly associated with energy, so you can use it when promoting energy drinks, games, cars, items related to sports and high physical activity.

Light red represents joy, sexuality, passion, sensitivity, and love.
Pink signifies romance, love, and friendship. It denotes feminine qualities and passiveness.
Brown suggests stability and denotes masculine qualities.
Reddish-brown is associated with harvest and fall.

Orange

Orange combines the energy of red and the happiness of yellow. It is associated with joy, sunshine, and the tropics. Orange represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation.

To the human eye, orange is a very hot color, so it gives the sensation of heat. Nevertheless, orange is not as aggressive as red. Orange increases oxygen supply to the brain, produces an invigorating effect, and stimulates mental activity. It is highly accepted among young people. As a citrus color, orange is associated with healthy food and stimulates appetite. Orange is the color of fall and harvest. In heraldry, orange is symbolic of strength and endurance.

Orange has very high visibility, so you can use it to catch attention and highlight the most important elements of your design. Orange is very effective for promoting food products and toys.

Gold evokes the feeling of prestige. The meaning of gold is illumination, wisdom, and wealth. Gold often symbolizes high quality.

Yellow

Yellow is the color of sunshine. It’s associated with joy, happiness, intellect, and energy.

Yellow produces a warming effect, arouses cheerfulness, stimulates mental activity, and generates muscle energy. Yellow is often associated with food. Bright, pure yellow is an attention getter, which is the reason taxicabs are painted this color. Yellow is seen before other colors when placed against black; this combination is often used to issue a warning. In heraldry, yellow indicates honor and loyalty.

Use yellow to evoke pleasant, cheerful feelings. You can choose yellow to promote children’s products and items related to leisure. Yellow is very effective for attracting attention, so use it to highlight the most important elements of your design.

Light yellow is associated with intellect, freshness, and joy.

Green

Green is the color of nature. It symbolizes growth, harmony, freshness, and fertility. Green has strong emotional correspondence with safety. Dark green is also commonly associated with money.

Green has great healing power. It is the most restful color for the human eye; it can improve vision. Green suggests stability and endurance. Green, as opposed to red, means safety; it is the color of free passage in road traffic.

Use green to indicate safety when advertising drugs and medical products. Green is directly related to nature, so you can use it to promote ‘green’ products. Dull, darker green is commonly associated with money, the financial world, banking, and Wall Street.

Aqua is associated with emotional healing and protection.
Olive green is the traditional color of peace.

Blue

Blue is the color of the sky and sea. It is often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven.

Blue is considered beneficial to the mind and body. It slows human metabolism and produces a calming effect. Blue is strongly associated with tranquility and calmness.

You can use blue to promote products and services related to cleanliness (water purification filters, cleaning liquids, vodka), air and sky (airlines, airports, air conditioners), water and sea (sea voyages, mineral water). As opposed to emotionally warm colors like red, orange, and yellow; blue is linked to consciousness and intellect. Use blue to suggest precision when promoting high-tech products.

Blue is a masculine color; according to studies, it is highly accepted among males. Dark blue is associated with depth, expertise, and stability.

Light blue is associated with health, healing, tranquility, understanding, and softness.
Dark blue represents knowledge, power, integrity, and seriousness.

Purple

Purple combines the stability of blue and the energy of red. Purple is associated with royalty. It symbolizes power, nobility, luxury, and ambition. It conveys wealth and extravagance. Purple is associated with wisdom, dignity, independence, creativity, mystery, and magic.

According to surveys, almost 75 percent of pre-adolescent children prefer purple to all other colors. Purple is a very rare color in nature; some people consider it to be artificial.

Light purple is a good choice for a feminine design. You can use bright purple when promoting children’s products.

Light purple evokes romantic and nostalgic feelings.

]]> http://blog.zurka.us/color-meaning/feed/ 4