Design Web

Design Web

Turmas

Introdução

Design Web é uma disciplina voltada para a construção de interfaces digitais, como sites e aplicativos para a web. O curso envolve trabalhos relacionados ao leiaute e projeto de páginas, bem como a produção e estruturação de conteúdos. Os designers web são profissionais que utilizam linguagens de marcação para estruturar conteúdos e recursos tecnológicos para estilização. No nosso curso, aprenderemos a trabalhar com as linguagens de marcação XML e HTML5 e a tecnologia de estilização de páginas CSS3. Segundo o consórcio W3C, a tecnologia padrão para a estruturação de páginas é o HTML5, enquanto a configuração da parte visual dos sites fica a cargo do CSS.

Aspectos do Design Web

Ivan Souza[1] destaca quatro aspectos primordiais para um bom projeto de interfaces:

  1. Responsividade: o autor ressalta que grande parte da população tem acessado conteúdos na web através de dispositivos móveis. Com a grande diversidade de dispositivos no mercado, é fundamental projetar interfaces com uma boa adequabilidade a uma ampla gama de resoluções e tamanhos de tela.
  2. Escaneabilidade: é importante definir a disposição dos blocos textuais no seu projeto. A forma como lemos em dispositivos eletrônicos é dramaticamente diferente da maneira como lemos no papel. Uma texto muito denso, escrito em colunas muito largas, por exemplo, pode tornar uma experiência de leitura extremamente cansativa.
  3. Tipografia: a experiência do usuário é bastante impactada pelo tipo de família de caracteres escolhidas pelo designer. O tipo de fonte pode ser usado para passar uma mensagem para o leitor. Desta forma, esteja atento à escolha adequada de famílias de caracteres, espaçamentos e contrastes de cores para seus projetos.
  4. Velocidade de carregamento: a dinâmica do mundo atual demanda entregas rápidas de conteúdos. Vivemos um mundo em que todos parecem estar o tempo todo com pressa; No acesso a sites não é diferente: se assegure que sua página estará disponível em poucos segundos, caso contrário você poderá passar uma impressão negativa sobre seu site, mesmo que a limitação de acesso ocorra por conta da largura de banda de seu cliente final...

Objetivos

  • Construir interfaces de usuário para a web
  • Compor estilos aplicáveis em interfaces de usuário para a web
  • Combinar conceitos de design com a construção de interfaces ricas
  • Desenvolver a interação com servidores web.

Fontes Recomendadas

Os alunos devem acompanhar os materiais de apoio disponibilizados pelos canais oficiais do CEFET, sobretudo o MS Teams. Há uma farta literatura sobre a disciplina, tais como W3Schools, RocketSeat e outros tantos canais recomendados durante as aulas.

Atividades

Aulas

Os conteúdos abaixo são uma sugestão de tópicos, podendo sofrer alterações para atender demandas de turmas.

1. Introdução a Internet

Nesta aula, abordamos o desenvolvimento das tecnologias da informação e da comunicação que fizeram da internet o que conhecemos hoje. Discutindo a evolução da Internet, tecnologias relacionadas, padrões web e protocolos mais usados.

2. Linguagens de Marcação

Linguagens de marcação e dados semi-estruturados; HTML - marcações e sintaxe básica. Aprenda sobre marcações de texto e listas.

3. HTML - Links e Imagens

Aprenda as marcações básicas para exibição de imagens e links. Aprenda sobre endereçamento de recursos.

4. HTML - Listas e Tabelas

Tipos de listas e estruturação de itens. Organize dados tabulares utilizando marcações para tabelas. O que são iframes e como utilizá-los para mashups.

5. Estilização de Páginas

O CSS3 trouxe uma série de avanços que permitiram separar de vez as responsabilidades do HTML, CSS e JavaScript. A partir de recursos avançados de transição e transformação, já não são mais necessários scripts para fazer animações de elementos, ficando tudo a cargo do CSS. Além do mais, os seletores avançados do CSS3 facilitam a aplicação de propriedades de visualização sem a necessidade de criar várias classes para isto (melhorando a escrita do HTML).

6. CSS - Cores, fundos e filtros

Aprenderemos a trabalhar com propriedades CSS que permitem alterar cores, fundos de elementos. Também aprenderemos a aplicar efeitos avançados, como sombreamentos, transparência e filtros para imagens.

7. Diagramação de Sites

Nesta aula, discutiremos como os conteúdos são segmentados e organizados visualmente. Aprenderemos a ver nossa página como uma estrutura de documento que pode ser alterada para melhorar a disposição dos conteúdos.

8. CSS - Box Model

Discutiremos a utilização de CSS para lidar com as dimensões de elementos HTML. O Box Model define as dimensões e espaçamentos dos elementos - largura, altura, margens externas e internas, além das bordas de elementos.

9. CSS - Posicionamento de elementos

Nesta aula discutiremos o posicionamento padrão de elementos HTML e como alterar essas configurações. Também aprenderemos um pouco mais sobre a propriedade display dos elementos.

10. HTML Semântico

A evolução da Web traz novos desafios na estruturação de documentos; é preciso prepará-los para serem consumidos por vários tipos de clientes diferentes, não apenas pessoas e seus navegadores. Em uma abordagem inicial, aprendemos a usar marcações <div> para todo o trabalho de estruturação de conteúdos. O uso cada vez mais frequente de Web crawlers e Scrapers em busca de conteúdos em páginas, as divs deixaram de ser apropriadas: Como um desenvolvedor em busca de conteúdo fará para descobrir o significado dos dados estruturados em divs com ids em outros idiomas, por exemplo? Discutiremos elementos HTML que conferem maior significado para as diferentes partes componentes de páginas.

10. Formulários

Nesta aula, são apresentados os recursos para o envio de dados da página HTML para um servidor. Os formulários possuem diferentes elementos de dados, com diferentes propósitos.

11. CSS - Animação e responsividade

Trataremos de recursos avançados de CSS para animação de páginas. Falaremos também sobre a viewport e os recursos de media query. Projeto de interfaces baseados em grids.

12. User Experience - UX

De que formas podemos conceber projetos de interfaces mais inclusivos e atraentes aos nossos clientes?

13. Acessibilidade

.

14. Projeto de Acessibilidade

.

15. Frameworks de CSS e o Bootstrap

Buscando componentes de terceiros para agilizar projetos.