Apostila 3 — Curso Web Design Básico

elementos podem ser reorganizados para melhorar a leitura e a navegação. As Media Queries possibilitam essas adaptações sem alterar o conteúdo da página, modificando apenas sua apresentação visual.

Durante o desenvolvimento responsivo, também é comum adotar a estratégia conhecida como Mobile First. Nessa abordagem, o projeto é inicialmente desenvolvido para telas menores, como smartphones, e posteriormente recebe adaptações para tablets e computadores. Essa metodologia incentiva a criação de interfaces mais objetivas, priorizando apenas as informações essenciais e facilitando futuras expansões para dispositivos maiores. Atualmente, essa prática é amplamente recomendada por favorecer desempenho, organização e melhor experiência para os usuários.

As imagens também merecem atenção especial em projetos responsivos. Arquivos muito grandes podem aumentar o tempo de carregamento da página, especialmente em conexões móveis. Por isso, recomenda-se utilizar imagens otimizadas e configuradas para ajustar automaticamente seu tamanho conforme o espaço disponível. Dessa maneira, mantém-se a qualidade visual sem comprometer o desempenho do site.

Outro aspecto importante é o uso de unidades relativas para fontes, margens e espaçamentos. Em vez de definir todos os tamanhos de forma fixa, essas unidades permitem que o conteúdo acompanhe as dimensões da tela, preservando a legibilidade e a harmonia do layout. Como resultado, textos permanecem confortáveis para leitura tanto em celulares quanto em monitores maiores.

Criar um site responsivo também exige realizar testes frequentes em diferentes dispositivos e navegadores. Durante o desenvolvimento, é comum verificar como a página se comporta em várias resoluções para identificar possíveis problemas de alinhamento, imagens desproporcionais ou botões difíceis de utilizar. Essa etapa permite corrigir falhas antes da publicação e garante que o usuário tenha uma experiência consistente independentemente do equipamento utilizado.

Mais do que uma tendência, o design responsivo tornou-se um requisito para qualquer projeto web moderno. Empresas, instituições e profissionais precisam oferecer páginas acessíveis e funcionais em diferentes dispositivos, acompanhando a forma como as pessoas utilizam a internet atualmente. Ao dominar esses conceitos, o estudante estará preparado para desenvolver sites mais flexíveis, organizados e capazes de proporcionar uma navegação eficiente para um público cada vez mais diversificado.

Referências bibliográficas

MOZILLA FOUNDATION. MDN Web Docs. Design Responsivo – Aprendendo Desenvolvimento Web.

MOZILLA FOUNDATION. MDN Web Docs. Usando Media Queries.

MOZILLA FOUNDATION. MDN Web Docs. Media Queries.

SILVA, Maurício Samy. CSS3: Desenvolva Aplicações Web Profissionais com Uso dos Poderosos Recursos de Estilização. Novatec Editora.

SILVA, Maurício Samy. Fundamentos de HTML5 e CSS3. Novatec Editora.

MARCOTTE, Ethan. Responsive Web Design. A Book Apart. (Obra de referência internacional sobre o conceito de design responsivo.)

Aula 2 – Usabilidade e Acessibilidade

Criar um site visualmente bonito é apenas parte do trabalho de um web designer. Para que uma página realmente cumpra seu objetivo, ela precisa ser fácil de usar, intuitiva e acessível ao maior número possível de pessoas. É nesse contexto que surgem dois conceitos fundamentais no desenvolvimento web: usabilidade e acessibilidade. Embora sejam diferentes, ambos têm como objetivo proporcionar uma experiência positiva durante a navegação.

A usabilidade está relacionada à facilidade com que uma pessoa consegue utilizar um site para realizar determinada tarefa. Um usuário deve encontrar rapidamente as informações que procura, compreender os menus, preencher formulários sem dificuldades e navegar entre as páginas de forma natural. Quando um site exige muitos cliques, apresenta informações desorganizadas ou utiliza elementos confusos, sua usabilidade é prejudicada, aumentando a possibilidade de o visitante abandonar a página antes de concluir sua atividade.

Para criar uma boa experiência de uso, é importante organizar o conteúdo de maneira lógica. Os menus devem possuir nomes claros, os títulos precisam destacar os assuntos principais e as informações mais importantes devem aparecer em locais de fácil visualização. Além disso, a navegação deve permanecer consistente em todas as páginas, permitindo que o usuário reconheça rapidamente onde está e como retornar ou avançar dentro do site. Essas práticas tornam a interação mais simples e eficiente para qualquer pessoa.

Outro aspecto importante da usabilidade é a legibilidade. Textos muito pequenos, excesso de informações em uma única tela ou combinações inadequadas de cores dificultam a leitura e tornam a navegação cansativa. O uso de fontes bem definidas, bom espaçamento entre linhas, contraste adequado e parágrafos organizados favorece a compreensão do conteúdo e melhora significativamente a experiência do visitante. A própria

Cartilha de Acessibilidade do W3C Brasil recomenda textos claros, hierarquia de títulos e bom contraste para facilitar a leitura.

Enquanto a usabilidade procura facilitar a utilização do site por qualquer pessoa, a acessibilidade busca eliminar barreiras que possam impedir ou dificultar o acesso de pessoas com deficiência ou outras limitações temporárias ou permanentes. Um site acessível permite que usuários com deficiência visual, auditiva, motora, intelectual ou cognitiva consigam navegar, compreender o conteúdo e utilizar seus recursos com autonomia. Além de beneficiar pessoas com deficiência, muitas práticas de acessibilidade também melhoram a experiência de idosos, pessoas com baixo letramento e usuários que acessam a internet em diferentes condições de uso.

Entre as principais recomendações de acessibilidade está o uso correto da estrutura do HTML. Títulos organizados hierarquicamente, formulários identificados corretamente e textos alternativos para imagens permitem que leitores de tela interpretem o conteúdo de maneira adequada. Sempre que uma imagem transmitir informação importante, ela deve possuir uma descrição alternativa, garantindo que usuários que não conseguem visualizá-la também compreendam seu significado.

Outro cuidado essencial diz respeito ao contraste entre texto e plano de fundo. Cores muito semelhantes dificultam a leitura para pessoas com baixa visão ou daltonismo. Da mesma forma, botões e links precisam ser facilmente identificáveis, não dependendo apenas da cor para indicar sua função. Esses detalhes tornam a navegação mais segura, confortável e eficiente para todos os usuários.

A navegação pelo teclado também faz parte das boas práticas de acessibilidade. Algumas pessoas não utilizam mouse, dependendo exclusivamente do teclado ou de tecnologias assistivas para navegar pelas páginas. Por isso, menus, formulários e botões devem funcionar corretamente sem exigir o uso do cursor. Esse cuidado amplia significativamente o número de pessoas que conseguem utilizar um site sem dificuldades.

Durante o desenvolvimento de um projeto web, é recomendável realizar testes de usabilidade e acessibilidade antes da publicação. Verificar o comportamento do site em diferentes navegadores, dispositivos e situações de uso ajuda a identificar problemas que podem passar despercebidos durante a programação. Além disso, ferramentas automáticas de validação e testes com usuários reais contribuem para aperfeiçoar continuamente a qualidade da

interface.

É importante compreender que investir em usabilidade e acessibilidade não representa apenas o cumprimento de boas práticas técnicas. Essas medidas ampliam o alcance do site, fortalecem sua credibilidade e demonstram compromisso com a inclusão digital. Um projeto que considera diferentes perfis de usuários desde o início tende a oferecer uma experiência mais eficiente, acolhedora e satisfatória para todos.

Ao aplicar esses princípios, o web designer desenvolve páginas mais organizadas, intuitivas e acessíveis. Dessa forma, o site deixa de atender apenas a um grupo específico de usuários e passa a oferecer uma navegação de qualidade para pessoas com diferentes necessidades, dispositivos e formas de interação.

Referências bibliográficas

W3C Brasil. Cartilha de Acessibilidade na Web – Fascículo IV: Tornando o Conteúdo Web Acessível.

W3C. Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1 – Tradução para o Português do Brasil.

W3C. Introdução à Acessibilidade Web (Web Accessibility Initiative – WAI).

SILVA, Maurício Samy. HTML5: A Linguagem de Marcação que Revolucionou a Web. Novatec Editora.

SILVA, Maurício Samy. CSS3: Desenvolva Aplicações Web Profissionais com Uso dos Poderosos Recursos de Estilização. Novatec Editora.

NIELSEN, Jakob. Usabilidade na Web: Projetando Websites com Qualidade. Elsevier.

Aula 3 – Publicação do Site

Depois de concluir o desenvolvimento de um site, chega uma das etapas mais importantes do projeto: a publicação. Até esse momento, todas as páginas foram criadas e testadas no computador do desenvolvedor. No entanto, para que outras pessoas possam acessá-las pela internet, é necessário disponibilizar os arquivos em um servidor conectado à rede. Esse processo é conhecido como publicação ou deploy do site e representa a passagem do ambiente de desenvolvimento para o ambiente de produção.

Antes de publicar um projeto, é importante compreender dois conceitos fundamentais: domínio e hospedagem. O domínio é o endereço utilizado pelos visitantes para acessar o site, como "www.exemplo.com.br". Já a hospedagem corresponde ao serviço responsável por armazenar os arquivos da página em um servidor conectado à internet, mantendo o conteúdo disponível para acesso a qualquer momento. Esses dois elementos trabalham em conjunto: o domínio direciona o usuário até o servidor onde o site está hospedado.

Ao finalizar um projeto desenvolvido com HTML, CSS e JavaScript, todos os arquivos precisam estar organizados

corretamente. A página principal normalmente recebe o nome de index.html, enquanto imagens, folhas de estilo e outros recursos devem estar distribuídos em pastas específicas. Essa organização facilita futuras atualizações, reduz erros durante a publicação e torna a manutenção muito mais simples.

Existem diversas formas de colocar um site no ar. Para iniciantes, uma alternativa bastante utilizada é recorrer a serviços gratuitos de hospedagem para sites estáticos, que permitem publicar projetos simples sem necessidade de configurar servidores complexos. À medida que o projeto cresce ou passa a atender clientes e empresas, torna-se comum utilizar serviços profissionais de hospedagem, que oferecem maior desempenho, segurança, espaço de armazenamento e recursos adicionais.

Outro aspecto importante durante a publicação é verificar se todos os arquivos foram enviados corretamente. Links internos, imagens, folhas de estilo e demais recursos precisam funcionar sem apresentar erros. Um pequeno arquivo ausente pode comprometer o funcionamento de toda a página ou prejudicar a experiência do usuário. Por isso, após a publicação, recomenda-se acessar o site em diferentes navegadores e dispositivos para confirmar que todos os elementos estão sendo exibidos corretamente.

Além da verificação técnica, é fundamental realizar uma revisão completa do conteúdo. Erros ortográficos, informações desatualizadas, telefones incorretos ou links quebrados podem transmitir falta de profissionalismo. Antes da divulgação do endereço do site, vale revisar textos, conferir formulários, testar botões e garantir que todas as funcionalidades estejam operando conforme o esperado. Essa etapa reduz falhas e aumenta a credibilidade do projeto.

Publicar um site não significa que o trabalho foi concluído definitivamente. Após entrar no ar, o projeto passa a exigir manutenção contínua. Em muitos casos, surgem necessidades de atualização de conteúdos, substituição de imagens, inclusão de novas páginas, correção de pequenos erros ou melhorias de desempenho. Manter o site atualizado demonstra cuidado com os visitantes e contribui para preservar sua utilidade ao longo do tempo.

Outro cuidado importante está relacionado ao desempenho da página. Arquivos muito pesados, imagens sem otimização e códigos desorganizados podem aumentar o tempo de carregamento. Sites rápidos oferecem melhor experiência ao usuário e tendem a apresentar melhor desempenho nos mecanismos de busca. Por isso, é recomendável

otimizar imagens, manter apenas os arquivos necessários e revisar periodicamente a estrutura do projeto.

À medida que o estudante desenvolve novos projetos, torna-se interessante criar um portfólio profissional. Um portfólio reúne exemplos de trabalhos desenvolvidos, permitindo demonstrar conhecimentos técnicos, criatividade e evolução profissional. Mesmo projetos simples podem servir como demonstração das habilidades adquiridas durante o aprendizado. Além de fortalecer a apresentação do profissional, um portfólio facilita a conquista de oportunidades de estágio, emprego ou prestação de serviços como freelancer.

Concluir o processo de publicação representa um momento importante na formação de qualquer web designer. Ver um projeto disponível na internet demonstra que todo o conhecimento adquirido sobre HTML, CSS, organização visual, responsividade, usabilidade e acessibilidade foi colocado em prática. Mais do que publicar arquivos, o profissional entrega uma solução que poderá ser utilizada por pessoas em qualquer lugar, transformando ideias em experiências digitais acessíveis e funcionais.

Referências bibliográficas

MOZILLA FOUNDATION. MDN Web Docs. Publicando seu Site – Aprendendo Desenvolvimento Web.

SILVA, Maurício Samy. HTML5: A Linguagem de Marcação que Revolucionou a Web. Novatec Editora.

SILVA, Maurício Samy. Fundamentos de HTML5 e CSS3. Novatec Editora.

MANZANO, José Augusto N. G.; TOLEDO, Suely Alves de. Guia de Orientação e Desenvolvimento de Sites. Editora Érica.

DUCKETT, Jon. Introdução à Programação Web com HTML, XHTML e CSS. Ciência Moderna.

Estudo de Caso – Módulo 3

Um site pronto para ser publicado..., mas cheio de problemas

Lucas concluiu o desenvolvimento do site de uma clínica de fisioterapia como projeto final de seu curso de Web Design. O layout era moderno, as páginas estavam organizadas e todas as informações pareciam corretas. Animado com o resultado, ele publicou o site imediatamente, sem realizar testes mais detalhados em diferentes dispositivos e navegadores.

Nos primeiros dias, a equipe da clínica percebeu que alguns pacientes reclamavam da dificuldade para utilizar o site pelo celular. Em determinados aparelhos, o menu não abria corretamente, alguns botões ficavam parcialmente escondidos e os formulários de contato eram difíceis de preencher. Além disso, pessoas com deficiência visual relataram problemas para compreender determinadas imagens, que não possuíam descrições alternativas, e o contraste entre textos

eiros dias, a equipe da clínica percebeu que alguns pacientes reclamavam da dificuldade para utilizar o site pelo celular. Em determinados aparelhos, o menu não abria corretamente, alguns botões ficavam parcialmente escondidos e os formulários de contato eram difíceis de preencher. Além disso, pessoas com deficiência visual relataram problemas para compreender determinadas imagens, que não possuíam descrições alternativas, e o contraste entre textos e o plano de fundo dificultava a leitura em algumas páginas. Falhas como baixo contraste, ausência de textos alternativos e problemas de navegação estão entre os erros de acessibilidade mais frequentes encontrados em sites.

Outro problema apareceu logo após a publicação. Algumas imagens demoravam muito para carregar porque haviam sido enviadas em alta resolução, sem qualquer otimização. Em algumas páginas, links internos direcionavam para endereços inexistentes, causando mensagens de erro. Como consequência, muitos visitantes abandonavam o site antes mesmo de localizar os telefones de contato ou agendar um atendimento.

Preocupada com a situação, a clínica contratou uma profissional especializada em Web Design para revisar o projeto. A análise mostrou que o desenvolvimento havia sido bem executado, mas a etapa final de validação praticamente não existiu. O site precisava passar por testes em diferentes navegadores, sistemas operacionais e tamanhos de tela antes da publicação definitiva. Também era necessário revisar aspectos relacionados à usabilidade, acessibilidade e desempenho.

A primeira medida adotada foi reorganizar o menu para dispositivos móveis, garantindo seu funcionamento em diferentes resoluções. Em seguida, todas as imagens foram otimizadas para reduzir o tempo de carregamento sem comprometer a qualidade visual. Os textos alternativos foram adicionados às imagens informativas, o contraste das cores foi ajustado para facilitar a leitura e os formulários passaram a funcionar corretamente tanto com mouse quanto com teclado. Essas melhorias seguem boas práticas recomendadas para tornar os sites mais acessíveis e fáceis de usar.

Também foi realizada uma revisão completa dos links, dos botões e dos arquivos enviados ao servidor. Após cada correção, o site era novamente testado em computadores, tablets e smartphones para garantir que todas as funcionalidades permanecessem operando corretamente.

Depois das melhorias, o tempo de carregamento diminuiu, a navegação tornou-se mais simples e o número de

solicitações de agendamento realizadas pelo site aumentou. Os pacientes passaram a acessar as informações com facilidade, independentemente do dispositivo utilizado, fortalecendo a imagem profissional da clínica.

Erros comuns observados

• Publicar o site sem realizar testes finais.
• Não verificar o funcionamento em diferentes navegadores e dispositivos.
• Utilizar imagens muito pesadas, aumentando o tempo de carregamento.
• Esquecer de adicionar textos alternativos às imagens.
• Utilizar contraste insuficiente entre texto e fundo.
• Não revisar links, formulários e botões antes da publicação.
• Ignorar a navegação por teclado e outros recursos de acessibilidade.
• Deixar de atualizar e revisar o site após sua publicação.

Como evitar esses erros

• Testar o site em computadores, tablets e smartphones antes da publicação.
• Verificar o funcionamento em diferentes navegadores.
• Otimizar imagens para melhorar o desempenho.
• Adicionar descrições alternativas às imagens importantes.
• Garantir contraste adequado entre textos e plano de fundo.
• Revisar cuidadosamente todos os links, formulários e botões.
• Realizar testes de acessibilidade e usabilidade antes da entrega do projeto.
• Manter uma rotina de atualização e manutenção, corrigindo rapidamente eventuais falhas identificadas pelos usuários. A experiência mostra que incorporar acessibilidade e testes desde o início do projeto evita retrabalho e melhora significativamente a qualidade do produto final.

Reflexão

Este caso evidencia que finalizar o desenvolvimento de um site não significa que o projeto esteja pronto para ser utilizado pelo público. A etapa de testes, revisão e publicação é tão importante quanto a programação e o design. Um site responsivo, acessível, rápido e cuidadosamente revisado transmite confiança, amplia o alcance do conteúdo e oferece uma experiência positiva para todos os usuários.

Parte superior do formulário

Parte inferior do formulário