Archive for the ‘Web’ Category

Creating Web Albums with gThumb

Posted by Éverton Arruda in Free Software, Linux, Planet INdT, Planet PSL-AM, Tutorial, Web on December 4th, 2009

If you want to create a web album with some images you have in your computer, with Linux as your OS, i recommend you to use gThumb.

gThumb is, as said in WikiPedia (http://en.wikipedia.org/wiki/GThumb):

… an open-source image viewer and organizer for the GNOME desktop environment released under the GNU General Public License. It was originally based on GQView, and is designed to have a clean, simple interface.

gThumb Homepage: http://gthumb.sourceforge.net/

INSTALLING GTHUMB:
I’m using Ubuntu 9.04, named Jaunty Jackalope, to write this tutorial, so the installation process is very simple, all you have to do is run:

1
# aptitude install gthumb

This should work the same way for Debian GNU/Linux, but if you’re using another distro Linux, you might have to compile gThumb.

CREATING WEB ALBUM:
When you run gThumb you’ll see this interface:

gThumb Interface

I mapped it to make it easier to follow:

gThumb Interface Mapped

The steps to create the Web Album are:
1 – Create directory to keep the images:
First create a directory and put the images you’d like to be in the album in it.

2 – Open directory with gThumb:
In gThumb interface, select the directory in which the images are (#1 in MAP)

3 – Select the images you’d like to show in the album:
After opening the directory, which contains the images, you’ll have to select the images you’d like to show in the album (#2 in MAP)

4 – Open the “Create Web Album” window and configure it:
Now, with all images selected, go to Tools > Create Web Album (#3 in MAP)
Then you should see a window like this:

gThumb Web Album Interface mapped

This is where you’ll configure your web album. The options are:

#1 – Where the web album files will be saved.
#2 – The name of the page, i recommend you to leave it as it is.
#3 – How many images per line and per column will be shown.
#4 – The title of the page, or header message, if you preffer.
#5 – The footer message of the page.
#6 – The theme that will be used in the web album.

The other options are not so important for me, so i didn’t put them in here.

In the end, you’ll have something like this: http://am.softwarelivre.org/galeria/fedora12releaseparty/

:wq

Tags: , , ,

No Comments


GooSH.org, my new start page

Posted by Éverton Arruda in Free Software, Linux, Planet INdT, Planet PSL-AM, Web on September 25th, 2009

A friend sent me a link to a webpage, the link was: http://goosh.org. Right after accessing the webpage i decided: “This is going to be my new start page”.

GooSH stands for Google Shell, it is an unofficial Google Product. Written by Stefan Grothkopp, it simulates a Unix Shell with access to some Google Products, simply fantastic!

I recommend it for everyone!

Tags: , , ,

1 Comment


Shock ‘n’ Roll with FireFox 3.5

Posted by Éverton Arruda in News, Planet INdT, Web on June 30th, 2009

FireFox 3.5, named ShiretokoShock, is out!

Get it at: http://bit.ly/ShiretokoShock

See also the Shiretoko Shock Campaign: http://www.spreadfirefox.com/shiretokoshock-campaign

Tags: , , ,

No Comments


[JavaScript+CSS+PHP] Changing style of actual menu link

Posted by Éverton Arruda in Planet INdT, Tutorial, Web on June 24th, 2009

I was looking for a way to change the style of the actual menu link (the last clicked link in the menu), so that the user could know what page he is seeing, or the last link he clicked. My first attempt was to use only CSS, but i didn’t find anything. Then i read somewhere that it was not able to what i wanted only with CSS, that i needed JavaScript to do it. Well, i’ve done it and here i’ll teach how to do it:

The first thing we have to do is to create the menu and it’s style:
Style:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#menu {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    padding: 10px;
    text-align: center;
    width: 300px;
}

#menu a {
    padding: 10px;
    text-decoration: none;
    margin: 0px 5px;
    color: black;
    background-color: "white";
}

#menu a:hover {
    text-decoration: underline;
}

Note that i didn’t set the a:visited style.

Menu:

1
2
3
4
5
<div id="menu">
    <a id="link1" href="<?php $_SERVER['php_self'] ?>?p=link1">link1</a>
    <a id="link2" href="<?php $_SERVER['php_self'] ?>?p=link2">link2</a>
    <a id="link3" href="<?php $_SERVER['php_self'] ?>?p=link3">link3</a>
</div>

Now we have our menu, but it’s still not showing what is the actual menu link, so we will need a function that will change the style of the actual menu link:

Javascript Function:

1
2
3
4
5
function setActualLink(item)
{
    item.style.backgroundColor = "black";
    item.style.color = "white";
}

Now that we have the function it’s necessary to make it be executed after the menu is loaded, adding this line:

1
<script>setActualLink(<?php echo $p; ?>);</script>

You could also create a class for the actual menu link and assign the class to the actual menu link, instead of setting the styles directly inside the javascript function, as shown below:

Actual Menu Link Class:

1
2
3
4
#menu a.actualLink:visited {
    background-color: black;
    color: white;
}

And the javascript function would change to:
JavaScript Function:

1
2
3
4
function setActualLink(item)
{
    item.className = "actualLink";
}

You can see the examples in the links below:
Using class
Not using class
The php codes are commented in the source.

Remeber that the pages must be .php .

:wq

Tags: , , , , ,

3 Comments



SetPageWidth