18 de Abril de 2018
Desenvolvimento Web Full Stack

Guia de desenvolvimento web: tudo o que você precisa saber antes de começar a programar

Todo mundo já deve ter ouvido, pelo menos uma vez, que aprender a programar vem se tornado cada vez mais necessário. Quanto mais camadas das nossas vidas vão sendo digitalizadas, maior é a demanda do mercado de trabalho por bons profissionais na área e, por isso, muita gente está interessada em aprender desenvolvimento web. Mas, por onde começar?

Primeiramente, é preciso conhecer as partes básicas dessa profissão para escolher aquilo que mais faz sentido para o aprendizado pessoal – seja o que mais agrada ou o que funciona melhor para desenvolver determinada ferramenta.

O que faz um desenvolvedor web?

De maneira bastante resumida, programadores web desenvolvem websites. E isso quer dizer que é possível desenvolver desde o site mais simples até aplicações bastante completas, e-commerces e redes sociais.

Esses websites são vários arquivos que ficam armazenados em servidores, que são computadores ligados à internet e responsáveis por hospedar os sites. Ao mesmo tempo, esses websites ficam disponíveis nos navegadores, que carregam esses arquivos e mostram para o computador de quem está acessando aquela informação.

E o papel do desenvolvedor, nesse processo todo, é criar os códigos que definem tanto o que fica visível para as pessoas, quanto o que está escondido nos servidores. Estamos falando de front-end e back-end.

Qual a diferença entre front-end e back-end?

Front-end é tudo o que fica visível para as pessoas que utilizam o site. Matheus Costa, coordenador dos cursos de programação da Digital House, usa o exemplo do Facebook para ajudar na explicação. Tudo o que vemos, ou seja, a coluna à esquerda com os dados, a coluna central do feed de notícias e a coluna à direita com o chat, é front-end. “É como as coisas estão ordenadas, como elas têm aparência, cores e fontes”, explica Matheus.

Já o back-end é tudo aquilo que não vemos, mas que está presente determinando o funcionamento das coisas; é a parte lógica da aplicação. “Quando eu publico algo no Facebook, a informação está sendo salva num banco de dados, o sistema está vendo quem é meu amigo, e está mostrando essa minha publicação no feed desse amigo”, exemplifica Matheus. Então, tudo o que acontece para manter o funcionamento da aplicação, mas que o usuário não vê ou interage, é back-end.

Devo me especializar em front-end ou back-end?

A dica do coordenador para quem está começando é ser full stack, ou seja, o profissional que sabe programar tanto front-end quanto back-end. As justificativas que Matheus utiliza são duas. Em primeiro lugar, quem está começando ainda não sabe muito bem o que interessa mais, então aprender um pouco de ambos pode ser crucial para tomar essa decisão.

Em segundo lugar, as possibilidades no mercado de trabalho são maiores quando se sabe programar tanto na parte visual quanto na parte lógica. Um dos cursos que Matheus coordena na Digital House é justamente o de desenvolvimento Web Full Stack. A ideia é que o aluno saia formado em cinco meses, com as habilidades de front-end e back-end exigidas pelo mercado de trabalho.

Mas, por onde começar?

Matheus aconselha iniciar com as linguagens de front-end, sobretudo HTML e CSS. “Porque por mais que você não saiba como interagir com essa página ou fazer a lógica, você vai saber como a página é, qual é a estrutura de uma página”, justifica.

Ele explica que, depois de aprender a usar essas duas ferramentas, é hora de partir para JavaScript e, depois, escolher uma linguagem de back-end. “Então, muita gente pergunta por que PHP, ou por que Ruby, mas, no fundo, independente dessas linguagens de back-end, o front-end você precisa saber”.

HTML, CSS e JavaScript: qual a diferença?

Todas as codificações de front-end, HTML, CSS e JavaScript tem funções diferentes, mas andam juntas. Para explicar melhor esse funcionamento, Matheus dá o exemplo do corpo humano. Nesse caso, HTML seriam os ossos, CSS, a pele e JavaScript, os nervos.

HTML é o que define a forma das coisas que os usuários visualizam. Voltando ao exemplo do Facebook, HTML diria que há três colunas principais, e que cada postagem tem o formato de uma caixa. É como se fosse a linguagem que descreve a estrutura básica do que vemos. “Ele não fala cor, não fala posição, não fala tamanho, ele só dá o esqueleto de como a informação fica”, esclarece Matheus.

Já CSS é responsável pela parte visual. Cores, fontes e posicionamento são questões definidas por CSS. É como se fosse a pele cobrindo o esqueleto. Juntos, HTML e CSS já constituem um site, e é por isso que Matheus defende que essas codificações devam ser aprendidas primeiro.

JavaScript chega para dar movimento a esse site. “Quando eu clico na caixa de postar do Facebook, o resto fica meio opaco, e onde eu estou fica mais claro. Então, quem detectou esse clique, quem deu essa ação do usuário foi o JavaScript”, exemplifica Matheus. Por isso a relação com os nervos do corpo humano.

Avançando um pouco mais: quais as principais linguagens de programação?

Depois de aprender HTML e CSS, e avançar para JavaScript, é hora de escolher uma linguagem de programação para se aprofundar. Como não existe linguagem certa para todo e qualquer projeto, assim como existem diversas linguagens possíveis, é interessante conhecer as principais, a fim de escolher a que mais se adequa ao projeto ou ao gosto pessoal. “(Para começar), eu escolheria uma linguagem que me pareça mais divertida, pelo menos, que pareça algo interessante de trabalhar”, aconselha Matheus.

Phyton

Por ser bastante compacta e legível, Phyton é mais recomendada para iniciantes. Essa linguagem é muito utilizada em pesquisas acadêmicas, assim como é muito utilizada no mercado também. Google, Yahoo! e NASA utilizam Phyton, além dessa linguagem também ser usada nos aplicativos web de Instagram, Pinterest e Rdio.

PHP

Essa linguagem se tornou muito popular entre os desenvolvedores web porque ela pode ser incorporada em um documento de origem HTML, sem ser preciso utilizar um arquivo externo. Projetada para sites dinâmicos, toda essa popularidade lhe rendeu o uso em mais de 200 milhões de sites, incluindo WordPress.

Ruby

Ruby é uma linguagem de script orientada a objetos, amplamente utilizada no desenvolvimento de sites. Essa linguagem foi projetada para ser simples e fácil de escrever, sendo recomendada para iniciantes.

Qual é o melhor editor de códigos?

Para começar a criar códigos, é preciso utilizar ferramentas que possibilitem essa ação. Estamos falando dos editores de códigos, programas de computador que tornam a criação de códigos mais simples.

Matheus Costa indica três principais: o Visual Studio Code, da Microsoft, o Atom e o Sublime Text. Esses editores são os três mais famosos do mercado, e são gratuitos – o Sublime Text tem a versão paga, que exclui os anúncios.

Para Matheus, os editores têm funcionalidades muito parecidas, e a escolha deve levar o gosto do programador em consideração. “Eu, particularmente, tenho os três instalados, aí depende do meu humor no momento para escolher por um deles”.

O Atom tem uma forma de personalizar o seu uso mais fácil. Enquanto isso, a vantagem do Visual Studio é que ele vem com mais ferramentas, sendo menos necessário fazer instalações. E o Sublime Text, que está há mais tempo no mercado, possui mais soluções existentes que os outros dois.

Banco de dados: o que é essencial saber?

Entre os programadores, é utilizada a sigla CRUD para definir as funções básicas a se executar em um banco de dados. CRUD é o acrônimo para Creat, Read, Update e Delete. Então, em português, o básico necessário para saber operar um banco de dados é criar, ler, atualizar e deletar informações.

“São funções básicas, com quatro ou cinco linhas de código você faz cada uma, independente da linguagem que você usa”, explica Matheus. Depois de saber essas funções básicas, é possível ir mais a fundo e manusear bancos de dados de diversas formas. “Você pode ser mais avançado no futuro, mas ler, gravar, atualizar e deletar é o essencial”, enfatiza o coordenador.

GitHub: ferramenta essencial

Segundo Matheus, uma das coisas mais importantes para um programador é fazer uso do GitHub. GitHub é uma plataforma que permite que programadores do mundo todo compartilhem seus projetos e códigos. Dessa forma, qualquer pessoa pode colaborar.

Se um programador encontra algo que ele faria diferente em um projeto de outro desenvolvedor do outro lado do planeta, ele pode sugerir uma mudança, enviando o pedaço de código em questão. Dessa forma, o criador pode, ou não, atualizar seu projeto. É uma grande rede de colaboração de criação de código ao redor do mundo. “GitHub hoje é basicamente o currículo do programador do século XXI”, diz Matheus.

Criação é o primeiro passo

Uma das principais dicas de Matheus para quem está começando a programar é criar. Ele conta que começou dessa forma: via páginas da web, como Facebook, Magazine Luiza ou Casas Bahia, e as refazia do seu jeito. Para ele, criar e recriar são peças fundamentais para aprender.

“Primeiro porque você passa a entender como as coisas funcionam. E, criando, você passa, ao mesmo tempo, a desenvolver seu portfólio. Então, caso você vá se mostrar para uma empresa ou vá procurar um freelancer, você já consegue ter coisas que você pode mostrar para as pessoas”.