Posts com a tag: "Desenvolvimento"

20 Sep 2007

Desenvolvimento web e a produção de impressos

Digamos que atualmente o mercado gráfico está consolidado. Os clientes já se acostumaram, salvo algumas exceções, a aprovar o layout, alterar o conteúdo e finalizar o material. Eu sei que a realidade não é tão bela assim, mas comparado ao mercado web, em questões de relacionamento com o cliente[bb], o mercado gráfico está anos-luz a frente.

Essa rotina de layout-alteração-finalização que o mercado de web herdou do gráfico deixa muito a desejar pois um site nunca deve ser finalizado. Diferente de um folder ou até mesmo uma apresentação multimídia, um site não possui período ou público específico, um site fica exposto o tempo todo a qualquer pessoa que queira acessá-lo. Com o tempo ele se torna defasado e carente de atualizações que possam interessar àqueles que já o conhecem, com o intuito de fidelizar futuras visitas.

Assim sendo, um material gráfico, em geral, cumpre seu papel ao ser lido pelo receptor. Já um site, tem a necessidade de conquistar o internauta a cada acesso, independente de ser a primeira vez ou não.

É por isso que a adaptação de materiais gráficos para web como forma de desenvolvimento pode ser uma interpretação errônea. Muitas vezes a criação de um novo conceito ou serviço específico para internet torna-se mais vantajoso para a empresa e para o desenvolvedor, pois obtém-se mais acessos e melhores resultados. Isso depende apenas do planejamento[bb] do projeto e da forma como o cliente é atendido.

Update: O título original desse artigo era “Desenvolvimento web além da alteração de materiais gráficos”. Mudei depois que o pessoal do Webinsider incluiu, com o título modificado, um link para o post no Outrolado.

Tags: ,
Nenhum comentário
14 Sep 2007

Site focado em resultados

Dos itens abaixo, qual você considera o mais importante em um projeto web?

  • CSS
  • XHTML
  • Programação
  • Layout
  • Grande número de acessos
  • Servidor estável
  • Usabilidade
  • Acessibilidade
  • Participação dos usuários
  • Posicionamento em mecanismos de busca.

Na minha opnião nenhum. O fator mais importante é o resultado. É ele quem vai determinar seu crescimento no mercado. Todo profissional de web conhece sites que fazem sucesso e não possuem algum dos fatores acima. Esses sites simplesmente seguem muito bem o propósito a que foram destinados.

O começo do projeto

Ao dar início a um projeto o principal é planejar suas metas. Não adianta vender um site administrativo (termo que não me agrada nenhum pouco) se você nem ao menos tem idéia de onde quer chegar. É importante acertar com o cliente quais os objetivos e alcança-los. Se isso não ocorre, é porque alguma etapa do processo de trabalho precisa ser revista, nem que seja aquela parte em que você deu ouvidos ao cliente. Coloque uma coisa na cabeça, existem muitos profissionais que constroem sites, tá cheio de curso de web design por aí. Agora desenvolver sites que realmente funcionam são poucos que conseguem.

Mas o cliente quer um site no ar e ponto final

Se o cliente não quer mesmo saber dessa “ladainha” (acredite, eu já ouvi isso), elabore suas próprias metas. Suba o site no ranking de buscas, faça um site mais leve, facilite o acesso a determinadas informações, elabore um layout melhor que o da concorrência e mostre ao cliente. Pode ser que ele não dê muita relevância, mas pelo menos ele ficou sabendo que alguma coisa você fez. Isso evita aquela história de, no meio do projeto, o cliente querer mudar tudo porque não está bom (pra ele).

Alcançando as metas

O principal meio é o estudo de métricas. Analise-as e faça as correções ou melhorias em seu site. descubra porque determinadas áreas são menos acessadas e realize campanhas on-line e off-line. Em determinados mercados somente o investimento on-line não é suficiente, é necessário aliar campanhas off-line para alavancar o sucesso do projeto.

Acompanhando e aprimorando

Não basta fazer, terminar e entregar. Acompanhe o projeto o tempo todo, nunca deixe de melhora-lo, revise sempre aqueles itens que citei lá no começo. Já atingiu o resultado esperado? Ótimo, agora trace novos objetivos e continue.

Se você ainda não tem esse hábito, foque em resultados, mesmo se o seu ambiente de trabalho não dá brecha para essa linha de desenvolvimento, trace seus próprios objetivos dentro ou fora do projeto. Os profissionais de web mais conhecidos do mercado, em sua maioria, fizeram parte de algum case que atingiu a meta proposta. E saiba que obter resultados, não significa necessariamente ficar famoso, mas sim deixar você e o cliente satisfeitos, pelo menos até a próxima meta.

Tags: , , ,
1 Comentário
04 Sep 2007

Dicas para desenvolver páginas de produtos

Ao desenvolver um site institucional, geralmente o mais importante é a área de produtos ou serviços. É a vitrine do que a empresa vende. Não é raro encontrar sites com péssima estruturação dessas áreas, muitos sites chegam a ter uma ótima apresentação, mas pecam na hora de mostrar seus produtos e/ou serviços.

A situação piora drasticamente em alguns nichos de mercado onde existem empresas que chegam a ter mais de 500 produtos dentro de infinitas categorias, e, é claro, a empresa quer mostrar seus produtos no site (afinal é através disso que ela sobrevive). Como montar um estrutura que suporte um grande volume de dados e possua uma interface intuitiva e amigável com o usuário?

Nesse caso não estamos tratando de sites focados em comércio eletrônico[bb], mas sim de sites que oferecem uma estrutura de informação sobre seus produtos, claro que em alguns casos pode haver uma opção de comercialização, mas, como é mostrado posteriormente, deve ser utilizado com cuidado.

Vamos lá.

Conheça o produto

Briefing não existe à toa. Antes de mais nada, peça para o cliente explicar tudo sobre o produto. Conheça o que é e para que serve cada especificação técnica e característica do produto, mesmo sendo um produto pouco conhecido ou voltado para um mercado específico. Conhecendo o produto você já consegue saber como apresentá-lo melhor.

Crie uma página de apresentação para os produtos

O internauta pode não estar procurando um produto específico, ele pode estar só querendo conhecer a linha de trabalho da empresa, então evite apenas listar as categorias existentes, dependendo do caso, ele pode até desconhecer o significado de cada categoria. Criando uma página de apresentação você causa um impacto maior e consegue apresentar os produtos mais relevantes, direcionando o visitante para eles.

Imagem é tudo

Saiba trabalhar as fotos[bb]. Por mais simples que seja, forneça imagens de utilização, de ângulos diferentes e das qualidades do produto. Evite utilizar apenas uma foto. Visual é de extrema importância, quanto mais o internauta assimila o produto, mais ele o vincula à sua marca. Ás vezes, pode ser que ele esteja procurando apenas um detalhe específico do produto.

Apresente os preços discretamente

Se você não está focando em comércio eletrônico e sim em apresentação, não mostre os preços na lista de produtos, deixe para mostrar somente na hora de visualizar os detalhes. O preço pode espantar o internauta sem que ele saiba realmente o que o produto oferece. Um exemplo: a Apple faz o usuário conhecer o produto, aponta as qualidades, pra depois muito discretamente informar o valor junto à opção de compra.

Claro que isso não é válido nos casos em que o internauta estiver fazendo alguma comparação ou pesquisa.

Inclua o máximo de informações sobre o produto

Não seja superficial na descrição dos produtos. Deixe o internauta obter todas as informações que ele venha a precisar.

Tome cuidado com o uso de termos técnicos para não confundir os leigos e cuidado ao elaborar a estrutura de apresentação das informações, se houver muitos dados para mostrar cuide para a página não ficar confusa.

E por mais técnico que seu site seja, deixe para mostrar as informações técnicas somente na página específica de cada produto.

Não deixe o usuário se perder

Ofereça uma navegação usual e amistosa entre os produtos. Se houver muitas categorias e subcategorias, procure informar a localização do usuário.

Não complique a navegação, fixe um menu onde seja possível acessar todas as outras categorias facilmente. Um sistema de busca EFICIENTE também é indispensável.

Evite quebrar a área de produtos. Por exemplo, no menu principal do site inclua o link “Produtos”, ao invés de incluir dois links “Categoria1″ e “Categoria2″. Deixe para listar as categorias dentro da página principal de produtos.

Exemplos

Esses são alguns dos vários sites que pesquisei. Alguns deles são direcionados a públicos específicos, foquei somente na arquitetura de informação, não me prendi a problemas de design e usabilidade, muito menos na má qualidade do serviço oferecido por alguns.

Bosch

Prós:

  • Visualização dos produtos nas páginas de cada categoria;
  • Informações e especificações técnicas dos produtos.

Contras:

  • Categorias integradas ao menu principal. Apesar de serem áreas de atuação diferentes para cada categoria, o conteúdo de produtos se mescla com os demais;
  • Dificuldade na troca e localização das categorias;

Adobe

Prós:

  • Facilidade para encontrar produtos;
  • Diversos meios de navegação entre os produtos

Intel

Prós:

  • Informações sobre os produtos.

Contras:

  • Navegação é confusa e não segue padrão algum.

Itautec

Prós:

  • Fácil acesso à categorias diferentes;
  • Navegação intuitiva;
  • Descrição e especificações técnicas dos produtos.

LG

Prós:

  • Fácil acesso a outras categorias;
  • Descrição e especificações técnicas dos produtos.

Philips

Prós

  • Conteúdo das informações e especificações técnicas dos produtos.

Contras:

  • Navegação complicada e informações mal organizadas.

Samsung

Prós

  • Fácil acesso à produtos de uma mesma categoria;
  • Especificações e informações de suporte dos produtos;

Apple

Prós

  • Apresentação com destaque para os principais produtos;
  • Navegação intuitiva;
  • Clareza e organização nas informações de cada produto.

Finalizando…

É obvio que somente essas dicas não são suficientes. É preciso aliar essas informações a bons conceitos de design, usabilidade, SEO e padrões web para obter sucesso no seu projeto. Nem vou falar que URL’s amigáveis, qualidade de acesso, conteúdo bem redigido e HTML impecável ajudam ainda mais. Isso é coisa que qualquer desenvolvedor web deveria saber. E utilizar.

Tags: , , ,
Nenhum comentário
29 Aug 2007

Utilizando seletores de atributo no Internet Explorer 6

Uma das maiores utilidades dos seletores de atributo talvez seja estilizar formulários sem a utilização de classes. Entretanto, essa é uma técnica pouquíssima utilizada pois o Internet Explorer 6 e suas versões inferiores não interpretam o uso de seletores CSS.

Para estilizar o botão submit de um formulário utilizando seletores de atributo, podemos escrever o CSS da seguinte maneira:

input[type=submit] { propriedades }

Mas como o IE6 não interpreta esse código, geralmente aplica-se uma classe no submit do formulário ao invés de utilizar os seletores.


<form>
<label for="username">Nome</label><input type="text" id="username" />
<input type="submit" class=”submitButton” />
</form>

Pesquisando sobre seletores de atributo, encontrei este link no Shayna.com com um javascript que simula o uso de seletores de atributo no IE6. Basicamente, ele faz o que eu disse anteriormente, inclui uma classe para cada um dos elementos input existentes na página.

Para utilizá-lo, copie esse código e salve como ie6css.js.


function changeClasses(currentdoc) {
var inputElements = currentdoc.getElementsByTagName('input');
for (var i=0; i<inputElements.length; i++) {
if(inputElements[i].type == “submit”) {
inputElements[i].className = inputElements[i].className + ” submit”;
} else if (inputElements[i].type == “checkbox”) {
inputElements[i].className = inputElements[i].className + ” checkbox”;
} else if (inputElements[i].type == “radio”) {
inputElements[i].className = inputElements[i].className + ” radio”;
} else if (inputElements[i].type == “text”) {
inputElements[i].className = inputElements[i].className + ” textbox”;
}
}
}

E inclua esse código no cabeçalho da sua página:


<head>
<!--[if lt IE 6]><script type=”text/javascript” src=”assets/js/ie6css.js” ></script><![endif]–>
</head>
<body onload=”changeClasses(document)”>
…
</body>

Na verdade, o javascript só elimina o nosso trabalho de incluir uma classe para os elementos. Ele busca todos os input do html e inclui classes relativas ao tipo de cada input.

  • Para type=”submit” inclui uma classe submitbutton;
  • Para type=”checkbox” inclui uma classe checkbox;
  • Para type=”radio” inclui uma classe radio;
  • Para type=”text” inclui uma classe textbox;

Assim sendo, você precisa aplicar um estilo para cada uma das classes no seu arquivo CSS. Por exemplo:

input[type=submit],
input.submitbutton { propriedades }

Particularmente eu acho mais fácil incluir as classes manualmente, até porque se o internauta estiver com o javascript[bb] desabilitado corre-se o risco de perder alguma formatação.

Mas, de repente, pode ser útil em alguma situação específica.

Tags: , , , , ,
Nenhum comentário
24 Aug 2007

Tag br pra quê?

É sério, eu não consigo enxergar muita utilidade para a tag <br />. Pelo menos não tanto quanto alguns desenvolvedores enxergam.

Pular uma linha após o input do form? Ajuste o CSS do input para “display:block”.

Deixar a imagem sem nenhum texto ao lado? Idem anterior, “display:block” para a imagem.

Alinhar o texto verticalmente? Simples, especifique um padding para o container desse texto ou em casos mais específicos use o vertical-align.

Aumentar a altura da div? Propriedade height.

Título e subtítulo com o mesmo link do texto? Deixe de preguiça e faça do jeito certo, um link para cada elemento, e claro, utilize as tags adequadas para cada um deles.

Ás vezes parece mais prático utilizar um <br />, mas na hora de atualizar pode ser que você tenha que alterar o HTML e o CSS, sendo que você poderia mexer apenas no CSS. Eu sei que é uma coisa mínima, mas isso é separar conteúdo de apresentação, um dos princípios dos padrões web standards.

Até hoje consegui encontrar apenas uma aplicação plausível para a tag <br />. Poesias[bb], pois é necessário delimitar os versos.

No meio do caminho tinha uma pedra <br />
tinha uma pedra no meio do caminho <br />
tinha uma pedra <br />
no meio do caminho tinha uma pedra.

Se alguém conhecer outra utilização semântica para a tag <br /> avise, eu não lembro de mais nenhuma.

E antes que digam. Sim, eu sou chato pra escrever qualquer HTML. :-)

Tags: , , ,
9 Comentários
Página 2 de 3«123»
Topo