Kroton – Universidade Anhanguera de São Paulo

Tecnologia em redes de computadores

5º Semestre

Campus – Osasco - SP 2015

Kroton – Universidade Anhanguera de São Paulo

Tecnologia de redes de computadores

Alexsandro Godoi Pereira – RA 9977018965

Lucas dos Santos Galdino – RA 7633741477

Stefani Rodrigues Ignácio Da Silva – RA 762658204

Willian Gonçalves dos Santos – RA 9977018975

Programação Para Ambientes De Redes: ATPS etapa 1 e 2

CAMPUS – OSASCO – SP

2015

Trabalho desenvolvido para disciplina de:

Programação Para Ambientes De Redes de

etapa 1 e 2 da ATPS apresentado a Kroton

– Universidade Anhanguera de São Paulo,

sob a orientação do professor: Silvio Cesar

Roxo

Lista de Figuras

FIGURA 1: CÓDIGO HTML GERADO NO BLOCO DE NOTAS. FONTE PRÓPRIA ........................ 6

FIGURA 2: PAGINA RESULTADO DO CÓDIGO HTML. FONTE PRÓPRIA .................................. 7

FIGURA 3: CÓDIGO FONTE GERADO NO NAVEGADOR. FONTE PRÓPRIA ............................... 7

FIGURA 4: CÓDIGO PARA CRIAÇÃO DE TABELAS HTML. FONTE PRÓPRIA ............................ 9

FIGURA 5: RESULTADO DO CODIGO CRIANDO TABELAS. FONTE PRÓPRIA .......................... 10

FIGURA 6: CÓDIGO FONTE GERADO NO NAVEGADOR. FONTE PRÓPRIA ............................. 10

FIGURA 7: CÓDIGO DO WEBSITE GERADO UTILIZANDO O BLOCO DE NOTAS COMO EDITOR.

FONTE PRÓPRIA .................................................................................................... 11

FIGURA 8: PAGINA PRINCIPAL DO WEBSITE. FONTE PRÓPRIA ........................................... 12

FIGURA 9: PAGINA DE NAVEGAÇÃO DO WEBSITE. FONTE PRÓPRIA .................................... 12

FIGURA 10:CODIGO FONTE GERADO NAVEGADOR. FONTE PRÓPRIA ................................. 13

FIGURA 11: INTERFACE GRÁFICA DO KOMPOZER. FONTE PRÓPRIA. .................................. 16

FIGURA 12: LAYOUT PAGINA BOAS VINDAS DO WEBSITE. FONTE PRÓPRIA. ........................ 17

FIGURA 13: CÓDIGO FONTE PAGINA DE BOAS VINDAS. FONTE PRÓPRIA. ........................... 18

FIGURA 14: LAYOUT PAGINA PRINCIPAL DO WEBSITE> FONTE PRÓPRIA. ........................... 18

FIGURA 15: CÓDIGO FONTE PAGINA PRINCIPAL. FONTE PRÓPRIA. ..................................... 19

FIGURA 16: LAYOUT PAGINA DE LOCALIZAÇÃO DA EMPRESA. FONTE PRÓPRIA. .................. 20

FIGURA 17: CÓDIGO FONTE PAGINA DE LOCALIZAÇÃO. FONTE PRÓPRIA. ........................... 20

FIGURA 18: LAYOUT PAGINA GALERIA DE AUTOMÓVEIS. FONTE PRÓPRIA. .......................... 21

FIGURA 19: CÓDIGO FONTE PAGINA GALERIA DE AUTOMÓVEIS. FONTE PRÓPRIA. ............... 21

Lista de Tabelas

TABELA 1: COMPARATIVO ENTRE KOMPOZER E BLOCO DE NOTAS. FONTE PRÓPRIA. ......... 17

Sumário

Desafio ........................................................................................................................ 4

Introdução ................................................................................................................... 5

1. Introdução ao ambiente Web. A linguagem HTML. .............................................. 6

1.1 Construindo código HTML .............................................................................. 6

1.2 Comparativo entre pagina web dinâmica e estática ....................................... 8

1.2.1 Paginas Web estáticas ............................................................................ 8

1.2.2 Paginas Web Dinâmicas .......................................................................... 8

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

1.3.1 Descrição da tags utilizadas na criação da tabela HTML ...................... 10

1.4 Formação de layout do site .......................................................................... 11

2. Ferramentas para programação em HTML. Desenvolvimento de páginas Web 14

2.1 Os cinco principais e/ou mais utilizados ambientes de programação 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 criação do Website ............................................. 16

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

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

Conclusão ................................................................................................................. 22

Referências Bibliográficas ......................................................................................... 23

4

Desafio

A agência de automóveis 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 disponível no laboratório de informática

utilizando as linguagens HTML (Hypertext Markup Language) e PHP (Hypertext

Preprocessor). O website deverá ser construído nas seguintes conformidades:

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

automóveis, localização e fale conosco.

O site 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 utilizando tabelas e

camadas.

As imagens utilizadas no website devem ser otimizadas para carregamento

rápido, porém, não deverão perder a qualidade.

O site deverá possuir design limpo e ser de fácil navegabilidade conforme os

conceitos de usabilidade.

5

Introdução

Nesta Atividade Pratica Supervisionada, vamos colocar em pratica os

conhecimentos obtidos na disciplina de Programação Para Ambientes de Redes,

onde será elaborado um web site conforme com o uso da linguagem de marcação

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 introdução com o conceito

básico para a produção de um script HTML, e a segunda mostrará ferramentas e

recursos disponíveis na linguagem de marcação HTML.

6

1. Introdução ao ambiente Web. A linguagem HTML.

Em um primeiro contato com a linguagem de marcação HTML, foram

explorados o uso dos comandos que compõe os um arquivo HTML. Nos passos a

seguir serão apresentados os scripts gerados utilizando a estrutura de comandos

HTML.

1.1 Construindo código HTML

A principio o código será gerado um código contendo pouco mais de 10 linhas

formando estrutura básica utilizando bloco de notas gerando um arquivo xxx.html,

essa estrutura irá conter a função e a identificação das tags, formatação e inserção

de Objetos.

Figura 1: Código HTML gerado no bloco de notas. Fonte Própria

7

A seguir o resultado do código HTML com a criação da pagina aberta no

navegador:

Figura 2: Pagina resultado do código HTML. Fonte Própria

No navegador também podemos obter o código fonte da pagina onde se nota

que os comentários ficaram ocultos.

Figura 3: Código fonte gerado no navegador. Fonte Própria

8

1.2 Comparativo entre pagina web dinâmica e estática

Esta etapa tem como objetivo como objetivo elaborar um comparativo entre os

tipos de pagina web. Existem dois tipos de paginas web pagina dinâmica e pagina

estática.

1.2.1 Paginas Web estáticas

As paginas estáticas da Web têm como objetivo principal apresentar as

informações de forma permanente e são criadas usando HTML, onde os efeitos e as

funcionalidades são restritos, porém possui recursos que oferecem bom resultados,

assim podem se assemelhar a paginas dinâmicas. Uma característica da pagina

estática é que o script pode ser interpretado no host cliente.

Se o objetivo for somente fornecer informações sobre a empresa como,

localização, produtos e serviços 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 dinâmica.

1.2.2 Paginas Web Dinâmicas

As paginas web dinâmicas são construídas através de linguagem de outras

linguagens de programação como o PHP que é a linguagem mais utilizada, nesse

tipo de pagina pode-se desenvolver aplicações dentro da Web permitindo assim uma

maior interatividade do usuário. Ao contrario das paginas estáticas os scripts são

mais complexos e exigem um maior conhecimento e não são interpretados nos

clientes e sim no servidor.

Com paginas dinâmicas é possível criar aplicações web dinâmicas como inquéritos

e sondagens, fóruns 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 criação, desde uma

simples pagina informativa a uma poderosa ferramenta de trabalho na web.

9

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

Figura 4: Código para criação de tabelas HTML. Fonte Própria

10

A seguir o resultado do código para criação de tabela HTML com a criação da

pagina aberta no navegador:

Figura 5: Resultado do codigo criando tabelas. Fonte Própria

Codigo fonte da pagina criando tabelas HTML gerado no navegador

Figura 6: Código fonte gerado no navegador. Fonte Própria

1.3.1 Descrição da tags utilizadas na criação da tabela HTML

Além das tags já utilizadas e comentadas anteriormente, aqui serão descritas

a função das tags utilizadas na criação da tabela HTML:

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

código entre ele é uma tabela;

<tr> </tr>: Define o código para linhas;

<td> </td>:Define o código para colunas;

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

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

11

<td align= “center”: Define que o texto digitado apareça centralizado na célula;

<td Rowspan= “2”>: Define quantas linhas de célula serão mescladas;

<td colspan= “4”>: Define quantas colunas de célula serão mescladas.

1.4 Formação de layout do site

Nesta etapa será apresentado o layout do website proposto com a criação do

código fonte no bloco de notas.

Figura 7: Código do Website gerado utilizando o bloco de notas como editor. Fonte Própria

12

Pagina principal do Website a partir do código acima.

Figura 8: Pagina principal do website. Fonte Própria

Figura 9: Pagina de navegação do website. Fonte Própria

13

O site gerou o seguinte código fonte no navegador.

Figura 10:Codigo fonte gerado navegador. Fonte Própria

14

2. Ferramentas para programação em HTML. Desenvolvimento de páginas

Web

Nesta atividade entramos em contato com a diversidade de ferramentas para

a programação HTML, com isso será possível explorar os recursos de cada

ferramenta.

2.1 Os cinco principais e/ou mais utilizados ambientes de programação

HTML

Para elaborar um website é necessário criarmos um código fonte, seja ele em

linguagem HTML ou não, como vimos anteriormente. E para criar esse código fonte

é necessário 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 criação de arquivos HTML. O uso mais comum do bloco de notas

é a criação de notas com apresentação de texto puro, com formatação básica e

exibindo e editando arquivos do tipo .txt. Isso é muito útil na geração de arquivos

HTML, pois, os caracteres especiais ou outra formatação não podem aparecer na

página da Web publicada, pois podem causar erros.

Com o bloco de notas do Windows pode-se salvar com os formatos de

codificação 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 formatação simples como o bloco de notas como o

Gedit (Linux) ou text-edit, (Mac OS X) esses são de grande utilidade quando não

possuímos uma interface gráfica para edição de código.

2.1.2 Adobe Dreamweaver

O Dreamweaver é uma das ferramentas mais utilizadas para a criação de

paginas Web. Essa ferramenta pode se adaptar a qualquer tipo de necessidade,

sendo de fácil assimilação 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 associação a diversos

programas Adobe, como modelos de vídeo utilizando o Adobe Flash e Photoshop. O

Dreamweaver suporta diversos tipos de linguagens entre as principais estão, HTML,

PHP, ColdFusion, ASP, CSS, JavaScript, XML.

2.1.3 WYSIWYG Web Builder

O WYSIWYG Web Builder é o programa mais simples para a criação de

paginas web, pois, usa o "What-You-See-Is-What-You-Get". Ou seja, "O que você vê

é o que obtém" isso significa que toda a criação do website e feita na tela de forma

totalmente gráfica onde basta apenas escolher o elemento no lado esquerdo da tela

e arrastar para a pagina, esse programa é indicado para usuários comuns sem

experiência alguma com programação web. Apesar das facilidades o possui saídas

para HTML4, HTML5, XHTML, CSS3, PHP.

2.1.4 Notepad++

O Notepad++ possui licença GPL General Public License (Licença Pública

Geral) que é uma designação de software livre. O Notepad++ é um programa

semelhante ao bloco de notas, porém com recursos que reconhecem de maneira

automática o tipo de linguagem de programação que será usado basta ser pré-

definido no menu de linguagem C++, Java, C#, XML, HTML, PHP, Java, ASP ou

várias outras.

Na linguagem HTML o Notepad++ reconhece as tags que estão sendo

usadas em sua página. Além disso, ele tem indentação de texto com esse recurso

pode-se construir o código de forma mais organizada.

2.1.5 KompoZer

O kompozer é um programa que procura trazer as funcionalidades básicas

para que se possa criar e editar arquivos HTML em um software gratuito. O

KompoZer é projetado para ser extremamente fácil de usar, tornando-o ideal para

usuários de computador não-técnicos que querem criar um atraente web site, com

aparência profissional sem precisar saber HTML ou codificação da web, pois utiliza o

WYSIWYG (edição simples e prática, para iniciantes).

16

O editor é extremamente inteligente, pois tem códigos indentados (como o

Notepad++). Ele também é automático e muito organizado como no Dreamweaver,

eu possui Três opções normal, (para iniciantes) HTML Tags (para intermediários) e

Source para usuários que possuem conhecimento do codigo HTML.

2.2 Escolha da ferramenta de criação do Website

Para o desenvolvimento do Website o grupo optou pela ferramenta de criação

e edição HTML o KompoZer devido as características mencionadas acima e por ser

um software gratuito e muito pratico para o desenvolvimento de paginas Web. Os

motivos da escolha estão ligados não somente a praticidade da ferramenta, mas

também pela flexibilidade que ela oferece, onde podemos não só alterar o design de

forma automática, mas também o código fonte que com esses recursos embutidos

na própria ferramenta.

Figura 11: Interface gráfica do KompoZer. Fonte própria.

17

2.3 Comparativo entre a ferramenta KompoZer e o editor de texto puro

Fazendo fazer um comparativo entre a ferramenta de edição KompoZer e o

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

Características KompoZer Bloco d e Notas

Criação e edição de arquivos HTML Sim Sim

Abertura e fechamento de tags Automático Manual

Menus de ferramentas Sim Não

Inserção de tags Automático Manual

Indentação Sim Não

Inserção de Tabelas, Imagens, Formulários e Links. Automático Manual

Organização Sim Não Tabela 1: Comparativo entre KompoZer e Bloco de Notas. Fonte própria.

O são muitas as Vantagens entre um software desenvolvido para

programação e um e um editor de texto puro. Os editores de texto puro por não

reconhecer as marcações HTML e exigem que o programador tenha muita vivencia

com a linguagem para encontrar erros e executar possíveis correções, editores são

muito uteis quando se tem Sistema operacional sem interface gráfica.

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 própria.

18

A figura 12 mostra a pagina de boas vindas gerou o seguinte código fonte:

Figura 13: Código fonte Pagina de boas vindas. Fonte própria.

Figura 14: Layout pagina principal do Website> Fonte própria.

19

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

links para a galeria de automóveis, Localização, Contatos e algumas interações com

os usuários. A pagina principal gerou o seguinte código fonte.

Figura 15: Código fonte pagina principal. Fonte própria.

20

Layout pagina de localização e endereço e código fonte:

Figura 16: Layout pagina de localização da empresa. Fonte própria.

Figura 17: Código fonte pagina de localização. Fonte própria.

21

Layout pagina de galeria de automóveis e codigo fonte:

Figura 18: Layout pagina galeria de automóveis. Fonte própria.

Figura 19: Código fonte pagina galeria de automóveis. Fonte própria.

22

Conclusão

Ao final das etapas desenvolvidas nesta atividade podemos concluir que nos

proporcionou uma grande oportunidade e inspiração 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 programação para Web, explorando a linguagem de

marcação HTML linguagem usada para a criação de paginas web formando assim

os Websites.

Com a conclusão satisfatória desta atividade podemos não só aprimorar

nossos conhecimentos, mas também foi possível desenvolver na pratica nosso

primeiro Website o foi muito significativo para o grupo.

23

Referências Bibliográficas

Clopum tech. (s.d.). Clopum tech. Acesso em 07 de 09 de 2015, disponível 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, disponível em CLEM - LMMDAM:

http://www.hugoribeiro.com.br/Curso_HTML/default.htm

TecMundo. (03 de 12 de 2010). Comparação de Editores HTML. Acesso em 14 de

09 de 2015, disponível em Tecmundo.com:

http://www.tecmundo.com.br/programacao/1608-comparacao-de-editores-

html.htm

W3Schools. (s.d.). W3Schools.com. Acesso em 07 de 09 de 2015, disponível em

W3Schools: http://www.w3schools.com/tags/default.asp