Leandro Vieira Pinho's Blog » web standards

Microsoft se prepara para 2007 com redesign drástico em sua Home Page

Leandro Vieira Pinho — Wed, 20 Dec 2006 11:14:49 +0000

A Microsoft Corporation lançou sua nova home page e sinceramente, me surpreendi com o redesign. Primeiro, por se tratar de uma empresa que mantém o browser do ícone azul. Segundo por ela não aderir como deveria os padrões da web (será?).

Com o lançamento do Internet Explorer 7, e a preparação para o Windows Vista e o Office 2007 para o próximo ano, a empresa de Bill Gates estrutura sua nova home page com base nos padrões da web e na utilização do Ajax. Acredite: eles usaram javascript não-obstrutivo.

A dois anos atrás, um grande nome ligado aos padrões da web, refez a home page da companhia com técnicas de CSS para Layout. Confira. Mas agora em 2006, caminhando para 2007 a sugestão parece ter surgido efeito (como demorou hein).

A nova interface como demonstrada abaixo:

Utiliza o Ajax para carregar o conteúdo dinâmicamente através dos links dispostos no menu flutuante à direita. Caso o usuário esteja com o JavaScript desabilitado ou não tenha suporte a esse recurso, ele navegará perfeitamente pelo site, uma vez que os desenvolvedores utilizaram o JavaScript como deve ser: não-obstrutivo.

Uma vez clicado nos links do menu, o conteúdo é exibido em um painel que oferece três opções de visualização de conteúdo (Detail, Thumbnail, Text). Observe a imagem abaixo:

O painel exibido ao clicar nos links do menu flutuante à direita, também oferece uma navegação em um menu flutuante à esquerda, que também utilizada o Ajax para carregar o conteúdo e exibi-lo nesse mesmo painel.

A navegação secundária, localizada na parte inferior da página, altera seu conteúdo dinâmicamente através do evento onmouseover. Os desenvolvedores também privilegiaram a navegação através do teclado, testei aqui e funcionou perfeitamente.

Meu primeiro contato com esta nova Home Page da Microsoft foi super positiva. Fiquei feliz de ver essa empresa se preocupar com a acessibilidade e com os padrões da web. E você, o que achou deste redesign?

Esqueça WYSIWYG. Conheça e adote o WYSIWYM.

Leandro Vieira Pinho — Tue, 12 Dec 2006 23:31:35 +0000

Você certamente já ouviu falar em What You See Is What You Get – WYSIWYG – mas sugiro que você o esqueça. Uma vez que este conceito não respeita a semântica, a qual os códigos HTML devem ser marcados.

WYSIWYM ou What You See Is What You Mean tem semelhança com o WYSIWYG mas seu principal diferencial é o M de Mean, ou seja, significado. WYSIWYM nada mais é do que um Editor Visual Semântico.

E já temos a nossa disposição o WYMeditor – um editor WYSIWYM. Ideal para CMSs (content management systems) e para aqueles nossos clientes que inserem conteúdo em seus sites. E quando isso acontece (quando o cliente insere conteúdo) temos como resultado final, o estrago total da semântica do código HTML, da acessibilidade e afins.

O WYMeditor é compatível com o IE 5.5+ e os browsers baseados no Gecko (Mozilla Firefox, SeaMonkey, …). E não possui muitos recursos – podemos dizer: firulas – como um WYSIWYG. Uma vez que ele tem o foco no significado que tal conteúdo terá no código HTML.

O WYMeditor está em sua versão 0.2, então, certamente, poderemos esperar por grandes novidades sobre ele. E espero que em versões futuras o WordPress possa adotá-lo também.

Mais posts sobre o assunto:

Qual o termo correto: padrões web ou padrões da web?

Leandro Vieira Pinho — Thu, 07 Dec 2006 17:26:16 +0000

Há um bom tempo atrás eu tinha encontrado um blog no Google que discutia o assunto, ou seja, a tradução correta para web standards seria padrões web ou padrões da web?

Além de encontrar a resposta para a questão, eu acabei conhecendo um excelente blog, o WebAlorixá (recomendo a visita e principalmente a leitura dos textos que são de ótima qualidade).

Bom, segundo o autor do blog, Luis de la Orden Morais, o correto a dizer é padrões da web e não padrões web e ele justifica sua resposta:

“[...]No caso da expressão web standards a palavra web não é um adjetivo, nem em Inglês nem em Português, mas um substantivo usado na posição de adjetivo possessivo porque perdeu o de (of). Sendo assim, web standards é na verdade standards of the web; W3C standards[...]

Logo o mais correto seria dizer padrões da web ao invés de padrões web , padrões do W3C ao invés de padrões W3C , padrões do (Comitê do) ISO 9001 ao invés de padrões ISO 9001, pois web, ISO 9001 e W3C são ou estão sendo usados como substantivos tanto em Inglês quanto em Português.”

Então amigo, para de falar padrões web e fale somente padrões da web. Quer mais argumentos para se justificar? Leia.

Firefox 2.0 e o atributo HTML Accesskey

Leandro Vieira Pinho — Tue, 05 Dec 2006 18:13:11 +0000

Alguns sites que eu visito regularmente disponibiliza algumas “hotkeys” através do atributo HTML accesskey, mas, de uns dias pra cá eu notei que tal recurso não estava funcionando mais e ao observar o código fonte das páginas que oferecia tal recurso, o atributo continuava configurado da mesma forma.

Nota: Se você não não conhecia a serventia do atributo HTML accesskey: Leia.

Ao me deparar com um post no blog do Newshutch descobri o por que disso tudo. O Firefox mudou sua maneira de interpretar o accesskey.

Na versão 2.0 do Firefox, ele interpreta o atributo assim:

Alt + Shift + hotkey definida

Em versões anteriores sua interpretação era assim:

Alt + hotkey definida

E a configuração do atributo é feito assim:

... accesskey="z" ...

O porque da modificação foi para evitar conflitos entre as hotkeys do navegador e as definidas na página. Por exemplo, imagine que você tenha definido o seguinte: accesskey=”s” para acessar o campo de busca, mas Alt + S acessa o menu History (no Firefox 2.0 em inglês).

Agora venhamos, o atributo accesskey não é muito utilizado, acredito que agora menos ainda.

Outro detalhe importante que os desenvolvedores precisam saber que agora qualquer accesskey com números, tipo: accesskey=”3″ será ignorado.

Pesquisei em alguns artigos sobre o assunto, se lhe interessar:

Característica comum nos aplicativos web 2.0 me preocupa.

Leandro Vieira Pinho — Mon, 04 Dec 2006 21:56:59 +0000

Tenho percebido uma característica comum nos aplicativos web 2.0 que me preocupa em muito, se trata da utilização do javascript obstrutivo. Sim, muitos sites a la web 2.0 utilizam o javascript dessa maneira, que pena.

O que me intrigou a observar essa questão, foi a agilidade em que os aplicativos são desenvolvidos, muitos deles não gastam mais de uma semana. E com isso, a acessibilidade em alguns aspectos é desconsiderada.

Ora, em meados a propagação cada dia mais e mais dos padrões da web, por que os desenvolvedores estão utilizando o javascript de forma obstrutiva? Seria a pressa em lançar seus serviços on-line? Seria uma desconsideração para com aqueles que navegam com o javascript desabilitado? Ou seria uma forma para posteriormente (e se acontecer) incrementar uma versão com o HTML puro?

Todos os dias eu penso em um forma de ser produtivo e ágil no desenvolvimento para web, trabalhando com Ajax, javascript não-obstrutivo, DOM e o PHP (linguagem dinâmica com o qual eu trabalho). No meu curso Web Sites com Ajax eu explico e exemplifico a metodologia que utilizo, mas confesso, estou ávido a procura de algo novo.

Qual a sua metodologia de desenvolvimento para se trabalhar com javascript não-obstrutivo?

[update]
Uma boa matéria do parceiro Metzen sobre javascript não-obstrutivo

[/update]

10 razões para aprender e usar os web standards

Leandro Vieira Pinho — Wed, 29 Nov 2006 12:03:56 +0000

Este artigo foi criado pelo sueco Roger Johansson do 456bereastreet e traduzido por mim para o português com prévia autorização e consentimento do autor.

Se você é um web developer ou designer e novato nos conceitos dos web standards e está indeciso de onde gastar o seu tempo para aprender tudo a respeito, aqui estão algumas das mais importantes razões para que isso seja feito.

Para os profissionais web que já trabalham com os web standards, esta lista será conveniente quando você precisar de bons argumentos sobre o assunto. Sinta-se a vontade para adicionar qualquer benefício que você pensa a respeito.

1 – Apresente-se com um aspecto profissional

Outros web developers e empregadores estarão atentos ao seu trabalho e saberão que você é um profissional que gosta de estar atento às mudanças tecnológicas e mantém seu conhecimento e habilidades sempre atualizadas. Isto lhe dará o aspecto de um verdadeiro profissional web.

2 – Apresente bem os seus clientes

Utilize os web standards em conjunto com as melhoras práticas de acessibilidade e dê aos seus clientes a chance de falar a respeito sobre o quanto eles se preocupam com todas as pessoas. E como eles acham importante que todo mundo possa utilizar os seus serviços e encontrar informações a respeito de seus produtos. Assim, evitaremos passar má impressões causadas pela desconsideração dos visitantes portadores de necessidades especiais, usuários de MAC e de dispositivos móveis.

3 – Maximize o número de clientes potenciais

Você não saberá qual dispositivo seus visitantes usarão para acessar o seu site. Você pode
pensar que sabe. Mas a não ser que você esteja desenvolvendo uma Intranet para uma companhia que tenha uma política sobre qual navegador deverá ser utilizado.

A única coisa que você razoavelmente terá certeza é que os clientes estarão utilizando alguma coisa que compreende HTML. Utilizando os web standards corretamente você terá certeza que você fez sua parte em desenvolver o seu site compatível com o maior número possível de dispositivos.

4 – Carregamento rápido e redução do consumo de banda

Uma marcação bem estruturada que separa a estrutura e o conteúdo da apresentação é geralmente muito mais compacto que um site com tabelas, spacer.gif e “tag soup”. Os documentos serão menores e mais rápido para baixar. Goste disto ou não, há várias pessoas ainda que utilizam conexão discada para acessar a internet.

Se o seu site tem um plano de hospedagem com tráfego de banda limitado, documentos menores reduzirão custos – mesmo que o tráfego aumente.

5 – Atenda os requisitos de acessibilidade

Utilizar os web standards não garante que todos os aspectos do seu site será acessível para as pessoas portadoras de necessidades especiais, mas isto é um bom começo. Tenha certeza que seus documentos estão validados, bem estruturados, semânticos e você estará no caminho certo para ter um site acessível.

6 – Melhore sua posição nos sites de busca

Conteúdo bem escrito, compreensível, bem estruturado e com uma marcação semântica é uma comida saborosa para os robots de sites de busca e você aumentará sua posição nos mesmos. Isso, com certeza, conduzirá para um acréscimo no tráfego, o que é o desejado por todo dono de site.

7 – Mantenha sua marcação fácil de manter

Ao atualizar o seu site, você prefere trabalhar arduamente sobre muitos kilobytes de intermináveis tabelas aninhadas e spacers.gif ou navegar sobre uma marcação simples, clara e bem estrutura?

Removendo, inserindo ou editando conteúdo sem apresentação é muito mais fácil e eficiente do que ter a certeza que toda a apresentação contida no documento estará correta. Utilizando as CSS para controlar o layout torna esse processo mais fácil para fazer alterações de layouts.

8 – Conteúdo resistente ao futuro

Não há ninguém que possa garantir com 100% de certeza que os documento criados e guardados digitalmente hoje serão legíveis daqui a cem anos. Ou quinze anos. Mas se você separar o conteúdo da apresentação e usar os web standards corretamente, você terá feito o melhor que pode para assegurar que seu conteúdo será legível mesmo ainda quando você se for.

9 – Boa razão para os negócios

Por que um dono de site diria não para mais visitantes? Para um site mais rápido? Otimizado para motores de busca? Com bom potencial publicitário? Isso não faz sentido.

10 – Isto é o jeito certo de fazer as coisas

O caminho dos web standards é a forma que deveríamos ter seguido quando começamos a desenvolver para a web. E agora que podemos, por que não fazer as coisas corretamente e ter uma excelente razão para sentimos bem com conosco mesmo?

Artigo original: Ten reasons to learn and use web standards