Atps Programação Para Redes

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

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

CAMPUS – OSASCO – SP 2015

Lista de Figuras

FIGURA 1: CÓDIGO HTML GERADO NO BLOCO DE NOTAS. FONTE PRÓPRIA ........................ 6 FIGURA 2: P AGINA 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: P AGINA PRINCIPAL DO WEBSITE . FONTE PRÓPRIA ........................................... 12 FIGURA 9: P AGINA 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: L AYOUT PAGINA BOAS VINDAS DO WEBSITE. FONTE PRÓPRIA. ........................ 17 FIGURA 13: CÓDIGO FONTE P AGINA DE BOAS VINDAS. FONTE PRÓPRIA. ........................... 18 FIGURA 14: L AYOUT PAGINA PRINCIPAL DO WEBSITE> FONTE PRÓPRIA. ........................... 18 FIGURA 15: CÓDIGO FONTE PAGINA PRINCIPAL. FONTE PRÓPRIA. ..................................... 19 FIGURA 16: L AYOUT 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: L AYOUT 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

T ABELA 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 1.4 2.

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

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

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

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

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: 

: Essa Tag é importante para determinar ao navegador que o código entre ele é uma tabela;



: Define o código para linhas;



:Define o código para colunas;





: Define o tamanho da borda da tabela; : Define a largura da tabela;

11

1.4



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-editoreshtml.htm W3Schools. (s.d.). W3Schools.com. Acesso em 07 de 09 de 2015, disponível em W3Schools: http://www.w3schools.com/tags/default.asp