rss
twitter
  •  

PNG Transparente no Internet Explorer 6 e 5 (solução definitiva)

Posted by admin | Posted in design, dicas | Posted on 09-04-2010

0

Bom, acho que hoje é o dia mais feliz desse ano pra mim e creio que sera para muitos de vocês também, fiquei tão feliz em encontrar isso que quis compartilhar com vocês!

Recentemente aqui na agencia, me apresentaram uns layouts bem complicados de se montar, envolvendo transparencias que só eram possiveis com PNG transparente.

Imagine ter que criar um layout onde o background é uma mistura de degrade com textura e o conteúdo possui uma dropshadow em degrade e transparente (isso mesmo a sombra é um degrade com transparencia), são varios pesadelos juntos. Ai tive que correr atrás!!

Tem a solução tradicional que muitos devem conhecer:

  1. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘imagem.png’);

Mas esta tem várias complicações de implementação.

Tinhamos a solução do iepngfix do site:
http://www.twinhelix.com/css/iepngfix/

E a solução que veio para criar um marco na história do webdesign:

DD_belatedPNG (a solução definitiva)

Essa é uma biblioteca javascript desenvolvida por Drew Diller no site:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

Download da biblioteca ->http://www.dillerdesign.com/experiment/DD_…edPNG_0.0.7a.js

Um pequeno script que nos da o poder de usar livremente imagens PNG tanto no IE6 como no IE5, seja a imagem simplesmente inserida no documento ou como background de um elemento.

E o melhor de tudo é que tem suporte para background-repeat e background-position.

O uso é bem simples como mostro abaixo:

basta colocar o nome do seletor css onde esta declarado o background png ou a tag img na função

view plaincopy to clipboardprint?
  1. <script src=“DD_belatedPNG_0.0.7a.js” type=“text/javascript”></script>
  2. <!–[if lte IE 6]>
  3. <script type=“text/javascript”>
  4. DD_belatedPNG.fix(‘#div1′);
  5. </script>
  6. <![endif]–>

ou

view plaincopy to clipboardprint?
  1. <!–[if lte IE 6]>
  2. <script src=“DD_belatedPNG_0.0.7a.js” type=“text/javascript”></script>
  3. <script type=“text/javascript”>
  4. DD_belatedPNG.fix(‘img’);
  5. </script>
  6. <![endif]–>

e ainda podemos juntar tudo:

  1. <!–[if lte IE 6]>
  2. <script src=“DD_belatedPNG_0.0.7a.js” type=“text/javascript”></script>
  3. <script type=“text/javascript”>
  4. DD_belatedPNG.fix(‘#div1, #div2, img’);
  5. </script>
  6. <![endif]–>

nota: “lte” no comentário condicional para versões menores ou iguais a versão 6 do IE

Segue abaixo o link do demo que fiz, onde coloquei uma imagem com sombra transparente como background de algumas divs e por ultimo a propria imagem no documento:

Link DEMO

Preview no IE5:

pngfix


Continue Lendo...

Identificando um layout amador

Posted by admin | Posted in Ctrl C/Ctrl V, design, dicas | Posted on 04-03-2010

0

Tirei esse texto abaixo do blog Avante, do grande mestre Bruno Ávila. Vale a pena dar uma passadinha no blog do cara, ele tem muita história sobre webdesign pra contar e anos de experiência na área.

amador-01.gif

JAMAIS ESTIQUE FONTES, IMAGENS E LOGOTIPOS

Erro bem comum entre os iniciantes, essa é uma das características mais vísiveis de um layout amador. Mesmo aos olhos do leigo é perceptível que algo está errado ali. O cérebro interpreta a desproporção das letras, das formas e círculos, dando a impressão clara de que algo foi esticado ou achatado. Jamais cometa esse crime. Ao manusear fontes, imagens ou logotipos, aumente ou diminua suas dimensões de forma proporcional.

amador-02.gif

EVITE UTILIZAR GAMBIARRAS

Quantas vezes você já tentou corrigir o mal contato no seu fone de ouvido, utilizando um outro fio e uma fita isolante? Isso é o que chamamos de gambiarra. Seria uma maneira errada de se corrigir alguma coisa, evitando ter que fazer tudo de novo. É o que vemos no exemplo acima. O webdesigner em questão pegou um texto vermelho escuro e tacou num fundo azul escuro. Resultado: ninguém conseguiu ler. Então, para que não fosse preciso ter que refazer todo o layout para que o texto vermelho ficasse legível, o nobre webdesigner resolveu colocar um efeito de “glow”, como se uma luz resplandescente iluminasse o fundo da palavra “gambiarra 1″. Aí está um exmeplo de gambiarra muito comum. Utilizou-se um efeito totalmente artificial, mal empregado, deixando a palavra pesada, poluída.

Não satisfeito, o webdesigner abandona a idéia do glow e taca um contorno amarelo na palavra “gambiarra 2″. Agora sim, a palavra ficou mais pesada ainda, como uma grossa barra de ferro.

Evite esse tipo de efeito, ao ver que a fonte não está legível ou sendo ofuscado, troque a cor do fundo ou da fonte até encontrar o melhor contraste. E se for necessário, volte a estaca zero e monte o layout novamente. Ao utilizar efeitos, utilize com muito critério e de uma forma que não fique artificial.

amador-03.gif

EVITE FONTES COMPLICADAS

Você entendeu o que está escrito aí em cima? Nem eu. Evite fontes de difícil leitura. Utilize o bom-senso.

amador-04.gif

CADA FONTE, UM SENTIMENTO

A fonte utilizada acima é a Comic Sans. Nota-se seu estilo de “revista em quadrinhos”. O que tem a ver esse tipo de fonte com uma funerária? Por isso utilize sempre um tipo de fonte que transmita o sentimento mais adequado. No caso da funerária, uma simples Times New Roman cairia bem.

amador-05.gif

TÍTULOS DESLOCADOS PARA A DIREITA

Nossa leitura se faz da esquerda para direita, como qualquer ocidental. Por isso encontramos em quase 100% dos sites ocidentais esse tipo de alinhamento. Deixar deslocado o título um pouco para a direita denota falta de alinhamento com o texto que vem embaixo. Nesse caso, alinhe o título com o texto. Se for um menu, pode colocar o texto que vem abaixo do título principal deslocado para a direita, dando uma idéia de hierarquia.

amador-06.gif

MENU DESALINHADO

Erro muito comum entre os iniciantes. Transmite falta de cuidado e quebra de leitura. Coloque todos alinhados na mesma linha. Recomendo a utilização de uma linha guia, caso tenha dificuldades em alinhar.

amador-07.gif

TEXTOS SEM MARGEM

Sempre devemos dar margens no topo, rodapé, esquerda e direita do texto. Além de dar uma sensação de leveza, também serve como uma moldura invisível, destacando o texto como um elemento visual.

amador-08.gif

EVITE BEVEL

Assim como o glow, o efeito bevel tende a ser artificial. Ao utilizar este tipo de efeito, use com bastante critério, para que não dê esse tom de artificialidade. Exagerar nesse efeito pode poluir a página e deixá-lo mais pesado visualmente.

amador-09.gif

EVITE SOMBRAS
As sombras também devem ser utilizadas com critério e de forma muito delicada. No exemplo, vemos um exagero do uso da sombra, dando um aspecto de queimado, sujo, poluindo a página e dificultando a leitura.

E então, gostaram? Acredito que esses sejam as principais características de um layout amador. Se você anda cometendo um desses crimes por aí, não tem problema, tenho certeza que depois de ler esse artigo você irá se redimir. ;)

Para o alto e avante!

Bruno Ávila é webdesigner e cantor de banheiro.

Continue Lendo...

COMO EXCLUIR CATEGORIAS DA LISTA PADRÃO DO WORDPRESS

Posted by admin | Posted in Arte, Não faça igual, Vida Freela, Video, dia a dia, dicas, plugins wordpress, portfolio, wordpress | Posted on 24-01-2010

2

layoutpeque2

Criei algumas categorias para alguns funções no wordpress, mas não gostaria que elas aparecessem na lista do sidebar de categorias do blog, o que fazer? Simples, é só usar um exclude dentro do  wp_list_cats. Exemplo:

  • <?php wp_list_cats(’exclude=3,4,5,’); ?>

As categorias que tiverem a ID 3,4,5 não apareceram. Usei esse código no blog www.daniellsantana.com. Fiz a montagem e implementei o Wordpress, plugins e widgets.  O  Layout ficou por conta da  Linker Comunicação.

Continue Lendo...

7 ERROS COMUNS NO WEB DESIGN

Posted by admin | Posted in Ctrl C/Ctrl V, Não faça igual, Vida Freela | Posted on 08-01-2010

0

Como sou fã de Bruno ávila, Resolvi postar esse texto do blog dele (http://www.brunoavila.com.br/avante/) que ele traduziu do site Inspect Element.  Recomendo a qualquer webdesign iniciando no ramo os cursos de Bruno Ávila,  me ajudaram muito no meu começo como webdesigner freelancer.

1. Uso desnecessário do Flash

Tom diz que o flash pode ser muito bem utilizado, como animações isoladas ou ferramenta de vídeo streming. Mas que as desvantagens do uso do flash são inúmeras quando mal empregadas. Seu uso no menu por exemplo,  deixa o site menos acessível, principalmente para buscadores como o Google.

2. Ferramenta de busca que não presta

Quem tem um site hoje sem ferramenta de busca tá perdendo leitores. É importantíssimo uma boa ferramenta de busca no seu site. E isso é fácil de resolver, sites como o Google fornecem esse serviço de busca especialmente para o seu site, dê uma olhada http://www.google.com.br/cse/. Hoje só não tem busca no seu próprio site quem não quer, afinal o serviço é grátis e poderoso.

3. Imagens ruins

Segundo Kenny, hoje temos dois tipos de imagens ruins quando se trata de web design. A primeira é o uso de imagens que são desinteressantes ou irrelevantes. Boas Imagens podem transmitir um significado mais rapidamente e passar uma mensagem de forma muito eficaz.”Uma imagem vale mais que mil palavras”, o que é especialmente verdadeiro quando se trata de web design.

A segunda é a qualidade das imagens, de compressão pesada tornando imagens borradas, ou então imagens redimensionadas ficando esticadas ou esmagadas,  alterando sua relação de aspecto. Alguma das situações acima, é inaceitável nos dias de hoje mas infelizmente ainda muito frequente.

4. Uso de URLs estranhas

Tom lembra ainda dos links confusos gerados principalmente por sistemas de gerenciamento de conteúdo. Links como www.exampleurl.com/?p=52 não querem dizer nada, nem a você nem aos motores de busca, o que pode ser prejudicial, por exemplo, na colocação do ranking de resultados do Google.

5.A falta de uma mensagem clara

É importante que o visitante entre no seu site e perceba em poucos segundos do que se trata. É frustrante entrar num site e não entender logo na capa o que aquilo ali faz. Às vezes basta um pequeno slogan (como esse que coloco embaixo do meu logo e no topo, que diz logo de cara do que se trata esse blog).

6. Não entender as necessidades do cliente

Nesse caso o cliente que Tom se refere é o seu cliente, aquele que te contratou para fazer o site e não o cliente do seu cliente.

É fundamental que você compreenda o que o seu cliente precisa e como funciona o produto ou serviço que ele oferece. Entendendo o que seu cliente quer, principalmente através de um briefing bem feito, possibilitará que você apresente um trabalho dentro do esperado, evitando assim que o cliente diga “Não gostei, faça de novo”.

99% das vezes que o cliente manda voltar pra casa para fazer um novo layout é culpa do web designer que não entendeu o que o cliente queria e fez algo completamente diferente do esperado. Por isso costumo dizer que o briefing é a etapa mais importante de uma criação para a web.

7. Ignorar o Internet Explorer

Mesmo que você use o Firefox, Safari ou outros para trabalhar e fazer seus testes, na hora de colocar no ar é importante adaptá-lo ao Internet Explorer, afinal os usuários comuns ainda utilizam IE como navegador principal. Tom Kenny afirma:  “A maioria dos usuários sequer sabem o que é um navegador”.

Fonte: inspect element

Continue Lendo...

Philippe Starck - Porque Design? [legendado pt-br]

Posted by admin | Posted in Arte, design | Posted on 27-09-2009

0

Philippe Starck mostra nesse video que o design não deve ser apenas algo sexy, que seduza o consumidor com cores e formas sem sentido, ou um produto “genial” que só seja entendido apenas por outro designer, mas  que seja algo humano, que tenha utilidade para os seres humanos e tornem suas vidas mais suportáveis.

Continue Lendo...