ATIVIDADES PRTICAS

SUPERVISIONADAS
Sistemas de Informao
1. 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:
Thiago Salhab Alves
Faculdade Anhanguera de Santa Brbara

Sistemas de Informao - 1. Srie - Ferramentas para Sistemas Web

Pg. 2 de 7

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

Conceber, projetar e analisar sistemas, produtos e processos.

Projetar e conduzir experimentos e interpretar resultados.

Desenvolver e/ou utilizar novas ferramentas e tcnicas.

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: Individual e Equipe.

DESAFIO
O avano das tecnologias de telecomunicaes permitiu vrias mudanas na
concepo dos sistemas baseados na Internet. Com o custo de utilizao da Internet cada vez
menor, proporcionando o aumento do nmero de usurios e conexes cada vez mais rpidas,
a Internet se tornou um grande mercado para as empresas, seja para divulgar sua marca ou
para comercializar produtos e servios.
O desafio proposto a elaborao de um Site para divulgar os produtos de uma Loja
de Informtica, que trabalha com vendas de computadores, notebooks, acessrios, softwares,
jogos, entre outros produtos. O Site ser construdo utilizando a linguagem HTML, CSS e a
tecnologia Flash, devendo conter as pginas descritas a seguir.
Histria da Empresa.
Produtos.
Dicas e Curiosidades.
Localizao
Contato
Pgina Principal
Para organizar a navegao do Site, dever ser criado uma Pgina Principal seguindo
conceitos de usabilidade e interface com os usurios, tendo tambm que atender os requisitos
apresentados a seguir.
Os cabealhos, rodaps e links para as demais pginas de todo o site devem
seguir um padro, sendo semelhantes em todas as pginas do site para facilitar
a usabilidade do usurio ao acessar as pginas.
As pginas no tero acesso a banco de dados e no utilizaro linguagens
Server-side (do lado do servidor) para exibir seu contedo. No sero realizadas
vendas pelo Site, apenas divulgao de produtos e preos.

Objetivo do Desafio

Thiago Salhab Alves

Sistemas de Informao - 1. Srie - Ferramentas para Sistemas Web

Pg. 3 de 7

1. Desenvolver um Site para uma Loja de Informtica, utilizando as linguagem HTML, CSS
e Flash.
2. Apresentar relatrios parciais que mostrem a concepo do site a cada etapa, conforme as
especificaes a seguir.

Relatrio de Anlise e Layout

Relatrio de Desenvolvimento

Relatrio CSS e JavaScript

Relatrio Flash

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: Apresentao da disciplina. Introduo a Internet. Conceitos e Prtica.
Programao HTML: conceitos e prtica. Apresentao de ferramenta para criao
de pginas.
Esta atividade importante para que voc compreenda os principais conceitos de
Internet, entenda os fundamentos e conceitos de HTML (HyperText Markup Language) e
conhea alguns Sites de Lojas de Informtica.

PASSOS
Passo 1 (Individual)
Fazer a leitura do artigo: Como Funciona a Internet. Disponvel em:
<https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B2k9x8w9Y2Jf
ZjA1M2RjNTctZGJhMy00NGE1LTk0N2UtMWYwZWVjYmNkM2Nj&hl=en_US>.
Acesso
em: 30 jan. 2014. Buscar compreender o funcionamento da internet, protocolos e a rede de
pacotes.

Thiago Salhab Alves

Sistemas de Informao - 1. Srie - Ferramentas para Sistemas Web

Pg. 4 de 7

Passo 2 (Equipe)
Fazer uma pesquisa de alguns sites de lojas de informtica verificando algumas disposies
de layout, textos, animaes, imagens, etc. Como sugesto, visite os links disponveis no
arquivo
Lojas
de
Informtica.
Disponvel
em:
<https://docs.google.com/document/d/1ieXIpFqSQEIZxxvqu3_eTZsrfZVjcDGUk7uUTBS8
lrg/edit?hl=en_US>. Acesso em: 30 jan. 2014.
Passo 3 (Equipe)
1. Fazer a proposta do layout de seu site, com base nos sites de lojas de Informtica visitados,
focando nas seguintes pginas.

Histria da Empresa: pgina que deve conter o histrico da empresa.

Produtos: lista de produtos, com fotos, descrio e preos.
Dicas e Curiosidades: dicas, curiosidades e links relacionados a Hardware e Software.
Localizao: Endereo da Empresa e Mapa da Empresa.
Contato: Campos para Contato, tais como, Nome, RG, CPF, Endereo Completo,
Telefone, Celular, E-mail, Mensagem.
Pgina Principal: Pgina Principal, com Menus e Banner Animado.

2. Utilizar, para a criao do layout do site, o software MockingBird. Disponvel em:

<https://docs.google.com/document/d/1H9J59kBO0u5Opc2Ac9_IWwRJdOzMXEJ9Nhr830qB98/edit?hl=pt_BR>. Acesso em: 30 jan. 2014. Fazer a modelagem
do layout site.
Passo 4 (Equipe)
Fazer o Relatrio de Anlise e Layout que deve conter um resumo do artigo lido no passo 1,
lista dos sites de lojas de Informtica visitados e a modelagem do layout do site. Entregar o
relatrio ao professor.

ETAPA 2 (tempo para realizao: 5 horas)

Aula-tema: Programao HTML: o padro CSS. Sintaxe geral e formas de insero
na pgina. Programao HTML: frames e imagens.
Esta atividade importante para que voc possa construir o site da Loja de
Informtica, utilizando os principais recursos de HTML, tais como, formatao de textos,
pargrafos, listas, links, imagens, tabelas, frames e formulrios.

PASSOS
Passo 1 (Individual)
Fazer a leitura do material: Construo de Pginas Web com Html e Scripts. Disponvel em:
<https://docs.google.com/a/aedu.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B
_uLQd5hdqlWYzFkOGY3N2QtMjcwNy00MGExLTgzZjgtYzM1YjI5MTc1NDY0&hl=pt_BR>.

Thiago Salhab Alves

Sistemas de Informao - 1. Srie - Ferramentas para Sistemas Web

Pg. 5 de 7

Acesso em: 30 jan. 2014. Procurar verificar os principais recursos de HTML, tais como,
formatao de textos, pargrafos, listas, links, imagens, tabelas, frames e formulrios.
Passo 2 (Equipe)
Iniciar a construo do site, criando em HTML, as pginas que foram modeladas com seus
respectivos layouts. As pginas que devem ser criadas so as descritas a seguir.

Histria da Empresa: pgina que deve conter o histrico da empresa.

Produtos: lista de produtos, com fotos, descrio e preos.
Dicas e Curiosidades: dicas, curiosidades e links relacionados a Hardware e Software.
Localizao: Endereo da Empresa e Mapa da Empresa.
Contato: Campos para Contato.
Pgina Principal: Pgina Principal do Site.

Passo 3 (Equipe)
Fazer a insero dos seguintes recursos da HTML em suas pginas.
Histria da Empresa: Imagem e Textos Formatados.
Produtos: Imagens, Tabelas e Textos Formatados.
Dicas e Curiosidades: Links e Textos Formatados.
Localizao: Imagem e Textos Formatados.
Contato: Formulrio.
Pgina Principal: Imagem, Links e Textos Formatados.
Passo 4 (Equipe)
Fazer o Relatrio de Desenvolvimento que deve conter o cdigo fonte de todas as pginas
criadas em HTML e imagens referentes s pginas (printScreen das pginas criadas). Reunir
todas as informaes neste relatrio e entregar ao professor.

ETAPA 3 (tempo para realizao: 5 horas )

Aula-tema: Programao HTML: o padro CSS. Introduo a Java Script: conceito,
aplicao e prtica.
Esta atividade importante para que voc possa aplicar os conceitos de CSS e
JavaScript no projeto do site da Loja de Informtica.
Para realiz-la, devem ser seguidos os passos descritos.

PASSOS
Passo 1 (Equipe)
Realizar a leitura do material: Construo de Pginas Web com Html e Scripts. Disponvel
em:
<https://docs.google.com/a/aedu.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B
_uLQd5hdqlWYzFkOGY3N2QtMjcwNy00MGExLTgzZjgtYzM1YjI5MTc1NDY0&hl=pt_BR>.
Acesso em: 30 jan. 2014. Focar a leitura nas sees que abordam CSS e JavaScript.

Thiago Salhab Alves

Sistemas de Informao - 1. Srie - Ferramentas para Sistemas Web

Pg. 6 de 7

Passo 2 (Equipe)
Definir folhas de estilo (CSS) embutidas para todas pginas do site da Loja de Informtica. A
folha de estilo deve contemplar as tags para cor, fonte, tamanho da fonte, entre outros.
Passo 3 (Equipe)
Fazer a validao do Formulrio da pgina Contato utilizando JavaScript. Validar todos os
campos, principalmente RG, CPF, Telefone, Celular e E-mail, garantindo que os dados
inseridos so aceitveis.
Passo 4 (Equipe)
Fazer o Relatrio CSS e JavaScript, que deve conter o cdigo fonte de todas as pginas
criadas em HTML, apresentando as novas inseres de CSS e JavaScript. Reunir todas as
informaes neste relatrio e entregar ao professor.

ETAPA 4 (tempo para realizao: 5 horas )

Aula-tema: Exerccios e atividades prticas em laboratrio. Reviso para avaliao
oficial.
Esta atividade importante para que voc possa aplicar os conceitos de Flash para a
elaborao de animaes que iro enriquecer e tornar mais atrativo o site da Loja de
Informtica
Para realiz-la, devem ser seguidos os passos descritos.

PASSOS
Passo 1 (Individual)
Fazer
a
leitura
da
apostila
de
Flash
CS5.
Disponvel
em:
<https://docs.google.com/a/aedu.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B_uL
Qd5hdqlWOTVkOTI1NDAtMjM5Mi00MjJhLWI2MTItYTM3ZTcxY2VjNmUy&hl=pt_BR>.
Acesso em: 30 jan. 2014. Focar a leitura nas tcnicas de animao.
Passo 2 (Equipe)
Incluir em cada pgina um banner animado criado atravs das tcnicas de animao e
utilizando ActionScript. O banner deve chamar a ateno do visitante da pgina.
Passo 3 (Equipe)
Fazer o Relatrio Flash que deve conter o cdigo fonte de todas as pginas criadas em
HTML, apresentando as novas inseres do Flash. Reunir todas as informaes neste
relatrio e entreguem ao professor.

Thiago Salhab Alves

Sistemas de Informao - 1. Srie - Ferramentas para Sistemas Web

Pg. 7 de 7

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_para_trabalhos_acad_micos?e=8070144/2211159
>. Acesso em: 29 jan. 2014.

Thiago Salhab Alves