ATIVIDADES PRTICAS SUPERVISIONADAS

1a Srie Ferramentas para Sistemas Web

Sistemas de Informao

A atividade prtica supervisionada (ATPS) um procedimento metodolgico de ensino-aprendizagem desenvolvido por meio de um conjunto de etapas 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 diferentes 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 prticos relativos profisso. Direcionar o estudante para a busca do raciocnio crtico e a emancipao intelectual. Para atingir estes objetivos a ATPS prope um desafio e indica os passos a serem percorridos ao longo do semestre para a sua soluo. A sua participao nesta proposta essencial para que adquira as competncias e habilidades requeridas na sua atuao profissional. Aproveite esta oportunidade de estudar e aprender com desafios da vida profissional.

AUTORIA: Thiago Salhab Alves

Faculdade Anhanguera de Santa Brbara

Sistemas de Informao - 1a 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. Competncia para identificar, analisar e documentar oportunidades, problemas e necessidades passveis de soluo via computao, e para empreender na concretizao desta soluo. Competncia e compromisso com a utilizao de princpios e ferramentas que otimizem o processo de desenvolvimento e implementao de um projeto e lhe confiram um alto grau de qualidade. Capacidade de abstrao, representao, organizao e viabilizao de solues de software para diferentes domnios de aplicao.

Produo Acadmica

Relatrio de Anlise e Layout; Relatrio de Desenvolvimento; Relatrio CSS e JavaScript; 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.

Padronizao
O material escrito solicitado nesta atividade deve ser produzido de acordo com as normas da ABNT1, com o seguinte padro: 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.

Consulte o Manual para Elaborao de Trabalhos Acadmicos. Unianhanguera. Disponvel em: <http://www.unianhanguera.edu.br/anhanguera/bibliotecas/normas_bibliograficas/index.html>.

Thiago Salhab Alves

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

Pg. 3 de 7

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 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 seguintes pginas: 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
Desenvolver um Site para uma Loja de Informtica, utilizando as linguagem HTML, CSS e Flash.

ETAPA 1 (tempo para realizao: 5 horas )

Aula-tema: Introduo Internet, Conexes, WWW, Hipertexto, URL e Site; HTML: Introduo 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 conhea alguns Sites de Lojas de Informtica.

Thiago Salhab Alves

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

Pg. 4 de 7

PASSOS
Passo 1 (Aluno) 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 out. 2011. Buscar compreender o funcionamento da internet, protocolos e a rede de pacotes. 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 out. 2011. Passo 3 (Equipe) 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.

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 out. 2011. 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.

Thiago Salhab Alves

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

Pg. 5 de 7

ETAPA 2 (tempo para realizao: 5 horas)

Aula-tema: HTML: formatao de textos, pargrafos, listas, links e imagens; HTML: tabelas, frames e formulrios. 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 (Aluno) 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>. Acesso em: 30 out. 2011. 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: 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.

Thiago Salhab Alves

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

Pg. 6 de 7

ETAPA 3 (tempo para realizao: 5 horas )

Aula-tema: HTML: CSS formas de insero na pgina; HTML: JavaScript. 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 set. 2011. Focar a leitura nas sees que abordam CSS e JavaScript. 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, etc. 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: Flash: desenhos vetoriais; Flash: animao de movimento; Flash: animao clssica utilizando quadros chaves; Flash: animao de forma; Flash: ActionScripts. 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.

Thiago Salhab Alves

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

Pg. 7 de 7

PASSOS
Passo 1 (Aluno) 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: 01 nov. 2011. 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.

Livro Texto da Disciplina

SAMY SILVA, Mauricio. HTML5 - A linguagem de marcao que revolucionou a web . 1 ed. So Paulo: Novatec, 2011.

Thiago Salhab Alves