2011 1 Sistemas de Informacao 5 Programacao e Design Para Web 1

5/10/2018 2011 1 Sistemas de Informacao 5 Programacao e Design Para Web 1 - slidepdf.com

http://slidepdf.com/reader/full/2011-1-sistemas-de-informacao-5-programacao-e-design-para-

ATIVIDADES PRÁTICASSUPERVISIONADAS

Sistemas de Informação5ª. Série Programação e Design para 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 co-responsabilidade 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 DiretrizesCurriculares 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:

Roberto da Silva LoboFaculdade Anhanguera de Osasco

Sílvio César Roxo Giavaroto

Faculdade Anhanguera de Osasco



Sistemas de Informação – 5ª Série – Programação e Design para Web

Roberto da Silva Lobo, Silvio César Roxo Giavaroto

Pág. 2 de 5

COMPETÊNCIAS E HABILIDADES

Ao concluir as etapas propostas neste desafio você terá desenvolvido as competênciase habilidades descritas a seguir. Especificação de componentes ou equipamentos, suporte técnico, procedimentos de

instalação e configuração, realização de testes e medições, utilização de protocolos earquitetura de redes, identificação de meios físicos e padrões de comunicação e,sobremaneira, a necessidade de constante atualização tecnológica.

DESAFIO

A Editora H.Eureca, representada pelo professor, especializada na distribuição delivros técnicos, contratou sua equipe, composta por até 4 componentes, para construção deum website. A empresa necessita de um portal que apresente de forma simples e rápida um

acervo de aproximadamente 100 livros, assim o website deverá ser desenvolvido utilizando aslinguagens HTML (HyperText Markup Language) e PHP (Hypertext Preprocessor ) e também oconceito de Usabilidade as seguintes conformidades:

- Deverá ser construído um sistema de pesquisa onde os livros sejam apresentadospor categorias. Exemplo: Programação, Hardware, Sistemas Operacionais, entreoutras.

- Apresentar uma breve descrição de cada livro consultado (utilizar título fictício).- O website deverá funcionar corretamente nos navegadores mais populares, por

exemplo, Microsoft Internet Explorer, Mozilla Firefox e Opera.- A disposição do conteúdo deverá ser organizada por meio do uso de tabelas e

camadas.- As imagens utilizadas no website deverão ser otimizadas para carregamento rápido,

sem que percam qualidade.- O website deverá possuir design limpo e ser de fácil navegação, conforme os

conceitos de usabilidade.

ETAPA № 1

Aula tema: Acessibilidade e usabilidade na Web. Introdução ao Hipertexto.Linguagem HTML ( HyperText Markup Language).

Esta atividade é importante para que você explore o uso dos comandos HTML que sãoos responsáveis por aproximadamente 90% da construção do website, baseando-se em seusconceitos e estruturas de linguagem.

Para realizá-la é importante seguir os passos descritos.

PASSOS

Passo 1Construa um código HTML (HyperText Markup Language) de no mínimo 10 linhas em queapresente a estrutura básica/principal dessa linguagem, como: Tags de identificação,





Pág. 3 de 5

formatação, inserção de objetos, etc. Após a construção, explique cada uma das linhas docódigo criado.

Passo 2

Apresente um comparativo entre página estática e página dinâmica, em que descrevaclaramente seu funcionamento, implicações, necessidade de uso.

Passo 3

Construa uma tabela (HTML) com as seguintes característica e descreva o que significa cadaTag em cada linha:

- Na primeira linha deve conter apenas uma célula mesclada em quatro.- Na segunda linha deve conter quatro células.- Na terceira linha deve conter quatro células, sendo que a primeira também faz

parte da quarta linha (mesclada).

- Na quarta linha deve conter três células mais a célula mesclada da linha anterior,ou seja, quatro células.

Passo 4

Construa um design de página utilizando-se do bloco de notas como editor, de forma comque inicie o desenvolvimento do layout de página do website solicitado.

Passo 5

Entregue ao cliente a documentação do código-fonte desenvolvido para sua apreciação.

ETAPA № 2

Aula tema: Linguagem HTML ( Hypertext Markup Language). Ambiente paraprogramação HTML.

Esta atividade é importante para que você entre em contato com a diversidade deambientes de programação HTML, reconheça os ambientes de programação HTMLdisponíveis e inicie o desenvolvimento de seu website.


PASSOS

Passo 1

Liste os cinco principais e/ou mais usados ambientes de programação HTML disponíveis,incluindo uma breve descrição de cada um deles.

Passo 2

Selecione, dentre os ambientes listados no passo anterior, o que a equipe pretende utilizar nodesenvolvimento de seu website. Justifique a escolha da equipe com base nos conceitos dalinguagem HTML.





Pág. 4 de 5

Passo 3

Explore os recursos da ferramenta escolhida e faça a comparação das vantagens edesvantagens com a codificação via editor de texto puro (bloco de notas).Passo 4

Codifique o website no ambiente escolhido utilizando a linguagem HTML, seguindo os pré-requisitos solicitados pelo cliente no enunciado do desafio.

Passo 5

Entregue ao cliente a documentação do código-fonte desenvolvido e uma mídia digital comos arquivos para o teste de funcionamento.

ETAPA № 3

Aula tema: Linguagem de Programação PHP.

Esta atividade é importante para que você compreenda a linguagem PHP (HypertextPreprocessor ) em suas características, funcionalidades e aplicações, além da incorporação àlinguagem HTML.


PASSOS

Passo 1

Cite 5 fatores importantes, no ponto de vista de codificação e funcionamento, quediferenciam o PHP do HTML. Justifique sua resposta explicando e/ou exemplificando cadaum deles.

Passo 2

Identifique os comandos em PHP (Hypertext Preprocessor ) que permitem a incorporação dalinguagem HTML em seu código-fonte PHP. Construa um código-fonte que faça aincorporação das Tags HTML de Imagem e formulário no website que está desenvolvendo.

Passo 3

Cite quais as formas de realizar uma conexão ao banco de dados em PHP. Construa umcódigo-fonte em que demonstre essas formas e descreva seu funcionamento.

Passo 4

Adicione ao seu website a linguagem PHP, de forma que as páginas já desenvolvidas nasetapas anteriores façam uso de conexão à Banco de Dados e se tornem dinâmicas. Porexemplo, listagem de produtos/categorias.





Pág. 5 de 5

Passo 5

Entregue ao cliente a documentação do código-fonte (etapas/passos anteriores)desenvolvidos e uma mídia digital com os arquivos para o teste de funcionamento.

ETAPA № 4

Aula tema: Conceitos de Usabilidade e Usabilidade para Web. Planejamento desites.

Esta atividade é importante para que você aplique os conceitos de Usabilidade eUsabilidade para web na melhoria/correção de segurança ou por solicitação em um website,tornando a navegação mais fácil e agradável.


PASSOS

Passo 1

Diferencie Usabilidade e Usabilidade para Web. Dê 5 exemplos de recursos oufuncionalidades que são encontrados em design de aplicações Web que não são encontradosnas demais.

Passo 2

Analise o funcionamento de seu website e descreva, baseando-se nos conceitos de Usabilidadee Usabilidade para Web, as deficiências e eficiências, as vantagens e desvantagensencontradas em seu website. Justifique as colocações apresentando soluções para correção.

Passo 3

Apresente, em um parágrafo, um breve relato avaliando como um todo o design efuncionamento do website desenvolvido pela equipe.

Passo 4

Reformule o website desenvolvido baseando-se nos conhecimentos de usabilidade.

Passo 5

Apresente a documentação dos passos anteriores em um relatório, segundo normas ABNTpara trabalhos acadêmicos, e entregue-o ao cliente para aprovação do website proposto.

Documents

2011 1 Sistemas de Informacao 5 Programacao e Design Para Web 1