Eu dou aulas de programação e projetos digitais para jornalistas há seis anos (fora uma experiência de quatro anos na formação de jovens de baixa renda). O que percebo é que os métodos tradicionais de ensino de programação e desenvolvimento web frustam esse pessoal porque demoram muito para chegar em algo concreto. O comunicador quer concretizar a ideia dele logo. Por isso eu desenvolvi um jeito mais rápido de trabalhar, para o aluno conseguir tornar real uma ideia de forma eficiente.

Meu método funciona dentro da lógica da engenharia reversa. Ao invés de começar trabalhando pequenos conceitos HTML e CSS, por exemplo, eu faço uma breve apresentação de como essa linguagem se comporta e a partir daí vamos por a mão na massa (você pode ver essa introdução aqui e aqui).

Como por a mão na massa? Primeiro eu escolho um template gratuito (gosto muito dos do One Page Love).

Aqui uma informação importante: muito do que faz um template bom é a organização e clareza na documentação do criador. Isso significa que os elementos estão organizados de forma a ser fácil de identificá-los. Normalmente eu seleciono com antecedência um template bacana para meus alunos já com isso em mente. Mas se você for escolher um por conta própria, tenha em mente o seguinte: se o template escolhido se mostrar muito confuso, troque. Não se apegue.

Um dos templates preferidos dos meus alunos é o Grayscale, que já vem com o Bootstrap instalado. O bootstrap é um toolkit de prototipagem rápida que facilita a configuração do CSS e do HTML. Na prática, ele define já categorias dos elementos da página e define comportamentos padrão (já vem com o CSS escrito). Daí só o que você tem que fazer é alterar o que quiser para o que você imagina.

Escolhi o template, e aí?

Bom, faça o download dos arquivos e descompacte a pasta no seu computador. Entre na pasta e procure o arquivo index.html. Abra ele no navegador (de preferência o Chrome). Por padrão, o index é sempre a página principal de um site.

Pare um minuto e instale um editor de código para continuar. Eu recomendo o Sublime Text. Esse editor serve para você alterar o HTML, CSS e javascript das páginas.

O Chrome tem uma função chamada “Inspecionar elemento”. Essa função permite que você veja o código HTML do que está aparecendo na tela. Para usá-la, basta clicar com o botão direito do mouse sobre o elemento desejado (um título, por exemplo). A opção “Inspecionar elemento” deve aparecer no menu. Ao clicar você vai ver aparecer uma janela na tela com o código html da página já na linha referente ao elemento selecionado. Se você passar com o mouse sobre os códigos vai ver os elementos serem selecionados.

Pronto, aí é só identificar o elemento e alterá-lo no código. Como? Abra o arquivo html no editor que você instalou, ache a linha que aparece no Inspetor e altere o que achar necessário. Eu recomendo que, primeiro, o aluno altere só texto. O texto é o que aparece em branco no editor (note que as tags e demais elementos do HTML ficam coloridinhos). Salve o arquivo e atualize a página no navegador. Pronto.

Não deu certo

É comum alunos de primeira viagem cometerem alguns erros básicos:

  1. editar o HTML que está salvo no computador, salvar e daí atualizar o site que está online (aquele que você abriu para baixar os arquivos). A alteração feita no seu computador não altera o site que está online, só o arquivo que está no seu computador. A solução? Abrir o arquivo do computador no navegador.
  2. O arquivo que você está vendo no navegador é diferente do que você editou. Isso acontece quando a pessoa, inadvertidamente, salva duas vezes os arquivos do site. Verifique o caminho do arquivo (na barra de endereços do navegador) e certifique-se que você está editando o mesmo arquivo.
  3. Você alterou a extensão do arquivo. Note que o arquivo editado deve manter a extensão original.
  4. Você editou algo que não era visível na página.

 

Dicas finais: não desista

O início do trabalho com desenvolvimento web é muito frustrante. É um trabalho diferente do que estamos acostumados a fazer. E, vamos falar a verdade, é uma sopa de letrinhas interminável e sem sentido. Mas aprender desenvolver é como aprender um novo idioma. No início a gente sente um estranhamento, não entende as palavras, precisa de ajuda o tempo todo. Mas com o tempo a gente vai se familiarizando com os novos termos. No início reconhece uma coisa lá, outra aqui. Só então é que vai ganhando vocabulário e confiança.

No desenvolvimento web é igual. Não dá para desistir por causa do estranhamento. Na realidade, esse trabalho tem uma vantagem em relação ao aprendizado de línguas: aqui você está sozinho na frente do computador e se algo der errado, é só dar crtl+z e fazer de novo. Se der muito errado, baixe o template de novo e recomece. Ninguém vai ficar anotando os teus erros.

E lembre-se: ninguém vai da ignorância direto para o conhecimento pleno. Todos passamos pelo estranhamento, pela dificuldade. Não há aprendizado sem isso. Então respire fundo e vá em frente.

Deixe uma resposta