A Web e os padrões da Web

Este artigo fornece informação útil sobre a Web - como surgiu, o que são as tecnologias padrão da Web, como trabalham em conjunto, porque é que web developer é uma excelente carreira a escolher, e que melhores práticas irá aprender através do curso.

História resumida da Web

Vamos manter isto muito breve, pois existem relatos muito (mais) detalhados da história da web lá fora, aos quais faremos referência mais tarde (tente também procurar por "história da web" no seu motor de busca favorito e veja o que obtém, se estiver interessado em mais detalhes).

No final da década de 1960, o exército dos EUA desenvolveu uma rede de comunicação chamada ARPANET. Esta pode ser considerada uma precursora da Web, uma vez que funcionava na comutação de pacotes, e incluía a primeira implementação do conjunto de protocolos TCP/IP. Estas duas tecnologias formam a base da infra-estrutura sobre a qual a Internet está construída.

Em 1980, Tim Berners-Lee (frequentemente referido como TimBL) escreveu um programa de caderno de notas chamado ENQUIRE, que apresentava o conceito de ligações entre os diferentes nódulos. Soa familiar?

Avançando para 1989, e a TimBL escreveu Information Management: A Proposal e HyperText at CERN; estas duas publicações em conjunto forneceram o pano de fundo para a forma como a web funcionaria. Receberam interesse suficiente para convencer os chefes do TimBL a permitir-lhe avançar e criar um sistema global de hipertexto.

No final de 1990, TimBL tinha criado todas as coisas necessárias para executar a primeira versão da web - HTTP, HTML, o primeiro navegador web, que se chamava WorldWideWeb, um servidor HTTP, e algumas páginas web para ver.

Nos anos que se seguiram, a web explodiu, com vários navegadores a serem lançados, milhares de servidores web a serem criados, e milhões de páginas web a serem criadas. OK, este é um resumo muito simples do que aconteceu, mas prometi-vos um breve resumo.

Um último dado significativo a partilhar é que em 1994, o TimBL fundou o World Wide Web Consortium (W3C), uma organização que reúne representantes de muitas empresas tecnológicas diferentes para trabalharem em conjunto na criação de especificações tecnológicas para a web. Depois disso seguiram-se outras tecnologias, tais como CSS e JavaScript, e a web começou a parecer-se mais com a web que conhecemos hoje.

Os padrões da Web

As normas / padrões da web são as tecnologias que utilizamos para construir websites. Estas normas existem como longos documentos técnicos chamados especificações, que detalham exactamente como a tecnologia deve funcionar. Estes documentos não são muito úteis para aprender a utilizar as tecnologias que descrevem (é por isso que temos sites como a MDN Web Docs), mas em vez disso destinam-se a ser utilizados por engenheiros de software para implementar estas tecnologias (geralmente em navegadores).

Por exemplo, o HTML Living Standard descreve exactamente como o HTML (todos os elementos HTML, e as suas APIs associadas, e outras tecnologias circundantes) deve ser implementado.

As normas Web são criadas por organismos de normas — instituições que convidam grupos de pessoas de diferentes empresas tecnológicas a juntarem-se e acordarem sobre a melhor forma de como as tecnologias devem funcionar para cumprir todos os seus casos de utilização. O W3C é o organismo de normas Web mais conhecido, mas existem outros como o WHATWG (que foi responsável pela modernização da linguagem HTML), ECMA (que publica a norma para ECMAScript, na qual o JavaScript se baseia), Khronos (que publica tecnologias para gráficos 3D, como o WebGL), e outros.

Standards "abertos"

Um dos aspetos chave das normas web, que o TimBL e o W3C acordaram desde o início, é que a web (e as tecnologias web) devem ser livres de contribuir e utilizar, e não sobrecarregadas por patentes / licenciamento. Portanto, qualquer pessoa pode escrever o código para construir um website gratuitamente, e qualquer pessoa pode contribuir para o processo de criação de normas, onde as especificações são escritas.

Porque as tecnologias web são criadas abertamente, numa colaboração entre várias empresas, isso significa que nenhuma empresa as consegue controlar, que é fantástico. Não se quer que uma única empresa decida subitamente colocar a web inteira atrás de uma paywall, ou lançar uma nova versão de HTML que todos têm de comprar para continuar a fazer websites, ou pior ainda, decidindo apenas que já não estão interessados e simplesmente desligando a web.

Isto permite que a web continue a ser um recurso público disponível gratuitamente.

Não quebre a web

Outra frase que ouvirá em torno das normas abertas da web é "não quebre a web" — a ideia é que qualquer nova tecnologia web que seja introduzida deve ser retro compatível com o que existia antes (ou seja, os antigos websites continuarão a funcionar), e com o que existe atualmente (as futuras tecnologias, por sua vez, serão compatíveis com o que temos atualmente). Ao percorrer o material de aprendizagem aqui apresentado, começará a aprender como isto se torna possível com algum trabalho de conceção e implementação muito inteligente.

Ser um web developer é bom

A indústria da web é um mercado muito atrativo para entrar se estiver à procura de um emprego. Números recentemente publicados dizem que existem atualmente cerca de 19 milhões de web developers no mundo, e esse número é previsto mais que dobrar na próxima década. E, ao mesmo tempo, há uma escassez de competências na indústria — portanto, que melhor altura para aprender a desenvolvimento web?

No entanto, nem tudo é brincadeira — construir sites é uma atividade mais complicada do que costumava ser, e terá de dedicar algum tempo ao estudo de todas as diferentes tecnologias que precisa de utilizar, todas as técnicas e melhores práticas que precisa de conhecer, e todos os padrões típicos que será necessário implementar. Vai levar alguns meses para começar realmente a ser proficiente, e depois terá de continuar a aprender para que o seu conhecimento se mantenha atualizado com todas as novas ferramentas e funcionalidades que aparecem na plataforma web, e continuar a praticar e a aperfeiçoar a sua arte.

A única constante é a mudança.

Isto parece-lhe difícil? Não se preocupe — o nosso objetivo é dar-lhe tudo o que precisa de saber para começar, e as coisas ficarão mais fáceis. Assim que aceitar a constante mudança e incerteza da web, começará a divertir-se. Como parte da comunidade web, terá uma rede de contactos e material útil para o ajudar, e começará a desfrutar das possibilidades criativas que ela lhe traz.

Agora é um criativo digital. Desfrute da experiência.

Sinopse das tecnologias modernas da Web

Há uma série de tecnologias a aprender se quiser ser um programador da web de front-end. Nesta secção iremos descrevê-las brevemente. Para uma explicação mais detalhada de como algumas delas funcionam em conjunto, leia o nosso artigo Como funciona a web.

É provável que esteja a ler estas palavras dentro de um navegador neste preciso momento (a menos que o tenha imprimido, ou que esteja a utilizar tecnologia de assistência, tal como um leitor de ecrã para o ler). Os navegadores são os programas de software que as pessoas utilizam para consumir a web, e incluem o Firefox, Chrome, Opera, Safari, e Edge.

HTTP

Hypertext Transfer Protocol, ou HTTP, é um protocolo de transmissão de mensagens que permite aos navegadores Web comunicarem com servidores (onde os websites são armazenados). Uma conversa típica é algo como

"Hello web server. Can you give me the files I need to render bbc.co.uk"?

"Sure thing web browser — here you go"

[Downloads files and renders web page]

A sintaxe das mensagens HTTP (chamadas pedidos e respostas) não é tão legível para o ser humano, mas isto dá-lhe a ideia básica.

HTML, CSS, e JavaScript

HTML, CSS, e JavaScript são as três tecnologias principais que irá usar para construir um site:

  • A linguagem de marcação de hipertexto, ou HTML, é uma linguagem de marcação que consiste em diferentes elementos em que se pode embrulhar (marcar) conteúdo para lhe dar significado (semântica) e estrutura. O HTML tem este aspeto:

    <h1>This is a top-level heading</h1>
    
    <p>This is a paragraph of text.</p>
    
    <img src="cat.jpg" alt="A picture of my cat">

    Se adotarmos uma analogia de construção de casa, o HTML seria como as fundações e as paredes da casa, que lhe dão estrutura e a mantêm unida.

  • Cascading Style Sheets (CSS) é uma linguagem baseada em regras para aplicar estilos ao seu HTML, por exemplo, definir cores de texto e de fundo, adicionar bordas, animar coisas, ou colocar uma página de uma certa forma. Como um exemplo simples, o seguinte código tornaria o nosso parágrafo HTML vermelho:

    p  {
      color: red;
    }

    Usando a analogia da casa, CSS é a tinta, papel de parede, tapetes e pinturas que usaria para fazer a casa parecer bonita.

  • JavaScript é a linguagem de programação que utilizamos para adicionar interatividade aos websites, da mudança de estilo dinâmico, até à obtenção de atualizações a partir do servidor, passando por gráficos complexos em 3D. O seguinte JavaScript armazena uma referência ao nosso parágrafo na memória e depois altera o texto:

    let pElem = document.querySelector('p');
    pElem.textContent =  'We changed the text!';

    Na analogia da casa, o JavaScript é como o fogão, TV, Microondas, ou secador de cabelo — as coisas que dão à sua casa uma funcionalidade útil.

Tooling

Uma vez aprendidas as tecnologias de base que podem ser usadas para construir páginas web (como HTML, CSS, e JavaScript), em breve começará a deparar-se com várias ferramentas que podem ser usadas para tornar o seu trabalho mais fácil ou mais eficiente. Os exemplos incluem:

  • As ferramentas de programação em navegadores modernos que podem ser usados para debug os seus sites.
  • Ferramentas de teste que podem ser usadas para testar se o seu código está a agir da forma desejada.
  • Bibliotecas e frameworks construidas com JavaScript que permitem construir certos websites dum modo mais rápido e eficiente.
  • Linters, que usando uma série de regras, processam o seu código e realcem os lugares onde as regras não foram seguidas corretamente.
  • Minifiers, que remove whitespace desnecessário de ficheiros com o seu código para diminuir o seu tamanho e permitir que sejam descarregados mais rapidamente.

Linguagens de lado de servidor e frameworks

HTML, CSS, e JavaScript são linguagens de front-end (ou client-side), que significa que eles são processados pelo navegador para produzir a interface dum website que os seus utilizadores possam usar.

Há outra classe de línguas chamada de back-end (ou línguas do lado do servidor), o que significa que são executadas no servidor antes de o resultado ser então enviado para o navegador para ser exibido. Uma utilização típica para uma linguagem do lado do servidor é obter alguns dados de uma base de dados e gerar algum HTML para conter os dados, antes de depois enviar o HTML para o navegador para o exibir ao utilizador.

Exemplos de linguagens de lado de servidor incluem C#, Python, PHP e Java.

As melhores práticas da Web

Falámos brevemente sobre as tecnologias que irá utilizar para construir sítios web. Agora vamos discutir as melhores práticas que deverá empregar para se certificar de que está a utilizar essas tecnologias o melhor possível.

Ao fazer desenvolvimento web, a principal causa de incerteza advém do facto de não se saber que combinação de tecnologia cada utilizador utilizará para visualizar o seu site:

  • Utilizador 1 pode estar a usar um iPhone, com um ecrã pequeno e estreito.
  • Utilizador 2 pode estar a usar um portátil de Windows com um ecrã widescreen.
  • Utilizador 3 pode ser cego e usar um leitor de ecrã para ler a página da web.
  • Utilizador 4 pode estar a usar um computador antigo que não consegue correr navegadores modernos.

Como não sabe exatamente o que os seus utilizadores irão usar, precisa de planear defensivamente - tornar o seu site tão flexível quanto possível, para que todos os utilizadores acima mencionados possam fazer uso dele, mesmo que nem todos possam ter a mesma experiência. Em resumo, estamos a tentar fazer com que a web funcione para todos, tanto quanto possível.

Encontrará os conceitos abaixo em algum momento dos seus estudos.

  • Compatibilidade entre navegadores é a prática de tentar assegurar-se de que a sua página web funciona com o maior número de dispositivos possível. Isto inclui a utilização de tecnologias que todos os navegadores suportam, proporcionando melhores experiências aos navegadores que podem lidar com eles (melhoramento progressivo), e/ou escrever código de modo que caia de novo numa experiência mais simples, mas ainda utilizável em navegadores mais antigos (degradação graciosa). Também envolve muitos testes para ver se algo falha em certos navegadores, e depois mais trabalho para corrigir essas falhas.
  • Web design reactivo é a prática de tornar a sua funcionalidade e layouts flexíveis, para que se possam adaptar automaticamente a diferentes navegadores. Um exemplo óbvio é um website que é apresentado de uma forma num navegador de ecrã panorâmico no ambiente de trabalho, mas que se apresenta como um layout mais compacto e de uma só coluna nos navegadores de telemóveis. Tente ajustar agora a largura da janela do seu navegador, e veja o que acontece.
  • Performance significa fazer com que os websites sejam carregados o mais rapidamente possível, mas também torná-los intuitivos e fáceis de usar para que os utilizadores não fiquem frustrados e vão para outro lugar.
  • Acessibilidade significa tornar os seus sites utilizáveis pelo maior número possível de diferentes pessoas (conceitos relacionados são diversidade e inclusão, e design inclusivo). Isto inclui pessoas com deficiências visuais, auditivas, cognitivas, ou físicas. Também vai além das pessoas com deficiências - que tal jovens ou idosos, pessoas de culturas diferentes, utilizadores de dispositivos móveis, ou pessoas com ligações de rede pouco fiáveis ou lentas?
  • Internacionalização significa tornar os websites utilizáveis por pessoas de culturas diferentes, que falam línguas diferentes das suas. Há aqui considerações técnicas (tais como alterar o seu layout para que ainda funcione bem para as línguas da direita para a esquerda, ou mesmo verticais), e humanas (tais como utilizar uma linguagem simples e não linguística para que as pessoas que têm a sua língua como segunda ou terceira língua tenham mais probabilidades de compreender o seu texto).
  • Privacidade & Segurança. Estes dois conceitos estão relacionados, mas são diferentes. A privacidade refere-se a permitir que as pessoas se dediquem aos seus negócios em privado e não as espiar ou recolher mais dos seus dados do que é absolutamente necessário. Segurança refere-se à construção do seu website de forma segura para que os utilizadores maliciosos não possam roubar-lhe ou aos seus utilizadores a informação nele contida.

Ver também