- Sobre a Disciplina
- Unidade 1 – Introdução a Web e Tópicos de Design
- Unidade 2 – Construção do Design de Páginas Web com Figma
- Unidade 3 - Introdução ao HTML e GitHub
- Unidade 4 – Sintaxe do HTML
- Unidade 5 – Layouts HTML e Introdução ao CSS
- Unidade 6 – Definição do Design de Páginas Web com CSS
- Unidade 7 – Responsividade de Páginas Web com CSS
- Unidade 8 – Frameworks CSS
Nesta disciplina, iniciaremos nossa jornada no mundo do desenvolvimento web. Conheceremos o ambiente da Internet; veremos noções de design; e aplicaremos esses conceitos na prática utilizando HTML e CSS.
Ao longo da disciplina, iremos construir um site. Cada estudante deve escolher um “objeto tema”. O site deve ter os seguintes elementos obrigatórios:
1. Página inicial:
- Coleção de “objetos tema” com os dados mais relevantes (Ex: título e imagem)
2. Página de detalhes:
- Visualização de todos os dados sobre o “objeto tema”
3. Página sobre o autor:
4. Área de administração:
- Página de login
- Página de cadastro do “objeto tema”
- Formulário para cadastro/edição
- Tabela com a lista dos objetos cadastrados. Cada linha deve ter botões para editar e apagar
- Página de cadastro de usuários
- Formulário para cadastro/edição
- Tabela com a lista dos usuários cadastrados. Cada linha deve ter botões para editar e apagar
Nesta unidade, vamos fazer uma introdução às tecnologias Web e descrever os principais conceitos aplicados ao Design de Interface de Usuário.
Conteúdo:
- Introdução à Internet e World Wide Web (WWW)
- O Ambiente Web: Histórico da Internet e Web
- Conceitos Básicos da Arquitetura Cliente-Servidor
- Serviços da Internet
- Design de Interface de Usuário
- Princípios de IHC
- Princípios de Diagramação
- Princípios e elementos da UX
- Requisitos de usabilidade
Nesta unidade, vamos finalizar os conceitos de design e aprender a construir o layout de uma página web com o Figma.
Conteúdo:
- Design de Interface de Usuário
- Acessibilidade na Web
- Padrões de interação e navegação na Web
- Layout e composição
- Avaliação de usabilidade
- Construção de Layout com Figma
- Página Inicial
- Página Interna
- Formulários
Nesta unidade, vamos fazer uma introdução a páginas web estáticas e principais linguagens: HTML, CSS e Javascript. Aprenderemos a sintaxe básica do HTML e seus principais elementos. Também faremos uma breve introdução a sistemas de controle de versões e como armazenar e publicar nossas páginas web estáticas no Github.
Conteúdo:
- Introdução ao HTML
- Sintaxe básica do HTML
- Elementos de Texto, Imagens e Links
- Prática das tags em ferramenta online de edição
- Tags semânticas
- Instalação de uma ambiente de Desenvolvimento Local
- Uso do Github
- Criar repositório
- Enviar os arquivos
- Ligar Github pages
Nesta unidade, vamos continuar o estudo da linguagem HTML, discutindo as melhores práticas e a criação de formulários e tabelas.
Conteúdo:
- Sintaxe da Linguagem HTML:
- Boas práticas
- Formulários
- Tabelas
Nesta unidade vamos aprender a construção de layouts HTML com Iframe e fazer uma introdução à sintaxe básica do CSS e seus principais elementos.
Conteúdo:
- Boas práticas de construção de layout com HTML
- Introdução ao CSS
- Sintaxe básica
- Incorporação ao HTML (inline, interno, externo)
- Cores e Background
- Tipografia
- Borda
- Margem
- Padding
Nesta unidade vamos continuar aprendendo as tags de estilo do CSS.
Conteúdo:
- Posicionamento
- Flex
- Grid
Na unidade 5, você aprendeu o básico sobre CSS, que possibilitou a descrição do visual do seu site. Na unidade 6, você aprendeu a posicionar os elementos lado a lado, ocupando mais espaço, ideal para telas maiores, como a de um computador. Nesta unidade, aprenderemos técnicas para tornar o visual do seu site responsivo, ou seja, que ele seja fácil de ler e usar em qualquer tamanho de tela.
Conteúdo:
- Desenvolvimento de projeto com responsividade
- Media Queries
Durante essa jornada você aprendeu como a Internet funciona, viu noções de design e criou suas primeiras páginas web estáticas, usando HTML e CSS.
Nesta unidade, vamos conhecer alguns frameworks CSS, criados para agilizar e padronizar o desenvolvimento web. Discutiremos as vantagens e desvantagens de frameworks como Bootstrap, Tailwind e Open Props.