Archive for 'Tableless'

mai200831

Diego Couto

0

Iniciando com jQuery

Não vi uma melhor maneira de descrevê-lo a não ser como no site oficial:

[...] Biblioteca JavaScript que simplifica o modo como você percorre documentos HTML, manipula eventos, executa animações, e adiciona interações com Ajax às suas páginas. jQuery destina-se a mudar a maneira que você escreve JavaScript.

Olá Mundo com jQuery

Para começarmos a trabalhar com jQuery, será necessário baixar a biblioteca primeiro, faça o download do arquivo. Agora crie uma página HTML vazia e adicione o seguinte:

<html>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<head>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
  $("a").click(function() {
    alert("Olá Mundo!");
  });
});
</script>
</head>
<body>
<a href="#">Clique para ver a Mensagem</a>
</body>
</html>

Foi adicionado o arquivo jquery.js em nossa página e solicitado que, todo elemento a, ao ser clicado, gerasse o alerta “Olá Mundo!”, assim não é necessário ficar especificando onclick=” ” elemento por elemento.


Read more

abr200820

Diego Couto

0

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)

abr200808

Diego Couto

0

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

mar200823

Diego Couto

0

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>


Read more

mar200822

Diego Couto

0

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.

mar200805

Diego Couto

0

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á.