Tecnologia em redes de computadores
Tecnologia em redes de computadores
5º Semestre
5º Semestre
Campus
Campus
– –Osasco - SP
Osasco - SP
2015
Alexsandro Godoi Per
Alexsandro Godoi Pereiraeira – – RA 9977018965 RA 9977018965
Lucas dos Santos Galdino
Lucas dos Santos Galdino – – RA RA 76337414777633741477
Stefani Rodrigues Ignácio Da Silva
Stefani Rodrigues Ignácio Da Silva – – RA 762658204 RA 762658204
Willian Gonçalves dos Santos
Willian Gonçalves dos Santos – – RA 9977018975 RA 9977018975
Programação Para Ambientes De Redes: ATPS etapa 1 e Programação Para Ambientes De Redes: ATPS etapa 1 e 22
CAMPUS
CAMPUS – – OSASCO OSASCO – – SP SP
2015 2015
Trabalho desenvolvido para disciplina de: Trabalho desenvolvido para disciplina de: Programação Para Ambientes De Redes de Programação Para Ambientes De Redes de etapa 1 e 2 da ATPS apresentado a Kroton etapa 1 e 2 da ATPS apresentado a Kroton
–
– Universidade Anhanguera de São Paulo, Universidade Anhanguera de São Paulo,
sob a orientação do professor: Silvio Cesar sob a orientação do professor: Silvio Cesar Roxo
FIGURA3: CÓDIGO FONTE GERADO NO NAVEGADOR. FONTEPRÓPRIA ... 7
FIGURA4: CÓDIGO PARA CRIAÇÃO DE TABELASHTML. FONTEPRÓPRIA ... 9
FIGURA5: RESULTADO DO CODIGO CRIANDO TABELAS. FONTEPRÓPRIA ... 10
FIGURA6: CÓDIGO FONTE GERADO NO NAVEGADOR. FONTEPRÓPRIA ... 10
FIGURA7: CÓDIGO DOWEBSITE GERADO UTILIZANDO O BLOCO DE NOTAS COMO EDITOR. FONTEPRÓPRIA ... 11
FIGURA8: P AGINA PRINCIPAL DOWEBSITE . FONTEPRÓPRIA ... 12
FIGURA9: P AGINA DE NAVEGAÇÃO DOWEBSITE . FONTEPRÓPRIA... 12
FIGURA10:CODIGO FONTE GERADO NAVEGADOR. FONTEPRÓPRIA ... 13
FIGURA11: INTERFACE GRÁFICA DOKOMPOZER. FONTE PRÓPRIA. ... 16
FIGURA12: L AYOUT PAGINA BOAS VINDAS DOWEBSITE. FONTE PRÓPRIA. ... 17
FIGURA13: CÓDIGO FONTEP AGINA DE BOAS VINDAS. FONTE PRÓPRIA. ... 18
FIGURA14: L AYOUT PAGINA PRINCIPAL DOWEBSITE> FONTE PRÓPRIA. ... 18
FIGURA15: CÓDIGO FONTE PAGINA PRINCIPAL. FONTE PRÓPRIA. ... 19
FIGURA16: L AYOUT PAGINA DE LOCALIZAÇÃO DA EMPRESA. FONTE PRÓPRIA. ... 20
FIGURA17: CÓDIGO FONTE PAGINA DE LOCALIZAÇÃO. FONTE PRÓPRIA. ... 20
FIGURA18: L AYOUT PAGINA GALERIA DE AUTOMÓVEIS. FONTE PRÓPRIA. ... 21
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
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
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.
1. Introdução ao ambiente W eb . 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.
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.
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 W eb 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 W eb 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 trabalh o 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 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.
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;
<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.
Pagina principal do Website a partir do código acima.
Figura 8: Pagina principal do w e b s i t e . Fonte Própria
O site gerou o seguinte código fonte no navegador.
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 (W i n d o w s )
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.
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).
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 doW e b s i t e
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.
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.
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.
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.
Layout pagina de localização e endereço e código fonte:
Figura 16: Layout pagina de localização da empresa. Fonte própria.
Layout pagina de galeria de automóveis e codigo fonte:
Figura 18: Layout pagina galeria de automóveis. Fonte própria.
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.
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
