ATIVIDADES PRTICAS

SUPERVISIONADAS

CST em Anlise e Desenvolvimento de Sistemas

5. Srie
Ferramentas para Sistemas Web

A Atividade Prtica Supervisionada (ATPS) um procedimento metodolgico de

ensino-aprendizagem desenvolvido por meio de etapas, acompanhadas pelo
professor, e que tem por objetivos:
Favorecer a autoaprendizagem do aluno.
Estimular a corresponsabilidade do aluno pelo seu aprendizado.
Promover o estudo, a convivncia e o trabalho em grupo.
Auxiliar no desenvolvimento das competncias requeridas para o exerccio
profissional.
Promover a aplicao da teoria na soluo de situaes que simulam a
realidade.
Oferecer diferenciados ambientes de aprendizagem

Para atingir estes objetivos, a ATPS prope um desafio e indica os passos a

serem percorridos ao longo do semestre para a sua soluo.

Aproveite esta oportunidade de estudar e aprender com desafios da vida

profissional.

AUTORIA:
Walter Gima
Faculdade Anhanguera de Limeira

.
CST em Anlise e Desenvolvimento de Sistemas - 5. Srie - Ferramentas para Sistemas Web Pg. 2 de 13

COMPETNCIAS E HABILIDADES
Ao concluir as etapas propostas neste desafio, voc ter desenvolvido as competncias
e habilidades descritas a seguir.

Compreender tecnologias relacionadas comunicao e processamento de dados e

informaes.
Desenvolver sistemas informatizados desde a especificao de requisitos at os testes
de implantao, bem como as tecnologias de comutao, transmisso, recepo de
dados, podem constituir-se em especificidades desse eixo.

Produo Acadmica
Relatrio de Anlise e Layout;
Relatrio de Desenvolvimento;
Relatrio CSS e Java Script;
Relatrio Flash.

Participao
Esta atividade ser, em parte, desenvolvida individualmente pelo aluno e, em parte,
pelo grupo. Para tanto, os alunos devero:

organizar-se, previamente, em equipes de 2 a 5 participantes;

entregar seus nomes, RAs e e-mails ao professor da disciplina e
observar, no decorrer das etapas, as indicaes: Aluno e Equipe.

DESAFIO
A ESCTECX Brasil Mveis S.A. uma empresa de fabricante de mveis e atua no
mercado oferecendo mveis para escritrio, empresas, consultrios, entre outros tipos de
empresas. Aps uma pesquisa realizada com seus clientes, foi constatado que as maiorias das
pessoas gostariam de ver as imagens dos diversos modelos de mveis produzidos pela
ESCTEC Brasil em seu WebSite, pois facilitaria na escolha dos produtos. A ESCTEC Brasil
tambm gostaria de criar uma rea em seu WebSite para que seus vendedores pudessem
enviar os pedidos dos clientes para agilizar o processo de vendas.
Voc faz parte de uma equipe de desenvolvedores Web e foi contratado pela ESCTEC
Brasil para criar um novo WebSite com os recursos desejados pela empresa.
Para orientao no desenvolvimento e aprovao da criao das pginas do Site, a
ESCTEC Brasil conta com um membro de sua diretoria representado pelo professor.
A estrutura do site da ESCTEC Brasil est representada no diagrama a seguir:

Walter Gima
CST em Anlise e Desenvolvimento de Sistemas - 5. Srie - Ferramentas para Sistemas Web Pg. 3 de 13

Figura 1 Mapa do site ESCTEC Brasil.

Objetivo do desafio
O objetivo deste desafio consiste em apresentar a diretoria da ESCTEC Brasil o novo
WebSite desenvolvido com HTML, CSS e Java Script.

Livro Texto da Disciplina

A produo desta ATPS fundamentada no livro-texto da disciplina, que dever ser
utilizado para soluo do desafio:

THOMSON, Laura; WELLING, Luke. PHP e MySQL: Desenvolvimento Web. 3 ed. Rio de
Janeiro: Campus - Elsevier, 2005.

ETAPA 1 (tempo para realizao: 5 horas)

Aula-tema: Conceitos de desenvolvimento Web e ferramentas. Introduo ao padro

W3C. Programao HTML: conceitos e prtica. Apresentao de ferramenta para
criao de pginas. Programao HTML: o padro CSS. Programao HTML: o
padro CSS. Sintaxe geral e formas de insero na pgina.
Esta atividade importante para que voc conhea as diferenas entre a verso 4 e
verso 5 do HTML, saiba criar folha de estilos para um Site utilizando CSS, conhea vrias
Tags HTML para criao de pginas Web.

Para realiz-la, devem ser seguidos os passos descritos.

Walter Gima
CST em Anlise e Desenvolvimento de Sistemas - 5. Srie - Ferramentas para Sistemas Web Pg. 4 de 13

PASSOS

Passo 1 (Individual)
1. Pesquisar sobre como construir sites utilizando HTML e CSS focando a pesquisa nas
TAGs e recursos estruturais de HTML e CSS e na organizao de contedo de sites
corporativos.

Sites sugeridos para pesquisa

Tags HTML. Disponvel em: <http://www.w3schools.com/tags/>. Acesso em: 18

dez. 2013.
CSS. Disponvel em: <http://www.w3schools.com/css/>. Acesso em: 18 dez. 2013.

2. Fazer a leitura da apostila: HTML e CSS. Disponvel em

<https://drive.google.com/file/d/0Bwtkydm_xvOrZE4yX0hKcF9HX1k/edit?usp=shari
ng>. Acesso em: 19 dez. 2013.
3. Fazer a leitura da apostila: Curso W3C CSS. Disponvel em
<https://drive.google.com/file/d/0Bwtkydm_xvOrY0dzMHJLV3U2WTg/edit?usp=sha
ring>. Acesso em: 19 dez. 2013.

Passo 2 (Individual)
1. Pesquisar sobre as novidades do HTML5 focando a pesquisa nas mudanas na
organizao da pgina, novos recursos e compatibilidade do HTML5 com os
navegadores.
2. Fazer a leitura do material: Curso HTML5 W3C. Disponvel em
<https://drive.google.com/file/d/0Bwtkydm_xvOrWUF3Mm1aeHNUQXc/edit?usp=s
haring>. Acesso em: 19 dez. 2013.

Passo 3 (Equipe)
Criar as pginas A empresa, Misso, Viso e Valores para a ESCTEC utilizando HTML e CSS,
o texto utilizado como contedo das pginas deve ser elaborado pela equipe. As pginas a
serem criadas esto em destaque na imagem a seguir:

Walter Gima
CST em Anlise e Desenvolvimento de Sistemas - 5. Srie - Ferramentas para Sistemas Web Pg. 5 de 13

Figura 2 Mapa do site ESCTEC Brasil.

As paginas devem seguir os requisitos abaixo:

Cabealho padro para todas as pginas.
O Cabealho deve ter um logotipo.
Rodap padro para todas as pginas.
Ttulo da Pgina.

Figura 3 Prottipo de pgina padro.

Walter Gima
CST em Anlise e Desenvolvimento de Sistemas - 5. Srie - Ferramentas para Sistemas Web Pg. 6 de 13

Passo 4 (Equipe)
Elaborar o Relatrio 01 HTML e CSS: O relatrio deve conter os seguintes tpicos:
1.1 HTML e CSS: Apresentar o contedo pesquisa no passo 1 desta etapa.
1.2 HTML5: Apresentar o contedo pesquisa no passo 2 desta etapa.
1.3 WebSite: Apresentar as imagens das pginas criadas e o cdigo HTML de cada pgina.

ETAPA 2 (tempo para realizao: 5 horas )

Aula-tema: Programao HTML: criao de formulrios. Programao HTML:

criao de formulrios. Programao HTML: frames e imagens. Reviso para
avaliao.
Esta atividade importante para que voc conhea e utilize diversas tcnicas para
trabalhar formulrios HTML, utilize diversos componentes para construir formulrios e para
aprender a utilizar frames e imagens em uma pgina Web.

Para realiz-la, devem ser seguidos os passos descritos.

PASSOS

Passo 1 (Individual)
Pesquisar sobre as Tags utilizadas para criar formulrios e seus componentes e o uso de CSS
para formatar a apresentao dos formulrios.

Sites sugeridos para pesquisa

HTML: Forms. Disponvel em: <http://www.w3schools.com/html/html_forms.asp>.
Acesso em: 18 dez. 2013.
Formulrios e Entradas. Disponvel em:
<http://www.clem.ufba.br/tuts/html/c11.htm>. Acesso em: 18 dez. 2013.
Estilos CSS em objetos de formulrios. Disponvel em:
<http://www.maujor.com/tutorial/cssforms.php>. Acesso em: 18 dez. 2013.

Passo 2 (Equipe)
1. Pesquisar sobre como inserir e manipular imagens com HTML e CSS.

Sites sugeridos para pesquisa

Imagens HTML. Disponvel em: <http://pt-br.html.net/tutorials/html/lesson9.php>.
Acesso em: 18 dez. 2013.
Imagens e HTML. Disponvel em: <http://www.criarweb.com/artigos/57.php>.
Acesso em: 18 dez. 2013.
Imagens e legendas. Disponvel em:
<http://www.maujor.com/w3ctuto/figcap.html>. Acesso em: 18 dez. 2013.
Imagens com Bordas. Disponvel em: < http://www.maujor.com/tutorial/css3-
bordas-com-imagens.php>. Acesso em: 18 dez. 2013.

Walter Gima
CST em Anlise e Desenvolvimento de Sistemas - 5. Srie - Ferramentas para Sistemas Web Pg. 7 de 13

2. Criar as pginas: Produtos, Mesas, Cadeiras e Diversos seguindo os padres das

pginas criadas na Etapa anterior.
As pginas devem atender os seguintes requisitos:
Pgina Produtos: deve conter seis imagens de produtos que so considerados
lanamentos pela ESCTEC Brasil.
Pgina Mesas: deve conter pelo menos 6 imagens.
Pgina Cadeiras: deve conter pelo menos 6 imagens.
Pgina Diversos: deve conter pelo menos 6 imagens de produtos como armrios,
quadros, estantes e etc.

Figura 4 Prottipo de pgina de produtos.

Passo 3 (Equipe)
Criar os formulrios das pginas Pedidos e Contato. As pginas devem atender os requisitos
a seguir:
Pagina Contato:
- Campos do Formulrio:
Campo de texto: Nome, Empresa, Cidade, Telefone, Email.
Caixa de seleo (combo box, select): Departamento para Contato.
Botes de seleo (radio button): Como conheceu a ESCTEC ?
rea de Texto (text area): Mensagem.

Walter Gima
CST em Anlise e Desenvolvimento de Sistemas - 5. Srie - Ferramentas para Sistemas Web Pg. 8 de 13

Pagina Pedido:
- Campos do Formulrio:
Campo de texto: Nome Vendedor, Empresa, CNPJ, Endereo, Cidade, UF
Telefone, Email, Itens de Produto (descrio de produtos, qtde, valor unitrio, valor
total por item) onde o pedido deve aceitar no mximo 5 produtos e valor total do
pedido.
Caixa de seleo (combo box, select): Vendedor (criar pelo menos 5
vendedores), Produto (utilizar os mesmos produtos das paginas produtos, cadeiras,
mesas e diversos).
Botes de seleo (radio button): Como conheceu a ESCTEC ?
rea de Texto (text rea): Mensagem.

Figura 5 Prottipo de pgina de Contato.

Walter Gima
CST em Anlise e Desenvolvimento de Sistemas - 5. Srie - Ferramentas para Sistemas Web Pg. 9 de 13

Figura 6 Prottipo de pgina de Pedido.

Passo 4 (Equipe)
Elaborar o Relatrio 02 Imagens e Formulrios: O relatrio deve conter os seguintes tpicos:
2.1 HTML e Formulrios: Apresentar o contedo pesquisa no passo 1 desta etapa.
2.2 HTML e Imagens: Apresentar o contedo pesquisa no passo 2 desta etapa.
2.3 WebSite: Apresentar as imagens das pginas criadas e o cdigo HTML de cada pgina
criada nesta etapa.

ETAPA 3 (tempo para realizao: 5 horas)

Aula-tema: Introduo a Java Script: conceito, aplicao e prtica. Java Script:

variveis e tipos de dados. Java Script: comandos condicionais. Java Script:
comandos de repetio.
Esta atividade importante para que voc conhea os diversos recursos oferecidos
pela linguagem Java Script e os benefcios de sua utilizao na construo de um WebSite.

Para realiz-la, devem ser seguidos os passos descritos.

Walter Gima
CST em Anlise e Desenvolvimento de Sistemas - 5. Srie - Ferramentas para Sistemas Web Pg. 10 de 13

PASSOS

Passo 1 (Individual)
1. Pesquisar sobre utilizar linguagem Java Script para construir sites utilizando HTML
focando sintaxe, estruturas de repetio e condicional, eventos, funes entre outros
recursos.
2. Fazer a leitura da apostila: Java Script. Disponvel em
<https://drive.google.com/file/d/0Bwtkydm_xvOrbHNyZmltMzZOVkk/edit?usp=sha
ring>. Acesso em: 19 dez. 2013.
3. Fazer a leitura da apostila: Curso Programao Java Script e HTML. Disponvel em
<https://drive.google.com/file/d/0Bwtkydm_xvOrQ1k5Z1FWUFMteUk/edit?usp=sha
ring>. Acesso em: 19 dez. 2013.

Passo 2 (Equipe)
Criar em Java Script uma funo que ser chamada toda a vez que a pgina for carregada e
que ir exibir no cabealho das pginas da ESCTEC uma mensagem de Bom dia, Boa
tarde ou Boa Noite de acordo com o horrio que a pgina visitada.

Figura 7 Mensagem ao visitante do site.

Passo 3 (Equipe)
1. Criar em Java Script uma funo que verifica se o CNPJ informado por parmetro
vlido.
2. Criar em Java Script uma funo para verificar se um email informado por parmetro
vlido.
3. Criar em Java Script uma funo para verificar se um texto informado possui menos que
trs letras, caso for verdadeiro exibir uma mensagem (alert) informando que o texto
invlido.

Passo 4 (Equipe)

Elaborar o Relatrio 03 Java Script: O relatrio deve conter os seguintes tpicos:

3.1 Java Script: Apresentar o contedo pesquisa no passo 1 desta etapa.
3.2 Programao Java Script: Apresentar o cdigo das funes criadas nesta etapa.

Walter Gima
CST em Anlise e Desenvolvimento de Sistemas - 5. Srie - Ferramentas para Sistemas Web Pg. 11 de 13

ETAPA 4 (tempo para realizao: 5 horas )

Aula-tema: Java Script: funes, classes e reutilizao de cdigo. Java Script:

manipulao de formulrios e menus Java Script.
Esta atividade importante para que voc aprender a criar funes em Java Script para
realizar validaes e manipulaes em formulrios de uma pgina Web, aprender a combinar
CSS e Java Script para criar menus e outros recursos em um WebSite.

Para realiz-la, devem ser seguidos os passos descritos.

PASSOS

Passo 1(Equipe)
Criar o menu do site com os links para as pginas utilizando recursos de HTML e CSS/Java
Script. O menu deve contar com dois submenus (menu drop-down) para os itens A Empresa e
Produtos conforme imagens a seguir:

Figura 8 Submenu do item A Empresa.

Figura 9 Submenu do item Produtos.

Passo 2 (Equipe)
1. Utilizar as funes para validar CNPJ, email e campos de texto criadas no passo 3 da
Etapa trs para fazer a validao dos campos formulrios da pgina Pedido. Caso os
campos sejam invlidos uma mensagem (alert) deve ser exibida ao usurio, as validaes
dos campos devem acontecer em dois momentos: no evento onBlur de cada campo a ser
validado e no evento onClick do boto de Enviar do formulrio. Alm dos campos CNPJ
e email os campos de texto vendedor, cliente e telefone no devem ter menos de trs
letras.
2. Utilizar Java Script para adicionar uma ao no componente caixa de seleo (combo box)
de vendedor onde ao selecionar um vendedor, seu nome ir ser exibido na caixa de texto
Vendedor.

Walter Gima
CST em Anlise e Desenvolvimento de Sistemas - 5. Srie - Ferramentas para Sistemas Web Pg. 12 de 13

Figura 10 Selecionar Vendedor.

Passo 3 (Equipe)
1. Utilizar Java Script para adicionar uma ao no componente caixa de seleo (combo box)
de Produto onde ao selecionar um produto, sua descrio nome ir ser exibido na caixa
de texto descrio de produto, tambm ser adicionado o valor do produto na caixa de
texto valor unitrio.

Figura 11 Selecionar Produto.

2. Utilizar Java Script para calcular o valor total por item (qtde x valor unitrio) no evento
onBlur da caixa de texto quantidade.

Figura 12 Calcular valor unitrio.

3. Utilizar Java Script para calcular o valor total do pedido, este campo recebe a soma dos
campos Valor Total Item, o calculo de ser realizado no evento onBlur do campo Valor
Total Item.

Walter Gima
CST em Anlise e Desenvolvimento de Sistemas - 5. Srie - Ferramentas para Sistemas Web Pg. 13 de 13

Figura 13 Calcular valor total Pedido.

Passo 4 (Equipe)
Elaborar o Relatrio 04 Menus e Formulrios: O relatrio deve conter os seguintes tpicos:
4.1 WebSite: Apresentar as imagens das pginas do site e o cdigo HTML de cada pgina
alterada neste etapa.

Padronizao

O material escrito solicitado nesta atividade deve ser produzido de acordo com as
normas da ABNT, com o seguinte padro (exceto para produes finais no textuais):
em papel branco, formato A4;
com margens esquerda e superior de 3cm, direita e inferior de 2cm;
fonte Times New Roman tamanho 12, cor preta;
espaamento de 1,5 entre linhas;
se houver citaes com mais de trs linhas, devem ser em fonte tamanho 10, com
um recuo de 4cm da margem esquerda e espaamento simples entre linhas;
com capa, contendo:
nome de sua Unidade de Ensino, Curso e Disciplina;
nome e RA de cada participante;
ttulo da atividade;
nome do professor da disciplina;
cidade e data da entrega, apresentao ou publicao.

Para consulta completa das normas ABNT, acesse a Normalizao de Trabalhos Acadmicos
Anhanguera. Disponvel em:
<http://issuu.com/normalizacao/docs/normaliza____o_de_trabalhos_acad__m>. Acesso
em: 13 maio 2014.

Walter Gima