Kroton Universidade Anhanguera de So Paulo

Tecnologia em redes de computadores

5 Semestre

Campus Osasco - SP
2015

Kroton Universidade Anhanguera de So Paulo

Tecnologia de redes de computadores

Alexsandro Godoi Pereira RA 9977018965

Lucas dos Santos Galdino RA 7633741477
Stefani Rodrigues Igncio Da Silva RA 762658204
Willian Gonalves dos Santos RA 9977018975

Programao Para Ambientes De Redes: ATPS etapa 1 e 2

Trabalho desenvolvido para disciplina de:

Programao Para Ambientes De Redes de
etapa 1 e 2 da ATPS apresentado a Kroton
Universidade Anhanguera de So Paulo,
sob a orientao do professor: Silvio Cesar
Roxo

CAMPUS OSASCO SP
2015

Lista de Figuras
FIGURA 1: CDIGO HTML GERADO NO BLOCO DE NOTAS. FONTE PRPRIA ........................ 6
FIGURA 2: PAGINA RESULTADO DO CDIGO HTML. FONTE PRPRIA .................................. 7
FIGURA 3: CDIGO FONTE GERADO NO NAVEGADOR. FONTE PRPRIA ............................... 7
FIGURA 4: CDIGO PARA CRIAO DE TABELAS HTML. FONTE PRPRIA ............................ 9
FIGURA 5: RESULTADO DO CODIGO CRIANDO TABELAS. FONTE PRPRIA .......................... 10
FIGURA 6: CDIGO FONTE GERADO NO NAVEGADOR. FONTE PRPRIA ............................. 10
FIGURA 7: CDIGO DO WEBSITE GERADO UTILIZANDO O BLOCO DE NOTAS COMO EDITOR.
FONTE PRPRIA .................................................................................................... 11
FIGURA 8: PAGINA PRINCIPAL DO WEBSITE. FONTE PRPRIA ........................................... 12
FIGURA 9: PAGINA DE NAVEGAO DO WEBSITE. FONTE PRPRIA.................................... 12
FIGURA 10:CODIGO FONTE GERADO NAVEGADOR. FONTE PRPRIA ................................. 13
FIGURA 11: INTERFACE GRFICA DO KOMPOZER. FONTE PRPRIA. .................................. 16
FIGURA 12: LAYOUT PAGINA BOAS VINDAS DO W EBSITE. FONTE PRPRIA. ........................ 17
FIGURA 13: CDIGO FONTE PAGINA DE BOAS VINDAS. FONTE PRPRIA. ........................... 18
FIGURA 14: LAYOUT PAGINA PRINCIPAL DO W EBSITE> FONTE PRPRIA. ........................... 18
FIGURA 15: CDIGO FONTE PAGINA PRINCIPAL. FONTE PRPRIA. ..................................... 19
FIGURA 16: LAYOUT PAGINA DE LOCALIZAO DA EMPRESA. FONTE PRPRIA. .................. 20
FIGURA 17: CDIGO FONTE PAGINA DE LOCALIZAO. FONTE PRPRIA. ........................... 20
FIGURA 18: LAYOUT PAGINA GALERIA DE AUTOMVEIS. FONTE PRPRIA. .......................... 21
FIGURA 19: CDIGO FONTE PAGINA GALERIA DE AUTOMVEIS. FONTE PRPRIA. ............... 21

Lista de Tabelas
TABELA 1: COMPARATIVO ENTRE KOMPOZER E BLOCO DE NOTAS. FONTE PRPRIA. ......... 17

Sumrio
Desafio ........................................................................................................................ 4
Introduo ................................................................................................................... 5
1.

Introduo ao ambiente Web. A linguagem HTML............................................... 6

1.1

Construindo cdigo HTML .............................................................................. 6

1.2

Comparativo entre pagina web dinmica e esttica ....................................... 8

1.2.1

Paginas Web estticas ............................................................................ 8

1.2.2

Paginas Web Dinmicas .......................................................................... 8

1.3

Construindo tabelas HTML............................................................................. 9

1.3.1
1.4
2.

Descrio da tags utilizadas na criao da tabela HTML ...................... 10

Formao de layout do site .......................................................................... 11

Ferramentas para programao em HTML. Desenvolvimento de pginas Web 14

2.1

Os cinco principais e/ou mais utilizados ambientes de programao HTML 14

2.1.1

Bloco de notas (Windows) ..................................................................... 14

2.1.2

Adobe Dreamweaver ............................................................................. 14

2.1.3

WYSIWYG Web Builder ........................................................................ 15

2.1.4

Notepad++ ............................................................................................. 15

2.1.5

KompoZer .............................................................................................. 15

2.2

Escolha da ferramenta de criao do Website ............................................. 16

2.3

Comparativo entre a ferramenta KompoZer e o editor de texto puro ........... 17

2.4

Proposta de Website .................................................................................... 17

Concluso ................................................................................................................. 22
Referncias Bibliogrficas ......................................................................................... 23

Desafio
A agncia de automveis Mustk100 Ltda., representada pelo professor,
contratou sua equipe para desenvolver seu website. A equipe dever desenvolver
um website utilizando como ferramenta de desenvolvimento, o bloco de notas e/ou
outra ferramenta de desenvolvimento web disponvel no laboratrio de informtica
utilizando as linguagens HTML (Hypertext Markup Language) e PHP (Hypertext
Preprocessor). O website dever ser construdo nas seguintes conformidades:

O layout dever ocupar 80% da tela e conter os links empresa, galeria de

automveis, localizao e fale conosco.

O site dever funcionar corretamente nos navegadores mais populares, por

exemplo, Microsoft Internet Explorer, Mozilla Firefox e Opera.

A disposio do contedo dever ser organizada utilizando tabelas e

camadas.

As imagens utilizadas no website devem ser otimizadas para carregamento

rpido, porm, no devero perder a qualidade.

O site dever possuir design limpo e ser de fcil navegabilidade conforme os

conceitos de usabilidade.

Introduo
Nesta Atividade Pratica Supervisionada, vamos colocar em pratica os
conhecimentos obtidos na disciplina de Programao Para Ambientes de Redes,
onde ser elaborado um web site conforme com o uso da linguagem de marcao
HTML (Hypertext Markup Language).
Este documento exibir os resultados do desenvolvimento das etapas um e dois
da ATPS, sendo que na primeira ser apresentada uma introduo com o conceito
bsico para a produo de um script HTML, e a segunda mostrar ferramentas e
recursos disponveis na linguagem de marcao HTML.

1. Introduo ao ambiente Web. A linguagem HTML.

Em um primeiro contato com a linguagem de marcao HTML, foram
explorados o uso dos comandos que compe os um arquivo HTML. Nos passos a
seguir sero apresentados os scripts gerados utilizando a estrutura de comandos
HTML.
1.1 Construindo cdigo HTML
A principio o cdigo ser gerado um cdigo contendo pouco mais de 10 linhas
formando estrutura bsica utilizando bloco de notas gerando um arquivo xxx.html,
essa estrutura ir conter a funo e a identificao das tags, formatao e insero
de Objetos.

Figura 1: Cdigo HTML gerado no bloco de notas. Fonte Prpria

A seguir o resultado do cdigo HTML com a criao da pagina aberta no

navegador:

Figura 2: Pagina resultado do cdigo HTML. Fonte Prpria

No navegador tambm podemos obter o cdigo fonte da pagina onde se nota

que os comentrios ficaram ocultos.

Figura 3: Cdigo fonte gerado no navegador. Fonte Prpria

1.2 Comparativo entre pagina web dinmica e esttica

Esta etapa tem como objetivo como objetivo elaborar um comparativo entre os
tipos de pagina web. Existem dois tipos de paginas web pagina dinmica e pagina
esttica.
1.2.1 Paginas Web estticas
As paginas estticas da Web tm como objetivo principal apresentar as
informaes de forma permanente e so criadas usando HTML, onde os efeitos e as
funcionalidades so restritos, porm possui recursos que oferecem bom resultados,
assim podem se assemelhar a paginas dinmicas. Uma caracterstica da pagina
esttica que o script pode ser interpretado no host cliente.
Se o objetivo for somente fornecer informaes sobre a empresa como,
localizao, produtos e servios oferecidos a seus clientes, este tipo de pagina
ideal.
A principal vantagem que este tipo de pode oferecer um design elegante contendo
imagens e texto custo pode ser mais baixo que o de uma pagina dinmica.
1.2.2 Paginas Web Dinmicas
As paginas web dinmicas so construdas atravs de linguagem de outras
linguagens de programao como o PHP que a linguagem mais utilizada, nesse
tipo de pagina pode-se desenvolver aplicaes dentro da Web permitindo assim uma
maior interatividade do usurio. Ao contrario das paginas estticas os scripts so
mais complexos e exigem um maior conhecimento e no so interpretados nos
clientes e sim no servidor.
Com paginas dinmicas possvel criar aplicaes web dinmicas como inquritos
e sondagens, fruns de suporte, livros de visitas, envio de e-mails produtos de
backup inteligente, pedidos online, atendimento personalizado, entre outros.
A principal vantagem oferecer possibilidades infinitas de criao, desde uma
simples pagina informativa a uma poderosa ferramenta de trabalho na web.

1.3

Construindo tabelas HTML

Nesta etapa ser criada uma tabela HTML descrevendo o significado de cada
tag, seguindo os pr-requisitos propostos na ATPS.

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.

Figura 4: Cdigo para criao de tabelas HTML. Fonte Prpria

10

A seguir o resultado do cdigo para criao de tabela HTML com a criao da

pagina aberta no navegador:

Figura 5: Resultado do codigo criando tabelas. Fonte Prpria

Codigo fonte da pagina criando tabelas HTML gerado no navegador

Figura 6: Cdigo fonte gerado no navegador. Fonte Prpria

1.3.1 Descrio da tags utilizadas na criao da tabela HTML

Alm das tags j utilizadas e comentadas anteriormente, aqui sero descritas
a funo das tags utilizadas na criao da tabela HTML:

<table> </table>: Essa Tag importante para determinar ao navegador que o

cdigo entre ele uma tabela;

<tr> </tr>: Define o cdigo para linhas;

<td> </td>:Define o cdigo para colunas;

<table border= 1>: Define o tamanho da borda da tabela;

<table width= 600> : Define a largura da tabela;

11

1.4

<td align= center: Define que o texto digitado aparea centralizado na clula;

<td Rowspan= 2>: Define quantas linhas de clula sero mescladas;

<td colspan= 4>: Define quantas colunas de clula sero mescladas.

Formao de layout do site
Nesta etapa ser apresentado o layout do website proposto com a criao do

cdigo fonte no bloco de notas.

Figura 7: Cdigo do Website gerado utilizando o bloco de notas como editor. Fonte Prpria

12

Pagina principal do Website a partir do cdigo acima.

Figura 8: Pagina principal do website. Fonte Prpria

Figura 9: Pagina de navegao do website. Fonte Prpria

13

O site gerou o seguinte cdigo fonte no navegador.

Figura 10:Codigo fonte gerado navegador. Fonte Prpria

14

2.

Ferramentas para programao em HTML. Desenvolvimento de pginas

Web
Nesta atividade entramos em contato com a diversidade de ferramentas para
a programao HTML, com isso ser possvel explorar os recursos de cada
ferramenta.
2.1

Os cinco principais e/ou mais utilizados ambientes de programao

HTML
Para elaborar um website necessrio criarmos um cdigo fonte, seja ele em
linguagem HTML ou no, como vimos anteriormente. E para criar esse cdigo fonte
necessrio que tenhamos um editor para que o arquivo a HTML seja produzido,
agora ser mostrado algumas ferramentas que podem ajudar no desenvolvimento
de ambientes HTML.
2.1.1 Bloco de notas (Windows)
O bloco de notas (Windows Notepad) pode ser considerado a ferramenta
mais simples para criao de arquivos HTML. O uso mais comum do bloco de notas
a criao de notas com apresentao de texto puro, com formatao bsica e
exibindo e editando arquivos do tipo .txt. Isso muito til na gerao de arquivos
HTML, pois, os caracteres especiais ou outra formatao no podem aparecer na
pgina da Web publicada, pois podem causar erros.
Com o bloco de notas do Windows pode-se salvar com os formatos de
codificao Unicode, ANSI, UTF-8 ou Unicode big endian. Esses formatos oferecem
maior flexibilidade quando se trabalha com documentos que utilizam diferentes
conjuntos de caracteres.
Existem outros editores de formatao simples como o bloco de notas como o
Gedit (Linux) ou text-edit, (Mac OS X) esses so de grande utilidade quando no
possumos uma interface grfica para edio de cdigo.
2.1.2 Adobe Dreamweaver
O Dreamweaver uma das ferramentas mais utilizadas para a criao de
paginas Web. Essa ferramenta pode se adaptar a qualquer tipo de necessidade,
sendo de fcil assimilao para o uso de iniciantes ou para uso profissional.

15

O Dreamweaver foi desenvolvido pela Macromedia e foi comprado pela

Adobe, onde passou por algumas melhorias, como suporte e associao a diversos
programas Adobe, como modelos de vdeo utilizando o Adobe Flash e Photoshop. O
Dreamweaver suporta diversos tipos de linguagens entre as principais esto, HTML,
PHP, ColdFusion, ASP, CSS, JavaScript, XML.
2.1.3 WYSIWYG Web Builder
O WYSIWYG Web Builder o programa mais simples para a criao de
paginas web, pois, usa o "What-You-See-Is-What-You-Get". Ou seja, "O que voc v
o que obtm" isso significa que toda a criao do website e feita na tela de forma
totalmente grfica onde basta apenas escolher o elemento no lado esquerdo da tela
e arrastar para a pagina, esse programa indicado para usurios comuns sem
experincia alguma com programao web. Apesar das facilidades o possui sadas
para HTML4, HTML5, XHTML, CSS3, PHP.
2.1.4 Notepad++
O Notepad++ possui licena GPL General Public License (Licena Pblica
Geral) que uma designao de software livre. O Notepad++ um programa
semelhante ao bloco de notas, porm com recursos que reconhecem de maneira
automtica o tipo de linguagem de programao que ser usado basta ser prdefinido no menu de linguagem C++, Java, C#, XML, HTML, PHP, Java, ASP ou
vrias outras.
Na linguagem HTML o Notepad++ reconhece as tags que esto sendo
usadas em sua pgina. Alm disso, ele tem indentao de texto com esse recurso
pode-se construir o cdigo de forma mais organizada.
2.1.5 KompoZer
O kompozer um programa que procura trazer as funcionalidades bsicas
para que se possa criar e editar arquivos HTML em um software gratuito. O
KompoZer projetado para ser extremamente fcil de usar, tornando-o ideal para
usurios de computador no-tcnicos que querem criar um atraente web site, com
aparncia profissional sem precisar saber HTML ou codificao da web, pois utiliza o
WYSIWYG (edio simples e prtica, para iniciantes).

16

O editor extremamente inteligente, pois tem cdigos indentados (como o

Notepad++). Ele tambm automtico e muito organizado como no Dreamweaver,
eu possui Trs opes normal, (para iniciantes) HTML Tags (para intermedirios) e
Source para usurios que possuem conhecimento do codigo HTML.
2.2

Escolha da ferramenta de criao do Website

Para o desenvolvimento do Website o grupo optou pela ferramenta de criao

e edio HTML o KompoZer devido as caractersticas mencionadas acima e por ser

um software gratuito e muito pratico para o desenvolvimento de paginas Web. Os
motivos da escolha esto ligados no somente a praticidade da ferramenta, mas
tambm pela flexibilidade que ela oferece, onde podemos no s alterar o design de
forma automtica, mas tambm o cdigo fonte que com esses recursos embutidos
na prpria ferramenta.

Figura 11: Interface grfica do KompoZer. Fonte prpria.

17

2.3

Comparativo entre a ferramenta KompoZer e o editor de texto puro

Fazendo fazer um comparativo entre a ferramenta de edio KompoZer e o

editor de texto puro o Bloco de notas criamos a seguinte tabela abaixo:

Caractersticas
Criao e edio de arquivos HTML
Abertura e fechamento de tags
Menus de ferramentas
Insero de tags
Indentao
Insero de Tabelas, Imagens, Formulrios e
Links.
Organizao

KompoZer

Bloco d e Notas

Sim

Sim

Automtico

Manual

Sim

No

Automtico

Manual

Sim

No

Automtico
Sim

Manual
No

Tabela 1: Comparativo entre KompoZer e Bloco de Notas. Fonte prpria.

O so muitas as Vantagens entre um software desenvolvido para

programao e um e um editor de texto puro. Os editores de texto puro por no
reconhecer as marcaes HTML e exigem que o programador tenha muita vivencia
com a linguagem para encontrar erros e executar possveis correes, editores so
muito uteis quando se tem Sistema operacional sem interface grfica.
2.4

Proposta de Website
Nesta etapa ser apresentada uma proposta do modelo de website criado

com o auxilio das ferramentas Notepad++ e KompoZer.

Figura 12: Layout pagina boas vindas do Website. Fonte prpria.

18

A figura 12 mostra a pagina de boas vindas gerou o seguinte cdigo fonte:

Figura 13: Cdigo fonte Pagina de boas vindas. Fonte prpria.

Figura 14: Layout pagina principal do Website> Fonte prpria.

19

A figura 14 mostra o layout da pagina principal, onde esto localizados os

links para a galeria de automveis, Localizao, Contatos e algumas interaes com
os usurios. A pagina principal gerou o seguinte cdigo fonte.

Figura 15: Cdigo fonte pagina principal. Fonte prpria.

20

Layout pagina de localizao e endereo e cdigo fonte:

Figura 16: Layout pagina de localizao da empresa. Fonte prpria.

Figura 17: Cdigo fonte pagina de localizao. Fonte prpria.

21

Layout pagina de galeria de automveis e codigo fonte:

Figura 18: Layout pagina galeria de automveis. Fonte prpria.

Figura 19: Cdigo fonte pagina galeria de automveis. Fonte prpria.

22

Concluso
Ao final das etapas desenvolvidas nesta atividade podemos concluir que nos
proporcionou uma grande oportunidade e inspirao para buscamos

mais

conhecimento, que somaram aqueles adquiridos durante o curso nas aulas

ministradas pelo professor.
Com esta ATPS (Atividade Pratica Supervisionada) podemos penetrar mais
profundamente no ambiente de programao para Web, explorando a linguagem de
marcao HTML linguagem usada para a criao de paginas web formando assim
os Websites.
Com a concluso satisfatria desta atividade podemos no s aprimorar
nossos conhecimentos, mas tambm foi possvel desenvolver na pratica nosso
primeiro Website o foi muito significativo para o grupo.

23

Referncias Bibliogrficas

Clopum tech. (s.d.). Clopum tech. Acesso em 07 de 09 de 2015, disponvel em

Clopum tech: http://www.clomputech.com/paginas-estaticas-vs-dinamicas.html
DataNew Informatica. (16 de 04 de 2004). CLEM - LMMDAM - Tutoriais Web.
Acesso em 07 de 09 de 2015, disponvel em CLEM - LMMDAM:
http://www.hugoribeiro.com.br/Curso_HTML/default.htm
TecMundo. (03 de 12 de 2010). Comparao de Editores HTML. Acesso em 14 de
09

de

2015,

disponvel

em

Tecmundo.com:

http://www.tecmundo.com.br/programacao/1608-comparacao-de-editoreshtml.htm
W3Schools. (s.d.). W3Schools.com. Acesso em 07 de 09 de 2015, disponvel em
W3Schools: http://www.w3schools.com/tags/default.asp