Você está na página 1de 6

ANHANGUERA EDUCACIONAL S.A.

Faculdade Anhanguera de Anpolis Curso Superior de Tecnologia em Anlise e Desenvolvimento de Sistemas

Atividades praticas supervisionadas

Jonathas Teodoro Peixoto (1001798115) Mateus Fedrigo de Moura (1030921394) Wilson Pinto Jnior (1053035695)

Programao para web

Anpolis 2012-1

ETAPA 1 Aula tema: Acessibilidade e usabilidade na Web. Introduo ao Hipertexto. Linguagem HTML (HyperTextMarkupLanguage). Esta atividade importante para que voc explore o uso dos comandos HTML que soos responsveis por aproximadamente 90% da construo do website, baseandose em seusconceitos e estruturas de linguagem. Para realiz-la importante seguir os passos descritos. PASSOS Passo 1 Construa um cdigo HTML (HyperTextMarkupLanguage) de no mnimo 10 linhas em que apresente a estrutura bsica/principal dessa linguagem, como: tagsde identificao, formatao, insero de objetos, etc. Aps a construo, explique cada uma das linhas do cdigo criado. <!DOCTYPEhtml><!-- define que tipo de arquivo faremos neste codigo, no caso HTML-> <html><!-- primeira tag do arquivo que define tambm o tipo de dados que vamos trabalhar ou seja HTML--> <head><!-- cabealho da pgina, onde faremos vrias definies e chamadas externas--> <title>Editora H.Eureca</title><!-- titulo da aba do navegador--> <metahttp-equiv="Content-Type"content="text/html; charset=ISO-8859-1"><!-- define que sero aceitos carecteres ocidentais incluindo e acentos--> <linkrel="stylesheet"type="text/css"href="modelo.css"/><!-- aqui faremos a chamada ao arquivo css externo, para definir nosso layout--> </head> <body><!-- incio do corpo da pgina todo contedo que sera exibido no browser tem que ser colocado aqui--> <divid="todo"><!-- div uma diviso que podemos fazer na pgina, esse ser a div que guardara todas as outras divs--> <divid="logo"><!-- aqui colocaremos nossa logo--> <imgsrc="logo.png"><!--imagem de fundo para logo--> </div> <divid="menu"><!--nessa div colocaremos nossos menus--> <tableborder="0"><!--tabela que guardar os menus--> <tr> <td><button>Home</button></td><td><button>Categorias</button></td><td><button> Autor</button></td><td><button>Bibliografia</button></td><!--menus principais do site-> </tr> </table> <divid="conteudo_geral"><!--nessa divsera apresentado todo o conteudo da pgina principal--> </div> </div> </div> </body> </html>

Passo 2 Apresente um comparativo entre pgina esttica e pgina dinmica, em que descreva claramente seu funcionamento, implicaes, necessidade de uso. ESTTICA: FUNCIONAMENTO: apresentam sem movimento e sem funcionalidades mais alm dos links. IMPLICAES: no permite grandes manobras para criar efeitos nem funcionalidades mais alm dos links. NECESSIDADES DE USO: pginas onde no ser necessrios fazer a atualizao de contedos no futuro. DINMICA: FUNCIONAMENTO: quando se inclui qualquer efeito especial ou funcionalidade e para isso necessrio utilizar outras linguagens de programao, parte do simples HTML. IMPLICAES: pginas estticas todo mundo pode imagin-las e no merecem mais explicaes, as pginas dinmicas so mais complexas. NECESSIDADES DE USO: quando se tem a necessidade de um sistema WEB, ou seja um sistema que envolva atividades dinmicas que podem ser alteradas pelo prprio usurio. Passo 3 Construa uma tabela (HTML) com as seguintes caracterstica e descreva o que significa cadatag 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. <tableborder="1"> <tr><tdcolspan="4">clula mesclada em 4</td></tr><!--primeira linha>--> <tr><td>1 clula</td><td>2 clula</td><td>3 clula</td><td>4 clula</td></tr><!-segunda linha--> <tr><tdrowspan="2">1 clula ocupando <br/>duas linhas</td><td>2 clula</td><td>3 clula</td><td>4 clula</td></tr><!--terceira linha--> <tr><td>2 clula</td><td>3 clula</td><td>4 clula</td></tr><!--quarta linha--> </table> Passo 4 Construa um design de pgina utilizando-se do bloco de notas como editor, de forma comque inicie o desenvolvimento do layout de pgina do website solicitado.

body{ width:800px; height:900px; margin:0pxauto; background-color:lightcyan; } #todo{ width:800px; height:1200px; background-color:lightgoldenrodyellow; } iframe{ width:800px; height:900px; } #logoimg{ width:800px; height:68px;

} table{ margin:0pxauto;

} button{ padding:5px25px5px25px; font-family:cursive; font-size:larger; }

ETAPA 2 Aula tema: Linguagem HTML (HyperTextMarkupLanguage). Ambiente para programao HTML. Esta atividade importante para que voc entre em contato com a diversidade deambientes de programao HTML, reconhea os ambientes de programao HTMLdisponveis 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. NetBeans 7.1 DreanWeaver Note Pad Note Pad++ Visual Basic 2010

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. R: Utilizamos o NetBeans 7.1 com modulo de PHP instalado devido a grande facilidade em gerar cdigos no mesmo, alm da usabilidade, NetBeans utilizado em larga escala por desenvolvedores profissionais, no que diz respeito ao desenvolvimento de HTML e CSS o NetBeans da suporte com uma game de praticamente todos os comandos necessrios para o desenvolvimento de nossos cdigos. Passo 3 Explore os recursos da ferramenta escolhida e faa a comparao das vantagens edesvantagens com a codificao via editor de texto puro (bloco de notas). NetBeans: Vantagens o Melhor gerenciamento do seu projeto; o Suporte a PHP; o Ajuda (complementos de cdigos) o Ajuda (lista de comandos) o Debugador embutido Desvantagens o Vicia o programador com muitas ajudas; o Existem programas melhores para trabalhar o Layout. Editor de texto puro (bloco de notas): Vantagens o Bom para fixar aprendizado Desvantagens o No tem nenhuma ajuda de cdigos e/ou sintaxe ao programador; o No possui debugador. 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 documentao do cdigo-fonte desenvolvido e uma mdia digital comos arquivos para o teste de funcionamento.