Uma liberdade que facilita a criatividade, mas também traz outras vantagens, nomeadamente:

Transcrição

1 INTRODUÇÃO Uma liberdade que facilita a criatividade, mas também traz outras vantagens, nomeadamente: Melhor acessibilidade A estrutura dos documentos HTML, apenas baseados na estilização vis CSS, são mais amigos dos sistemas de consulta associados a utilizadores com necessidades especiais; Estruturas mais simples Uma das consequências da separação do design vs conteúdo, reside no facto de ter documentos HTML estruturalmente muito simples e, portanto, muito fáceis de editar; Páginas mais leves Estruturas simples e bem formatadas geram páginas mais leves e também mais simples de serem processadas pelos browsers. O resultado corresponde a sites mais rápidos a carregar, pois inclusive as CSS trabalham em cache; Redesigns facilitados Ao ter o documento responsável pelo design separado do conteúdo, há mais apetência e facilidade para alterar o layout do site ou alterar o aspecto de outros elementos, sem mexer sequer no documento principal; Conteúdos universais noutros media Com as CSS é possível estilizar o mesmo site para ter boa apresentação, tanto impresso como para projecção ou consulta via PDA ou telemóvel. Tudo isto novamente sem mexer no conteúdo, isto é, no documento HTML original. E quanto a desvantagens... deve haver alguma, senão porquê que todos não usam as CSS? É uma questão colocada frequentemente, sendo as reservas à sua utilização devidas sobretudo a factores de: Novidade Os criadores de sites têm desde sempre usado as tabelas e as mesmas funcionam. A tradição e algum imobilismo geram a atitude de para quê começar de novo com outra técnica, apesar de ser melhor, se com as tabelas faço visualmente o mesmo?. A não massificação do uso das CSS na criação de sites, deve-se sobretudo à resistência à mudança; Suporte e uniformidade Pessoalmente, considero estar aqui a principal força desmotivadora. As CSS são um conjunto de instruções interpretadas pelos browsers e alguns não suportam as principais funcionalidades ou têm comportamentos diferentes. Isto leva a que uma página com o aspecto que nós queremos no browser A, não tenha nada a ver com o que o browser B mostra. O principal culpado é o IE que está ultrapassadíssimo, apesar de ser líder de mercado. De qualquer modo o essencial está coberto e os resultados conseguem ser muito homogéneos. FCA Editora de Informática 7

2 CONTROLO DO (X)HTML VIA CSS Aqui o princípio é semelhante, simplesmente tem-se um pouco mais controlo e opções sobre o que é gerado antes ou depois de cada selector, tendo que se utilizar a property content em conjunto com o pseudo-element respectivo. Ainda não abordei a temática das properties, pelo que fica aqui um adiantamento ao tema, que é necessário para finalizar este tópico dos pseudo elements selectors. A property content serve para definir o tipo de conteúdo a gerar sempre que a condição que definirmos ocorrer. Imagine-se que queremos associar um separador para cada capítulo e que cada um desses capítulos se inicia com um elemento H2, obtendo o seguinte efeito visual no browser: Secção Temática: As especiarias na gastronomia nacional O código CSS respectivo seria: H2:before { content: Secção Temática: ; font-style: italic; display: block;} A vantagem consiste em: de cada vez que se adicionasse um novo tema associado ao elemento H2, seria sempre gerado automaticamente o separador Secção Temática sem nunca ter de o escrever. Mais tarde, alterações a esse título seriam efectuadas apenas uma vez e no ficheiro CSS, não no HTML. Outro exemplo útil pode ser o facto de se pretender associar um ícone a um hiperlink específico. Se num web site recorrermos muito a links para documentos pdf seria interessante poder associar o ícone do pdf ao respectivo link, sendo ainda mais interessante poder fazê-lo de uma forma automática. Ora, isso é possível graças aos pseudo-element selectors, neste caso ao pseudo- -element :after utilizado da seguinte forma: a.icon:after { content: url(icon_pdf.gif); } Neste exemplo combina-se uma class do género não solitário a um pseudo-element selector. FCA Editora de Informática 31

3 CONTROLO DO (X)HTML VIA CSS Temos então o elemento [lang a definir que se trata de um attribute selector do tipo particular, neste caso seleccionando e estilizando com um sublinhado todos os elementos do documento HTML com o atributo lang, cujo valor se inicie por pt, podendo ou não conter outros elementos a seguir (que neste caso são separados por hífenes e não por espaço como no exemplo anterior do tipo parcial). No exemplo do código XHTML descrito, somente os 2 primeiros parágrafos seriam estilizados com o sublinhado (underline) Afectar vários selectors em simultâneo Por vezes queremos atribuir um mesmo estilo a vários elementos. Nestas situações, dava jeito poder fazê-lo com uma instrução apenas e afectar um número determinado de elementos do documento. Esta acção é possível de executar recorrendo aos seguintes selectors: Selector groups Os selector groups não são propriamente selectors. Apesar de serem assim designados, são na prática selectors agrupados, aos quais se atribui as mesmas declarations, constituindo uma forma de reduzir e agrupar o código CSS, simplificando o trabalho e minimizando erros. Tipos de selectors CSS Os diferentes selectors permitem seleccionar o seguinte: Type Elementos de HTML; Class - classes criadas pelo autor; ID - IDs criados pelo autor; Descendant Elementos que na hierárquica descendem de outros elementos HTML; Link pseudo-class - Estádios em que se podem encontrar as hiperligações ou outros elementos; Pseudo-element Estádios específicos de certos elementos do documento; Dynamic pseudo-class - Estádios virtuais de certos elementos do documento; Selector groups grupos de elementos/selectors; Language pseudo-class Elementos associados a códigos de países; Child Elementos hierárquicamente 1 nível abaixo (pai-filho); First-child - Elementos hierárquicamente 1 nível abaixo e que surjam primeiro(pai-filho primogénito); Adjacent - Elementos que surjam adjacentes um ao outro; Attribute - Elementos que correspondam a certos atributos gerais ou específicos; Universal Todos os elementos HTML. FCA Editora de Informática 41

4 FORMATAÇÃO E ESTILO DAS COMPONENTES DO SITE Unidades de medida Os values associados a unidades de medida, são aqueles que nos permitem definir tamanhos e dimensões. O quadro seguinte apresenta um resumo das unidades usadas nas CSS, indicando igualmente se se tratam de unidades do tipo absoluto ou relativo, factor muito importante no webdesign.! " #$ % &! ' # &! '! ' Desenvolvendo sobre as unidades de medida dos values, de acordo com as áreas já indicadas, temos: Tamanho Podem ser de dois tipos: relativo ou absoluto. Em termos ideais, deve-se sempre privilegiar o uso de tamanhos relativos, pois ao contrário do mundo físico, no design para sites não conseguimos controlar verdadeiramente o nosso produto final, pois cada utilizador pode ter resoluções de monitor diferentes, bem como alterar as dimensões do texto, modificando bastante a nossa criação original. Tal não acontece no design tradicional, onde um A4 é sempre um A4. Deste modo, o recurso à unidade em é o mais comum entre os CSS designers. Em termos de conceito, 1em corresponde a 100% do tamanho base da fonte, portanto, 1.5em corresponde a 150%, 2em a 200% e 0.6em a 60% e assim por diante. FCA Editora de Informática 47

5 CSS CRIAÇÃO INOVADORA DE SITES É possível misturar vários tipos de medidas (ex: percentagens com pixels) ou medidas com keywords, assim como usar valores negativos. Não é uma property com inerência e por predefinição assume como ponto de origem, o valor das keywords top left, isto é Uso criativo das imagens A capacidade de colocar imagens como fundo de qualquer elemento do documento HTML é bastante poderosa em termos de design, pois permite efectuar alguns malabarismos interessantes, nomeadamente: Colocar fotos como complemento ao design geral; Substituir os símbolos das listas; Utilizar símbolos mesmo sem listas; Usar para fins decorativos; Criação de menus com efeitos de swap image. A primeira situação é bastante simples e basea-se no uso da property backgroundimage, ou na sua versão abreviada de somente background. Se porventura pretendermos criar um banner como o da figura 6.5, isso seria conseguido da seguinte forma: Fig Banner obtido por posicionamento CSS e 2 imagens Na prática - Criação de um banner /* Este seria o código XHTML de base: */ <div id= caixaglobal > <div id= picleft ></div> <div id= picright ></div> </div> /* No qual se aplicaria a seguinte CSS para o estilizar: */ 72 FCA Editora de Informática

6 ARRUMAÇÃO DOS CONTEÚDOS margin: 30px margin: 25px margin: 10px margin: 50px caixa02 Janela do Browser caixa01 margin: 20px caixa03 margin: 30px margin: 30px margin: 6em margin: 30px margin: 20% Figura Diferentes margens atribuídas alteraram o posicionamento dos elementos Padding (Espacejamento) Qualquer elemento pode ter um espacejamento associado, significando isto o espaço entre o ponto de origem do elemento e o ponto de origem do conteúdo. A grande diferença entre as properties padding e a margin, resulta do facto da margin deslocar o seu ponto de origem enquanto que o padding desloca apenas o seu conteúdo. Recorrendo ao exemplo anterior, do elemento parent na posição 10 e o child também na 10, se atribuirmos um padding de 5, o elemento child continua a estar na posição 10, mas o seu conteúdo desloca-se para a posição 15. Esta diferença é extremamente útil e pertinente, quando se usam imagens de fundo ou bordas. Relativamente às properties do padding, estas são: padding-top Espaço no topo; padding-right Espaço à direita; padding-bottom Espaço em baixo; padding-left Espaço à esquerda. FCA Editora de Informática 77

7 LAYOUT DAS PÁGINAS Não é uma property inerente, tendo como padrão a keyword none, permitindo por defeito, elementos flutuantes lado a lado. Esta property, pode ser muito útil para criar layouts, principalmente para as caixas destinadas a actuarem como cabeçalhos ou rodapés, pois regra geral actuam como elementos à parte ficando de fora de qualquer float. Na figura 8.2 temos um típico layout web, com um cabeçalho, seguido de um menu à esquerda e os conteúdos respectivos à direita. Um rodapé no mesmo estilo do cabeçalho remata o layout. Quer dizer, esse seria o objectivo. O que acontece é que o rodapé não só não remata o layout como se sobrepõe à caixa de conteúdos do menu. Isto acontece porque esta caixa do menu tem atribuída um float:left; e permite esta situação. Este float não pode ser, no entanto retirado, caso contrário o texto da direita, que consta dentro de outra caixa distinta, viria para baixo do menu e não ficaria ao seu lado, como se pretende. BIBLIOGRAFIA TEMAS CSS Livros FCA HTML XHTML JAVASCRIPT CLEAR traduz-se em limpar, que significa tirar a uma coisa o que a suja. Em sentido figurado quer dizer: comer todo o conteúdo de... deixar sem vintém, ganhar tudo a outrem. Se for utilizado um guardanado, limpar significa, limpar os beiços as mãos. Haverá alguma semelhança com o CLEAR? Visite também: Figura O rodapé devido ao float assenta sobre o menu de navegação Como resolver então o problema causado pelo float, mas usando-o na mesma, pois é necessário? Já devem ter calculado que é com a property clear. Neste caso, ela será atribuída à caixa que contém o rodapé, da seguinte forma: Na prática - Sintaxe da property clear com o value both clear: both; FCA Editora de Informática 87

8 LAYOUT DAS PÁGINAS Overflow Podendo nós definir o comprimento e altura de um elemento, o que acontece quando o conteúdo ultrapassa essas medidas? Para definir o comportamento do browser nesta ocasião, devemos utilizar a property overflow. Values Tem como values as keywords: visible Dimensiona o tamanho do elemento à dimensão do conteúdo; hidden Corta o conteúdo excedente de acordo com medidas especificadas; scroll Corta o conteúdo excedente de acordo com medidas especificadas, mas adiciona barras de scroll horizontalmente e verticalmente, sejam ou não necessárias; auto Corta o conteúdo excedente de acordo com medidas especificadas, mas adiciona barras de scroll horizontalmente e verticalmente, somente se for necessário e aquela que for necessária (horizontal ou vertical) para visualizar o conteúdo excedente. Por predefinição o valor do overflow é visible e não é uma property com inerência. Cuidado que ao surgirem as barras de scroll as dimensões da caixa são ajustadas, pelo que pode haver omissão de conteúdos ou redesign do layout devido ao espaço extra do(s) scroll(s). Aliquam elit quam, condimentum et, imperdiet id, molestie eget, risus. Aliquam posuere nonummy overflow: hidden; Aliquam elit quam, condimentum et, imperdiet id, molestie eget, risus. Aliquam posuere nonummy quam. Sed dapibus, lectus sed venenatis facilisis. overflow: visible; Aliquam elit quam, condimentum et, imperdiet id, molestie eget, risus. Aliquam posuere nonummy overflow: scroll; Aliquam elit quam, condimentum et, imperdiet id, molestie eget, risus. Aliquam posuere nonummy overflow: auto; Figura Exemplo do que acontece às caixas de acordo com o tipo de overflow definido FCA Editora de Informática 91

9 WEBDESIGN EXCLUSIVAMENTE VIA CSS Como sabemos, o float permite que as caixas partilhem a mesma linha horizontal, mas somente possibilitam as keywords left e right, pelo que as soluções são restritas. Ou alinhamos todas as caixas, ou juntamos 2, ou pomos uma para cada lado, como na Figura Basicamente são estas as opções que o float permite. Vejamos outro exemplo de layout (Figura 10.4). box04 box02 box01 box03 Figura Manipulação do layour base com recurso a CSS P Este layout resulta do mesmo CSS, com as seguintes alterações: BODY {background: black;} #box01 { background: white; width: 800px; height: 1600px; margin: 0 auto; border: solid 0.2em fuchsia; } #box02 { background: green; width: 400px; height: 50px; FCA Editora de Informática 111

10 IMAGENS, NAVEGAÇÃO E MENUS série de problemas que podem ser não propriamente resolvidos mas grandemente aliviados pelas CSS. Como? Podem-se fazer interessantes menus via CSS, com a vantagem de serem fáceis de actualizar ou alterar, pois a sua base é apenas código HTML. E se se trabalhar com includes shtml, php ou outros, uma simples alteração no HTML base pode ser facilmente multiplicada pelas inúmeras páginas do site. No Capítulo 15, irei usar um elegante menu via CSS, no entanto, este irá recorrer a uma imagem para gerar um efeito de swap, pelo que apesar de simples, face ao resultado, não é muito indicado para alterações, pois implica sempre no mínimo rectificar as respectivas 2 imagens associadas. A solução para este caso passa uma vez mais pelo uso criativo das listas que podem gerar com facilidade e elegância um menu do tipo drop-down como este: HOME SERVIÇOS PRODUTOS LINKS Figura Aspecto possível de um menu temático Este é o primeiro estádio do menu. Ao passar o rato por cima de um dos temas (à excepção do Home) o mesmo expande-se dando origem ao seguinte menu completo: HOME SERVIÇOS PRODUTOS LINKS Templates de sites Vídeo on-line Duplicação de DVD Flash Templates Figura O mouse hover permite expandir o submenu Um simples e poderoso menu deste tipo é facilmente conseguido via CSS, através de uma formatação correcta do documento HTML. Vejamos como, analisando em primeiro lugar o código XHTML que lhe dá origem: FCA Editora de Informática 147