In this tutorial I want to explain how to implement a simple launching soon page using PHP and jQuery. What's a launching soon page? In general it's a page that informs the visitors of a website under construction about when the website is going to be online and allows them to leave their emails in order to be updated when the website is on-line. A typical launching soon page contains a countdown and a form that collects emails from interested visitors. In this tutorial I implemented a launching soon page like this:

Take a look at the live preview here.

This page is very simple to modify and customize using just some lines of CSS code. You can also add the logo of your company and all elements you want with some lines of HTML code. Download the source code of this tutorial you can customize and reuse in your web project for free!

A little introduction
How I said this package is ready to use and contains these files:

- index.php: the launching soon page final interface (countdow + form)
- config.php: enables database connection
- insert.php: PHP code to add emails into a database table
- js/jquery-1.3.2.min.js: jQuery framework
- js/countdown.js: the countdown script

1. index.php
index.php is the final interface of your launching soon page. How I said it contains a countdown and a form to allow users to leave their emails.

The countdown script
In order to implement the countdown I used this dynamic countdown script that lets you count down to relative events of a future date/time. This future date, while the same for everyone, occurs differently depending on the time zone they're in. The result is here and it's fully customizable changing some lines of CSS code:

The only thing you have to do is to add this line of code in the <head> tag of the page:

Then, in the tag <body> add the following lines of code to display the countdown:

<div id="count_down_container"></div>
<script type="text/javascript">
var currentyear = new Date().getFullYear()
var target_date = new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>

To set a target date you have to change this line modifying July 6 and the hour 0:0:00 with your target date (for example 25 december):

new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")

...if your target date is 25 December the previous line becomes:

new cdtime("count_down_container", "December 25, "+currentyear+" 0:0:00")

If you want to change the style of the countdown you have to modify the following CSS classes:

.count_down{...}
.count_down sup{...}

In particular .count_down{} changes the format of the numbers and .count_down sup{} changes the style of the text "days", "hours", "minutes".

jQuery and the input form
Ok, the countdown is ready! Next step: add this line of code to include jQuery in the <head> tag of the page:

Now, in the tag <body> add a simple form with an input field:

<form id="submit_leave_email">
<input id="input_leave_email" type="text" class="input_bg" value="Add your e-mail address"/>
<button type="submit" class="input_button">Update me</button>
</form>

...and add this layer to display a custom message when an user submit the form:

<div id="update_success">E-mail added!>/div>

...the result after the submission is here:

The form with the input field disappears with a nice fade-out effect and a success message appears in its place. Now, in the <head> tag, after the line of code that includes jQuery, add this script to enable ajax functionalities to insert emails added from users into a database table without reload the page:

$("form#submit_leave_email").submit(function() {
var input_leave_email = $('#input_leave_email').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"input_leave_email="+ input_leave_email,
success: function(){
$("#submit_leave_email").fadeOut();
$("#update_success").fadeIn();
}
});
return false;
});
});

</script>

2. insert.php
insert.php contains some lines of PHP code to insert an email address into a database table. In this example I created a table EMAIL with just one attribute "email". PHP code is very simple:

<?php
if(isset($_POST['input_leave_email'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$email = strip_tags($_POST['input_leave_email']);

$sql = 'INSERT INTO WALL (email) VALUES( "'.$email.'")';
mysql_query($sql);
echo $email;
} else { echo '0'; }
?>

Now, remember to modify your database connection parameters in config.php and upload all files on your testing server. Than load index.php and see the result!

Take a look at the live preview here.

That's all! Download the source code of this tutorial you can customize and reuse in your web project for free! Leave a comment for your suggestions, thanks!

New month, new fonts collection. In this post I want to share with you some interesting fonts to make inspiration for your new websites or design projects. Take a look at this list with ten beautiful and free fonts you can download and use for your commercial/non-commercial projects.

1. 7 Days (download 7 Days)
7 Days is a free font design by Jakob Fischer (PizzaDude) for non-commercial use only. If you like to use the font in any commercial way, contact Jakob before doing it.

2. Caracteres L2 (download Caracteres L2)

3. Twilight (download Twilight)
Do you like vampires? :)

4. Charrington (download Charrington)

5. Elsewhere (download Elsewhere)
Elsewhere is a font Created by Brian Kent you can use for personal use, commercial use, or whatever.

6. Stone (download Stone)
Stone is one of my favourite fonts. It's elegant and versatile for a lot of situations:

7. Stewardson (download Stewardson)
Stewardson Regular is a nice font useful to design elegant headers.

8. Dorkbutt (download Dorkbutt)

9. Bronic Shadow (download Bronic Shadow)
Bronic Shadow is a font created by Daniel Zadorozny. This font may be freely distributed and is free for all non-commercial uses.

10. Copyright Violations (download Copyright Violations)

10 Beautiful and free must have Serif Fonts 10 Awesome typewriter fonts for web designers 10 Interesting fonts for web designers 10 Delicious Free Fonts with commercial-use license 10 Beautiful and free fonts for web designers 5 Beautiful pen-style fonts 10 Fonts to design original logos 10 Handwritten fonts you can't miss

After my previous tutorial that illustrated how to implement a super simple way to work with Twitter API (PHP + CSS) I received a lot of emails from my readers that asked to me to write a post about how to implement a simple Twitter search and display search results in a web page with a custom format. So in this tutorial I want to illustrate how you can implement that using a very useful Twitter Search API for PHP developed by David Billingham.

Using this simple method you can obtain, just in some lines of PHP and CSS code, awesome results like this:

You can download the source code at the following link and reuse it for free in your web projects just in some seconds!

1. A little introduction
In this package you'll find two PHP file:

- index.php: the search page (search form + search results)
- search.php: Twitter Search API for PHP

You have to customize only index.php and your Twitter Search will be ready to be integrated into yor web projects in one minute!

2. Index.php
Take a look at index.php. This page contains a simple search form:

...and some lines of PHP code:

<?php
include('search.php');
if($_GET['twitterq']){

$twitter_query = $_GET['twitterq'];
$search = new TwitterSearch($twitter_query);
$results = $search->results();

foreach($results as $result){

echo '<div class="twitter_status">';
echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';

}

}
?>

$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:

foreach($results as $result){
...
}

... and to get a specific attribute of the array I used this simple code:

$result->name_of_element

The structure of a tweet contains the following attributes (take a look at the Twitter API home page for a full list):

[text]: Text of the current tweet
[to_user_id]: User Id
[from_user]: User name
[id]: Tweet Id
[from_user_id]: User id
[source]: Source of the current tweet
[profile_image_url]: User profile image URL
[created_at]: Date of the current tweet

...so, if you want to display the text of a tweet you can use this code:

$result->text

The following line of code get the text of the current tweet and convert a textual link into a clickable link:

$text_n = toLink($result->text);

That's all! Now download the source code, open and upload all files in your test server, open index.php and try to search for something!
If you have some suggestion, please add a comment!

Super simple way to work with Twitter API (PHP + CSS)Send messages from a PHP page using Twitter API

In this post I want to illustrate a super simple way to work with Twitter API and PHP. In particular, this tutorial explains how to get public updates from Twitter public timeline and display them in a web page with a custom style using CSS. In order to get Twitter updates I used Twitterlibphp (a PHP implementation of the Twitter API) that allows you to take advantage of it from within your PHP applications.

Using this simple method you can obtain awesome results like this:

You can download the source code at the following link and reuse it for free in your web projects (you need PHP and APACHE):

1. A little introduction
Twitterlibphp returns Twitter timeline in XML format and with this structure (take a look at the Twitter API home page for a full list of available nodes.):

status

created_at
id
text
source
user

name
screen_name
description
profile_image_url
url
followers_count
...

...

So, if you want to display the user image, user status, and status date in your timeline you have to choose the following nodes:

But how you can display them? It's very simple! Take a look at the following code!

2. PHP code
Create a new file twitter_status.php and copy and paste the following code:

<div class="twitter_container">
<?php
// require the twitter library
require "twitter.lib.php";

// your twitter username and password
$username = "your_username";
$password = "your_password";

// initialize the twitter class
$twitter = new Twitter($username, $password);

// fetch public timeline in xml format
$xml = $twitter->getPublicTimeline();

$twitter_status = new SimpleXMLElement($xml);
foreach($twitter_status->status as $status){

foreach($status->user as $user){
echo '<img src="'.$user->profile_image_url.'" class="twitter_image">';
echo '<a href="http://www.twitter.com/'.$user->name.'">'.$user->name.'</a>: ';
}

echo $status->text;
echo '<br/>';
echo '<div class="twitter_posted_at">Posted at:'.$status->created_at.'</div>';
echo '</div>';
}
?>
<div>

How you can see, the previous code is very simple to understand. The line:

$xml = $twitter->getPublicTimeline();

get the 20 most recent public statuses posted. You can also use other functions such as:

getFriendsTimeline(): returns the 20 most recent statuses posted by the authenticating user and that user's friends.

- getUserTimeline(): returns the 20 most recent statuses posted from the authenticating user.

getReplies(): returns the 20 most recent @replies (status updates prefixed with @username) for the authenticating user.

Take a look at twitter.lib.php for the full list of available functions.

If you want to display different information, for example the source of the update (status->source) use this code:

$status->source

...or if you want to display the number of followers of the current user (follower_count) use this code:

$user->followers_count

3. CSS Code
Now you can customize the style of your timeline using CSS code. I used the following classes but you can customize the look how you prefer:

.twitter_container{

color:#444;
font-size:12px;
width:600px;
margin: 0 auto;

}
.twitter_container a{

color:#0066CC;
font-weight:bold;

}
.twitter_status{

height:60px;
padding:6px;
border-bottom:solid 1px #DEDEDE;

}
.twitter_image{

float:left;
margin-right:14px;
border:solid 2px #DEDEDE;
width:50px;
height:50px;

}
.twitter_posted_at{

font-size:11px;
padding-top:4px;
color:#999;

}

That's all! Download the source code, open twitter_status.php, change $username and $password with your Twitter username and password and upload the file in your test server.
If you have some suggestion, please add a comment!

Simple PHP Twitter Search ready to use in your web projects Send messages from a PHP page using Twitter API Twitter API: How to create a stream of messages Monitter-like with PHP and jQuery

After my previous posts about how to implement a news ticker with MooTools I received a lot of emails from my readers that asked to me to implement a similar feature with jQuery, including fade in and fade out effects, in the simpler possible way. So in this post I want to illustrate you how to implement a nice news ticker using jQuery and just ten lines of Javascript code. The result is something like this:

I suggest you to take a look at this live preview and download the source code to understand how it works. In the source code I added a file called base.html that contains the basic structure of this ticker you can quickly reuse and customize in your web project.

A little introduction
Step 1: image to have a <ul> list with ID = listticker. This list contains some list elements <li> (in this case: My News 1, My News 2, ...). First step is: get the first element of the list, save its content into a var and remove it using a fade out effect.

You can get the HTML code contained into the first element of the list (#listticker) and assign it to a var (first) using this simple code:

first = $('ul#listticker li:first').html();

To use fade out effect and remove the element you can use this code:

.fadeOut('slow', function() {$(this).remove();});

Step 2: now you have to add the content saved into the var first to the end of the list:

You can use this simple code:

$('ul#listticker').append(first)

...where first is the var you used to save the content of the first element in the step 1.

Step 3: Now you have to move up the content of the list (My News 2 is now the first element of the list) and repeat the entire process from the step 1.

In Javascript code section of this tutorial I used setInterval() to repeat the process every 3 seconds (3.000 milliseconds). Ok, now take a look at HTML and Javascript code.

HTML Code
HTML code is really simple. The only thing you have to do is adding an <ul> list with ID = listticker and some list elements:

</ul>

Remeber to add into the tag <head> of the page where you want to implement this ticker a link to jQuery:

Javascript Code
Take a look at the follow code. I implement 2 functions removeFirst() and addLast(). Each function contains five lines of code. Total lines for "conceptual" code: 10 lines! I promised! :)

function removeFirst(){

first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);

}
function addLast(first){

last = '

first+'';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')

}

interval = setInterval(removeFirst, pause);
});</script>

In the last line I used:

interval = setInterval(removeFirst, pause);

...it calls the function removeFirst()every 3 seconds (3000 milliseconds) and in this way I create ad infinite loop.

If you have suggestions to improve the code please leave a comment. Thanks!

News ticker with horizontal scrolling
Fantastic News Ticker Newsvine-like
Automatic news ticker with vertical scrolling and Start/Resume options Joomla! extension: super news ticker

Are you an Adobe Flash developers? In this post you can find some really interesting Flash frameworks and graphical engines that help you develop quickly complex Rich Internet Application and Flash-based games. This list includes graphic UI elements, Flash and Flex components, a physical engine and an open source component to create isometric games with Flash.

Gaia Framework

Gaia is an open-source front-end Flash Framework for AS3 and AS2 designed to dramatically reduce development time. Gaia is targeted at anyone who develops Flash sites. It provides solutions to the challenges and repeated tasks we all face with front-end Flash site development, such as navigation, transitions, preloading, asset management, site structure and deep linking. It provides speed and flexibility in your workflow and a simple API that gives you access to its powerful features. For an example of Gaia-made website take a look at Inglorious Basterds Official Site.

Progression

Progression is a real powerful framework for Adobe Flash with focus on your creative work. You can just focus on user experience matter, how to transit, what dramatical effects you want to provide for your UI. Progression supports wide range of developing styles - from traditional timeline-based style to stylish class-based style. Progression packages all necessary functions of Web site development as component. You can develop web site using the component by drag & drop on the stage.

Yahoo! ASTRA

Yahoo! ASTRA, is an ActionScript Toolkit for Rich Internet Applications. It provides a collection of Flash and Flex components, code libraries, toolkits and utilities developed by Yahoo! for ActionScript developers.

ARP
ARP is an open source pattern-based Rich Internet Application framework for the Adobe Flash Platform. ARP currently supports Adobe Flash and Flex-based RIA development in AS 2 and AS 3 and is designed to be simple to use and lightweight.

JSwiff
The aim of the JSwiff project is to create an open source, pure Java framework for Macromedia Flash file creation and manipulation.

PushButton

The PushButton Engine is an Open Source, Flash game engine and framework that's designed for a new generation of games. PushButton Engine makes it easy to bring together great existing libraries and components for building Flash games. Spend less time on code, more time on building fun games.

Fisix Engine
The Fisix Engine is a 2D verlet physics engine for Flash. It is written completely in AS3 in order to make use of flash player 9’s improved cpu capabilities. Although Flash is still slower than platforms such as c/c++, or java, which means that you most likely won’t be able to make the next Half-Life in flash, it doesn’t mean you can’t do really cool stuff with 2D particles, constraints, rigid bodies, etc. and make great looking games and simulations. Take a look at the demo here. The result is really awesome.
FFilmation
FFilmation is a really impressive, open source, Flash Engine to create isometric locations for Flash-based games.