Vous êtes sur la page 1sur 94
UNIVERSIDADE DO PLANALTO CATARINENSE DEPARTAMENTO DE CIÊNCIAS EXATAS E TECNOLÓGICAS CURSO DE SISTEMAS DE INFORMAÇÃO

UNIVERSIDADE DO PLANALTO CATARINENSE DEPARTAMENTO DE CIÊNCIAS EXATAS E TECNOLÓGICAS CURSO DE SISTEMAS DE INFORMAÇÃO (BACHARELADO)

O USO DOS PADRÕES WEB PARA O DESENVOLVIMENTO DE APLICAÇÕES PARA A INTERNET

ELISA MIRANDA WEISS

LAGES, DEZEMBRO DE 2006

UNIVERSIDADE DO PLANALTO CATARINENSE DEPARTAMENTO DE CIÊNCIAS EXATAS E TECNOLÓGICAS CURSO DE SISTEMAS DE INFORMAÇÃO (BACHARELADO)

O USO DOS PADRÕES WEB PARA O DESENVOLVIMENTO DE APLICAÇÕES PARA A INTERNET

Relatório do Trabalho de Conclusão de Curso submetido à Universidade do Planalto Catarinense para obtenção dos créditos de disciplina com nome equivalente no curso de Sistemas de Informação - Bacharelado.

ELISA MIRANDA WEISS

Orientação: Profª. Viviane Duarte Bonfim, M.Sc. Profª. Sabrina Bet, M.Sc.

LAGES, DEZEMBRO DE 2006

O USO DOS PADRÕES WEB PARA O DESENVOLVIMENTO DE APLICAÇÕES PARA A INTERNET

ELISA MIRANDA WEISS

ESTE RELATÓRIO, DO TRABALHO DE CONCLUSÃO DE CURSO, FOI JULGADO ADEQUADO PARA OBTENÇÃO DOS CRÉDITOS DA DISCIPLINA DE TRABALHO DE CONCLUSÃO DE CURSO DO VIII SEMESTRE, OBRIGATÓRIA PARA OBTENÇÃO DO TÍTULO DE:

BACHAREL EM SISTEMAS DE INFORMAÇÃO

Profª. Viviane Duarte Bonfim, M.Sc Orientador

BANCA EXAMINADORA:

Prof. Edson Roberto Souza Paes, M.Sc. UNIPLAC

Prof. Angelo Augusto Frozza, Esp. Professor de TCC

Profª. Sabrina Bet, M.Sc. Co-Orientador

Prof. Rafael Gattino Furtado, Esp. UNIPLAC

Prof. Wilson Castello Branco Neto, Dr. Coordenador de Curso

Lages, 05 de Dezembro de 2006

iv

Dedico este trabalho aos meus pais e ao Valter que me deram todo o apoio necessário para que obtivesse ânimo e força para conquistar mais esta etapa.

v

“Grandes realizações são possíveis quando se dá atenção aos pequenos começos”. (Lao Tse)

vi

Agradeço a minha orientadora, Viviane Duarte Bonfim pela orientação amiga e pela compreensão na realização deste trabalho.

Agradeço a co-orientação da Profª. Sabrina Bet pela colaboração, idéias e cobranças.

Agradeço ao Prof. Ângelo pelo apoio e disponibilidade.

Agradeço a todas as pessoas que participaram de alguma maneira na realização deste trabalho.

Agradeço a Deus por mais esta conquista.

SUMÁRIO

LISTA DE ILUSTRAÇÕES

IX

LISTA DE SIGLAS

XI

RESUMO

XII

ABSTRACT

XIII

1

INTRODUÇÃO

1

1.1 Apresentação

1

1.2 Descrição do problema

2

1.3 Justificativa

2

1.4 Objetivo geral

4

1.5 Objetivos específicos

4

1.6 Metodologia

5

2

PADRÕES WEB

6

2.1 Contextualização

6

2.2 Tecnologias e características

7

2.2.1 Estrutura

8

2.2.2 Apresentação

15

2.2.3 Comportamento

20

2.3

Tecnologias sem padrões X com Padrões Web

22

2.4

Conclusão

26

3

MODELAGEM DO ESTUDO DE CASO

27

3.1

Sumário executivo

27

3.2

Descrição do conteúdo do site

28

3.3

Levantamento de requisitos

29

3.3.1 Organização dos requisitos

31

3.4 Projeto lógico de banco de dados

32

3.5 Diagrama de navegação

33

3.6 Design gráfico

34

3.7 Conclusão

35

4

IMPLEMENTAÇÃO

36

4.1 Estrutura do projeto

36

4.2 Apresentação do projeto

38

viii

4.4 Criação do banco de dados

46

4.5 Validação do projeto

48

4.6 Demonstração do funcionamento da aplicação

55

4.6.1 Interface inicial

55

4.6.2 Módulo usuário

56

4.6.3 Módulo administrador

59

 

4.7 Testes

61

4.8 Conclusão

66

5

CONSIDERAÇÕES FINAIS

68

REFERÊNCIAS BIBLIOGRÁFICAS

70

BIBLIOGRAFIA COMPLEMENTAR

71

APÊNDICES

72

LISTA DE ILUSTRAÇÕES

FIGURA 1 -

Trio dos Padrões Web

 

8

FIGURA 2 -

Interface gerada pelo código HTML do quadro 1

11

FIGURA 3 -

Interface gerada pelo código XHTML do quadro 3

15

FIGURA 4 -

Exemplo com a utilização do

19

FIGURA 5 -

Aplicação sem o uso dos Padrões Web

22

FIGURA 6 -

Aplicação com o uso dos Padrões Web

23

FIGURA 7 -

Comparação da quantidade de linhas de

24

FIGURA 8 -

Tamanho dos arquivos

24

FIGURA 9 -

Tempo

de

download

25

FIGURA 10 -

Tempo de resposta

 

25

FIGURA 11 -

Diagrama do modelo lógico do banco de dados

33

FIGURA 12 -

Diagrama

de

34

FIGURA 13 -

FIGURA

24

-

Estrutura da

interface

 

34

FIGURA 14 -

Exemplo de mensagem do JavaScript

45

FIGURA 15 -

Validação pela URL

 

49

FIGURA 16 -

Validação

pelo upload

49

FIGURA 17 -

Cópia do código

50

FIGURA 18 -

Página de validação do CSS

50

FIGURA 19 -

Resultado de validação do CSS

51

FIGURA 20 -

Código CSS validado

52

FIGURA 21 -

Tela de validação do XHTML

53

FIGURA 22 -

Erros encontrados no XHTML

54

FIGURA 23 -

XHTML validado Index.php

55

56

FIGURA 25 -

Interface cadastro de usuário

57

FIGURA 26 -

Interface

culinária

58

FIGURA 27 -

Cadastro

da receita

59

FIGURA 28 -

Área restrita da aplicação

60

FIGURA 29 -

Interface restrita de cadastro de usuário

60

FIGURA 30 -

Continuação interface restrita de cadastro de usuário

61

FIGURA 31 -

Teste navegador Internet Explorer

62

FIGURA 32 -

Teste

navegador

Opera

63

FIGURA 33 -

Teste navegador Mozila Firefox

63

FIGURA 34 -

Teste navegador Netscape Browser

64

x

FIGURA 35 -

Interface cadastro de usuário área restrita

64

QUADRO 1 -

Exemplo de código HTML

9

QUADRO 2 -

Exemplo código XML

12

QUADRO 3 -

Exemplo de código XHTML

14

QUADRO 4 -

Exemplo fragmento de código CSS

17

QUADRO 5 -

Usando folhas de estilo

19

QUADRO 6 -

Comparativo entre as aplicações

25

QUADRO 7 -

Requisito manter informação do usuário

29

QUADRO 8 -

Requisito tipo de usuário

29

QUADRO 9 -

Requisito manter cadastro de serviços

30

QUADRO 10 - Requisito tipo de serviço

30

QUADRO 11 - Requisito manter cadastro de eventos

30

QUADRO 12 - Requisito manter cadastro de receitas

30

QUADRO 13 - Requisito tipo da receita

31

QUADRO 14 - Requisitos suplementares do sistema

31

QUADRO 15 - Lista de conceitos

31

QUADRO 16 - Código da página inicial (index.php)

37

QUADRO 17 - Código de apresentação do projeto (estilos.css)

38

QUADRO 18 - CadastroUsuario.php

43

QUADRO 19 - Scripts de geração de tabelas

46

QUADRO 20 - Forma de declarar estilos específicos para o Internet Explorer

65

QUADRO 21 - Usando o Conditinal Comment

65

LISTA DE SIGLAS

CSS

- Cascading Style Sheets

DOM

- Document Object Model

HTML

- Hyper Text Markup Language

W3C

- World Wide Web Consortium

XHTML

- eXtensible HyperText Markup Language

XML

- eXtensible Markup Language

RESUMO

Com a crescente utilização da Internet e o grande número de usuários, a diversidade de dispositivos e navegadores, alguns problemas foram surgindo, como a incompatibilidade de dispositivos, a não interpretação dos dados pelo navegador usado, a demora na hora de carregar uma aplicação Web, entre outros problemas que todos os dias os usuários se deparam. Porém, para melhorar o desempenho das aplicações Web e torná-las acessíveis a qualquer usuário, dispositivo ou navegador, é recomendado que se utilizem os Padrões Web, que são recomendações definidas pelo W3C (World Wide Web Consortium), assim, é possível minimizar os problemas que vêm ocorrendo ao longo dos anos. Este trabalho tem por finalidade apresentar as principais tecnologias que compõem os Padrões Web e os benefícios da sua utilização. Para alcançar este objetivo foi realizada uma abordagem geral sobre o uso desses padrões para o desenvolvimento de aplicações para a Internet. Para demonstrar o mesmo, foi proposto o desenvolvimento de uma aplicação Web como estudo de caso, utilizando algumas tecnologias sugeridas pelo W3C. A aplicação passou por validadores do W3C e fez-se o uso de testes em diferentes navegadores para a verificação de acessibilidade.

Palavras-chave:

Acessibilidade.

Padrões

Web;

Aplicação

Web;

Benefícios;

Tecnologias;

ABSTRACT

The increasing use of the Internet different kinds of users, and the diversity of devices and browsers have brought some problems such as device incompatibility, data interpretation problems on browsers, Web application loading delays, and others that users have to face day after day. However, in order to improve the performance of Web applications, as well as make them available to any user, device, or browser, the use of Web Standards, which are W3C (World Wide Web Consortium) recommendations, is advised. This practice reduces difficulties that have been happening for years. The objective of this work is to introduce the main technologies that comprise the Web Standards as well as to show the benefits of their use. In order to reach that objective, a general approach on the use of these standards for Internet applications development took place. The development of a Web application using some of the technologies suggested by the W3C was proposed as a case study to show the results of this practice. The application was submitted to W3C validators and tests were performed on many different browsers for accessibility verifications.

Keywords: Web Standards; Web application; Benefits; Technologies; Accessibility.

1 INTRODUÇÃO

1.1 Apresentação

Quando a Web foi criada, as aplicações eram estáticas e só permitiam textos. Porém, de acordo com os avanços tecnológicos, a Internet teve uma evolução gradativa e, com isto, novas formas de trabalhar as suas informações foram surgindo ao longo do tempo. No entanto, as tecnologias criadas para melhorar a forma de expôr e trabalhar as informações não se agregam de forma positiva, isso por muitas delas serem proprietárias. As ferramentas existentes oferecem muitos recursos para o desenvolvimento de aplicações Web, os quais seguem seus padrões, entretanto não adotam os sugeridos pelo W3C (World Wide Web Consortium), o que pode acarretar dificuldade de acessibilidade, bem como, dificuldade na abertura inicial de aplicações, decorrente da demora no tempo de acesso, originada do mau uso das tecnologias. Para tentar melhorar as preocupações mencionadas, o W3C (World Wide Web Consortium) definiu algumas recomendações para desenvolvimento de aplicações Web, conhecidos como Padrões Web (MACEDO, 2004). Embora os Padrões Web possam melhorar vários aspectos no desenvolvimento dessas aplicações, nem todos os desenvolvedores Web se preocupam com tais recomendações. Assim, a não utilização destas recomendações pode ser ocasionado por alguns motivos como: a falta de conhecimento sobre esses padrões; a utilização

2

excessiva de abordagens não recomendadas pelos Padrões Web por considerar que suas aplicações poderão ser esteticamente melhores ou, também, por comodidade. Diante do exposto, é desenvolvido um estudo de caso utilizando Padrões Web para demonstrar as vantagens que os mesmos oferecem. Para contemplar o estudo sobre o assunto proposto, as informações estão organizadas da seguinte forma: no capítulo 1 é apresentada uma introdução do trabalho, composta por apresentação, problemas, justificativa, objetivo geral, objetivos específicos, metodologia e cronograma. No capítulo 2 é apresentado o estudo sobre Padrões Web, contendo informações sobre as tecnologias e recursos adotados nesses Padrões. No capítulo 3 é apresentado o estudo de caso, no qual são feitas a sua descrição e modelagem. No capítulo 4 é apresentada a implementação do estudo de caso. Ressalta-se que o estudo de caso aplica e demonstra o desenvolvimento baseado nos Padrões Web. Finalizando, no capítulo 5 são abordadas as considerações finais referentes ao trabalho proposto.

1.2 Descrição do problema

Com o avanço das tecnologias usadas para desenvolver aplicações para a Internet, alguns problemas foram surgindo, decorrentes de alguns navegadores que não interpretam corretamente os códigos das aplicações e programadores que fazem uso de técnicas de programação defasadas. Ressalta-se, ainda, a grande diversidade de dispositivos com acesso à Internet, prejudicando assim o desempenho dessas aplicações. Portanto, este trabalho aborda como minimizar os problemas relacionados com a diversidade de browsers e dispositivos que acessam a Internet, mantendo a preocupação com a acessibilidade.

1.3 Justificativa

Com a crescente utilização da Internet ao longo dos anos, pode-se perceber

3

que ela foi mudando o seu modo de exibir as informações. Estas informações deixaram de ser estáticas, o que foi uma grande evolução. As tecnologias que hoje são usadas podem interferir no desempenho da aplicação, pois existem muitos recursos disponíveis para a implementação destas aplicações. Assim, alguns programadores não seguem os padrões recomendados pelo W3C, o que pode causar algumas dificuldades aos usuários em relação à acessibilidade, bem como à demora na hora de carregar uma aplicação Web, a incompatibilidade de dispositivos que acessam a Internet, ou ainda, a aplicação não é interpretada corretamente pelo navegador usado. Para melhorar o desempenho das aplicações Web é recomendado que se utilizem os Padrões Web, que são recomendações definidas pelo W3C, visando, diminuir os problemas que vem ocorrendo ao longo dos anos (ZELDMAN, 2003). Analisando que os padrões melhoram o desempenho das aplicações Web em vários aspectos, grande parte dos desenvolvedores Web não se preocupam com a utilização desses padrões. Um dos motivos pelo qual não há essa utilização adequada pode ser pela falta de conhecimento sobre essas novas tecnologias, ou pela utilização restrita de certas tecnologias que estão habituados a utilizar, ou mesmo as tecnologias propostas pelos Padrões Web não se enquadram às necessidades do desenvolvedor (ZELDMAN, 2003). Com a utilização dos Padrões Web, a aplicação fica mais compacta, pois são feitos separadamente o conteúdo, o design e a programação, assim fazendo com que as aplicações sejam carregadas de forma mais rápida. Ainda, decorrente desta preocupação, pessoas com necessidades especiais poderão ter acesso aos conteúdos que necessitam, pois estão previstos pelos padrões, recursos que tratem as informações e permitam o seu acesso. Dentre eles pode-se citar:

conversão de textos para áudio, inclusão de imagens complementares com legendas para áudio, maior consistência e clareza na organização da estrutura e design das páginas, utilização de fontes com tamanhos adequados e que possam ser aumentados ou diminuídas conforme a necessidade de cada pessoa, proporcionando maior

4

autonomia e independência. Isso tudo não beneficia somente as pessoas com necessidades especiais, mas, também, ajudam pessoas que apresentam deficiências temporárias como, por exemplo, mãos ou braços quebrados, ou aqueles que precisam acessar aplicações fora do seu ambiente habitual, com recursos bem limitados, como em aeroportos, navios ou em outros lugares públicos (ZELDMAN, 2003). Com a correta separação da estrutura da apresentação, os sites podem permitir maior flexibilidade na utilização do documento, o layout pode ser criado a partir de CSS (Cascading Style Sheets) e isto permite que esta etapa de construção seja realizada independentemente do desenvolvimento do conteúdo. O desenvolvedor também fica livre do uso de editores específicos. O conteúdo pode ser editado em qualquer processador de textos e, posteriormente, estruturado. Uma vez estruturado ele poderá ser exibido através da formatação apropriada anexada ao mesmo. Com tudo, as aplicações Web ficam bem estruturadas, os custos são reduzidos e a sua manutenção é facilitada. Finalizando, todo relato abordado pode justificar a importância de trabalhar com Padrões Web no desenvolvimento de aplicações para Web.

1.4 Objetivo geral

Demonstrar resultados do estudo dos Padrões Web, recomendados pelo W3C, na criação de aplicações para a Internet.

1.5 Objetivos específicos

Apresentar as principais tecnologias que compõem os Padrões Web e seus benefícios;

Demonstrar os Padrões Web através de um estudo de caso, o qual mostrará uma aplicação com a utilização destas tecnologias.

5

1.6 Metodologia

Para a realização deste trabalho, primeiramente foi realizado um levantamento bibliográfico dos assuntos que embasaram este estudo. Posteriormente, foi elaborada a proposta do trabalho, definindo objetivos, justificativa, cronograma. Após essas atividades, foi efetuado um estudo detalhado das principais tecnologias que compõem os Padrões Web e os benefícios que eles oferecem para o desenvolvimento de aplicações para a Internet. Esse estudo foi contemplado através de uma descrição geral das tecnologias que compõem os Padrões Web, descrevendo as suas características. Juntamente com essa descrição, apresentou-se uma análise do uso dos Padrões Web através de um comparativo entre aplicações, apresentando as diferenças e características entre aplicações que adotam os Padrões Web das que não adotam esses padrões. Após essa abordagem, foi iniciada a modelagem do estudo de caso, a qual apresenta o levantamento de requisitos e o diagrama de navegação. Essa etapa é essencial para dar início à implementação do estudo de caso. Com a etapa da modelagem do estudo de caso realizada, foi iniciada a implementação deste baseada nas tecnologias estabelecidas. Para finalizar, foi realizada uma demonstração da aplicação desenvolvida com os Padrões Web, mostrando as vantagens da sua utilização, seguido das considerações finais.

6

2 PADRÕES WEB

Neste capítulo é feita a descrição de algumas tecnologias que compõem os Padrões Web, relatando suas características e informando a função de cada uma delas no desenvolvimento de aplicações Web. São apresentadas as seguintes tecnologias que compõem os Padrões Web:

HTML (Hyper Text Markup Language), XML (eXtensible Markup Language), XHTML (eXtensible HyperText Markup Language), CSS (Cascading Style Sheets), ECMAScript (European Computer Manufacturers Association) e DOM (Document Object Model).

2.1 Contextualização

Em 1994, para controlar aspectos de padronização do ambiente Web, foi criado o World Wide Web Consortium (W3C). Essa organização tem como objetivo guiar a criação de padrões para a utilização em documentos Web. Esses padrões foram concebidos para oferecer benefícios a um maior número possível de usuários e assegurar a qualidade ao longo do tempo de qualquer documento publicado na Web (MACEDO, 2004). Com o grande crescimento da Web, muitas dificuldades e problemas foram aparecendo, como por exemplo, o surgimento da grande variedade de dispositivos e browsers que não interpretam corretamente as aplicações, podendo dificultar com isso a acessibilidade dos usuários. Porém, embora, nem todos adotem esses padrões, nos últimos anos a sua utilização está se tornando mais constante. Sendo assim, esta postura em relação a

7

adoção desses padrões é muito importante, visto que se todos os desenvolvedores começarem a seguir tais recomendações, esses padrões poderiam se tornar padrões de fato (ZELDMAN, 2003). Contudo, através da adaptação desses padrões é que os problemas citados anteriormente podem ser resolvidos, trazendo melhor desempenho para as aplicações desenvolvidas, e permitindo maior compartilhamento das informações que estão envolvidas.

2.2 Tecnologias e características

Atualmente, existem várias tecnologias para o desenvolvimento de aplicações web, porém nem todas seguem os padrões recomendados pelo W3C, pois elas não são acessíveis a todos os dispositivos que tem acesso a Internet. No entanto, quando tais padrões não são utilizados, problemas para os desenvolvedores também acabam ocorrendo, pois ele terá que desenvolver diferentes versões de aplicações, sendo uma para cada tipo de dispositivo, caso pretenda tornar sua aplicação acessível a todos os tipos de usuários, pois a aplicação que é compatível

a um determinado dispositivo pode não ser a outro, assim, tornando os custos elevados

e dificultando a manutenção da aplicação. Com a utilização dos Padrões Web, o trabalho do desenvolvedor será menor, pois uma única aplicação pode ser compatível a todos os dispositivos, sejam (celulares, palm, computadores etc.), tornando a sua manutenção mais fácil e reduzindo significativamente os custos (ZELDMAN, 2003). Contudo, de acordo com o W3C as tecnologias que fazem parte das especificações propostas pelo mesmo estão organizadas da seguinte maneira: estrutura, apresentação e comportamento. Como pode ser observado na figura 1, para o desenvolvimento da estrutura da aplicação pode-se optar por usar a HTML juntamente com XML ou usar a XHTML. Na apresentação pode-se optar por utilizar CSS1 ou CSS2. E, para o comportamento, pode-se utilizar uma das seguintes tecnologias: ECMAScript ou

8

DOM juntamente com o JavaScript.

8 DOM juntamente com o JavaScript . FIGURA 1 - Trio dos Padrões Web . (Fonte:

FIGURA 1 -

Trio dos Padrões Web.

(Fonte: ZELDMAN, 2003).

A seguir apresenta-se uma breve explanação sobre o trio dos Padrões Web,

bem como as suas tecnologias.

2.2.1 Estrutura

A estrutura refere-se a organização lógica da aplicação Web. Permite que as

informações estejam bem estruturadas, permitindo maior facilidade do usuário em encontrar o assunto ou serviço fornecido pela aplicação. Alguns exemplos são: títulos, subtítulos, parágrafos, listas numeradas, lista de definições etc.

A estrutura pode ser contemplada pelas seguintes tecnologias: HTML, XML

e XHTML.

2.2.1.1 HTML

A HTML (Hyper Text Markup Language) é uma linguagem de marcação que

descreve a estrutura, o conteúdo e a apresentação de um documento e a relação entre outros documentos. Com ela pode-se apresentar uma informação e vinculá-la a outros tipos de recursos, como texto, áudio, vídeo, gráficos, entre outros, permitindo que diferentes tipos de informações sejam exibidos de forma simultânea e que esses recursos diferentes se contemplem (MACEDO, 2004).

9

Um documento HTML é composto de dois tipos de texto: as informações que serão exibidas e as tags que definirão como os navegadores irão apresentar as informações contidas dentro da aplicação Web. As tags são os elementos que compõe a estrutura de um documento HTML. Estas tags são os elementos de marcação.

QUADRO 1 -

Exemplo de código HTML

1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

2

<html>

3

<head>

4

<meta http-equiv="content-type" content="text/html; charset=iso-

8859-1">

5

<meta http-equiv="pragma" content="no-cache">

6

<meta name="description" content="Site exemplo de html 4.01 utilizando padrões W3C">

7

<meta name="keywords" content="html, w3c">

8

<meta name="author" content="Elisa Miranda Weiss">

9

<meta name="reply-to" content="elisaweiss@uniplac.net">

10

<meta name="language" content="pt-br">

11

<title>Exemplo Básico de HTML 4.01</title>

12

</head>

13

<body>

14

<div>

15

<h1>Exemplo de HTML Utilizando Padrões Web</h1>

16

</div>

17

<div id="principal">

18

<div id="menu">

19

<div class="opcao">

20

<a href="index.html" accesskey="i">Início</a>

21

</div>

22

<div class="opcao">

23

<a href="introducao.html" accesskey="d">Introdução</a>

24

</div>

25

<div class="opcao">

26

<a href="cap1.html" accesskey="1">Capítulo 1</a>

27

</div>

28

<div class="opcao">

29

<a href="cap2.html" accesskey="2">Capítulo 2</a>

30

</div>

31

<div class="opcao">

32

<a href="contato.html" accesskey="c">Contato</a>

33

</div>

34

</div>

35

<div>

36

A HTML (Hyper Text Markup Language) é uma linguagem de marcação

37

que descreve a estrutura, o conteúdo e a apresentação de um documento e a relação entre outros documentos. Com ela pode-se apresentar uma informação e vinculá-la a outros tipos de recursos, como texto, áudio, vídeo, gráficos, entre outros, permitindo que diferentes tipos de informações sejam exibidos de forma simultânea e que esses recursos

38

diferentes se contemplem.

10

</div>

39

 

</div>

40

41

<div> &copy; 2006 <a href="mailto:elisaweiss@uniplac.net"

42

accesskey="e">Elisa Miranda Weiss</a> </div>

43

 

</body>

44

 

</html>

No quadro 1 é apresentado o exemplo de código HTML. Foi utilizado a

declaração DOCTYPE (linha 1), que indica a linguagem de marcação utilizada na apresentação do site e a DTD (Document Type Definition), que possui as regras para validação do código. Esta deve ser a primeira linha de cada documento. As tags

</html> (linhas 2 e 44) indicam, respectivamente, o início e o fim do

documento e deve englobar todas as demais tags existentes. Entre o elemento head (linhas 3 a 12), localizam-se as definições lógicas sobre o documento. Estas informações não são exibidas pelos navegadores. Entre as definições lógicas têm-se os seguintes elementos: meta, link e title. O elemento meta (linhas 4 a 10) é utilizado para definir os atributos identificadores do site, ou seja, as meta-informações do documento, como o autor da página, os direitos autorais, as palavras chaves que auxiliam nos sites de busca etc. O elemento title (linha 11) indica o título do documento, que aparece na parte superior do browser. O elemento body (linhas 13 a 43) define todo o conteúdo do documento que é visualizado pelos usuários. Dentro dele tem-se uma grande variedade de tags que

podem ser usadas. O exemplo da figura 2 apresenta as tags <div>

</div> (linhas 14

<html>

a 42), que têm como função fazer a divisão do documento em blocos, criando a estrutura do documento. Neste exemplo foi utilizado três divs: o primeiro para a definição do título (linhas 14 a 16), o segundo para o conteúdo (linhas de 17 a 39) e o terceiro para o rodapé (linhas de 40 a 42).

11

11 2.2.1.2 XML FIGURA 2 - Interface gerada pelo código HTML do quadro 1 A XML

2.2.1.2 XML

FIGURA 2 -

Interface gerada pelo código HTML do quadro 1

A XML (eXtensible Markup Language) é uma linguagem para estruturar dados. Ela é um aperfeiçoamento da HTML, ou seja, ela foi desenvolvida para solucionar limitações da HTML e não para substituí-lo, ou seja, foi criada para uma melhor tentativa de criação e armazenamento de informações, permitindo uma estruturação melhor, integração e organização das informações que são armazenadas na web.

É importante ressaltar que a XML também é uma linguagem de marcação, usada para a descrição, captura, processamento e publicação de informações em diferentes tipos de mídias (MACEDO, 2004). Porém, tem como finalidade oferecer suporte aos usuários que possuem diferentes tipos de mecanismos para exibição de dados, como por exemplo leitores de textos para deficientes visuais, os quais não são interpretados pela estrutura HTML (MACEDO, 2004). Contudo, a XML oferece algumas vantagens para os usuários e também para os desenvolvedores, entre elas destacam-se (ZELDMANN, 2003):

Flexibilidade por trazer padrões abertos, ou seja, não possui um conjunto fixo de rótulos a serem usados como a HTML; cada usuário define um

12

conjunto de rótulos como seu vocabulário em sua aplicação, ela também não possui uma forma de visualização definida;

É usada como meio de transmissão de dados entre sistemas que utilizam tecnologias ou plataformas diferentes;

Faz com que as buscam tornem-se mais eficientes. No quadro 2 é apresentado um exemplo de código XML.

QUADRO 2 -

Exemplo código XML

1 2 <?xml version="1.0" encoding="ISO-8859-1"?> <cadastros> <nome>Cadastro de
1
2
<?xml version="1.0" encoding="ISO-8859-1"?>
<cadastros>
<nome>Cadastro de clientes</nome>
3
4
5
6
7
8
<clientes>
<cliente>
<nome>João Pedro Mendes</nome>
<endereco>Av. Luis Figueiredo nº 230</endereco>
</cliente>
<cliente>
<nome>Maria das Graças Melo</nome>
<endereco>Rua Olinto Meireles, 700 </endereco>
</cliente>
9
10
11
12
13
<cliente>
<nome>Américo Santos</nome>
<endereco>Rua Valmor Ribeiro, 124 </endereco>
</cliente>
<cliente>
<nome>Clarice Fernandes</nome>
<endereco>Av. Caldas Junior, 766 </endereco>
</cliente>
14
15
16
17
18
<cliente>
<nome>Frederico Machado</nome>
<endereco>Rua XXV de Novembro 357 </endereco>
</cliente>
</clientes>
</cadastros>
19

Como pode ser observado no quadro 2, na primeira linha é feita a declaração padrão do XML, a qual identifica um documento como sendo XML. Nessa declaração é apresentada a versão e o conjunto de caracteres do qual faz uso. As linhas restantes são diferenciadas para cada documento XML, porém é necessário que sempre ao se criar uma tag de abertura seja feita a sua finalização, assim como na linguagem HTML, conforme a tag <cadastros> na linha 2 é efetuado o seu fechamento na linha 19 </cadastros>.

13

2.2.1.3 XHTML

Segundo MACEDO (2004), a XHTML (eXtensible HyperText Markup Language) é uma reformulação da HTML, baseada na XML. Ela possui grandes vantagens, dentre elas destaca-se a compatibilidade da linguagem XHTML com as futuras aplicações de usuários, garantindo que aplicações criadas em XHTML estarão estáveis por longos anos.

A XHTML é o padrão de marcação atual, o qual vem substituindo a HTML

4.0, e é projetada para retornar uma estrutura lógica e rigorosa do documento para o conteúdo Web, visando com isto o bom funcionamento com outros padrões Web, como CSS e DOM, e para interagir bem com outros protocolos, aplicações e linguagens existentes e futuras baseados em XML (ZELDMAN, 2003). Contudo, o tempo de carregamento de uma aplicação XHTML é mais rápida, pois os browsers irão interpretar uma página limpa, sem ter que interpretar e decidir sobre renderização de erros de código. Uma página XHTML é mais acessível aos browsers e aplicações de usuários padrão, incrementando a interoperabilidade e a portabilidade dos documentos Web (ZELDMAN, 2003). Por ser uma linguagem de descrição de conteúdos com compatibilidade aos dispositivos e aplicações de usuários que existem hoje, ela combina tags (que são os elementos que compõe a estrutura de um documento) de marcação HTML com regras da XML. Este processo de padronização visa a exibição de páginas Web em diversos dispositivos como: celular, computadores portáteis, televisão, agendas eletrônicas, entre outros. Entretanto, em termos de acessibilidade, ela oferece vantagens como a

adaptação em qualquer ambiente que possua acesso à Internet, pois é uma linguagem independente de dispositivos e plataformas. A XHTML faz parte da estrutura de uma

aplicação Web. Esta estrutura contém dados formatados de acordo com o seu significado, como por exemplo, o título, o título secundário, o parágrafo, entre outros (ZELDMAN, 2003).

O quadro 3 apresenta um exemplo de código XHTML.

14

QUADRO 3 -

Exemplo de código XHTML

1

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0//EN”

"http://www.w3.org/TR/xhtml1-strict.dtd">

2

<html xmlns="http://www.w3.org/1999/xhtml>

3

<head>

4

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>

5

<meta http-equiv="pragma" content="no-cache" />

6

<meta name="description" content="Site exemplo de XHTML utilizando Padrões Web" />

7

<meta name="keywords" content="xhtml, w3c" />

8

<meta name="author" content="Elisa Miranda Weiss" />

9

<meta name="reply-to" content=elisaweiss@uniplac.net />

10

<meta name="language" content="pt-br" />

11

<title>Exemplo XHTML</title>

12

</head>

13

<body>

14

<div id="cabecalho">

15

<h1>Exemplo Básico de XHTML </h1>

16

</div>

17

<div id="principal">

18

<div id="menu">

19

<div class="opcao">

20

<a href="index.html" accesskey="i">Início</a>

21

</div>

22

<div class="opcao">

23

<a href="introducao.html" accesskey="d">Introdução</a>

24

</div>

25

<div class="opcao">

26

<a href="cap1.html" accesskey="1">O que é CSS</a>

27

</div>

28

<div class="opcao">

29

<a href="cap2.html" accesskey="2">C S S - 1</a>

30

</div>

31

<div class="opcao">

32

<a href="contato.html" accesskey="c">Contato</a>

33

</div>

34

</div>

35

<div id="conteudo">

36

XHTML (eXtensible HyperText Markup Language) é uma reformulação da

HTML baseada na XML. Ela possui grandes vantagens, dentre elas destaca-se a

compatibilidade da linguagem XHTML com as futuras aplicações de usuários,

garantindo desde que aplicações criadas em XHTML estarão estáveis por longos

anos.

37

38

</div>

</div>

39

40

<div id="rodape"> &copy; 2006 <a href="mailto:elisaweiss@uniplac.net" accesskey="e">Elisa Miranda Weiss</a> </div>

42

43

</body>

</html>

Como pode ser observado, o exemplo do código XHTML apresentado no quadro 3 não tem muitas diferenças entre o código HTML apresentado no quadro 1. A

15

principal diferença entre os códigos é que a XHTML não aceita as tags em letras maiúsculas como a HTML.

A figura 3 mostra a interface gerada pelo código XHTML do quadro 3.

3 mostra a interface gerada pelo código XHTML do quadro 3. FIGURA 3 - Interface gerada

FIGURA 3 -

Interface gerada pelo código XHTML do quadro 3

Mesmo utilizando a XHTML, no código a tag inicial é <html>, como pode ser observado na linha 2 do quadro 3. O atributo xmlns (XML namespace) indica que o namespace 1 primário utilizado no documento é o DTD XHTML. Os demais elementos presentes no código, seguem a mesma codificação a qual foi apresentada na HTML no

quadro1.

2.2.2 Apresentação

A apresentação refere-se a disposição dos elementos na aplicação Web, ou

seja, layout da aplicação. Elementos de apresentação podem ser: tipografia, posicionamento, cor, entre outros. Algumas das tecnologias que fazem parte da apresentação são: CSS1 e CSS2 (ZELDMANN, 2003).

1 Namespace (conjunto de nomes de elementos, seus atributos e a forma como devem ser utilizados em uma linguagem de marcação)

16

2.2.2.1 CSS

A CSS (Cascading Style Sheets) é uma especificação que define um

mecanismo simples para a adição de estilos, ou seja, elementos de apresentação visual como: tamanho e cor das fontes; espaçamento entre linhas e caracteres; margem do texto de um documento que fazem parte da apresentação de uma aplicação Web. Devido à utilização do CSS, passou-se a ter a HTML/XHTML preocupando-se apenas em estruturar o documento em blocos de informações (títulos, cabeçalhos, parágrafos, etc) enquanto o CSS controla o design (posicionamento, cores, fontes etc). Através do

CSS consegue-se, então, “separar o estilo do conteúdo” (MACEDO, 2004).

O CSS1 então consiste em facilitar a criação manualmente, permitindo ao

desenvolvedor uma maior versatilidade do design das aplicações sem interfirir no seu tamanho (ZELDMANN, 2003). Com a evolução das tecnologias, a CSS foi ficando defasada e, assim, houve a necessidade de ramificá-la, surgindo a CSS1 e logo após a CSS2. O suporte à CSS nos navegadores em uso atualmente está razoavelmente solidificado. A maioria dos navegadores visuais suporta a especificação CSS1 completa. A especificação CSS2, entretanto, é suportada em uma escala bem menor. Alguns navegadores ainda apresentam muitos problemas. Um exemplo é o Internet Explorer, um dos navegadores mais utilizados e que, lamentavelmente, se comporta segundo suas próprias regras, e ainda, não segue as normas dos Padrões Web. O que pode resultar em problemas aos seus usuários, tanto de interpretação quanto de layout de uma aplicação. Apesar disto, é possível fazer uso da maior parte da especificação sem

muitos inconvenientes, aceitando certa degradação na apresentação em navegadores com menor suporte. Desta forma, aplicações recentes demonstram o que se pode usar da especificação é mais do que suficiente para criar aplicações web que são bem estruturadas e possuem uma excelente apresentação visual. O uso dos estilos CSS são definidos e classificados conforme a sua abrangência, e pode ser aplicado de três formas: local, incorporada e externa (MACEDO, 2004):

Local: Modifica os atributos de uma única “tag” específica, em um

17

determinado ponto de um documento;

Incorporada: Define um modelo-padrão de CSS que será aplicado a todo um documento. Assim sendo, tudo o que estiver no conteúdo de um documento obedecerá aos comandos CSS estipulados uma única vez;

Externa: define um único modelo de CSS para ser aplicado a múltiplos documentos. Para tanto, deve-se construir um modelo de estilos e salvá-lo em um arquivo separado. Este modelo pode ser aplicado a qualquer documento, apenas referindo-se ao arquivo criado (MACEDO, 2004). Esses estilos de CSS podem ser usados em qualquer uma das suas especificações, seja ela CSS1 ou CSS2. O quadro 4 apresenta um fragmento de código CSS. Neste exemplo é apresentada a classificação externa dos estilos CSS, onde foi criado um arquivo somente para as declarações e formatações do site de exemplo.

QUADRO 4 -

Exemplo fragmento de código CSS

1 /* Definições gerais de estilo. */

2 body {

 

3 font-family: Helvetica, Arial, Verdana, sans-serif;

4 font-size: 12pt;

5 color: #000000}

6 /* Definições de estilo para título e subtítulo. */

7 h1 {

 

8 font-weight: bold;

9 font-size: 15pt;

10 text-align: center;

11 margin: 2px;

12 padding: 2px}

13 h2 {

 

14 font-weight: bold;

15 font-size: 12pt;

16 text-align: center;

17 background-color: #0000ff;

18 padding: 2px;

19 border: 2px solid #0000ff;

20 margin-top: 2px;

21 margin-right: 30%;

22 margin-left: 30%}

23 /* Definições para textos. */

24 p

{

25 font-weight: normal;

26 text-align: justify;

27 text-indent: 20pt;

28 padding: 2px;

29 margin: 2px;

30 line-height: 140%}

31 acronym {

 

32 font-weight: bolder;

33 font-style: italic}

34 /* Definições de estilo para links. */

35 a:link {

 

36 font-weight: bold;

18

37 text-decoration: none;

38 color: #0000ff}

39 a:visited {

40 font-weight: bold;

41 text-decoration: none;

42 color: #ff0000}

43 a:active {

44 font-weight: bold;

45 text-decoration: none;

46 color: #ffffff}

47 a:hover {

48 font-weight: bold;

49 text-decoration: underline;

50 color: #008000}

51 /* Definições de estilo das áreas lógicas do site. */

52 #cabecalho {

53 background-color: #e8e6e6;

54 border: 1px solid #000000}

 

55 #menu {

56 margin-top: 18px;

57 padding: 23px;

58 position: static}

59 div.opcao {

60 background-color: #e8e6e6;

61 padding: 0px;

62 text-align: center;

63 border: 1px solid #909090;

64 float: left;

65 width: 20%}

66 #conteudo {

67 background-color: #e8e6e6;

68 margin-top: 18px;

69 border: 1px solid #000000;

70 position: static}

71 #rodape {

72 text-align: center;

73 background-color: #e8e6e6;

74 margin-top: 18px;

75 padding: 2px;

76 border: 1px solid #000000;

77 position: static;

78 clear: both}

O quadro 4 mostra a sintaxe do CSS, onde pode ser observado que foram

feitas várias formatações, como por exemplo o body na linha 2 foram definidas as seguintes formatações para ele: o tipo de fonte (linha 3) = Helvetica, Arial, Verdana, sans-serif, o tamanho da fonte (linha 4) = 12 e a cor da fonte (linha 5)= #000000 (preto).

Como pode ser observada, a figura 3 e a figura 4 possuem o mesmo conteúdo, porém a figura 4 utiliza o CSS para a formatação da aplicação. A única diferença é que no código foi acrescentada uma linha para chamar o

CSS, pois o estilo usado é externo, onde é criado um arquivo com o nome do arquivo.css.

A figura 4 mostra a utilização do código XHTML com CSS.

19

19 FIGURA 4 - Exemplo com a utilização do CSS. QUADRO 5 - Usando folhas de

FIGURA 4 -

Exemplo com a utilização do CSS.

QUADRO 5 -

Usando folhas de estilo

1

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0//EN”

2

"http://www.w3.org/TR/xhtml1-strict.dtd">

3

4

<html xmlns="http://www.w3.org/1999/xhtml>

5

<head>

6

<meta http-equiv="content-type" content="text/html; charset=iso-

7

8859-1"/>

8

<meta http-equiv="pragma" content="no-cache" />

9

<meta name="description" content="Site exemplo de XHTML utilizando

10

Padrões Web" />

11

<meta name="keywords" content="xhtml, w3c" />

12

<meta name="author" content="Elisa Miranda Weiss" />

13

<meta name="reply-to" content=elisaweiss@uniplac.net />

14

<meta name="language" content="pt-br" />

15

<link href="estilo.css" rel="stylesheet" type="text/css">

16

<title>Exemplo XHTML</title>

17

</head>

18

<body>

19

.

20

.

21

.

22

.

Para que a aplicação seja formatada com os estilos criados basta que seja incluída uma linha de código dentro do elemento <head>, que irá chamar a folha de estilo externa definida. Neste exemplo, o documento de estilos é estilo.css (linha 15) do código o qual vai chamar o estilo para fazer as formatações da aplicação, como as

20

cores de textos, posicionamento, cores de fundo, entre outros. Para que o CSS funcione, basta salvar novamente o arquivo HTML e estará pronto.

2.2.3 Comportamento

Refere-se ao uso das linguagens baseadas em objetos, responsáveis pela manipulação dos objetos definidos pela linguagem utilizada em uma aplicação web. Na prática, esses objetos que compõem a página web ou a própria aplicação como um todo, podem ser acessados, alterados, apagados ou ter suas propriedades alteradas. Isso possibilita ao desenvolvedor web implementar efeitos como: animação de textos, rollovers 2 de imagens (SILVA, 2005). Permite ainda criar efeitos que funcionam em qualquer dispositivo ou plataforma. As tecnologias que fazem parte do comportamento são: ECMAScript e DOM.

2.2.3.1 ECMAScript

É uma linguagem de script chamada de ECMAScript, que é baseada em implementações para várias linguagens de script, incluindo o famoso JavaScript. ECMAScript é uma associação internacional voltada para a padronização de informação e sistemas de comunicação. É constituída por grandes nomes da indústria como a IBM, Alcatel, Intel, Compaq, Microsoft, Philips, entre outras. Seu principal objetivo é o desenvolvimento e publicação de especificações e padrões a serem seguidos pela indústria em geral. Para a web, um importante documento gerado pelo ECMA tem o nome de ECMA-262. O ECMAScript e suas linguagens derivadas, permitem a aplicação dos paradigmas de programação Orientada a Objetos, facilitando a modelagem e reaproveitamento dos programas (AQUINO, 2002).

Os scripts são pequenos programas que interagem com o navegador e o conteúdo HTML/XHTML de um documento. A sua arquitetura baseada em objetos permite realizar uma ampla variedade de funções, como validar dados de entrada de usuários, acrescentarem elementos interativos e efetuar cálculos. Pelo fato de ser executado no lado do cliente, ou seja, pelo navegador do usuário, a sua utilização torna-se mais interessante e vantajosa.

2 Rollovers de imagens (são imagens que mudam quando se passa o mouse sobre elas).

21

2.2.3.2 DOM

O DOM (Document Object Model) de acordo com o W3C é uma interface

independente de navegador, plataforma e possui linguagem neutra, que permite que programas e scripts acessem e atualizem dinamicamente o conteúdo, a estrutura, e o estilo de documentos. O documento também pode ser processado e os resultados desse processamento podem ser novamente incorporados à página apresentada (ZELDMAN,

2003).

O DOM torna outros componentes padrão da sua página (folhas de estilo,

elementos de marcação e scripts) acessíveis à manipulação. Se a aplicação Web, fosse um filme, a XHTML seria a roteirista, a CSS seria a diretora de arte, as linguagens de script seriam os efeitos especiais e o DOM seria o diretor que supervisiona toda a produção (ZELDMAN, 2003). Uma grande vantagem é que a interatividade orientada ao DOM acontece no cliente, isto é, funciona na unidade de disco rígido do cliente que está visitando a aplicação. Isso ocorre mesmo quando a conexão com a Internet é interrompida. Ele permite que as páginas web se comportem como aplicações, ou seja, pode simular o comportamento de um software convercional. Por exemplo, o visitante pode alterar a forma de vizualizar os dados, deixando os dados de uma tabela em ordem alfabética, inverter a classificação, ordenar um lista em ordem numérica crescente e decrescente, entre outros exemplos. Essas alterações, por exemplo, não requerem que o usuário esteja com uma conexão ativa, sem o transtorno de uma substituição de página (ZELDMANN, 2003). Contudo, o objetivo do DOM é proporcionar uma interface de programação

padrão, que possa ser utilizada por um amplo número de aplicativos e ambientes. De acordo com essas considerações, buscou-se apresentar uma comparação entre aplicações utilizando Padrões Web e outras sem a utilização destes. Esta comparação tem por finalidade reforçar a importância do uso dos Padrões Web, bem como demonstra a sua aplicação. Na próxima seção é apresentada esta comparação.

22

2.3 Tecnologias sem padrões X com Padrões Web

Nesta seção apresentam-se as diferenças entre duas aplicações através de um comparativo, como mencionado anteriormente. A abordagem é realizada entre uma aplicação usando Padrões Web e outra idêntica, em relação ao conteúdo apresentado, sem fazer uso deste padrões. Assim, pode ser possível visualizar as vantagens que os Padrões Web proporcionam ao desenvolvimento. As aplicações apresentadas são de um site sobre cadastro geral de empregados e desempregados e que, através dele, pode ser acessado o site do Ministério do Trabalho e do Emprego, onde é possível se cadastrar para conseguir o primeiro emprego. O site, ainda, permite fazer download de alguns aplicativos CAGED (Cadastro Geral de Empregados e Desempregados) disponíveis para o empregador. O empregador pode fazer a declaração dos funcionários pela Internet, acertar o PIS, entre outros serviços que podem ser encontrados no endereço do site. Segundo a figura 5, a aplicação sem os Padrões Web, a qual foi construída utilizando tabelas para tabular os dados do site e um banner animado em Flash. O menu foi desenvolvido dentro do código da aplicação, ou seja, dentro da estrutura, usando a tecnologia HTML.

ou seja, dentro da estrutura, usando a tecnologia HTML. FIGURA 5 - Aplicação sem o uso

FIGURA 5 -

Aplicação sem o uso dos Padrões Web

(Fonte: SOARES, 2005)

23

A figura 6 apresenta uma aplicação usando Padrões Web. Na aplicação com a utilização dos padrões, o design foi mantido praticamente o mesmo, apenas na apresentação é que se podem notar algumas diferenças entre a figura 5 e a figura 6. O banner feito em Flash utilizado na aplicação sem o uso dos padrões, foi substituído por um outro banner feito em formato JPG na aplicação com o uso dos Padrões Web, melhorando significativamente a sua performance e acessibilidade (SOARES, 2005).

a sua performance e acessibilidade (SOARES, 2005). FIGURA 6 - Aplicação com o uso dos Padrões

FIGURA 6 -

Aplicação com o uso dos Padrões Web.

(Fonte: SOARES, 2005)

Ainda, na aplicação com padrões, o menu foi modificado para um menu desenvolvido em CSS, o que permite ser compatível com todos os navegadores. Com isto, é possível fornecer maior espaço entre as linhas dos links centrais, os quais também possuem agora mais espaço horizontalmente e verticalmente (SOARES,

2005).

Conforme a figura 7, a aplicação sem os Padrões Web possui 411 linhas de código, enquanto a versão que adotou os Padrões Web ficou com apenas 71 linhas. Este resultado mostra que a nova aplicação ficou mais simples e fácil de entender, ganhando mais performance e, ainda é quase seis vezes menor que a versão anterior (SOARES, 2005).

24

24 FIGURA 7 - Comparação da quantidade de linhas de código. (Fonte: SOARES, 2005) Na figura

FIGURA 7 -

Comparação da quantidade de linhas de código. (Fonte: SOARES, 2005)

Na figura 8 é representada uma comparação entre as duas aplicações mostrando as diferenças entre o tamanho dos arquivos e o tempo de download (figura 9) de cada uma.

dos arquivos e o tempo de download (figura 9) de cada uma. FIGURA 8 - Tamanho

FIGURA 8 -

Tamanho dos arquivos

(Fonte: SOARES, 2005)

Conforme a figura 8, pode ser observado que no tamanho do arquivo de uma aplicação para a outra também há uma boa diferença, pois o arquivo da aplicação que utiliza os Padrões Web ficou bem menor que o arquivo da aplicação sem os padrões. O tempo de download (figura 9) em diversos tipos de conexão mostra como a aplicação com os padrões é muito mais rápida, pois a aplicação fica mais enxuta.

25

25 FIGURA 9 - Tempo de download (Fonte: SOARES, 2005) Na figura 10 é apresentada uma

FIGURA 9 -

Tempo de download

(Fonte: SOARES, 2005)

Na figura 10 é apresentada uma comparação entre as duas aplicações mostrando a variação no tempo de resposta. O gráfico com o tempo de carga, mostra a diferença do tempo médio de resposta das duas aplicações, onde foi realizado um teste utilizando várias quantidades de usuários simultâneos (01, 10, 100 e 200) para verificar o tempo de resposta das mesmas, e mais uma vez pode-se comprovar que com a utilização das especificações do W3C tem-se muito mais desempenho, neste caso no tempo de resposta (SOARES, 2005).

desempenho, neste caso no tempo de resposta (SOARES, 2005). FIGURA 10 - Tempo de resposta. (Fonte:

FIGURA 10 -

Tempo de resposta.

(Fonte: SOARES, 2005).

De acordo com a abordagem comparativa acima, apresenta-se um resumo, através do quadro 6 comparando a aplicação que usa padrões com a que não usa Padrões Web.

QUADRO 6 -

Comparativo entre as aplicações

Aplicação não obedecendo os Padrões Web

Aplicação obedecendo os Padrões Web

26

Utiliza-se de tabelas para tabular os dados

Utiliza-se de um layout simples de três colunas, onde é feito uma estrutura HTML utilizando <div> para separar as colunas

Usou um banner animado em flash, pesado para carregar e não acessível a todos dispositivos

O

flash deu lugar a um banner em formato JPG,

o

qual é acessível a todos dispositivos

Menu desenvolvido todo dentro da aplicação

O

menu foi desenvolvido utilizando CSS,

compatível a todos os navegadores

Código grande, o que dificulta a manutenção

Código pequeno, o que facilita a manutenção

Pesado para carregar

Mais leve e interativo

Espaço pequeno entre linhas dos links

Maior espaço entre linhas dos links centrais

Tamanho do arquivo bem maior

Tamanho do arquivo é bem menor

O tempo de download é mais lento

O

tempo de download é mais rápido

2.4 Conclusão

Este capítulo apresentou as características da adoção dos Padrões Web e os benefícios que o mesmo oferece tanto ao desenvolvedor quanto ao usuário. O capítulo também ajuda a reforçar a importância da utilização dos Padrões Web no desenvolvimento de aplicações para a Internet, pois através dele pode ser visto os benefícios que os padrões oferecem, ajudando na escolha das tecnologias que serão usadas no desenvolvimento do trabalho proposto. Assim, as aplicações que são desenvolvidas dentro desses padrões serão acessíveis a qualquer dispositivo, plataforma e usuário e trazem ao desenvolvedor mais tranquilidade, pois as suas aplicações possuem melhor desempenho, facilitando a sua manutenção e, também, não haverá a necessidade de ser refeita, pois ela será acessível também a qualquer dispositivo ou plataforma que surgirem futuramente. Para contemplar o desenvolvimento da aplicação, baseado no estudo realizado e nas características das tecnologias apresentadas, serão utilizadas as seguintes tecnologias: o XHTML para a estrutura, o CSS1 para a apresentação e JavaScript para o comportamento. Essas tecnologias foram definidas porque oferecem maior suporte à maioria dos navegadores usados no mercado atualmente.

27

3 MODELAGEM DO ESTUDO DE CASO

Neste capítulo é feita a descrição da modelagem do estudo de caso, na qual é

abordada a descrição do produto desenvolvido. A apresentação do sumário executivo,

o qual apresenta uma descrição sucinta do projeto, juntamente com o levantamento de

requisitos necessários para o funcionamento da aplicação e o diagrama de navegação da aplicação.

3.1 Sumário executivo

Como estudo de caso para aplicação dos Padrões Web, foi desenvolvida uma

aplicação Web institucional sobre a história da cidade de Lages, apresentando a história e cultura do povo lageano, relatando as suas lendas, seus governos, mostrando

a culinária, entre outros pontos que serão abordados. Tem como objetivo atingir o maior número de usuários possíveis, para que assim a cultura do povo lageano seja mais divulgada e conhecida. A modelagem do sistema foi desenvolvida com base na metodologia do Processo Unificado. Por estar sendo desenvolvido um sistema Web, foram utilizados para a modelagem:

O sumário executivo, o qual apresenta uma descrição sucinta do projeto a ser desenvolvido;

O levantamento de requisitos necessários para o funcionamento do sistema, seguido de uma lista de conceitos e consultas;

O projeto lógico de banco de dados e o diagrama de navegação da aplicação.

28

3.2 Descrição do conteúdo do site

Nesta seção é feita a descrição do conteúdo das interfaces que a aplicação sobre a história de Lages possui. Ressalta-se que esses são os links que dão acesso às informações pertencentes ao site:

Interface Inicial: Página inicial da aplicação. Nela contém todos os principais links da aplicação, como: história, lendas, cultura, governos, clima, serviços etc. Proporciona acesso às outras páginas. Ela tem uma descrição sobre a história.

Interface Histórico: Nela deve conter um título e um resumo da história da cidade de Lages. Ao clicar no título, será possível ter acesso completo sobre as informações da história de Lages. Na página detalhada deve conter fotos da cidade.

Interface Datas Históricas: Nela deve conter um título e um resumo das datas históricas de Lages. Ao clicar no título é possível ter acesso completo às informações da data selecionada. Descreve as principais ocorrências na cidade e também pode conter fotos.

Interface Governos: Nesta página deve conter um título e um resumo dos governos de Lages. Ao clicar no título, é possível ter acesso completo às informações sobre o governo selecionado. Apresenta o histórico da política e dos políticos que fizeram parte na cidade de Lages.

Interface Lendas: Nesta página deve conter um título e um resumo das lendas de Lages. Ao clicar no título é possível ter acesso completo às informações da lenda selecionada. Deve conter foto de cada lenda.

Interface Cultura: Nesta página deve conter um título e um resumo da cultura de Lages. Ao clicar no título é possível ter acesso completo sobre às informações da cultura lageana.

Interface Clima: Nesta página deve conter um título e um resumo do clima de Lages. Ao clicar no título é possível ter acesso completo sobre às informações do clima de Lages. Descreve como é o clima, o tipo de

29

vegetação e como são as estações do ano na cidade.

Interface Culinária: Nesta página pode ser cadastrada receitas, e a elas poderão ser atribuídas notas.

Interface Serviços: Nesta página deve conter um título e um resumo dos principais hotéis, restaurantes, pizzarias, hotéis fazendas e motéis de Lages. Ao clicar no título é possível ter acesso completo sobre o serviço selecionado. Apresenta uma listagem dos principais serviços da cidade, contendo endereço e telefone de cada um.

Interface Eventos: Nesta página deve conter um título e um resumo dos eventos de Lages. Ao clicar no título é possível ter acesso completo sobre às informações do evento selecionado. A página inicial traz o principal evento que estiver ocorrendo na cidade.

Interface Restrita: Nesta página deve ter acesso somente às pessoas cadastradas com login e senha. A seguir, é apresentado o levantamento de requisitos da aplicação Web.

3.3 Levantamento de requisitos

Nesta seção é apresentado o levantamento de requisitos da aplicação Web desenvolvida.

QUADRO 7 -

Requisito manter informação do usuário

F1 Manter informação do Usuário

 

Oculto ( )

 

Descrição: O sistema deve permitir a inserção, alteração, exclusão e consulta de dados dos Usuários, devendo ser informado para inserção: nome, email, senha, tipo de usuário.

 

Requisito Não Funcional:

 

Nome

Restrição

Categoria

Desejável

Permanente

NF1.1

Geração

do

O sistema deverá gerar um código do usuário automaticamente.

Especificação

   

X

Código do Usuário

 

NF1.2 Associar um Perfil ao Usuário

Deverá ser possível associar um perfil a cada usuário a partir de uma lista:

Interface

   

X

Administrador, Usuário .

 

QUADRO 8 -

Requisito tipo de usuário

F2 Tipo de Usuário

Oculto ( )

Descrição: O sistema deve permitir a inserção, alteração, exclusão e consulta do tipo de Usuário, devendo ser informado para inserção: nome do tipo de usuário, atribuições, descrição.

30

Requisito Não Funcional:

 

Nome

Restrição

Categoria

Desejável

Permanente

NF2.1

Geração

do

O

sistema deverá gerar um código do tipo

Especificação

 

X

Código

do

tipo

de

de

usuário automaticamente.

usuário

 

QUADRO 9 -

Requisito manter cadastro de serviços

F3 Manter Cadastro de Serviços

 

Oculto ( )

 

Descrição: O sistema deve permitir a inserção, alteração, exclusão e consulta de dados dos Serviços devendo ser informado: código do Serviço, tipo de serviço, nome, endereço, telefone, e-mail, site.

Requisito Não Funcional:

 

Nome

Restrição

Categoria

Desejável

Permanente

NF3.1 Geração do Código

O

código deverá ser gerado

Especificação

 

X

automaticamente pelo sistema

NF3.2 Identificação do tipo de Serviço

O

tipo de Serviço deve se identificado

Especificação

 

X

pelo seu código

NF3.3 Informações do(s) Serviço(s)

Deve ser possível escolher, de uma lista, uma ou mais informações que o serviço pertence. Dentre elas: Restaurantes, Pizzarias, Hotéis, Motéis, Pousadas.

Interface

X

 

QUADRO 10 -

Requisito tipo de serviço

F4 Tipo de Serviço

 

Oculto ( )

 

Descrição: O sistema deve permitir a inserção, alteração, exclusão e consulta do tipo de Serviço, devendo ser informado para inserção: nome do tipo de Serviço, descrição.

 

Requisito Não Funcional:

 

Nome

Restrição

Categoria

Desejável

Permanente

NF4.1

Geração

do

O

sistema deverá gerar um código do tipo

Especificação

 

X

Código

do

tipo

de

de serviço automaticamente.

usuário

QUADRO 11 -

Requisito manter cadastro de eventos

F5 Manter Cadastro de Eventos

 

Oculto ( )

 

Descrição: O sistema deve permitir a inserção, alteração, exclusão e consulta de dados dos Eventos devendo ser informado: código do Evento, nome, descrição, foto, data de início, data de término.

Requisito Não Funcional:

 

Nome

Restrição

Categoria

Desejável

Permanente

NF5.1 Geração do Código

 

O

código deverá ser gerado

Especificação

 

X

automaticamente pelo sistema

NF5.2

Identificação

do

O

Evento deve se identificado pelo seu

Especificação

 

X

Evento

nome.

QUADRO 12 -

Requisito manter cadastro de receitas

F6 Manter Cadastro de Receitas

 

Oculto ( )

 

Descrição: O sistema deve permitir a inserção, alteração, exclusão e consulta de dados das Receitas devendo ser informado: código da Receita, nome, tipo de receita, ingredientes, modo de fazer, foto, situação.

 

Requisito Não Funcional:

 

Nome

Restrição

Categoria

Desejável

Permanente

NF6.1 Geração do Código

 

O

código deverá ser gerado

Especificação

   

X

automaticamente pelo sistema

 

NF6.2

Identificação

da

A

Receita deve se identificada pelo seu

Especificação

   

X

Receita

nome

 

NF6.3 Informações da(s)

Deve ser possível escolher, de uma lista,

Interface

X

 

31

Receitas(s)

o tipo que pertence. Dentre elas: Doces ou Salgadas

     
 

QUADRO 13 -

Requisito tipo da receita

 

F7 Tipo de Receita

 

Oculto ( )

 

Descrição: O sistema deve permitir a inserção, alteração, exclusão e consulta do tipo de Serviço, devendo ser informado para inserção: nome do tipo de Receita, descrição.

 

Requisito Não Funcional:

 

Nome

Restrição

 

Categoria

Desejável

Permanente

NF7.1

Geração

do

O

sistema deverá gerar um código do tipo

Especificação

 

X

Código do tipo de receita

de

receita automaticamente.

Os requisitos suplementares do sistema são apresentados no quadro 14.

QUADRO 14 -

Requisitos suplementares do sistema

Nome

 

Restrição

Categoria

Desejável

Permanente

S1 Linguagem de Programação

O

sistema deverá ser desenvolvido

Implementação

   

em

XHTML, CSS, JavaScript e PHP

 

5.0

S1 Banco de Dados

O

banco de dados a ser utilizado é o

Implementação

   

PostGreSQL.

S2 Perfil de usuário

O

sistema deve ter dois níveis de

Segurança

 

X

acesso:

Nível 1 = Administrador Nível 2 = Usuário comum.

S3 Forma de acesso

O

sistema poderá ser acessado de

Arquitetura

 

X

qualquer computador com acesso a Internet e por qualquer usuário com acesso a Web.

3.3.1 Organização dos requisitos

A estrutura de interação de inclusão, exclusão, consultas e alterações de

dados simples usualmente segue uma mesma forma geral e consiste em um único acesso ao sistema através do nível de usuário. Assim, não existe a necessidade em considerar tais operações como casos de uso (WAZLAWICK, 2004). Devido a isso, o projeto em questão envolve apenas operações de manutenção de cadastro, o que dispensa a geração de casos de uso. Essas operações, por sua vez, estão associadas a uma lista de conceitos (quadro 15).

QUADRO 15 -

Lista de conceitos

Conceito

I

A

E

C

Observação

Referência Cruzada

32

Usuário

X

X

X

X

Só é possível excluir um usuário se não houver receitas associadas.

F1, F2

Receita

X

X

X

X

Só é possível excluir uma receita pelo administrador ou pelo próprio usuário que a cadastrou.

F6, F7

Eventos

X

X

X

X

Só é possível excluir um evento pelo administrador.

F5

Serviços

X

X

X

X

Só é possível excluir um serviço pelo administrador.

F3, F4

Tipo de

X

X

X

X

Só é possível excluir um tipo de receita pelo administrador se não houver receita associada

F7, F6

Receita

Tipo de

X

X

X

X

Só é possível excluir um tipo de serviço pelo administrador se não houver serviço associado.

F4, F3

Serviço

3.4 Projeto lógico de banco de dados

Segundo HEUSER (2001), o projeto do banco de dados de um sistema é dividido em quatro etapas, as quais devem ser executadas na seguinte ordem:

Levantamento de requisitos;

Modelagem conceitual: corresponde a uma abstração de mais alto nível e independente de banco de dados. Geralmente representada pelo diagrama entidade-relacionamento (E-R);

Modelagem lógica: representa a modelagem conceitual em um modelo de banco de dados (relacional, orientado a objetos, objeto relacional etc.). Esta etapa depende das características do banco de dados adotado;

Modelagem física: corresponde à implementação do banco de dados. Nesta etapa elaboram-se os scripts para criação do banco de dados.

33

33 FIGURA 11 - 3.5 Diagrama de navegação Diagrama do modelo lógico do banco de dados

FIGURA 11 -

3.5 Diagrama de navegação

Diagrama do modelo lógico do banco de dados

Nesta seção é apresentado o diagrama de navegação da aplicação desenvolvida. O diagrama de navegação mostra que através da interface principal é possível acessar as demais interfaces e, também, estando em qualquer uma das interfaces é possível voltar a interface inicial. A figura 12 mostra o diagrama de navegação da aplicação.

34

34 3.6 Design gráfico FIGURA 12 - Diagrama de navegação. É apresentado a seguir o design

3.6 Design gráfico

FIGURA 12 -

Diagrama de navegação.

É apresentado a seguir o design gráfico da aplicação, mostrando as interfaces

internas do estudo de caso.

A figura 13 apresenta a estrutura da página principal da aplicação, onde está

o posicionamento de cada componente como: menu, cabeçalho, rodapé e conteúdo .

componente como: menu, cabeçalho, rodapé e conteúdo . FIGURA 13 - Estrutura da interface inicial. Conforme

FIGURA 13 -

Estrutura da interface inicial.

Conforme a figura 13, pode-se observar como a interface inicial é apresentada. Nela, há um menu o qual permite que o usuário acesse as demais

35

interfaces, como: histórico, datas históricas, clima, cultura, lendas, governos entre outras.

É apresentada a previsão do tempo, em tempo real, sendo disponível nas informações adicionais, como também os eventos e as enquetes. No conteúdo é apresentada uma frase sobre o que a história ensina, escrita pelo José Honório Rodrigues (Costa, 1982). As interfaces internas seguem a mesma estrutura apresentada pela interface

inicial.

3.7 Conclusão

Este capítulo é muito importante para dar continuidade ao trabalho, pois os requisitos apresentados fazem parte do desenvolvimento do sistema. Com a realização desta prática, pode-se concluir que é de suma importância a realização da modelagem, antes da implementação, pois tem-se mais facilidade no momento do desenvolvimento da mesma, como também, na visualização das associações entre os conceitos e na detecção de possíveis falhas. Algumas dificuldades foram encontradas, por não possuir muita prática no uso das ferramentas case. Porém, através das orientações foi possível alcançar os objetivos propostos para sua concretização.

36

4 IMPLEMENTAÇÃO

Este capítulo tem como objetivo apresentar o processo de implementação do

projeto, descrevendo as tecnologias utilizadas no desenvolvimento da aplicação web sobre a história da cidade de Lages.

O sistema foi desenvolvido através da linguagem PHP 5.1.6, para o banco de

dados utilizou-se o PostgreSQL 8.1, XHTML (eXtensible HyperText Markup Language ) para a estrutura, CSS1 (Cascading Style Sheets) para a apresentação e JavaScript para o comportamento.

4.1 Estrutura do projeto

Na implementação, da estrutura do projeto, foi utilizada a XHTML. A definição do elemento estrutura possui uma declaração DOCTYPE na linha 1, que identifica a tecnologia e a DTD que está sendo utilizada, ou seja, a declaração DOCTYPE é obrigatório pois especifica as regras que definem um padrão ou formato. Estas informações permitem aos navegadores identificarem como o site deve ser visualizado e manipulado (MACEDO, 2004). No trabalho, foi utilizado a DTD Transitional, a qual permite uma compatibilidade de transição com navegadores mais antigos.

O motivo pelo qual se usou a DTD Transitional foi por ela permitir utilizar

recursos que são considerados obsoletos nas novas versões de navegadores, mas que portanto ainda são úteis por questões de compatibilidade com versões mais antigas (MACEDO, 2004). Para que o documento possa ser validado pelo W3C com relação ao padrão é

37

necessário que se tenha feito a declaração da DTD usada. O quadro 16 apresenta o fragmento de código da estrutura do projeto, a qual foi utilizada XHTML.

QUADRO 16 -

Código da página inicial (index.php)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3 <html xmlns="http://www.w3.org/1999/xhtml">

 

4 <head>

5 <meta http-equiv="content-tupe" content="text/html; charset=iso-8859-1">

6 <meta http://equiv="pragma" content="no-cache"/>

7 <meta name="description" content="Lages"/>

8 <meta name="keywords" content="Cidade, Lages, Terra de encantos, Culinária, SC">

9 <meta name="author" content="Elisa Miranda Weiss"/>

10 <meta name="reply-to" content="elisaweiss@uniplac.net"/>

11 <meta name="language" content="pt-br"/>

12 <link href="<?php echo (isset($EstiloSite) ? $EstiloSite : 'Estilo.css') ?>"

13 rel="stylesheet" type="text/css"/>

14 <title> .:: Lages Terra de Encantos ::.</title>

 

15 </head>

16 <body >

17 <div id="topo">

18 <div class="img_topo"><p class="texto_topo">Lages Terra de Encantos</p></div>

 

19 </div>

20 <div id="conteudoEsq">

21 <?php include ("esquerda.php"); ?>

22 </div>

23 <div id="colCentral">

24 <h4> "A história ensina um patriotismo crítico e sadio, desenvolve certas

25 qualidades do pensamento e do coração,

26 dando uma lição de tolerância e de humanidade. Com seu estudo ganhamos

27 sabedoria e compreensão, porque adestramos

28 o nosso juíso político, ampliamos nossa simpatia e aprofundamos nossa

29 consciência. À sua luz vemos o que têm sido

30 os homens e aprendemos o que são hoje, de tal modo e com tal extensão que

31 Trevelyan chega a perguntar se a história

32 dos Homens não é um perpétuo evangelho".</h4>

33 <h4>José Honório Rodrigues - "Teoria da História do Brasil" - capítulo I.</h4>

34 </div>

35 <div id="conteudoDir">

36 <?php include ("direita.php"); ?>

37 </div>

38 <div id="rodape">

39 <?php include ("rodape.php"); ?>

40 </div>

41 </div>

42 </div>

43 </div>

44 </body>

 

45 </html>

De acordo com o quadro 16, no cabeçalho do mesmo (linhas 4 a 14) foram declarados os elementos de meta-informações, apresentando por exemplo: descrição do site (linha 7), palavras-chave (linha 8), link para página de estilo (linha 12). O título da página está definido na ( linha 14).

38

Ainda na implementação da estrutura foi utilizada a tag <div>, que é abreviatura de divisão. A estrutura do cabeçalho ou topo inicia na linha 17 e finaliza na linha 19, sendo inserido nele apenas uma imagem através da classe (class="img_topo") e um texto que aparece sobre a imagem (class="texto_topo"). O menu esquerdo inicia na linha 20 e finaliza na linha 22. O menu direito inicia da linha 35 e finaliza na linha 37. A estrutura da coluna central inicia na linha 23 e finaliza na linha 34. Por fim, a estrutura do rodapé é inicializada na linha 38 e finalizada na linha

40.

Os identificadores (id) declarados nas tags <div> da estrutura, são referenciados pelo documento CSS, o qual tem como função posicionar estes elementos dentro do layout. Nas páginas secundárias, a estrutura é mantida a mesma da inicial.

4.2 Apresentação do projeto

Para o elemento apresentação, do projeto, foi utilizada a CSS1, por ser compatível com a maior parte dos browsers, como já mencionado. O quadro 17 apresenta fragmentos do código CSS implementado nesta aplicação. Foi utilizada a CSS externa, a qual define um arquivo com extensão .css contendo todos os estilos declarados em todas as páginas XHTML referenciando este arquivo para a formatação dos mesmos.

QUADRO 17 -

Código de apresentação do projeto (estilos.css)

1

body {

2

margin:0 0 5px 0;

3

padding:0;

4

font: 14px/1.5em

5

Verdana, Arial, Serif;

6

}

7

/* POSICIONAMENTO */

8

#topo{

9

width:100%;

10

background-image: url(topo_fundo3.jpg);

11

text-align:center;

12

}

13

#conteudoEsq {

14

float:left;

15

width:13%;

39

16

padding-bottom:50px;

17

border-right:0px solid #666;

18

}

19

#colCentral {

20

float:left;

21

width:59%;

22

height:25%;

23

color:#989;

24

padding:1px 30px;

25

text-align:justify;

26

background-color: #FFFFFF;

27

}

28

#conteudoDir {

29

float:right;

30

width:13%;

31

padding-bottom:10px;

32

}

33

#rodape {

34

width:100%;

35

padding-bottom:1px;

36

border-bottom:2px double #CCC;

37

text-align:center;

38

}

39

/*FORMATAÇÃO DO TOPO*/

40

.img_topo{

41

width:766px;

42

height:75px;

43

background-image: url(TopoNovo.jpg);

44

}

45

.texto_topo{

46

padding-top:25px;

47

color:#000000;

48

font-style: italic;

49

font-size: 35px;

50

font-weight: bold;

51

}

52

/*FORMATAÇÃO RODAPÉ - EMAIL*/

53

.rodape_mail{

54

color:#CCC;

55

font-size: 12px;

56

background-color: #FFFFFF;

57

}

58

/* FORMATAÇÃO DO CONTEÚDO */

59

h1{

60

padding-top:10px;

61

font-size:25px;

62

}

63

h2{

64

padding-top:20px;

65

font-size:30px;

66

color:#8B0000;

67

}

68

.cadastroRestrita{

69

padding-top:20px;

70

}

40

71

.cadastroUsuario{

72

padding-top:20px;

73

}

74

.textoCadReceita{

75

padding-top:5px;

76

font-size:9px;

77

}

78

h3{

79

color: #FFFFE0 ;

80

}

81

h4{

82

padding-top:20px;

83

color: #7A8B8B;

84

font-size:12px;

85

}

86

.Lendas{

87

padding-top:10px;

88

}

89

.Clima{

90

padding-top:10px;

91

}

92

.form_botao{

93

font-size:9px;

94

padding-top:5px;

95

}

96

.texto_8_bold{

97

font-size:12px;

98

color:#8B0000;

99

}

100

.texto_7{

101

font-size:10px;

102

color: #000000;

103

}

104

.texto_7_opcao{

105

font-size: 9px;

106

}

107

.HomeVoltar{

108

font-size:10px;

109

}

110

.metereologia{

111

padding-top:20px;

112

}

113

.BandeiraLages{

114

padding-top:20px;

115

}

116

.fotogralha{

117

padding-top:20px;

118

}

119

.botaoEnvCan{

120

padding-top:3px;

121

}

41

122

.TextoBotao{

123

font-size:7px;

124

}

125

/*FORMATAÇÃO FUNDO MENU*/

126

.fundoMenu{

127

background-image: url(FundoBotoes.jpg);

128

}

129

/*FORMATAÇÃO DOS BOTÕES DA ESQUERDA*/

130

.botao

{

131

top:20px;

132

left:50px;

133

margin:2px;

134

padding:3px;

135

}

136

.botao a {

137

font: bold 14px/24px arial, helvetica, sans-serif;

138

padding:0px;

139

text-decoration: none;

140

text-align:center;

141

color: #E6E8FA;

142

background: #666 url('botao_link.gif') no-repeat center center;

143

width:120px;

144

height:24px;

145

display:block;

146

}

147

.botao a:hover {

148

background: #666 url('botao_hover.gif') no-repeat center center;

149

color:#999;

150

}

151

/*FORMATAÇÃO DOS BOTÕES DA DIREITA*/

152

.botao_D{

153

top:20px;

154

left:50px;

155

margin:0px;

156

padding:3px;

157

}

158

.botao_D a {

159

font: bold 14px/24px arial, helvetica, sans-aerif;

160

padding:0px;

161

text-decoration: none;

162

text-align:center;

163

color:#E6E8FA;

164

background: #666 url('botao_link.gif') no-repeat center center;

165

width:120px;

166

height:24px;

167

display:block;

168

}

169

.botao_D a:hover {

170

background: #666 url('botao_hover.gif') no-repeat center center;

171

color:#999;

172

}