iBlog random » website

Make Your Titles Dynamic with PHP

nasal — Tue, 26 May 2009 15:25:00 +0000

When developing your website, if you want to rank well in search engines it is crucial that you use different titles for every sub-page you’ve got online. This is because these search engines (Google, MSN etc) love your titles and categorize your site based on them. This is good for SEO.

This is a simple thing to accomplish using PHP but it really is very effective. I will put dumb text into them but you should use titles rich with keywords related to your niche.

$title = 'Welcome to our website!';
if (key($_REQUEST) == 'register') { $title = 'Register now'; }
if (key($_REQUEST) == '404') { $title = 'Error 404: The page is unavailable'; }
if (key($_REQUEST) == 'about') { $title = 'Who we are, what we do'; }
if (key($_REQUEST) == 'news') { $title = 'Recent news'; }

This would work if you are using urls like yoursite.com/?register, ?news etc. What it does is set a variable $title which will include the text your define according to the page we are watching. Now we need to display it in our browser.


    <?= $title; ?> - Your Company Name

Pretty easy, isn’t it?

Oh and today I’ve found a FREE product that helps you make some money with google, all you have to pay is less then $3 for shipping and handling and they mail it to you. The offer is only valid for the US though. Click here if you are interested. It can do no harm if you’re serious about making some money online and $3 really isn’t something you could not afford!

Have swing!

How to Have an Opaque Text on a Transparent Background

nasal — Fri, 15 May 2009 14:56:17 +0000

This is what I’m going to show you how to do:

This is Kakashi from the Naruto anime.

It’s a nice effect that can be used for many things, for a nice gallery or something. You could combine this with some JS, add a hover effect to the picture and have it display the caption.

edit: theodin posted a comment with a link to this kind of effect, check it out at buildinternet.com

This is a pretty simple trick that works in different browsers except for older IE versions I think (because IE seems to hate transparent png’s). Btw, RIP, IE6.

Let me show you the code and then explain how it works:


    
        This is Kakashi from the Naruto anime.

So basically what we are doing is enclose our image in a relatively positioned DIV element. Inside this element we create another DIV element, absolutely positioned. We stick it on the bottom of it’s parents div, so it goes displayed on the bottom (we could position it on the top if wanted). The background of this div is a semi-transparent black PNG image, 1x1px (http://zurka.us/bg_overlay_black.png). This is our black box, the content holder.

Now what we need to do is add our text to the box. Inside the box we create another DIV, give it a 10px margin (this way it has some space around it), style the text and put it over the other layers with z-index.

And that’s it, we have it done. It’s a simple HTML + CSS effect that I tried to get using different methods (like css opacity and stuff) but didn’t manage to replicate.

Original image: Kakashi at Quizilla

So once again, easy peasy!
Have swing, thanks for reading!

Check if A Number is Even or Odd with PHP

nasal — Thu, 14 May 2009 15:04:29 +0000

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 'Content';
    $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!

Create A Sliding AD Showing Up From The Bottom upd 15.06.2009

nasal — Wed, 15 Apr 2009 19:57:31 +0000

Did you ever want to do something like this? An ad showing from the bottom of the screen?

Well, today I’m going to show you how to do it, without the need to spend $47 Yay!

We are going to do reproduce this by using mootools and some styling. Again, it’s an easy thing to make.

Let’s start by including mootools in our document and writing a little script that will basically do all the job that need to be done. This goes into the of our html file.

Let’s analyse the script:

When the DOM is ready, execute the following function:
slideUp is the variable in which we ‘store’ the motion of our sliding div. We give a tween effect to our element with ‘footerad’ as ID
Next, we make the function execute after 1 second (1000ms) and make it raise the height from 0px to 90px. This is going to be the height of our slider on the bottom
Now, we add a button that will close the ad if clicked. We could do something more complicated here by adding some code that would write a cookie so the ad doesn’t show up again if the user reloads the page but we don’t need it, we want to bug the user, right?

Now that’s it with the script. All we need to do now is create or DIV element (if you go check out the page at the top of this post you will see they use an IFRAME.. I’m not going to use it).

Now, I think that if you don’t understand how DIV’s work you won’t understand a shit here. Feel free to ask for further explanation in the comments. Oh and I will style the divs directly here, without a css file, so we see how it works.


    
        
            
            
                This is a test, the form is not working!
                Name:  Email:  
            
        
        
            [close]

We give the first DIV the ID ‘footerad’, since that’s the id we told the script to show when the dom is ready. We style it so it will cover 100% of the width, will be 0px high (the script is going to increase the height with a nice movement) and we make it stay fixed at the bottom of the page. The background of this element is not set, so it will be transparent.
The second DIV stays there only because we need a relatively positioned element so we can absolute position other elements inside it.
The third div we give a background color and a border on the top, we position absolutely, 0px from the left so it sticks left and 15px from the top so we have some transparent background on top of it (the RSS or whatever icon will look like it’s coming out of the slider)
Now it’s time to position our rss icon. We position it absolutely and move it 20px from the left and -15px from the top (this is why we positioned the third div 15px from the top).
We make a fifth div with the text and our form. We could position it absolutely but I decided to position it using margins. So we move it 10px from the top and 105px from the left of the screen (because there’s the icon)
We close this div and make a new one, positioned absolutely, 5px from the right and 0px from the top, this will be out close button. We make a link and give it the ID ‘closead’
We close every div tag. It’s done

Now, as I said, I maybe made a complete confusion writing this. If you don’t understand how this works ask and I will help you out. If you don’t care how this works just copy/paste the code and play a bit with the styling. It’s not hard to understand even if you don’t read my messy writing.

What’s different from this is, that they use a wider image on the left and everything seems more centered. You could do the same by positioning the icon further from the left and then giving your text div a bigger margin on the left.

Have a nice day and go drink some beer with the $47 you just saved!

Live example

As IE does NOT support the use of the CSS position: fixed; property, I found a workaround that works in all browsers but which I didn’t test with other content on the page. The demo is still using the old code, displaying well in all the browsers except IE. This code will work there as well.


    
        
            
                
                    
                    
                        This is a test, the form is not working!
                        Name:  Email:  
                    
                
                
                    [close]

All that changes is that we create a dummy div with a 100% height and position the ad absolutely on it’s bottom. Should work well with all the content as well, but as I said, I didn’t test it.

However, I suggest you using this with caution and parse it only if the useragent shows up to be an IE. Create two different CSS files and use something like this:

Have swing!

MooTools

nasal — Wed, 08 Apr 2009 13:41:35 +0000

I started reading some tutorials and books about this very nice and simple javascript framework, with which you can do supercool things in the browser.

It’s actually pretty simple to use for simple effects and gets complex as you try to do magic with it.

After reading a chapter about it’s Tween function, I decided to make a simple menu with a simple fade animation. It’s really something for beginners, since this is what I am, a beginner.

We are going to do a menu with some links that change their position and color with a simple animation when we hover them. Easy peasy. Check the result here.

First: we start the document as always, with a doctype (I still use the transitional xhtml) and include the framework.



    
        MooTools

Second: we add an event to our window element which is going to start as soon as the DOM (Document Object Model – the browser) is ready (it won’t wait all the other elements to load [big, fat images, advertisments etc]).

Third: when the DOM will be ready we want it to get all the links with a specified class (I made it this way, you could easily make all the links in a specified UL or any other element behave the same way) and apply a special behaviour to them.

                $$('a.click').addEvents({

                    'mouseover': function() {
                        this.morph({
                            'padding-left': '20',
                            'color': ['#1E0CB5', '#94BB06']
                        })
                    },

                    'mouseout': function() {
                        this.morph({
                          'padding-left': '10',
                          'color': ['#94BB06', '#1E0CB5']
                        })
                    }

                });

As you can see, MooTools is very simple and easily understandable. Using $$(‘a.click’) we create an array of all the links in our page with the class=”click” attribute.

Next, we tell the function to Morph the link when the mouse hovers the link and when the mouse leaves the link. We add 10px of padding on the left and change the color to green when the mouse passes over the link and restore the default values when it leaves. Easy.

Still in the head we apply some styles to our menu.

And now we complete our simple page.

    
    
        Something nice
        
            link
            link
            link
            link

That’s it, a nice animated menu to use on your website! If you want to see the whole code in one piece, check the source of the live example.

Hope I was clear enough.

I’ll write again with a new example of what I’ve learnt!

Use PHP To Display Page Content (LMAWT part 2)

nasal — Fri, 23 Jan 2009 15:27:16 +0000

If you missed the previous posts, you can read the Introduction and First part to catch with us.

What we are going to do today is make our links work and display the content depending on what link we click.

First let’s make our links go live. In our final result of part 1, our links were dead. To make a link work, we must use this syntax:

Home
News
Contact
*** notice we use ?news for the news, ?contact for the contact page etc, will be explained later ***

So let’s change all of our links to this. Our final result will be this. As you can see, the links are underlined and you can click on them. But if you click on them you will notice nothing really changes on the page, except for the URL in the browser.. that’s because we need our PHP code that will “read” the URL and display the content that comes along.

Let’s see the PHP code that we put into our #main-content div. To load different contents depending on what click we link on, we are going to use the switch function, which is not hard to understand, is very useful and works fast!

As I said before, put this code between inside your #main-content DIV.

What will this piece of code do?
It will display different contents based on the page we are on. If, for example, we will click on our “news” link, the URL will change to “domain.com/?news” and the content that will be shown will be “news.php“, because of the ‘case’ we wrote. In this case, what comes after the question mark in the URL is called a “query string” and we will work with these.

In this example we are using the “key($_REQUEST)” but we could change this to react to something like “domain.com/?page=news” and in this case we would use a different switch. Tell me if you want to know about it and I’ll write an example for this.

Anyway, check what we accomplished now. We made our first working website, we could actually put whatever we would like inside, we are done. The content is changing and everything is working fine.

Any questions? Feel free to ask!

Design A Simple Layout In HTML and CSS (LMAWT, part 1)

nasal — Tue, 20 Jan 2009 00:15:36 +0000

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.

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:



    
        My First Website

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.

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.



    
        home | contant | sitemap
    

    
        Our big fat logo comes here
    

    
        home | news | members | whatever | link
    

    
        Something really nice here, this will be our content soon.
    

    
        My friends:
    

    
        © 2009 OurSiteName.Domain

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

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.

Simple SEO tips by Google

nasal — Wed, 19 Nov 2008 22:07:08 +0000

If you are new to Search Engine Optimization, you can read what Google engineers suggests you to do, to improve your website ranking. The guide is made for all webmasters of all levels and for sites of any kind, so it will definitely fit your case.

Read more on their Webmaster Central Blog or download the PDF file directly.

Remember that optimizing your site will bring you more free traffic.. which means more earnings if you advertise on your site!

Good luck!

Color meaning

nasal — Mon, 06 Oct 2008 14:36:04 +0000

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.