Desastres no Photoshop

Há mais ou menos quatro anos eu comecei a mexer com web design. Na época fiz um curso que me deu uma ótima base nas ferramentas da Macromedia, hoje Adobe. Fiz meu primeiro estágio usando as mesmas ferramentas, já no segundo fui obrigada a aprender a usar o Photoshop. Briguei demais com ele, odiava, era a coisa mais complicada do mundo. Mas com o tempo acabei me apaixonando pelo falsificador!

É isso mesmo: fal-si-fi-ca-dor. hahah.. calma, não estou menosprezando a ferramenta, mesmo porque não abro mão dela de jeito nenhum, da mesma forma que a maioria das pessoas que a conhecem e aprendem a usá-la fazem o mesmo. Principalmente quem gosta de se modificar, transformar ou falsificar.

Acompanho vários artistas por meio de feeds que fazem milagres com essa ferramenta, desde vetores até aquelas artes darks sangrentas com olhos caindo. E eu não posso me esquecer dos artistas que ficam maquiando as fotos de revistas. Quem nunca viu uma foto original da Juliana Paz e a photoshopada??? Ou de qualquer outra mulher dessas revistas?! Elas têm que estar impecáveis, imagina o trabalho que estes artistas tem para que elas fiquem perfeitas. Ah é, e isso vale para os machos também.

Mas eu não estou aqui para divulgar curso de photoshop, nem algum artista, nem roubar, nem matar... aff. Eu fiz uma seleção de imagens de artistas que sabem usar o Photoshop, alguns até muito bem, mas não usam a cabeça. Na minha opnião, os detalhes de um desenho, layout, logo etc, são o que fazem a diferença. E os erros fazem uma diferença maior ainda.

Acompanhe as imagens abaixo, e você vai entender direitinho o que estou falando.

• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 

Quer chorar rir mais um pouco?? Então entra no site Photoshop Disasters, onde estão as imagens com tamanhos maiores e outras pérolas do Photoshop.

;)

Meia Amazônia Não [OFF TOPIC]

Para mais informações visitem o site Meia Amazônia Não. Essa campanha é para que não seja legalizado o desmatamento de 50% da floresta Amazônia.

Participe da campanha, divulgue para amigos, em blogs, Orkut etc e assine o abaixo-assinado para que possamos impedir isso.

Fonte: Bobagento

;)

CSS: Regras (que eu uso) na Organização do Código

Organizar códigos é muito importante, principalmente quando trabalha-se em equipe. A organização dos códigos fontes de um projeto ajudará na eficiência do trabalho, pois ficará mais fácil fazer a manutenção do mesmo e procurar por alguma linha específica.

Vou mostrar algumas regrinhas que se aplicam aos códigos CSS para uma boa organização.

Ordene e agrupe por seletores

É conveniente separar o código por seletores, preferencialmente hierarquizados, já que o navegador lê o CSS de cima para baixo, assim, você mudará pequenas diferenças (cor, tamanho da fonte etc) de um seletor para outro.

A ordem que eu uso é: *, html, body, a:(link, hover, active, focus, visited), p, h(1, 2, 3, 4, 5, 6), table, tr, th, td, fieldset, legend, address, ul, li, ol, dl, form, input, select, label, textarea, div, img, span, #nomeId, .nomeClasse.

Esses são os seletores que eu mais uso nos projetos. No .css ficaria assim:

ul, li, .msg {}
ul {}
li {}
.msg {}

Mesmas propriedades para vários seletores

Acho que um dos maiores problemas dos CSS's é o fato de ter repetida as mesmas propriedades para vários seletores. Isso prejudica o código em sua estrutura e principalmente no seu tamanho, tanto visual quanto virtual. Veja o exemplo abaixo:

h1, h2, h3 {
font-weight:100;
}

a strong {
font-weight:100 !important;
}

strong {
font-style:italic;
font-weight:100;
}

#nav {
font-style:italic;
}

.msg {
font-style:italic;
}

/*Esse código pode ficar assim:*/
h1, h2, h3, strong {
font-weight:100;
}

a strong {
font-weight:100 !important;
}

strong, #nav, .msg {
font-style:italic;
}

Dica: Leia Dica de otimização de CSS I para ver uma técnica de aninhar as propriedades do CSS.

Declarações em ordem alfabética

Ordenar as propriedades em ordem alfabética ué. Entendeu não?

#container {
border:1px dashed;
color:#000;
margin:auto;
padding:1em 0;
width:700px;
}

Separar as cores

Separar as cores de bordas, backgrounds, textos etc. Se você precisar usar o mesmo CSS para outro projeto de cores diferentes não será necessário editar linha por linha.

body {
border-left:2px solid #040770;
border-top:2px solid #040770;
}

td {
background:#040770 url(../img/linkOn.gif) no-repeat right;
border:1px dashed #040770;
}

a:hover {
background-color:#040770;
padding-right:15px;
}

/*Com a separação do código fica assim:*/

body {
border-left:2px solid;
border-top:2px solid;
}

td {
background:url(../img/linkOn.gif) no-repeat right;
border:1px dashed;
}

a:hover {
padding-right:15px;
}

/*CORES*/
body, td {
color:#040770;
}

td, a:hover {
background-color:#040770;
}

Nomeie os blocos do CSS e separe-os com espaços duplos

Separe-os por blocos titulados, como no último exemplo. Fica mais fácil de entender.

/*LINKS*/
a:hover, a:active {
background:url(../img/linkOff.gif) no-repeat right;
color:#666;
cursor:pointer;
}


/*TEXTOS*/
p {
margin:15px 0;
}

p .msg {
margin:15px 6px;
}

p .ins {
list-style:none;
text-align:justify;
width:419px;
}


/*TITULOS*/
h1, h2, h3 {
margin-top:10px;
padding:0 0 3px 5px;
width:75%;
}

Últimas regras:

Tente não usar hacks (apesar dos IEk's não deixarem);

Use um CSS "global.css" para colocar as propriedades padrões e importar outros arquivos .css;

Se for um projeto maior, separe os arquivos .css para form's e seus filhos como input, label, textarea, .btn etc. Essa dica pode ser usada para outras situações como tabelas ou fieldsets;

Importe apenas o arquivo global.css no HTML;

Idente o código. A imagem do post é um ótimo exemplo;

Tente validar o seu código.

Depois desse artigo não devo continuar a série de otimização, acho que coloquei todas as que eu uso aqui. Mas se eu aprender alguma coisa nova, divulgo no blog.

;)

6 Etapas para o desenvolvimento de um site

Esse artigo é uma lista de etapas que podem ser seguidas para o desenvolvimento de um site. Ajudará quem está começando a se organizar melhor.

Nele descreverei pontos para ajudar no relacionamento com o cliente no processo de criação e desenvolvimento do site.

Serão descritas etapas mais específicas para o desenvolvimento de web sites, porém não se limitam somente a este tipo de projeto.

O processo de desenvolvimento de um site pode ser enumerado nas seguintes etapas:

1. Coleta de Informações


2. Planejamento


3. Design


4. Desenvolvimento


5. Testes e Publicação


6. Manutenção

Etapa 1: Coleta de Informações

Nessa primeira etapa serão coletadas as informações necessárias para o desenvolvimento do site. Recomendo um briefing com as principais perguntas: público alvo, concorrentes, preferência de cores, material disponível (fotos, textos, identidade visual do cliente etc), prazo etc. Quanto mais detalhado, mais fácil será o desenvolvimento.

Essa etapa é a mais importante, pois vai dar ao cliente um maior entendimento do projeto, e é nela também que você passará ao cliente qual é a melhor apresentação do site: navegação, posicionamento dos objetos, se terá ou não animação em Flash, entre outros. Lembre-se que o cliente não sabe nada do que você faz nem a melhor maneira, por isso que deve ser mostrado qual é a melhor solução, dependendo do público alvo, conteúdo, quantidade de textos e fotos.

Uma lista de coisas que devem ser consideradas:

1. Propósito: qual o propósito do site? Fornecer informações, serviços, propaganda, vendas...?


2. Metas: Quais as expectativas em relação ao site? Fazer dinheiro ou compartilhar informações?


3. Público Alvo: Qual o grupo de pessoas que ajudarão a alcançar as metas? Qual é o tipo de pessoa que quer que visite o site? Idade, sexo, interesses são fatores importantes no desenvolvimento de um bom design.


4. Conteúdo: Qual o tipo de informação para o público alvo? Algum assunto específico, um produto ou serviço, algum requisito..?

Etapa 2: Planejamento

Com as informações coletadas na primeira etapa, é hora de fazer o planejamento do site. Esse planejamento inclui a navegação do site e seu mapa.

O "mapa do site" é feito com os tópicos mais importantes e seus sub-tópicos, se tiver. Ele é um índice para um fácil entendimento da navegação do projeto.

As informações de um site são ligadas através de links e um menu principal. Uma navegação efetiva é intuitiva, ou seja, a pessoa que entrar no site não precisa ficar procurando pela informação desejada. Não seria correto colocar no link de contato um ícone de casinha.

Nessa etapa também será decidida a tecnologia usada para o desenvolvimento: Flash, HTML, Ajax etc, você que dará a melhor solução para o cliente. Não recomendo o desenvolvimento de sites com muito texto em Flash, da mesma forma que um hotsite chamaria muito mais atenção com o uso dele.

Dica: Após essas duas etapas recomendo que seja feito um contrato de prestação de serviços, para sua segurança e do cliente. Veja o exemplo no site da revista Web Design.

Etapa 3: Design

A primeira etapa de um design é o rascunho. Com as primeiras etapas feitas você terá a identidade visual do cliente, as cores (geralmente as mesmas da logo), a quantidade de informações, textos, imagens etc. Antes de começar a desenhar uma versão no pc, mostre um rascunho para o cliente. Dessa forma você terá menos chance de ter que começar tudo de novo porque ele não gostou da idéia.

Com a aprovação desse rascunho passe para o pc. No final de cada layout, apresente a versão final e deixe claro no contrato do projeto que ele não pode ficar modificando o layout. Claro que pequenas modificações são aceitas, por isso que mostramos essa versão, para que na hora do recorte de layout, não seja necessário fazer modificações que poderiam ser feitas nessa etapa com muito mais facilidade, evitando assim o retrabalho.

Dica:Tente deixar arquivada a evolução do layout, pelo menos em .jpg. É bom para experiências futuras!

O feedback com o cliente nessa fase é crucial para assegurar sua satisfação e para que não haja "perda de tempo". Imagine terminar o código da página e ter que fazer outro design? Pior ainda se for uma apresentação no Flash. Lembre-se sempre de evitar o retrabalho.

Etapa 4: Desenvolvimento

Após a aprovação dos layouts das páginas, é hora de recortar tudo e implementar suas funcionalidades. Agora o site começa a ser criado.

Geralmente esse desenvolvimento começa da página inicial indo para as internas, principalmente por ser usado um "skin" para as outras páginas. O skin é a parte do site que se repete: navegação, topo, rodapé...

No decorrer do desenvolvimento você perceberá quais as melhores maneiras de interação do usuário com o site. Faça as modificações adequadas, mas não coloque códigos ou animações desnecessárias. Isso atrapalha muito na implementação das técnicas SEO.

Deixe o código bem identado, de fácil entendimento e use os padrões atuais dos web standards, isso ajudará na manutenção.

O mais importante nessa fase: desenvolva um site que seja bem visualizado em pelo menos dois navegadores diferentes: Firefox e Internet Explorer. O usuário final pode acessar o site de qualquer plataforma.

Dica:Não use arquivos .js e .css dentro do mesmo código das páginas, faça chamadas externas, assim o seu código não vira uma lingüiça e também não corre o risco de dar algum problema na visualização, sem falar que fica bem mais organizado.

Etapa 5: Testes e Publicação

Nessa fase, você precisará da ajuda do cliente ou de alguém de fora. Geralmente a pessoa que está fazendo o trabalho não vê pequenos detalhes que podem fazer grande diferença no final. Aceite sugestões e opiniões de outras pessoas, tanto alguém que também seja desenvolvedor, quanto uma pessoa que não entende nada de computadores.

Faça teste nos links para ver se não estão direcionando para lugares errados; verifique a compatibilidade dos navegadores quanto à visualização (navegadores antigos são os que dão mais problemas); resolução de tela; usabilidade (pessoas com daltonismo vão conseguir identificar um link no site?).

Após "defeitos concertados" e a aprovação do cliente, é hora de publicar o site. Um programa de FTP faz o upload dos arquivos para a internet, onde o site será visualizado por qualquer pessoa. Nessa etapa você pode oferecer ao cliente um suporte para registro de domínio e a escolha da melhor hospedagem caso ele não tenha.

Faça mais um teste por precaução e peça para o cliente fazer o mesmo antes da divulgação oficial.

Etapa 6: Manutenção

Somente o desenvolvimento do site não é o suficiente. Uma maneira de garantir novos visitantes ou manter os atuais é atualizando a página com novos produtos, serviços, informações. Se for um cliente que precise de atualizações constantes, faça um contrato de manutenção. Caso ele mesmo prefira fazer isso, ofereça alguma ferramenta de CMS e adapte ao site.

Nessa etapa você pode oferecer as técnicas SEO. A otimização dos elementos como títulos, meta tags, descrição, palavras chave entre outros, são muito importante para a posição do site nas páginas de busca. Além disso, o uso de ferramentas de análises podem ser feitas para acompanhar o desempenho do site quanto ao número de visitantes, se o usuário está vindo de link direto ou se vem de alguma outra fonte. Visite o site Mestre SEO para algumas dicas.

Para fazer esse artigo, coloquei experiências próprias e algumas do artigo "6 Phases of the Web Site Design / Development Process" da Selene M. Bowlby, que me deu uma base para escrever o conteúdo.

Espero que ajude!

;)

Progamas de emular Internet Explorer

Todo web designer sabe que seu site pode ser acessado por qualquer usuário independente do sistema operacional ou do navegador usado.

Infelizmente, sabe também que para que não se tenha problemas de interface, sem que haja diferenças de um navegador para o outro, vai ter que testar seu site, em pelo menos, nos browsers mais usados.

Sabemos que nosso maior problema é a incompatibilidade de alguns navegadores que não seguem os padrões W3C ou que são ultrapassados. Por isso estou fazendo esse post, para listar alguns programinhas que são uma mão na roda quando formos testar no IE6 e IE7, que acredito que sejam os nossos maiores problemas, já que esses seguem padrão "Tio Bill". Quanto aos outros navegadores, os que eu uso que são o Opera, Safari e Netscape não tive problemas, somente uma margin ou uma div que ficou com tamanhos diferentes, coisas que não fazem muita diferença e nem estragaram o Tableless.

• IE Tab

  Esse plugin para o Firefox deixa emular o IE que estiver instalado na sua máquina em uma tab. É bom, pois economiza na memória do pc e facilita no trabalho.

• Multiple IE

  Esse programa instala, desde a versão 3 até a 6. É melhor para quem já tem o IE7 instalado. Eu instalei na máquina para emular as versões 5.5 e 6. Geralmente, as incompatibilidades de uma versão para a outra são as mesmas.

• IETester

  Emulador dos IEs: 8beta1, 7, 6 e 5.5. É instalado na máquina e o sistema operacional deve ser um XP ou Vista, de preferência com o IE7 instalado pois com o IE6 pode ter alguns probleminhas no emulador do IE7 e IE8 por causa de algumas configurações que ele não possui.

Eu tenho os três instalados. O último coloquei na semana passada para ver como que ia ficar um site que fiz no IE8. Fiquei decepcionada demais... mas não surpresa. O Multiple IE ajuda bastante, apesar de ter de abrir uma janela para cada navegador. E o IE Tab é essencial para qualquer web designer.

Quanto aos outros navegadores, não conheço nenhum emulador que tenha todos, mas tem o site Browser Shots que pode fazer isso, caso você não queira instalar um por um. Eu prefiro instalar, e acho mais seguro também.

Indico o site W3Schools para acompanhar as estatísticas dos navegadores mais usados.

;)

Calendários de Junho Smashing Magazine

Mil anos depois de atualizar o blog, só um link porque é uma coisa rápida mesmo.. he

Todo mês no site Smashing Magazine são colocados alguns wallpapers para os usuários fazerem o download.

No mês passado eu mandei um meu, e está lá. Dêêm uma olhadinhaa!!! ^^

ps.: Não estou atualizando o blog por falta de tempo, já que era no trabalho que eu atualizava. Mas já tenho algumas idéias para os próximos posts, então: "POR FAVOR NÃO ME DEIXEM.... *__*" hehe

;)