Você está na página 1de 8

ATIVIDADES PRTICAS SUPERVISIONADAS

2 Srie Ferramentas de Desenvolvimento para Web

Tecnologia em Gesto da Tecnologia da Informao

A atividade prtica supervisionada (ATPS) um mtodo de ensinoaprendizagem desenvolvido por meio de um conjunto de atividades programadas e supervisionadas e que tem por objetivos: Favorecer a aprendizagem. Estimular a corresponsabilidade do aluno pelo aprendizado eficiente e eficaz. Promover o estudo, a convivncia e o trabalho em grupo. Desenvolver os estudos independentes, sistemticos e o autoaprendizado. Oferecer diferenciados ambientes de aprendizagem. Auxiliar no desenvolvimento das competncias requeridas pelas Diretrizes Curriculares Nacionais dos Cursos de Graduao. Promover a aplicao da teoria e conceitos para a soluo de problemas relativos profisso. Direcionar o estudante para a emancipao intelectual. Para atingir estes objetivos as atividades foram organizadas na forma de um desafio, que ser solucionado por etapas ao longo do semestre letivo. Participar ativamente deste desafio essencial para o desenvolvimento das competncias e habilidades requeridas na sua atuao no mercado de trabalho. Aproveite esta oportunidade de estudar e aprender com desafios da vida profissional.

AUTORIA: Walter Gima


Faculdade Anhanguera de Limeira

Tecnologia em Gesto da Tecnologia da Informao 2 Srie Ferramentas de Desenvolvimento para Web

Pg. 2 de 8

COMPETNCIAS E HABILIDADES
Ao concluir as etapas propostas neste desafio voc ter desenvolvido as competncias e habilidades descritas a seguir. Compreende tecnologias relacionadas comunicao e processamento de dados e informaes. Abrange aes de concepo, desenvolvimento, implantao, operao, avaliao e manuteno de sistemas e tecnologias relacionadas informtica e telecomunicaes. 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.

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 tornou-se para as empresas um grande mercado, seja para divulgar sua marca ou para comercializar produtos e servios. O desafio proposto a elaborao de um estudo das ferramentas Web e desenvolvimento de um Site Institucional para uma academia de ginstica e musculao. Para a formao da equipe de desenvolvimento deve-se criar um grupo de at cinco alunos para troca de conhecimentos e experincias. Considere que a equipe foi contratada por um representante da academia representada pelo professor. No decorrer do desenvolvimento desta atividade dever ser entregue ao representante da academia os seguintes documentos: 1. Relatrio 1: Descrio de Tecnologias Web. 2. Relatrio 2: Descrio do Layout do Site. 3. Relatrio 3: Documentao do Site. 4. Arquivos da verso final do Site. O Site a ser desenvolvido deve conter as seguintes pginas: A histria da empresa. Institucional: Contendo misso, viso e valores. Localizao. Contato. Dicas de Exerccios. Dicas de Sade. 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:

Walter Gima

Tecnologia em Gesto da Tecnologia da Informao 2 Srie Ferramentas de Desenvolvimento para Web

Pg. 3 de 8

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 Serverside (do lado do servidor) para exibir seu contedo. A pgina de Dicas de Sade alm de exibir textos referentes s dicas de sade, tambm dever conter um formulrio para realizar o clculo de IMC (ndice de Massa Corporal) para que o usurio possa fazer uma avaliao de seu peso de forma online. Todos os documentos e relatrios que a equipe ir entregar para o representante da empresa (professor) devem seguir como padro de formatao a Norma Brasileira Regulamentador (NBR) 14724 da ABNT (Associao Brasileira de Normas Tcnicas).

ETAPA 1
Aula-tema: Conceitos de desenvolvimento Web e ferramentas, Introduo ao padro W3C. Esta atividade importante para que voc compreenda os principais conceitos de desenvolvimento Web, conhea algumas das principais linguagens e ferramentas para criao de pginas e entenda os fundamentos e conceitos de HTML (HyperText Markup Language). Para realiz-la, importante seguir os passos descritos.

PASSOS
Passo 1 (Aluno) Leia atentamente os captulos do livro texto ou complementar sobre os conceitos e tecnologias utilizadas para desenvolvimento de sistemas para Web para determinar quais recursos e linguagens e metodologias sero utilizadas para desenvolver o site da academia. Passo 2 (Aluno) Pesquise no portal da Wikipdia. Disponvel em: <http://pt.wikipedia.org/wiki/Pgina_dinmica>. Acesso em: 10 out. 2010. Pesquise sobre as principais diferenas entre criao de pginas estticas e pginas dinmicas e as tecnologias utilizadas por cada um desses conceitos. Passo 3 (Equipe) Crie uma tabela com base na pesquisa realizada no Passo 2 destacando no mnimo trs tecnologias para criao de pginas estticas e pginas dinmicas conforme modelo a seguir.

Walter Gima

Tecnologia em Gesto da Tecnologia da Informao 2 Srie Ferramentas de Desenvolvimento para Web

Pg. 4 de 8

Tabela 1: Modelo de tabela pginas estticas e dinmicas

Pginas Estticas

Pginas Dinmicas

Passo 4 (Equipe) Crie o Relatrio 1: Descrio de Tecnologias Web com base nas atividades desenvolvidas no Passo 1 desta etapa e com os requisitos do site descrito no desafio. Esse relatrio deve ser entregue ao representante (professor) descrevendo as tecnologias existentes para desenvolvimento Web e acrescente o quadro do Passo 3 desta etapa. No relatrio a equipe tambm deve classificar o site da academia como esttico ou dinmico e descrever as tecnologias que iro ser utilizadas para seu desenvolvimento.

ETAPA 2
Aula-tema: Programao HTML: conceitos e prtica. Apresentao de ferramentas para criao de pginas. Esta atividade importante para que voc conhea a estrutura dos arquivos HTML e a utilizao de suas principais Tags. Para realiz-la, importante seguir os passos descritos.

PASSOS
Passo 1 (Aluno) Leia no livro-texto ou na bibliografia complementar sobre os conceitos de HTML e construo de pginas atravs da utilizao de seus recursos. Procure coletar informaes sobre formato de codificao, uso e propriedades das Tags (ou etiquetas: elementos que so os comandos de formatao da linguagem HTML). Passo 2 (Equipe) Construa uma tabela baseada na atividade realizada no Passo 1 desta etapa, com no mnimo dez Tags descrevendo sua codificao e funcionalidade conforme modelo a seguir:
Tabela 2: Modelo de tabela Tags HTML

Tag HTML <img src=imagem.jpg /> <hr />

Funcionalidade Exibe imagens na pgina Cria uma linha horizontal.

Walter Gima

Tecnologia em Gesto da Tecnologia da Informao 2 Srie Ferramentas de Desenvolvimento para Web

Pg. 5 de 8

ETAPA 3
Aula-tema: Programao HTML: conceitos e prtica. Apresentao de ferramentas para criao de pginas. Programao HTML: criao de formulrios. Programao HTML: frames e imagens. Esta atividade importante para que voc entenda como realizada a criao de pginas Web atravs da HTML e como utilizar a ferramenta de desenvolvimento Microsoft FrontPage. Para realiz-la, importante seguir os passos descritos.

PASSOS
Passo 1 (Aluno) Pesquise na Internet sobre como construir pginas HTML utilizando a ferramenta de desenvolvimento de pginas Web com o Microsoft FrontPage. Passo 2 (Aluno) Conhea o site da Microsoft que traz um tutorial sobre o Front Page. Disponvel em: <http://office.microsoft.com/en-us/training/CR006183270.aspx>. Acesso em: 10 out. 2010. Neste site pode-se navegar pelos contedos do tutorial e conhecer informaes sobre HTML e a ferramenta Front Page. Passo 3 (Equipe) Desenvolva as pginas do site da academia utilizando como ferramenta de apoio o editor Microsoft FrontPage. As pginas devem seguir o diagrama a seguir:

Figura 1: Organizao do Site


Walter Gima

Tecnologia em Gesto da Tecnologia da Informao 2 Srie Ferramentas de Desenvolvimento para Web

Pg. 6 de 8

A equipe tem liberdade para desenvolver o layout das pginas do site, porm as pginas destacadas em negrito devem abordar as exigncias a seguir: A equipe vai definir os textos e imagens de todo o contedo do Site. Histria, Institucional e Contato: textos devem estar contidos pela Tag div (<div>texto</div). Contato: formulrio para envio de informaes contendo os campos: nome, cidade, idade, sexo, e-mail, observao, boto de envio e boto de limpar formulrio. Dicas de Exerccio: utilize tabelas e listas para organizar contedo (textos sobre dicas de exerccio). Dicas de Sade: utilize tabelas e listas para organizar contedo (textos sobre dicas de sade) e formulrio com os campos: nome, peso, altura, boto limpar formulrio e boto calcular IMC. Todas as pginas devem conter imagens. A pgina principal deve conter links para todas as outras pginas do Site. Passo 4 (Equipe) Elabore o Relatrio 2: Descrio do Layout do Site contendo as interfaces da primeira verso do site e entregue para o representante (Professor) fazer a avaliao e possveis alteraes.

ETAPA 4
Aula-tema: Introduo ao Java Script: conceitos, aplicaes e prtica. Java Script: variveis e tipos de dados. Java Script: comandos condicionais. Java Script: comandos de repetio. Esta atividade importante para que voc seja capaz de inserir cdigos utilizando a linguagem Java Script nas pginas Web, interagir com o usurio atravs dos recursos disponveis na linguagem Java Script e trabalhar com eventos de formulrio criados com HTML. Para realiz-la, importante seguir os passos descritos.

PASSOS
Passo 1 (Aluno) Leia no livro-texto ou na bibliografia complementar como utilizar a linguagem Java Script contemplando como trabalhar com variveis, realizar clculos e fazer chamadas de funes Java Script atravs de eventos dos componentes de formulrios HTML. Passo 2 (Equipe) Crie na pgina Contato um formulrio para envio de e-mail. Nessa pgina a equipe deve utilizar a linguagem Java Script para realizar as seguintes verificaes: Ao clicar no boto Enviar, uma funo Java script deve verificar se os campos obrigatrios Nome e E-mail esto preenchidos. Caso no estejam, dever ser

Walter Gima

Tecnologia em Gesto da Tecnologia da Informao 2 Srie Ferramentas de Desenvolvimento para Web

Pg. 7 de 8

exibida uma mensagem alertando o usurio para preenchimento dos campos obrigatrios (Nome e E-mail). O campo Nome deve conter no mnimo trs caracteres e, ao mudar o foco do campo Nome, uma funo Java Script deve verificar o nmero mnimo de caracteres. Caso seja menor que trs, alertar o usurio sobre preenchimento invlido e voltar o foco no campo Nome. No campo E-mail, ao mudar o foco, uma funo Java Script deve verificar se o formato do endereo de e-mail vlido. Em caso negativo, alertar o usurio sobre preenchimento invlido e voltar o foco no campo E-mail. Passo 3 (Equipe) Crie na pgina Dicas de Sade um formulrio onde o usurio ir informar seu nome, peso e altura. Nessa pgina a equipe deve utilizar comandos da linguagem Java Script para realizar as seguintes verificaes e clculos: O campo Nome deve conter no mnimo trs caracteres. Ao mudar o foco do campo Nome uma funo Java Script deve verificar o nmero mnimo de caracteres e caso o nmero seja menor que trs caracteres, alertar o usurio sobre o preenchimento invlido e voltar o foco no campo Nome. Os campos Peso e Altura devero ser obrigatrios. Ao clicar no boto Calcular, dever haver uma verificao antes de realizar o clculo do IMC. Caso os campos no estejam preenchidos o usurio deve ser alertado. Ao clicar no boto Calcular, uma funo Java Script ir realizar o clculo de IMC do usurio e exibir uma mensagem com o nome do usurio, resultado do clculo e sua classificao. O clculo do IMC descrito a seguir:

Onde massa est dimensionada em quilogramas e altura em metros. A classificao que indica o grau de obesidade do indivduo descrito na tabela a seguir:
Tabela 3: Classificao para indivduos adultos

IMC < 18,5 18,5 24,9 25,0 29,9 30,0 34,9 35,0 39,9 40,0

Classificao Magreza Saudvel Sobrepeso Obesidade Grau I Obesidade Grau II Obesidade Grau III

Fonte: Adapted from WHO, 1995, WHO, 2000 and WHO 2004.

Walter Gima

Tecnologia em Gesto da Tecnologia da Informao 2 Srie Ferramentas de Desenvolvimento para Web

Pg. 8 de 8

Passo 4 (Equipe) Elabore e entregue ao representante (Professor) o Relatrio 3: Documentao do Site contendo as interfaces do Site e descrevendo como foram realizadas as funcionalidades desenvolvidas nos Passos 2 e 3 desta etapa. Deve ser entregue tambm os arquivos da verso final do Site em mdia do tipo CD (Compact Disk) ou DVD (Digital Vdeo Disk).

Walter Gima