Nagüeva! « Página 14

Rodapé sempre no fim da página (sem javascript)

Para o novo site da Hiperquímica(que ainda não foi ao ar) precisei de uma solução para manter o rodapé sempre no fim da página, independente da quantidade de conteúdo que viria antes. Uma pesquisa rápida no Google me levou até algumas alternativas que utilizavam javascript [bb] (não me agradaram nem um pouco) e outras que utilizavam somente CSS.

As alternativas com CSS em sua maioria utilizavam duas propriedades para o rodapé: “position:absolute” e “bottom:0″. O problema dessa solução é que se redimensionarmos a janela do navegador, o rodapé sobrepõe o conteúdo, veja um exemplo dessa aplicação.

Procurando em sites gringos, encontrei uma solução interessante no qrayg.com. Adaptei o arquivo e disponibilizei um exemplo com código-fonte mais enxuto, confira!

O arquivo com exemplo dessa solução está bem simples, então acredito que não haverá dúvidas. Mas se precisarem de algum esclarecimento, é só comentar!

Postado em: Web Work

24 Comentários

BlogCamp Paraná 2007

Neste fim de semana acontece o BlogCamp Paraná, um evento onde blogueiros se reunem para debater assuntos pertinentes à área.

Nem preciso dizer que vou estar por lá. Algumas figurinhas como a Bia Kunze, o Frederick van Amstel, Nick Ellis e o Fernando “Undergoogle” também vão participar. A expectativa é grande e, até o momento, são mais de 130 inscritos.

Na sexta-feira (30/11), o pessoal se reune no Off-Road Bar para discutir os temas do debate e se conhecer melhor, com direito a BlogDrink, wireless e estacionamento gratuito.

No sábado (01/12) ocorre o evento propriamente dito e, com certeza, assunto não vai faltar já que o tema central será “Blog como canal de comunicação e negócios“.

Você pode saber mais acessando o site oficial do BlogCamp, perfil no twitter, lista de discussão ou o mapa do evento.

Como estou em Curitiba, me coloco à disposição daqueles que precisarem de algo. Basta entrar em contato.

A inscrição é gratuita, então aproveitem!

Postado em: Eventos, Web Work

2 Comentários

Zen V Plus e a qualidade dos serviços Creative

Recentemente adquiri ganhei um Creative Zen V Plus. Um player de mp3 [bb] , fotos e vídeo. Um ótimo produto na minha opnião de usuário recente. Atualmente, ele não está na linha de frente da Creative, mas já esteve.

Esse é o dito cujo.

Ao que parece, ele é um concorrente direto do Ipod. Entretanto, ele não consegue, nem de longe, bater de frente com o mesmo. Simplesmente por problemas de acessibilidade e usabilidade nos serviços da Creative, quer ver?

Integração com sistemas operacionais

O Ipod, mesmo sendo fabricado pela Apple, funciona no Windows e já possui boas soluções para Linux (desenvolvido pelos próprios usuários).

Acredito que por ser concorrente de um produto Apple, a Creative não disponibiliza versões dos programas para o Zen V Plus [bb] fora da plataforma Windows. Até então, não encontrei soluções para interagir com outras plataformas, encontrei uma alternativa para Mac e outra alternativa para Linux (também desenvolvida pelos usuários) que é bem inferior à solução do Ipod e um tanto complicada para leigos. Infelizmente, ainda não tive a oportunidade de testar nenhuma.

Sincronia de dados

No Ipod, a sincronia é feita através do Itunes, um excelente software para gerenciar arquivos de áudio e vídeo. Através de apenas uma interface você tem acesso a músicas, vídeos, podcasts, rádios on-line, ringtones, jogos para o próprio Ipod, compra de músicas na Itunes Store e integração com outros produtos Apple (Sim, eu sou um usuário Itunes).

Já no Zen V, o CD que acompanha o dispositivo instala uns 4 programas que servem ao mesmo propósito: enviar dados ao player. Todos são fáceis e intuitivos de utilizar, mas ainda não entendi o motivo de diversos programas com o mesmo objetivo. Isso atrapalha pois, ás vezes, utiliza-se um botão para determinada tarefa numa interface e na outra ele não existe. Sem contar os demais softwares para gerenciamento de podcasts e do disco removível. Ou estou mal-acostumado com o Itunes, ou podiam ter reunido todas as funções em apenas um software.

Abrindo um parênteses, o Windows Media Player também pode ser utilizado para a sincronização, mas o programa foge do padrão de pastas do Zen V e inclui algumas pastas que só apagam após a formatação.

Suporte

Faça um teste, acesse o site da Apple e obtenha informações sebre o Ipod. Simples rápido e eficiente.

Não entre no site da Creative, a navegação, na minha opnião, não é nenhum pouco amistosa. Confesso que me perdi lá dentro, algumas informações só existem em determinados idiomas. O site oferece suporte a vários idiomas, mas a versão para o Brasil é em inglês.

Mas e o Zen V afinal?

O aparelho em si é muito bom e, em questões de hardware, acredito que possui gabarito para disputar mercado com o Ipod. Os problemas que citei são críticas aos serviços da Creative e não ao aparelho. Utilizei a Apple como referência por ser líder nesse segmento e por apresentar um serviço de ótima qualidade em tudo que produz. Digamos que essas 3 questões, se solucionadas, poderiam alavancar o crescimento do player no mercado e seriam suficientes para dizer que a empresa estaria à altura do Zen V, que, na minha opnião, é excelente.

Futuramente publico um release sobre o aparelho contando os detalhes de sua interface, parece que toda a linha Zen é muito boa. As reclamações que encontrei foram todas relacionadas as que escrevi aqui, a Creative desenvolve ótimos produtos, mas peca na integração com outros dispositivos.

Postado em: Informações Gerais, Reviews

10 Comentários

Definindo a linguagem padrão do estilo aplicado no HTML

Geralmente inserimos folhas de estilo externas ou utilizamos o atributo style para inserir informações de estilo no HTML. A tag link é a opção mais utilizada e recomendada para inserir folhas de estilo externas, por exemplo:

<link href="cute.css" rel="stylesheet" type="text/css"/ >

Repare que nesse caso é informada qual a linguagem utilizada no estilo, através do type=”text/css”. Agora se você está utilizando o atributo style para estilos inline, o user agent pode não saber qual a linguagem utilizada no estilo aplicado. Ou se uma empresa desenvolver uma nova linguagem de estilos e um novo mime-type por exemplo, seria difícil impor e assegurar o funcionamento na plataforma de distribuição que temos hoje. Entretanto, existe uma maneira.

Se você precisar especificar uma linguagem padrão para todos os estilos aplicados no seu site, você pode utilizar uma meta tag no cabeçalho da sua página:

<meta http-equiv="Content-Style-Type" content="text/css"/>

E você pode inserir essa informação no header HTTP:

Content-Style-Type: text/css

Caso você utilize um servidor Apache, a partir da versão 2.0 você pode usar mod_headers e mod_setenvif no arquivo geral de configuração ou trabalhar a nível de diretório através do .htaccess:

SetEnvIf response Content-Type [text/html|application/xhtml+xml] html-content=1 Header add "Content-Style-Type: text/css" env=html-content

Vale lembrar que essas configurações não são ativadas por padrão na base de configuração do Apache [bb] , se você quiser utilizá-las, deve ativá-las manualmente.

Obs: Este artigo é a tradução de um post do blog da W3C. Incluí alguns links para ajudar que, em alguns casos, podem refletir a minha opnião e de outros autores. Se houver dúvidas, comente!

Postado em: Web Work

1 Comentário

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.

Postado em: Web Work

Deixe seu comentário

Avaliando o trabalho de outros profissionais

É fácil falar sobre usabilidade, acessibilidade e afins. Mais fácil do que falar é avaliar esses critérios no trabalho dos outros . Isso me incomoda profundamente. Não por terem avaliado meu trabalho, a questão é que quando falamos de internet, a maioria dos profissionais olha apenas o próprio umbigo e esquece que um dia passaram por um processo de aprendizado.

Uma das melhores partes de trabalhar com web é a auto-avaliação que fazemos. Você termina um site e consegue mensurar o aumento do seu nível de conhecimento. Mas por nos tornarmos melhores, não ganhamos o direito de nos tornar analistas, isso não dá o direito de sairmos por aí criticando outros profissionais que não estão no mesmo nível. É preciso ser auto-crítico e ver que existem milhares de profissionais melhores. Eu, particularmente, não critico por isso aqui. Alguns anos atrás eu achava que era o cara.

É fácil para um profissional de web analisar outros sites. Não é raro descobrir que seu site é bem mais estruturado que outros, mas dar conselho é uma coisa, criticar reclamando é outra. Existem maneiras amigáveis de dizer a outros profissionais que aquela forma de raciocínio é errada.

Concordo que os famosos “sobrinhos” são, de certa forma, prejudiciais ao mercado. Mas, se muitos deles são profissionais em início de carreira e aprendizado, por que não mostramos a eles qual caminho seguir, ao invés de só dizer:

- Onde já se viu? Site em flash e tabela? Isso não pode e ponto final.

Não é melhor incluir argumentos e explicar o porquê de cada coisa? Auxiliando no aprendizado de novos profissionais, estaremos contribuindo para uma melhoria, ainda que pouco significativa, na qualidade do nosso mercado de trabalho [bb] .

Estou dizendo isso, pois essa semana acompanhei um episódio curioso numa lista de e-mail. Um participante disse que estava começando na área e queria opniões sobre o site que ele tinha desenvolvido. Foram mais de 20 respostas até onde acompanhei, onde apenas uma conceituava a opnião dada. Todas as outras se resumiam a reclamações e opniões pessoais do tipo “não gostei” sem ao menos citar o porquê. O participante que havia pedido ajuda, com relação à utilização de tecnologias que ele havia feito, só recebeu pedradas. Resumindo, ninguém ajudou e, muito menos, o recepcionou bem na lista.

Então, de que adianta melhorar a qualidade de nosso trabalho se não contribuirmos na melhoria de nossa área de atuação? Não estou dizendo que todos devem ter blogs e fóruns com tutoriais sobre internet. Mas se não for ajudar, não atrapalhe.

Os “sobrinhos” e seus “tios” sempre vão existir, mas existe muita gente por aí que não se encaixa nesse conceito, muitos estão apenas começando e querendo aprender. Se você é um bom profissional, com certeza você não deve se preocupar com isso. Agora se você está competindo com esses profissionais e quer exterminá-los do mercado, abra o olho. Pode ser que você seja um deles e não percebeu. Ser “sobrinho” não é questão de conhecimento, é questão de atitude.

Postado em: Web Work

2 Comentários

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.

Postado em: Web Work

1 Comentário

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.

Postado em: Web Work

Deixe seu comentário

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.

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

<head>  </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.

Postado em: Web Work

Deixe seu comentário

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.

Postado em: Web Work

9 Comentários

Integração com sistemas operacionais

Sincronia de dados

Suporte

Mas e o Zen V afinal?

O começo do projeto

Mas o cliente quer um site no ar e ponto final

Alcançando as metas

Acompanhando e aprimorando

Conheça o produto

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

Imagem é tudo

Apresente os preços discretamente

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

Não deixe o usuário se perder

Exemplos

Finalizando…

Procurar

Mais

Assuntos

Newsletter

Outros