Helder Santana

“Eu não sou programador, sou designer, por isso não uso Linux!”

Já ouvi isso, mas penso um pouco diferente.

Em um projeto web, muitos tiram de pauta a homologação no Linux, algo que é bastante prioritário quando desejamos um site acessível.

Um site que funcione 100% no Firefox do Windows, pode não funcionar bem no Linux, pois o navegador trabalha junto a recursos instalados no sistema operacional.

As fontes são um exemplo desses recursos, onde o usuário é obrigado a possuí-la instalada em seu ambiente gráfico.

Grande parte das distribuições Linux (Ubuntu, Debian, etc…) NÃO vem com as fontes mais usadas (Arial, Trebuchet, Verdana, etc…) instaladas por padrão, fazendo com que nossa página fique com uma aparência estranha, podendo até ser afetada no tamanho de componentes (buttons, inputs, etc…) , e possibilitando assim, uma quebra de layout em certos casos.

Outro problema está no Firefox padrão do Debian, um genérico chamado IceWeasel, que possui uma compilação diferente, onde afeta a renderização padrão do Gecko sobre as páginas acessadas.

O que fazer:

Ainda não temos possibilidades fáceis como a instalação automática de fontes, mas existem metodologias que colaboram com a experiência do usuário sobre esses problemas:

• Uma página de Requisitos de Sistema, que mostre a fonte recomendada para uma boa exibição.
• Tamanho cabível em variações de fonte, mesmo que fiquem menores no Windows.
• Em último caso, uma mensagem de alerta sobre um JS, que checa o navegador junto ao sistema operacional e informa uma possível incompatibilidade.

Caso você queira o funcionamento das fontes em seu Linux, existem pacotes que instalam as padrões do Windows.

Não temos essa dor de cabeça quando tratamos de Mac, um dos motivos de eu sonhar com uma aquisição dessa em 2008.

Boas conquistas para você neste novo ano!

Update:

Veja uma outra solução no primeiro comentário.

Estava realizando uma consulta de passagens aéreas para participar do BlogCamp Curitiba e notei uma coisa chata por parte das companias aéreas.

Empresas como a Gol, Tam e OceanAir, não pensam nos padrões da web, descartam o tableless (se é que ouviram falar), a mobilidade e principalmente a acessibilidade.

Nos 3 casos citados, o código está extramamente sujo, sem a preocupação do trabalho em camadas, da otimização, do consumo de banda. Minha maior crítica fica para a Tam, que sofreu uma reformulação de layout após o último acidente, mas pioro a situação do código ao invés de evoluir.

Existem muitas semelhanças com a página Gol e da OceanAir, que me faz pensar de ser um trabalho feito pela mesma equipe, ou copiado. Trabalho classificado como excelente no back-end, mas péssimo no front-end.

Ponto para a Varig!

Comprada pela Gol por cerca de US$ 320milhões, a Varig se saiu bem com o novo site, pois além de lindo e com o código semântico, está compatível com todos os browsers e separado por camadas. Talvez eu daria um 10 se tivesse um estudo melhor na acessibilidade mobilidade.

Vamos ver se a Gol acompanha a filha.

Imagem retirada do Plane Nation.

Para aqueles que são fanáticos por um Networking, ou somente pela web (popular NERD Anti-social), recomendo um evento bem bacana que ocorre por diversas capitais do Brasil.

Não é de hoje que o Encontro de Web Design vira post, justamente por existir desde 2000, o que proporciona a conclusão de que os Dinossauros depende de nós, e que nós também dependemos deles.

Foi lá em 2004 2005, que tive o primeiro interesse pelos Padrões Web, Usabilidade, Semântica, Mobilidade, etc…

Atualmente nem me direciono tanto pelo conteúdo proposto, mas sim pelo papo dos participantes, pela situação, pela compania de pessoas com o mesmo ideal:

“Desenvolver para internet”

É essa hora que deixamos de lado a metodologia de cada um e valorizamos a discussão dos temas.

Independente de ser “Flasher”, Tabelado ou até mesmo “Front-Pageador”, todos estão em busca do mesmo ideal:

O acréscimo de conceito

Vai me dizer que é ruim?

É bem provável que eu não escreva por aqui no evento, mas o Twitter dará conta do recado.

Após a promessa , finalmente consigo tempo para terminar a identidade visual do blog.

Optei por uma comunicação simples, sem muito efeito visual, algo ideal para este tipo de mídia.

Agora vem uma etapa trabalhosa, que é a otimização do código base do skin.

Conto com a opnião de vocês sobre essa nova fase do EuCrio Blog.

O W3C, entidade responsável pelos padrões da web, acaba de inaugurar um escritório em São Paulo.

Em parceria com a NIC.BR(responsável pelo registro de domínios nacionais), estarão em busca da semântica e do aumento de concorrência entre sites brasileiros.

Vamos festejar!!!

Fora Isso

Teremos acesso a tradução de todas as documentações e vamos ganhar um fórum de discussão.

Para que tudo isso?

Se antes já tinhamos fontes nacionais confiáveis, agora então, teremos uma base.

Só desejamos a realização de eventos.

Brasil sil sil!

Quanto ao título do post, deixo a comemoraração da copa para 2014.

Já ouviu falar em RIA?

RIA é a abreviação de Rich Internet Application, traduzindo e explicando, se trata de uma aplicação de internet rica, composta por efeitos visuais e resultados a curto prazo.

Quando ouvimos um pouco sobre esse termo, logo temos em mente uma navegação totalmente interativa, deixando de se preocupar com limites de resoluções, estática e outros que contornam a rotina de produção.

As grandes potências do mercado de softwares (Adobe, Microsoft, SUN), investem pesado nessa visão digital.

A Adobe por exemplo, além de a cada versão inovar o Flash player, saiu na frente com o lançamento do Flex 2 (o 1 não teve sucesso) no final do ano passado, causando impacto em seus fãns.

Eu cheguei a acompanhar um evento desses, destacado pelo verdadeiro “o meu é o melhor”, pois o palestrante mais comparava com o AJAX do que mostrava benefícios vindo dessa tecnologia. Posso dizer que meu único ganho foi o coffee-break.

A RIA problemática

Nesse mesmo evento, foi apresentado uma loja virtual interativa, quase sem carregamento de dados. Houve dúvidas sobre qual aplicação isso tudo funcionava, o palestrante respondeu que tudo ficava sobre o flash player e que era leve.

Mesmo diante de um público impressionado, algo me passava pela mente: “E aonde fica a acessibilidade?”.

Para quem não acompanha, o Flash é um dos piores recursos quando tratamos de acessibilidade, justamente por ser implementado somente como um objeto, e não um bloco de código descrito de conteúdo, ou seja, o leitor de tela de um cego apenas captura a referência Object, quando o necessário seria todo o conteúdo composto dentro dele.

Se descartamos a acessibilidade, temos outro problema em foco, o de a loja trabalhar somente em uma página, e olhe só, no mesmo lugar onde pesquisamos os produtos, vemos os dados e possivelmente compramos. Levando em conta disso, logo pergunto: “E se eu quiser ir direto para o produto em um futuro retorno?”

Imagine a situação, toda vez que for preciso, o usuário terá que fazer novamente o processo de navegação para encontrar o mesmo produto.

Isso é o que posso chamar de quebra de conceito, de desrespeito a todos aqueles que estudam por uma web melhor (Tio Jakob é um deles), e principalmente, ao usuário que está na pesquisa do produto.

A RIA quase deslubrante

Quase porque ainda teremos que deixar a acessibilidade de lado.

Ela se deslumbra quando tratamos da criação de ferramentas online, evitando aquele nosso velho processo de instalação local, e o difícil de acreditar, é que é mais fácil desenvolvermos em Flex do que em AJAX.

O Adobe Kuler por exemplo, é um combinador e compartilhador de paleta de cores online. Temos recursos bem utilitários em sua interface, sem a necessidade de links para boa navegação e sem o uso de efeitos desnecessários. Eu gosto muito dele, principalmente naqueles dias ao qual estou sem a mínima idéia conceitual de cores necessárias para um projeto.

O problema que não temos como desconsiderar

Uma RIA não tem seu conteúdo indexado por buscadores, portanto, se algum dia pensar em desenvolver um projeto desses(caro por sinal), leve em conta de estar jogando seu SEO para baixo, e tente aliviar sua perca colocando Meta Tags.

A concorrência também tem esses problemas?

Tanto o Microsoft Silverlight como JavaFX são interpretados como objetos e também não são indexados por buscadores.

Finalmente consegui escolher o skin base, agora eu posso iniciar o desenvolvimento de uma identidade visual para o blog.

Alguns blogs usam ele, por ser simples, bonito e semântico em grande parte do código.

Vamos ao trabalho Helder!!!

O desenvolvedor web, sempre busca expandir seus limites, propondo novas idéias de espaço, design, tamanho e posição. O que devemos pensar bem antes de sair inovando, é a capacidade de leitura dos navegadores. Para isso existem estudos sobre desenvolvimento Cross-browser.

O Internet Explorer 6(e seus antecessores) por exemplo, além de não ser totalmente compatível com o CSS 2, é incapaz de fazer a renderização da área transparente de uma imagem PNG, deixando o vazio em tonalidade cinza. Sempre que desejamos esse recurso, corremos atrás de hacks de css ou javascripts. A maneira mais utilizada atualmente, é um script chamado PNGFIX, que utiliza filtros do DirectX junto a uma imagem GIF branca de 1×1 pixels, criando um “protótipo” agradável.

É dito “protótipo”, pelo fato de não funcionar em ocasiões de queda de desempenho no servidor, ou então, pelo o usuário não possuir o javascript ativo, sem descartar diversos fatores que influem na incompatibilidade.

Uma boa solução, além de mais precisa, é a utilização do GIF apenas no IE 6, como mostra o exemplo abaixo do Twitter.

Vemos que no primeiro, o logotipo está sendo usado em formato PNG, por estar com uma definição de contorno melhor, comparado ao segundo que está inferior, e definido como GIF. Teste também, salve o logotipo no IE 6 e depois salve nos outros browsers.

Mas como eu faria essa substituição sem javascript?

Não sei no caso doTwitter, mas eu faria essa verificação de browser por alguma linguagem de programação server-side (php, ruby on rails, asp, java e etc), seguindo o seguinte algoritmo:

Variavel browser

browser = Pegue o nome do browser e a versão

Se browser = Internet Explorer 6
escreva gif

Caso for outro browser
escreva png

Alguma dúvida ou sugestão, deixe um comentário.

Já aplicou o web standards no seu processo de criação?

Bom, é basicamente uma metodologia padronizada de desenvolvimento, ao qual se compõe por termos e regras definidos pelo World Wide Web Consortium (W3C), orgão que busca manter uma web funcional e sem fronteiras.

Com o standards, adquirimos a grande possibilidade de elaborar projetos mais efetivos em termos de acessibilidade. Um projeto sem conceito de standards, é o mesmo que um projeto feito para uma única massa populacional e logicamente, restrito a outras porções. Para que o standards seja válido, é necessário a aplicação das regras pelo usuário, e a adoção de seus receptores, que no caso da web, são os navegadores.

Atualmente, estou desenvolvendo, enviando e monitorando mailings. Sempre procuro atingir grande parte da lista, mas nem sempre eles ficam 100% diagramados conforme o proposto pelo cliente, justamente pelo fato dos receptores (nesse caso os leitores de e-mail) não se adequarem totalmente ao HTML.

Um grande exemplo está no Gmail, que altera totalmente as classes de CSS e aplica uma diagramação combinável a sua identidade visual. Pode até parecer fantástico, mas nem sempre isso é legal, pois em alguns casos, a renderização acaba truncando ou aumentando desnecessariamente o tamanho do texto.

Minha solução de curto prazo, foi adotar a criação baseada em imagens, que em grande parte dos receptores, são bloqueadas por segurança e só aparecem com a ativação do usuário, mas que com essa autorização, é exibida normalmente. O grande problema, está nas mensagens ficarem 2x mais pesadas do que em um html, também está possibilidade da perda de atenção do usuário, devido ao tempo que leva carregamento em conexões precárias.

Com esses problemas, resolvi ir ao google e buscar “mail standards”, e em primeiro resultado, tive uma proposta solução.

O IMC , segundo a descrição inicial do site, é um orgão responsável em te ajudar a entender um pouco sobre o desenvolvimento “correto” e ensinar tecnologias beneficientes.

Estou lendo um pouco os textos de lá, mas logo vejo que vai demorar muito para os receptores serem totalmente adequados a esses padrões (se é que existem).

Enquanto não acho a solução ideal, fico na renderização de PNG 8bits.

Atualmente, ando realizando alguns testes no plano de hospedagem da empresa onde eu trabalho.

Estava interessado na aplicação de URLS Modulares no projeto, mas por padrão é adotado o IIS como servidor.

Minha grande surpresa, foi que ao ver a lista de componentes, me deparei com um “semelhante” do Mod_Rewrite do apache, o ISAPI Rewrite.

Feliz da vida, fui direto para aquelas páginas geradoras de comandos rewrite para .htaccess(estava sem tempo para estudar os malditos (*/)) . Aconteceu que não se baseava em .htaccess (e sim httpd.ini) e para piorar, não suportava os melhores comandos do Mod_Rewrite.

Tentei fazer urls do tipo index.asp?variavel=valor1&variavel2=valor2 virarem /valor1/valor2 .

Mas o máximo que consegui foi uma adaptação funcional somente na variavel1, pois não efetuava a requisição da variavel2, mesmo estando com um código válido para o Mod_Rewrite.

Se alguém souber alguma solução, me de um toque.

Pois por enquanto, fico no aguardo do IIS7, que já terá esse módulo por padrão.

Meu alívio é de o EuCrio estar rodando em um apache. =)