05. HTML5 e CSS3

Este capítulo nasce das 80 questões publicadas sobre HTML5 e CSS3. A leitura do acervo revelou 11 núcleos de conhecimento, aqui reorganizados como uma explicação progressiva: primeiro o vocabulário e o modelo mental, depois os mecanismos, as decisões de implementação, os limites e a forma de verificar o comportamento do sistema.

A arquitetura encontra o usuário nas interfaces web e móveis. O percurso começa por necessidades, informação e acessibilidade, avança pelas tecnologias da interface e termina nas plataformas e formas de entrega. Este é o capítulo 5 de 12 da disciplina Desenvolvimento Web, Mobile e Experiência. Ele retoma Usabilidade e acessibilidade e utiliza essa base para avançar. Na sequência, estudaremos JavaScript e Ajax.

O fio condutor

O desenvolvimento de software começa com um problema e avança por decisões que precisam permanecer compreensíveis e verificáveis. Requisitos orientam modelos; modelos orientam código e arquitetura; testes verificam comportamento; e a operação devolve informações para o próximo ciclo. Uma falha importante no início tende a se espalhar pelas etapas seguintes.

Neste capítulo, use HTML5 e CSS3 para acompanhar quatro perguntas: qual problema precisa ser resolvido, como o mecanismo funciona, que consequências a escolha produz e como o resultado será verificado. Essa sequência transforma termos técnicos em decisões que podem ser explicadas e testadas.

Parte 1 — Fundamentos e vocabulário

Começamos por Parte 1 — Fundamentos e vocabulário, pois essa base organiza os conceitos e exemplos que aparecerão no restante do capítulo.

HTML5

O ponto de partida é estabelecer o significado do conceito e o problema que ele procura organizar. HTML5 descreve estrutura e semântica do conteúdo; CSS apresentação e JavaScript comportamento. A regra ganha sentido quando suas consequências orientam a implementação.

Para aplicar HTML5, acompanhe a execução desde a entrada até a saída e anote pré-condições, mudança de estado, custo e falhas possíveis. Assim o conceito deixa de ser um rótulo e passa a orientar decisões.

Use como teste da compreensão: HTML5 descreve estrutura e semântica do conteúdo; CSS apresentação e JavaScript comportamento. Depois verifique a afirmação com execução controlada, teste automatizado, análise do contrato, medição ou documentação da versão correspondente. A evidência deve reproduzir a propriedade afirmada, inclusive nos casos de erro e de fronteira.

Flexbox

A partir dessa distinção, o próximo elemento completa o fluxo. Flexbox organiza itens em um eixo principal com controle de alinhamento e distribuição. Observe como definição, mecanismo e efeito permanecem ligados.