A morte dos sites

E sem querer, Internet Explorer 6 morreu mesmo em março. Não o navegador que nos assombra, mas a relevância sobre compatibilidade entre navegadores. Ainda ouviremos reclamações sobre a morte do Flash Player, mas isso logo será passado também. Hoje o foco de nossas preocupações deve estar no futuro dos websites como referência de serviços online.

Estamos caminhando para a Web ubíqua, com aplicativos e dispositivos de todos os tamanhos e propósitos.

Gato brincando no iPad

Teorizamos sobre computação ubíqua há muito tempo. Agora chegamos lá. É isso. É o seu gato brincando no iPad.

Em certos casos, o navegador não é mais o recurso primário de uso de um serviço na internet. O Gowalla, um aplicativo de geolocalização concorrente do Foursquare, existe somente como aplicativo para iPhone e Android. O site serve apenas para suporte e ajuda. Mesmo que você possua algum outro celular com navegador, não será possível usá-lo através da versão mobile do site.

Além disso, a vida sedentária que os desktops nos forçou a ter também acabará algum dia. Empresas brasileiras mais ágeis já devem estar planejando ou implementando a substituição de pesados computadores para notebooks e wi-fi, aproveitando a queda do preço do hardware nos últimos anos. Lá fora, não sei se já estão pensando fornecer iPads para funcionários. Preso num aeroporto durante o caos aéreo na Europa, o primeiro-ministro da Noruega foi capaz de governar o país através de um iPad.

O que muda para nós, profissionais da Web?

Muda tudo. No final das contas, é a velha briga dos padrões abertos repaginada. E como toda guerra, precisamos ficar bem informados sobre as tendências e devemos traçar estratégias.

Hoje temos um mercado de sistemas operacionais para dispositivos móveis dividido entre iPhone OS e Android. Mal dividido aliás, pois o hype sobre iPhones, iPads e afins gerou uma enorme demanda por aplicativos para estas plataformas, principalmente entre os editores de conteúdo tradicional, como revistas e jornais do mundo físico. A esperança de não termos um monopólio de plataformas está na estratégia do Google em manter o código aberto no Android e também no Google Tablet.

Se você questionar se não é melhor logo a Apple manter este monopólio, podemos conversar sobre como o IE6, mencionado anteriormente, atrasou a evolução da Web nos últimos anos.

Mais sobre isso:

Tags: , , , ,

O progresso feito na marra

Nas últimas semanas, lovemarks de tecnologia andam anunciando produtos e serviços que entram em conflitos com outras marcas:

  1. YouTube lança uma versão HTML5 do site que dispensa o uso do plugin Flash Player (via Mashable). O player ainda funciona em poucas versões de navegadores e tem alguns bugs, mas já funciona.
  2. Apple anuncia o iPad que, assim como iPhone e o iPod Touch, não possui suporte ao Flash. Dias depois, Steve Jobs afirma em entrevista que a Adobe é uma empresa preguiçosa. Não sem razão. A versão do Flash para MacOsX causa mais travamentos do que na do Windows.
  3. Google suspende o suporte ao Microsoft Internet Explorer 6 (no Computerworld), A medida também vale para Firefox 2, Safari 2 e Chrome 3. A isso se junta a campanha forte nos últimos meses para matar o IE6 liderada pela própria Microsoft. Não sabemos o estrago que as estações de trabalho que ainda rodam XP por causa disso estão fazendo às vendas do Windows 7. Além disso, governos europeus passaram recomendar o uso de navegadores alternativos depois da invasão de contas de ativistas chineses graças a uma brecha de segurança no IE.

A Web vive de ondas rápidas. Muitos poucos sites conseguem fidelização de seus usuários que duram anos. A exceção são os serviços – como provedores de acesso e de webmail – e os portais que provém este serviço. Nos últimos anos, algumas redes sociais conseguiram isso com sucesso em alguns mercados, como o Orkut no Brasil e o Friendster nas Filipinas.

O irônico, é que a plataforma que sustenta este mercado volátil é praticamente o mesmo há dez anos. Fora algumas iniciativas da comunidades, como a adoção maciça do CSS para estrutura e dos frameworks JS, não houve evolução significativa no desenvolvimento para a Web.

Em desenvolvimento server-side, o mercado se dividiu entre JavaMicrosoft .Net e PHP. Alguns desenvolvedores tem migrado para Ruby, outra linguagem dos idos de 1990. Para aplicações ricas, temos o Adobe Flash, que domina o mercado desde 1996, apesar de outras iniciativas como o Silverlight. Além disso, o Flash Player está instalado em 99% dos computadores, sendo uma alternativa mais viável para a publicação de vídeos em sites como o YouTube e o Vimeo e matando o mercado do Quicktime, do Real Player e do Windows Media Player.

O HTML5, juntamente com o CSS 3, é uma especificação ansiosamente aguardada pelos desenvolvedores por causa dos seus inúmeros recursos, mas também é uma demanda das empresas de vanguarda. A nova fronteira é móvel, onde MacOsX e Android evoluem rapidamente para se manter competitivas. Veja este vídeo sobre o Motorola Milestone, onde a plataforma de desenvolvimento se tornou um argumento de venda.

O que vem por aí é excitante. Todos sabem disso. E se for necessário bater forte em um adversário, Apple e Google não se intimidarão. Para nós, profissionais da Web, tudo o que resta é se manter atualizado com as boas práticas e com as novas especificações mantendo os dois pés bem firmes na terra.

Leia mais:

Tags: , ,

Definindo estrutura, apresentação e comportamento

Um desenvolvimento maduro para a Web conta com bons nomes de arquivos, um diretórios organizados e separação das camadas de estrutura, apresentação e comportamento.

O que é estrutura, apresentação e comportamento em uma interface Web

Definimos assim cada uma destas camadas:


Estrutura

A camada de estrutura é formada por uma linguagem de marcação, como o XML, HTML e XHTML. Este arquivo contém o conteúdo do documento, além de informações de indexação e documentos relacionados.

O conteúdo deve ser marcado de modo que seja perfeitamente compreensível para qualquer tipo de usuário, seja ele quem for ou qual seja o dispositivo utilizado. Deve-se marcar cada trecho com seu correspondente, de acordo com a definição do tipo de documento (DTD). No HTML, por exemplo, usamos as tags:

  • <p> para parágrafos;
  • <a> para links de hipertexto;
  • <h1>, <h2> e <h3> para títulos;
  • <ul>, <ol>, <li>, <dl>, <dt> e <dd> para listas;
  • <table>, <thead>, <tbody>, <caption>, <tr> e <td> para tabelas; e assim por diante.

Cada elemento deve procurar seu melhor correspondente no tipo de documento. Se um elemento ou um conjunto deles não tiver uma boa correlação deve-se usar elementos genéricos:

  • <div> para elementos em bloco;
  • <span> para elementos em linha (dentro de parágrafos, por exemplo).

A seguir, um exemplo de documento bem simples pronto para a publicação.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Meu site</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  <script type="text/javascript" src="behavior.js"></script>
</head>
<body>

  <h1>Olá mundo!</h1>

  <div id="avatar">
    <img src="avatar.jpg" width="48" height="48" alt="Foto">
  </div>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    onummy nibh euismod tincidunt ut laoreet dolore erat
    olutpat. Ut wisi enim ad minim veniam, quis nostation
    llamcorper suscipit lobortis nisl ex.</p>

  <p>Ut wisi enim ad minim veniam, quis nostrud exerci.
    <a href="http://outrosite.com" rel="external"
        title="Outro site">link abre uma nova janela</a>.
        Lorem ipsum dolor sit amet, sectetuer cidunt ut
        dolore magna aliquam erat volutpat.</p>

  <p><a href="mailto:eu@provedor.com">mande um e-mail!</a></p>

</body>
</html>

Se somente este código for mostrado ao usuário, é muito provável que ele consiga realizar as tarefas possíveis nesta interface que incluem ler o texto, ver a foto, clicar no link externo e mandar uma mensagem eletrônica.

Nesta camada, são tomadas decisões de conteúdo, como a hierarquia das seções (definidas pelos seus títulos), como será o formato de data, como estruturar um menu de navegação ou um breadcrumb, entre outras. Além disso, é nesta camada que reside boa parte das definições de acessibilidade de uma interface.

Veja um exemplo de página apenas com a estrutura. Perceba que mesmo sem layout ela continua sendo compreensível e que continua funcionando sem JavaScript. Para ver a estrutura de qualquer página use uma extensão para como o WebDeveloper para Firefox e aperte Ctrl+Shift+S.


Apresentação

Na camada de apresentação, está tudo que caracteriza o layout da página. Com o CSS, definimos cores de fontes, fundos, posição dos elementos na página e todas as outras decisões estéticas.

Veja um exemplo de código CSS aplicado ao nosso exemplo de estrutura:

body{
	font: 0.8em Arial, Helvetica, sans-serif;
	background: url(fundo.jpg) no-repeat;
	padding: 140px 0 0 100px;
}
p{
	width: 400px;
	margin:0;
	padding:10px;
	background: url(fundo.png);
}
p + p + p{
	background: transparent;
}
h1{
	width: 400px;
	margin-left: -30px;
	font: bold 3.5em Georgia,Times New Roman,serif;
	color: #93360D;
}
div{
	float: left;
	margin: 0 10px 0 0;
}
img{
	border: 1px solid #000;
}
a{
	color: #000;
}
a:hover{
	color: #93360D;
}
a[rel="external"]{
	background: url(externo.png) center right no-repeat;
	padding-right: 13px;
}
a[href ^="mailto:"]{
	font-size: 0.85em;
	font-weight: bold;
	text-decoration: none;
	padding: 2px 10px;
	background: #E0C284;
}

Separando todas as definições de estilo num documento separado permite melhor gerenciamento de estilos diferenciados de acordo com a mídia. Pode haver um estilo diferenciado para impressão:

@media print{
	* {
		color: #000;
		font-family: Georgia,Times New Roman,serif;
		text-decoration: none;
	}
	p + p + p, img{
		display: none;
	}
}

Veja o exemplo anterior, agora com a camada de apresentação.


Comportamento

Já na camada de comportamento, estão todos os efeitos e todas as decisões funcionais da interface. Manter a programação separada da estrutura facilita a manutenção e evita erros. Além disso, é mais fácil tratar alternativas para usuários que não possuem suporte a esta camada, como usuários de celular e de quiosques.

No exemplo anterior, clique no link para abrir um site externo em nova janela.

Veremos um artigo mais detalhado sobre scripts não intrusivos mais adiante.


Referências:

Tags: , ,

Desenvolvendo de acordo com os padrões Web

Cada novo dia que abrimos nosso navegador para acessar mais um dos milhares de mash-ups, APIs e XMLs que facilitam nossa vida estamos nos afastando cada vez mais da função primordial da Web e da forma como foi planejada para ser: um imenso e estático repositório de documentos. Alternativa fácil para a colaboração online, a Web facilita a publicação e a recuperação de informações para um público que não é informata por vocação ou formação. O HTML foi estabelecido e interpretado pelos navegadores para facilitar a vida destes marcadores amadores, resultando em uma linguagem simplória, sem muitos recursos e sem a obrigatoriedade de ser corretamente desenvolvida.

O uso comercial da Internet e o surgimento dos primeiros profissionais da Web não alteraram o curso do desenvolvimento desta plataforma até o final da década de 1990 com as primeiras versões das recomendações XML (e XHTML), CSS e DOM. Estas foram as primeiras tentativas para o estabelecimento de paradigmas para a criação profissional de documentos para a Web e para o desenvolvimento de aplicativos simples para auxiliar a publicação e a recuperação de informações. Ainda hoje, mesmo com Ajax, Ahah, Amass e hypes similares, algumas destas recomendações são as nossas ferramentas essenciais no desenvolvimento Web. Nos últimos meses isto vem sido questionado como no caso da picuinha do WHATWG e a polêmica do HTML 5 x XHTML 2.

No entanto, a Internet comercial já estava a pleno vapor quando estas recomendações saíram. Muitos de nós, os primeiros profissionais da Web, estávamos mais do que formados empiricamente durante os anos da bolha. E com estas recomendações ainda não corretamente implementadas pelos navegadores e nossa formação profissional comprometida pelo cotidiano, não há de se admirar a quantidade de maus hábitos criados, documentados e perpetuados desde então.

Citemos alguns dos vícios do profissional Web e como começar a abandoná-los:

  1. Não ligamos para a marcação do código
    Seja lá como o código estiver marcado, o navegador irá tentar solucionar e apresentar aquele conteúdo da melhor forma possível. Se for um conteúdo simples não teria problema algum, mas em interfaces com alto nível de interatividade (como Ajax) ou qualquer acesso à árvore do HTML (como CSS e DOM) a queda de performance e o surgimento de bugs de renderização acontecem o tempo todo.
    Escolha um doctype que melhor se adeque às necessidade do projeto e tente validá-lo. Nem sempre é possível conseguir a marca de zero erros e zero alertas de primeira. Apenas tentar ser válido já é um ótimo começo no caso de integração com produtos legados ou de terceiros. Validadores em tempo real como o HTML Validator são uma ótima opção para manter a produtividade.
  2. Usamos marcação ignorando sua verdadeiras finalidades
    Sem uma camada de apresentação estabelecida através de uma recomendação e com a devida implementação nos navegadores, conseguir uma boa identidade visual em um website é impossível. Para isso, por muito tempo, usamos marcações para gerar tabelas para montar estruturas de página. Para muitos desenvolvedores e designers, CSS design ou tableless resume o desenvolvimento de acordo com os padrões Web, enquanto é apenas uma parte dele. A marcação semântica do código vai além de trocar tds por divs.
    Leia a lista de tags HTML e adicione em seus favoritos de consulta rápida. A marcação semântica é essencial para a indexação automática de documentos e um facilitador na portabilidade para outros dispositivos.
  3. Desenvolvemos de acordo com o navegador e não seguindo as especificações
    Em um mundo onde só se acessa a Web de um computador com monitor, teclado e mouse, com um único sistema operacional dominante e dois navegadores Web com mais de 95% do market share, fazer uma interface que funcione em qualquer situação é tão fácil quanto um “se” e um “senão”. Não vivemos mais neste mundo. Hoje podemos escolher entre vários navegadores, sistemas operacionais e dispositivos. Testar uma interface em todas as possibilidades não é só uma tarefa ingrata. É praticamente impossível.
    Devemos trabalhar com o que é comum a todos, que é a Web e seus padrões. Há diferenças de renderização e funcionamento de um navegador para outro? Claro, não há navegador perfeito. Trabalhe com o que melhor implemente as especificações abertas (atualmente Opera, Firefox e Safari) e trate as exceções.
    No CSS, aprenda como não ser prisioneiro dos CSS hacks contornando propriedades que são problemáticas, como por exemplo no caso do box model do Internet Explorer.
    No JavaScript, use a detecção de objetos ao invés da detecção de navegadores. A lógica é simples: se tem o objeto que preciso, faça; senão, não. Mesmo entre as diferentes versões de um mesmo navegador há diferenças na implementação dos objetos.

Não estamos mais nos anos da primeira euforia da Web. Estamos na Web 2.0, na fase áurea dos aplicativos de publicação e indexação de documentos! Muitas das recomendações tiveram problemas de implementação e outras foram duramentemente criticadas, mas o espírito da Web prevalece o mesmo. Podem continuar tentando transformar a Web em uma plataforma avançada de desenvolvimento de software, mas o objetivo continua o mesmo: criação, colaboração e publicação de documentos.

O princípio fundamental do desenvolvimento dos padrões passa por esta definição. Qualquer interface gerada a partir deste princípio terá potencial de ser acessível para qualquer tipo de usuário, ser automaticamente indexável por qualquer mecanismo de busca e portável para qualquer navegador, sistema operacional e dispositivo.

Tags: