ATPS - Ferrametas Sistemas Web

(1)

S

UPERVISIONADAS

Sistemas de Informação

1

a

Série

Ferramentas para Sistemas Web

A atividade prática supervisionada (ATPS) é um método de ensino-aprendizagem 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 convivência e o trabalho em grupo.

 Desenvolver os estudos independentes, sistemáticos e o autoaprendizado.  Oferecer diferenciados ambientes de aprendizagem.

 Auxiliar no desenvolvimento das competências requeridas pelas Diretrizes Curriculares Nacionais dos Cursos de Graduação.

 Promover a aplicação da teoria e conceitos para a solução de problemas relativos à profissão.

 Direcionar o estudante para a emancipação 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 competências e habilidades requeridas na sua atuação no mercado de trabalho.

Aproveite esta oportunidade de estudar e aprender com desafios da vida profissional.

AUTORIA:

Thiago Salhab Alves

Faculdade Anhanguera de Santa Bárbara

(2)

COMPETÊNCIAS E HABILIDADES

Ao concluir as etapas propostas neste desafio, você terá desenvolvido as competências e habilidades descritas a seguir.

 Competência para identificar, analisar e documentar oportunidades, problemas e necessidades passíveis de solução via computação, e para empreender na concretização desta solução.

 Competência e compromisso com a utilização de princípios e ferramentas que otimizem o processo de desenvolvimento e implementação de um projeto e lhe confiram um alto grau de qualidade.

 Capacidade de abstração, representação, organização e viabilização de soluções de software para diferentes domínios de aplicação.

DESAFIO

O avanço das tecnologias de telecomunicações permitiu várias mudanças na concepção dos sistemas baseados na Internet. Com o custo de utilização da Internet cada vez menor proporcionando o aumento do número de usuários e conexões cada vez mais rápidas, a Internet tornou-se para as empresas um grande mercado, seja para divulgar sua marca ou para comercializar produtos e serviços.

O desafio proposto é a elaboração de um Site para divulgar os produtos de uma Loja de Informática, que trabalha com vendas de computadores, notebooks, acessórios, softwares, jogos, entre outros produtos. O Site será construído utilizando a linguagem HTML, CSS e a tecnologia Flash, devendo conter as seguintes páginas:

 História da Empresa.  Produtos.  Dicas e Curiosidades.  Localização  Contato  Página Principal

Para organizar a navegação do Site, deverá ser criado uma Página Principal seguindo conceitos de usabilidade e interface com os usuários, tendo também que atender os requisitos apresentados a seguir:

 Os cabeçalhos, rodapés e links para as demais páginas de todo o site devem seguir um padrão, sendo semelhantes em todas as páginas do site para facilitar a usabilidade do usuário ao acessar as páginas.

 As páginas não terão acesso a banco de dados e não utilizarão linguagens

Server-side (do lado do servidor) para exibir seu conteúdo. Não serão realizadas

(3)

Objetivo do desafio

Desenvolver um Site para uma Loja de Informática, utilizando as linguagem HTML, CSS e Flash.

Produção Acadêmica

 Relatório de Análise e Layout;  Relatório de Desenvolvimento;  Relatório CSS e JavaScript;  Relatório Flash.

Participação

Esta atividade será, em parte, desenvolvida individualmente pelo aluno e, em parte, pelo grupo. Para tanto, os alunos deverão:

 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 indicações: Aluno e Equipe.

Padronização

O material escrito solicitado nesta atividade deve ser produzido de acordo com as normas da ABNT1_{, com o seguinte padrão:}

 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;

 espaçamento de 1,5 entre linhas;

 se houver citações com mais de três linhas, devem ser em fonte tamanho 10, com

um recuo de 4cm da margem esquerda e espaçamento simples entre linhas;

 com capa, contendo:

 nome de sua Unidade de Ensino, Curso e Disciplina;  nome e RA de cada participante;

 título da atividade;

 nome do professor da disciplina;

 cidade e data da entrega, apresentação ou publicação.

ETAPA 1 (tempo para realização: 5 horas )

 Aula-tema: Introdução à Internet, Conexões, WWW, Hipertexto, URL e Site; HTML: Introdução à linguagem e principais recursos.

Esta atividade é importante para que você compreenda os principais conceitos de Internet, entenda os fundamentos e conceitos de HTML (HyperText Markup Language) e conheça alguns Sites de Lojas de Informática.

1_{Consulte o Manual para Elaboração de Trabalhos Acadêmicos. Unianhanguera. Disponível em:}

(4)

PASSOS

Passo 1 (Aluno)

Faça a leitura do artigo: Como Funciona a Internet. Disponível em: <https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B2k9x8w9Y2Jf ZjA1M2RjNTctZGJhMy00NGE1LTk0N2UtMWYwZWVjYmNkM2Nj&hl=en_US>. Acesso em: 30 out. 2011. Busque compreender o funcionamento da internet, protocolos e a rede de pacotes.

Passo 2 (Equipe)

Façam uma pesquisa de alguns Sites de Lojas de Informática verificando algumas disposições de layout, textos, animações, imagens, etc. Como sugestão, visite os links disponíveis no arquivo Lojas de Informática. Disponível em: <https://docs.google.com/document/d/1ieXIpFqSQEIZxxvqu3_eTZsrfZVjcDGUk7uUTBS8 lrg/edit?hl=en_US>. Acesso em: 30 out. 2011.

Façam a proposta do layout de seu Site, com base nos sites de lojas de Informática visitados, focando nas seguintes páginas:

 História da Empresa: página que deve conter o histórico da empresa;

 Produtos: lista de produtos, com fotos, descrição e preços;

 Dicas e Curiosidades: dicas, curiosidades e links relacionados a Hardware e Software;

 Localização: Endereço da Empresa e Mapa da Empresa;

 Contato: Campos para Contato, tais como, Nome, RG, CPF, Endereço Completo, Telefone, Celular, E-mail, Mensagem.

 Página Principal: Página Principal, com Menus e Banner Animado.

Utilizem, para a criação do layout do Site, o software MockingBird. Disponível em: <

https://docs.google.com/document/d/1H9J59kBO0u5Opc2Ac9_IW-wRJdOzMXEJ9Nhr830qB98/edit?hl=pt_BR>. Acesso em: 30 out. 2011. Façam a modelagem do layout site.

Façam o Relatório de Análise e Layout, que deve conter um resumo do artigo lido no passo 1, lista dos sites de lojas de Informática visitados e a modelagem do layout do site. Entreguem o relatório ao professor.

(5)

ETAPA 2 (tempo para realização: 5 horas)

 Aula-tema: HTML: formatação de textos, parágrafos, listas, links e imagens; HTML: tabelas, frames e formulários.

Esta atividade é importante para que você possa construir o site da Loja de Informática, utilizando os principais recursos de HTML, tais como, formatação de textos, parágrafos, listas, links, imagens, tabelas, frames e formulários.

PASSOS

Passo 1 (Aluno)

Faça a leitura do material: Construção de Páginas Web com Html e Scripts. Disponível em: <https://docs.google.com/a/aedu.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B _uLQd5hdqlWYzFkOGY3N2QtMjcwNy00MGExLTgzZjgtYzM1YjI5MTc1NDY0&hl=pt_BR>. Acesso em: 30 out. 2011. Procure verificar os principais recursos de HTML, tais como, formatação de textos, parágrafos, listas, links, imagens, tabelas, frames e formulários.

Iniciem a construção do site, criando em HTML, as páginas que foram modeladas com seus respectivos layouts. As páginas que devem ser criadas são:

 História da Empresa: página que deve conter o histórico da empresa;

 Produtos: lista de produtos, com fotos, descrição e preços;

 Dicas e Curiosidades: dicas, curiosidades e links relacionados a Hardware e Software;

 Localização: Endereço da Empresa e Mapa da Empresa;

 Contato: Campos para Contato;

 Página Principal: Página Principal do Site.

Façam a inserção dos seguintes recursos da HTML em suas páginas:

 História da Empresa: Imagem e Textos Formatados;

 Produtos: Imagens, Tabelas e Textos Formatados;

 Dicas e Curiosidades: Links e Textos Formatados;

 Localização: Imagem e Textos Formatados;

 Contato: Formulário;

 Página Principal: Imagem, Links e Textos Formatados.

Faça o Relatório de Desenvolvimento, que deve conter o código fonte de todas as páginas criadas em HTML e imagens referentes às páginas (printScreen das páginas criadas). Reúna todas as informações neste relatório e entregue ao professor.

(6)

ETAPA 3 (tempo para realização: 5 horas )

 Aula-tema: HTML: CSS formas de inserção na página; HTML: JavaScript.

Esta atividade é importante para que você possa aplicar os conceitos de CSS e JavaScript no projeto do site da Loja de Informática.

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

PASSOS

Realizem a leitura do material: Construção de Páginas Web com Html e Scripts. Disponível em:

<https://docs.google.com/a/aedu.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B _uLQd5hdqlWYzFkOGY3N2QtMjcwNy00MGExLTgzZjgtYzM1YjI5MTc1NDY0&hl=pt_BR>.

Acesso em: 30 set. 2011. Foquem a leitura nas seções que abordam CSS e JavaScript.

Definam folhas de estilo (CSS) embutidas para todas páginas do site da Loja de Informática. A folha de estilo deve contemplar as tags para cor, fonte, tamanho da fonte, etc.

Façam a validação do Formulário da página Contato utilizando JavaScript. Validem todos os campos, principalmente RG, CPF, Telefone, Celular e E-mail, garantindo que os dados inseridos são aceitáveis.

Façam o Relatório CSS e JavaScript, que deve conter o código fonte de todas as páginas criadas em HTML, apresentando as novas inserções de CSS e JavaScript. Reúnam todas as informações neste relatório e entregue ao professor.

ETAPA 4 (tempo para realização: 5 horas )

 Aula-tema: Flash: desenhos vetoriais; Flash: animação de movimento; Flash: animação clássica utilizando quadros chaves; Flash: animação de forma; Flash: ActionScripts.

Esta atividade é importante para que você possa aplicar os conceitos de Flash para a elaboração de animações que irão enriquecer e tornar mais atrativo o site da Loja de Informática

(7)

PASSOS

Passo 1 (Aluno)

Faça a leitura da apostila de Flash CS5. Disponível em: <https://docs.google.com/a/aedu.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B_uL

Qd5hdqlWOTVkOTI1NDAtMjM5Mi00MjJhLWI2MTItYTM3ZTcxY2VjNmUy&hl=pt_BR>.

Acesso em: 01 nov. 2011. Foquem a leitura nas técnicas de animação.

Incluam em cada página um banner animado criado através das técnicas de animação e utilizando ActionScript. O banner deve chamar a atenção do visitante da página.

Façam o Relatório Flash, que deve conter o código fonte de todas as páginas criadas em HTML, apresentando as novas inserções do Flash. Reúnam todas as informações neste relatório e entreguem ao professor.