Mensagens Instantâneas com Ajax

20 04 2008

Já vi vários scripts de chat pela web, mas como o Ajax im, nunca.

Ajax im

Ele não é simplesmente um utilitário de chat e sim um mensageiro instântaneo online, onde você pode adicionar seus amigos, criar contas, entrar e criar salas para chat e até mesmo enviar emotions.

Possui uma instalação extremamente simples, basta enviar os arquivos para seu servidor web, configurar as informações de seu banco de dados no arquivo config.php, as opções gerais (nome, pasta..) no arquivo config.js e após estas alterações acessar o aquivo install.php pelo navegador, após concluída a instalação deletar o arquivo install.php e pronto, seu mensageiro estará instalado.

Se não quiser utilizá-lo em inglês, já existe tradução para português do Brasil aqui.

» Demonstração
» Download





Homer Simpson em puro CSS

11 04 2008

Sempre gostei de utilizar o CSS e julgava ter um certa facilidade com ele, isso até ver este desenho:

Homer Simpson

Mas e Diego, o que o Homer tem a ver com CSS ?
Basta acessar este site para entender a peripécia do indivíduo que conseguiu desenhar o Homer com puro CSS.





Scroll com Javascript

8 04 2008

Para quem busca um script que possa gerar um efeito de scroll diferenciado e totalmente acessível, com certeza a melhor opção é o Easy Scroll.

Com o Easy Scroll você pode gerar uma nevegação via botões… “Para Baixo”, “Para Cima”, “Resetar”.

Ao passar com o cursor sobre estes botões, a Div selecionada já realiza a tarefa desejada, ao clicar, ocorre o aumento de velocidade.

Instalação

Entre as tags ‘<head></head>’ insira:
<script type="text/javascript" src="easyscroll/easyscroll.js"></script>
Agora vamos inserir a Div que desejamos que possua o scroll.
<div id=”nosso_scroll”>
<!– AQUI O CONTEÚDO –>
</div>

Agora, no arquivo ‘easyscroll.js’, vamos editar os seguintes parâmetros:
var id = "nosso_scroll"; // O id usado no HTML
var nav = ["Scroll Up", "Scroll Down", "Reset"]; //Nomes dos botões de navegacão
var navId = ["btnUp", "btnDown", "btnReset"]; // ID's dos botões
var speed = 5; //Velocidade do movimiento do scroll. (1 = lento, 10 = rápido).
var height = 200; //Tamanho do elemento visivel, isto é, quantidade de texto vísivel sem scroll.

» Demonstração
» Download do Script

Novo Blog: http://diegocouto.com.br/blog





O que é e como aplicar CSS

23 03 2008

Bom, CSS significa Cascading Style Sheets, o que traduzindo para o português ficaria algo como folhas de estilo em cascata, sua finalidade é estilizar e/ou formatar suas páginas e é de suma importância para que você siga pelo menos parcialmente os Web Standards.

Sabe aquele site em tabelas que você fazia ? Agora vai ser com Div’s e CSS.

Como o conceito já foi passado, vamos para a aplicação… Leia o resto deste post »





Aplicando Z-Index

22 03 2008

No desenvolvimento de seu website você gostaria de sobrepor uma imagem, seja para adicionar o motivo que for e sempre que adiciona a imagem ela aparece “por baixo” da que deveria ser sobreposta, por quê ?

Devido a uma má ou inexistente configuração do Z-Index, que pode ser solucionado em apenas um minuto.

Vamos supor que são apenas duas images, a imagem 1 deve ficar em baixo e a imagem 2 deve ficar em cima obviamente, basta adicionar ao CSS:

<style type=”text/css”>
#imagem_1 {
margin:0;
z-index: 1;
}

#imagem_2 {
margin: 20px 0 0 20px;
z-index: 2;
}
</style>

Pronto, suas imagens estarão sobrepostas corretamente agora, como podem notar, o maior valor é o que fica “no topo”.

Não sabe nada de CSS ? Não se preocupe, estou criando um artigo onde é explicado desde o que é CSS a aplicações, em breve será postado.





Tabelas ou Tableless ?

5 03 2008

Como um antigo desenvolvedor de “websites tabelados”, recomendo sim que todos busquem a acessibilidade, e no mínimo uma utilização parcial de web standards de início, para se habituar com o mesmo, pois eu, notei muita diferença ao largar as tabelas e passar para as div’s.

No começo pode parecer complicado, pois o modo de pensar em sua estrutura em tableless é totalmente diversificado do modo que planejava seu site em tabelas.

Como assim diferente?

Muitas coisas que eram feitas com total facilidade através de tabelas, ficam um pouco mais complicadas, como por exemplo a utilização de bordas arredondadas.

Se no mundo todo, todos utilizassem somente o browser Firefox, isso ficaria muito mais fácil sim, pois com ele, a borda arredondada pode ser criada através de duas linhas em sua folha de estilos (CSS), mas, como queremos que nosso site seja visualizado relativamente bem por todos os nossos visitantes, não podemos nos esquecer do Internet Explorer (e este sim meu amigo, lhe dará uma boa dor de cabeça).

Não conheço nenhum webdeveloper que nunca tenha tipo problemas com o Internet Explorer, principalmente quanto a posicionamento de objetos através de CSS, mas quanto a isso, falaremos em um próximo post e mais detalhadamente.

Mas como eu começo?

Sempre, antes de criar qualquer layout eu recomendo pegar um papel, uma caneta e começar por ali mesmo.

Desenhe suas idéias, espalhe-as pela folha a após, vá juntando-as pouco a pouco, mudando de posição para ver onde fica melhor; estude-o, pense em como ele será estruturado sem a utilização das antigas tabelas.

Se já possui um website em tabelas, antes de tentar refazê-lo, vá realizando pequenas alterações, ajustanto posicionamento, deletando as tabelas do topo e refazendo através de div’s, com isso você vai pegando prática e a “lógica”.

Mas e Diego, para que desenvolver em tableless?

Está desenvolvendo um site para o cliente, no princípio, o cliente queria o menu na direita, você fez todo o layout dele em tabelas e no último momento ele decidi colocar o menu na esquerda.

Dependendo de como foi organizado seu layout, isso pode virar uma tarefa muito desgastante e trabalhosa para algo tão simples.

Em tableless, independentemente de sua organização essa tarefa é realizada em menos de 5 minutos, ajustando um posicionamento aqui e outro lá.

Até um próximo artigo !