joseglauberbo / devweb

Disciplina de Desenvolvimento Web

2021.1 vídeo de apresentação

2020.3 (antigo) vídeo de apresentação

Desenvolvimento Web 2021.1

• As interações (síncronas e assíncronas) serão feitas via Slack

• A avaliação será feita a partir de um projeto individual (ver Avaliação abaixo)

• A cada semana o aluno deve, até o domingo,...

  • Revisar o material indicado (vídeos e material auxiliar)
  • Cumprir a entrega da semana
  • Revisar a entrega da semana passada de 2 colegas indicados
    • Você pode cadastrar mais colegas além desses
    • Pelo menos UMA issue deve ser cadastrada durante esse processo
    • Não precisa cadastrar uma issue por revisão, mas, pelo menos 1 issue
    • A issue não precisa ser uma correção, mas pode ser uma sugestão de algo novo ou fazer algo de forma diferente
  • (OPCIONAL) Tirar dúvidas e interagir com os colegas sobre o conteúdo do material
  • (OPCIONAL) Participar de lives sobre codificação/conteúdo (quarta às 10:00)

Entrega

• Formulário de cadastro na disciplina
• Planilha de revisão da entrega passada
• Formulário de revisão
• Notas

Cronograma

	Início	Conteúdo	Conceitos	Vídeo	Material Auxiliar	Entrega
1	22/11	Básico	HTML, HTTP e JS. Introdução e base.	- vídeo 1 - vídeo 2 - 2020 (antigo) vídeo 1 - 2020 (antigo) vídeo 2	Conceitos Iniciais	- Criar repositório - Definir o projeto (no README) - Criar HTML (sem JS) da funcionalidade mais importante do seu projeto
2	29/11	Node/Express	JS, Node, Express, Rotas, REST	- vídeo 1 - vídeo 2 - vídeo 3 - 2020 (antigo) vídeo 1 - 2020 (antigo) vídeo 2	NodeJS	Formulário de projeto
3	06/12	Node/Express	Um pouco mais de javascript	- vídeo 1 - 2020 (antigo) vídeo modelagem e implementação REST		Node/Express com... - Uma rota POST - Uma rota GET (afetada pelo POST)
4	13/12	React Components	Primeira estrutura REACT	- vídeo 1 - vídeo 2 - 2020 (antigo) vídeo 1	slides	Um componente com... - Estado interno sendo alterado - Props que afetam o componente
5	20/12	React Components	Primeiros subcomponentes, Props, State	- vídeo 1 - vídeo 2 - 2020 (antigo) vídeo 1	slides	Um subcomponente com... - Props sendo afetado pelo estado do componente pai
6	07/02	React useEffect	Interação com backend (GET/POST/PUT)	- vídeo 1 - 2020 (antigo) vídeo 1		Um componente com... - Estado sendo definido por um GET
7	14/02	Jest	Testes de componentes	- vídeo 1 - 2020 (antigo) vídeo 1		Testar um componente que tenha... - Props e alteração de estado
8	21/02	React Context	Propagação de estado em árvore	- vídeo 1 - 2020 (antigo) vídeo 1		Uso de um contexto para... - Propagação de estado para baixo e para cima
9	28/02	React Router	Novas telas para a aplicação	- vídeo 1 - 2020 (antigo) vídeo 1
10	07/03	Web APIs / Storage / Service Worker		- vídeo 1 - 2020 (antigo) vídeo 1		-
11	14/03	CSS/UI/UX		-vídeo 1 - 2020 (antigo) vídeo 1		1ª Entrega
12	21/03	Projeto
13	28/03	Projeto				Entrega final
14	04/04	Final

Ementa

• Introdução à Internet e à Web
• Protocolos de comunicação e transferência de dados
• Linguagens de script
• Desenvolvimento para a Web (lado cliente)
• Tópicos avançados

Objetivos

Criar um sistema web (de internet) com um servidor simples de dados e uma interface (frontend) complexa utilizando um arcabouço moderno de componentes e seguindo as melhores práticas de desenvolvimento.

Avaliação

Cada aluno deve, individualmente, criar um sistema web focando principalmente no frontend e tendo um backend simples em REST.

O projeto deve ter como características:

• Ser algo que você queira fazer!
• Ser código aberto
• Estar publicado em um repositório git com…
  • 1 arquivo README.md descrevendo o projeto
  • 1 diretório (backend) para o servidor
  • 1 diretório (frontend) para o cliente
• Usar como base o express-generator e o create-react-app
• Ter, no mínimo, 3 telas, sendo…
  • 1 tela com exibição de itens de uma lista / coleção e um filtro
  • 1 tela com edição / inserção de itens
  • 1 tela a mais a sua escolha
• Ter componentes bastante interativos
• Ter 1 barra de navegação com campos adicionais, incluindo componente de busca

O projeto terá um conjunto de 8 entregas bem definidas (50% da disciplina). Ao final dessas 8 entregas, os alunos trabalham na melhoria do projeto para uma entrega final (50% da disciplina).

Cada entrega intermediária será avaliada da seguinte forma:

• 5 pontos por uma entrega com a funcionalidade com pequenos problemas, não importa a qualidade do código
• 10 pontos pela entrega com a funcionalidade esperada completa
• -5 pontos caso não realize a revisão entre-pares daquela entrega.

O projeto final será avaliado pela funcionalidade (10 pontos) e corretude, e qualidade de código (40 pontos). Todas as issues no final do projeto devem estar resolvidas.

As entregas são sinalizadas por preenchimento de formulário online com a versão referente a entrega até o domingo (23:59 AOE).

Bibliografia recomendada

• Front-end Developer Handbook, 2019
• Eloquent JavaScript, 3ª Ed., 2019 PT-BR
• Blank,A.G. TCP/IP JumpStart: Internet Protocol Basics. Sybex. 2002.
• Morrison,M. Head First JavaScript. O'Reilly Media. 2008.
• Shelly G.B., Woods, D.M. HTML, XHTML, and CSS: Introductory. Course Technology. 2010.