Tableless - Padrões Web com Pastel e Caldo de Cana

Posts da TAG ‘Na Prática’

[offtopic] Nada como mudar um pouco

Quarta feira… Dia de sol… Resolvemos pintar uma das paredes aqui da Visie. Tomara que fique bom!

7 Comentários

Resolvendo problemas de compatibilidades dos IEs

Talvez alguns já conheçam. Navegando por aí, encontrei este site que disponibiliza, entre muitas coisas, um script que resolve alguns problemas de compatibilidades nos IEs. Dei uma testada básica aqui usando dois ou três seletores complexos e não é que funcionou?!

Testem aí por favor pra ver se algo dá errado ou se algum conflito acontece. Depois comentem aqui. Se isso for confiável, muitos dos problemas que passamos com os malditos IEs são resolvidos, por enquanto.

IE7 {css2: auto;}

9 Comentários

Minhas ferramentas de trabalho (sim, é sobre fireworks e afins)

Se você vai começar a ler este artigo, é bom que saiba que ele é minha opinião. Não vai sair daí querendo explodir minha casa, roubar meu mac, xingar minha mãe ou coisa do tipo, ok?! Você usa o que quiser pra trabalhar. Vou dar meu pitaco aqui, do mesmo jeito que dei naquelas 4 palavras entre parênteses no outro artigo.

Confesso: faz muito tempo que não usava Fireworks. Desde o tempo que eu estava começando essa coisa de web. Acho que era a versão 2? Sei lá.
Ele não era nada! Sabe para que servia o Fireworks para mim? Fazer slices e botões! Uau! Nada muito útil e que eu não saberia fazer com duas ou três linhas de código. Não gostei dele e não gosto hoje.

Atualmente uso Illustrator para criar layouts. Se preciso tratar alguma imagem, uso o Photoshop e trago a imagem tratada pro Illustrator. Depois do layout pronto, levo a imagem do layout pro Photoshop e recorto o que for imagem. Tendo salvo todas as imagens, começo o trabalho com HTML/CSS que é outra história. Mas, vamos parar por aí. Uso apenas Illustrator e Photoshop para criar meus layouts (o da Visie foi criado assim).

Depois de todo o burburinho que este artigo gerou, fui instalar o Fireworks para poder ver o que ele tinha de bom para ter tantos defensores. Acabei pensando que ele poderia ter características que pudessem me ajudar no trabalho e largar de usar Illustrator. Resolvi ir para o site da Adobe e dar uma olhada na descrição das Features antes de tentar fuçar, olha que legal:

Hierarchical organization
Bom, entendi errado ou é isso mesmo: essa tal de Hierarchical Organization é apenas mover layers para cima e pra baixo e organizá-las? Illustrator faz muito bem!

Intelligente scaling
Sem novidade também. No Illustrator nada de segredo: aperta a tecla ‘A’, clica no elemento e redimensione do jeito que quiser.

Multiple pages
Isso sim seria ótimo se houvesse no Illustrator. Mas não mudaria pro Fireworks só por conta disso. Para criar vários layouts de um mesmo site, eu simplesmente crio vários arquivos, porque? Pra mim (leu bem?), é mais organizado. Antes de trabalhar assim, sabe o que eu fazia no Illustrator? Ué… colocava uma layer ‘trancada’ com os objetos que não vão mudar, e criava uma layer para cada layout… Simples assim.

Common Library
Um monte de imagens de botões iguais aos dos sistemas operacionais e uma série de outros gráficos.
Eu tenho uma série destes gráficos aqui também. Toda pessoa que faz layouts deve ter um pacotinho destes, ou não… isso não é essencial, é?
Eu guardo para ter como referência e usar nos layouts. Se eu quiser botões novos, eu crio. Não sinto falta de uma barrinha como essa.

Illustrator and Photoshop integration
Bom, tentei importar um arquivo .ai do illustrator pro Fireworks. Os dois são as versões mais novas (CS3). O Fireworks, depois de umas 4 tentativas de abrir o mesmo arquivo, continuava dando um tal de “… Internal Error…”. Aí desisti e fui abrir outro arquivo, então BOOM. Meu Mac travou.
Nem tentei fazer a mesma coisa com o Photoshop. Medo…

Filter effects
O Illustrator tem todos os filtros que utilizo: DropShadows, Feather, RoundCorners e só. Não vou querer colocar nada estilos do tipo em textos, como 1990. Nada de Blend, lighting effects e essas coisas.

Streamlined Dreamweaver and Flash integration
Não uso nenhum dos dois, portanto…

Tentei salvar umas coisas aqui para ver o código dele e como sempre, tudo que faz código automático, faz lixo.
 <html> <head> <title>Untitled-2</title> <meta http-equiv="Content-Type" content="text/html;iso-8859-1"> <meta name="description" content="FW MX CSS Layer"> <style type="text/css"> #Layer1 { position:absolute; left:142px; top:215px; width:538px; height:276px; z-index:1; visibility:visible; } </style> </head> <body bgcolor="#ffffff"> <div id="Layer1"><img name="Layer_1" src="Layer_1.gif" width="538" height="276" border="0"></div> </body> </html>

Agora é com vocês: porque usam o Fireworks? Tem alguma característica que eu deveria saber? Alguma ferramenta matadora que poderia me fazer deixar Illustrator e migrar para o Fireworks?

Ahh! E o André Habib fez um post bem interessante.
E com certeza vou pedir para alguém me mostrar alguma vantagem do Fireworks lá no CodeShow. Vai ser legal!

Ps.: Não preciso dizer todo aquele blá blá blá de novo, não é? Usa o que sentir melhor. Use o programa que quiser.

86 Comentários

Sobre ser informado (guerra sobre a desinformação)

A má notícia é que os desenvolvedores ainda estão muito “aéreos” com assuntos relativos a sua área. Principalmente os designers para web (na minha opinião).
A boa notícia? É que o mercado já melhorou muito nos últimos 5 anos.

Comecei com o tableless.com.br no ano de 2003. Nesse tempo o profissional de internet mudou muito. A seleção natural do mercado andou fazendo bem seu trabalho peneirando os encheridos e deixando apenas o pessoal realmente interessado. Acontece que este “realmente intessado” não deve ser seguido ao pé da letra.

A grande maioria dos profissionais não conferem feeds, não visitam sites sobre os assuntos pertinentes à sua profissão e etc… Prova disso é que mesmo depois de 5 anos, alguns profissionais ainda não ouviram sobre Padrões Web, nos melhores casos estão conhecendo agora.

Existem duas maneiras para o profissional saber que algo mudou: a primeira delas é tendo contato com profissionais antenados. A outra é sendo um desses profissionais antenados. Não digo que o camarada tem que ser fissurado. Mas pelo menos ler um ou outro site sobre sua profissão… No mínimo.

Imagine se os médicos fossem desta maneira… Negligenciando informações importantes que o ajudariam a exercer seu trabalho. Nem me fale.
Se você tem um amigo desenvolvedor assim, ajude-o a ser menos alienado. Envie links de artigos, indique sites, instigue o conhecimento dele. Ele vai ganhar, você vai ganhar, a web brasileira vai ganhar, nossa profissão vai ganhar.

Mas qual dos dois: programador ou designer é mais “desligado”? Por eu ser designer e ficar mais próximo deste grupo, fico tentado a dizer que a maioria dos designers são um pouco mais desinformados que os programadores. Programador é um tanto mais independente, ele tem uma necessidade muito maior de procurar detalhes técnicos e ir atrás disso do que o designer.
Sem desmerecer os designers que gostam de estudar e entendem bem sobre teoria das cores, psicodinâmica, gestalt e etc…
O que você acha?

Felizmente, os profissionais brasileiros hoje, estão caminhando por um bom caminho. Antes tarde do que nunca.

Quer boa leitura?

Bloglines do Diego Eis (designer)
Bloglines do Elcio Ferreira (programador)
Bloglines do Bruno Torres (programador)

4 Comentários

Portais do governo serão adaptados para cegos

Ótima notícia, já estava na hora… mas não entendi essa parte:

A secretaria vai fornecer um software, chamado “Silvinha”, que foi desenvolvido em conjunto com a organização não-governamental Acessibilidade Brasil.

Será que é um Silvinha modificado? Porque se não, a secretaria não vai fornecer nada.

Existem vários meios de você melhorar a acessibilidade do seu site sem utilizar esses tipos de validadores (que na maioria das vezes não ajudam em nada).
Para melhorar a acessibilidade para os deficientes visuais, por exemplo, a melhor forma é conhecer o mundo deles. Já experimentou navegar sem o mouse? Não? Então tente.
Depois de tentar, instale algum programa leitor de tela como o Jaws, coloque o bicho para falar e desligue o monitor, tente navegar no seu próprio site com teclado e o monitor desligado.
Se você não é cego e não experimentou fazer isso, tente. Você vai ter uma pequena sensação do que é navegar às cegas.

10 Comentários

Video do Campus Online da Visie

Atendendo aos pedidos, fiz um pequeno video mostrando um pouco o Campus Online da Visie.

Campus Online da Visie.

7 Comentários

Referência rápida de CSS

Já tinha feito um CSS Cheat um tempo atrás. No curso que tive semana passada, um aluno trouxe essa referência em inglês, olhei, gostei e fiz uma baseada na deles, só que em português!

Referência CSS Cheat em português!

8 Comentários

CSSHack para IE7, IE 6 e browsers de verdade

Um aluno estava tendo um problema de compatibilidade: o layout funcionava em Firefox e IE6, mas quebrava em IE7. Para resolver, ele utilizou aquele hack do * (asterísco) no começo da propriedade. O problema é que este csshack do asterísco também funciona no IE6. Se ele arrumasse o IE7, o IE6 que quebrava por causa do hack. Isso é fácil de resolver, veja o código:
#conteudo{ float:right; width:517px; vertical-align: top; margin-right:10px; /* Todo mundo entende */ *margin-right:15px; /* IE6 e IE7 entendem */ _margin-right:10px; /* IE6 entende */ }

Primeiro você usa a linha de código normal. Esta linha todos os browsers entendem.
Depois, logo abaixo, você coloca o csshack do asterísco, que funcionará em IE6 e IE7.
Para forçar o IE6 a ter o valor correto, você usa o csshack do ‘underline’ no começo da propriedade. Como essa linha está vindo logo após do hack do asterísco, o valor do IE6 vai ser sobreescrito.

Horrível né? Paciência.

Fiz uma busca rápida para ver se encontrava outra solução, mas achei este site com a mesma solução acima.

31 Comentários

Before & After magazine

Para os designers de plantão, visitem: Before & After magazine.

Eles publicam pequenos PDF’s com dicas, tutoriais e truques sobre design, construção de projetos, artigos sobre cor, tipografia e etc. Quem se interessar mesmo, pode até se cadastrar e pagar uma quantia para receber as publicações exclusivas em PDF’s por email. Quem é lá de fora (acho que não entregam no Brasil) pode até pagar um pouco mais e receber uma revista impressa.

Eles distribuem alguns PDF’s grátis. Bem interessante. Vale dar uma conferida.

7 Comentários

CSS Hack para o IE 7 - se alguém precisar

Ontem precisei de um hack para IE7. Fiz uma busca rápida e encontrei algo bem fácil.

Lembra do csshack para IE que você colocava um _ (underline) na frente da propriedade que você gostaria que só o IE entendesse? Pois é… ele não funciona no IE7. Mas… se trocarmos o _ (underline) por * (asterísco) ele passa funcionar!