jEdit com a fonte embaçada / desfocada no Ubuntu

Saudações pessoal,

O post que eu vou fazer hoje é sobre um problema bem específico que tive com o jEdit (ótimo editor de texto para linguagens de programação) recentemente, mas pode ser útil para quem esteja passando pela mesma situação.

Tive que reinstalar o Ubuntu na minha máquina e, quando instalei o jEdit, ele estava com a fonte fora de foco, impraticável para o uso. Estava como na imagem abaixo (clique para ampliá-la):



Da pra perceber bem pelos sinais de igual, e a própria interface do aplicativo está estranha.

Pesquisei na internet e encontrei uma solução no site oficial do jEdit.

O que estava acontecendo é que, apesar de eu ter instalado o jre 6 do java, o runtime que estava como padrão no meu Linux era o openjdk 6.

Se você estiver com esse mesmo problema, basta alterar o runtime padrão do java para uma compatível ao jEdit, para fazer isso basta utilizar o comando:

$ sudo update-alternatives --config java

E selecionar a runtime desejada digitando o número correspondente.

Se você ainda não tiver instalado nenhuma runtime do java compatível, você pode instalar a partir do comando (o jre 1.5 também é compatível):

$ sudo apt-get install sun-java6-jre

Com isso o problema deve resolver, e o jEdit ficará normal, como mostra a figura:



Até a próxima, espero ter ajudado!

Ps. se você ainda não usa o jEdit e ficou curioso, pode instalá-lo a partir do comando:

$ sudo apt-get install jedit

Links relacionados:

• http://www.jedit.org
  

Layout CSS, Aula 3 - Alinhando um DIV a esquerda do outro

Bom pessoal,

Depois de algum tempo, consegui gravar o último vídeo do nosso assunto sobre Layout CSS.
Neste post nós veremos como criar as DIV's internas. Veremos como alinhar uma DIV ao lado da outra e, também um truque muito usado em CSS chamado faux columns.

Bom, como de costume, vou deixar aqui no início o vídeo, para ajudar no aprendizado:

Bom, abaixo segue o código de onde nós paramos no último post (no primeiro post nós criamos a DIV principal e a alinhamos a esquerda e, no segundo, fizemos ela ocupar 100% da altura da tela):



Lembrando que basta clicar na figura para ampliá-la.

O que falta para chegarmos até o formato do site esperado são as 3 DIV's internas. Vou colocar novamente a imagem com o formato que desejamos montar:



Criando as DIV's Internas

Agora sim vamos continuar da onde paramos.
Primeiramente vamos criar três DIV's dentro da DIV principal. Seus id's serão "topo", "menu" e "rodapé".
Conforme figura abaixo:



Ps. Como o código já está grande, não posso mais colocá-lo inteiro dentro das figuras. Por isso estou numerando as linhas, para você saber que esse não é o código completo.

Agora irei definir uma altura para a DIV "topo" e uma borda (apenas na parte de baixo).
Para fazer isso adicionarei um novo bloco no CSS com o seletor #topo, conforme figura abaixo.



Agora vamos começar a criar o CSS para as DIV's "menu" e "conteudo".
Primeiramente, vou definir uma largura fixa para as duas (130 px) e uma cor de fundo para cada uma (#faa para o menu e #aaf para o conteúdo).



Como você pode ver as DIV's ficaram uma em cima da outra. Para corrigir isso vamos utilizar a propriedade "float", que fará com que cada uma delas flutue em relação a DIV principal. Vamos definir float: left para o menu e right para o conteúdo.



Agora cada DIV já está posicionada no seu respectivo lugar.
Vamos então definir uma largura para o menu e o conteúdo, para que cada um ocupe todo o espaço disponível para eles.

Como a DIV principal tem 600px, vou utilizar 130px para o menu e 469px para o conteúdo. Fazendo isso deixarei entre eles um espaço de 1 px, que eu utilizarei mais para frente.
Segue figura:



Agora vamos definir uma borda entre o menu e o conteúdo.
Para fazer isso, a técnica escolhida será o faux columns. Criarei uma imagem com a largura da DIV principal (600px) e apenas 1px de altura.
Farei com que essa imagem tenha fundo transparente e pintarei nela apenas 1 pixel preto, justamente na posição onde está sobrando um pixel vazio em nosso layout. Definirei essa imagem como fundo da DIV principal.
Sendo assim ela se repetirá e pintará uma borda entre as duas DIV's (menu e conteúdo).

Segue abaixo o código onde insiro a imagem como fundo da DIV principal:



Infelizmente, por falhas técnicas do blog, não está sendo possível fazer upload da imagem que utilizei como fundo. Mas basta você criar qualquer imagem de 600x1 px e pintar um pixel preto no lugar correto. Veja como fazer isso no vídeo, utilizando o GIMP.

Você verá que a imagem também ficará como fundo da DIV "topo", o que não é o que queremos.

Para solucionar isso basta colocar uma cor de fundo na DIV topo, como faço na figura abaixo (aproveitei também para retirar a cor do fundo do menu e do conteúdo).



Agora estamos perto de terminar.
O resultado já está bem parecido com o desejado, mas o texto ainda está muito próximo das bordas. Para solucionar isso adicionarei 10px de padding a cada uma das 3 DIV's internas.

Ao adicionar o padding você terá de remover 20 px tanto da altura da DIV topo, quanto da largura das DIV's menu e conteúdo, pois senão os novos tamanhos empurrarão a estrutura do nosso site.

Veja como ficou na figura abaixo:



Agora só falta ajustarmos um detalhe.
No último post sobre o assunto fizemos todo um trabalho para que o DIV principal acompanhasse o conteúdo do site caso ele fosse maior que a janela. Como utilizamos as propriedades float no DIV menu e conteúdo, eles não empurrarão mais a DIV principal (coloque bastante texto dentro do DIV conteúdo fazendo com que ele ultrapasse o tamanho da janela, na vertical, para conferir).

Para solucionar isso vamos fazer uma "gambiarra". Colocaremos depois da div conteúdo uma nova DIV chamada "rodape", que será invisível.

Colocaremos um novo bloco no CCS referente a DIV rodapé colocando a propriedade "clear" dela como "both".

Sendo assim a DIV invisível rodapé será posicionada abaixo do menu e do conteúdo e, como ela não tem float, ela empurrará a DIV principal!

Veja código abaixo:



E assim, finalmente chegamos ao resultado proposto!

Mais pra frente podermos criar um quarto post extra, ensinando a criar um rodapé de verdade, que fique posicionado sempre no fundo da janela.

Por enquanto é isso, espero ter ajudado!

Abraços!

Links relacionados:

• http://www.youtube.com/watch?v=9TIGHvVwx18
  

Recuperar valor do auto incremento após efetuar INSERT com PHP e MySQL

Saudações a todos,

As vezes quando temos uma tabela no banco de dados com um campo definido como AUTO_INCREMENT, precisamos recuperar esse valor logo após o INSERT (por diversos motivos).

Para isso não basta fazer uma consulta para recuperar o maior valor (MAX) do campo na tabela pois uma outra pessoa pode já ter feito um INSERT após o seu e o valor que o SQL retornará estará incorreto.

Para solucionar esse problema no PHP é bem fácil, utilizamos a função mysql_insert_id().

Ela retorna o ID gerado por um campo de auto incremento do consulta INSERT anterior.

Por exemplo, vou inserir um registro em uma tabela chamada pedidos e, após isso, exibir qual foi o número do pedido gerado:

<?php
$link = mysql_connect('localhost', 'mysql_user', 'mysql_password');

if (!$link) {
die('Não foi possível conectar: ' . mysql_error());
}

mysql_select_db('mydb');

$sql = 'INSERT INTO pedidos (item, valor) VALUES (2, 200.25)';

mysql_query($sql);

echo 'Número do pedido: ' . mysql_insert_id();
?>

Espero ter ajudado, qualquer dúvida poste um comentário ou me envie um e-mail (deixei meu e-mail disponível no meu perfil do blog).

Abraços.

Links relacionados:

• http://www.php.net/mysql_insert_id
  

Copiar e colar textos no console do Linux

Saudações pessoal,

Sei que estou devendo o terceiro post do assunto sobre o layout CSS, devo estar postando ele nos próximos dias.

Hoje vou fazer um post rápido que pode ser útil. Em algumas distribuições do Linux as teclas de atalho CTRL + C e CTRL + V não funcionam no console (Shell). Até existem teclas de atalho específicas para isso, mas variam em cada distribuição.

Existe um jeito de copiar e colar texto no console do Linux (e também nos demais aplicativos dele) que funciona na maioria das distribuições. Para isso basta selecionar o texto desejado e clicar sobre ele com o botão do scroll do mouse (com isso você copia o texto) e, para colar, basta selecionar o local desejado e clicar novamente no botão do scroll. É um jeito simples e prático de se trabalhar no Linux.

Lembrando que nem sempre o texto copiado pelo CTRL + C pode ser colado a partir do botão de scroll, e vice versa, pois cada comando utiliza uma área diferente para armazenar a informação. Mas o texto copiado pelo botão do scroll sempre pode ser colado pressionando o scroll novamente.

Espero que a dica seja útil.

Abraços!