set12009

Layout packs para referência

layout_packs_rafaelrp-copy

Alguns layouts em (x)HTML+CSS para referência em posições de layouts retirado do css tricks.

Exemplos:
Fixed-Fluid

Fixed-Fluid-Fixed

Fluid-Fixed

Half-and-Half

download

  • Share/Save/Bookmark
jul42009

5 Hacks importantes para o IE que você deve saber

<!–[if lte IE 6]> <![endif]–>


A maioria das pessoas usam este código. Primeiro você cria um arquivo CSS que mais acessível ao Firefox e depois cria um com algumas modificações para o IE.

<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href=" styleie6.css " media="screen" /><
<![endif]-->


Para outras versões do IE basta mudar o número 6 para a versão desejada.


O hack inline para o ie

Não no seu código do seu web site mas sim no seu arquivo css.

#header {
margin-left: 10px; /* código comum */
_margin-left: 20px /* código com hack */
}


Iepngfix.htc

Este é o hack mais popular para deixar suas imagens .png com fundo transparente no IE, para usá-lo basta aplicar o seguinte código.

<!--[if lte IE 6]>
<style>
#header, #navigation, e outra id ou classe que você tem .png background-image { behavior: url("caminho para seu pngfix/iepngfix.htc") }
</style>
<![endif]-->


DD_belatedPNG

É um hack para PNG transparente para o browser IE.

<!–[if IE 6]>
<script src=”DD_belatedPNG.js”></script>
<script>
DD_belatedPNG.fix(’#container, #banner, #logo‘);
</script>
<![endif]–>


Mensagem de aviso (não recomendado)

Este hack você deve usar apenas quando não tem mais nem uma solução para o IE6, use apenas quando precisar, ao contrário o cliente pode se sentir ofendido ou então nem baixar um browser compatível fazendo assim você perder um acesso ao seu site.

$(function(){
if($.browser.msie && $.browser.version<7)
$('#top').before(
'<div>'+
'Foi detectado que você está usando o IE6 ou uma versão anterior.
Infelizmente não suporta este website'+
'\'
Recomendamos que você atualize para o '+
'Internet Explorer ou FireFox.'+
'</div>'
)
});
  • Share/Save/Bookmark
jul32009

Web Standards - Oque é? Para que serve?

clip_image002

O seu site parece diferente em outros browsers? Você demora muito tempo para fazer uma pequena mudança no site? Seu website demora muito tempo para carregar?

A resposta para todas as perguntas citadas é apenas uma, Web Standard compliant website, ou Web Site padrão compatível.

Fundado em 1998, web standard é um termo geral para um padrão formal e outras técnicas específicas, oficializado pela w3c e outros órgãos de qualidade, eles visam ampliar a acessibilidade dos web sites.

Por que usar Web Standards?

Usando web standards você tem a possibilidade de aprimorar a acessibilidade dos web sites, reduz o tempo de desenvolvimento e manutenção, aprimora o rank em motores de pesquisa e é claro melhorar a acessibilidade.

Isto é porque é sempre aconselhável seguir normas no desenvolvimento de web site.

Read More

  • Share/Save/Bookmark
mai142009

Dicas para iniciantes em web design

Vou citar algumas dicas que ajudam e muito na hora de criar um novo projeto, agradando o cliente e  criando o website de uma forma limpa e agradável.

http://www.azores.gov.pt/NR/rdonlyres/F9EE83FF-2F56-417F-99C9-DB8978A45BAF/156515/ajuda_imagem.jpg

Segue abaixo alguns passos para ajudar aos iniciantes em web design como iniciar seus projetos.

Read More

  • Share/Save/Bookmark