ATIVIDADES PRTICAS SUPERVISIONADAS

Sistemas de Informao
5. Srie Programao e Design para Web
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 co-responsabilidade 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: Roberto da Silva Lobo

Faculdade Anhanguera de Osasco

Slvio Csar Roxo Giavaroto

Faculdade Anhanguera de Osasco

Sistemas de Informao 5 Srie Programao e Design para Web

Pg. 2 de 5

COMPETNCIAS E HABILIDADES
Ao concluir as etapas propostas neste desafio voc ter desenvolvido as competncias e habilidades descritas a seguir. Especificao de componentes ou equipamentos, suporte tcnico, procedimentos de instalao e configurao, realizao de testes e medies, utilizao de protocolos e arquitetura de redes, identificao de meios fsicos e padres de comunicao e, sobremaneira, a necessidade de constante atualizao tecnolgica.

DESAFIO
A Editora H.Eureca, representada pelo professor, especializada na distribuio de livros tcnicos, contratou sua equipe, composta por at 4 componentes, para construo de um website. A empresa necessita de um portal que apresente de forma simples e rpida um acervo de aproximadamente 100 livros, assim o website dever ser desenvolvido utilizando as linguagens HTML (HyperText Markup Language) e PHP (Hypertext Preprocessor) e tambm o conceito de Usabilidade as seguintes conformidades: Dever ser construdo um sistema de pesquisa onde os livros sejam apresentados por categorias. Exemplo: Programao, Hardware, Sistemas Operacionais, entre outras. Apresentar uma breve descrio de cada livro consultado (utilizar ttulo fictcio). O website dever funcionar corretamente nos navegadores mais populares, por exemplo, Microsoft Internet Explorer, Mozilla Firefox e Opera. A disposio do contedo dever ser organizada por meio do uso de tabelas e camadas. As imagens utilizadas no website devero ser otimizadas para carregamento rpido, sem que percam qualidade. O website dever possuir design limpo e ser de fcil navegao, conforme os conceitos de usabilidade.

ETAPA 1
Aula tema: Acessibilidade e usabilidade na Web. Introduo ao Hipertexto. Linguagem HTML (HyperText Markup Language). Esta atividade importante para que voc explore o uso dos comandos HTML que so os responsveis por aproximadamente 90% da construo do website, baseando-se em seus conceitos e estruturas de linguagem. Para realiz-la importante seguir os passos descritos.

PASSOS
Passo 1 Construa um cdigo HTML (HyperText Markup Language) de no mnimo 10 linhas em que apresente a estrutura bsica/principal dessa linguagem, como: Tags de identificao,
Roberto da Silva Lobo, Silvio Csar Roxo Giavaroto

Sistemas de Informao 5 Srie Programao e Design para Web

Pg. 3 de 5

formatao, insero de objetos, etc. Aps a construo, explique cada uma das linhas do cdigo criado. Passo 2 Apresente um comparativo entre pgina esttica e pgina dinmica, em que descreva claramente seu funcionamento, implicaes, necessidade de uso. Passo 3 Construa uma tabela (HTML) com as seguintes caracterstica e descreva o que significa cada Tag em cada linha: Na primeira linha deve conter apenas uma clula mesclada em quatro. Na segunda linha deve conter quatro clulas. Na terceira linha deve conter quatro clulas, sendo que a primeira tambm faz parte da quarta linha (mesclada). Na quarta linha deve conter trs clulas mais a clula mesclada da linha anterior, ou seja, quatro clulas. Passo 4 Construa um design de pgina utilizando-se do bloco de notas como editor, de forma com que inicie o desenvolvimento do layout de pgina do website solicitado. Passo 5 Entregue ao cliente a documentao do cdigo-fonte desenvolvido para sua apreciao.

ETAPA 2
Aula tema: Linguagem HTML (Hypertext Markup Language). Ambiente para programao HTML. Esta atividade importante para que voc entre em contato com a diversidade de ambientes de programao HTML, reconhea os ambientes de programao HTML disponveis e inicie o desenvolvimento de seu website. Para realiz-la importante seguir os passos descritos.

PASSOS
Passo 1 Liste os cinco principais e/ou mais usados ambientes de programao HTML disponveis, incluindo uma breve descrio de cada um deles. Passo 2 Selecione, dentre os ambientes listados no passo anterior, o que a equipe pretende utilizar no desenvolvimento de seu website. Justifique a escolha da equipe com base nos conceitos da linguagem HTML.
Roberto da Silva Lobo, Silvio Csar Roxo Giavaroto

Sistemas de Informao 5 Srie Programao e Design para Web

Pg. 4 de 5

Passo 3 Explore os recursos da ferramenta escolhida e faa a comparao das vantagens e desvantagens com a codificao via editor de texto puro (bloco de notas). Passo 4 Codifique o website no ambiente escolhido utilizando a linguagem HTML, seguindo os prrequisitos solicitados pelo cliente no enunciado do desafio. Passo 5 Entregue ao cliente a documentao do cdigo-fonte desenvolvido e uma mdia digital com os arquivos para o teste de funcionamento.

ETAPA 3
Aula tema: Linguagem de Programao PHP. Esta atividade importante para que voc compreenda a linguagem PHP (Hypertext Preprocessor) em suas caractersticas, funcionalidades e aplicaes, alm da incorporao linguagem HTML. Para realiz-la importante seguir os passos descritos.

PASSOS
Passo 1 Cite 5 fatores importantes, no ponto de vista de codificao e funcionamento, que diferenciam o PHP do HTML. Justifique sua resposta explicando e/ou exemplificando cada um deles. Passo 2 Identifique os comandos em PHP (Hypertext Preprocessor) que permitem a incorporao da linguagem HTML em seu cdigo-fonte PHP. Construa um cdigo-fonte que faa a incorporao das Tags HTML de Imagem e formulrio no website que est desenvolvendo. Passo 3 Cite quais as formas de realizar uma conexo ao banco de dados em PHP. Construa um cdigo-fonte em que demonstre essas formas e descreva seu funcionamento. Passo 4 Adicione ao seu website a linguagem PHP, de forma que as pginas j desenvolvidas nas etapas anteriores faam uso de conexo Banco de Dados e se tornem dinmicas. Por exemplo, listagem de produtos/categorias.

Roberto da Silva Lobo, Silvio Csar Roxo Giavaroto

Sistemas de Informao 5 Srie Programao e Design para Web

Pg. 5 de 5

Passo 5 Entregue ao cliente a documentao do cdigo-fonte (etapas/passos anteriores) desenvolvidos e uma mdia digital com os arquivos para o teste de funcionamento.

ETAPA 4
Aula tema: Conceitos de Usabilidade e Usabilidade para Web. Planejamento de sites. Esta atividade importante para que voc aplique os conceitos de Usabilidade e Usabilidade para web na melhoria/correo de segurana ou por solicitao em um website, tornando a navegao mais fcil e agradvel. Para realiz-la importante seguir os passos descritos.

PASSOS
Passo 1 Diferencie Usabilidade e Usabilidade para Web. D 5 exemplos de recursos ou funcionalidades que so encontrados em design de aplicaes Web que no so encontrados nas demais. Passo 2 Analise o funcionamento de seu website e descreva, baseando-se nos conceitos de Usabilidade e Usabilidade para Web, as deficincias e eficincias, as vantagens e desvantagens encontradas em seu website. Justifique as colocaes apresentando solues para correo. Passo 3 Apresente, em um pargrafo, um breve relato avaliando como um todo o design e funcionamento do website desenvolvido pela equipe. Passo 4 Reformule o website desenvolvido baseando-se nos conhecimentos de usabilidade. Passo 5 Apresente a documentao dos passos anteriores em um relatrio, segundo normas ABNT para trabalhos acadmicos, e entregue-o ao cliente para aprovao do website proposto.

Roberto da Silva Lobo, Silvio Csar Roxo Giavaroto