Searching for something of information in Google, I found the TwitterGitter Plugin in the blog of David Walsh, with a useful method to reach the tweets directly in my Twitter account (gg4rc14m). It takes advantage of the JSON format to obtain information. This JSON information is given directly by Twitter, so we can use it in our own code and put our tweets wherever we want.

To make it works we have to follow the next steps:

Download the following files:

• Aaron Newton’s JSONP plugin that you can download here.
• The twitter.js file where the code to present the tweets are.

And to put the tweets in your own style, the following css:

#tweets-here	{
padding: 5px 5px;
font-size:10px;
color:#FFF;
border-bottom-width:1px;
border-right-width:1px;
border-bottom-style:solid;
border-right-style:solid;
border-bottom-color:b6c8dc;
border-right-color:b6c8dc;
}
.tweet	{
padding:5px 10px;
height:50px;
clear:both;
margin:5px 0;
background-color:#000;
opacity: 0.6;
filter:alpha(opacity=60);
}
.tweet img	{ margin-right:10px; }
.tweet strong	{ color:#CCC; }
.tweet span	{ font-size:8px; color:#666; }
.clear	{ clear:both; }

I added functionality to the twitter button in the up right part of the website to show the tweets (using the same Mootools code to move between the different sections). We only need to push the button and all the content goes down to show the tweets.

In the main html page we only need to add a div whose name has to match up with the one in twitter.js.

Here is the example running in the jsFiddle platform.

So, a nice way to show a little bit more the presence in the twitter world.

The main problem was that the images were loaded very slowly and a visitor could perfectly see the different layers and even the different building halfcutted! That was really ugly and I was trying to find enough time to implement the necessary changes to prevent this to happen.

The solution I needed was a preloader to show some charging bar and/or numbers while the images are loaded at the beginning. As I’m trying to do a non-Flash page (just to experiment, I really like Flash…), I searched a way to do the preloader with Javascript. The two main options I found to implement it were with jQuery and with Mootools. I choosed jQuery because I haven’t ever done anything with jQuery and I want to learn as much as posible (this is the main reason of the web page and the blog…).

Searching, I found the QueryLoader, a preloader of the website Gaya Design and decided to use it. It’s really easy to use and in the website you can find every information to use it. If you want to use it, you only need their instructions and is very easy.

But I had a problem. As I developed my website (Gonzalo Garcia) using Mootools (the movements effect, mostly), when I tried to add the jQuery code for the preloader the movement effect with Mootools didn’t worked. I didn’t knew why this was happening but after try a lot of things I realized that the problem was between the diferent Javascript I was using.

I didn’t knew there’s problems when you use diferent Javascript frameworks, exactly between jQuery and Mootools. Now sounds pretty logical, but in that moment didn’t do it. The main problem is when you use both frameworks, there’s a conflict in the way the navigator understands the code.

To avoid this, we have to use the jQuery.noConflict() function. This function avoid conflicts between the both frameworks.

An example. If we have the following code:

$(document).ready(function(){
$(".btn-slide").click(function(){
$("#slide_top-sidebar").slideToggle("slow");
$("#slide_top-subsidebar").slideToggle("normal");
});
$("#slide_top-sidebar").css({ display: 'none', });
$("#slide_top-subsidebar").css({ display: 'none', });
});

To make it compatible with Mootools we have to use the jQuery.noConflict() function and then we change the $ character for jQuery, and the new code would be this one:

jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".btn-slide").click(function(){
jQuery("#slide_top-sidebar").slideToggle("slow");
jQuery("#slide_top-subsidebar").slideToggle("normal");
});
jQuery("#slide_top-sidebar").css({ display: 'none', });
jQuery("#slide_top-subsidebar").css({ display: 'none', });
});

After doing this all the problems were solved and the aspect of the web page (Gonzalo Garcia) is really better now.

I’ve used the Google Weather App that determines the weather and offers data to use it with a little bit code. This code is the following:

xpath("/xml_api_reply/weather/forecast_information");
$current = $xml->xpath("/xml_api_reply/weather/current_conditions");
$forecast_list = $xml->xpath("/xml_api_reply/weather/forecast_conditions");
?>

<!-- obtiene el nombre de la ciudad -->
city['data'];
$posicion= strpos($cadena,",");
$ciudad= substr($cadena,0, $posicion); ?&gt;
<div id="weather"><span style="color: #ffffff;">
<table>
<tbody>
<tr>
<td width="70">Location</td>
<td width="40">Temp</td>
<td colspan="2" width="70">Conditions</td>
</tr>
<tr>
<td><strong> </strong></td>
<td>temp_c['data']) ?&gt;° C</td>
<td>condition['data']) ?&gt;</td>
<td><img src="&lt;?= 'images' . $current[0]-&gt;icon['data']?&gt;" alt="weather" width="26" height="26" /></td>
</tr>
</tbody>
</table>
</span><span style="color: #ffffff;"> </span>

</div>

$xml = simplexml_load_file('http://www.google.com/ig/api?weather=berlin&oe=utf-8&hl=en');

'&oe=utf-8&hl=en'

$cadena=$information[0]->city['data'];
$posicion= strpos($cadena,",");
$ciudad= substr($cadena,0, $posicion);

<strong> </strong> temp_c['data']) ?&gt;° C condition['data']) ?&gt; <img src="&lt;?= 'images' . $current[0]-&gt;icon['data']?&gt;" alt="weather" width="26" height="26" />

I open this blog to use it as a lab for my experiments with web design and web development. I will often use my web page to do this experiments, but not only.

I hope this will be useful for me and for other people who starts from scratch like me!!

Good luck!!