FACULDADE DE TECNOLOGIA Coordenação do Curso de Tecnólogo em Web Design RELATÓRIO FINAL DE ESTÁGIO

Transcrição

1 FACULDADE DE TECNOLOGIA Coordenação do Curso de Tecnólogo em Web Design RELATÓRIO FINAL DE ESTÁGIO Desenvolvimento do Portal Paraíba Jovem Marcus Vinícius de Barros Pontes João Pessoa PB 2007

2 FACULDADE DE TECNOLOGIA Coordenação do Curso de Tecnólogo em Web Design Desenvolvimento do Portal Paraíba Jovem Marcus Vinícius de Barros Pontes Relatório do apresentado Estágio à Supervisionado disciplina Estágio Supervisionado do Curso Superior de Tecnologia em Web Design como requisito final para a obtenção do grau de Tecnólogo em Web Design. Orientador: Aérton Ferreira Diniz Supervisor: Ricardo Roberto de Lima Coordenador do Curso de Web Design: Cândido Egypto Empresa: Vsoft Tecnologia Período: 24/10/2006 a 24/11/2007 João Pessoa PB 2007

3 RESUMO O estágio resume-se a montar páginas a partir de layouts desenvolvidos por um designer, utilizando para isso o editor de imagens Adobe Photoshop, além das tecnologias XHTML, CSS e Adobe Flash. Além disso, há também a atualização de conteúdo de sites dos clientes. O objeto analisado deste relatório é a construção do Portal Paraíba Jovem ( partindo de um layout desenvolvido por um designer.

4 AGRADECIMENTOS Agradeço primeiramente à minha família, aos meus amigos e colegas de classe, colegas de trabalho, professores, à Instituição FATEC. Sem estas pessoas este relatório não seria possível.

5 LISTA DE FIGURAS Figura 1: O portal Paraíba Jovem atualmente...13 Figura 2: Estrutura de pastas utilizadas pelos projetos de site da Vsoft...19 Figura 3: Exemplo do código XHTML padrão à todas as páginas...22 Figura 4: Exemplo de um código de estrutura em três colunas, comum em portais...23 Figura 5: Estrutura principal de uma página secundária...24 Figura 6: este código exemplifica o padrão utilizado para construir blocos de conteúdo...24 Figura 7: código XHTML que ilustra o menu principal da página...25 Figura 8: bloco de código XHTML que estrutura o bloco "tour virtual"...26 Figura 9: bloco de código XHTML que estrutura uma enquete...26 Figura 10: explicação gráfica do conceito de camadas...28 Figura 11: código CSS aplicado à DIV identificada por "container", centralizando os elementos contidos...30 Figura 12: código HTML que permite a estruturação de três colunas em uma página web...31 Figura 13: folhas de estilo que formatam o código HTML apresentado acima em três colunas paralelas...32 Figura 14: arquivos CSS incluídos na página interna...32 Figura 15: Código HTML que compõe o rodapé...33 Figura 16: código HTML que estrutura o topo...34 Figura 17: Código CSS que transforma um elemento textual em uma imagem...35 Figura 18: dois comentários condicionais inseridos na página. Um para cada arquivo CSS diferente...39 Figura 19: o arquivo Flash utilizado como base, antes de ser personalizado...40 Figura 20: área de trabalho do Flash 8, com o arquivo carregado e pronto para edição...41 Figura 21: O arquivo Flash depois de modificado para se adaptar ao formato requisitado pelo projeto...41 Figura 22: camadas que compõem a maioria dos projetos. Outras camadas são possíveis...44 Figura 23: layout que ilustra a página inicial do projeto...45 Figura 24: layout que ilustra uma página de artigo do projeto...45 Figura 25: layout que ilustra uma página de conteúdo, listando vários artigos, dando um destaque a um deles...45 Figura 26: layout que ilustra a página de mural de recados...45 Figura 27: exemplos de imagens obtidas depois do corte Figura 28: as principais áreas de conteúdo que compõe a página...47 Figura 29: blocos de conteúdo secundários. Estes blocos sempre pertencerão a um dos blocos principais...48 Figura 30: explicação gráfica como funciona a técnica de image replacement...49

6 Figura 31: a comparação acima é entre o Opera 9.25 (à esquerda) e o Internet Explorer 6 (à direita)....49

7 GLOSSÁRIO Web Design é o design (ou projeto de um produto, que neste caso é um site) voltado para internet. Site como é comumente chamado uma série de páginas interligadas e relacionadas entre site, todas hospedadas no mesmo domínio. layout é o desenho da aparência de um site, geralmente criado em algum software de criação vetorial ou de edição de imagens. Interface o mesmo que layout. Software é o mesmo que aplicação. É um programa desenvolvido para realizar alguma função ou resolver algum problema. Hardware é a parte física dos sistemas computacionais, como por exemplo as placas de rede, discos rígidos, memória. XHTML sigla para extensible HyperText Markup Language. É uma linguagem de marcação utilizada para a criação de páginas e aplicações para internet, baseada no HTML e no XML. HTML sigla para HyperText Markup Language. É uma linguagem de marcação utilizada na criação de páginas e aplicações para a internet. XML sigla para extensible Markup Language. É uma linguagem de marcação muito flexível, usada freqüentemente para estruturar dados. SGML sigla para Standard Generalized Markup Language. É uma linguagem utilizada para descrever linguagens de marcação. O XML e o HTML são baseados nela. DTD sigla para Document Type Definition (Definição de Tipo de Documento). São especificações para diferentes tipos de documentos HTML ou XHTML.

8 Clientside são tecnologias que compõem uma página de internet, cujo bom funcionamento depende unicamente do lado cliente da aplicação (os navegadores dos usuários, por exemplo). Serverside são tecnologias que compõem uma página de internet, cujo bom funcionamento depende unicamente do lado servidor da aplicação (o hardware do servidor e os softwares que funcionam nele). CSS sigla para Cascating Style Sheet. É uma linguagem de alto nível para a formatação de documentos de marcação. JPEG sigla para Joint Picture Expert Group. É um formato digital de arquivo para imagens, com suporte a milhões de cores e compactação. GIF sigla para Graphics Interchange Format. É um formato digital de arquivo para imagens, que possui o recurso de transparência, animação e compactação a partir da redução do número de cores. PNG sigla para Portable Network Graphics. é um formato digital aberto para imagens para internet, com recurso de suporte a milhões de cores e transparência alfa, entre outras coisas. Macromedia/Adobe Flash aplicação comercial voltada para a criação de gráficos e aplicações que utilizem primariamente gráficos vetoriais..swf é a extensão de uma aplicação/gráfico compilado desenvolvido no Flash..fla é a extensão que define um arquivo-fonte de uma aplicação/gráfico em Flash. Marcação também são chamadas de tags. São delimitações de blocos de informações em um documento, feito através dos caracteres <...> e </...>. Atributo Aplicado à uma marcação, permite alterar a exibição, aplicar formatação, identificar ou passar parâmetros à um elemento HTML. Pixel é a menor unidade que compõe uma imagem digital. Seletor CSS é uma série de propriedades CSS que pode ser aplicada a um elemento HTML.

9 INDÍCE 1. INTRODUÇÃO Objetivo A Empresa Política de Qualidade Missão Visão Sobre o portal Paraíba Jovem Descrição Geral das Atividades Hardware e software utilizados Organização do Relatório EMBASAMENTO TEÓRICO XHTML CSS Adobe Flash ATIVIDADES DO PROJETO Organização de pastas do projeto Análise e corte do layout aprovado Estruturação do documento em XHTML Formatação do documento através de CSS Exemplificando o efeito de camadas O conceito de modelo de caixa ( box model ) CSS Centralizando os elementos principais do layout Posicionando as colunas do layout Colocando o rodapé no local certo A técnica de image replacement Posicionando elementos através da propriedade CSS position Ajuste de incompatibilidades entre navegadores Criação do destaque em Flash na página principal...38

10 4. CONSIDERAÇÕES FINAIS REFERÊNCIAS ANEXOS Camadas de um projeto Layout aprovado pelo cliente modelo de quatro páginas Exemplo de imagens obtidas durante o corte do layout Blocos principais de conteúdo que compõe a página Blocos secundários de conteúdo do projeto Gráfico ilustrativo da técnica de Image Replacement Comparações entre a renderização de CSS entre o Opera e o IE

11

12 10 1. INTRODUÇÃO A criação e implementação do Portal de entretenimento "Paraíba Jovem" ( foi realizado durante o período de dois meses, durante estágio na Vsoft Tecnologia. O site "Paraíba Jovem" é um portal de entretenimento voltado ao público jovem paraibano, além de rádio online especializada em forró. Este relatório trata das etapas design e de engenharia de interface do portal, desenvolvidos utilizando os Padrões Web fornecidos pelo W3C, além de padrões internos da própria empresa. Ambos têm o objetivo de padronizar e agilizar o desenvolvimento de sites e aplicações para a internet. 1.1 Objetivo O estágio realizado na Vsoft Tecnologia teve como objetivo aperfeiçoar o conhecimento técnico na área de Desenvolvimento de Interfaces para Internet, através do desenvolvimento de novos sites e também da manutenção dos mesmos. 1.2 A Empresa A Vsoft Tecnologia é uma empresa que atua no segmento de software, como fornecedora independente especializada em Gestão Empresarial, Segurança e Internet. Foi desenvolvida a fim de atender a crescente necessidade de mercado, uma vez que as empresas convencionais, com o advento da globalização, precisavam se modernizar para continuarem competitivas. Além da questão mencionada, a Vsoft foi estruturada visando suprir a visível carência por serviços condizentes com as reais necessidades e expectativas dos públicos que abrange. Tendo em vista o largo mercado que se descortinava, a Vsoft foi constituída em maio

13 11 de 2000, registrada através de uma sociedade por cotas de responsabilidade limitada, iniciando as atividades no mercado no mesmo ano. A Vsoft também é a única empresa da Paraíba que é Microsoft Certified Partner Política de Qualidade A Vsoft Tecnologia estabelece como prioridade a satisfação de seus clientes e o atendimento das especificações por eles exigidas, através da melhoria contínua de seus processos e da participação e empenho de todos os seus colaboradores Missão Desenvolver soluções inovadoras em software, capazes de otimizar os processos, reduzir custos e aumentar o faturamento de seus clientes, sempre dentro de rigorosos padrões internacionais Visão Ser a maior e mais lucrativa fornecedora independente de soluções em software. 1.3 Sobre o portal Paraíba Jovem Fundada em agosto de 2005 por Rodrigo Senador em João Pessoa na Paraíba, com a finalidade de expansão cultural dos ritmos nordestinos, a Rádio Online ganhou o mundo em pouquíssimo tempo com ouvintes espalhados em todo planeta. Em janeiro de 2006 entram no projeto os jovens Renato Miranda e Rodolfo Pablo (Bozo). A parceria formada pelos três jovens abriu ainda mais as portas para o Paraíba Jovem, onde investiu-se na aquisição dos mais modernos equipamentos de transmissão de áudio via Internet, com a busca incansável de parceiros, a Web Rádio logo se transformou em um portal composto por: TV Web, Web Rádio, central de noticias, entrevistas, projetos sociais, cobertura de eventos e outros serviços.

14 12 Dentro do seu público-alvo (Jovens de todas as classes e ambos os sexos, com idade entre 10 e 28 anos), a Radio Online Paraíba Jovem mantém uma média de audiência de mais de ouvintes diretos no site/mês e cerca de conectados em sites parceiros. A cobertura da Web Rádio é mundial, sendo necessário apenas um computador conectado à Internet, interligando o usuário ao mundo globalizado e integrando o Brasil aos demais países do mundo, numa arrojada iniciativa da difusão da nossa cultura aos diversos recantos do mundo. Figura 1: O portal Paraíba Jovem atualmente.

15 Descrição Geral das Atividades As atividades desenvolvidas durante o estágio foram as seguintes: Projeto de Interface (corte e montagem do layout utilizando CSS e XHTML) Criação do projeto no Visual Studio.Net Detalhes da Interface (Banners em Flash, destaques) Manutenção em sites já desenvolvidos Ajustes finais 1.5 Hardware e software utilizados Durante o estágio foi utilizado um computador desktop com as seguintes configurações de hardware: Athon XP 2.4Ghz Memória RAM de 1GB Disco Rígido com capacidade para 40GB Placa de Vídeo Integrada de 32MB Monitor de 17 Samsung Syncmaster Também foram utilizados os seguintes softwares: Editor de Textos Notepad ++ Editor Vetorial Inkscape Editor de fotos Adobe Photoshop CS

16 14 Adobe Flash 8 Internet Explorer versões 6 e 7 Opera 9.23 Firefox Organização do Relatório Este relatório é dividido em quatro partes principais: a primeira parte consiste em uma breve introdução, a segunda parte consiste em descrição das tecnologias e ferramentas utilizadas, a terceira parte descreve as atividades desenvolvidas durante o estágio, e a quarta, as considerações finais.

17 15 2. EMBASAMENTO TEÓRICO Esta parte do relatório visa descrever as tecnologias e softwares utilizados no desenvolvimento do Portal Paraíba Jovem, Contanto com um breve histórico e apresentação das mesmas, visando um melhor entendimento. Para cumprir o projeto foram utilizados: para compor a camada de estrutura, XHTML; para a camada de apresentação, CSS e também Adobe Flash; para a camada lógica, C#; e para armazenamento de dados, Microsoft SQL Server. XHTML, CSS e Flash são tecnologias/linguagens clientside (funcionam no lado cliente apenas), enquanto que C# e o Microsoft SQL Server são tecnologias serverside (que para funcionar necessitam de um servidor que irá tratar as requisições de página). Este relatório só irá abranger as tecnologias clientside envolvidas no projeto. 2.1 XHTML XHTML significa extensible HyperText Markup Language e é uma especificação de documento para internet publicada pela W3C (World Wide Web Consortium) em 26 de Janeiro de 2006, e revisada em 1 de Agosto de 2002 [4]. Esta especificação é uma reformulação do HTML 4 como uma aplicação XML 1.0 (extended Markup Language). Seu objetivo é dar continuidade à evolução dos documentos de hipertexto para internet, substituindo completa e gradativamente o HTML 4 [4]. O HTML 4 é uma aplicação SGML (Standard Generalized Markup Language), publicada em conformidade com o Padrão Internacional ISO 8859, e foi por muito tempo o padrão definido para a publicação de documentos para internet [4]. SGML é uma linguagem para descrever linguagens de marcação, utilizada particularmente em documentos eletrônicos. Sua publicação foi feita por volta de 1980 e temse mantido estável desde então [4].

18 16 O XHTML possui uma série de vantagens em relação ao seu antecessor, como por exemplo a possibilidade de ser melhor manipulado por aplicações, e melhor interoperabilidade entre vários dispositivos de renderização. Contudo, ele deve obedecer uma série de regras que o validam como uma aplicação XML, como por exemplo: separar a camada de apresentação da camada de estrutura, escrever as marcações e atributos desta todas em minúsculo, entre outras. É importante ressaltar que tanto o HTML quanto o XHTML não são linguagens de programação, e sim de marcação. Documentos XHTML podem ser escritos em qualquer editor de textos ASCII. O XHTML conta com três DTDs (Document Type Definition) publicados: Transitional, mais flexível à erros; Frameset, utilizado em documentos que contém frames (quadros); e Strict, que não aceita erros em sua sintaxe. Atualmente o XHTML está na versão 1.1 (versão 1, revisão 1), considerada Strict por definição. 2.2 CSS CSS significa Cascating Style Sheets e é uma recomendação definida pela W3C. Sua primeira versão foi publicada em 17 de Dezembro de 1996, sendo revisada pela primeira vez em 11 Janeiro de 1999 e pela segunda vez em 19 em Julho de 2007 [5;6]. Seu objetivo é permitir aos autores e leitores de documentos aplicar estilos (de fonte, cor, espaçamento, posicionamento e visibilidade) à documentos estruturados, como HTML, XHTML e XML. Ela foi desenvolvida para ser uma linguagem de formatação de alto nível (facilmente compreendida e escrita por seres humanos) e que pode ser escrita em qualquer editor de textos ASCII [5;6]. Um dos recursos fundamentais do CSS é o efeito cascata. Este recurso permite que o leitor possa anexar um arquivo de estilos pessoal e este arquivo irá sobrescrever a folha de estilo definida pelo autor. Isso permite, por exemplo, que um leitor com problemas visuais possa ajustar corretamente o nível de contraste e tamanho de fonte. O efeito cascata também permite definir estilos para vários dispositivos, como Tvs, celulares, impressoras e

19 17 dispositivos braile. O CSS pode ser inserido na página de três formas diferentes: pode ser escrita diretamente em uma marcação HTML, utilizando para isso o atributo style; pode ser incorporada ao cabeçalho da página (a região delimitada pela marcação <head></head>) através da marcação <style></style>; ou pode ser inserida na página a partir de um arquivo externo. Esta é a forma mais recomendada. Atualmente o CSS está na versão 2.1 (versão 2, especificação 1). 2.3 Adobe Flash O Adobe Flash é uma aplicação comercial e proprietária voltada inicialmente para a criação de gráficos vetoriais e animações vetoriais. Contudo, hoje é uma plataforma de autoração multimídia completa, tanto para conteúdo online quanto offline, trabalhando com vídeo, áudio e imagens bitmaps. Sua história se inicia em 1995, com a empresa Futurewave e o software Future Flash Animator, o antecessor direto do Flash. A empresa mais tarde foi adquirida pela Macromedia, e o software Future Flash Animator se tornou o Flash 1.0 [7]. Em Agosto de 2005, a Adobe Systems adquiriu a Macromedia em uma transação de 3,4 bilhões de dólares. O Flash está atualmente na versão CS3, completamente integrado à suíte de aplicativos da Adobe [7]. Ao se criar uma animação de Flash, gera-se dois arquivos; um contendo todos os arquivos-fonte utilizados na criação da arte, e um arquivo compilado, de menor tamanho, com a animação gerada. Este arquivo compilado é o que será incluído na página. O Flash conta com uma linguagem de script com recursos bastante avançados, baseada na linguagem de programação C, chamada ActionScript. Atualmente o ActionScript está na versão 3.0. Por ser uma aplicação comercial e não uma especificação da W3C, é necessário um

20 18 plugin (uma pequena aplicação integrada ao navegador) para o funcionamento da animação, distribuído gratuitamente pela Adobe.

21 19 3. ATIVIDADES DO PROJETO As atividades desenvolvidas neste projeto foram: organização das pastas do projeto, análise e corte do layout desenvolvido e aprovado pelo cliente, estruturação do documento em XHTML, formatação do documento através de CSS, ajuste de incompatibilidades entre navegadores e criação do destaque em Flash da página inicial. Para um entendimento geral do projeto, as atividades serão detalhadas a seguir. 3.1 Organização de pastas do projeto Todos os projetos de site desenvolvidos pela Vsoft Tecnologia seguem rigidamente uma estrutura de pastas, que pode ser visto na figura abaixo: Figura 2: Estrutura de pastas utilizadas pelos projetos de site da Vsoft. Cada pasta contém uma parte dos arquivos que compõe o projeto. Suas funções são descritas abaixo: / (pasta raiz): esta página contém apenas um único arquivo, o Default.aspx. A sua função é unicamente redirecionar o usuário para o arquivo /Start/Default.aspx. /Content: Contém todas as páginas estáticas (páginas que contém informações

22 20 que não são atualizados dinamicamente) do site. Um exemplo de página contida nesta pasta é o Sobre.aspx, que contém informações institucionais do Paraíba Jovem. /Form: Contém todos os formulários utilizados pelos usuários finais para enviar dados para o servidor. Um exemplo de arquivo contido por esta pasta é o Contato.aspx, que é um formulário de contato padrão. /_Imgs: Contém todas as imagens que fazem parte da composição do layout. /_Resources/: Contém os demais arquivos que fazem parte do projeto, mas não estão relacionados ao conteúdo diretamente. São armazenados nesta pasta os arquivos CSS, os arquivos de javascript e também os arquivos de Flash. Css/:Contém todos os arquivos CSS que fazem parte do projeto. Flash/: Contém todos os arquivos Flash que fazem parte do projeto. /Start: Contém unicamente o arquivo Default.aspx, que representa a página inicial do site. Algumas pastas são adicionadas posteriormente ao projeto, e contém scripts e páginas de administração. Estas páginas não estão sob análise deste relatório. 3.2 Análise e corte do layout aprovado A análise preliminar do layout, desenvolvido pelo designer, se faz necessária para que o projetista da interface possa saber como irá proceder no corte do layout e também na hora de estruturar a página, utilizando XHTML. O corte nada mais é que a divisão do layout em várias imagens menores, realizado através de algum programa de edição de imagens (neste caso, o Adobe Photoshop CS), que irão fazer parte da composição do layout. Estas imagens serão inseridas na página através de CSS. O corte sempre será feito pensando na melhor economia de recursos do servidor, tanto

23 21 em relação ao consumo de banda quanto ao consumo de espaço em disco. As imagens originadas do corte serão sempre nos formatos JPEG, GIF, ou mais raramente, PNG. A escolha do formato varia de acordo com o número de cores da imagem e o que se quer fazer com ela. Imagens compostas de gradientes ou de áreas repetitivas são cortadas de forma mais estreita possível. Isso é feito porque é possível repetir a imagem infinitamente, tanto horizontalmente quanto verticalmente, através de CSS, permitindo assim preencher grandes áreas com imagens, sem a necessidade de se ter grandes imagens. Depois do corte, faz-se uma análise visual para identificar os blocos principais de conteúdo que compõe a página do projeto. A identificação destes blocos é essencial para criar uma estrutura XHTML concisa. Os principais blocos de conteúdo da página inicial do projeto são: tocador de áudio, topo da página, coluna da esquerda, coluna da direita, coluna central, rodapé. Também são definidos os blocos secundários de conteúdo. Estes blocos estarão sempre contidos dentro dos blocos principais. Todas as demais páginas seguem o mesmo padrão mostrado acima, salvo algumas modificações (por exemplo, observe que nos layouts das páginas internas só existem duas colunas, a coluna da esquerda e a coluna principal). 3.3 Estruturação do documento em XHTML A estruturação do documento pode ser feito em qualquer editor de texto ASCII. O software utilizado para esta etapa foi o Notepad++, um editor de textos leve, mas com vários recursos de edição de código. O DTD escolhido para o projeto foi o Transitional, pois é mais flexível em relação à erros. O conteúdo do site é gerenciado por terceiros, utilizando o sistema de gerenciamento criado especificamente para isso. Por isso não é possível manter um código-fonte completamente seguro de erros e outras falhas.

24 22 Todo documento XHTML é composto por por algumas marcações padrão, como por exemplo, a declaração de tipo de documento (DTD), a marcação HTML, o cabeçalho (sendo que este contém o título da página e também as metatags e marcações de estilo) e o corpo, onde irá todo o conteúdo que será visualizado na página. Abaixo, segue um trecho de código para exemplificar a explicação acima: Figura 3: Exemplo do código XHTML padrão à todas as páginas Note que existem vários arquivos CSS sendo incluídos na página. O objetivo disso é facilitar a pesquisa e alteração de código durante a manutenção. Em vez de existir um único arquivo com centenas de linhas, tem-se vários arquivos menores, divididos em áreas ou funcionalidades. As páginas internas do projeto ainda contam com mais um arquivo CSS, pag-internas.css, responsável por realizar alterações visuais necessárias. Feito isso, escreve-se a estrutura principal do layout. Esta estrutura é delimitada com marcações DIV (cujo nome vem de divisor ). Cada área é identificada unicamente através do atributo HTML id. Estas demarcações de área são uma espécie de padrão, e são encontradas em todos os projetos desenvolvidos. Evita-se variar os ids para não causar enganos.

25 23 Abaixo, segue o código da estrutura principal da página principal do projeto: Figura 4: Exemplo de um código de estrutura em três colunas, comum em portais. A estrutura principal das páginas internas do projeto é ligeiramente diferente, pois, ao invés de existir três colunas principais, há apenas duas. Além do mais, as páginas possuem funções diferentes: enquanto que a página principal é essencialmente uma página de exibição de destaques ou de conteúdos mais recentes, as páginas internas exibem o conteúdo propriamente dito. Abaixo você pode ver a estrutura de uma página interna convencional:

26 24 Figura 5: Estrutura principal de uma página secundária. Na empresa Vsoft, seguimos algumas regras (além dos padrões estabelecidos pela W3C) para facilitar a edição posterior, tanto por aqueles que desenvolveram a página, quanto outras pessoas. Por exemplo, observe no exemplo de código acima que cada final de marcação está identificado através de um comentário. Estes comentários servem como guia e evitam confusão quando vários elementos DIV estão aninhados. Outra padronização que sempre tentamos seguir rigorosamente em nossas páginas é a forma de escrever o código dos blocos de conteúdo secundário. Ela foi desenvolvida com o objeto de aumentar a compatibilidade do Modelo de Caixa CSS. Este modelo será detalhado mais à frente, em um capítulo à parte. Salvo algumas excessões, todos os blocos seguem o seguinte padrão:

27 25 Figura 6: este código exemplifica o padrão utilizado para construir blocos de conteúdo. Cada atributo do elemento DIV tem uma razão de ser: o atributo id permite identificar unicamente aquele bloco na página. Isso é útil para permitir a manipulação daquele elemento usando javascript DOM (Document Object Model) ou aplicar um estilo em particular que foge do padrão estabelecido para aquela família de bloco. O atributo class possui dois valores, o primeiro ( bloco ) o define universalmente como um bloco, e permite aplicar folhas de estilos que estão presentes em todos os blocos do projeto. O segundo cria um subgrupo ou família de blocos. Por exemplo, supondo que existem várias enquetes em uma mesma página. todos estes blocos possuem a formatação definida para os blocos da página, mas também possuem formatação específica que os diferem dos demais blocos. Então neste caso seria aplicado o valor bloco-enquete a todos os blocos de enquete, permitindo assim aplicar este estilo diferenciado. Abaixo pode-se ver algumas aplicações do exemplo acima neste projeto: O menu principal do projeto:

28 26 Figura 7: código XHTML que ilustra o menu principal da página. O bloco tour virtual : Figura 8: bloco de código XHTML que estrutura o bloco "tour virtual". O bloco enquete :

29 27 Figura 9: bloco de código XHTML que estrutura uma enquete. 3.4 Formatação do documento através de CSS Este capítulo detalha a camada de apresentação do projeto, desenvolvida utilizando CSS, chamada também de folhas de estilos, a partir daqui. Ele irá se concentrar nos conceitos e técnicas utilizadas para compor as várias partes do layout, pois detalhar centenas de linhas de folhas de estilo seria maçante e repetitivo demais. De acordo o padrão de desenvolvimento seguido pela empresa, as folhas de estilo devem ser divididas para facilitar a pesquisa e manutenção posterior. Na época do desenvolvimento do projeto do Portal Paraíba Jovem, as folhas de estilo foram divididas de acordo com a área e também pela sua função. A divisão das folhas de estilo pela sua função permite que aquele bloco de código CSS e XHTML seja reaproveitado em outro projeto, com alterações mínimas, poupando tempo. Por exemplo, o arquivo colesq.css é responsável especificamente em aplicar formatação à coluna da esquerda, e todos os seus elementos filhos. Em uma página interna que tenha uma galeria de imagens, também estará incluso o arquivo GaleriaDeImagens.css, responsável por aplicar formatação àquele bloco de código XHTML. As folhas de estilo podem ser aplicadas a um elemento HTML de quatro formas, basicamente. São elas: Aplica-se o estilo diretamente na marcação, através do atributo HTML style.

30 28 Esta forma quase nunca é utilizada, pois retira completamente a flexibilidade das folhas de estilo; Aplica-se o estilo utilizando o valor do atributo HTML id. Esta forma é pouco recomendável, pois o valor do atributo id deve ser único por página, impossibilitando que aquela formatação seja reaproveitada na mesma página, a menos que você a duplique. A exceção ocorre quando se quer aplicar uma formatação única a um determinado elemento (em geral, posicionamento) ou quando tem-se certeza que só existirá um elemento que irá receber aquela formatação por página; Aplica-se o estilo através de uma classe, atribuída através do valor(es) do atributo HTML class. Esta é a forma mais indicada na maioria dos casos. Você pode ter mais de uma classe aplicada ao mesmo elemento; Também pode se definir uma formatação universal para todas as instâncias de determinado elemento (por exemplo, aplicar tamanho 12px em todos os parágrafos o elemento HTML <p></p> - de uma página do projeto). É muito utilizado para definir o padrão de formatação que será seguido Exemplificando o efeito de camadas Um dos conceitos que permitem a formatação avançada através de folhas de estilo é o efeito de camadas. Cada elemento HTML pode (e deve) ser tratado como uma camada (apesar de que, este efeito é mais visível em elementos de bloco). Vários elementos aninhados podem ser tratados como várias camadas sobrepondo uns aos outros. Elementos posicionados através de CSS podem ter seu nível alterado através da propriedade z-index: valores baixos ficam abaixo dos valores altos. A imagem abaixo ilustra graficamente o que foi explicado:

31 29 Figura 10: explicação gráfica do conceito de camadas O conceito de modelo de caixa ( box model ) CSS O bom entendimento do modelo de caixa CSS é essencial para a construção de layouts baseados em folhas de estilo. Este conceito se baseia no princípio de que qualquer elemento HTML pode ser uma caixa. Por exemplo, imagine um elemento HTML qualquer é formatado para possuir dimensões fixas de 150x150 pixels. Isso é feito sem problemas usando as propriedades width e height. Posteriormente esta caixa é incrementada, e é adicionado uma margem interna de 10 pixels (através do atributo padding) e uma borda tracejada superior e inferior (através dos atributos border-top e border-bottom, respectivamente), de 3 pixels de largura. Também é adicionada uma margem externa inferior (através do atributo margin-bottom) de 20 pixels ao

32 30 elemento. Fazer isso em folhas de estilos é trivial, mas ao visualizar o resultado em um navegador, percebe-se que as dimensões originais de 150x150 pixels foram alteradas. Medindo o elemento utilizando uma regra de pixels observa-se que as dimensões finais da caixa são de 170x196 pixels. Isto ocorreu porque os valores das propriedades margin, padding e border (e suas variações específicas para cada lado da caixa) adicionam valores à largura e altura finais da caixa. Para se obter as dimensões ideais da caixa é necessário subtrair os valores destas propriedades da largura e altura que se almeja aplicar. No caso do exemplo acima, o valor da propriedade width (largura) seria 130 pixels, e o valor da propriedade height (altura) seria de 104 pixels. Pode-se inclusive fazer uso de uma pequena equação do primeiro grau para se obter as dimensões ideais: LARGURA IDEAL = VD ((BD +BE)+(PD+PE)+(MD+ME)) Sendo que: VD é igual ao valor desejado da largura; BD e BE são respectivamente a largura da borda esquerda e direita; PD e PE são respectivamente o valor da margem interna esquerda e direita; e MD e ME são respectivamente os valores da margem externa direita e esquerda. A fórmula para a altura ideal é a mesma, apenas alterando os valores para as margens/bordas/margens externas inferiores e superiores. Praticamente todas as versões do navegador web Internet Explorer possuem defeitos na renderização de caixas CSS. A versão 6 deste navegador é o navegador mais utilizado do planeta. Versões mais antigas, inferiores à 6, possuem defeitos no box model muito mais graves, mas felizmente estas versões estão em quase completo desuso.

33 Centralizando os elementos principais do layout Observando o layout, percebe-se que, com exceção do tocador de músicas no topo, os demais elementos possuem uma dimensão fixa, e que os lados direito e esquerdos possuem margens eqüidistantes do canto do navegador. Se acessar o site com uma resolução de tela de 800x600 percebe-se ainda que a página vai ocupar quase todo o espaço disponível, praticamente ocultando o fundo. Para se realizar este efeito, é necessário que aja um elemento HTML (que é geralmente uma DIV) englobando todos os elementos que se quer centralizar. Isso geralmente é feito utilizando uma DIV chamada de container (e convenientemente identificada como container através do atributo id) que é filha direta do elemento body e engloba todos os demais elementos do site (salvo algumas raras excessões, como é o caso deste projeto; aqui o bloco que delimita o tocador de músicas escapou do abraço da DIV container ). Em seguida, aplica-se a seguinte folha de estilo: Figura 11: código CSS aplicado à DIV identificada por "container", centralizando os elementos contidos. Explicando o código acima: o primeiro atributo, width, refere-se à largura. Em geral usa-se 768 pixels de largura ou menos, para evitar que os visitantes com resolução de tela de 800x600 não vejam barra de rolagem horizontal. O segundo atributo, position, torna aquele elemento posicionado de forma relativa. Mais à frente o posicionamento através de CSS será detalhado em um capítulo à parte. O atributo left com valor igual a 50% faz com que o eixo x (o eixo horizontal) tenha início exatamente no centro do espaço disponível na área do navegador. O layout, contudo, não está centralizado. Para que isso ocorra, é necessário alinhar o centro do elemento com o centro do navegador. Para achar o centro do elemento e alinhá-lo, basta dividir a largura (que no caso é 764px) por 2, e aplicar o valor obtido com sinal negativo à margem esquerda

34 32 (controlada pelo atributo margin-left). Feito isso, o layout estará centralizado Posicionando as colunas do layout A página inicial do layout é divididas em três colunas, sendo duas auxiliares (exibem a navegação e também banners) enquanto que a coluna central exibe o conteúdo mais relevante. As páginas internas possuem apenas duas colunas, sendo uma auxiliar, e uma coluna mais larga, exibindo o conteúdo relevante. Através das folhas de estilo é possível ter o total controle de qualquer elemento HTML, seja em suas cores, dimensões, posicionamento, e comportamento. Neste caso, as folhas de estilo serão utilizadas para posicionar elementos HTML DIV da página em colunas paralelas, quando normalmente deveriam seguir o fluxo normal do documento. Na página principal temos o seguinte código estrutural: Figura 12: código HTML que permite a estruturação de três colunas em uma página web. A formatação destes elementos em colunas é muito simples, e é feita através dos seletores de identificação (o valor da propriedade HTML id ). O primeiro passo é definir a largura das colunas laterais (através da propriedade width). No caso deste layout, ambas as colunas 180 pixels de largura. Em seguida, define-se a largura da coluna principal central. Ao contrário das demais colunas, sua largura é definida aplicando-se uma margem esquerda e direita, com valores iguais à largura das colunas esquerda e direita, respectivamente. Usualmente, utiliza-se valores de margem esquerda e direita um pouco maiores que as larguras das colunas, por razões estéticas. No caso deste projeto, o valor das margens é de 184 pixels.

35 33 Para finalizar, determina-se que as colunas esquerda e direita devam flutuar à esquerda e direita respectivamente da coluna central. Isso é feito utilizando a propriedade CSS float, com valor igual a left (no caso da coluna da esquerda) ou right (para a coluna da direita). A propriedade float define um determinado elemento HTML como sendo um elemento flutuante que deve-se posicionar à esquerda ou a direita dos demais elementos da página, deslocando elementos inline para a esquerda ou direita e sobrepondo elementos de bloco. Por isso foi aplicada margens à coluna central, para evitar que esta fosse sobreposta pelas duas colunas secundárias. Figura 13: folhas de estilo que formatam o código HTML apresentado acima em três colunas paralelas. Em relação às páginas internas com apenas duas colunas, uma coluna esquerda e uma coluna principal com o conteúdo relevante, é necessário apenas realizar um pequeno ajuste, utilizando para isso o arquivo CSS pag-internas.css. Este arquivo é incluído apenas nas páginas internas, depois da inclusão dos arquivos CSS que formatam as colunas.

36 34 Figura 14: arquivos CSS incluídos na página interna. Graças ao efeito cascata, pode-se alterar o valor da margem direita da coluna conteudo, aplicando a propriedade CSS margin-right com valor igual a zero. Isso faz com que a margem direita que daria espaço para a coluna desapareça, transformando o layout de três para duas colunas Colocando o rodapé no local certo No capítulo anterior relatou-se que um elemento HTML definido através de CSS como flutuante (a propriedade float com valores iguais a left ou right) irá deslocar elementos inline (normalmente textos e marcações HTML de formatação de texto) e sobrepor elementos de bloco ou com comportamento de bloco (como parágrafos, títulos e elementos DIV). Definindo as colunas laterais como elementos flutuantes, pode-se gerar um problema com o rodapé do site, caso estas colunas forem maiores em termos de altura que a coluna principal (e freqüentemente são).

37 35 Figura 15: Código HTML que compõe o rodapé. Para evitar que as colunas interfiram no rodapé, aplica-se ao mesmo a propriedade CSS clear com valor igual a both. Esta propriedade impede que um elemento flutuante se posicione sobre/ao lado de um outro elemento. Aplicando clear: both impede-se que elementos flutuantes se posicionem à direita ou a esquerda do rodapé. Outros valores possíveis são left (impede que elementos flutuantes se posicionem à esquerda do elemento), right (impede que elementos flutuantes se posicionem à direita do elemento) e none (nenhum impedimento; é valor padrão) A técnica de image replacement As recomendações W3C para folhas de estilo estabelecem que qualquer imagem que tenha caráter meramente decorativo devem ser inseridas através de CSS. Isso inclui literalmente todas as imagens que compõe o layout, restando as imagens informativas (que transmitem ou complementam alguma informação na página) para serem inseridas através da marcação HTML <img />. A técnica de image replacement ou recolocação de imagem via folhas de estilo permite exibir uma imagem utilizando CSS, utilizando para isso uma marcação HTML e com a vantagem de que o elemento não perde seu valor textual. Adicionar e manter um valor textual é importante, mesmo se tratando de imagens, para que a informação contida na página continue relevante para os usuários que não podem acessar aquela informação através de meios visuais (por exemplo, usuários com problemas de

38 36 visão utilizam navegadores que lêem as informações textuais e ignoram completamente o layout). Além disso, elementos textuais são mais relevantes para mecanismos de busca (outro exemplo de um usuário cego, só que este não é humano), e estes são responsáveis por uma grande quantidade de tráfego. Existem muitas maneiras diferentes de executar este truque. A descrita aqui é a adotada pela equipe de desenvolvimento web como sendo a mais simples e funcional. Um elemento de página em que a técnica está sempre presente, independente do projeto, é o logotipo do site ou empresa que possui o site. Por questões semânticas, toda página de um projeto possui um título HTML <h1></h1> presente no início da página, e por questões de acessibilidade, há um link (definido pela marcação <a></a>) neste título apontando para a página principal do projeto. Figura 16: código HTML que estrutura o topo. Através da técnica de image replacement, a marcação <a></a> será substituída pela imagem logo.jpg, de dimensões 206x134 pixels. Tal feito é realizado pelo bloco de código de folhas de estilo a seguir: Figura 17: Código CSS que transforma um elemento textual em uma imagem. A melhor forma de compreender o código acima é compreender o conceito por trás dele. Primeiro, elimina-se as margens padrão do título <h1></h1> para evitar qualquer tipo

39 37 de interferência. Depois, é necessário mudar a forma de como a marcação <a></a> se comporta. Por padrão, este elemento é do tipo inline, ou seja é aplicado a um texto e segue o fluxo normal do mesmo. Ao contrário dos elementos de bloco, que quebram o fluxo normal do texto, isolando-o. Um exemplo clássico são as marcações de parágrafo (<p></p>) e as próprias marcações <DIV></DIV>, que criam blocos isolados de informação. Marcações inline não permite aplicar propriedades CSS de controle de dimensões sobre elas, mas marcações do tipo block, sim. A alteração de tipo de comportamento é feita aplicando o valor block ao atributo CSS display. Exibir uma imagem em um elemento que contém texto é muito simples, basta fazer uso da propriedade de folha de estilo background-image (ou sua forma abreviada, background) e aplicar a imagem como um fundo. Quando se fizer uso desta técnica, é essencial que a imagem de fundo não se repita, e isso é feito aplicando o valor no-repeat à propriedade background ou background-position. As dimensões do elemento que contém a imagem devem ser iguais à da imagem que se quer inserir, que neste caso, possui 206x134 pixels de dimensões. O problema é se livrar do texto contido no elemento, que ficará sobrepondo a imagem inserida. Quando um elemento qualquer possui dimensões fixas e por acaso o texto ou conteúdo contido nele ultrapassa suas dimensões, este conteúdo naturalmente vaza para fora do elemento. É possível controlar a forma como os elementos HTML tratam este conteúdo estravazado através da propriedade de folhas de estilo overflow. É possível por exemplo, adicionar uma barra de rolagem caso o conteúdo estravaze as dimensões do seu contêiner (overflow com valor igual à auto), ou adicionar uma barra de rolagem sempre, independente da quantidade de conteúdo ou não (overflow com valor igual à scroll). Mas o valor de overflow que importa para a técnica é hidden, que faz com que elementos estravazados sejam parcialmente ou não sejam exibidos. Compreendido isso, é necessário descobrir uma forma de empurrar o elemento textual para fora das dimensões do elemento sem que suas dimensões finais se alterem. Isso

40 38 será feito aplicando os conceitos de modelo de caixa CSS. As dimensões finais desejadas para o elemento formatado são iguais às dimensões da imagem, ou seja, 206x134 pixels. A largura é irrelevante, e não será alterada (o valor de width será 206px). Mas a altura, será igual a zero (ou seja, height: 0). Em seguida aplica-se uma borda interna superior de valor igual à altura da imagem (padding-top: 134px). De acordo com o modelo de caixa, a altura final é a soma da altura mais os valores das propriedades margin, padding e border-width. No exemplo em questão, é 134+0=134px, exatamente o valor da altura da imagem. Ao mesmo tempo, a margem interna superior empurra a informação textual contida no elemento para fora de sua altura (que é zero). O resultado final é uma imagem inserida no layout via folhas de estilo, aplicado à uma marcação <a></a>, sem que esta perdesse sua funcionalidade de hyperlink Posicionando elementos através da propriedade CSS position O posicionamento de elementos através de folhas de estilo é um tema complexo que causa muita confusão em desenvolvedores pouco experientes, além de que sua má implementação é responsável por causar redundância e complexidade desnecessária do CSS. Entenda-se como um elemento posicionado qualquer marcação HTML com a propriedade position declarada com qualquer valor diferente de static. O posicionamento de um elemento é formatado através da propriedade position e um dos seus quatro valores. Mas antes de explanar estes valores, é importante ter em mente as regras pelas quais funcionam o posicionamento: 1. Qualquer elemento HTML possui por padrão o valor static para a propriedade position, mesmo que esta propriedade não esteja declarada. 2. Um elemento é posicionado em qualquer local da área disponível no navegador em relação às margens da área do navegador ou em relação às margens do elemento pai que também for posicionado. A exceção desta regra é o valor relative, que é posicionado a partir do local original do elemento.

41 39 3. As propriedades de posicionamento left, right, top, left e z-index não se aplicam ao valor static. Right e bottom não se aplicam ao valor relative. Tendo em mente as regras acima, os valores possíveis para a propriedade position são: static: é o valor padrão, aplicado a um elemento HTML mesmo que a propriedade não esteja declarada. Uma marcação formatada por este valor não é afetada por nenhuma outra propriedade de posicionamento (left, right, top, left ou zindex). relative: um elemento formatado com este valor pode ser posicionado através das propriedades left, top e z-index, tomando como ponto inicial o local onde o elemento estava posicionado inicialmente. Uma marcação com esta formatação ainda precisa seguir o fluxo normal do documento, e terá sua área ocupando espaço na página. absolute: um elemento formatado com este valor pode ser posicionado livremente através das propriedades left, right, top, left e z-index e é removido completamente do fluxo do documento, passando a ser um elemento flutuante (ou uma camada, se preferir) que sempre estará sobre os elementos sem posicionamento e também sobre elementos posicionados com a propriedade z-index com valor inferior ao seu próprio valor desta propriedade. fixed: tudo que foi dito sobre o valor absolute é verdade também para este valor. Mas uma marcação HTML com esta propriedade possui a característica de permanecer parada, parada na página, enquanto que os demais elementos fluem de acordo com a rolagem. Este recurso interessante mal é utilizado porque ele é completamente mal interpretado pelo navegador que possui a maior parte do mercado. No projeto descrito aqui, foram utilizados basicamente a propriedade position com os valores relative e absolute. O valor absolute foi utilizado quem desejava-se posicionar um elemento sem que ele interferisse na posição de qualquer outro elemento da página. Um exemplo de elemento com este tipo de posicionamento é o logotipo do site, delimitado pelas marcações <h1></h1> e <a></a>.

42 40 O valor relative foi utilizado no projeto para facilitar e guiar o posicionamento de outros elementos posicionados. Um exemplo de elemento formatado com este valor é o rodapé, que contém outros elementos posicionados com o valor absolute. 3.5 Ajuste de incompatibilidades entre navegadores As folhas de estilo em cascata são um recurso clientside, ou seja, sua interpretação correta depende do navegador utilizado pelo usuário. Atualmente o mercado conta com quatro navegadores que juntos representam praticamente 100% dos usuários de internet: Internet Explorer, Mozilla Firefox, Safari Browser e Opera. Cada um deles possuí seu próprio nível de suporte à CSS e seus próprios defeitos (conhecidos pelo termo técnico bug). Felizmente a maior parte dos navegadores estão em um nível muito bom e próximo um dos outros em termos de renderização de CSS, fazendo com que não exista a necessidade de testar o projeto em todos os navegadores. A exceção é o Internet Explorer (ou simplesmente IE), um navegador para plataforma Windows e Mac que além de possuir o pior suporte, é o que infelizmente possui a maior parcela do mercado mundial de navegadores, com cerca de 70% dos usuários de internet. Atualmente existem duas versões do IE dividindo o mercado: a versão 6, e em proporção bem menor, a versão 7, com melhorias no suporte aos Padrões Web (mais ainda longe do ideal). Devido ao seu mal suporte aos padrões e recomendações da W3C, algumas páginas podem possuir diferenças na renderização entre o IE e os demais navegadores, e algumas vezes é essa diferença é crítica. No início os desenvolvedores e projetistas de interface resolviam este problema através de técnicas chamadas CSS Hacks. Com pequenos truques e explorando falhas dos navegadores, era possível aplicar regras de folhas de estilo apenas para um navegador específico. Esta prática gerava arquivos de folhas de estilo grandes e complexas, com grande quantidade de código redundante. Felizmente esta prática pouco elegante foi posta de lado em favor do uso de

43 41 conditional comments (comentários condicionais). Este recurso é suportado unicamente pelo Internet Explorer a partir da versão 5, e permite inserir um código HTML em uma página apenas se a condição definida for verdadeira. Os desenvolvedores então utilizam este recurso para inserir folhas de estilo para versões específicas do Internet Explorer, contendo instruções que irão contornar ou pelo menos atenuar os problemas visuais da má renderização. Figura 18: dois comentários condicionais inseridos na página. Um para cada arquivo CSS diferente. Os comentários condicionais contendo arquivos de folha de estilo são sempre os últimos arquivos a serem incluídos no cabeçalho da página, para aproveitar o Efeito Cascata. Foram inseridos no projeto dois comentários condicionais, que podem ser vistos na figura 18. O primeiro afeta o Internet Explorer 6 ou versões inferiores, e o segundo afeta unicamente a versão 7 do Internet Explorer. 3.6 Criação do destaque em Flash na página principal Uma das requisições do cliente era que houvesse uma área na página principal, semelhante a um banner rotativo onde fossem exibido chamadas para notícias em destaque, dando prioridade à imagens que ao texto. Tal recurso está presente na maioria dos portais de conteúdo. Depois de analisar o pedido do cliente, chegou-se a conclusão que a solução mais indicada seria desenvolver uma solução em Flash que recebesse as informações que compõe cada destaque (estas informações seriam: a imagem, um título, um texto de duas linhas, e uma URL que redicionaria o usuário caso ele clicasse no destaque específico) de um arquivo XML (extensible Markup Language) externo à aplicação Flash. Esse arquivo XML seria atualizado dinamicamente a partir de um banco de dados, utilizando as informações fornecidas pelo próprio cliente, utilizando a interface administrativa do Portal.

44 42 Figura 19: o arquivo Flash utilizado como base, antes de ser personalizado. Para criar este destaque dinâmico em Flash foi utilizado como base um arquivo disponibilizado gratuitamente para download para fins didáticos, que teve que ser alterado em diversos níveis para atender as necessidades do projeto. Para editar o arquivo base, foi utilizado o Macromedia Flash 8 (na versão 8 o software ainda não pertencia à Adobe). A alteração realizada no arquivo resume-se à modificações visuais na forma como os elementos são exibidos. Também foi feita algumas alterações na camada lógica, que se resumiu a comentar áreas de código que não seriam utilizados, e na camada de armazenamento de dados (o arquivo XML), apagando marcações que não seriam utilizados.

45 43 Figura 20: área de trabalho do Flash 8, com o arquivo carregado e pronto para edição. Figura 21: O arquivo Flash depois de modificado para se adaptar ao formato requisitado pelo projeto.