Desenvolvimento web

O código é igualmente necessário tanto para um site com CMS como para um projeto feito de raiz. Esta secção é sobre desenvolvimento sem amarras ao WordPress. Frontend e backend, ferramentas e técnicas prontas a usar. Para quem faz layout, escreve scripts ou instala o Git no computador pela primeira vez.

O frontend é dissecado camada por camada. HTML como esqueleto da página. CSS para o aspeto visual: grelhas com Flexbox e Grid, adaptabilidade, transições suaves e efeitos limpos sem código a mais. JavaScript e jQuery para o comportamento: alternadores, tratamento de cliques, validação de formulários, dinâmica na página. Há análises de tarefas concretas como o método .toggle(), a geração de um número aleatório, um temporizador de contagem decrescente ou o scroll suave até uma âncora. Nada de teoria abstrata. Código pronto para colar e testar.

O backend assenta em PHP. Mostramos como chamar APIs externas (interfaces de programação através das quais os sites trocam dados). Por exemplo, ir buscar a cotação do Bitcoin, o tempo ou o preço de um produto a um serviço de terceiros. Abordamos o envio de formulários por email, o trabalho com JSON, consultas básicas a bases de dados. E também as expressões regulares, aquela linguagem de pesquisa por padrões que muitos receiam sem razão. Validação de email, telefone, limpeza de strings. Explicamos com exemplos vivos, não com sintaxe seca.

O código tem de ser escrito e guardado em algum lado. Por isso, um bloco separado sobre ferramentas. Git e GitHub para controlo de versões e trabalho colaborativo. Instalação do Git no Windows a partir do zero, comandos básicos, primeiro repositório, reversão de alterações, trabalho com ramos. Markdown para documentação e ficheiros README. CodePen para experiências rápidas no navegador. Ambiente local: Laragon, Open Server, XAMPP, o editor Atom. Tudo aquilo com que realmente se trabalha de forma confortável todos os dias.

Quem temos em mente quando escrevemos. O principiante ainda está a perceber como uma tag se distingue de um seletor e copia código sem entender metade das linhas. O experiente conhece as bases, mas procura uma solução curta para uma tarefa pontual, para não reinventar a roda. Ao primeiro, explicamos cada linha e mostramos o resultado no navegador. Ao segundo, damos um snippet pronto e indicamos de imediato onde ele se irá quebrar.

Erros típicos que destacamos. Um script no head em vez do footer, fazendo com que o jQuery não encontre o elemento. Um ponto e vírgula esquecido e aspas de tipos diferentes. Uma expressão regular que captura avidamente mais do que deve. Uma consulta direta à base de dados sem validação dos dados. Mostramos não só código que funciona, mas também as armadilhas à sua volta.

Os materiais são escritos por pessoas que programam de facto, não que recontam tutoriais alheios. Nós próprios tropeçámos nestes mesmos erros e lembramo-nos de onde um principiante irá emperrar. Por isso, cada análise é construída de forma simples. Primeiro, uma solução curta e funcional. Depois, a explicação do porquê de funcionar e onde estão as armadilhas. Sem palha nem cópia-colada da documentação oficial.

Se está a começar, avance do simples para o complexo. Primeiro HTML e CSS. Depois JavaScript e PHP básico. E só depois Git, APIs e expressões regulares. Cada texto responde a uma pergunta concreta, em vez de tentar cobrir tudo de uma vez.

A secção está ligada à categoria WordPress. Quando o código diz respeito especificamente ao motor do WP, hooks, functions.php ou plugins, encaminhamo-lo para lá. Aqui fica tudo o que é universal e útil em qualquer projeto. Um snippet de CSS assenta igualmente bem numa landing page, num blog e numa loja online.

O conteúdo é atualizado regularmente de acordo com as normas e versões mais recentes das ferramentas. As linguagens evoluem, as técnicas antigas tornam-se obsoletas, surgem novas. Mantemos os exemplos funcionais, em vez de deixar código com dez anos a acumular pó. Faz layout, escreve scripts ou está a aprender Git? Volte aqui sempre que precisar de perceber código ou de encontrar uma solução pronta a usar.