GAC011 Computing II: Desenvolvimento Web

O GAC011 é onde você constrói e publica um site real. Seis unidades levam você de um design no papel através de HTML, CSS e JavaScript até um site lançado e um plano para promovê-lo.

Tudo é avaliado com base no que você produz: um storyboard 分镜脚本 e design, o site em si, e uma estratégia de mídia social 社交媒体策略, além do trabalho contínuo. Não há prova escrita.

• O design conta tanto quanto o código. Os resultados do módulo nomeiam estética, layout, navegação e usabilidade junto com a programação.
• ⚠ O site que você projeta aqui é a coisa que o GAC017 dá um back-end e um banco de dados. Um plano fraco agora custa tempo no próximo módulo.

Você pode executar todos os exemplos deste módulo no playground de código do próprio site, e as referências de HTML, CSS e JavaScript lá vão mais fundo do que estas notas fazem.

• Comece no papel. Um wireframe 线框图 mostra a estrutura sem cor, que é a única maneira de discutir a estrutura.
• Arquitetura da informação 信息架构 é o que vai onde: as páginas, e o caminho que um visitante percorre entre elas.
• Hierarquia visual 视觉层次 diz ao olho o que é importante — através de tamanho, peso, espaçamento e contraste, não através de decoração.
• Projete para o público, e diga quem eles são antes de escolher qualquer coisa.

• HTML 超文本标记语言 marca significado, não aparência. Um cabeçalho é <h1> porque ele é um cabeçalho.
• Um elemento 元素 tem uma tag de abertura, conteúdo e uma tag de fechamento; um atributo 属性 vai na tag de abertura.
• Elementos semânticos 语义化元素 — <header>, <nav>, <main>, <article>, <footer> — dizem a um navegador, a um mecanismo de busca e a um leitor de tela o que uma região é.
• Toda imagem precisa de texto alternativo 替代文本. É o que um visitante cego ouve e o que um mecanismo de busca lê.

• CSS 层叠样式表 controla a aparência, e mantê-lo fora do HTML é o ponto inteiro da separação.
• Um seletor 选择器 escolhe elementos; uma declaração 声明 define uma propriedade para um valor.
• O modelo de caixa 盒模型 explica o layout: conteúdo, depois preenchimento, depois borda, depois margem.
• Design responsivo 响应式设计 faz uma página funcionar em um telefone e em um laptop, geralmente com larguras flexíveis e uma media query 媒体查询.

Exemplo resolvido. Um cartão que está largo demais em um telefone.

A solução não é uma largura fixa em pixels. Defina max-width para que o cartão nunca exceda a tela, deixe-o encolher abaixo disso, e adicione uma media query apenas para a mudança que uma tela menor genuinamente precisa, como empilhar duas colunas em uma.

Projetar o caso flexível primeiro, e tratar a media query como a exceção, é o que "responsivo" significa.

• JavaScript roda no navegador e altera a página depois que ela carrega.
• O DOM 文档对象模型 é a página como uma árvore de objetos que seu código pode ler e alterar.
• Um evento 事件 — um clique, um envio, uma pressão de tecla — aciona uma função 函数 que você escreveu.
• Mantenha pequeno neste nível: valide um formulário, alterne um menu, filtre uma lista. Um site que falha quando o JavaScript falha é um erro de design, não de codificação.

• Hosting 托管 coloca seus arquivos em um servidor; um domain name 域名 aponta os visitantes para eles.
• Test before you launch: cada link, num telefone, em um navegador que não seja o seu.
• Accessibility 无障碍 não é opcional — contraste, texto alt, navegação por teclado e texto que redimensiona.
• ⚠ Verifique o que você pode publicar. Uma imagem ou uma fonte no seu site precisa de uma licença que a permita, exatamente como uma citação em um ensaio precisa de uma referência.

• Defina o audience e o objective antes de escolher uma plataforma. "Estar nas redes sociais" não é um objetivo.
• Um plano de conteúdo 内容计划 diz o que você postará, com que frequência e quem escreverá.
• Metrics 指标 devem se conectar ao objetivo: alcance, engajamento e clique-through para seu site são coisas diferentes, e apenas uma delas é tráfego.
• Meça, depois mude uma coisa. Mudar tudo de uma vez não ensina nada sobre qual mudança funcionou.