Como deixar de ser um primata tecnológico: um guia para aprender a programar

Porque saber programar é, assim, como saber uma segunda língua, explicamos-te algumas bases para que possas dar o primeiro passo.

Foto de Fatos Bytyqi via Unsplash

Várias escolas um pouco por todo o mundo – incluindo em Portugal – estão a introduzir programação nos seus programas de ensino. Saber programar, seja um software, um jogo ou um website, é cada vez mais importante na economia digital que tem vindo a ganhar relevância no mundo onde vivemos. Independentemente se vivemos no campo ou na cidade ou da actividade profissional que desempenhamos ou queremos desempenhar, a programação é uma competência que nos pode dar competitividade enquanto indivíduos e ajudar-nos a prevalecer no mercado de trabalho. É uma ferramenta que nos torna mais autónomos e valiosos.

Está mais que provado que a digitalização veio para ficar. A cada dia que passa, o ser humano fica mais envolvido com a tecnologia e isto significa que vai chegar o dia em que não saber as bases da programação é como não saber inglês nos dias de hoje. Saber programar é, assim, como saber uma segunda língua: da mesma forma que é valioso termos a capacidade de falar português e inglês para nos entendermos neste mundo global, é determinante conseguirmos traduzir as nossas ideias também em HTML, CSS e JavaScript. São estas linguagens que nos ajudam a colocar os nossos projectos online ou a “safar-nos” no nosso escritório.

Programação “é bué cenas”

No mundo da informação, por exemplo, pede-se cada vez mais que os jornalistas não só consigam redigir os seus artigos, como dar-lhes forma na Internet – e, neste meio, muitas são as possibilidades que existem para contar histórias. Porque, afinal de contas, jornalismo já não é só escrever textos. Infografias interactivas, animações que explicam temas complexos, experiências de realidade aumentada ou virtual, páginas que nos imergem em narrativas… as possibilidades são ínfimas e dependem apenas da criatividade do jornalista – a mesma criatividade que lhe é pedida no exercício escolher a melhor abordagem e a mais cativante para determinado assunto.

Foto de freestocks.org via Unsplash

A programação – em concreto conhecimentos de HTML, CSS e JavaScript – não são úteis apenas no jornalismo, podendo ser aplicados em múltiplas áreas profissionais – robótica, marketing, medicina, contabilidade… Aprender estas competências pode não só ser um óptimo investimento do teu tempo, como uma mais valia ao nível da empregabilidade.

“Saber programar é o mais próximo que existe de ter super poderes” – Drew Houston, CEO da Dropbox

Neste artigo, vamos introduzir-te ao HTML, CSS e JavaScript. É uma primeira abordagem, que pretende dar-te algumas noções básicas e, de certa, forma desmitificar a complexidade do tema. Tudo para que, no futuro, já não tens de dizer “não percebo nada disso, preciso de ajuda”.

Front-End vs Back-End

Qualquer aplicação que tens no telemóvel, software instalado no teu computador, jogo que jogas na consola ou website que visitas no browser pode ser dividido em duas partes: o Front-End, isto é, aquilo que vês no ecrã; e o Back-End, que inclui todas as linhas de código, bases de dados, algoritmos… que dão forma ao Front-End. Pensa como uma peça de teatro: o Front-End são os actores, os cenários e tudo o que vês no palco, o Back-End são os bastidores. Ou pensa no corpo humano: o Front-End é a tua pele, a cor dos teus olhos, o teu penteado, as tuas roupas; o Back-End é o teu esqueleto, os órgãos e os genes que fazem com que sejas quem és.

Foto de Seabass Creatives via Unsplash

Quando se fala de programação de sites ou apps, há sempre esta separação primária entre Front-End e Back-End. Para uma pessoa que esteja fora do meio, é possível que estes termos sejam confusos, por isso vamos lá ver do que se tratam.

Front-End

De forma simples, o Front-End é tudo o que o utilizador vê quando interage com determinado site ou app. Um caso prático é o que está a acontecer aqui e agora. Ao estares a conseguir ler este artigo, independentemente do dispositivo e formato, significa que tens acesso ao Front-End do site do Shifter. O Front-End é, assim, o primeiro contacto de qualquer pessoa com o mundo da programação, mostrando o seu aspecto final.

Na programação web, o Front-End é composto por três linguagens:

  • HTML
  • CSS
  • JavaScript

HTML

Apesar de o HTML (sigla para “HyperText Markup Language”) ser chamado como uma “linguagem de programação”, se quisermos ser mais corretos e fazer parecer que dominamos estas “cenas” das novas tecnologias, devemos dizer que HTML é apenas uma linguagem de marcação.

Na verdade, com o HTML, conseguimos somente fazer com que apareça conteúdo – texto, imagens, vídeos, som, etc – no ecrã. Se ficarmos apenas pelo HTML vamos obter algo muito idêntico a isto. Pouco interessante, certo? Mas é assim que se começa um site, seja a próxima grande rede social ou a presença online de um negócio do nosso bairro.

CSS

Bem, é aqui que as coisas começam a ficar mais interessantes. Com o CSS (ou “Cascading Style Sheets”), podes dar cor, forma, animações, tamanhos, entre outras coisas ao teu HTML. Ou seja, consegues criar algo bonitinho e que dê vontade de utilizar e navegar. Utilizando estas duas tecnologias, poderás conseguir obter algo com este aspecto:

Já é algo interessante, certo? Provavelmente já te vês a usar este site e consegues compreender o que está lá facilmente. Tem cor, tem forma, etc.

JavaScript

Utilizando HTML e CSS, já se consegue ter algo agradável. Contudo, faltam acções. Quando clicas num botão esperas que aconteça algo, correcto? Quando clicas numa imagem, preenches um formulário ou navegas  é esperada alguma acção também.

É para isso que serve o JavaScript (ou só JS). Com esta linguagem de programação, podes criar interações entre o utilizador e o site ou app.

Back-End

Em parte, é esta a secção que não se vê quando se utiliza um site ou app, mas que, ao mesmo tempo, permite que ele ou ela funcionem – são os bastidores da peça de teatro ou o esqueleto, como te dissemos anteriormente. Vamos imaginar que estás a navegar no Facebook – se o Front-End são o feed, as publicações, os comentários, as fotos de perfil, etc que vês, o Back-End é onde são guardadas e actualizadas as bases de dados, sempre que gostas de um conteúdo ou largas um comentário.

Foto de Tim Bennett via Unsplash

No Back-End, existem múltiplas linguagens. Por exemplo, o Facebook e o Shifter (porque é baseado em WordPress) utilizam PHP. Mas existem outras opções, vamos partilhar as mais conhecidas:

  • PHP
  • Node.js
  • Ruby On Ralis
  • Java
  • Python
  • C#

Apesar de existirem outras alternativas para montar um Back-End, não quer dizer que tenhas de saber estas linguagens todas. Há uns anos atrás, para conseguires criar um site tinhas mesmo de saber pelo menos quatro tecnologias diferentes – HTML, CSS e JS para o Front-End e uma para o Back-End. A boa notícia é que actualmente podes usar JavaScript para o Front-End e para o Back-End, graças a uma plataforma chamada Node.js.

Começar a aprender

Caso te consideres um primata da tecnologia ou conheças alguém que queira deixar de ser, este capítulo vai responder a essas preces. Primeiro que tudo, sugerimos-te que comeces pelo Front-End e pela seguinte ordem: HTML, CSS e JS. Com estas três, consegues montar um site simples, que não exija interacções completas, para exibires o teu portefólio ou colocares o teu projecto no mapa da Internet. Preparámos-te um exemplo muito básico do que podes fazer com estas tecnologias, só para teres uma noção.

Foto de Kobu Agency via Unsplash

Depois de dominares estas três tecnologias, podes passar para o Back-End e sugerimos-te o Node.js – dessa forma, poderás utilizar os conhecimentos que previamente adquiriste em JavaScript. Para aprenderes as bases, podes fazê-lo sem gastar dinheiro e de forma auto-didacta – o Free Code Camp e o Code Academy são duas opções gratuitas.

Caso queiras aprender a programar de forma mais “guiada” e ter acesso a um grupo onde podes conhecer pessoas como tu, a Eddisrupt preparou um curso introdutório de 5 horas, onde vais aprender as bases de HTML, CSS, JS e Node.js, aplicando-as na criação e lançamento de um website.

Se chegaste a esta parte do artigo, significa que já deste o primeiro passo.