Archive for março, 2008

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

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‘ ?

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.

mar200820

Diego Couto

0

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.

mar200807

Diego Couto

0

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.

mar200806

Diego Couto

0

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.

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