CENTRO UNIVERSITÁRIO DA GRANDE DOURADOS

Curso: TECNOLÓGICO EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS

Disciplina: Desenvolvimento Voltado à Web I - 3º Semestre
Professora: Eliza Claudia Hahn
Acadêmico(a): _____________________________________RGM: ______________
Pólo: _______________________________________________

ENVIO DE PORTÓLIOS: Desenvolva todas as atividades e ao final poste um único

arquivo .rar ou .zip no PORTFÓLIO (PORTFOLIO – AULA 1).

ATENÇÂO, o limite de upload da plataforma é de 25MB, caso seu arquivo final seja maior,
edite imagens, reveja arquivos de áudio e vídeo, se for o caso, para adequar ao tamanho
suportado.

Devem ser enviados todos os arquivos que fazem parte de sua atividade (.doc, .html,
imagens, .css, .js). Todos devem ser enviados em um único arquivo compactado (.zip/.rar).
Se enviados em arquivos avulsos não serão aceitas e nem corrigidas. Nos exercícios
práticos, deve enviar as páginas web (.html), não será aceito caso seja apenas enviado e/ou
colado o script no arquivo .doc.

ATENÇÂO com a index. Deve enviar uma única página index.html, edite sempre a mesma
index.html, em vez de criar um novo arquivo a cada aula.

ATENÇÃO COM AS URLs: no decorrer da disciplina, irá aprender sobre os conceitos de URL
absoluta e URL relativa, entenda-as e aplique-as corretamente em seu web site. Como sugestão,
antes de enviar sua atividade, copie e cole a pasta com sua atividade para outro diretório,
e teste todas as URLs, tanto dos links, quanto das imagens.

TENHA UM EXCELENTE APRENDIZADO!! E mãos à obra!!

Exercícios - Desenvolvimento web na prática

1. Comece com a leitura das Aulas 1 e 2.

2. Antes de começar a desenvolver as atividades práticas, assista as Vídeo aulas para

entender o processor de criação de uma página web.

3. Acesse Material de Aula – Arquivo  Template, faça o download do mesmo.

Descompacte a pasta e renomeie a pasta com o seu primeiro nome e seu RGM. Ex:
“eliza_343_001”. E todas as páginas que forem criadas nos exercícios a seguir, devem
ser salvas neste diretório, junto com as demais páginas que ali já estão.

4. De forma a praticar os conhecimentos adquiridos nas Aulas 03 e 04, crie uma página
sobre.html e nela insira seus dados de identificação: nome completo, RGM, pólo e
uma imagem (pode ser uma foto sua ou de sua cidade).
  A imagem deve conter uma legenda e o atributo title com uma pequena
descrição sobre a mesma.

5.Abra a página index.html. Use sua criatividade e imaginação. Pense em um tema, crie o
nome e a logo do seu site. Crie a APRESENTAÇÂO do seu site. Por exemplo, pode ser o site
de um restaurante, um hotel, um site de venda de algum produto/serviço, site de notícias,
enfim... pode modificar a área de conteúdo conforme sua necessidade. Conforme for
avançando nas aulas, poderá retornar e inserir novos recursos.

6. Abra a página contato.html e:

 Crie o form de contato conforme a seguir.

 Validar este formulário utilizando apenas recursos do HTML5.

 Valide o form para que todos os campos sejam obrigatoriamente preenchidos.
 O campo e-mail também deve ser validado para que seja informado um tipo e-mail
válido.
 O botão Limpar – deve permitir limpar os dados inseridos (Deve estar em
funcionamento)
 O botão Enviar - permite submeter o formulário à outra página. O formulário deverá
ser submetido a página envia.html (esta página também deve ser criada), a qual
deverá conter apenas a mensagem: Mensagem enviada com sucesso!!
 Edite os dados a seguir com os seus dados.

 Faça uma pesquisa e insira nesta página a localização - google-maps - (pode ser a
localização de seu pólo).

7. Crie uma página HTML, e salve-a com o nome portfolio.html. Nela insira conteúdo
relacionado ao seu site. Ex: se for um site de notícias, pode colocar uma lista de
notícias, se for um restaurante pode colocar o cardápio e assim sucessivamente.

8. Altere o menu na index.html, criando os seguintes links de acesso:

a) HOME - deve criar um link de acesso à página index.html.

b) SOBRE NÒS - deve criar um link de acesso à página sobre.html.
c) PORTFOLIO - deve criar um link de acesso a página portfolio.html.
d) PERGUNTAS FREQUENTES - deve criar um link de acesso a página
perguntas.html.
e) CONTATO - deve criar um link de acesso à página contato.html.
f) LOG IN - deve criar um link de acesso à página login.html.
 Revise todos as URLs, certifique-se de que todos os links internos abram na mesma
janela e não em uma nova janela, essa prática vale para todas as URLs internas do seu
site.

9. Em todas as páginas internas, no topo, deve haver um link de retorno à home page,

ou seja, permitir retornar à index.html.

10. Abra a página sobre.html. Nela insira um áudio (pode ser a sua música favorita, ou
qualquer outro áudio).

11. Abra a página perguntas.html:

 Responda todas as questões nesta página.

 Para as questões 3 e 5 veja quais os atributos vistos na aula Formulários que irão
possibilitar assinalar a resposta correta. Os campos corretos devem estar assinalados.

12. Abra a página login.html

 Crie o form de login a seguir.

 O campo categoria dever ser do tipo select e conter as seguintes opções:

 Valide o campo senha, use o atributo HTML5 correspondente.

 Utilizando JavaScript, valide todos os campos para que os mesmos sejam todos
preenchidos.
 Ao submeter o form, emita um alerta em JavaScript “Formulário validado com
sucesso!”.