Simão Sterne.

Hoje

Quando a web entrou pela primeira vez na consciência pública nos anos 90, era principalmente baseada em texto com elementos mínimos de design – não por escolha; a tecnologia para construir experiências envolventes simplesmente não existia. Naquela época, um gif de bebê dançando era inovador.

Técnicas da Web da velha escola mais esquecidas.

E então alguém percebeu que sites mais atraentes geravam mais dinheiro, e a tecnologia tem se acelerado desde então.

A web de hoje é um vórtice de interesses financeiros concorrentes, controlados pela largura de banda, pelas janelas de visualização e pela adoção de navegadores. Mas para entender como chegamos aqui, precisamos olhar para trás e ver de onde viemos.

Tabelas para Layout

O exemplo clássico de um hack que deu errado é o uso de tabelas para layout.

Como não ocorreu a ninguém que os dados precisariam ser projetados, não havia como posicioná-los. As tabelas foram introduzidas na especificação HTML para exibir dados tabulares, mas as tabelas pareciam um pouco com uma grade de layout de designer e funcionavam, então as usamos.

Pode parecer loucura agora, mas havia muito para endossar a solução original:

  • Funcionou – é difícil impressionar os jovens designers sobre o quão quebrada era a web inicial. As tabelas, ao contrário de literalmente tudo o mais, funcionavam de forma consistente em todos os navegadores.
  • Curva de aprendizado superficial – o web design era todo autodidata e as tabelas pareciam muito com grades no design impresso. E isso foi uma coisa a menos para aprender.

Como você verá no restante desta postagem, a maior parte da tecnologia da web é eliminada por tecnologias mais recentes que fazem o trabalho melhor. No caso das tabelas, veio o CSS, e o código HTML complexo com dezenas de tabelas aninhadas era coisa do passado.

Seu uso indevido por uma geração de web designers deu às tabelas uma péssima reputação – ainda encontro pessoas que me informam com segurança que os elementos das tabelas estão obsoletos. (As tabelas são perfeitamente adequadas, mas não para o layout.)

Texto como imagens

A história da web é basicamente a história de designers ouvindo “Não!” E fazendo isso de qualquer maneira. Não satisfeitos em usar tabelas para layout, os web designers dos primeiros tempos incorporavam regularmente texto em imagens.

Naquela época, não existia o Google Fonts. Na verdade, não existia Google. A incorporação de fontes nem estava no horizonte. As páginas da Web usavam Arial, Times, Verdana, Courier ou – meu favorito – Georgia.

Para não serem impedidos por algo tão mesquinho como o bom senso, os designers perderam a paciência com o ritmo glacial dos aprimoramentos tipográficos na web e começaram a incorporar texto em imagens. E não apenas títulos; páginas inteiras da web foram renderizadas como imagens.

Já se perguntou por que o Photoshop tem todos aqueles efeitos de relevo 3D? Era para atender aos web designers dos anos 90 determinados a tornar seu texto “pop”. É claro que agora sabemos que o texto nas imagens era péssimo para a acessibilidade, tornava os sites lentos e era impossível de atualizar. E nós também sabíamos disso; nós simplesmente não nos importamos.

Mais uma vez, o CSS nos salvou de nós mesmos. Mas antes disso, já havíamos começado a discar. Nossa necessidade obsessiva de usar itálico real deu lugar à aceitação de que os sites não precisam ser idênticos em todos os navegadores, e a web se tornou um pouco mais sã.

Mapas de imagens

Claro, se você for inserir todo o texto em uma imagem, precisará de uma maneira de tornar o texto clicável. Sugestão: mapas de imagens.

Os mapas de imagens eram uma técnica de web design que permitia definir pontos de acesso clicáveis ​​​​em uma imagem. Dessa forma, todo o seu menu poderia ser uma imagem e você poderia criar diversas áreas de acerto correspondentes aos botões skeuomórficos que você passou dias criando no Fireworks.

Os mapas de imagens eram uma solução hackeada que não oferecia nenhum benefício além de permitir maus hábitos, como incorporar texto em imagens.

Felizmente, à medida que avançamos em direção a uma web mais acessível, alimentada por CSS, os mapas de imagens deixaram de oferecer qualquer benefício e seu uso diminuiu.

Diretórios da Web

Em 2023, a web é impulsionada pelo SEO; toda decisão importante sobre um site envolve uma análise estratégica profunda de como as opções disponíveis funcionarão nos motores de busca.

Mas no final dos anos 90, nunca tínhamos ouvido falar do Alta Vista, muito menos do Google. E assim, quando queríamos que os usuários descobrissem um novo site que criamos, nós o publicávamos em um diretório da web.

Diretórios da web como o DMOZ eram coleções de links com curadoria humana. É isso mesmo, havia tão poucos sites online que você poderia listá-los todos em algumas dezenas de categorias. Mesmo quando os mecanismos de pesquisa começaram a aparecer, você ainda enviava seu site para diretórios da web porque os mecanismos de pesquisa tinham recursos de rastreamento muito limitados, então a única coisa que eles rastreavam com regularidade eram os diretórios da web.

Seria impossível manter diretórios da Web agora, mas há 25 anos eles ofereciam vários benefícios que o SEO ainda não superou:

  • Edição humana – os diretórios da web foram editados por humanos, o que significa que cada site em exibição foi avaliado quanto à qualidade por uma pessoa real.
  • Capacidade de navegação — você não precisava saber o que estava procurando nos diretórios da web; você acabou de clicar em um tópico que lhe interessou. Era como um megamenu para a web.
  • Criatividade – os motores de busca valorizam a consistência e os humanos valorizam a novidade. Os web designers nunca foram tão criativos como quando o Google simplesmente não importava.

A mudança dos diretórios da web para os mecanismos de pesquisa foi essencial para a saúde da web à medida que ela crescia. Mas o SEO ainda está lutando para atender às mesmas garantias de qualidade dos melhores diretórios da web.

Molduras

Na era anterior ao lançamento dos modelos pelo CMS, era muito fácil que inconsistências se infiltrassem nos sites. Um menu teve que ser copiado e colado em cada página estática, e quaisquer atualizações tiveram que ser feitas em cada página.

Os frames permitiam que os designers carregassem diferentes partes de um site em diferentes regiões de uma página. De repente, você poderia codificar seu menu uma vez e carregá-lo por meio de um quadro em cada página do seu site. Quadros oferecidos:

  • Organização – era meio OOP para HTML. Tipo.
  • Velocidade de desenvolvimento — código reutilizável significa tempos de desenvolvimento mais curtos e maior consistência.

Infelizmente, os contras dos frames superam em muito os seus prós:

  • Má usabilidade – os navegadores nunca conseguiram lidar com os frames e funcionalidades como marcadores nunca foram implementadas corretamente.
  • Problemas de SEO – os rastreadores da web lutavam para indexar os frames de maneira adequada, então, à medida que o SEO crescia em importância, os sites baseados em frames sofriam.
  • Problemas de acessibilidade – os frames eram terríveis para navegadores de fala. Na verdade, a maioria dos primeiros sites eram péssimos em termos de acessibilidade, mas os sites baseados em frames estavam entre os piores.
  • Blackhat e segurança – nem sempre era óbvio de onde o conteúdo de um frame estava sendo vinculado. Se você achou que fazer hotlinks em imagens era ruim, espere até que alguém faça hotlinks em todo o seu site.

Ainda usamos iframes na web, mas felizmente a abordagem de frames originais foi eliminada por CSS e modelos.

Flash e Actionscript

O Flash foi nada menos que uma revelação quando ganhou destaque por volta do milênio. Inicialmente comercializado como uma ferramenta de animação pela Macromedia, foi a versão 5 que mudou o jogo, expandindo seus comandos rudimentares stop() e play() em uma linguagem de codificação totalmente formada chamada Actionscript.

Na versão 6, o Actionscript evoluiu para uma linguagem de programação orientada a objetos com poder comparável ao JavaScript moderno.

O sucesso do Flash foi graças aos seus múltiplos benefícios:

  • Independente de navegador – o Flash foi executado no Flash player. E assim, não importava qual navegador seus usuários preferiam; seu site seria idêntico em todos eles.
  • Design líquido – um precursor do design responsivo, o design líquido viu os designers de Flash empregarem técnicas que permitiam que uma página da web fosse redimensionada com a janela de visualização.
  • Gráficos vetoriais – o Flash usou gráficos vetoriais, garantindo que os sites parecessem nítidos (tão nítidos quanto 96ppi podem parecer).
  • Incorporação de fontes – use qualquer fonte que desejar; simplesmente incorpore os contornos.
  • Áudio e Vídeo — rich media era simples de implementar em Flash, numa época em que realmente não funcionava em navegadores.
  • Componentes – um precursor dos plug-ins do WordPress, os componentes permitiam que você colocasse código de outros desenvolvedores diretamente em seu projeto.

Claramente, foi a maior invenção desde os tipos móveis; apenas não mencione:

  • Problemas de desempenho – o Flash consumiu energia. Se você tivesse a sorte de possuir um dispositivo móvel (poucas pessoas tinham), um único site poderia descarregar sua bateria a zero.
  • Problemas de segurança – quando a Adobe adquiriu o Flash da Macromedia, ela teve que recuperar o custo lançando mais recursos. Ciclos de desenvolvimento mais curtos podem ter introduzido uma ou duas vulnerabilidades de segurança.
  • Problemas de SEO – inicialmente, o Flash não era indexado pelos motores de busca. O problema foi resolvido em (se não me falha a memória) cerca de um ano, mas em termos de reputação, o Flash nunca se recuperou.

O último prego no caixão do Flash veio quando a Apple se recusou a permitir que o Flash player fosse instalado no novo iPhone. Eles citaram problemas de desempenho e segurança, mas na época era amplamente conhecido que a Apple temia que o Flash permitisse aos desenvolvedores contornar o lucrativo plano da App Store da Apple.

Quando a negação finalmente deu lugar à luz fria da realidade, a frase mais comum ouvida nos estúdios Flash ao redor do mundo foi: “Ei, você viu essa coisa de jQuery?!”

jQuery

O Flash ensinou aos designers que eles não apenas podiam codificar, mas que a codificação aprimorava seus designs. Infelizmente, a alternativa mais próxima ao Actionscript era o JavaScript (ambos são baseados em ECMAScript). JavaScript do início dos anos 2000 era realmente uma droga.

E então veio o jQuery. jQuery era uma biblioteca que abstraía JavaScript em algo que fizesse sentido.

  • Simplicidade – o que levou JavaScript a 18 linhas de código, jQuery gerenciado em duas.
  • Compatibilidade entre navegadores — o jQuery resolveu as inconsistências entre os navegadores, portanto, não tivemos que escrever versões de código específicas do navegador.
  • AJAX — uma das tarefas mais desafiadoras de implementar em JavaScript vanilla foi AJAX. jQuery simplificou tudo, revolucionando a forma como carregamos dados em páginas HTML.
  • Manipulação de DOM — o jQuery simplificou a manipulação de DOM, permitindo todos os tipos de interações complexas que antes só eram realistas no Flash.

jQuery ainda está conosco e é usado em muitos projetos. Muitas pessoas dirão que é muito grande. Na verdade, é do tamanho de uma única imagem muito pequena, mas, como vimos, é difícil abalar más reputações.

Para muitas tarefas, o jQuery foi substituído por frameworks mais modernos como Vue, Angular e React. No entanto, o maior desafio para o jQuery é o vanilla JavaScript, que se uniu e introduziu código moderno inspirado no exemplo do conjunto jQuery.

AMP

Nossa tecnologia final do passado são as Accelerated Mobile Pages (AMP). Introduzido em 2015, o objetivo declarado era melhorar o desempenho do site em dispositivos móveis.

O AMP trabalhou reduzindo a quantidade de HTML, CSS e JavaScript disponíveis para designers. Forçou os designers a serem contidos, o que significava:

  • Tempos de carregamento mais rápidos – o código simplificado significa que o AMP pode ser veiculado mais rapidamente em dispositivos móveis.
  • Impulsos de SEO – inicialmente, o Google favoreceu sites AMP em seus resultados de pesquisa para dispositivos móveis, oferecendo uma clara vantagem para qualquer site que adotasse a abordagem.

Mas o mal superou o bem:

  • Limitações — em vez de otimizar sites, o AMP simplesmente os limitou. As restrições sobre o que poderia ser feito em AMP tornaram os sites sem brilho.
  • Google – ninguém está dizendo que o AMP foi a tentativa do Google de assumir o controle da infraestrutura da web criando uma web de duas camadas. Ninguém está dizendo isso. Ninguém.

O AMP atingiu seu fim (não oficial) quando o Google cedeu à pressão e começou a indexar todos os sites na pesquisa móvel, removendo efetivamente o único benefício fornecido pelo AMP.

Qual é o próximo?

De qual tecnologia da web veremos o próximo fim? Certamente, os dias do humilde JPG estão contados; React parece um pouco demorado; estilos inline devem estar condenados.

O que sabemos com certeza é que nenhuma tecnologia é perfeita e, quando chega uma nova tecnologia, ela substitui a que veio antes.

Quem sabe, talvez até o HTML não esteja conosco para sempre…

Simon Sterne

Simon Sterne é redator da WebdesignerDepot. Ele está interessado em tecnologia, WordPress e tudo relacionado a UX. Nas horas vagas gosta de fotografia.

Com informações de WebDesigner Depot.