wdlog

History of the Internet

January 15th, 2009 / No Comments » / by António Lopes

History of the Internet from PICOL on Vimeo.

Posted in: G33k

Tags: history, internet, video, vimeo

How to fade all the pages with jquery.

November 21st, 2008 / 6 Comments » / by António Lopes

This page ‘fade in effect‘, is the result of a combination between CSS and JavaScript techniques. Basically you hide all the content of the page, and, when the page is completely loaded inside the browser, you trigger an automatic fadeIn().

In order to achieve this, you have to follow some easy steps.

On the main #container of your page add the tag “style“ with the property “display“ as “none“. 

<div id="container" style="display:none;">

Just before the </body> tag add the following code

<script type="text/javascript">
$(document).ready(function(){
	$(document).ready(function () {
		$('#container').fadeIn(800);
        });
});
</script>

Note: Don’t forget to add jQuery library into the header.      

Does this affect how information is indexed by search engines ?

Apparently it doesn’t.

Some seo specialists agree on the fact that, all elements using “display:none;” are ignored by search engine spiders. If you stop and think about that, it actually makes some sense because it prevents people from adding hidden keywords/links with the objective of improving their page rank.

After a couple weeks of testing with Google webmaster tools I didn’t notice any kind of problems regarding content indexing. Just ”don’t be evil“.

 
Live demo | Download sample code | Example website

Posted in: Tutorials, jQuery

Tags: fadein, jQuery, page effects

jQuery image gallery with fade in, fade out, and delay.

November 19th, 2008 / 4 Comments » / by António Lopes

Did you ever tried to develop a jQuery based image gallery? Easy stuff, right… but what about the delay between transitions? Here is how you can do it:

- Place jquery and jquery.innerfade.js into your page header.

- Place all the images inside a div.

Example:

<div id="my_gallery">
<img src="image_path1" alt="my alt 1" />
<img src="image_path2" alt="my alt 2" />
<img src="image_path3" alt="my alt 3" />
</div>

- Place the JavaScript code in the bottom of your page.

Example:

<script type="”text/javascript”">
$('#my_gallery').innerfade({
            speed: 'slow', 
            timeout: 4000, 
            type: 'sequence', 
            containerheight: '209px' 
         }); 
</script>

Live Demo and Download

Posted in: Development, Tutorials, jQuery

How to setup a LAMP environment with xdebug under ubuntu

September 19th, 2008 / 3 Comments » / by António Lopes

First of all, we need to setup the lamp (linux+apache+mysql+php) environment.

So, fire up the terminal and type:

sudo apt-get update
sudo apt-get upgrade

If you don’t know which version of Ubuntu you are running, just type:

cat /etc/issue

If you are using ubuntu 6.06 you just need to run.

sudo apt-get install apache2 php5-mysql libapache2-mod-php5 mysql-server

If you are under anything more recent that 6.06

sudo tasksel install lamp-server

After this we need to install xdebug.

sudo apt-get install php5-xdebug

To activate and configure xdebug, we need to edit php.ini

nano /etc/php5/apache2/php.ini

In the end of the file, just add

xdebug.remote_enable=On
xdebug.remote_host="localhost"
xdebug.remote_port=9000
xdebug.remote_handler="dbgp"

If you are developing from another computer, we need to specify that ip address under xdebug.remote_host.

We restart the server

sudo /etc/init.d/apache2 restart

And we are done.

Posted in: Development, Tutorials, php

Tags: lamp, php, web development, xdebug