quinta-feira, 30 de outubro de 2008

Atualizar Ubuntu 8.04 para 8.10

Pessoal,

Foi lançada a nova versão do Ubuntu (Ubuntu 8.10) no site http://www.ubuntu.com.

O Ubuntu 8.04 não dará a opção de atualizar versão por padrão, então, para atualizar o seu Ubuntu 8.04 para a versão 8.10, faça o seguinte:

Acesse no menu:

Sistema -> Administração -> Canais de Software

Acesse a aba "Atualizações" e mude a opção "Atualização de lançamento" para "versões normais".

Feche e acesse no menu:

Sistema -> Administração -> Gerenciador de atualizações

A opção de atualizar para a versão 8.10 aparecerá para você.

Abraços, espero ter ajudado!

sábado, 25 de outubro de 2008

Layout CSS, Aula 2 - Altura do DIV ocupando 100% da página

Saudações,

Vamos dar continuidade à criação de uma estrutura para uma página web utilizando CSS.

No último post nós criamos a DIV principal e alinhamos no centro da página.
Agora vamos fazer com que essa DIV ocupe 100% da página na vertical.

Segue abaixo um vídeo que eu criei explicando, na prática, como fazer.


Agora vou explicar passo a passo como foi feito.

Onde paramos.

Bom, para relembrar, o Layout da página web que estamos tentando montar com CSS seguirá a estrutura abaixo:



O código até onde nós já fizemos é o seguinte:



Como dito antes, nós já temos a DIV principal e ela já está alinha no centro da página.

Para utilizar o CSS de forma mais adequada, eu substituí o parâmetro "class", do tag DIV por "id". Pois como o CSS que será definido para a DIV principal será utilizado apenas nela, podemos então usar id.

Para fazer essa alteração, tive que alterar, também, o seletor "." (ponto) do CSS por "#".

Conforme figura abaixo:



Definindo a altura da tag.

Para definir a altura de uma tag utilizamos a propriedade height (altura).
Em tese, tudo que deveríamos fazer para nossa DIV principal ocupar 100% do navegador seria colocar sua propriedade height como 100% (height: 100%;).
Mas isso não será o suficiente, vou explicar o porque.

Ao utilizar porcentagem como parâmetro para a propriedade height, estamos definindo o quanto da altura da tag pai estaremos ocupando.
Se você reparar, a tag DIV está dentro da tag BODY, que por sua vez está dentro da tag HTML. Então height: 100% na tag DIV quer dizer que ela utilizará toda a altura disponível dentro da tag BODY.
Como a tag BODY não tem uma altura definida, ela recebe por padrão o valor "auto", que quer dizer que ela usará a altura necessária para envolver os textos, imagens, etc dentro de suas tags filhotes. Portanto, a tag DIV não conseguirá utilizar muito espaço dessa forma.
Para chegar ao resultado que queremos devemos definir, além da tag DIV, a altura da tag BODY e da tag HTML como 100%, assim a tag DIV conseguirá utilizar 100% da página.

A figura abaixo ilustra essa situação:



E essa outra figura demonstra como ficou o código até agora, com as tags HTML, BODY e DIV (id='principal') com altura 100% (inseri cores de fundo para ficar mais fácil a visualização e bordas esquerda e direita, retirei a borda total):



Definindo a altura mínima (min-height).

Nosso código já está bem próximo do efeito esperado, mas ele ainda possui uma falha (que não será percebida se você estiver utilizando Internet Explorer 6 ou inferior).

Se digitarmos muito texto dentro da tag DIV a ponto de que o texto exceda a altura dela, perceberemos que o navegador expande sua área de visualização mas a tag DIV não acompanha, então parte do texto ficará fora da tag.

Para fazer com que a altura da tag DIV acompanhe o texto dentro dela, precisamos definir a propriedade height da tag DIV principal como "auto" (height: auto;).
Mas, ao fazer isso, nossa tag deixará de ocupar 100% da altura do navegador.

Para fazer com que ela volte a ocupar 100% do navegador e continue acompanhando o texto caso ele seja maior do que ela, podemos utilizar a propriedade min-height (altura mínima).

Se definirmos min-height: 100% e height: auto estaremos fazendo com que a tag DIV ocupe, no mínimo, 100% da altura inicial e, caso o texto ultrapasse essa altura, ela o acompanhe.

Seria perfeito se não fosse pelo fato de que o Internet Explorer não reconhece, ainda, a propriedade min-height do CSS (a maioria dos demais navegadores já trabalham com ela).

Para solucionar o problema eu encontrei dois métodos.

O primeiro seria utilizar a propriedade _height: 100%;
Que funciona como uma espécie de hack para adicionar altura mínima no Internet Explorer. Mas eu ouvi comentários de que essa propriedade não é reconhecida pelo W3C, então você não conseguirá validar seu código CSS se estiver utilizando ela.

Outra seria utilizar o código abaixo:

* html #principal {
height: 100%;
}

Que define altura como 100% apenas para o navegador Internet Explorer. Parece que existe uma convenção de que, ao utilizarmos o seletor "* html" estamos nos referindo a propriedades que só serão utilizadas pelo Internet Explorer.

Bom, sendo assim, segue abaixo nosso código final:



Bom, por enquanto é só.
Já temos nossa DIV principal alinhada no centro da página e utilizando 100% da altura disponível no navegador.
No próximo post sobre o assunto faremos as DIV's internas, ensinando como alinhar uma ao lado da outra e, também, utilizaremos a técnica chamada faux columns.

Até lá!

Links relacionados:

segunda-feira, 20 de outubro de 2008

Layout CSS, Aula 1 - Como alinhar um DIV no centro da página

Saudações,

A proposta nesse tópico é ensinar como criar um layout simples para uma página web utilizando CSS.
O resultado final será um layout com uma estrutura similar a da figura abaixo:



Onde temos um espaço na parte superior para o logotipo, outro na parte inferior esquerda para o menu e outro para o conteúdo.

Para fazer isso utilizarei três posts, cada um com um assunto específico.

O assunto deste primeiro post será "Como alinhar um DIV no centro da página".
Onde criaremos o DIV principal que conterá toda a estrutura do site dentro dele.

Para ajudar no entendimento gravei um vídeo, mas mesmo assim vou colocar abaixo as instruções passo a passo, pois nem sempre da pra ler no vídeo os textos.

Segue abaixo o vídeo:



E agora vamos ao tutorial:

Criando a estrutura básica.

Primeiramente eu criei a estrutura simples de um HTML e inseri um DIV com a classe 'principal' dentro do corpo da página (body).
Criei um CSS para se referir a esse DIV adicionando borda e largura a ele, o código ficou assim:



Eliminando espaços entre o DIV principal e o corpo da página.

Com isso temos o DIV, vamos agora ajustar a margem do corpo da página para não haver espaço entre o DIV e o BODY.
Para isso vou adicionar um novo bloco CSS, definindo a margem para a tag body como 0px.
Conforme figura abaixo:



Agora tudo que nos resta fazer nesta primeira lição é alinhar o DIV no centro da página.

Alinhando o DIV no centro.

Para isso. em alguns navegadores, basta definir o tag body com text-align igual a center.
Isso funciona em algumas versões do Internet Explorer, segue exemplo na figura alinhei o texto dentro do body como centralizado e, dentro da tag div, tornei a alinhá-lo a esquerda):



O código acima ainda não funciona em alguns navegadores, para solucionar esse problema o truque será adicionar margens automáticas ao div principal (margem esquerda e direita), como mostra a figura abaixo:



Pronto!
Com isso já teremos nosso DIV alinhado no centro da página!

Por enquanto vou ficando por aqui, espero ter ajudado!
Criarei mais dois posts sobre o assunto para concluir a estrutura do layout mencionada no começo do tópico, serão eles:

Layout CSS, Aula 2 - Altura do DIV ocupando 100% da página
Layout CSS, Aula 3 - Alinhando um DIV a esquerda do outro

Até lá!

Links relacionados:

domingo, 19 de outubro de 2008

Configurar Ubuntu 8.04 para resolução 1024 x 768

Saudações mais uma vez,

Quando instalei o Ubuntu pela primeira vez (versão 7.04) não havia conseguido configurá-lo para trabalhar com a resolução 1024 x 768 do monitor.
Quando lançou a versão 8.04 instalei ele de novo e, novamente, a máxima resolução que eu conseguia era 800 x 600.

Tentei alterar o arquivo xorg.conf e também utilizar aquele comando que configura uma série de dispositivos via shell mas nada feito.

Foi então que encontrei em um fórum um comando que solucionou meus problemas, portanto, se você está enfrentando a mesma situação, tente o seguinte comando para configurar a placa de vídeo e o monitor:

# sudo displayconfig-gtk

No meu caso, foi só ajustar o monitor e a opção de 1024 x 768 já ficou disponível.

Segue abaixo o link onde consegui o comando:

http://ubuntuforum-br.org/index.php?topic=35834.0

[]s!

sábado, 18 de outubro de 2008

Ubuntu 8.10 será lançado em breve

Saudações a todos,

Estava dando uma olhada em alguns sites na internet e descobri que dia 30 de outubro será lançada a nova versão do Ubuntu! O Ubuntu 8.10.
Já está disponível a versão beta para download no endereço:

http://www.ubuntu.com/testing/intrepid/beta

Vou aguardar ansiosamente pela versão final!

Enquanto isso, coloquei o contador com a contagem regressiva para o lançamento no menu do blog. Faça isso no seu site também e ajude a divulgar, acessando o endereço:

http://www.ubuntu.com/getubuntu/countdown

[]s!

quinta-feira, 16 de outubro de 2008

Open Hack 2008 - Yahoo! Brasil


Dias 8 e 9 de novembro vai acontecer no Centro Universitário Senac, campus Santo Amaro (SP), o Hack Day da Yahoo! Brasil.

Segue abaixo texto do panfleto:

"O que é?

O Yahoo! Open Hack Day é um encontro de desenvolvedores e estudantes de TI promovido pelo Yahoo! Brasil.
Durante dois dias sem intervalos, os participantes estarão reunidos em uma grande celebração para exercitar suas mentes, criar novos aplicativos e serviços baseados nas plataformas do Yahoo! e ampliar suas redes de contatos.

Serão 24 horas seguidas de muito trabalho e diversão que vão premiar os autores dos melhores projetos e quatro categorias:
  • BOSS:
    Plataforma aberta de web services do Yahoo! Search para você construir produtos de busca com base na indexação do Yahoo!

  • SEARCHMONKEY:
    Nova plataforma aberta do Yahoo! Search, para você usar dados estruturados, conhecidos como micro formatos, e tornar os resultados do Yahoo! Search do jeito que você quiser.

  • YAHOO! BLUEPRINT MOBILE:
    Plataforma de criação de widgets para celulares com suporte a múltiplos dispositivos e sistemas operacionais.

  • CATEGORIA LIVRE:
    Use a imaginação e crie um projeto inovador usando os recursos de todas as plataformas do Yahoo!"
Esse evento é inédito na América Latina.

Endereço: Av. Engenheiro Eusébio Stevaux, 823 (altura do número 22.200 da Av. Nações Unidas).

Inscreva-se em HACKDAY.ORG.

Sites relacionados:

terça-feira, 14 de outubro de 2008

Configurando o GRUB, gerenciador de boot do Linux

Bom, vamos dizer que você instalou o Linux mas gostaria que o Windows ainda ficasse como a opção padrão na hora de iniciar o computador (boot).

Na maioria das distribuições Linux, o programa que é utilizado para gerenciar a inicialização do computador (qual sistema irá iniciar, etc) é ou o GRUB, ou o Lilo.
Nesse post vou mostrar como configurar a tela de menu do GRUB (imagem abaixo).



Para editar a tela de menu do GRUB é bem simples, basta editar o arquivo (precisará de permissões de administrador):

/boot/grub/menu.lst

Para isso, basta usar qualquer editor de texto, por exemplo:

# sudo gedit /boot/grub/menu.lst

Ou

# sudo vim /boot/grub/menu.lst

No final desse arquivo você encotrará blocos de texto como estes:

title Microsoft Windows XP Home Edition
root (hd0,0)
savedefault
makeactive
chainloader +1

title Ubuntu 8.04.1, kernel 2.6.24-19-generic
root (hd0,2)
kernel /boot/vmlinuz-2.6.24-19-generic root=UUID=78c2a245-185e417e-8871-d5e3d6f6e4e7 ro quiet splash locale=pt_BR

initrd /boot/initrd.img-2.6.24-19-generic

quiet


Para alterar a ordem de exibição dos itens do menu basta trocar a ordem deles no arquivo.

Para escolher qual sistema operacional será o padrão na hora da inicialização você tem duas opções:

A primeira é escrever a linha "savedefault" no sitema operacional desejado. Como estava no exemplo que eu coloquei acima.

A segunda opção é alterar, la no começo do arquivo, a linha:

default 0

Colocando o número do item que deseja definir como padrão (lembrando que a contagem começa do zero).

Nesse arquivo você pode configurar também o tempo padrão para exibição do menu (em segundos), alterando o valor na linha (está localizada, geralmente, no começo do arquivo):

timeout 10

Após efetuar as alterações desejadas, basta salvar o arquivo (lembrando que é bom sempre fazer um back-up antes de alterar um arquivo de sistema).

Espero ter ajudado,

[]s.

sábado, 11 de outubro de 2008

Converter inteiro para hexadecimal em java

Há uns tempos atrás eu estava criando um programa e precisava obter a representação hexadecimal de um número inteiro, perguntei em um fórum e as soluções que me deram eram um tanto quanto trabalhosas.

Hoje eu encontrei em um livro para certificação scjp uma solução muito simples para este problema. Na verdade, duas.

Existem dois métodos estáticos das classes wrapper Integer e Long que podem te ajudar nessa tarefa, são eles:

Long.toString(255, 16);

Long.toHexString(255);


Ambos retornam um String com a representação hexadecimal do número inteiro (ou long) informado. Como eu informei o inteiro 255 eles me retornarão "ff";

No caso do método toString() do exemplo, ele recebe dois parâmetros, o primeiro é o número inteiro que você deseja obter a representação em String e o segundo é a base.
Outro exemplos utilizando esse método:

long numero = 16l;

//Base 2 - Binária
System.out.println(Long.toString(numero,2));


//Base 8 - Octal
System.out.println(Long.toString(numero,8));


//Base 10 - Decimal
System.out.println(Long.toString(numero,10));


//Base 16 - hexadecimal
System.out.println(Long.toString(numero,16));

Bom, espero ter ajudado, eu sei que essa dica não é útil pra muita gente, mas se alguém estiver se deparando com esse mesmo problema essa solução pode ajudar.

[]s.

Javascript para criar teclas de atalho em páginas web

Saudações a todos,

Nesse post vou ensinar um modo de inserir teclas de atalho (shortcut keys) em uma página web, utilizando javascript. Na maioria dos casos as teclas de atalhos são muito úteis e dão maior agilidade a processos, imagine a vida sem o CTRL + C e CTRL + V.

O código abaixo mostra uma mensagem de texto quando o usuário do site pressiona CTRL + A.

<script type='text/javascript'>
document.onkeydown = function(e){
var keychar;

// Internet Explorer
try {
keychar = String.fromCharCode(event.keyCode);
e = event;
}

// Firefox, Opera, Chrome, etc...
catch(err) {
keychar = String.fromCharCode(e.keyCode);
}

if (e.ctrlKey && keychar == 'A') {
// Coloque seu código aqui
alert('Você digitou CTRL + A');
return false;
}

}
</script>


Como o código aqui no blog perde a indentação e também não fica diferenciado por cores, vou colocar uma imagem do mesmo código exibido por um editor de texto, para ficar mais fácil a visualização:



Para utilizar esse código basta colocá-lo em sua página e substituir o alert que está abaixo da linha com o texto "// coloque seu código aqui" pelas instruções que deseja utilizar.

Esse exemplo usa a tecla CTRL, para usar a tecla SHIFT utilize e.shiftKey.

Esse código foi testado nos seguintes navegadores:

Windows:
  • Firefox 3.0.3
  • Google Chrome 0.2.149.30
  • Internet Explorer 7
  • Opera 9.27
  • Safari 3.1.1
Linux:
  • Firefox 3.0.3

quarta-feira, 8 de outubro de 2008

Web 2.0

Saudações,

Ontem assisti a uma palestra sobre web 2.0, apresentada pelo professor Mauricio Garcia, autor do livro PHP Profissional, que me impressionou bastante e me ajudou a esclarecer muitos conceitos a respeito do assunto.

Como acredito que ela seja útil para muita gente que deseja aprender a respeito, vim divulgar e recomendar a apresentação de slides utilizada nela (que foi disponibilizada pelo palestrante através do Slide Share).

Link para a apresentação.

Links relacionados:

segunda-feira, 6 de outubro de 2008

Utilizando Google Maps em seu site

Saudações,

Quem nunca ouviu falar dessa incrível ferramenta que é o Google Maps?
Hoje farei um post rápido dando um exemplo de como construir um mapa simples para seu site utilizando a API Google Maps (Hello World).

Criando uma chave para o Google Maps.

A primeira coisa a fazer é criar uma chave para usar a API. Essa chave é inteiramente gratuita e, para criá-la, basta você ter uma conta no Google (Gmail, Orkut, etc) e acessar o link:

http://code.google.com/apis/maps/signup.html

Ele vai exigir que você faça login no Google e informe o url do seu site.
Após isso surgirá uma página com sua chave (key) e até lhe exibirá um código de exemplo para criar um mapa.

Código de exemplo.

Você deve utilizar o javascript para fazer uso da API do Google Maps em seu site.
Abaixo segue um código baseado no mesmo código de exemplo do Google, mas apontando para o parque do Ibirapuera (clique para ampliá-lo).



O código para esse exemplo é bem simples.

Na linha 8 ele passa o key no final da string da url (no exemplo eu removi grande parte da key para caber na imagem, mas você deve substituir a key do exemplo pela sua - que deve ser bem maior).

Na linha 16 ele cria o objeto da API do Google Maps, passando como parâmetro o div (que está lá embaixo do código) que é onde aparecerá o mapa.

Na linha 17 eu dou um setCenter informando as coordenadas do mapa (no meu caso, o parque do Ibirapuera).

O resultado para esse exemplo é:


Ps. é apenas uma imagem, não coloquei o resultado pra valer porque não queria colocar os javascripts no head do Blog.

Concluindo.
Isso foi um exercício de Hello World no Google Maps, vale a pena pesquisar a respeito, essa API disponibiliza uma série de ferramentas úteis para seu site.

Links relacionados:

sábado, 4 de outubro de 2008

Introdução a orientação a objetos utilizando Java

Saudações a todos,

Hoje vou iniciar a falar sobre o java e, para isso, vou dar uma breve introdução ao conceito de orientação a objetos.

Enquanto um projeto baseado em uma linguagem procedural tem seu foco todo voltado aos processos, um projeto orientado a objetos tem seu foco em objetos do mundo real, tentando trazer a programação mais próxima a itens da realidade.

Classes.
Uma classe define o comportamento de um objeto, que basicamente é composto de métodos e atributos. Por exemplo: a classe pessoa define como um objeto do tipo pessoa deve ser.

Objetos.
O objeto é a instância de uma classe.

No momento da execução do programa a classe é apenas o que define como um objeto será, ela não ocupa espaço na memória do programa. Um objeto instanciado com o tipo de uma classe sim ocupa espaço na memória do programa.

Atributos.
Atributos são características de um objeto, por exemplo: o objeto do tipo pessoa tem um nome, uma idade, um endereço. Nome, idade e endereço nesse caso são atributos de um objeto.

Métodos.
Os métodos são as habilidades de um objeto, por exemplo: o objeto do tipo pessoa pode falar, correr, andar.

Podemos dizer que em um objeto, os atributos são o que você consegue definir com substantivos (nome, idade, sexo) e métodos são o que você consegue definir com verbos (andar, falar).

Vou criar abaixo um exemplo de uma classe Pessoa em java, com alguns métodos e atributos:



E agora vou criar uma classe Teste que crie um objeto do tipo pessoa para demonstrar como funciona:



Bom, agora vou explicar um pouco o que aconteceu.

A classe Teste possui um método chamado main().
Quando eu tento executar uma classe através da linha de comando:

# java nome_da_classe

Por exemplo:

# java Teste

O java procura pelo método main() dessa classe. Se ela tiver um método main() ele executa as instruções contidas nele, senão ele retorna uma mensagem de erro falando que essa classe não possui um método main().

A classe Pessoa, por exemplo, não possui um método main(), então ela não pode ser executada diretamente pelo comando # java Pessoa, mas se entrarmos no diretório onde está nossa classe Teste e executarmos o comando # java Teste, obteremos o seguinte resultado:

"Bruno está andando..."

Bom, isso aconteceu porque o método main() da classe Teste criou um objeto do tipo Pessoa e chamou o método andar() desse objeto.

No código da classe pessoas apareceu um nome novo chamado chamado Construtor. Vou explicar abaixo do que se trata.

Contrutores.
Contrutor é um bloco de códigos contido em uma classe que é executado toda vez que é criado um objeto dessa classe. Basicamente, ele acontece quando utilizamos uma instrução com a palavra chave new.

Quando a classe Teste criou um objeto do tipo Pessoa e o atribuiu a variável local pessoa1 (com a instrução: Pessoa pessoa1 = new Pessoa("Bruno", "M");), a primeira coisa que o java fez para criar esse objeto foi procurar na classe Pessoa por um construtor que aceitasse como parâmetro duas Strings (nome e sexo) e executar as instruções existentes dentro desse construtor.

Sendo assim, o construtor carregou as variáveis de instância (atributos do objeto) com os valores que lhe foram passados por parâmetro.

Como tanto o atributo do método, quanto as variáveis locais do construtor tem o mesmo nome, utilizamos a palavra chave this para diferenciar as duas variáveis, informando que a variável que receberá o valor da variável local é o atributo do método, ou seja, this.nome e this.sexo (isso se chama sombreamento, em java):

this.nome = nome;

Agora falaremos de outras características da programação orientada a objetos também muito importantes, são elas:

Herança.
Herança é uma capacidade das linguagens orientadas a objetos que permite que uma classe herde as características de um outra classe. Uma das inúmeras vantagens dessa características é o aproveitamento de código, fazendo com que você consiga trabalhar sem repetições desnecessárias de código.

Exemplo:

Vamos supor que estamos desenvolvendo a parte de um aplicativo referente ao cadastro de funcionários, para isso poderemos usar uma classe Funcionario.
Todo funcionário é uma pessoa, então podemos fazer com que a classe Funcionario herde as implementações da classe Pessoa.

Exemplo da classe Pessoa:


Classe Funcionario herdando Pessoa a partir da palavra chave extends:


Classe Teste criando um objeto Funcionario e utilizando tanto métodos de Funcionario quando métodos que foram por ele herdados da classe Pessoa:


Quando executarmos o comando:

# java Teste

Obteremos o resultado:

Nome: Bruno
Matrícula: 123456


Polimorfismo.
Para não confundir o aprendizado, não vou entrar em detalhes do polimorfismo neste primeiro post, mas saiba que ele é uma característica muito importante das linguagens orientadas a objetos que nos permite instanciar em variáveis de tipo de classes mais generalizadas, objetos de tipos mais específicos, fazendo com que cada um se comporte da maneira adequada.

Por exemplo:

Eu posso criar uma classe Peca (peça de tabuleiro de xadrez) que exija que todas as classes que herdem dela tenham o método andar(), cada uma a seu modo.

Daí então eu posso criar vários objetos da classe Peca e atribuir a eles objetos de classes Cavalo, Torre, Peao, etc. Quanto eu mandar o objeto Peca andar (através do método andar()), ele andará de acordo com o tipo específico de objeto que foi atribuído a ele.

Por exemplo: se for um tipo Peca ao qual foi atribuído um objeto tipo Torre, ele andará na horizontal e vertical quantas casas quiser, portanto que não pule nenhuma outra peça.

Concluindo.

Falei apenas sobre alguns aspectos da orientação a objetos, suas características e seus ganhos vão muito além disso.
É valido lembrar que, apesar do java ser uma linguagem orientada a objetos, é possível trabalhar com ela sem utilizar orientação a objetos. Mas, apesar dessa possibilidade, essa prática não deve ser encorajada, na minha opinião.
Seus códigos sem orientação a objetos serão confusos e provavelmente não sairão dos programas simples.

Em breve postareis novos tópicos a respeito de java, para aprofundarmos mais os conceitos de orientação a objetos e também, a própria linguagem em questão.

Pretendo também dar alguns exemplos de orientação a objetos utilizando a linguagem PHP.

Até a próxima.

sexta-feira, 3 de outubro de 2008

Imagem com fundo transparente usando GIMP

Saudações mais uma vez,

Hoje vou falar a respeito de como criar uma imagem com fundo transparente com o GIMP.
Eu criei um vídeo onde explico passo a passo, na prática, utilizando o GIMP 2.4.5 e linux Ubuntu 8.04. Mas acredito que na maioria das versões do GIMP (Windows ou Linux) o processo seja bem similar.



(Eu sei, minha voz é um tanto quanto engraçada no microfone, mas fazer o que né)

Agora vou descrever as etapas passo a passo, caso tenha ficado alguma dúvida.

Como funciona.

Para se criar a imagem com fundo transparente é bem simples, o conceito básico é colocar uma camada transparente por detrás da imagem e remover da imagem original as partes que deseja que fique transparente.

Adicionando canal alfa.

Para adicionar essa camada basta abrir a janela de camadas, clicar sobre a camada da imagem com o botão direito do mouse e selecionar a opção "Adicionar canal alfa". Isso fará com que a camada selecionada fique com o fundo padrão transparente.

Caso a janela de camadas não esteja aparecendo para você, abra no menubar da imagem o menu "Diálogos" e clique em "Camadas".

Removendo fundo da imagem.

Agora precisamos selecionar as partes do fundo da imagem que desejamos remover.

Como eu disse no vídeo, o jeito mais fácil de fazer isso é utilizando a ferramenta de seleção por cor, que se encontra na barra de ferramentas padrão do GIMP.

Ao clicarmos sobre a imagem ele selecionará todos os pixels que tiverem a mesma cor que a seleção. Para obtermos um melhor resultado, selecione no menu da ferramenta de seleção por cor a opção "Enevoar bordas", e ajuste para 4 o raio e 45 o limite. Isso servirá para ele selecionar também cores semelhantes as da seleção, para o caso de sua imagem tiver vários tons da cor do fundo.

Removendo e salvando.

Após isso basta clicar sobre a cor desejada e apertar a tecla "Delete" para remover (ou clicar em Editar -> Limpar).

Salve em uma extensão que aceite a transparência (exemplo: GIF, PNG), basta digitar a extensão desejada no nome da imagem na hora de salvar.

Os valores raio 4 e limite 45 são apenas uma sugestão que eu li em outros sites na internet como bons valores para essa tarefa, mas você pode alterá-los para melhor se adptarem a sua imagem.

Abaixo a imagem que foi resultado do exemplo do vídeo:


Vou aproveitar o post para divulgar que dia primeiro de outubro (antes de ontem) foi lançada uma nova versão do GIMP, o GIMP 2.6, confiram em http://gimp.org/downloads

[]s pessoal, até a próxima.

Links relacionados:

quarta-feira, 1 de outubro de 2008

Configurar Slackware para iniciar em modo gráfico

Saudações a todos,

Algumas distribuições Slackware vem como padrão a inicialização em modo texto. Vou ensinar a seguir como configurar o Slackware para iniciar em modo gráfico (inclusive a tela de login).

Para isso abra o arquivo /etc/inittab com um editor de texto qualquer e localize a linha a seguir:

id:3:initdefault:

Altere para:

id:4:initdefault:

Salve o arquivo e no próximo boot você já terá o login em modo gráfico.
Abaixo vou listar as outras opções que existem:
  • 0 = halt
  • 1 = single user mode (como root)
  • 2 = unused (igual o 3)
  • 3 = multiuser mode (esse é o padrão, modo texto)
  • 4 = X11 with KDM/GDM/XDM (esse é o modo gráfico)
  • 5 = unused (igual o 3)
  • 6 = reboot
Se desejar, você pode manter ele no modo de inicialização padrão (3 = texto) e utilizar o comando # startx quando precisar iniciar o modo gráfico.

[]s.