Desenvolvimento de Software para Web (SI e CC)

Dados gerais sobre a disciplina (SI)

Código: QXD0020

Curso: Sistemas de Informação

Turma: 5º Período

Turno: Manhã

Carga Horária: 64h

Local: Bloco 1 - Sala 3 (Segunda) (HDMI) / Bloco 1 - Laboratório 4 (Quarta) (VGA)

Horários: Segunda das 10h às 12h e Quarta das 08h às 10h

Dados gerais sobre a disciplina (CC)

Código: QXD0020e

Curso: Ciência da Computação

Turma: 5º Período

Turno: Manhã

Carga Horária: 64h

Local: Bloco 1 - Laboratório 2 (Segunda) (VGA) / Bloco 2 - Sala 3 (Terça)

Horários: Segunda e Terça das 08h às 10h

Site

http://bit.ly/ufcregis

Downloads

Bibliografia

  • Básica
    • Caelum WD-43 – Desenvolvimento Web com HTML, CSS e JavaScript (HTML - PDF).
    • Caelum FJ-21 – Java para Desenvolvimento Web (HTML - PDF)
  • Complementar
    • LUCKOW, Décio Heinzelmann; MELO, Alexandre Altair. Programação Java para a Web. São Paulo: Novatec Editora, 2010.
    • K19 Treinamentos. K12 - Desenvolvimento Web com JSF2 e JPA2.
    • KURNIAWAN, Budi. Java para a Web com Servlets, JSP e EJB. Rio de Janeiro: Ciência Moderna, 2002.
    • GEARY, David; HORSTMANN, Cay. Core JavaServer Faces. 3. ed. Rio de Janeiro, RJ: Alta Books, 2012.
    • GONÇALVES, Edson. Desenvolvendo aplicações Web com NetBeans IDE 6. Rio de Janeiro: Ciência Moderna, 2008.
    • BASHAM, Bryan. Use a cabeça!: Sevlets & JSP. 2. ed. Rio de Janeiro, RJ: Alta Books, 2008.
    • MOREIRA NETO, Oziel. Entendendo e dominando o Java para internet. 2. ed. São Paulo: Digerati Books, 2009.
    • FREEMAN, Elisabeth; FREEMAN, Eric. Use a cabeça!: HTML com CSS e XHTML. 2. ed. Rio de Janeiro, RJ: Alta Books, 2008.
    • Caelum FJ16 - Testes, XML e Design Patterns (HTML - PDF)

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

  • Lista de Exercícios 01 (prazo final para entrega: 20/03/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.
    3. Crie uma página HTML com um formulário para cadastro de dados pessoais como: CPF, Nome, Telefone, Email e Data de Nascimento.
  • Lista de Exercícios 02 (prazo final para entrega: 27/03/2017 - segunda-feira)
    1. Use CSS para estilizar as páginas criadas por você na Lista de Exercícios 01.
      • Crie um único arquivo CSS externo a ser usado e compartilhado pelas 3 páginas criadas da Lista 01.
      • Todas as páginas devem ter um cabeçalho, um container geral com seu conteúdo e um rodapé.
    2. 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).
      • Use HTML5 e CCS3.
      • OBS: A apostila WD-43 da Caelum mostra o passo a passo de como construir tal página.
  • Lista de Exercícios 03 (prazo final para entrega: 03/04/2017 - segunda-feira)
    1. Faça o exercício proposto nos slides da disciplina sobre Bootstrap (32 passos).
    2. Crie uma página de notícias usando o Bootstrap.
      • As notícias devem ser apresentadas em 3 colunas no desktop e em somente 1 coluna no celular.
      • Use textos e imagens reais de algum site de notícias já existente.
      • Use o componente Carousel para mostrar as notícias em destaque no topo da página.
      • Use conteúdos personalizados em thumbnails (miniaturas de imagens).
    3. 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.
  • Lista de Exercícios 04 (prazo final para entrega: 10/04/2017 - segunda-feira)
    • OBS: Esta lista exercita a autonomia do aluno para entender e usar o jQuery em algumas questões, mesmo que o jQuery ainda não tenha sido apresentado em detalhe durante as aulas.
    • Em todas as questões defina eventos usando Javascript e não diretamente no código HTML.
    1. Crie uma página HTML com um formulário para obter preço e quantidade. Exibir em um elemento input, desabilitado para edição, o valor total (preço x quantidade) dinamicamente quando preço ou quantidade forem alterados. Usar JavaScript puro (sem jQuery).
    2. 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.
    3. 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 puro (sem jQuery).
    4. Crie a mesma funcionalidade da Questão 4 em uma nova página HTML, usando o jQuery.
    5. Crie uma página HTML que possui um caractere texto que segue o movimento do ponteiro do mouse pela tela. Usar JavaScript puro (sem jQuery).
      • 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 a mesma funcionalidade da Questão 6 em uma nova página HTML, usando o jQuery.
    7. 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. Usar o jQuery.
  • Lista de Exercícios 05 (prazo final para entrega: 24/04/2017 - segunda-feira)
    • OBS: Todas as questões desta lista devem ser resolvidas em uma única aplicação Web. Desse modo, você deve enviar um único arquivo WAR contendo toda a aplicação com as resoluções de todas as questões da lista e também com o código fonte. A geração do arquivo WAR pode ser realizada através da opção de Exportação do Eclipse.
    • 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. Os resultados das submissões de formulários devem ocorrer através de Servlets. Crie quantos Servlets você julgar necessário para resolver os itens abaixo.
      1. Em uma página HTML, 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 do resultado do IMC via Servlet (sem Javascript). A submissão do formulário leva a apresentação do resultado em uma nova página gerada pelo Servlet.
      2. Obter dois números em um formulário Web e após a submissão deste formulário, exibir a soma e a subtração dos números.
      3. Após o clique em um link, 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 em um Servlet e retornados para exibição no browser do cliente.
  • Lista de Exercícios 06 (prazo final para entrega: 01/05/2017 - segunda-feira)
    • OBS: Todas as questões desta lista devem ser resolvidas em uma única aplicação Web. Desse modo, você deve enviar um único arquivo WAR contendo toda a aplicação com as resoluções de todas as questões da lista e também com o código fonte. A geração do arquivo WAR pode ser realizada através da opção de Exportação do Eclipse.
    • 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. Crie uma classe Produto com codigo, nome, descrição e quantidade do produto.
      2. Crie uma página html que mostre alguns produtos com seus respectivos preços e que permita a adição deles em um carrinho de compras (lista de produtos) que deve ser armazenado no contexto de sessão ao chamar um servlet específico.
        • A adição de produtos deve ser feita através de AJAX ao clicar sobre um link ou botão Adicionar.
        • Um botão Mostrar Carrinho deve abrir uma janela Modal para mostrar os itens do Carrinho de Compras.
          • Um Servlet específico deve retornar os itens do carrinho de compras.
          • Este Servlet deve ser chamado via AJAX quando o botão Mostrar Carrinho for clicado para preencher os conteúdos que aparecerão na janela Modal.
      3. Crie um servlet para criar um contador e incrementá-lo a cada acesso a este servlet (A página principal da aplicação chama este servlet). O contador deve ser armazenado em um Cookie no cliente e ter a duração de 1 mês. Depois disso, o servlet deve redirecionar o cliente para uma página html capaz de mostrar o valor atual do contador via JavaScript (ver acesso a valores de cookies via Javascript: https://www.w3schools.com/js/js_cookies.asp).

  • Lista de Exercícios 07 (prazo final para entrega: 08/05/2017 - segunda-feira)
    • OBS: Todas as questões desta lista devem ser resolvidas em uma única aplicação Web. Desse modo, você deve enviar um único arquivo WAR contendo toda a aplicação com as resoluções de todas as questões da lista e também com o código fonte. A geração do arquivo WAR pode ser realizada através da opção de Exportação do Eclipse.
    • Crie uma única aplicação Web com as funcionalidades abaixo. A página principal da aplicação (home) deverá conter um menu com links para as demais funcionalidades.
    1. Crie uma página html com um formulário de login para preenchimento de usuário e senha.
    2. Crie um servlet para login que recebe os parâmetros usuário e senha. Se usuário e senha forem 'admin' e 'teste1234', respectivamente, criar um atributo no escopo de sessão (mecanismo de autenticação). O nome do atributo deve ser 'usuario' e seu valor deve ser 'admin'. Isso significa que o usuário está logado (autenticado). Depois disso, o servlet deve redirecionar o usuário para a página home da aplicação. A opção de login deve estar disponível para acesso na página home, caso o usuário não esteja logado.
    3. Crie um servlet para logout. Esse servlet deve eliminar a sessão e redirecionar o usuário para a página home da aplicação. A opção de logout deve estar disponível para acesso em todas as páginas da aplicação, caso o usuário esteja logado.
    4. Sua aplicação não deve permitir acesso não autorizado às suas funcionalidades, ou seja, deve ter um mecanismo de autorização. Para isso, crie um filtro que force o login, caso o usuário não esteja logado e tente acessar qualquer página que não seja a página de login.
    5. Crie uma lista de tarefas que deve ser armazenada na sessão do usuário logado no sistema. Esta lista deve permitir a inclusão, alteração e remoção de tarefas para cada usuário.
  • Lista de Exercícios 08 (prazo final para entrega: 15/05/2017 - segunda-feira)
    1. Refatore a Lista de Exercícios 05 para que ela possa usar JSP. O Servlet deve continuar gerando os dados, mas sua exibição deve ser feita através de páginas JSP.
      • Evite ao máximo o uso de Scriptlets. Quando precisar usar código Java tente fazê-lo em um Servlet que encaminha o resultado para o JSP.
      • Use Expression Language (EL) sempre que possível.
    2. Use em todas as páginas da aplicação um único cabeçalho e um único rodapé que devem ser incluídos (include) no JSP a partir de dois arquivos externos, ou seja, um para o cabeçalho e outro para o rodapé.
    3. Crie uma página de erro da aplicação. Em caso de qualquer erro HTTP ou de execução, o usuário deve ser redirecionado para a página de erro.

  • Lista de Exercícios 09 (prazo final para entrega: 22/05/2017 - segunda-feira)

Refatore a Lista de Exercícios 08 para que ela use JSTL e Tags Personalizadas.

      • Crie e use ao menos uma Tag Personalizada.
      • Use as seguintes JSTL:
        • core
        • formatação
  • Lista de Exercícios 10 (prazo final para entrega: 29/05/2017 - segunda-feira)
    • Crie uma aplicação Web que permita o cadastro e a visualização de Produtos.
      • Um produto deve ter um id, uma descrição e um valor.
      • Os produtos devem ser armazenados no Banco de Dados através do uso de JDBC e do padrão DAO (Data Access Object).
      • Referências:
  • Lista de Exercícios 11 (prazo final para entrega: 05/06/2017 - segunda-feira)
    • Crie um CRUD (Create, Read, Update e Delete) relacionado a uma entidade do seu trabalho final.
      • Um exemplo de tela de CRUD pode ser visto neste link.
      • Sua aplicação deve usar o modelo MVC tendo apenas um único Servlet central genérico e diferentes classes para tratar a lógica de negócio, conforme os slides de número 10 sobre MVC e Apostila da Caelum FJ21 - Cap9 - MVC.
      • O acesso ao banco de dados realizado por sua aplicação deve fazer uso de uma interface DAO. A implementação do DAO pode ser via JDBC ou JPA.
  • Lista de Exercícios 12 (prazo final para entrega: 12/06/2017 - segunda-feira)
    • Refaça a lista 11 substituindo sua implementação de MVC pelo Spring Boot. Isso significa que você deve fazer o CRUD substituindo os Servlets pelos Controladores e Ações do Spring Boot.
      • Procure usar URLs limpas para passagem de parâmetros no estilo REST, ou seja, URLs onde os parâmetros HTTP são substituídos por parâmetros codificados na própria URL.
      • Um exemplo de aplicação usando Spring MVC para inspirar sua resolução desta lista pode ser encontrado no seguinte endereço:
      • O exemplo dado, no entanto, usa somente o Spring MVC puro, sem as facilidades de configurações automáticas providas pelo Spring Boot.
      • Ou seja, o exemplo dado é bem mais prolixo em configurações do que o que podemos fazer com o Spring Boot.
      • Tirando as configurações manuais, os Controladores, as Visões e os Modelos usados na aplicação exemplo são bem parecidos com o que precisamos implementar com o Spring Boot.
      • Veja também esta aplicação real criada pelo NPI (Núcleo de Práticas em Informática) do Campus de Quixadá:
  • Lista de Exercícios 13 (prazo final para entrega: 19/06/2017 - segunda-feira)

Calendário de Avaliações

  • IMPORTANTE:
    • A Segunda Chamada de qualquer uma das provas de DSWEB ocorrerá na quarta-feira (05/07) no Lab4 a partir das 8:00 da manhã.
    • Somente pode realizar a Segunda Chamada quem não fez a Primeira Chamada.

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

O envio da Parte I do Trabalho Final (TF) deve ser realizado através dos endereços:

O envio da Parte II do Trabalho Final (TF) deve ser realizado através do SIPPA.