Mensagens Instantâneas com Ajax

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

Ajax im

Instalação

Possui uma instalação extremamente simples, que consiste em:

  1. Enviar os arquivos para seu servidor web;
  2. Configurar as informações de seu banco de dados no arquivo config.php;
  3. Configurar as opções gerais (nome, pasta..) no arquivo config.js;
  4. Acessar o aquivo install.php pelo navegador;
  5. Após concluída a instalação, deletar o arquivo install.php.

» Demonstração
» Download
» Tradução Português (Brasil)

Tags: ,

Resolução de Banner Web

Óbvio que a criatividade sempre fala mais alto, mas como tudo, há padrões para isso também, padrões estes que podem ser verificados nesta tabela:

Padrões de Resoluções para Banners Web

Referências  -  Designers Toolbox

Tags:

Scroll com Javascript

Para quem busca um script para 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 na ação.

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

Tags: ,

O que é e como aplicar CSS

CSS significa Cascading Style Sheets, o que traduzindo para o português ficaria algo como folhas de estilo em cascata.

Sua finalidade é estilizar e formatar páginas web,sendo de grande importância para que os web standards sejam obedecidos, mesmo que parcialmente.

Aplicação

<html>
<head>
<title>Aplicando CSS</title>
<style type="text/css">
body { margin:0; Background-color: #CCCCCC; }
#quadrado { height:300px; width:400px;
margin: 20px 0 0 40px; border: 3px solid #0066FF; }
.estilo { background-color: #000000; }
</style>
</head>
<body>
<div id="quadrado" class="estilo"></div>
</body>
</html>

Leia Mais…

Tags:

IBM sobre o Linux

Um belo vídeo criado pela IBM demonstrando as virtudes do Linux e que ele realmente tem muito a crescer ainda.

Mas será que realmente ‘o futuro é aberto‘ ?

Tags: ,

Aplicando Z-Index

No desenvolvimento de seu website você gostaria de sobrepor uma imagem, seja para o motivo que for, mas sempre que insere 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 facilmente.

Vamos supor que são apenas duas images, a imagem 1 deve ficar em baixo e, obviamente, a imagem 2 deve ficar em cima.

Adiciona-se 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 pode notar, o maior valor é o que ficará no topo.

Não sabe nada de CSS ?

Então acesse este artigo.

Tags:

Crie um Menu com CSS Online

Izzymenu

Se você gosta de menus em CSS no maior estilo web 2.0, mas não tem tempo ou paciência para se dedicar ao estudo de CSS, com certeza você vai gostar muito do izzyMenu.

Com ele, você pode criar belos menus sem carecer de conhecimento sobre CSS. É só selecionar opções como imagem de fundo, fonte, espaçamentos, borda… e está pronto.

Tags: , ,

Lorem Ipsum

Uma ótima alternativa para quem pretende testar os espaçamentos e ter uma idéia de como vai ficar seu layout pelo menos com uma formatação de texto correta, é o Lorem Ipsum, nome meio estranho, às vezes até pode assustar, mas é muito útil e um excelente gerador de textos.

Já cansei de ver usuários em forúns perguntando porque o firefox não quebrava as linhas em uma textbox, ou porque aquele layout lindo que você pegou para wordpress ficou todo deformado após seu “texto”.

Quanto ao textbox no Firefox, ele quebra as linhas sim, o problema é que quando este usuário realizou o teste ele inseriu um texto totalmente sem formatação, como algo do tipo ” aaaaaaaaaaaaa .. “, sem espaços parágrafos e nada mais, ao inserir um texto formatado, com certeza funcionará perfeitamente.

Já para o template a resposta é semelhante, basta adicionar um texto formatado para que ele não fique deformado

Claro que existem mais utilidades para este gerador de texto, como por exemplo alocar espaço para seu texto no layout para que se o cliente desejar possa ele mesmo inserir seu texto.

Para criar seu texto é muito simples basta acessar a página do gerador, selecionar quantas palavras, páragrafos, bites ou listas tenha seu texto e clicar em Generate Lorem Ipsum.

Criei um texto com 27 palavras para que possa servir de exemplo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam lectus. Suspendisse pulvinar diam at magna. Donec quam enim, feugiat ut, vehicula non, lobortis in, orci. Proin adipiscing.

Tags:

Resize no Flash

Para novos desenvolvedores em flash, manter seu site disponível independentemente da resolução utilizada pode ser complexo, é pra suprir esta necessidade que o FitFlash foi desenvolvido. Ele faz o resize automático da página, onde você define uma resolução mínima, caso a resolução utilizada pelo usuário seja menor que o definido por você, ele gera então as barras de rolagem.

Instalação

Basta incluir o arquivo JavaScript na página :

<script type="text/javascript" src="fitflash.js"></script>

Após, adicionar o .swf da seguinte forma na página:

<script type="text/javascript">
  FitFlash ("ID do flash", largura mínima, altura mínima);
</script>

Deste modo, seu website ocupará 100% do navegador independentemente da resolução.

» Realizar download da versão mais atual.

Tags: , ,

Tabelas ou Tableless?

Como um antigo desenvolvedor de “websites tabelados”, recomendo que todos busquem a acessibilidade, e no mínimo uma utilização parcial de web standards inicialmente.

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

Como assim diferente?

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

Não conheço nenhum desenvolvedor web que nunca tenha tipo problemas com o Internet Explorer, seja em posicionamentos, bordas, margens…

Mas como eu começo?

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

Desenhe suas idéias, espalhe-as pela folha e 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”.

Pra que desenvolver em tableless?

Você está desenvolvendo um website 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 poucos minutos, ajustando um posicionamento aqui e outro lá.

Tags: , ,