Tag Archives: Web

A pregnância da forma na web

 

Pregnância

Estava concentrada na função de espremer meus pobres neurônios contra a caixa craniana em busca de algum assunto que pudesse servir de tema para a minha coluna semanal, quando uma mensagem veio me salvar. Um jornalista queria me entrevistar por e-mail sobre a questão da pregnância da forma no webdesign.

Bem, como meu currículo é de domínio público e tenho certeza de que nada nele leva a crer que eu seja especialista em webdesign, creio que o moço deva ter tido algum bom motivo para pedir a minha leiga opinião, uma vez que a Internet está cheia de gente mais qualificada para falar sobre o assunto (desconfio que essas pessoas mais qualificadas não tenham o hábito de responder e-mails; é claro que isso é só especulação, mas não consigo encontrar outra explicação). A julgar pelo teor das perguntas, o jornalista certamente fez muito bem a lição de casa. Penei e tive que pesquisar muito para não passar vergonha. Com a pregnância eu já tinha até certa intimidade, mas a aplicação na web é que foi o calo. Vou compartilhar aqui o que aprendi graças ao meu bom hábito de responder todos os e-mails que me chegam.

A pregnância é uma velha conhecida no design. A idéia básica partiu dos filósofos Imanuel Kant, Wolfgang von Goethe e Ernst Mach, que diziam que a percepção era um ato unitário. Eles queriam dizer queas pessoas não percebem as coisas aos pedaços; elas organizam as informações de maneira a dar um sentido ao conjunto. No início do século passado, psicólogos conterrâneos desses senhores investiram na idéia e criaram a psicologia da Gestalt. Essa palavra alemã significa justamente “a integração das partes em oposição à soma do todo”. Sabe aquela história de que um mais um é sempre mais que dois? Pois é, vai por aí… a metáfora mais conhecida é aquela que diz que se cada uma das doze notas de uma melodia fosse ouvida por uma pessoa diferente, a soma das experiências dessa turma não corresponderia à de uma pessoa que ouvisse a melodia toda. E não é que é mesmo?

E para que serve esse papo todo? Bem, a teoria da Gestalt busca descobrir por que algumas formas agradam mais às pessoas do que outras. Para tanto, determinou-se oito leis que regem a percepção visual: a unidade, a segregação, a unificação, o fechamento, a continuidade, a proximidade, a semelhança e, voilá, apregnância da forma (pensou que eu tinha esquecido?).

Pregnância (do alemão Prägnanzé a capacidade de perceber e reconhecer formas. Se a forma é complicada, cheia de voltinhas e detalhes, e ainda estiver no meio de uma composição cheia de elementos gráficos e imagens, vai ser muito difícil de percebê-la e identificá-la. Estamos diante, então, de uma peça com baixa pregnância.

Porém, se a forma for simples, clara, e ainda por cima, situada sobre um fundo branco, sem disputar a atenção com ninguém, então temos uma peça gráfica de alta pregnância. Bom, você já percebeu que a pregnância pode ser da forma em si ou do contexto no qual ela está inserida.

Marcas gráficas sempre devem ter alta pregnância nas suas formas essenciais, pois um de seus objetivos é serem percebidas seja qual for o contexto. Se a marca for um brasão cheio de detalhes, vai ser muito difícil diferenciá-la de outros elementos gráficos num mundo tão cheio de informações como o nosso. Em marcas, alta pregnância é um dos requisitos fundamentais, sinal de bom design.

Já na web, é importante que as páginas tenham um design que favoreça a alta pregnância, pois isso favorece a usabilidade, que é a facilidade com que o usuário consegue encontrar o que está procurando. Nos ícones, esse fator é ainda mais crítico. Se o desenho no botão for complicado, ele não será compreendido e não cumprirá a sua função.

Mas é claro que nem tudo é tão simples, né, mané? Senão, fazer sites seria mamão-com-açúcar. O problema é que no design (e no webdesign também), tão importante quanto a função, é o significado. Tem usuário que se sente mais confortável, integrado e estimulado em um ambiente visualmente poluído e cheio de informações competindo pela sua atenção. Do ponto de vista ortodoxo, mau design. Do ponto de vista contemporâneo, design adequado.

E durma-se com uma pregnância dessas.

Lígia Fascioni | www.ligiafascioni.com.br

 

O brilho excessivo da tecnologia

 

O brilho excessivo da tecnologia

O juramento que os engenheiros fazem no dia da sua formatura fala em “não se deixar cegar pelo brilho excessivo da tecnologia”. Na época em que fiz o juramento, nem sabia que a tecnologia tinha brilho, quanto mais excessivo, inclusive com condições de cegar alguém. Passados 18 anos, tudo fica claro quando navego pela Internet. Tem muita gente cega pelo tal brilho, e nem engenheira é. Talvez seja por isso mesmo, a pessoa não teve que jurar coisa alguma e se sente livre para abusar.

 

Pelo menos, é a única explicação que eu encontro para uma loja de móveis que exige que eu preencha um cadastro para ter acesso ao seu catálogo completo. Gente, o que é isso? Onde é que nós estamos? O que é que essa gente entende por marketing? O interesse que o cliente tenha acesso ao portfólio é da loja, portanto, pela lógica, ela deveria, se não provocar sedutoramente o encontro, pelo menos facilitar ao máximo o contato.

 

Se a loja precisa (ou quer) ter informações dos potenciais clientes ou interessados, problema dela. Que ponha seus geniais executivos a pensar e invente uma maneira de convencer o internauta de que ele vai ser beneficiado com a alugação que é preencher um cadastro. E nem precisa nada de original ou criativo, basta oferecer um brinde ou propor um sorteio. O que não pode é colocar um gorila desses na porta da loja, que só deixa você ver a vitrine. Para entrar no recinto, só preenchendo o tal cadastro.

 

Tem também aqueles sites que exigem que você mude a resolução do seu computador para visualizá-lo melhor (não é o máximo da presunção?), que instale um plug-in que você não está interessado ou permita que cookies metidos fiquem xeretando a sua máquina. Tudo isso para você apenas descobrir o telefone da loja.

 

Coerência e profissionalismo para quê? Não é incomum o e-mail de contato para a loja ser [email protected] ou [email protected], sem contar as versões [email protected]. Se eles têm um domínio, por que não o usam para todas as comunicações profissionais da empresa?

 

 

Outro lembrete: o mundo não se resume a Windows. Uso um Mac e tenho muitas dificuldades quando, vira e mexe, vou fazer a reserva em um hotel e depois de me irritar preenchendo o tal cadastro, a coisa simplesmente trava porque não é compatível com o meu navegador. Ligo para lá reclamando e a mocinha diz que eles testaram e não acharam nada, o problema deve ser meu mesmo, é claro. Uma me sugeriu candidamente que eu trocasse de computador. É mole?

 

Isso sem contar que os tais sites, como está se tornando moda, geralmente são construídos em Flash*. Sim, admito um certo preconceito, mas ODEIO sites em Flash (se eu tivesse paciência e tempo sobrando, criaria uma comunidade no Orkut com esse fim). Quando vejo aquele símbolo que diz que você vai esperar eternos segundos cada vez que ousar clicar em um opção, já desisto.

 

Nada contra a ferramenta, que é muito poderosa e permite animação e interatividade como nenhuma outra. Todas aquelas micagens que você sempre sonhou, mas que na prática não servem para muita coisa, estão lá, à sua disposição. Com Flash, o impossível não existe. Isso significa que você pode ter uma espetaculosa e criativa página de abertura sem nenhuma informação útil, mas que mostra como você é inovador, talentoso e irritante!

 

Os sites criados em Flash são lindos, fofos, originais, mas é só. A maioria é como loiras burras. Muito engraçadinhos, mas você pena para obter as informações que precisa. Quando vejo um site assim lembro logo de uma frase que ouvi uma vez de um sábio pedreiro (que não entendia nada de programação): “moça, para quem só tem martelo, tudo é prego!”. Ou seja: se uma cara faz um curso de Flash, quer usar essa ferramenta em todos os lugares e usar todas as suas potencialidades. E dá no que a gente vê.

 

A culpa não é da ferramenta, o poder cega mesmo. É preciso um webdesigner muito racional e comedido para resistir às tentações e realmente projetar um site pensando nos interesses do usuário. E com muito talento persuasivo para convencer o cliente de que os visitantes podem não achar legal que os botões fiquem pulando e trocando de lugar o tempo todo, apesar disso ser possível de se fazer, sim. Que ter login e senha é muito chique, mas as pessoas não querem ter que decorar mais uma combinação por motivo tão fútil e irrelevante. Que ninguém gosta de preencher cadastros, a não ser que ganhe alguma coisa com isso (alguma coisa de verdade, não apenas o “direito” de entrar na loja). Que ninguém tem tempo de ficar esperando uma tela ser lentamente construída na sua frente para depois descobrir que aquilo não tinha funcionalidade nenhuma, foi só tempo desperdiçado mesmo. Que usabilidade é a coisa mais importante na web! Que beleza fútil enjoa.

 

Fica aqui uma sugestão para o juramento dos designers (e dos administradores, publicitários, jornalistas e mais tantos outros profissionais). Incluam, por favor, a tal cláusula sobre o brilho da tecnologia. Pode até não resolver, mas penso que mal não faz…

—————

Lígia Fascioni | www.ligiafascioni.com.br

 

* Adobe Flash, antigo Macromedia Flash e mais antigamente ainda, FutureSplash.

 

Especialização em Design de Interação

Usabilidoido manda avisar.

O Instituto Faber-Ludens, em parceria com as Faculdades Internacionais San Martin (FISAM) e a Universidade do Contestado, está lançando um novo curso de Especialização na área de Design de Interação. O objetivo é formar profissionais com capacidade para expandir e desenvolver a inserção da área no Brasil.

Continue reading Especialização em Design de Interação

Para não dizer que não falei das flores – Design no SPAM

Spam feito com a RONDA do Ceará

Pois é, o governo do Ceará no final do ano passado, de modo inédito no país, aparelhou com tecnologia de ponta as viaturas da Polícia daquele estado, foram adquiridas Toyotas Hilux completas, sistemas de gestão de informação e tudo mais, foi um alvoroço, uma confusão, um Spam na mídia. O resultado hoje é que dizem uns que foi um gasto desnecessário, outros que é investimento em tecnologia e segurança. Bem, resta o futuro nos dizer no que isso vai dar. Mas nos, por sua vez, podemos dizer que foi bem gasto! Pelo menos tem design, e o design do computador de bordo é nosso!

Para maiores informações sobre o projeto e o SPAM, visitem o http://blog.tipod.com.br, o spam está lá com fotos na íntegra!

Foto de Painel com o Computador de Bordo desenvolvido pela TipoD para a Autotrac

Adobe Photoshop Express

 photoshopexpress-px-pqno.jpg

Depois de vários boatos e rumores, foi lançado o Adobe Photoshop Express, um Photoshop na versão online.
Essa versão possibilita você fazer upload de fotos para edições rápidas como: Crop, rotate, redução de olho vermelho (red eye removal), sharpen, white balance, hue, e mais alguns, ou usar fotos da internet para editá-las. Tudo ao estilo web 2.0.

O serviço está disponibilizando 2GB de espaço para fazer uploads de fotos para usuários cadastrados (basta clicar em register na página inicial).

A princípio achei um pouco lento, mas, para edições rápidas está bom.

Via: Willian Nogueira

Por Murilo Parra Contro – http://www.clubedaleitura.org

EXTRA!!EXTRA!!

extra-extra.jpg

Vamos falar então um pouco de tudo e talvez assim falamos de nada ao mesmo tempo.

Lá fora nos EUA está estourando uma crise econômica ferrada. Ainda é cedo eu eu não tenho conhecimento para dizer se vai afetar nosso mercado de trabalho, mas estamos atentos já que empresas que valiam mais de 3bilhões de doletas foram vendidas por míseros 200 milhões. Os caras estão comparando esse final de semana como o 11 de setembro da economia. Este artigo ajuda a entender um pouco. E este outro, faz uma introdução a idéia dos EUA “proteger” a América Latina. Tá estranhando o que? você é designer, isso pode mudar o perfil de seus clientes.

Nos EUA há muito tema para falarmos de ética: Espionar ou “desespionar” seriam alguns deles.

Mais lá de fora, saiu a lista dos 50 Blogs mais poderosos do mundo. Aqui para a gente isso ainda parece ser bobo. Mas é um bom exemplo do poder dessa nova grande arma de comunicação. Um dos meus favoritos está na lista: icanhascheezburger.com. Falando em poderosos, os poderosos X-Men já estão entre nós, ou pelos menos o Magneto.

Mas como o mundo é dividido mesmo, o Digital Paper lançou a lista dos piores sites. Clique aqui e cuidado. Sério, cuidado.

Portifólios on-line. Já fiz uma charge sobre esse assunto. Mas é um risco que eu acho valer a pena correr, pela velocidade que podem te achar. Se forem roubar a idéia, vão fazer de qualquer jeito. Aí cabe você conseguir provar e usar as armas legais que qualquer um tem. Ou usar a criatividade como o Blogagem Inédita por exemplo (indico o “P de Plágio” novinho em folha), ou qualquer outro CC que impessa o garotinho esperto de apertar o “PRINT SCREEN” e levar tudo o que for seu.

Mas falando de portifólio, eu uso o Carbonmade. O Meu portifólio especificamente ficou assim: edsonramos.carbonmade.com. O número de projetos é limitado (FREE), a não ser que você pague lá os 12 dólares menais. Mas existem outras opções legais: design.related, o voodoo chilli e o Figdig.

Image Hosted by ImageShack.us

Sobre a Regulamentação do exercício profissional de Desenhista Industrial, é com grande pesar que foi arquivada mais uma PL. Para quem quiser saber mais e chorar mais, pode clicar aqui e saber tudo sobre a Proposição: PL-2621/2003 .

Sobre a Revista Computer Arts edição 7 – Com a chamada LOGO, Revelamos os segredos da criação de logomarcas originais e inovadoras, a Revista Computer Arts, edição nº7 me aparece nas prateleiras de uma banca. Lembram?? Pois é, mandei e-mail para a revista e até agora nada. Mande você também: computerarts.com.br.

Para quem não leu, aqui estão todas as minhas charges criadas até agora.

charge_01-082.jpgcharge_02-082.jpgcharge_03-082.jpgcharge_04-082.jpgcharge_05-082.jpgcharge_06-082.jpgcharge_07-081.jpgcharge_08-082.jpgcharge_09-082.jpgcharge_10-083.jpgcharge_11-081.jpgcharge_12-081.jpg

Eu estou, junto com o Jeff Romais da CinePixel, desenvolvendo uma pequena animação nos moldes de South Park. Estamos com a idéia de 5 episódios que retrataram o cotidiano do setor de criação de uma agência. Pensei em fazer as histórias de apenas um personagem, o designer, mas acabaria por não constar todas as relações possíveis. Sugestões são bem vindas.

Padrões Web para Clientes e Leigos

Não sei quanto a vocês, mas comigo já aconteceu, várias vezes, de estar frente a frente com um cliente que não tinha a mínima idéia do que são os padrões web e qual a necessidade de adotá-los. Além disso, muitos alunos iniciantes, após serem submetidos a artigos, apostilas e revistas abordando o tema de forma crua e pouco responsável, vieram até mim com muitas perguntas sobre o tema, além de uma série de visões distorcidas e pouco objetivas.

Por isso, acabei escrevendo este artigo, que indico para dar uma iniciação ao tema. Quando apresento este artigo para os meus clientes (leigos, na sua maioria), consigo “conversar” mais objetivamente sobre o tema, além de poder propor soluções mais adequadas para cada projeto. Espero que seja útil para vocês.

Padrões Web: back to basics ou o que nunca deve ser esquecido.

Confira, neste artigo:

1) O que é web?
2) O que é XHTML?
3) O que é CSS?
4) O que são web standards (padrões web)?
5) Como aplicar estes padrões em minhas páginas?

1) O que é web?

A web funciona dentro da internet como um sistema que interliga diversos arquivos por meio de hipermídia e hiperlinks. Na web, existem os servidores (que armazenam os arquivos dos sites que utilizamos), o cliente (você, que acessa a web) e um navegador (também conhecido como browser), cuja função é interpretar os códigos das páginas e processa-los, possibilitando a exibição na tela. As páginas web são escritas numa linguagem de marcação (utilizando marcas, também conhecidas como tags) chamada html. Os browsers processam o código html e servem páginas para os usuários.

2) O que é xhtml?

Xhtml é uma linguagem de marcação, baseada em xml. Em sua versão 1.1 e 1.0, é considerada um evolução ao html4.0.1, tornando as regras mais claras. A separação de conteúdo e formatação visual é um dos pilares principais da linguagem, que também oferece ferramentas e recursos de acessibilidade diversos, bem como a real possibilidade de trabalhar com um modelo único de publicação. Traduzindo, isso quer dizer que você, desenvolvedor/estudante, criará a página somente uma vez, e poderá publicá-la em qualquer tipo de mídia.

3) O que é CSS?

CSS é uma linguagem que permite a formatação visual de uma página html utilizando o sistema de folhas de estilo.

Para entender o conceito do css, imagine o seguinte: você tem um documento extenso, escrito no seu editor de textos preferido. Porém, trata-se de um trabalho escolar, o chato do professor impôs uma série de regras de formatação para títulos, subtítulos, textos, fotos, legendas, etc… Você, neste caso, tem duas opções: ou formata manualmente cada linha de seu texto, ou cria uma folha de estilos, acessíveis facilmente. Então basta selecionar os blocos de texto e aplicar o estilo correspondente. Simples, não? Pois é exatamente assim que o css funciona. Só que, ao invés de formatar textos, ele formata páginas html.

Todos os navegadores dão um suporte razoável ao css (porém, cuidado com o Internet Explorer!). Esta poderosa linguagem oferece um real controle sobre os aspectos visuais e posicionamento dos elementos das páginas, como jamais existiu na web.

4) O que são web standards (padrões web)?

A web possui um órgão gestor em nível global, chamado W3C. Este consórcio mundial da web é presidido por Tim Berners-Lee, o criador do html, desenvolvedor do primeiro servidor web, do http e, portanto, pai da web. Um dos principais motivos da grande popularização da web no mundo, foi justamente o empirismo desse cidadão, que não quis cobrar royalties de sua criação. Ou seja, o html é totalmente livre de licenças.

O W3C cria os padrões que devem ser seguidos e adotados por toda a comunidade web. Estes padrões visam sempre a melhoria contínua da web, facilidade de acesso, democratização da informação e trabalho mais eficiente por conta dos desenvolvedores de web espalhados por todo o mundo.

Atualmente, os padrões web dizem respeito, especialmente, à separação clara e objetiva de conteúdo (html) e formatação visual (css). Também, a questão da acessibilidade e do acesso às páginas de qualquer dispositivo ou browser é uma grande bandeira levantada pelo W3C e por um grande número de desenvolvedores conscientes pelo mundo.

Ao eliminar a necessidade de utilização das tabelas para layouts, que agora podem ser criados por tags de divisão (div), o W3C deu margem à criação do “marketeiro” termo “tableless”, tratado como verdade absoluta por muitos, mas que não passa da aplicação dos padrões web de maneira consciente e limpa.

5) Como aplicar estes padrões em minhas páginas?

Na verdade, é tudo muito simples:

a) Desenvolva seu layout em alguma ferramenta visual de design (photoshop, por exemplo);
b) Após a aprovação do layout (e conclusão de várias etapas de planejamento), parta para a confecção (desenvolvimento) do html básico, puro, sem formatação visual nenhuma. Siga as normas de desenvolvimento, escreva um código lógico, limpo e semântico, com marcações de acessibilidade.
c) Parta para a criação dos arquivos CSS. Trabalhe com arquivos gerais e externos, utilizando-os para a formatação global de seu site.

Photoshop no Linux?

Em notícia recente publicada aqui, falou-se sobre o apoio e interesse que que a Google tem em rodar Photoshop CS3 em Linux, via emulador Wine.

De onde vem esse interesse?

Vale a pena, aqui, analisar algumas das implicações envolvidas neste caso.A Google possui o Picasa, um editor de imagens de uso livre, que, em tese, poderia ser considerado um concorrente do Photoshop. Se não tecnicamente, ao menos, mercadologicamente.

Apesar disso, todos os que trabalham profissionalmente com o Photoshop (eu, inclusive), sabem o quanto é difícil qualquer programa se equiparar em termos qualitativos à esta ferramenta, naturalmente líder de mercado, uma liderança, em tese, pouco contestada pelos utilizadores e pela comunidade profissional de designers, arte-finalistas e operadores de computação gráfica. O que se vê, na verdade, é quase uma “seita” de “photoshopers”, ansiosamente aguardando novas versões, plugins; compartilhando em diversos forúns e comunidades espalhadas pela web seus brushes, patterns, configurações de regulagens de selective colors, curves, etc…

O Picasa, creio, não tentará se equiparar ao Photoshop. Então, qual seria o motivo desse repentino interesse da Google? Qual o interesse da numa ferramenta concorrente da Adobe? Com certeza, eu não conheço o motivo preciso, mas analisarei algumas possibilidades.

Com a (nem tão) recente compra da Macromedia, a Adobe se tornou um quase monopólio de ferramentas e soluções web, as mais populares e utilizadas do mercado. Vejo esse interesse da Google como uma possível aproximação com o “império do software proprietário para web” da Adobe, no melhor espírito “se não pode com eles, alie-se a eles”, ou seja, é melhor estar por perto de quem, em tese, está ganhando o jogo, do que lutando contra.

Já vi muitos amigos de profissão dizerem que “no dia em que o Photoshop rodar em Linux, migro para esta plataforma e abandono o Windows de vez”. É provável que a Google esteja de olho nisso, que tenha consciência de que uma conquista deste porte (rodar Photoshop CS3 no Linux) será acompanhada de uma grande celebração no setor, neste cenário, o “pai” da façanha ganhará ainda mais simpatia da comunidade web.

Cabe ressaltar que rodar Photoshop utilizando um emulador não faz com que o aplicativo se torne livre, muito pelo contrário. O usuário precisa ter uma cópia (para Windows) para instalar o programa em ambiente Linux, utilizando uma solução wine, um dos mais celebrados emuladores para Linux da atualidade.

Então, qual a diferença?

Isto é o que se tem hoje. Porém, com a entrada da Google na “jogada”, tudo pode mudar. É verdadeiramente improvável que a Adobe irá abrir alguma API relativa ao Photoshop, mas, como disse, com um parceiro novo desse porte, o wine dará grandes saltos qualitativos, trazendo uma solução de emulação melhor e estável.

Conclusões

Muitos na comunidade do software livre enxergam, com ressalvas, a tática anunciada pela Google. Por qual razão o investimento será feito em emulação de Photoshop e não no gimp, conhecida ferramenta de edição bitmap desenvolvida para ambiente Linux? Se é pouco provável que a API do Photoshop será liberada, o que acontecerá no futuro, como retorno do investimento neste seguimento?Com certeza, são questionamento pertinentes, que mexem com o mercado.

O fato é: a Google não dá “ponto sem nó”, então podemos esperar mudanças consideráveis.

E você, o que acha?

Artigo originalmente publicado aqui e aqui.

Acessibilidade: urgente e necessária!

imagem representando acessibilidade
Alguns assuntos são tratados com maestria por um sem-número de profissionais, é sempre admirável observar isso. Porém, assuntos como acessibilidade devem ser exaustivamente relatados, observados, repassados de todas as maneiras possíveis.

Nas minhas andanças pela web, descobri um avaliador de acessibilidade (ASES) disponibilizado pelo governo federal eletrônico em conjunto com a Sociedade Acessibilidade Brasil, nos blogs de Cristian Tretin (web para todos) e, posteriormente, no blog de Marcelo Torres.

O ASES é uma ferramenta open source (código aberto, ou seja, permite a melhoria contínua por qualquer desenvolvedor que queira ajudar), seguindo uma tendência inaugurada pelos softwares e distribuições LINUX.

Neste blog, publico sempre conteúdo inédito, normalmente evito assuntos já abordados por outros blogs. Neste caso, porém, a idéia é justamente contrária: acessibilidade e orientações de como testar ou criar conteúdo acessível devem ser divulgadas por todos os blogs relacionados com o tema, expandindo e fazendo a informação chegar para todos os desenvolvedores, estudantes e profissionais envolvidos com web, de alguma forma.

O ASES é uma ferramenta excelente, permitindo o test-drive de seus sites e blogs no ítem acessibilidade. Munido das informações sobre os pontos fracos de sua aplicação web, fica muito mais fácil a melhoria da mesma, corrigindo erros e solucionando problemas.
Várias mudanças serão efetuadas, progressivamente, neste blog, devido aos resultados obtidos pelo ASES.

Confira seus principais recursos, de acordo com o site oficial:

  • Avaliador de acessibilidade (e-MAG e WCAG);
  • Avaliador de CSS;
  • Avaliador de HTML (4.01 e XHTML);
  • Simuladores de leitor de tela (tempo) e Baixa visão (daltonismo, miopia, catarata);
  • Ferramenta para selecionar o DocType, conteúdo alternativo, associador de rótulos, links redundantes, corretor de eventos e preenchimento de formulários

Definições básicas dos termos citados:
a) e-MAG: modelo de acessibilidade do governo eletrônico, atendendo as exigências do decreto 5.296, sobre acessibilidade.

b) CSS, HTML, XHTML: saiba mais neste artigo, aqui do blog.

c) Leitor de tela: software especialmente desenvolvido para leitura do conteúdo dos textos de um computador, inclusive website. Ao se escrever um código de acordo com os padrões e normas de acessibilidade, o leitor cumpre sua missão de maneira muito mais eficaz.

E por falar em leitor de tela, sugiro o download deste aqui:
http://www.nvda-project.org/download.html

Trata-se de uma excelente ferramenta freeware que lê o conteúdo do monitor, utilizando a tecnologia de voz sintetizada. Instale e experimente como suas aplicações web são interpretadas por ele, não deixe de melhorar, sempre!

Aguardem mais artigos sobre este tema importantíssimo!

Grande Abraço!

O Design afeta o Código ou o Código afeta o Design?

E por que não os dois? Sim isso mesmo. E sei que você já se perguntou ou já até mesmo afirmou isso. Seja designer ou seja programador client side, todos já falaram isso. E é verdade, claro.

Mas por que Dulcetti?

Antes de mais nada, deixa eu me apresentar aqui, pois já comecei falando e você nem sabe quem sou eu. Meu nome é Bruno Dulcetti, Programador Client Side da Globo.com e Sênior do Portal Videolog.tv. Tenho um blog que leva meu próprio nome, Bruno Dulcetti. sim, não quis inventar nomes, pode falar que eu não tenho criatividade, eu não ligo. Só quis divulgar mais meu nome mesmo. E consegui.

E não vou ficar me extendendo por aqui, deixo isso para uma próxima oportunidade.

Beleza Brunão. Então continua seu pensamento…

Vamos pegar as duas situações, as duas profissões: Designer e Programador e comparar isso tudo.

O Designer. Layouts mirabolantes e afins.

Você, designer, que mexe bem pra caramba no Photoshop ou Fireworks da vida, tem várias idéias mirabolantes, já pensa em algo ultra-mega-meteórica-fuderosa-bombástica para o layout solicitado pelo cliente. Mas na verdade ele não quis nada tão mirabolante, afinal eles querem sempre algo simples e sucinto não é verdade?

Mas você que mostrar trabalho e tem capacidade pra isso, então pensa em algo bem bizarro para um programador implementar no HTML e CSS. Não liga muito para Acessibilidade e Usabilidade e muito menos para os kbytes que aquele layout vai ter. Vai na base do “se fode ae”.

Até que chega no programador…

O programador olha aquele layout e pensa: “Designer fdp! Só quer me f**er”. Mas relaxem. Eles não querem isso na verdade. Mas isso fica para um discussão paralela que não vem ao caso neste momento.

O programador verifica a possibilidade de poder concluir o trabalho, como pode fazer aquilo, isso, aquiloutro, etc. Chega sempre na mesma conclusão: “É né… Gambiarras”. Sim. Elas, as malditas gambiarras, que os designers conhecem, mas não entendem muitas vezes (quando não possuem conhecimento de programação), por isso, acabam não ligando muito.

Tá Bruno… Mas e aí?

E aí que o programador vai ter que se virar e modificar seu código de uma forma que consiga agilizar aquele layout. E dependendo do layout, o código pode ser alterado (gambiarrizado) em até 30% ou 40%. E chegamos numa conclusão: “É verdade! O Layout, design de um site, modifica a estrutura de um código para podermos deixá-lo da forma que o designer enviou.”.

Agora vamos para outro caso.

O programador. Códigos semânticos e bem organizados (nem sempre)

Agora temos a situação meio que inversa. Vou pegar o exemplo anterior para ficar mais rápido.

Depois de chegar aquele layout mirabolante e rolado os xingamentos do programador, ele cria um documento com algumas modificações e melhorias no layout (melhorias pra ele, mas pro designer seria algo como arrancar um dedo da mão dele), para um bom resultado nos indexadores, um bom resultado no tamanho final do site, carregamento, entre outras melhorias, tanto na usabilidade, quanto de acessibilidade.

O designer recebe aquilo e modifica tudo o que o programador pediu (seria algo como deixar os cantos retos ao invés de arredondados, imagem de fundo menos pesadas e com menos gradientes, entre outros) e retorna o layout para o programador.

O programador analisa e aceita a segunda opção, concluindo que ficou melhor e mais adequado para o ambiente web proposto pelo cliente ou pelo seu chefe.

Hmmm… Entendi Dulcetti… Aí o layout foi modificado…

Exatamente. Chegamos no segundo ponto, onde o design do site teve que ser modificado devido as alterações solicitadas pelo programador, para melhorar o desempenho do site.

Tá Bruno, entendi. Mas quando que acontece um e quando acontece o outro?

É um belíssima pergunta. Isso varia de empresa pra empresa, de projeto pra projeto, entre outros fatores importantes. Por exemplo, se você está numa Agência de Publicidade e ela possui um cliente gigante, que precisa de um projeto magnífico em relação a design, pode ter certeza, o programador vai sofrer ou vai pedir pelo amor de Deus que aquele site seja feito em Flash.

Então o Flash é mais tranquilo?

Depende do ponto de vista. Da parte estrutural sim, mas parte server nem um pouco. Mas isso a gente deixa pra outro artigo.

Onde eu estava mesmo? Ah sim…

Voltando ao “quando acontece”. Agora, se você trabalha numa empresa onde o conteúdo, semântica, código bem feito, SEO bem trabalhado, pode ter certeza que os designers ficarão de cara feia e xingando todas as gerações dos seus superiores.

É Dulcetti… Difícil isso hein.

A realidade é que sabemos que os designers não manjam o suficiente sobre SEO, usabilidade e qualidade de código, pois não é (será?) obrigação deles e os programadores não manjam e não dão tanto valor ao design, a qualidade de um layout bem feito e planejado.

Mas sabemos também que podemos chegar num ponto, num meio termo, sim. Podemos ter layouts muito bonitos feitos com um código digno de um programador, o CSS Zen Garden comprova isso, basta um esforço das duas partes:

Programador:

Para de reclamar um pouco de um layout um pouco diferente do habitual e se esforçar para conseguir um bom resultado. Tem como, eu garanto.

Designer

Não ser tão xiita e abrir mão, às vezes quando necessário, de alguns detalhes que possam prejudicar demais o código de um site/portal. E se possível, usar mais textos nos títulos do que imagens, principalmente quando as fontes forem parecidas com fontes padrões. Essa pra mim é uma das principais reclamações dos programadores, fora os gradientes. 😀

Finalizando…

Bom, vou ficando por aqui e espero que tenham gostado dessa minha primeira contribuição para o Design. Aquele abraço.

Inkscape: desenho vetorial livre

Este artigo, publicado originalmente em meu blog, faz parte da série sobre a migração progressiva de usuários de software proprietários para desenvolvimento web, para ferramentas livres, baseadas em ambiente linux.
A idéia da transição progressiva subentende o conhecimento passo-a-passo de novos recursos, com um mínimo de mudanças no início.

Neste artigo, irei mostrar como instalar, configurar e fazer alguns trabalhos no inkscape, utilizando uma versão para Windows. Na verdade, não existem grandes diferenças entre esta versão e a do Linux, o que facilita o processo de transição consideravelmente.

Siga estes passos afim de conhecer uma nova ferramenta, destinada ao desenho vetorial, sendo um equivalente, no mundo do software livre, aos programas Corel Draw, Illustrator e outros.

Instalando e conhecendo o Inkscape

1) Instalando o programa

Instalação inkscape
Ícone do arquivo de instalação do inkscape para windows

Siga este link e instale a versão para Windows do Inkscape. A instalação é tranquila, sem maiores problemas, bastando seguir as opções da tela. Nada muito complicado. Lembre-se que não será necessário nenhum serial ou arquivo de crack! 😉

2)Conhecendo a Interface

Interface do Inkscape
Interface inicial do inkscape
Do you like Corel Draw?
Se sim, logo de cara vai se sentir familiarizado com a interface do programa, bastante parecida com a interface do Draw, inclusive no que diz respeito ao posicionamento das paletas, recursos e outros. Vejam, não estou dizendo que é igual, mas sim semelhante. Mais um ponto a favor para a migração progressiva e indolor.

3) Alguns Tutoriais de Inkscape:

Conheça mais sobre a ferramenta, suas utilizações e tutoriais nos seguintes links:

Vetorizando com Inkscape

Acompanhe este tutorial passo-a-passo e aprenda, facilmente, a utilizar algumas das ferramentas do inkscape para vetorização.

Para iniciar, faça um cadastro no stock photos. Trata-se de um dos maiores bancos de imagens royalty-free da web, onde você encontra várias imagens legais para seus trabalhos.

A imagem que utilizaremos neste tutorial está aqui.Em tempo: vetorização é um processo em que transformamos determinada imagem num desenho vetorial, podendo ser a réplica vetorial da imagem ou uma versão da mesma.

Neste artigo, nosso pinguim será vetorizado, com todos os passos descritos aqui.

1) Iniciando o trabalho

Abra o inkscape. Observe que um documento novo é criado automaticamente.

Novo documentoUm novo documento, criado na abertura do software

2) Salvando seu trabalho

Clique em arquivo/salvar como.

Salve seu arquivo com o nome de sua preferência. Para ir salvando as modificações após ter salvo pela primeira vez, utilize o atalho ctrl+s.

Salvar como
Janela para salvar o documento

3) Trabalhando com camadas

Como qualquer ferramenta de edição gráfica que se preze, o inkscape também dá suporte ao trabalho com camadas. Por meio delas, é possível organizar o trabalho de maneira profissional, clara e bem definida.

Acesse o menu flutuante camadas: camadas/camadas. Você também pode utilizar o atalho shift+ctrl+l.Dê um clique duplo na camada 1 e a renomeie como imagem. Clique no botão com sinal de adição (+) na parte inferior da paleta flutuante camadas para criar uma nova camada, que deve ser denominada como desenho. Observe os pequenos ícones à frente de cada uma das camadas: o olho controla a visibilidade, o cadeado controla a editabilidade (se estará editável ou não). Na parte inferior, temos as setas, que permitem alterar a ordem das camadas, para cima ou para baixo, conforme a necessidade.

O menu deslizante opacidade controla a transparência das camadas. No valor 100%, estará totalmente visível. Já no valor 0%, estará totalmente invisível. Efeitos do tipo lentes podem, também, ser conseguidos assim.
Menu camadas
Menu flutuante camadas

4) Importando a imagem

Após ter feito o download da imagem do pinguim (conforme indicado na início do artigo), selecione, com um clique, a camada imagem, no menu flutuante camadas. Clique em arquivo/importar ou utilize o atalho ctrl+i. Selecione a imagem e clique em abrir.

Importar
Janela importar

Com a tecla ctrl pressionada, clique em qualquer uma das quatro setas de redimensionamento (presentes nos quatro cantos da imagem), segure e arraste para baixo, adequando o tamanho da imagem ao tamanho do documento. Note que isso deve ser feito utilizando-se a ferramenta de seleção (primeira ferramenta da caixa de ferramentas, com formato de seta preta), também utilizada para mover os objetos na área de trabalho do programa.

Redimensionando

Redimensionando a imagem

Após isso, clique no ícone do cadeado da camada imagem, para bloqueá-la. Clique na camada desenho, afim de selecioná-la para iniciarmos a vetorização propriamente dita. Utilize ctrl+s para salvar as últimas alterações do arquivo.

5) Vetorizando

bezierÍcone da ferramenta bézier, para edição de nós

Utilizando a ferramenta bézier , na caixa de ferramentas, localizada na extrema esquerda da tela, crie um formato básico de retas e pontos, que serão arredondados posteriormente. Na imagem, a linha está mais grossa e colorida, afim de facilitar a visualização:

Inicio vetorA parte preta do pinguim começando a ser vetorizada

6) Criando curvas

nosFerramenta para edição de nós

Com a utilização da ferramenta de edição de nós, iremos criar as curvas. Clique no meio dos seguimentos retos, segure e arraste. Assim, você terá criado as curvas, relacionadas com suas retas específicas.

zoomFerramenta zoom

Porém, utilizando a ferramenta zoom, veja se é necessário criar novos nós, afim de posicioná-los em pontos estratégicos para a criação das curvas. Para criar novos nós, dê um clique duplo no local do seguimento aonde o mesmo será criado.Observe que ao fazer isso, o inkscape mostra as alças de controle, que devem ser utilizadas para ajustar as curvas dos seguimentos, bastando clicar nas mesmas, segurar e arrastar para a posição desejada.

Analise todas as retas do seu desenho, inserindo e editando, com cuidado, todos os nós. Utilize a ferramenta zoom, para maior precisão da edição. Lembre-se: quanto mais cuidadoso você for, um melhor resultado final terá no seu trabalho.Para alterar a cor de sua linha, segure shift e clique na cor desejada na paleta de cores, localizada na parte inferior do inkscape. Para aumentar a espessura da linha, dê um clique duplo no local indicado pela imagem a seguir. Assim, você terá acesso ao menu suspenso preenchimento e traço, com diversas opções de ajustes. Veja:

Edição de linhas

Edição de linhas e paleta de cores

Um grande segredo em vetorização é, exatamente, saber separar cores como partes diferentes do desenho, ou seja, podemos trabalhar cada uma das partes do pinguim separadamente:

  • Parte preta (a “casaca”);
  • Parte branca (“peito” e “barriga”);
  • “Bico”;
  • “Gravata” (as bolinhas brancas serão feitas posteriormente, juntamente com o olho);
  • “Pata”;

Note que, até este momento, estamos somente traçando os contornos. Os preenchimentos serão feitos na finalização da vetorização. A técnica para fazer todo estes objetos é a mesma ensinada para se fazer a “casaca”.

Para trocar a cor dos contornos, faça shift+clique na cor desejada na paleta de cores.Para alternar entre a visualização com e sem a imagem, clique no ícone do olho na frente da camada imagem. Compare e veja se o seu trabalho está satisfatório:

Vetor básico
Traços básicos da vetorização

7) Inserindo formas básicas

Na caixa de ferramentas, selecione a ferramenta elipse, clicando na mesma.

elipseA ferramenta elipse

Faça os círculos correspondentes às bolinhas da gravata, bem como ao olho do pinguim. Para rotacionar, dê clique duplo e rotacione, da mesma forma que acontece no Corel Draw.

O resultado final deve ser este:

gravata com bolinhas
Resultado após a inserção das bolinhas (elipses)

8) Preenchendo os objetos

Para preencher os objetos, os passos são extremamente simples. Basta ir selecionando os objetos desenhados e clicar na cor correspondente. Para tirar uma cor de contorno, por exemplo, basta acessar a paleta de preenchimento e traço (shift+ctrl+f), clicar na aba pintura de traço e clicar no ícone da transparência. Esta paleta já foi mostrada no tópico “6” desse tutorial.

Contorno-traço
Menu preenchimento e traço

No final, sua vetorização deve ter a seguinte aparência:

final
Vetorização finalizada

Com isso, finalizamos nossa vetorização.

Óbviamente, trata-se de uma vetorização bastante básica, com fins didáditos, para auxiliar aqueles que nunca tiveram contato com o programa.

Espero que o artigo tenha ajudado a todos e fico a disposição para comentários, dúvidas e esclarecimentos. Boa sorte!

O cara que manja “tudo de corel” não é designer!

Sim, são muitos (alguns) anos vividos neste mundão de meu Deus…

Quantas vezes ouvi isso: “Você é designer? Manja tudo de corel e photoshop?”
Quantas vezes respondi: “Sim, tenho domínio das ferramentas e mais todas as listadas aí no meu cv, porém a vaga é para designer ou operador de computação gráfica?”

A história continua a mesma.

Micreiros, os “sobrinhos que sabem tudo de computador”, estão por toda a parte, espalhados, prostituindo o mercado, baixando diversas apostilas, comprando e sustentando publicações discutíveis do tipo “seja um web designer e ganhe dinheiro em uma semana”, além de despencarem a média salarial e o custo do freela.

Sou otimista. Acredito que o mercado, como uma tartaruga, caminha rumo ao amadurecimento, entende que soluções de gente “meia-boca” só podem ser ruins e só levam ao re-trabalho muito mais difícil e complicado (o barato sai caro), mais tarde.

Porém é deprimente saber que profissionais que dedicam uma vida ao ofício do design se vejam obrigados a enfrentar, como concorrentes, os malditos micreiros e sua sabedoria onipotente.

Acho que é uma missão de todos nós: educar o cliente, informar o mercado, com paciência e dados concretos mostrar a eles a diferença de um bom design e um design “tabajara”. Reclamar entre nós não resolverá muito: todos precisam reconhecer e respeitar nossa tão sofrida profissão.

Amém.

Software livre: tendência do mercado web.

O software livre é uma tendência forte no mercado web, trazendo grandes benefícios para os seus utilizadores, proporcionando uma solução livre de licenças que funciona num ambiente aberto e livre de vírus, cds piratas, downloads suspeitos (de sites mais suspeitos ainda) e versões “crackeadas”.

Porém, nunca é demais lembrar,(especialmente para usuários de windows e apple) que não existe Photoshop, Illustrator, Flash e outras aplicações comuns e proprietárias do design e da web para linux.
Os usuários linux utilizam versões aproximadas dessas ferramentas, obtendo os mesmos resultados desejados no “fazer” web, de uma maneira geral.

Em alguns casos, a utilização de emuladores (softwares especiais que funcionam no ambiente Linux “simulando” um ambiente windows) podem ser utilizados. Confira este artigo de Helton Eduardo e saiba mais sobre o emulador wine rodando dreamweaver no linux.

Afim de auxiliar na tarefa de escolher os softwares corretos para cada tipo de trabalho em desenvolvimento e criação web, bem como para traçar um comparativo entre softwares livres e proprietários para web, elaborei a seguinte lista:

a) Ilustrações, logotipos, símbolos vetoriais:
Inkscape (software livre)
Corel (software proprietário)

b) Criação de lay-outs, tratamento de imagens, otimização:
Gimp (software livre)
Photoshop (software proprietário)

c) Edição Visual do código:
NVU (software livre)
Dreamweaver (software proprietário)

d) Animações vetoriais:
Ktoon (software livre)
Flash (software proprietário)

e) Desenvolvimento:
PHP (Linguagem de Servidor Open Source)
ASP (Linguagem de Servidor Paga)

Observação: existem diversas outras ferramentas e linguagens no mercado que também efetuam tais trabalhos.

A ferramenta escolhida dependerá de uma série de fatores. Porém, analisando o ambiente competitivo de agências web, cabe ressaltar que a utilização de software livre para web é uma tendência forte.

Aos que trabalham com web, torna-se essencial o aprendizado dessas novas ferramentas, afim de se manterem preparados para o mercado de trabalho. A utilização do software livre traz efetiva liberdade para empresas de web, custos mais baixos de desenvolvimento e investimentos mais racionais.