Desenvolvimento de Software para Web

Dados gerais sobre a disciplina

Código: QXD0020

Curso: Redes de Computadores

Turma: 6º Período

Turno: Noite

Carga Horária: 64h

Local: Bloco 1 - Lab 2 (Segunda) / Bloco 1 - Sala 3 (Terça)

Horários: Segunda e Terça das 20h às 22h

Site

http://bit.ly/ufcregis

Downloads

• Plano de Ensino
• Slides
  • 0 - Apresentação da Disciplina
  • 1 - HTML (FJ11 - Cap2, FJ11 - Cap3)
  • 2 - CSS (FJ11 - Cap4, FJ11 - Cap5, FJ11 - Cap6)
  • 3 - Bootstrap (FJ11 - Cap10)
    • Bootstrap 4 - Everything You Need to Know
  • 4 - JavaScript (FJ11 - Cap11)
    • A re-introduction to JavaScript (JS tutorial)
  • 5 - TypeScript
  • 6 - jQuery (FJ11 - Cap12)
  • 7 - Node.js
    • Série de vídeos em português sobre o Node.js
    • Curso Udemy - The Web Developer Bootcamp
  • 8 - Express
    • ExpressJS Crash Course
    • Curso Udemy - The Web Developer Bootcamp
    • Código-fonte para aplicações de exemplo desenvolvidas em sala de aula
    • Código-fonte do livro texto sobre MEAN (ver diretório cap-02-antes-express-load)
  • 9 - MongoDB (os slides falam sobre o MongoDB, mas não sobre sua integração com o JavaScript)
    • Curso oficial e gratuito sobre MongoDB
    • mongodb - integração do mongodb com JavaScript
      • Exemplo de projeto (express04) usando Node.js + Express + MongoDB (com módulo mongodb)
    • Mongoose - solução baseada em esquema para modelagem e manipulação de dados no MongoDB
    • Consign (sucessor do express-load) - autocarregamento de models, routes, schemas, configs, controllers, object maps, etc.
      • Exemplo de projeto (express05) usando Node.js + Express + MongoDB + Mongoose + Consign
  • 10 - Promises
    • https://www.promisejs.org/
    • What is a Promise?
  • 11 - Cookies
    • módulo cookie-parser
  • 12 - Sessões
    • módulo express-session
  • 13 - Vue.js
    • Vue.js Tutorial: Introdução e como criar sua primeira aplicação (devmedia)
    • Vue.js: Diretivas condicionais (devmedia)
    • Vue.js: Utilizando data bind unidirecional e bidirecional (devmedia)
    • Vídeo: Introdução ao Vue.js (NodeBR)
    • Axios
    • Aplicação completa com Vue, Express, Node.js, MongoDB e Axios.
    • Tutorial Vue, Express, Node.js, MongoDB e Axios.
    • vue-router - map components to the routes and let vue-router know where to render them.
    • vue-loader - carregador para Webpack capaz de transformar componentes Vue, como o exemplo abaixo, em um módulo JavaScript sem formatação
    • vuex - state management pattern + library for Vue.js applications.
    • Tutorial 1: CRUD básico com Vue.js (v1) e json-server
      • Parte 1
      • Parte 2
      • Parte 3
      • Parte 4
      • Parte 5
      • Parte 6
      • Source no GitHub
    • Tutorial 2: Building a Budget Manager with Vue.js (v2) and Node.js
      • Part I
      • Part II
      • Part III
      • Part IV
      • Source no GitHub
    • Tutorial 3: Vue.js — Construindo um SPA (Single Page Application) com vue (v2), vue-cli, vue-router, vue-resouce e Vuex
      • Parte 0
      • Parte 1
      • Parte 2
      • Parte 3
      • Parte 3.1
      • Parte 4
      • Source no GitHub
    • Tutorial 4: Aplicação completa MEVN (MongoDB / Express / VueJS / Node.js) com aplicações Client e Server
      • Importante: Este é o tutorial mais moderno e alinhado com o que queremos na disciplina.
      • Parte 1
      • Parte 2
      • Source no GitHub

Vídeos

• Curso completo e gratuito de HTML5

Bibliografia

• Básica
  • Caelum WD-43 – Desenvolvimento Web com HTML, CSS e JavaScript (HTML - PDF).
  • MAZZA, Lucas. HTML5 e CSS3: Domine a web do futuro. São Paulo, SP: Casa do Código, [2012].
  • ALMEIDA, Flávio. Mean: Full stack JavaScript para aplicações web com MongoDB, Express, Angular e Node. São Paulo, SP: Casa do Código, [2015]. xxiii, 361 p. (Caelum). ISBN 9788555190469 (broch.).
    • Código fonte do livro disponível no GitHub.
  • INCAU, Caio. Vue.js: Construa aplicações incríveis. São Paulo, SP: Casa do Código, [2017].
  • FREEMAN, Eric; ROBSON, Elisabeth. Use a cabeça! HTML e CSS . Rio de Janeiro: Alta Books, 2015. xxxvi, 723 p. (Use a cabeça!). ISBN 9788576088622 (broch.).
• Complementar
  • SILVEIRA, Paulo; ALMEIDA, Adriano. Lógica de programação: crie seus primeiros programas usando JavaScript e HTML. São Paulo, SP: Casa do Código, [2012]. vii , 163 p. (Caelum). ISBN 9788566250220 (broch.).
  • POWERS, Shelley. Aprendendo JavaScript. São Paulo, SP: Novatec, 2010. 407 p. ISBN 9788575222119 (broch.).
  • FLANAGAN, David. JavaScript:: o guia definitivo. 6. ed. Porto Alegre: Bookman, 2013. 1062 p. ISBN 9788565837194 (broch.).
  • SMITH, Ben. JSON básico: conheça o formato de dados preferido da web. São Paulo: Novatec, 2015. 400 p. ISBN 9788575224366 (broch.).
  • ZAKAS, Nicholas C. Princípios de orientação a objetos em JavaScript. São Paulo: Novatec, 2014. 126 p. ISBN 9788575223895 (broch.).
  • RESIG, John; BIBEAULT, Bear. Segredos do ninja JavaScript. São Paulo: Novatec, 2013. 488 p. ISBN 9788575223284 (broch.).
  • FREEMAN, Eric; ROBSON, Elisabeth. Use a cabeça! programação em HTML 5 : desenvolvendo aplicativos para web com JavaScript. Rio de Janeiro: Alta Books, 2014. xxxii, 573 p. (Use a cabeça!). ISBN 9788576088455 (broch.).
  • ANDREW, Rachel. The CSS anthology: 101 essential tips, tricks & hacks. 2nd ed. Australia: Sitepoint, xxi, 392 p. ISBN 9780975841983 (broch.).
  • SILVA, Maurício Samy. Criando sites com HTML: sites de alta qualidade com HTML e CSS . São Paulo: Novatec, 2008. 431 p. ISBN 9788575221662 (broch.).
  • SILVA, Maurício Samy. Construindo sites com CSS e (X)HTML: sites controlados por folhas de estilo em cascata . São Paulo, SP: Novatec, 2008. 446p. ISBN 9788575221396 (broch.).

Listas de Exercícios (a entrega deverá ser realizada pelo SIPPA)

• Lista de Exercícios 01 (prazo final para entrega: 28/08/2017 - segunda-feira até às 23:59)
  1. Crie uma página HTML que use o texto do seguinte documento.
     • a) A página HTML criada deve conter pelo menos 5 elementos em bloco e 5 elementos em linha.
     • b) A página HTML deve conter pelo menos uma imagem relacionada ao seu conteúdo (use uma imagem qualquer escolhida por você).
  2. Crie uma página HTML que contenha uma tabela com os índices de inflação usados no Brasil.
     • Obs: Tais índices atualizados podem ser consultados em: https://economia.uol.com.br/cotacoes/
  3. Crie uma página HTML com um formulário para cadastro de dados pessoais como: CPF, Nome, Telefone, Email e Data de Nascimento.
     • Consulte os slides sobre HTML, caso tenha dúvidas sobre a criação de formulários HTML.
• Lista de Exercícios 02 (prazo final para entrega: 04/09/2017 - segunda-feira)

Use CSS para estilizar as páginas criadas por você na Lista de Exercícios 01.

1. Crie um único arquivo CSS externo a ser usado e compartilhado pelas 3 páginas criadas da Lista 01.
2. Todas as páginas devem ter um cabeçalho, um container geral com seu conteúdo e um rodapé.

Use os conteúdos do arquivo caelum-arquivos-curso-web.zip para criar uma página HTML semelhante à página home sugerida na apostila WD-43 da Caelum (veja imagem clicando aqui).

1. Use HTML5 e CCS3.
2. OBS: A apostila WD-43 da Caelum mostra o passo a passo de como construir tal página.

Usando campos de entrada HTML e JavaScript, crie uma página para obter 2 números e mostrar na mesma página todos os inteiros entre eles.

• Lista de Exercícios 03 (prazo final para entrega: 11/09/2017 - segunda-feira)
  • Crie uma página de notícias usando o Bootstrap.
    1. As notícias devem ser apresentadas em 3 colunas no desktop e em somente 1 coluna no celular.
    2. Use textos e imagens reais de algum site de notícias já existente.
    3. Use o componente Carousel para mostrar as notícias em destaque no topo da página.
    4. Use conteúdos personalizados em thumbnails (miniaturas de imagens).
  • Use o Bootstrap para melhorar o visual das questões 2 (tabela com os índices de inflação usados no Brasil) e 3 (formulário para cadastro de dados pessoais) da Lista de Exercícios 01.
    1. As tabela e o formulário devem aparecer em abas diferentes de uma única página HTML.
       • Ou seja: as questões 2 e 3 da Lista 01 vão ficar integradas em uma única página HTML.
    2. A tabela deve destacar a linha sobre a qual o ponteiro do mouse passa por cima.
    3. O formulário deve aparecer em uma modal, após o clique de um botão para que ele apareça.
  • Faça o exercício proposto nos slides da disciplina sobre Bootstrap (32 passos).
    1. Em caso de dúvida, siga os detalhes mencionados na apostila WD-43 da Caelum.
    2. OBS: Como os passos foram definidos para o Bootstrap 3, adapte-os para o BootStrap 4.
• Lista de Exercícios 04 (prazo final para entrega: 18/09/2017 - segunda-feira)
  • Importante:
    • Esta lista é MUITO IMPORTANTE, pois todo o conteúdo da disciplina daqui em diante depende MUITO de JavaScript!!!
    • Portanto, aproveitem para aprender bastante JavaScript agora.
    • Em todas as questões a seguir, defina eventos no Javascript e não diretamente nos elementos HTML.
    • As respostas das questões a seguir devem usar JavaScript puro e não o jQuery.
  1. Crie uma página Home (index.html) com um menu para acessar todas as demais páginas da desta lista. Use o Bootstrap em todas as páginas para deixar o design mais profissional.
  2. Crie uma página HTML com um formulário para obter preço e quantidade. Exibir o resultado em um elemento input, desabilitado para edição, o valor total (preço x quantidade) dinamicamente quando preço ou quantidade forem alterados.
  3. Crie a mesma funcionalidade da Questão 1 em uma nova página HTML, através da substituição do elemento <input> por um elemento <output>.
     • Veja um exemplo de uso do elemento <output> neste link. Use o evento oninput, mas não diretamente no HTML como no exemplo.
  4. Crie uma página HTML para calcular e exibir na tela: (1) o valor do Índice de Massa Corporal (IMC) e (2) sua classificação, fazendo uso de entrada de dados (massa e altura de uma pessoa) em formulário HTML e cálculo dinâmico do resultado do IMC via JavaScript.
  5. Crie uma página HTML que possui um caractere texto que segue o movimento do ponteiro do mouse pela tela.
     • Dica: altere a posição (x, y) do caractere texto de acordo com a mudança da posição (x, y) do ponteiro do mouse na tela.
  6. Crie uma página HTML de notícias com poucas notícias (no minimo 3 notícias) e um botão "Mais notícias", que ao ser clicado exibe mais notícias, que não eram visualizadas antes.
• Lista de Exercícios 05 (prazo final para entrega: 25/09/2017 - segunda-feira)
  • Implemente a Lista de Exercícios 04 substituindo o JavaScript puro pelo jQuery.
    • Aplique um efeito para que as notícias da questão 6 apareçam lentamente através da função fadeIn do jQuery.
  • Use TypeScript para:
    • Criar uma classe ContaCorrente com atributos privados numero, nome_cliente e saldo e os métodos públicos: depositar(valor: number), sacar(valor: number), obter_saldo(): number, obter_numero(): number, obter_nome_cliente(): string. A classe deve ainda ter um único construtor para receber como entrada os parâmetros numero e nome_cliente.
    • Instancie um objeto do tipo ContaCorrente.
    • Use o método depositar para depositar R$ 500,00 no objeto criado.
    • Use o método obterSaldo para exibir o saldo do objeto criado.
    • Dica: você pode implementar e testar sua classe, usando o TypeScript de forma online.
• Lista de Exercícios 06 (prazo final para entrega: 09/10/2017 - segunda-feira)
  1. Crie um projeto node chamado 'contatos'. Esse projeto deve ter na pasta raiz um arquivo 'package.json' devidamente preenchido com os dados da aplicação.
  2. Crie um script JS chamado './models/contatos.js' que representa através de um objeto JavaScript os dados de contatos da tabela abaixo. O objeto JS com os dados deve ser exportado para que possa ser usado como módulo em outros scripts JS.
     • +----+-------+-----------------+-------------+
     • | id | nome | email | telefone |
     • +----+-------+-----------------+-------------+
     • | 1 | João | joao@gmail.com | 88993215678 |
     • | 2 | Maria | maria@gmail.com | 88991237856 |
     • | 3 | José | jose@gmail.com | 88985227739 |
     • +----+-------+-----------------+-------------+
  3. Crie um script JS chamado 'lista_contatos.js' que exibe no console todos os dados de contatos presentes em './models/contatos.js'.
  4. Instale o Express em seu projeto.
  5. Crie um script JS chamado 'index.js' que cria um servidor Web usando o Express e que retorna um JSON com todos os dados de contatos presentes em './models/contatos.js', quando a rota '/contatos' for requisitada via método GET do protocolo HTTP.
  6. Faça com que o script 'index.js' retorne um HTML contendo uma imagem quando a rota raiz ('/') for requisitada através do método get do protocolo HTTP. A imagem deverá estar na pasta './public/img' do seu projeto. A pasta './public' deve ser mapeada como pasta estática do Express no arquivo 'index.js'.
  7. Faça com que o script 'index.js' seja executado a partir do comando 'npm start'.
• Lista de Exercícios 07 (prazo final para entrega: 16/10/2017 - segunda-feira)
  • Crie uma única aplicação Web com as funcionalidades abaixo. A página principal da aplicação deverá conter um menu com links para as demais funcionalidades.
    1. Use cabeçalho (cabecalho.ejs) e rodapé (rodape.ejs) comuns para serem inseridos via template EJS em todas as páginas da aplicação.
    2. Complete a aplicação da lista anterior para exibir um formulário para adição de novos contatos à lista, semelhante ao exemplo que fizemos em aula. Desse modo, a aplicação deve permitir o cadastro e a listagem de contatos. No entanto, modifique a aplicação para deixar o cadastro em uma página (gerada a partir do template contatos_novo.ejs) e a listagem em outra página (gerada a partir do template contatos_lista.ejs).
    3. A partir do template imc_form.ejs, crie um formulário HTML para obter massa e altura de uma pessoa para cálculo do IMC. O cálculo do IMC deve ser feito no servidor e exibido em uma nova página criada a partir do template imc_resultado.ejs.
    4. Obter dois números em um formulário Web e após a submissão deste formulário, calcular a soma e a subtração dos números no servidor e mostrar o resultado na mesma página gerada a partir do template calculadora.ejs.
    5. Após o clique em um link gerado a partir do template gera_numeros.ejs, exibir uma sugestão de seis números não repetidos entre 1 e 60 para a mega-sena. Esses números devem ser gerados no servidor e retornados para exibição no browser do cliente na mesma página que exibe o link.
• Lista de Exercícios 08 (prazo final para entrega: 23/10/2017 - segunda-feira)
  • Use Node.js, Express e EJS para criar um cadastro de produtos (CRUD), de acordo com as seguintes especificações:
    • A aplicação deve seguir o modelo MVC, separando Modelo, Visão e Controlador.
    • Produto deve ter um código alfanumérico, nome e valor.
    • Os produtos devem ser armazenados em uma lista em memória.
    • A remoção de produto deve ser precedida da confirmação do usuário.
    • Use o Bootstrap para melhorar o design do seu CRUD.
    • Crie somente um formulário para o cadastro de produtos. Este formulário deve ser o mesmo para inserção e alteração de produto.
    • Caso esteja em dúvida sobre como fazer o CRUD, veja um exemplo de CRUD no projeto express03 criado em sala de aula e disponível no GitHub: https://github.com/regispires/aulas-node-js
• Lista de Exercícios 09 (prazo final para entrega: 30/10/2017 - segunda-feira)
  • Baixe o projeto feito em sala (Express04) que usa o MongoDB para inserção e visualização de contatos.
  • Altere o projeto para que ele permita alteração e remoção dos dados no MongoDB usando o módulo mongodb.
  • Importante: Não use o módulo Mongoose ainda.
• Lista de Exercícios 10 (prazo final para entrega: 06/11/2017 - segunda-feira)
  • Baixe o projeto feito em sala (Express05) que usa o MongoDB + Mongoose + Consign para inserção e visualização de contatos.
  • Altere o projeto para que ele permita alteração e remoção dos dados no MongoDB usando o módulo mongoosejs.
  • Melhore o visual da aplicação usando o Bootstrap, Materialize, Foundation ou outro framework CSS.
  • Peça a confirmação ao usuário antes de deletar um contato.
    • Para isso, com os seus conhecimento de JavaScript, aprenda e use a biblioteca SweetAlert2.
• Lista de Exercícios 11 (prazo final para entrega: 13/11/2017 - segunda-feira)
  • Baixe o projeto feito em sala (Express06) e o altere para que ele tenha as seguintes funcionalidades:
    • Autenticação de usuários a partir do banco de dados.
    • Alteração e remoção de contatos.
    • Crie 2 contadores na página principal da aplicação. Eles devem contar os acessos do usuário a esta página.
      • Um contador deve ser armazenado em um cookie com duração "infinita" e o outro deve ser armazenado na sessão.
        • Veja exemplos de usos de cookies e sessões nos projetos appcookie e appsession, respectivamente.
    • Crie uma rota / página para visualizar os valores dos 2 contadores.
• Lista de Exercícios 12 (prazo final para entrega: 20/11/2017 - segunda-feira)
  • Baixe o projeto feito em sala (Vue03) e o altere para que ele funcione apenas com uma página e chamadas AJAX. Todos os controladores devem apenas retornar JSON. A aplicação não deve ter redirect ou mudança de página. Deixe a aplicação funcionando com as mesmas funcionalidades pedidas na Lista de Exercícios 11.

Cronograma das Semanas Finais da Disciplina

• 04 e 05/12 - Apresentação do Trabalho Final da Disciplina
• 11/12 - AP2
• 12/12 - Segunda Chamada (AP1 e AP2)
• 18/12 - AF

Trabalho Final (a entrega deverá ser realizada pelo SIPPA)

• Trabalho Final da Disciplina (prazos para entrega: Parte 1 - 30/10/2017(segunda-feira) / Parte 2 - 04/12/2017(segunda-feira).