If you want people to visit your website, it can be very helpful to feature topics that are “trending.” Google and Twitter, for example, keep track of which keywords are being searched for most often, or which are being mentioned most commonly. Staying on top of these trends will earn your website a reputation for offering fresh information on the topics that people care about. There are several different kinds of tools you can use to keep track of what is trending on the web. Here are a few of them.

Twitter trends are a good way to keep track of what is being talked about on the web. While these trends are displayed on the front page of Twitter, their open database makes it possible for other developers to create software to analyze trends in tweets. Rather than telling you what is searched for, this keeps you in touch with what people are saying.

If you want to follow the trends on twitter using graphs, Trendistic is a good option. You can view trends over a day, week, month, 90 or 180 day period for any subject. This is a great way to stay in touch. PicFog is another useful piece of software that searches Twitter photo upload sites. If you want a current image about a subject you are covering, this is a very useful tool to have, and possibly to incorporate into your web design.

Google Trends is one of the most commonly used and well known options available. It allows you to enter in as many as five different topics. The software then tells you how often the topics have been searched for over a period of time. Additionally, it tells you how often the topics have shown up in the news, and which regions of the globe are more interested in specific topics.

By using Google Trends, you can get people to specific visit site areas by staying on top of what’s being covered. You can also get some idea of what keywords to include in the text. One limitation of Google Trends is that it doesn’t tell you how often the topic is searched for, it only tells you how much more or less than average the topic is being searched for. A reading of 3.0, for example, means that the term is beings searched for 3 times more often than normal.

This post is wrote with the help of Andrea Infusino, an italian SEO and programmer. You can check his (italian)website or follow him on twitter.

Seo and web designer. Looks like they are …too far apart .. but is not the truth … I think every web designer should know, (at least) the basic knowledge of seo.

But seo is always in changing, improving, and this year was a big year of changes for SEO.

So what has changed for seo and what a web designer should know about these changes?

seo for web designers

Some are not really important for Us, like the google caffeine, the new  algorithm, but others involves directly our job and is really useful for a web designer know how the improve the ranking of a web site. Nowadays is not (only) about a h1 tag, a good title with keywords or some good links.

Just think about HTML5. The new section and article tags, will give us(or the contend editors) the power to use more than h1 tag on a page, so  what’s about this? The semantic is changing, and google, as others search engines, will consider this, so probably the h1 tag should be not more relevant in the further years, as is it now?

I will not explain all the new features or how they works, but we should now these changes, and what the expert SEO Andrea Infusino thinks about these changes.

So what has changed in 2010? Let’s see.

1- Google caffeine, instant search.

Real time is the future! Google instant, do you know this? You can make search in real time. As web designer , you’re not obligated to know this,and you can think “This is not important for me!!”. Right!  But is a  big change, important, you must know this. A seo must know how the new algorithm works, a web designer should know about this new, big change in the search engine ranking.

What Andrea says about this :

so many internet marketer thought instant searches could have changes the way of searching for users and AdWords campaign have to include partial keywords ads (“t”, “tr”, “tra”, “trav” etc… for “travels”), but don’t.
Instant search is just a faster way to get organic searches executed. Another important point, in the other hand, is that instant search could reduce users time spent on page because many users can find their result before typing all the keyphrase!

2 – Show the results!!

Are you still logged in google? Not only the instant results, you can view a preview of  the web site. Move the mouse over the result in the SERP, you can see a preview of the web site. what’s about this?  Well … I’m trying to improve the page considering this factor, maybe is not real important but is good to know.

Andrea :

it’s important to remark that flashy websites, and ad-fully website, are not displayed at best because instant preview crawler does not execute them. In these cases you have to consider to give an alternative and valid content or redesign your webpages for a more fruible and accessible design and contents.
In addition we have to remember some webmaster witch hunts when they started getting instant preview crawler visit counted in direct traffic into Google Analytics panel, fixed afterwards

3 – Social Networking

Facebook, twitter and the other “friends”, you can see in the SERP the results of facebook status, facebook pages, friends, link posted, the same is for twitter. SE are considering these pages in the results, and sometimes I see that some page facebook are on the top of a SERP before the web site. Maybe is not goodthat you’re fans page is listed before of you’re site in google, or not?

Andrea’s consideration:

have you already heard about Blekko?
Blekko was lauched with “slash the web” but it is really more than a slashing utility. It allows you to dig very a lot of informations: you can get  and analyze so many ranking factors for free and comparing them with other websites -read competitors-. Just think that Google webasmter tools don’t!
Anhoter interesting point is that blekko allows you to search for google adsense pub id, and last bu not least a more incisive spam fighting, removing so many spammy websites and useless aggregators.
Into social signals Blekko started to put, afert logging into facebook, some facepiles of your friends into search results (liked pages).

4 – Social links are important for ranking

Yes, google consider social link, they can improve the ranking of your web site. And if Google does this, the others SE will do the same.

Andrea :

To explain the importance of social signals, just think about some non-direct benefits. First of all Yes, google consider social link, they can improve the ranking of your web site. And if Google does this, the others SE will do the same. You have to consider Google, and other S.E., let you know and create our own social cirle, that is you friends across the web and social platforms. A social circle is a small world that allow you to get traffic and new signals for your blogging activity. In addition just think social circle is composed of nofollow links. Could this harm you website? It doesn’t, but this could represent a great value. A good post will be shared, clicked and visited really many times and you can easily think that the direct link benefit is not so important if you consider the traffic and brand reputation below this!

5 – Real time world is now!

Real time? click on the link real time, in the google menu on the right, you can see result from  social  in the serp. As the same time you can see real time streaming of result based on twitter streaming, so what? Launched a new web site? You should appear in the first page of result simply sending a link to twitter, is nice, really nice. You can get visits on a new web site with a simple tweet, that could be in the first page of the SERP.

Andrea :

“faster” is the keyword: we can read this into two main branches.
Google and other techologies, consider facebook or twitter medium speed of posting news and updating, are moving to faster platofmr and changes. Your website, your design and application logic must be as flexible as possibile in order to adapt themselves to the changes of the web (think about social widgets). In the other hand Google have already introduces page speed utilites, and this is a tangible signal that we must keep our pages really fast, creating good and reacheable CDN, light js and images, excellent webhosting and so on!

6 – Personalized searches.

Users can now personalize they’re search, and the results will be more relevant depending on the previous user research. Google explained this very well in this blog. Is based on the last 180 days of search.

Andrea :

someone could thing that this is really harmful for a website owner. I just only say that it’s true if you are not sure of creating a good, unique and valuable content!

7 – Blog comments, “no follow” link ?

Google is considering this, mainly to fight the spam. Spammers always searching for new ways to fill internet with they’re shits! A way to do this is commenting on posts, but not writing ” buy Viagra”, instead they use  something like this “OH! What a good post!! I’m going to subscribe to your rss”. If you are using this technique to get backlinks .. don’t do it .. I don’t think is a good idea, in the further years Google and other search engines will make other chnges to fight this problem.

Andrea :

Right: I can say you really more! User generated content is really important to “up” your pages and articles. Spend your time to get your user involved into your topics. Put questions or other signals to create a reaction into your user, and let’s see how they are forgetting do/no follow problems.

Be happy to get 10 good comments with new ideas intead of 1000  low-quality comments hard to manage, hard to believe, spammy-like.

8 – Google is not the only one.

Google is not the only search engine in the world! Of course is the best, the more important and the one whose decision will  affect the SEO world, as the previous mentioned before. But is not the only one, Bing as grown a lots in the last year, although Google did not liked this, and they says “Bing has copied our SERP”. Try to consider this in you’re optimization. For example bing offers a sort of “webmaster tool” (yeas ok, maybe the are “inspired” by google), as the same as Yahoo,despite everything, is still important.

Andrea :

think to yourself “what happens if google will close?”. We have always to consider that point. Social networks and new search engines are growing up everyday with new ideas, and the web is changing. Google is still the number one in the search segment, but we have not to stop to find and be optimized for niche search engines, just like for keywords and traffic (80/20 is always the key!). One of the most critical point for Google now is the sponsored search into facebook where bing offers its results.

Facebook is not our lives, but we have to admit that we spend so many hours on it for fun or for work. So many young users are on facebook everyday and even older one are getting facebook profiles. This profilation, htat is really a deep one, could harm Google predominance. Once we used to say “i’m on the web” surfing over yahoo, altavista, aol and others. After we used to say it while we where searching just only on Google. Now we say it browsing facebook or twitter pofiles! The web is changing! We are going to a more person-centric web infrastructure, and google is moving to this direction introducing more accurate SERP, personalizations and geo-localitazion services and social-integrations too!

9 – Maps? Localization?

Big web sites are not really hard to put in a serp, or in the first pages, but what if you create a website for a restaurant? If you search for “restaurant name of city” is not sure you will be in the first page, although in you’re city there are only 3 restaurant, so why? Because of big portal, so the first page will show the results from a portal that contain the section of “restaurant in Paola”. So what? Stop fighting with backlinks, posting the link everywhere, or buy links from dedicated services. It has no reason!! Buy 100$ of adwords impressions, and add the restaurant to google maps, you should be in the first page without know nothing about seo(Yes, I think Seo don’t like this …)

Andrea :

local searches can fit very well with “less is more” concept. Just do less, for less people and get more visibility, more leads or more traffic considering to reach a local audience. Sometimes getting ranked well into local searches, better, having a higher ranking using local-based keywords can help you to face a lower competition. Add this to mobile apps for local business. Think about Facebook Places or Fourquare or Gowalla or Twitter Localization or Google Maps or Google Places. Local is getting more and more important and we can count so many signals to say that local is the key for small/mid business. Just concentrate your efforts on these signals and apps, starting using them and try to getting the most from them not only for  some direct benefits on Google ranking, but for covering your places with your presence and brand!

Final conclusion.

SEO is important, is not our job, but is important. If you are a web designer, or better said a front end developer, consider SEO when you make a new website, of course,  is not our mainly mansion, but the client will be happy to know that you can improve the ranking of his page, not only the aesthetic.

With this post I want to show you some useful and quickly techniques with photoshop to create nice and modern layout.

Ribbon

3d effects has been a trends the last year, let’s see how  create, quickly, a ribbon in photoshop.

Create a new document 400*500 and call it “Ribbon“.

Set the guides and the rulers as show in the image below(is are hidden, CMD+H to show).

Set the container

Create the container : Create a new layer , I called it wrap, select the Rectangular marquee tool, create a selection 300*500 following the guides and fill it with white.

Container

Set the foreground color  to #d21010, draw a rectangle using the rectangle tool(U),go some pixels “out” of the wrap layer, it should be like this

Create the Ribbon 1

I will not apply particular effect or filter, is only a quick tutorial on how create it, so change background, colors or whatever you want.

Now we’ll draw a new rectangle  above the other layer,  exactly the out of box part of ribbon layer, and fill this new rectangle with a more darker color, to give the illusion of depth, I used #870808

With the new layer selected click CMD+ t or edit->transform -> distort. Drag the bottom left angle of the selection to down.

Release and apply the transformation

The ribbon

Finally, in the layer window, drag the darker layer down the main ribbon layer, this is the final result.

Final Result

Now let’s try to create the same effect, but changing with a rounded depth.

Rounded Ribbons

For a better view rotate the image on 90° CCW, zoom it and select the rounded rectangle tool. Draw a rectangle like this

Rounded ribbon

Select again the rectangle tool and draw a shape like a “base” of the rounded rectangle be sure to give a height like the rounded angle, should look like this

Cmd+E and merge the layers.

Rectangle Marquee Tool, select the bottom rounded middle of the layer and create a new copy layer from this

Flip the Layer vertical, drag  next to the first shape, then CMD+click on the layer in the layer window, and select the original then delete it

Now you should have this

Do the same for the left side and the deselect (CMD+D) and delete the second layer, as we don’t need.

Now we have to create the depth, so simply choose a darker color, as before, and create a Ellipse with the Ellipse Tool rasterize then cut in half, deleting the bottom middle, you can use the marquee tool then delete.

Move the half ellipse down the rounded angle then duplicate the ellipse layer and do the same for the other side.

Finish : move to next the wrap and then rotate again the image for 90° CW, final result

Rounded Ribbon with Photoshop

Inset lines

Another nice effect is the inset lines, like I used in this blog. Do a inset lines is easy.

Create a new document again 400*500 and fill it with #2f3a6b

New layer, change the foreground color with #010101, make a selection with fixed size 100px * 1px and fill it with(G) the foreground darker color. (Zoom with (Z) on the selection if you cant see the line).

inset line with photoshop

Now don’t deselect, move the selection one pixel down, create a new layer then fill it with #ffffff and set the blending level mode to soft light

Done! This is the final result

inset line with photoshop

Inset Typography.

Create beautiful inset typography require excellent skills and knowledge of photoshop, but a good way to starting and understand how obtain this effect is playing with the inner shadow in the layer style, here’s a quickly example.

Create a new document, fill it with #767a8e use a bolder font with big size and write something. I used League Gothic(is free search on google) 100px and #4a4d5e as color for the text.

Now double click on the layer in the window layer and set the inner shadow effects like this picture

Inset typography

And here we go

Inset typography

This is a good start point to work with Photoshop and create Inset Typography. You can work with shadows, gradients and other PSD effects to create your own inset effect.

You can download the PSDs at this link

Download

Well, after a long time from the last post, here I am!

The 2010 was a really hard(read bad) year for me, for work, personal problems and some really bad things happened to me. I decided to restart again, change the web site adn .. a bit my life ..

I lived for 2 beautiful years in Barcelona, then , for personal and work reasons, I came back to Italy, where actually I’m living. But this year was not good for me, so I really hope the 2011 will be better!!

Anyway I want to wish you a happy and great new year, that brings to you happiness and luck!!

Well, I’ll try to post more often here, I’ve planned some new post to publish, maybe I’ll write a post about this, sad, 2010.

I invite you to take a look at the new layout, and give me feedback, the site is not finished, but I had to publish, so I’m still working on to improve it, if you want to give me a feedback about this layout, your welcome!

WordPress is, of course, one of the best CMS and blogging platform that your can find actually.

The reasons why use wordpress are a lots : semplicity, easy install, a lots of plugins, big commmunity and , naturally, is free.

Another advantage of this fabulous CMS is that is loved by Google and the other search engines, and , with some modifications and the use of the rights plugins, your blog will be really good indexed in the various search engines, bringing you more users and traffic.

How to make this? Changing something in your blog’s settings and adding some plugin.

First of all you need to change the URL Structure of your blog, when you install wordpress the blog URL structure is this :

http://www.myblog.com/?p=1

This is a good structure but you can improve and use a structure “SEO-friendly”.

Go in the Admin panel of your blog in Settings- permalink and change the permalinks, in my Blogs I use this :

/%category%/%postname%.html

Another good solution may be to add the ID or the date of the post, so you ‘ll give to the search engine an order, and this is better :

/%category%/%post_id%/%postname%.html

One important thing that you must consider when you change your permalink structure is that the search engine will index this pages and is better to not change more this structure, so choose what structure you want to use and never change this.

Although a recent article by Google says that the don’t care about the URL structure and the new algorithm can index without problem all the kind of URL, I’m still conviced that this is still important and improve your posistion in the search engine, and of course you will put keywords in the URL, and this is important for Google and others.

That’s all? No, sure, but from the panel control of wordpress there’s no more to do, wordpress is SEO -ready and the semantic code is loved by Google et company.

Of course there’s another important thing to consider that is important for the positioning : the title of your post.

The title is really important for improve your blog in google (or other search engine) so always, before to write a post, take some minutes to think in the title , how to put (with sense)  keywords in the title, and how to capture the attention of the users with few words.

One good solution may be this : go in google and make a search for the arguments that you’re going to write and  take a look at the first page, look the titles and the keywords used, this is a good way for inspire your title-post.

Of course remember to things : inspire doesn’t means copy-paste, and when you search don’t make the mistake that a lots of users do, don’t think as a SEO when you’re searching, but think like a user that doens’t know nothing about SEO or html.

Other step to improve your index in search engine : the categories. Use alwways the correct categories, if is necessary add a new category, don’t worry if you have a lots of categories, the important is that everty post is in the right category, I can’t put this post in javascript is has no sense, and i can’t use other categories, the only category where this post must be is SEO.

If you have planned, or have ready, articles to publish in your blog, better that starting writing all the post in the same categories, not jumping form on to another. I had my photoshop tutorials and other articles, wrote in my italian blog, so I translated this in english and starting posting here, i’ve started with the photoshop tutorials, how you can see.

I can write this article before, or the jquery sections, but, IMHO, is better start writing all the articles of the same categories and after pass to another category.

This must be considered if you have articles ready to be posted, if your are writing now your articles, there’s no problem but remeber is always a good idea give a sense and a order to your blog.

When you’r writing articles, try always(try no force) to link the previous articles of your blog, like I’ve done in the previous chapter, linking the photoshop section and jquery section, make this in a naturally way, and not force this.

All the links must be naturally, how the SEO says : content is the king. Never force links or text or keywords, everything must be naturally, is the best way to Google and company likes your blog.

If you are familiar with html and wordpress theme, take a look at the theme of your blog, some templates use to put the title in a h2 tag, change this to h1, this is not really important, but h1 is more important than a h2. take a look to the title attribute in the link of the titles post, usually there’s something like this:

permalink to <?php the_title_attribute(); ?>

delete the “permalink to” and leave only the php code.

When you upload an images in your posts , remember always to give it a description, this will be the alt of your images. this is important for usability too.

When you add an external link to your post, put the rel=”nofollow” to the html tag, so the crawler will not follow the link, and don’t leave your blog.

Now, is time to “extend” our blog with some great wordpress plugins for SEO.

1. All in one seo pack.

king of the SEO plugin for wordpress. There’s no words for this plugin, simply download and install, it will add for every word a custom fields for title and the other meta tags, remember for SEO and positioning the tag title is, of course, the most important of the meta tags, be sure always to write a good title tag and put the keywords in this( not like keywords tag, but explain what your  post is about and don’t use more than 60 words).

2. WordPress Related post.

This is another great plugin, because permit you to add some related post at the end of a post. How I said link the posts in your blog is a good way to make the crawler index the pages and , of course, this will be util for your users that maybe want to read more about hte same arguments of the post.

3.Yoast breadcrumb

This plugin is to create the breadcrumb in your navigation, important for the users and for the crawlers to let they know where they are.

4. Pingpress

This is a great plugin. With this plugin you can ping and actualize your profile in a lots of social networks, like facebook or linkedin, automated. Simply sign in in the web site and configure the plugin, everytime you will write a post this will be automatically add in your status in the various social network that you have configured.

5. Social Bookmarking reloaded

This plugin is for add the share buttons in at the end of every post, you know how the social networks are important to drive traffic to your blog, but remember that the best way to drive traffic is write good post, not only to share in all the networks sites in the world.

6. Google Sitemap generator

Plugin for create a google sitemap in xml format, for the google webmaster tools. THis will not improve your position in google, but make faster the index of your site.

7. Sitemap generator

For generate a sitemap in your blog, is not the google sitemap, but a page , like my sitemap in the menu, take a look to understand how it works, I suggest to use this plugin is very useful.

Well… this is all? Not, but for your blog this may be good for improve it in the search engines. Of course if you want to learn and study SEO, this is only a start point and nothing more.

Anyway the most important thing that make the difference in SEO and make a website loved by Google and receive backlinks from other sites, is only one: write great cotnent and posts, this is the oly and best way to make your blog known.

Remember the first rule of SEO is : Content is the king! this phrase is not casually.

A big and boring problem for the designers is the cross-browser compatibility, expecially with the Microsoft explorer, because, as everyone knows, Microsoft is still living in his own world and not in the w3c standard world … Anyway this is one of the most frustrating situation that we must resolve when we are working on a new layout.
The solution used by the designer are : hacks, workaround and different stylesheet for the different browser(usually only the Microsoft browsers).
This last is the solution that I prefer for my works. I’m not a lover of the hacks, because they usually invalidate the code, and for this reason I prefer to use a different stylesheet for the explorer. If you write a good and clean code, you don’t need to change all the styles.
One of the most used solution, that I’ve used too, of course, are the conditional comments, to load the correct stylesheet relative to the user browser.
Another solution, is use a Javascript to detect the browser user and load the correct stylesheet. This is the solution that I want to talk in this post.

The idea is simple, and of course you can do teh same with the most afmous frameworks, but in this case I’m using only and pure Javascipt, anyway the idea is : create a variable that contains tha browser and write in the document the html code to load the stylesheet correspondent to the user browser:

var ievs = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));

// IF BROWSER IS IE 6 LOAD IE6 STYLE

if (ievs){

var iev=new Number(RegExp.$1);

if (iev==6) {

document.write(’<link rel=”stylesheet”  href=”css/ie7style.css” type=”text/css” />’);

}

}

// ID BROWSER IS IE 7 LOAD IE7 STYLE

if (ievs){

var iev=new Number(RegExp.$1);

if (iev==7) {

document.write(’<link rel=”stylesheet”  href=”css/ie7style.css” type=”text/css” />’);

}
}

That’s all! You can try this creating a new page and visit the page using a browser Microsoft , IE 6 or 7, and look how it load the style,or , only for try, you can put and alert to see how it works:

if (iev==6) {

alert(“you are using explorer 6″);

}

Of course the conditional comments are a good solution, I usually use too, but sometimes I prefer this way, but you need to consider that if the javascript is disabled from the browser this script doesn’t works. of course there are very few uers with the javascript disabled today.

And hope that the Explorer 8 is better than the previous and Microsoft one day will understand how is important are the standard and , especially, understand that they are not a standard …..

Bye!

One of the website that I love is facebook. I’m not talking about the social network, well I like this social network, but I prefer twitter and linkedin for “professional use”, but this is another question, because I’m talking about the design.:)

The use of web 2.0 effects and Ajax make this web site on of my favourites.

With this tutorial I will explain you how to create a message mail system like Facebook.

For make this we need to create some files.

1. The index file with the mail form.

2.The mail.php file that process the form and send the mail, using the simple function mail() of php.

3.A css file .

4.Jquery, naturally.

5.An other Javascript, called Ajax.js, to interact with ajax, php and jquery.

Surely you can put all in one file, but, for a better understanding and to have a clean code, I prefer to use different files for each one.

Well first of all you can see a demo of this page here, for logical reason I’ve deleted my mail from the source code, / you can use your mail to test the script) this is the only thing that you need to change before use the source code, the rest is ready for use.

OK, start with this tutorial.  First we need to create the form page and link to this page the jquery and ajax,js script, so this is the code :

<div>
<div id=”response”>

</div>
<form id=”formail” action=”" method =”post”>
<label>Name : </label>
<input type=”text” name=”name” id=”name” />
<label>Your mail :</label>
<input type=”text” name=”mail” id=”mail” />
<label>Subject : </label>
<input type=”text” name=”subject” id=”subject” />
<label>Text :</label>
<textarea name=”text” id=”text” cols=”40″ rows=”10″></textarea>
<input type=”submit” value=”send mail” id=”sendmail” name=”sendmail” />
</form>
</div>

</div>

The div called response, will be util for the validation and the text message after send the mail( or to get the error if the mail script doesn’t work), this div is really important don’t forget this.

Now we need to style this, you can style the form as you want, but the only important thing is that the div response must be in display none :

#response{display:none;}

Is better if you style this and the form, it will look more pretty this is the complete css that I’ve used :

body{
background: #E7E7DC;
font-size: 13px;
font-family: arial;
}
#wrap{
width: 800px;
background: white;
margin: auto;
padding: 10px;
}
#wrap h1{
padding: 10px;
border: 1px solid #ccc;
background: #f8f8f8;
}
.mail{
width:500px;
margin:auto;
}
#formail{
width: 500px;
margin: auto;
}
#formail label{
display: block;
margin: 10px 0;
}
#text{
background: #f8f8f8;
}
#sendmail{
margin-top: 20px;
display: block;
}
#response{
display: none;
border: 1px solid #ccc;
background: #FFFFA0;
padding: 10px;
width: 450px;
}

This is the style of the page, now it comes the nice part, the php and the ajax, this will be funny! Let’s go and create the mail.php page, with this code :

<?php
$mail = $_POST['mail'];
$name = $_POST['name'];
$subject = $_POST['subject'];
$text = $_POST['text'];

$to = “yourmail@domain.com”;
$message =” You received  a mail from “.$mail;
$message .=” Text of the message : “.$text;

if(mail($to, $subject,$message)){
echo “mail successful send”;
}
else{
echo “there’s some errors to send the mail, verify your server options”;
}
?>

Ok, let me explain this:

Firs I create the variables that will contain the froms data values :

$mail = $_POST['mail'];
$name = $_POST['name'];
$subject = $_POST['subject'];
$text = $_POST['text'];

With the variable $to, I store the mail where I want that the mail will be sended( my mail), this is the only thing that you must change to make works the script.

The $message variable get  the mail and the text of the sender, and put in the body of the mail message.

Finally , with tha mail() function from php I send the mail. I’ve used an if because, if the mail doesn’t work you will know.

The mail function is really simple and accept some parameters, the mail where send, the subject and the message of the mail.

You can read all from the official page of php.

Now is the time of the ajax.js. This is the complete code :

$(document).ready(function(){
$(“#sendmail”).click(function(){
var valid = ”;
var isr = ‘ is required.’;
var name = $(“#name”).val();
var mail = $(“#mail”).val();
var subject = $(“#subject”).val();
var text = $(“#text”).val();
if (name.length<1) {
valid += ‘<br />Name’+isr;
}
if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += ‘<br />A valid Email’+isr;
}
if (subject.length<1) {
valid += ‘<br />Subject’+isr;
}
if (text.length<1) {
valid += ‘<br />Text’+isr;
}
if (valid!=”) {
$(“#response”).fadeIn(“slow”);
$(“#response”).html(“Error:”+valid);
}
else {
var datastr =’name=’ + name + ‘&mail=’ + mail + ‘&subject=’ + subject + ‘&text=’ + text;
$(“#response”).css(“display”, “block”);
$(“#response”).html(“Sending message …. “);
$(“#response”).fadeIn(“slow”);
setTimeout(“send(‘”+datastr+”‘)”,2000);
}
return false;
});
});
function send(datastr){
$.ajax({
type: “POST”,
url: “mail.php”,
data: datastr,
cache: false,
success: function(html){
$(“#response”).fadeIn(“slow”);
$(“#response”).html(html);
setTimeout(‘$(“#response”).fadeOut(“slow”)’,2000);
}
});
}

What i’ve done? let me explain :

I suppose that you know the $(document).ready function of jquery, I’ve explained in the previous tutorial, create an animated menu with jquery.

When #sendmail, the submit button of the form,  is clicked will start the validation of the form, this is important try always to validate your forms, expecially for the breakballs(usually called spammer…), so the first part of the script validate the form and if on of the input value is under 0 this will stop the script and return an error like in this image

the text that appears is stored in the #response div, for this reason I said that is important and not only for this.

var valid = ”;
var isr = ‘ is required.’;
var name = $(“#name”).val();
var mail = $(“#mail”).val();
var subject = $(“#subject”).val();
var text = $(“#text”).val();
if (name.length<1) {
valid += ‘<br />Name’+isr;
}
if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += ‘<br />A valid Email’+isr;
}
if (subject.length<1) {
valid += ‘<br />Subject’+isr;
}
if (text.length<1) {
valid += ‘<br />Text’+isr;
}

To validate the mail, I’ve used a regular expression( thanks to Juan Carlos )

if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i))

if you try to write 2 mail addres, this will not works, or if you use white space in the mail field the validation will stop the script. You can try simply leaving white the various fields to understand how it works. All of the error in the validation will appears in the response div, that will appear with a fadeIn effect.

if (valid!=”) {
$(“#response”).fadeIn(“slow”);
$(“#response”).html(“Error:”+valid);
}

The second part of the script is for create the datastr variable, that will store the value from the form and send in the ajax request, and make appear again the #response div, yes how I said is important ejejeje, like the facebook style, that say that the message is sending.

else {
var datastr =’name=’ + name + ‘&mail=’ + mail + ‘&subject=’ + subject + ‘&text=’ + text;
$(“#response”).css(“display”, “block”);
$(“#response”).html(“Sending message …. “);
$(“#response”).fadeIn(“slow”);
setTimeout(“send(‘”+datastr+”‘)”,2000);
}

In the final  part I’ve used a “return false“, so when you click on the submit button this doesn’t do nothing, well it seems that the button doesn’t do nothing, but the reason ts that the rest of the work is done by ajax and the function send :

function send(datastr){
$.ajax({
type: “POST”,
url: “mail.php”,
data: datastr,
cache: false,
success: function(html){
$(“#response”).fadeIn(“slow”);
$(“#response”).html(html);
setTimeout(‘$(“#response”).fadeOut(“slow”)’,4000);
}
});
}

This is the “core” of the script, this will call the $.ajax function of Jquery, give it the parameters and call the mail.php file, finally get the response of the mail.php, and return this in the response div, and after 4 seconds the text fade out.

This script is inspired ,how I said, from facebook message system and it works at the same way, you can use on your own and change or modify the source code.

Demo of the script

Download directly the script.
I hope is useful , you can use the comments and let me know what do you thing.

If you know something to improve the script, let me know pls.

Bye !!

The comments in php are a really important phase of the programming, because they will help you, or other programmer, when you’ll come back to write on the same code after a long time.

An important thing to know is  that their use does not weigh the execution of the script (the PHP interpreter jumps all parties recognizing that comment), or the transfer of the page to the browser (in fact the comments, as contained within the PHP code, are part of what is not sent to the browser).

In php we have the same comments use in the major programming languages, like c++ or python, here some examples :

<?php

// comment style c++

?>

<?php

# comment style python

?>

This kind of comments are only on one line, when the PHP interpreter found this comments jump this part and go directly to the source php code.

But we can also use comments on more than one lines, like this :

<?php

/* this is a comment

on multilines

*/

?>

Be sure that don’t make error when you write a comment, or this will affect your code.

<?php

*/ this is a erroneus comment

*/

?>

<?php

/* this is the correct

way to comment on mutlilines

*/

?>

Simply not? The next time i will start writing code for php, stay tuned!

Jquery is, of course, one the best( or the best) JavaScript framework actually.

With jquery we can create amazing effects on the web pages, writing some few lines of codes, and you don’t need to be an experienced web programmer.

In this post I will show you how to create a nice and simple vertical menu with css and jquery, writing few lines of  code.

You can see the final result at this page, and you can download the complete source code with example from here.
First, download jquery from the official site, and after link it to your document. I’ve chooses to put the source code, for the css style and the javascript-jquery, in another file, you can put all in one if you want, IMHO I think is always better to separate it, it’s your choose.
Create the page and links the javascript file it’s really easy, how I suppose you know :

<link href=”style.css” rel=”stylesheet” type=”text/css”/>
<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/menu.js” type=”text/javascript”></script>

After I’ve created a simple page structure, with the menu,like the “semantic” want,  is  in a  list, in this case unordered :

<div id=”navigation”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Freebies</a></li>
<li><a href=”#”>Tutorials</a></li>
<li><a href=”#”>Downloads</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

Now  style the menu :

#navigation{
width: 200px;
}
#navigation ul{
list-style: none;
}
#navigation ul li{
height: 30px;
border-bottom: 1px dotted #ccc;
}
#navigation ul li a{
text-indent: 20px;
padding: 5px 0;
display: block;
height: 20px;
text-decoration: none;
color: #434343;
background-image: url(bull.png);
background-repeat: no-repeat;
background-position: 5px 6px ;
}
#navigation ul li a:hover{
background-color: #8E8963;
background-image: url(bull.png);
background-repeat: no-repeat;
background-position: 15px 6px ;
color: white;
}

What I’ve done here? Simply :

give to a menu a fixed with, styling the li and the link , give to a link a background image (background-image: url(bull.png); ) and when the mouse is over  (a:hover) , change the background color (not the image) and the link color.

Another thing to note is that I’ve used the backround-position property for the image, so with this I can move the image around  changing the values of the position (X and Y axis) and make this appear aligned with the text.

With Jquery I will “move” and animate the link on the right when the mouse is over, so I need to move the image too, and for the reason that I’ve used the image like background and no like image in the html code, I need to move that when the link will animated, maybe using directly the image in the code the effect will come better, you can try at your own.

Ok now we can go to our javascript and write the jquery-code . Create a new js file and call “menu.js”, write this simple code :

$(document).ready(function(){
var Duration = 150; //time in milliseconds

$(‘#navigation ul li a’).hover(function() {
$(this).animate({ paddingLeft: ’20px’ }, Duration);
}, function() {
$(this).animate({ paddingLeft: ’0px’ }, Duration);
});

});

OK  let me explain this code:

The first thing is to tell to jquery that, when the DOM is loaded ( this is rally important)  :

$(document).ready(function(){
});

This is the first thing that you must learn about Jquery, with this piece of code, you will tell to Jquery this :  “do the instruction only when the entire document is loaded”.

This is great and really usefull because  you don’t have to put any “behavioral” markup in the HTML, and this is the reason why you can separate every Javascript from the document.

After I’ve created the function that must be executed when the DOM is ready :

var Duration = 150; //time in milliseconds

$(‘#navigation ul li a’).hover(function() {
$(this).animate({ paddingLeft: ’20px’ }, Duration);
}, function() {
$(this).animate({ paddingLeft: ’0px’ }, Duration);
});

And it’s all! What it means this? I will try to explain in a simple words :

With the $(), you can get every element of the DOM, an it is like the documentGetElement in the normal javascript.

So I Want that ,when the mouse is over the tag li inside the navigation div, start the animation effect, so I’ll “take” this element with the dollar function

$(‘#navigation ul li a’)

This is the second important thing you must learn on Jquery.

And finally, I’ve used the animation on the menu, using the animate function of jquery, really simple to use, in this case I gave 20px at padding-left css property to make that the text “move” on the right side .

$(this).animate({ paddingLeft: ’20px’ }, Duration);

The $(this) refer to the element that we are using, animate is the jquery function (following the link you can learn more about this function) and Duration is the duration of the time, I’ve used a starting variable to give a value (var Duration = 150; ).

The rest of the code is another function to  ensure that the link returns at the original position.

,function() {
$(this).animate({ paddingLeft: ’0px’ }, Duration);
});

Conclusion : Jquery is the best framework that I’ve ever used, is simple, easy to learn and make the web designer’s life really easy, although you are not a experienced programmer.

Here the link relativies to jquery and maybe utils for this simple tutorial :

Download Jquery

Learn Jquery

The animate function of jquery

Well you can see the final results here :

Simple menu with Jquery.

Download jquery simple menu with example :

Well.. Here we are with this first chapter of a simple guide to php for beginner. Before start I think is good if you know something about the history of this script languages.
Php was “born” in 1994 from Rasmus Lerdor, was composed of a set of macro whose task was to simplify the websites management.

The first step was the expansion of the macro with a packet called form interpreter. From here Php was in continue expansion and now is a one of the most used langues in the websites with a bigger community and over 10.000.000 of server that support php now. The reason of this big expansion are lots. Php is compatible with any reliable php web hosting , is open source, is free, is simple and works perfectly with Apache, the most used web server in the world.

The important thing that you must remember about php, is that this language is server side.

What it means that php is a server side languages?

It means that the language is interpreted from the server, namely the server, through an interpreter, received the php code from the page and returns the html code. indeed if you look at the source code of a php page you will never see php code, but only the html that the server interpreter returns.

This is the difference between php and javascript, for example, that is a client side language, so it depend on the browser user and not from the server.

Php is perfect to work with database like mysql, to create e-commerce sites, administration systems and other more, one of a great example is WordPress, the CMS blogging platform that runs this website.

How to recognize php code? Here an example:

<?php echo “Hello World!”; ?>

This is an example, if you will try this code the page will results this :

Hello World!.

A php tag start always with the “<?php” and end with “?>” you can omit the “php” in the start tag.

Other important thing of the php syntax is the “;” at the end, this means the end of the instruction(never forget, is important!) , this was inherited from the most used languages, like c, java and similar.

Finally the most simple instruction in php, the “echo” that say to the server this : write what is wrote between the ” “.

How I said if you will look at the source code you don’t see the php code, but only the html that the server returns.
Well for the moment I think is good, now you know what is php, how it works and how to start writing code, I think is a good begin.

This is only the first chapter of this php guide for beginner, so … stay tuned for the other chapters.

Hasta Luego!