Oportunidade de Emprego

A Mídiaweb está a procura de três profissionais que atuem com webstandards para trabalhar em periodo integral na Agência.

Necessário conhecimento intermediário em XHTML/CSS.

Pré-requisitos:
– XHTML semântico;
– CSS (Cascating Style Sheets);
– Noções de Photoshop e/ou Fireworks;

Desejável:
– Ser aficcionado e apaixonado por Interfaces e principalmente webstandards;
– Capacidade de desenvolver trabalho em grupo;

Os candidatos serão submetidos a testes práticos

Currículos com pretensão salarial para curriculos@midiaweb.com.br

Anúncios

5 Perguntas para 12 Designers

Demorou, mas saiu. Fiquei na esperança de conseguir respostas de mais pessoas, mas não deu. Não tem problema. Os que responderam agradeço bastante e espero que esta listinha sirva de ajuda para outros que estão metidos nessa profissão que eu pelo menos sou apaixonado. A seqüência das respostas é quase aleatória, na tentativa de ser o mais democrático possível.

  1. Qual aspecto do design você mais prioriza?
  2. Que técnica utiliza com freqüência?
  3. Qual o tipo de letra preferido em seus projetos?
  4. Que livro de design considera obrigatório?
  5. Que site ou revista você lê diariamente?

1. Qual aspecto do design você mais prioriza? voltar

As respostas se dividiram entre o aspecto comunicacional e a funcionalidade, com o Fred misturando os dois e falando em interação. Em todos deu para perceber que o foco no usuário é lei e que o deslumbramento tecnológico já cansou.

Dos que focaram em comunicação:

Simplicidade. Quando mais simples, menor a complicação, melhor usabilidade e acessibilidade. Diego Eis

Comunicação. Usar a comunicação certa para o receptor, que passe a mensagem certa do transmissor. Caetano Neto

Relevância. Design é o dress code de uma peça de comunicação. Se não estiver correto para o público, não vai agradar. Se não agradar, foi inútil. Pense no tiozão na balada: suas roupas podem ser boas, caras e na moda. Se não apelam para o conjunto de referências da galera, serão simplesmente ridículas. Luli Radfahrer

A interação entre as pessoas proporcionada pelo Design. Frederick Van Amstel

E os que focaram em funcionalidade, facilidade de uso e que usaram o bordão “equilíbrio entre forma e função” (o que não torna a sentença menos correta):

Usabilidade e Estética. Parece clichê, mas não dá muito para fugir disso quando se fala em Design. Já que seu conceito é o equilíbrio entre a beleza e funcionalidade, eu procuro sempre focar na beleza da interface sem agredir sua facilidade de uso. Rodrigo Muniz

O usuário (user centered design). Considerando que processo de design é o equilibrio entre forma e função, o objetivo final sempre é o usuário. Henrique Costa

Usabilidade. Para mim a estética, a organização das informações, o conteúdo, os recursos, todos têm que estar a favor da facilidade de uso do site por parte do usuário. Walmar Andrade

Design significa, antes de tudo, projeto. Algo que surge para suprir um objetivo claro. Portanto, design não é arte porque é forma visando função. Resumo da ópera: funcionalidade. Chico Neto

Acessibilidade e Usabilidade. Não tenho tantas habilidades com programas gráficos, mas sempre prezo pela facilidade de uso. Desde a faculdade estudo muito acessibilidade, fazendo testes com deficientes visuais inclusive. Design não é para poucos! Rafael Dourado, eu

Compatibilidade + Usabilidade. Marcelo Glacial

Design não é nada. Funcionalidade é tudo! Quando se trata de internet vejo como aspecto principal do design o êxito do usuário em encontrar o que ele procura, em alcançar o que deseja, enfim, o design tem que tornar possível o objetivo do site numa linguagem visual atraente. […] Tony Conde

A usabilidade como foco principal e busco usar o desenho como a melhor expressão artística do “foco” do trabalho. […] Thiago Bessa

2. Que técnica utiliza com freqüência? voltar

Esta pergunta não foi específica de propósito. Obtive respostas bem interessantes focando na concepção do projeto e outras no seu desenvolvimento de fato. Para os que participaram, não dá para trabalhar com internet e ser preconceituoso nem prepotente, nem viver sem Photoshop. Mas viver sem o IE até que era uma boa.

Primeiro os que focaram na concepção do projeto:

Mente aberta: nunca assumo que sei NADA sobre um cliente, seu público, tendência ou tecnologia. Assim posso perguntar feito uma criança e, em vez de rotular, me fascino. Luli Radfahrer

Me colocar no lugar do usuário quando estou pensando ou mesmo projetando algo novo. Walmar Andrade

Uso da semiótica. Isto está aqui porque refere-se àquilo. E na composição dos trabalhos, vetores. Chico Neto

Etnografia virtual (fóruns de discussão etc), entrevistas, prototipação, testes com usuários… Frederick Van Amstel

Uso com freqüência a técnica de não usar nenhuma técnica e conseguir executar o que vejo que é necessário ao público do site e que também esteja ao gosto do meu cliente! Auehuaeh. Gosto de coisas simples. Estilo os menus dos celulares da nokia! Tony Conde

Mesclagem de algumas delas. A semiótica como principal, mas usando elementos do gestalt, usar a percepção visual como “arma” para prender a atenção do usuário, mas buscando sempre a criação de coisas úteis. “DIGA NÃO AO LIXO NA INTERNET”. Thiago Bessa

Os mais concentrados na execução dos trabalhos:

Image replacement. Seguida de perto pelo global reset hehehe. Mas esse último não conta, já que é padrão. Marcelo Glacial

Na codificação HTML tenho o costume de logo depois de começar o body inserir sempre o link de pular a navegação e ir direto para o conteúdo, ajuda para quem usa leitor de tela. No CSS é a já velha conhecida técnica * {margin:0; padding:0;} para zerar margin e pading de todos elementos para ter homogeneidade nos diversos browsers. Rodrigo Muniz

Técnica? CSS + HTML + JavaScript não obstrusivo, com um pouquinho de técnicas de acessibilidade e uma pitada de SEOHenrique Costa

Aqueles scripts que transformam o IE6 num browser um pouco melhor como o de :hover e o de png transparente. Rafael Dourado

Particularmente não gosto de usar o global reset. Não me incomodo com as pequenas diferenças entre os navegadores e acredito que fazer design para web é aceitar que o produto final é fluido, podendo ser personalizado, ter o tamanho do texto alterado, áreas bloqueadas etc.

Finalizando com os Visuais, “adobemente” falando:

No Photoshop uso freqüentemente o Filtro ‘Extrac‘ e a ‘Quick Mask‘ para aquela seleções cabeludas, literalmente (em caso de tirar o fundo de uma imagem na parte onde há pêlos). Rodrigo Muniz

Colagem, vetor e edição de foto. Caetano Neto

Gradientes e DropShandows dão uma aparência bem interessante. Não pode abusar para não se tornar muito carregado. Devem ser usados com um certo cuidado. Diego Eis

Degradês e vetorizações. Rafael Dourado

3. Qual o tipo de letra preferido em seus projetos? voltar

Esta pergunta acabou gerando algumas dúvidas e alguns responderam somente em relação às fontes da web como Arial, Verdana e Georgia e outros que abriram mais para as fontes usadas na composição do layout. Minha intenção era mais para a segunda situação, mas ainda é válido saber quem prefere serifada ou sem serifa.

Título: Trebuchet MS. Textos: Verdana. Marcelo Glacial

A boa e velha Arial. Henrique Costa

Trebuchet MS. Frederick Van Amstel

Trebuchet MS e Verdana ou Trebuchet MS e Arial. Depende muito do comportamento que será atribuído ao texto. Tony Conde

Deu leitura, passou a idéia do site, é essa. Particularmente, estou numa fase mais de fontes com serifa… acho que só ver sites com fontes sem serifa, ajudou. Caetano Neto

Para texto, qualquer uma sem serifa que se encaixe no desenho do site, abusando bastante da Verdana e Tahoma. Para imagens, de acordo com o desenho. Thiago Bessa

Minha tipografia favorita é aquela que melhor dialogar com o projeto. Mas, pessoalmente, tenho apreço maior por famílias sem serifas com hastes robustas. Chico Neto

O que for relevante e adequado. Tem cliente com cara de Caslon, de Interstate, de Frutiger, de Bembo. Isso não tem nada a ver com a tipografia escolhida para o logo ou comunicação visual de um cliente, mas com o estado de espírito de seu público. Luli Radfarer

Arial nos textos, pois assim posso deixar o corpo do texto um pouco maior (Verdana grande é horrível). Em situações com uso de imagens vai depender do cliente, mas tenho uma maior afeição pela Frutiger e Helvetica. Rafael Dourado

Gosto muito de usar Verdana, Trebuchet MS e Lucida Grande para projetos que são realmente textos. Quando o texto vai em uma imagem ou os títulos serão imagem, gosto de usar HUMANIST. Normalmente uso letras sem serifa. Combinam mais com o ambiente de web. Entretanto, fica muito interessante o uso de letras com serifa. O site fica mais elegante. Mas deve ser usado com moderação e deve haver um cuidado extra ao combinar com letras sem serifa. Diego Eis

Na web costumava usar Verdana 10px ou 11px para parágrafos, mas com os monitores e resoluções cada vez maiores estou tentando me acostumar a usar Trebuchet MS 12px com line-height 140% para parágrafos e Georgia 28px para títulos, mas em algumas interfaces a Verdana ainda impera. Para impressos Georgia e Times New Roman ainda são imbatíveis e são figurinhas fáceis no meu CSS para impressão. Nos logotipos Helvetica e Tahoma caem bem. Rodrigo Muniz

Tipografia na web não importa muito, pois o usuário pode chavear os estilos. Walmar Andrade

Deixei a resposta do Walmar por último de propósito. Discordo dele, pois a quantidade de pessoas que chaveam os estilos é mínima, e por mais que ele tenha essa escolha não quer dizer que a primeira opção deva ser menos cuidadosa. Se entrar na conversa a composição do layout então nem se fala. Mestre Walmar, explique-se melhor. hehehe

4. Que livro de design considera obrigatório? voltar

Excelentes dicas aqui. Steve Krug esteve em quase todos, só confirmando a alcunha de obrigatório. Engraçado foi a quantidade de livros sobre tipografia. Acho que em pouco tempo algumas das respostas da pergunta anterior mudarão.

Designing Interactions, Bill Moggridge Frederick Van Amstel

Elementos do Estilo Tipográfico de Robert Bringhurst. Diego Eis e eu concordo

O do Hollis, para história; o do Frutiger para iconografia; o do Bringhurst para tipografia… Um monte. O meu eu não recomendo mais: está muito velho. Tampouco recomendo os do Dondis e da Santaella, que não entenderam que design é comunicação e escrevem em chinês. A revista HOW tem livros introdutórios de primeira também. Luli Radfahrer

Atualmente, Pensar com Tipos. Chico Neto

Introdução à Análise da Imagem (Martine Joly): Aprender as ferramentas de design qualquer um aprende até lendo o help. Mas estudar semiótica é um divisor de águas. O livro faz muitas leituras de imagem é muito interessante como primeira leitura sobre semiótica.
Design Visual 50 Anos (Alexandre Wollner): Conheci esse livro por indicação do Chico Neto. Alexandre Wollner é só o primeiro designer brasileiro e ainda em atividade. Sua história de confunde com o desenvolvimento da profissão no país e é uma aula de técnicas de design e postura profissional. Ah! E ele tem um mau humor divertidíssimo. Rafael Dourado

Sou leitor compulsivo de monitor ) Mas acho que livros como Webwriting: Redação e Informação para a Web do Bruno Rodrigues e Não me faça pensar do Steve Krug são obrigatórios para qualquer profissional de webdesign, mesmo o primeiro não sendo focado em design. Rodrigo Muniz

Não me faça pensar! O livro é sobre Usabilidade mas acredito que hoje as pessoas precisam inverter a forma com que aprendem a fazer “design”. Primeiro é preciso entender que problemas de design se resolvem com o equilibrio entre a estética e a facilidade de uso. Muitos investem muito em estética e nada em “utilização”. Este livro todos deveriam ler! Henrique Costa. Walmar Andrade assina embaixo

Putz… Livro é difícil. Esse do Wollner que o Dourado citou é muito bom. Tô lendo o Design para Internet do Felipe Memória, tô gostando. Caetano Neto

Design para internet – Projetando a experiência perfeita / Felipe Memória. Tony Conde

Os clássicos, Memória, Nielsen, Steven.. (olha a intimidade.. hehe..) mas sempre lendo algo… movimentando sempre a mente… buscando novas referências para não cair na mesmice. Thiago Bessa

Não leio nenhum. O passo 5 explica o porquê. ) Marcelo Glacial

Tá bom, Glacial. Deixei por último para imendar com a desculpa. hehehe

5. Que site ou revista você lê diariamente? voltar

Vale exportar o OPML do Netvibes? CSS Mania, CSS Remix, CSS Based, CSS Beauty, entre outra galerias. E os blogs específicos: Tableless, Revolução, Fator W, Bittbox, Shauninman e Mezzoblue. Marcelo Glacial

Tenho uns 50 feeds assinados e os leio todo santo dia. Conheço quem tem mais de 500, mas só passa a vista em todos e lê o que interessa. Eu tenho esses 50 e tento ler todos sem exceção quase todo dia. Mas recomendo os sites de todos os que responderam a esta pesquisa. D Rafael Dourado

Google Reader vale? ) Revistas eu só dou uma olhada na Web Design, MTV e na Super Interessante quando vou na livraria rapidinho… É bem difícil um site de artigos e notícias que eu entre diariamente,
acho que só no Digg.com. Mas tenho outras dicas de sites que acompanho os feeds: Fator W do ex-gerente e amigo Walmar está cada dia melhor, A List Apart, A List Apart Brasil, Smashing Magazine, Ivo Gomes, Tá difícil, Tutoriais Photoshop
Para inspiração eles nunca falham: Web Creme, Open Web Design, CSS Mania e Logopond. Um boa busca no del.icio.us também resolve muita coisa. Rodrigo Muniz

Ai, pega a lista ali na home do meu Blog, deu preguiça D Luli Radfahrer

Bartelme Design, The Art of Adam Betts, e tem um monte de outros aqui. Diego Eis

Tenho muitos blogs agregados no meu Bloglines Fredrick Van Amstel

São tantos… Nos meus feeds têm inúmeros sites. Nunca tive a curiosidade de ver ao certo quantos são. Nem tem como ver agora também, não estou no meu pc! Mas acho que tudo começa pelo http://www.google.com.br rs Tony Conde

Mais de 2 centenas de blogs e alguns livros que sempre estão por perto… Henrique Costa

Nossa, assino uns 200 feeds e leio todos diariamente logo pela manhã. Entre os nacionais, o que acho mais interessante é o de Silvio Meira. Walmar Andrade

Tenho acompanhado mais blogs ultimamente. Embora acredite que não seja o mais visitado aqui, vou colocar o Uailab. Caetano Neto

Além dos blogs mestres, bomabessa ) , netlus, teoriaglacial e assino a revista web design. Ela é bem interessante, quando não atrasa 1 mês pra chegar é uma leitura boa e atual (a leitura, por que o site…). Thiago Bessa

Além do Netlus…?! Chico Neto

SIM, CHICO! ALÉM DO NETLUS!

Bom. Espero que tenha sido útil de alguma forma. Para mim foi. D

Autor: Rafael Dourado
Fonte: http://www.netlus.com.br/5-perguntas-para-12-designers/

Gerador de listras

Para aqueles iguais a mim que sempre tem alguma dificuldade em fazer uma imagem em listras, eis aqui a solução, Stripe Generator

Image Hosted by ImageShack.us

Usabilidade, Faça jus ao seu projeto

Salve, salve!!

Peço permissão aos moderadores para falar um pouco sobre usabilidade na web. Nosso maior intuito neste ambiente é compartilhar idéias, conhecimentos, experiências entre outros… contudo vaí aí algumas informações que podem ser úteis para nós desenvolvedores (seja ele iniciante, intermediário ou avançado). O objetivo é mudar comportamentos e fazer com que a usabilidade faça parte de seus futuros websites.
Como webdesign, quero poder oferecer um melhor serviço aos usuários, por isso espero que você também se sinta pronto para agir em seu projeto de design. As maneiras que podem ser tomadas para tornar a vida dos usuários mais felizes são várias. Você poderá utilizar métodos e técnicas de usabilidade, pois muitos são extremamente fáceis de aprender. Além de obter melhorias no seu site estará contribuindo para que os usuários voltem a visitá-lo.
Infelizmente a maioria dos webdesigners ignoram totalmente a usabilidade e criam designs para seu bel prazer ( ou pior, para o prazer do chefe) ao invés de satisfazer as necessidades do usuário.

Que vença a simplicidade!!

POR QUE A USABILIDADE NA WEB?

A usabilidade assumiu uma importância muito maior na economia da Internet.
No desenvolvimento de produto físico tradicional, os clientes só experimentavam a usabilidade quando já tinham comprado e pago. Digamos, por exemplo, que você compre um vídeo cassete e descubra que é difícil acertar a hora, além de não conseguir como programar a gravação de seus programas favoritos. Azar o seu – o fabricante ri enquanto sua conta bancária cresce.

A web não funciona assim. Ela inverte esse quadro. Atualmente, os usuários experimentam a usabilidade de um site antes de se comprometeram a usá-lo e antes de gastarem dinheiro em possíveis aquisições. Vejam como é simples a equação:

:: No projeto de produto e de software, os clientes pagam primeiro e experimentam a usabilidade depois.
:: Na web, os usuários experimentam a usabilidade primeiro e pagam depois.

Fica bem claro por que a usabilidade é mais importante para o webdesign.

CSS E A USABILIDADE

É impossível falar de usabilidade e não falar de CSS. As folhas de estilo em cascata são apenas uma das maiores esperanças de recapturar o ideal da web de separar apresentação e conteúdo. A web é o máximo em termos de sistema multiplataformas e seu conteúdo será apresentado em uma variedade tão grande de dispositivos que as paginas devem especificar o significado das informações e deixar os detalhes da apresentação a uma intercalação (ou “cascata”) de folhas de estilo especificadas pelo site e às preferências do usuário.

Em suma, CSS e usabilidade resulta em simplicidade, a qual deve ser a meta do design da página. Com exceção de nós (desenvolvedores) os usuários raramente encontram-se em um site para desfrutar do design; em vez disso, preferem concentrar sua atenção no conteúdo. É também importante garantir que as páginas sejam perfeitamente visualizadas em uma série de plataformas e que possam ser acessados por pessoas que usam tecnologia antiga.
Garanta que todas as páginas funcionem em browsers e versões de dois anos de idade de todos os plug-ins e outros softwares.

NO FRAMES (ou não use quadros)

A primeira recomendação com respeito a quadros é:
Quadros: diga não.
As pessoas que realmente sabem o que estão fazendo podem às vezes usar quadros para obter um bom efeito, embora até mesmo os designers experientes sejam aconselhados a usar quadros o mínimo possível.
Se insistir no uso de quadros apesar de meu conselho para que faça o oposto, pelo menos forneça uma versão sem quadros para os vários usuários que preferem evitar quadros. Em particular, o conteúdo alternativo pode ser fornecido em uma seção <NOFRAMES> que será exibida aos usuários que desativaram as quadros ou que usam um browser que não ofereça um suporte a quadros.
A versão 2.0 do Netscape foi o primeiro browser a oferecer suporte aos quadros, mas o fez de uma forma terrível, introduzindo um dos piores problemas de usabilidade encontrado na web até agora: o botão Voltar no browser simplesmente não funcionava com os sites com quadros.

Portanto, quebrar o botão Voltar é nada mais nada menos que uma catástrofe em termos de usabilidade.
Felizmente, quase ninguém mais usa o Netscape 2.0; foi um verdadeiro desastre.

O DESIGN DO CONTEÚDO: Mantenha os textos breves

Uma pesquisa mostrou que ler da tela do computador é cerca de 25% mais lento do que ler do papel. Mesmo os usuários que desconhecem essas pesquisas sobre fatores humanos geralmente dizem que sentem desconforto ao lerem texto on-line. Como resultado as pessoas não querem ler muito texto das telas de computador. Portanto, deve-se escrever 50% menos texto – não apenas 25% menos – pois não se trata apenas de velocidade de leitura, mas de uma questão de conforto. Sabemos também que os usuários não gostam de rolar a tela: mas uma razão para manter a brevidade das páginas.
Já que é tão custoso ler texto em telas do computador e já que a experiência on-line parece fomentar uma certa dose de impaciência, os usuários tendem a não ler totalmente fluxos de texto. Invés disso, passam os olhos pelo texto e escolhem palavras-chave, sentenças e parágrafos de interesse enquanto pulam as partes de texto que menos lhe interessam.

Com relação aos títulos de página, em HTML, cada página tem um título especificado na seção de cabeçalho. É importante especificar bons títulos de página, pois os títulos são muitas vezes usados como a principal referencia às páginas. Os títulos de páginas também são usados em muitos menus de navegação como listas de Boockmarks e listas de históricos.

Concluindo, o conteúdo é o foco de atenção do usuário da web. É a razão dos usuários se conectarem e é a primeira coisa que olham quando carregam uma página. O conteúdo de qualidade é um dos dois determinantes mais importantes da usabilidade da web o outro é se os usuários podem achar a página que desejam.

ANIMAÇÃO

As imagens em movimento têm um efeito indiscutível na visão periférica humana. Alguns usuários dizem que acham as animações legais ou indicam que houve muito trabalho de design de site. As animações podem, portanto, ter uma função semelhante às colunas de mármore nos bancos: demonstrar visivelmente o status e a afluência. No entanto, a maioria dos usuários diz que ficam irritados com as animações. Em particular, quase todos os usuários detestam textos em movimento e marquees.
Segundo Jakob Nielsen, a animação é boa para sete finalidades, são elas:
:: Mostrar continuidade nas transições
:: Indicar dimensionalidade nas transições
:: Ilustrar a mudança no tempo
:: Multiplexar o monitor
:: Enriquecer as apresentações gráficas
:: Visualizar estruturas tridimensionais
:: Chamar atenção.

No caso de “chamar atenção” o texto deve ser desenhado por uma animação não-repetível (por exemplo, um texto que desliza da direita para a esquerda, aumentando a partir do primeiro caractere ou crescendo suavemente) e nunca por uma animação continua, pois é muito mais difícil ler texto em movimento do que texto estático. O usuário deve ser atraído ao texto novo pela animação inicial e depois deve se deixá-lo em paz para ler o texto sem outras distrações.

Vá com calma com as animações em seu projeto, pois o feitiço da animação virar contra o feiticeiro.

A WebTV

O futuro está ai e não podemos esquecer disso. A web provocou a introdução de um dos primeiros aparelhos de informação na forma da WebTV em 1996. Antes, a WebTV não era um grande produto sendo de certa forma uma decepção em termos de venda. Na verdade, a WebTV é um produto irado em termos de usabilidade e design. Nos dias atuais com a chagada das telonas em plasma pode se dizer que a qualidade está cada vez mais agradável, e ficar sentado interagindo com a Internet é mais empolgante.

Ao criar para a WebTV para que respeitem os usuários é preciso seguir as seguintes diretrizes:
:: Não utilizar imagens grandes (mais de 544 pixels de largura ou 376 pixels de altura) a menos que ainda funcionem após o redimensionamento automático da WebTV para a área de viso disponível;
:: Reserve o uso de imagemaps para os casos absolutamente necessários;
:: Não inclua texto nas imagens pois os caracteres serão de difícil leitura na tela;
:: Não use um layout com várias colunas, se seu design exigir colunas, use no máximo duas colunas e garanta que funcionem em uma tela de 544 pixels de largura;
:: Divida as informações em um espaço de hipertexto rico com um número maior de nós menores;
:: Se possível faça com que cada unidade seja suficientemente pequena para que caiba em uma única tela da WebTV a fim de eliminar a rolagem;
:: Brevidade: escreva menos texto.

ACESSIBILIDADE PARA USUÁRIOS PORTADORES DE DEFICIÊNCIA

A legislação americana para portadores de deficiências e as leis e regulamentações semelhantes em outros paises muitas vezes exigem acesso igual a sistemas de computadores para os usuários portadores de deficiências. Em particular, haverá freqüentemente uma obrigação legal para facilitar o uso da intranet e Internet por funcionários e usuários deficientes que talvez não sejam capazes de realizar suas tarefas caso não possam acessar os websites da empresa.

Tornar a web mais acessível a usuários com varias deficiências resume-se, até certo ponto, a usar o HTML da forma pretendida: para codificar significado em vez de aparência. Desde que a página seja codificada para o significado, é possível que os browsers alternativos apresentem esse significado de formas otimizadas às capacidades de usuários individuais e, assim facilitem o uso da web por usuários deficientes.

Deficiências visuais
Os problemas de acessibilidade mais sérios, dado o atual estado da web, relacionam-se a usuários cegos e usuários com outras deficiências visuais, posto que a maioria das paginas da web é altamente visual.
Para aumentar a acessibilidade, garanta sempre um auto contraste entre as cores de primeiro e segundo plano e evite padrões de fundo confusos que interfiram na leitura. Qualquer coisa que reduza a legibilidade de seus textos é suficientemente irritante para os usuários com visão perfeita que definitivamente não gostam de ser retardados quando estão na web, mas fundos com texturas ou cores sutis podem ser a gota d´agua que faz com que sua página fique abaixo do limite de legibilidade para um usuário com visão parcial.

Para os desenvolvedores é importante lembrar que, para facilitar os usuários cegos ao passar os olhos no conteúdo, é recomendável enfatizar a estrutura da página através de marcações adequadas de HTML: use <H1> para o cabeçalho de nível superior, <H2> para as principais partes das informações dentro de <H1>, e <H3> e níveis inferiores para divisões ainda mais sutis de informação.

Assim, o usuário cego pode ter uma panorâmica da estrutura de uma página quando <H1> e <H2> forem lidos em voz alta e pode rapidamente pular uma seção desinteressante ao instruir uma leitura de tela a pular para o próximo cabeçalho de nível inferior.

Alem de tornar o texto legível, você também deve oferecer um método alternativo para “exibir” as imagens a pessoas vê-las. A principal solução a esse problema a essa altura é usar o atributo ALT.
Os usuários que não podem ver a foto verão ou ouvirão o texto alternativo “Nome da foto”.

Deficiências auditivas
É rara a situação em que o som é necessário para a compreensão; na maioria das vezes os efeitos sonoros na web são gratuitos – um dos poucos benefícios de design ruim, creio. A usabilidade de um site quase sempre continua a mesma quando o som é desativado, mas com a tendência crescente da multimídia, esse não continuara sendo o caso.

Independente da gratuidade do som ou de sua exigência pela multimídia, crie seu site tendo em mente um público com deficiências auditivas.

Deficiências de fala
No momento, não importa se o usuário da web é capaz de falar já que toda a entrada do computador é feita com um mouse e um teclado. É provável que as várias formas de interfaces com o usuário ativadas por voz fiquem mais populares no futuro para casos em que o uso do teclado seja incomodo ou apenas para oferecer suporte a usuários que prefiram falar os comando em vez de digitá-los.

Será muito mais problemático quando passarmos para interfaces nas quais a fala é a principal ou a única modalidade de entrada. Espero que a maioria dos sistemas de bate-papo logo se torne baseada na fala, já que esta é a forma natural de conversa para a maioria das pessoas.

Qualquer sistema de bate-papo que dependa da fala deve manter a possibilidade de participação de usuários não-falantes através de texto digitado.

Deficiências motoras
Muitos usuários têm dificuldade com movimentos detalhados do mouse e pode também ter problemas em pressionar várias teclas simultaneamente. A maioria dessas questões deve ser tratada por um melhor design de bowser e não deve preocupar os designers de conteúdo, exceto no que tange ao conselho de não criar imagesmaps que exijam o posicionamento extremamente preciso do mouse. Imagine que você tenha de deslocar seu mouse com os pés: leva muito tempo para chegar a um alvo pequeno.

Quaisquer applets que usem dispositivos de interação além do HTML padrão devem ser implementados a fim de permitir a operação sem o mouse. Esses recursos são incluídos como padrão tanto no Java quanto no ActiveX; portanto, é uma mera questão de implementar o código corretamente de acordo com as diretrizes oficiais da Sun Microsistems, Microsoft e outros fornecedores de ferramentas de software.

Deficiências cognitivas
Nos primeiros anos, a web era acessada era apenas por pessoas apenas muito inteligentes que eram pioneiras na tecnologia avançada. Mas, com a crescente popularidade da web, haverá mais usuários medianos e também usuários de inteligência abaixo da média. Para satisfazer esses usuários, será importante aumentar a usabilidade e garantir que o conteúdo seja compreensível em nível de leitura primária.

Uma forma simples de verificar muitos problemas de acessibilidade é acessar seu website em um browser apenas de texto como o Lynx. Se o site parecer bom e funcionar bem nesse browser, provavelmente será razoavelmente acessível para muitos usuários com deficiências.

Por último seria melhor realizar testes de usabilidade com uma série de usuários com várias deficiências, mas já que há tantos tipos diferentes de deficiências para atender, esse não é um conselho muito pragmático, exceto no caso de sites que atendam especificamente a usuários deficientes.

Fonte: Informações extraídas do livro “Projetando Web Sites de Jakob Nielsen”

SITES RELACIONADOS

Português
Usability
Usabilidade.com
Usabilidade Br
Webinsider >> Usabilidade
Usabilidoido
Blog de Usabilidade
Usabilidade Net
Fator W
Atípico
FechaTAG
Felipe Memória
Alexandre Sadi
Rodrigo Muniz

Inglês
Useit – Jakob Nielsen
Asktog
UsableWeb
Usability first

LIVROS lendo.gif

Português
Imagem do IPB
Usabilidade na Web
Mais informações e onde comprar

Imagem do IPB
Não me faça pensar
Mais informações e onde comprar

Imagem do IPB
Homepage: Usabilidade: 50 Websites Desconstruídos
Mais informações e onde comprar

Imagem do IPB
Projetando Websites
Mais informações e onde comprar

Imagem do IPB
Design para Quem Não é Designer
Mais informações e onde comprar

Imagem do IPB
Design e avaliação de interfaces humano-computador
Mais informações

Imagem do IPB
Design para a Internet: Projetando a Experiência Perfeita
Mais informações e onde comprar

Imagem do IPB
250 Segredos para Web Designers
Mais informações e onde comprar

Inglês
Usability Engineering (The Morgan Kaufmann Series in Interactive Technologies)
Mais informações e onde comprar

Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests
Mais informações e onde comprar

Lembre-se dos usuários ao projetar Websites

Texto original: http://forum.ievolution.com.br

Fonte: Informações extraídas do livro “Projetando Web Sites de Jakob Nielsen”

Entidades de caracteres do HTML 4.01

O HTML 4.01 suporta o conjunto de caracteres ISO 8859-1 (Latin-1,) que contém os caracteres com acentos usados pelas línguas da Europa Ocidental. Os caracteres acentuados da língua portuguesa podem ser todos obtidos usando este conjunto de caracteres.

9.3 Entidades para caracteres do conjunto ASCII e os nomes definidos em HTML

Os caracteres da primeira metade do conjunto ISO-8859-1 (códigos desde 0 a 127) são os mesmos que os caracteres padrão ASCII de 7 BITs. A maior parte destes caracteres pode ser usada directamente sem necessidade de recorrer a entidades porque estão sempre disponíveis em todas as máquinas qualquer que seja a sua configuração.

Os caracteres finais do conjunto ISO-8859-1 (códigos desde 160 até 255) podem ser usados recorrendo a nomes de entidade de carácter definidos em HTML.

Nota: os nomes das entidades são sensíveis ao tipo de letra (maiúscula ou minúscula.)

Resultado Descrição Nome da Entidade Código Numérico
aspas
& “e” comercial & &
< menor do que < <
> maior do que > >

9.4 Entidades para caracteres do conjunto ISO 8859-1 (não ASCII)

Resultado Descrição Nome da Entidade Código Numérico
inserir espaço sem mudar de linha (“non-breaking space”)
¡ ponto de exclamação invertido ¡ ¡
¤ dinheiro ¤ ¤
¢ cêntimo (de dollar) ¢ ¢
£ libra esterlina £ £
¥ yen ¥ ¥
¦ barra vertical descontínua ¦ ¦
§ secção § §
¨ acento diérese (trema, metafonia) ¨ ¨
© direitos de cópia (“copyright”) © ©
ª ordinal feminino ª ª
« abertura de aspas angulares « «
¬ negação ¬ ¬
­ hífen “soft” (pode acontecer uma quebra de linha junto ao hífen) ­ ­
® marca registada ® ®
¯ sinal (acento) mácron ¯ ¯
° graus ° °
± mais ou menos ± ±
² 2 sobreescrito ² ²
³ 3 sobreescrito ³ ³
´ acento agudo ´ ´
µ micro µ µ
parágrafo
· ponto a meia altura · ·
¸ cedilha ¸ ¸
¹ 1 sobreescrito ¹ ¹
º ordinal masculino º º
» fecho de aspas angulares » »
¼ fracção 1/4 ¼ ¼
½ fracção 1/2 ½ ½
¾ fracção 3/4 ¾ ¾
¿ ponto de interrogação invertido ¿ ¿
× sinal de multiplicação × ×
÷ sinal de divisão ÷ ÷
À a grande com acento grave À À
Á a grande com acento agudo Á Á
 a grande com acento circunflexo  Â
à a grande com til à Ã
Ä a grande com diérese Ä Ä
Å a grande com anel Å Å
Æ ae ligados, grandes Æ Æ
Ç c grande com cedilha Ç Ç
È e grande com acento grave È È
É e grande com acento agudo É É
Ê e grande com acento circunflexo Ê Ê
Ë e grande com diérese Ë Ë
Ì i grande com acento grave Ì Ì
Í i grande com acento agudo Í Í
Î i grande com acento circunflexo Î Î
Ï i grande com diérese Ï Ï
Ð eth grande (Islandês) Ð Ð
Ñ n grande com til Ñ Ñ
Ò o grande com acento grave Ò Ò
Ó o grande com acento agudo Ó Ó
Ô o grande com acento circunflexo Ô Ô
Õ o grande com til Õ Õ
Ö o grande com diérese Ö Ö
Ø o grande com traço oblíquio Ø Ø
Ù u grande com acento grave Ù Ù
Ú u grande com acento agudo Ú Ú
Û u grande com acento circunflexo Û Û
Ü u grande com diérese Ü Ü
Ý y grande com acento agudo Ý Ý
Þ thorn grande (Islandês) Þ Þ
ß carácter que representa a ligação sz, minúsculo (Alemão) ß ß
à a pequeno com acento grave à à
á a pequeno com acento agudo á á
â a pequeno com acento circunflexo â â
ã a pequeno com til ã ã
ä a pequeno com diérese ä ä
å a pequeno com anel å å
æ ligação ae, minúscula æ æ
ç c pequeno com cedilha ç ç
è e pequeno com acento grave è è
é e pequeno com acento agudo é é
ê e pequeno com acento circunflexo ê ê
ë e pequeno com diérese ë ë
ì i pequeno com acento grave ì ì
í i pequeno com acento agudo í í
î i pequeno com acento circunflexo î î
ï i pequeno com diérese ï ï
ð eth pequeno (Islandês) ð ð
ñ n pequeno com til ñ ñ
ò o pequeno com acento grave ò ò
ó o pequeno com acento agudo ó ó
ô o pequeno com acento circunflexo ô ô
õ o pequeno com til õ õ
ö o pequeno com diérese ö ö
ø o pequeno com traço oblíquo ø ø
ù u pequeno com acento grave ù ù
ú u pequeno com acento agudo ú ú
û u pequeno com acento circunflexo û û
ü u pequeno com diérese ü ü
ý y pequeno com acento agudo ý ý
þ thorn pequeno (Islandês) þ þ
ÿ y pequeno com diérese ÿ ÿ

9.5 Entidades HTML não pertencentes ao conjunto ISO 8859-1

Resultado Descrição Nome da Entidade Código Numérico
Modeda Euro
Marca para item em lista não ordenada (“bullet”)
Marca comercial (“Trade Mark”)
três pontos (elipse)
plica
″+amp;Prime; plica dupla
aspas (elegantes) do lado esquerdo
aspas (elegantes) do lado direito
→+amp;rarr; seta para a direita
←+amp;larr; seta para a esquerda
Œ ligação OE grande Œ Œ
œ ligação oe pequena œ œ
Š s grande com um caron Š Š
š s pequeno com um caron š š
Ÿ y grande com diérese Ÿ Ÿ
ˆ carácter modificador para acento circunflexo ˆ ˆ
˜ til pequeno ˜ ˜
traço “en dash”
traço “em dash”
aspa esquerda simples
aspa direita simples

Fonte: http://www.artifice.web.pt

Mudar o layout com CSS

Segue abaixo o esquema pra mudar o layout de sua página através do uso de CSS.

Código html:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”><head><title>Mudar Layout</title>

<link href=”CambiarEstilo_arquivos/css1.css” rel=”stylesheet” type=”text/css” title=”css1“>
<link href=”CambiarEstilo_arquivos/css2.css” rel=”alternate stylesheet” type=”text/css” title=”css2“>
<script language=”javascript”>
function EstablecerCSS(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1 &&
a.getAttribute(“title”)) {
a.disabled = true;
if(a.getAttribute(“title”) == title)
a.disabled = false;
}
}
}
</script>
</head><body>
<div id=”contenedor”>
<div id=”cabecera”>
<span class=”WebTitulo”>Título da Página </span>
</div>

<div id=”contenido”>
<div id=”enlaces”>
<a href=”javascript:EstablecerCSS(‘css1‘);”>Estilo 1</a>
<a href=”javascript:EstablecerCSS(‘css2‘);”>Estilo 2</a>
</div>
<h1>Título do artigo</h1>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit
amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer
adipiscing …Lorem ipsum dolor sit amet, consectetuer adipiscing …Lorem
ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit
amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer
adipiscing …Lorem ipsum dolor sit amet, consectetuer adipiscing …</p>
</div>

<div id=”navegacion”>
<h2>Categorias</h2>
<ul>
<li><a href=”#”>Recursos</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>PHP</a></li>
<li><a href=”#”>ASP</a></li>
<li><a href=”#”>AJAX</a></li>
<li><a href=”#”>Javascript</a></li>
<li><a href=”#”>Ilustrações</a></li>
<li><a href=”#”>Fotografia</a></li>
</ul>
<h2>Arquivo</h2>
<ul>
<li><a href=”#”>Maio de 2007</a></li>
<li><a href=”#”>Abril de 2007</a></li>
<li><a href=”#”>Março de 2007</a></li>
<li><a href=”#”>Fevereiro de 2007</a></li>
</ul>
</div>
</div>
</body></html>

Código CSS1:

/* ————————–
GENERAL
—————————-*/
body,html {
min-height:100%;
height:100%;
}
body {
margin: 0;
padding: 0;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
#enlaces { margin-top:20px}
#enlaces a{
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #993399;
background-color:#FAE1FB;
padding:5px;
margin:5px;
}
#contenedor {
position: relative;
width: 760px;
border-right: 1px solid #E4E4E4;
height:100%;
}
/* ————————–
CABECERA
—————————-*/
#cabecera {
border-top: 6px solid #2A4F6F;
border-bottom: 1px dotted #B2BCC6;
height: 4em;
}
#cabecera .WebTitulo {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #666;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#cabecera .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
/* ————————–
NAVEGACION
—————————-*/
#navegacion {
position: absolute;
top: 6em;
left: 1em;
width: 14em;
}
#navegacion ul {
list-style: none;
margin-left: 1em;
padding-left: 0;
}
#navegacion li {
font-size: 80%;
border-bottom: 1px dotted #B2BCC6;
margin-bottom: 0.3em;
}
#navegacion a {
text-decoration: none;
color: #2A4F6F;
}
#navegacion h2 {
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #2A4F6F;
border-bottom: 1px dotted #cccccc;
}
/* ————————–
CONTENIDO
—————————-*/
#contenido {
margin-left: 17em;
margin-right: 2em;
}
h1 {
font: 150% Georgia, “Times New Roman”, Times, serif;
}
#contenido p {
font-size: 80%;
line-height: 1.6em;
}

Código CSS2:

/* ————————–
GENERAL
—————————-*/
body,html {
min-height:100%;
height:100%;
}
body {
margin: 0;
padding: 0;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
#enlaces { margin-top:20px}
#enlaces a{
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #993399;
background-color:#FAE1FB;
padding:5px;
margin:5px;
}
#contenedor {
position: relative;
width: 760px;
border-right: 1px solid #E4E4E4;
border-left: 1px solid #E4E4E4;
height:100%;
margin-right: auto;
margin-left: auto;
background-color:#E2E2E2;
}
/* ————————–
CABECERA
—————————-*/
#cabecera {
border-top: 6px solid #2A4F6F;
border-bottom: 1px dotted #B2BCC6;
height: 4em;
}
#cabecera .WebTitulo {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #666;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#cabecera .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
/* ————————–
NAVEGACION
—————————-*/
#navegacion {
position: absolute;
top: 5em;
right: 1em;
width: 12em;
background-color:#FF3300;
}
#navegacion ul {
list-style: none;
margin-left: 1em;
padding-left: 0;
}
#navegacion li {
font-size: 80%;
border-bottom: 1px dotted #B2BCC6;
margin-bottom: 0.3em;
}
#navegacion a {
text-decoration: none;
color: #FFF;
font-weight:bold;
}
#navegacion h2 {
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #B7C6F1;
border-bottom: 1px dotted #cccccc;
}
/* ————————–
CONTENIDO
—————————-*/
#contenido {
margin-left: 2em;
margin-right: 14em;
}
h1 {
font: 150% Georgia, “Times New Roman”, Times, serif;
}
#contenido p {
font-size: 80%;
line-height: 1.6em;
}

Resultado:
mudanca.png

Notícia completa
Fonte: www.webintenta.com

Como solucionar Pequenos Bugs em CSS

Artigo muito bom postado pelo Maurivan Luiz Padilha no site MXStudio.

Introdução
Em um mundo perfeito, poderíamos escrever CSS e funcionaria independente dos browsers perfeito. Mas nunca faltaram erros de digitação, navegadores “lindos” e também comportamentos desconhecidos que nos deixam confusos, e muitas vezes sem saber como começar a solucionar os problemas. Irei citar neste artigo alguns passos que podem seguir para eliminar “os bugs” em suas folhas de estilo.

O motivo mais óbvio para ocorrer um erro na página é um erro no código, Para verificar nosso código, podemos utilizar o famoso validador da W3C para checar tanto nosso html como nosso CSS. Uma maneira mais fácil e sensata de fazer é através do plugin Web Developer Tools para Mozilla/Firefox, ou então com a extensão de validação que permite você validar sua página sem a necessidade de estar conectado a rede mundial de computadores (internet)

Muitas vezes é difícil encontrar qual é o problema quando você está visualizando uma página completa, com uma folha de estilos extensa. Aconselho você então a pegar e copiar somente o html e o css que seja referente a seu problema em uma nova página, isto simplificará para você encontrar e solucionar seus problemas.

Pré-Requisitos

Vontade de aprender é considerado fundamental, aprender com os erros é essencial, e um cafézinho expresso para acompanhar 🙂

Objetivo

Aprender pequenos macetes que podem ser úteis em alguns casos, tais quais problemas com altura, largura, margin e padding.

Conteúdo
Examine seus elementos.
Para saber exatamente aonde está o problema, é muito útil inserir bordas de cores em seus elementos, o qual te facilitará perceber dimensões, margens e bordas, e caso seja detectado algum pequeno deslize no tamanho de uma div, pode ser rapidamente resolvido.

Estilos
Para checar que regras você está aplicando a seu elemento, o inspetor DOM do Mozilla Firefox pode ser muito útil.

* Inspetor DOM é uma ferramenta para analisar a estrutura do documento

Cheque para ver se o BUG não é conhecido.

Se já puder identificar exatamente qual é o problema, por exemplo; a div #conteudo se movimenta 3 pixels a esquerda no internet explorer 5.5, enquanto em outros navegadores continua intacta), busque na internet para ver se é um problema comum, no site “Position is everything”, por exemplo, tem uma lista muito completa de bugs que ocorrem no IE, Opera e Mozzila Firefox.

Se por ventura você não encontrar no “Position is everything”, você poderá encontrar em nosso fórum de CSS http://www.mxstudio.com.br/forum/index.php?showforum=7

Experimente!
Tente trocar os valores em sua folha de estilho, zerar, adicionar, para ver como afetam sua página. Pode ser útil colocar as margens e padding zeradas (padding:0; margin:0;).

É muito fácil de realizar alterações com o Notepad++ e com o plugin WebDeveloper Tools, para Mozilla Firefox, que lhe permite visualizar as alterações imediatamente.

Peça Ajuda!
Sempre há gente disposta a lhe ajudar aqui nos fóruns da MXSTUDIO, saiba sempre como explicar seu problema, e colocar um link com a sua página, ou então o codigo de sua página html e sua folha de estilhos para que facilite o trabalho de quem for lhe ajudar. Com certeza irá encontrar alguém disposto!

Agradecimentos
Para este artigo, eu gostaria de agradecer ao imuller que abriu a minha cabeça na introdução.
E também a meu amigo Felipe Nascimento Silva Pena (ecl), que me avisou de um erro ortográfico a ponto de ser corrigido.

Considerações Finais
Neste artigo está explicito alguns macetes para você resolver problemas básicos que podem ocorrer em sua folha de estilo, porém nem todo erro pode ser corrigido apenas com estes macetes!

Para saber mais:

W3C – The World Wide Web Consortium
http://www.w3.org/

Documentos W3C em Português!
http://www.amtechs.com/w3c/

CSS Bug Table
http://www.richinstyle.com/bugs/table.html

CSS contents and browser compatibility
http://www.quirksmode.org/css/contents.html

 

Autor: Maurivan Luiz Padilha – Colunista WEBSTANDARDS do Portal MXSTUDIO

Qualquer dúvida referente à webstandards, pode ser enviado um e-mail para maurivan@mxstudio.com.br ou acesse o nosso fórum!