SCC0265 – Sistemas Interativos Web Prof.: Dr. Rudinei Goularte ( Aula 9 – Linguagens de Estilo e de Transformação. Instituto de Ciências Matemáticas e de Computação - ICMC Sala 4-229

CSS Cascading Style Sheets Folhas de estilo em cascata

Histórico Especificação CSS-1 criada pela Microsoft em 1996 W3C aprovou e passou a recomendá-la fortemente. Foram criadas também CSS-P e CSS-2.

Vantagens Facilidade para gerenciar a aparência de um web site, pois permite ter um arquivo apenas com informações sobre formatação. HTML e XML (incluindo XHTML e SVG) Se o usuário decidir, por exemplo, aumentar todos os tamanhos de fontes do site, não será necessário atualizar todos os códigos-fonte. CSS introduziu a utilização de layers (camadas), permitindo a sobreposição de texto, imagens, etc.

Compatibilidade As CSSs não funcionam em todos os browsers e, pode ser que sua especificação não seja completamente implementada. Problema Histórico Internet Explorer: a partir da versão 3, implementa 40% da especificação, com muitas falhas. a partir da versão 4, oferece pelo menos 75% de fidelidade à especificação. Suporte completo a CSS-1 – a partir da versão 6. Suporte completo a CSS-2 – a partir da versão 9. CSS-3 – suporte parcial a partir da versão 12. Firefox (Mozilla) Suporte completo: CSS-1 e CSS-2. Suporte parcial a CSS-3 (versão 11). Releases podem conter bugs.

Sintaxe da Declaração seletor { propriedade1: valor; propriedade2: valor } Seletor: é o elemento ao qual o estilo será aplicado. Propriedade: refere-se ao tipo de estilo que será usado. Por exemplo, a propriedade font-size se refere ao tamanho da fonte. Valor: é a configuração aplicada à propriedade. Se o valor tem mais de uma palavra: usar aspas duplas.

Sintaxe da Declaração Exemplo: P { font-family: Times; font-size: 12pt; color: blue; margin-left: 0.5in }

Agrupamento É possível agrupar seletores Vírgula para separar h1,h2,h3,h4,h5,h6 { color: green }

Seletor de classe p.right {text-align: right} p.center {text-align: center} This paragraph will be right- aligned. This paragraph will be center- aligned.

Declaração Externa Normalmente define-se um arquivo texto à parte com extensão.css. As páginas do site devem fazer referência a esse arquivo. Isso se chama declaração Externa. Exemplo: Criar o arquivo estilo1.css em um editor (qualquer, notepad, p.e.). Criar um HTML e referenciar o arquivo.css usando o elemento LINK ou o

Declaração Externa Arquivo estilo1.css: H1 { font-family: "Comic Sans MS"; font-size: 36pt; color: blue } p { font-family: Currier; font-size: 15pt; color: red; margin-left: 5pt }

Declaração Externa Declaração utilizando o elemento LINK: Cabeçalho nível 1... Parágrafo...

Declaração Externa Utilizando url (estilo1.css); Cabeçalho nível 1... Parágrafo...

Declaração Incorporada São definidas no cabeçalho do documento HTML e afetam apenas a página atual. H1 { font-family: "Comic Sans MS"; font-size: 36pt; color: blue } Cabeçalho nível 1...

Declaração Inline O estilo está definido dentro da própria tag. Afeta somente a tag atual, prevalecendo sobre qualquer outra declaração. Mistura o estilo com o conteúdo!!!!

Declaração Inline H1 { font-family: "Comic Sans MS"; font-size: 36pt; color: blue } Cabeçalho nível 1... Cabeçalho diferente

Cascata Prioridade (mais baixa para mais alta): Browser (default) Style sheet externa Style sheet interna (declaração incorporada) Inline

Múltiplos estilos para um mesmo seletor Externa h3 { color: red; text-align: left; font-size: 8pt } Interna h3 { text-align: right; font-size: 20pt } Se página com estilo interno também “linka” estilo externo: color: red; text-align: right; font-size: 20pt “color” é herdada do estilo externo

Propriedades das Fontes font-style Pode ser: normal (padrão) ou italic. Exemplo: H3 { font-style: italic }

Propriedades das Fontes font-family Define uma família de fontes, pois nem todas as fontes podem estar disponíveis no computador cliente. Para nome da fonte com mais de uma palavra, usa-se aspas. Exemplo: P {font-family: gill, helvetica, “Times New Roman”} Os valores possíveis são as diversas fontes existentes. Exemplos: Verdana, Arial, “Times New Roman”, Currier, Sans-serif, etc.

Propriedades das Fontes font-variant Usada para a variação de fonte small-caps. Valores: normal ou small-caps Exemplo: H3 {font-variant: small-caps}

Propriedades das Fontes font-weight Define a espessura da fonte ValoresDescrição boldNegrito bolderFonte mais grossa que a fonte do elemento pai. lighterFonte mais fina que a fonte do elemento pai. 100, 200, 300,..., 900 Valores que definem a espessura da fonte. Negrito equivale a 700 e normal a 400.

Propriedades das Fontes font-size Define o tamanho da fonte. Pode assumir valores relativos absolutos e numéricos. ValoresDescrição xx-small, x-small, small, medium, large, x-large, xx- large Valores absolutos. Podem mudar dependendo do browser. smaller, largerValores relativos. Dependem do valor do pai. Numéricos Exemplo: P {font-size: 14pt} Unidades usadas: pt (pontos), px (pixels), in (polegadas), cm (centímetros), mm (milímetros).

Propriedades das Fontes font Permite definir todas as propriedades das fontes (font-style, font-variant, font- weight, font-size, font-family). Exemplo: P {font: italic, 12pt, sans-serif}

Propriedades do Texto word-spacing Define o espaço entre as palavras. Assume valor numérico seguido da medida ou o valor normal. Exemplo: p {word-spacing: 5pt} letter-spacing Define o espaço entre as letras. Exemplo: p {letter-spacing: 5pt}

Propriedades do Texto text-decoration Indica características adicionais ao texto. ValoresDescrição noneTexto normal underlineSublinhado overlineTexto com traço por cima line-throughTexto riscado BlinkTexto piscante

Propriedades do Texto text-align Define o alinhamento do texto. Valores possíveis: left, right, center, justify. text-indent: Especifica o recuo da primeira linha. Valores numéricos em várias unidades de medida. line-height Define a distância entre duas linhas. Valores numéricos em várias unidades de medida.

Propriedades de Cor e Fundo color define a cor dos elementos do primeiro plano. Exemplos: LI {color: blue} P {color: rgb (0, 255, 0) H1 {color: #ff0000}

Propriedades de Cor e Fundo ValorSignificado AquaVerde-mar BlackPreto BlueAzul FuchsiaRosa GrayCinza MaroonMarrom LimeVerde-limão NavyAzul-marinho OliveOliva PurplePúrpura ValorSignificado RedVermelho SilverPrateado TealVerde-escuro Yellowamarelo ExemploSignificado #f00#rgb #ff0000#rrggbb rgb (255, 0, 0) RGB com inteiros de 0 até 255

Propriedades de Cor e Fundo background-color Especifica a cor de fundo de um elemento H1 {background-color: yellow; color: blue } BODY {background-color: black} Fundo do cabeçalho amarelo, letra azul e fundo da página preto

Propriedades de Cor e Fundo brackground-image Define uma imagem para o fundo do elemento. Exemplo: BODY {background-image: url (bola.gif)}

Propriedades da Margem As propriedades da margem são: margin-top, margin-right, margin-botton, margin-left. Pode-se usar valores numéricos com várias unidades de medida ou a palavra chave “auto”. Margin: propriedade atalho

Referências cademy/css_tutorial/ Mazzeti, G.; Mink, C. HTML 4 com XML. Makron Books, Livro que apresenta propriedades além das mostradas em sala de aula.

Publicando Documentos XML XML com CSS Noções de vínculos de dados

XML com CSS As CSSs (Cascating Style Sheets) foram desenvolvidas para trabalhar com HTML, mas podem ser usadas com XML. Usando CSS pode-se especificar como os elementos (tags) XML serão formatados pelo browser. Considere o arquivo Livro1.xml a seguir e seu correspondente Livro1.css.Livro1.xmlLivro1.css

XML com CSS The Meditations by Marcus Aurelius Book One Primeiro paragrafo do livro Segundo paragrafo do livro Terceiro paragrafo do livro

XML com CSS TITULO { display: block; font-size: 24pt; font-weigth: bold; text-align: center; text-decoration:underline } AUTOR { display: block; font-size: 18pt; font-weigth: bold; text-align: center }

XML com CSS SECAO { display: block; font-size: 16pt; font-weigth: bold; text-align: center; font-style:italic } P { display: block; margin-top: 10 }

Vínculos entre XML e HTML O vínculo de dados serve para “ligar” um.xml a um.html Torna-se nítida agora a separação entre o conteúdo e a formatação da página. Próxima aula

Vínculos entre XML e HTML Considere os arquivos clientes.xml e clientes.html: Maria das Dores /05/2003 José da Silva /12/2003

Bibliografia HOLZNER, S. Desvendando XML. Editora Campus: Rio de Janeiro, MAZZETTI, G; MINK, C. HTML 4 com XML. Editora Makron Books: São Paulo, 2000.

XSL (eXtensible Stylesheet Language) Princípios Básicos

Introdução As XSLs são as folhas de estilo XML. XSL consiste de duas partes: um método para transformar documentos XML; um método para formatar documentos XML.

Introdução Com XSL, pode-se: transformar XML em HTML, filtrar e ordenar dados XML, formatar dados XML baseados em seus valores (como mostrar números negativos em vermelho) e fornecer dados XML para diferentes saídas (como tela, papel ou voz).

Introdução Por quê duas linguagens de estilo? CSS XSL Pode ser usado com HTML? sim não Pode ser usado com XML? sim sim Linguagem de transformação? não sim Sintaxe CSS XML

Introdução XSL consiste de duas partes: XSLT (XSL Transformation) Linguagem para transformar documentos XML em outros documentos XML. XSL Formatting Objects (XSL-FO) vocabulário para formatar documentos XML. Define o resultado de uma transformação XSL em uma forma de saída apropriada. Usa XPath como tecnologia auxiliar.

XSLT e XPath XSLT é utilizada para definir as transformações XML. XSLT pode: acrescentar ou remover elementos ao arquivo de saída, re-arranjar os elementos, tomar decisões sobre quais elementos apresentar ou não. XPath é utilizada para definir “padrões” compatíveis para as transformações.

XSLT e XPath XSLT utiliza XPath para definir as partes do documento fonte que “casam” com um ou mais templates pré-definidos. XSLT transforma a parte que “casou” do documento fonte em um documento resultante.

XPath Sintaxe

Transformação XML para HTML XML exemplo: Empire Burlesque Bob Dylan Unchain my heart Joe Cocker

Transformação XML para HTML <xsl:stylesheet version="1.0" xmlns:xsl=" Titulo Artista

Transformação XML para HTML Ao abrir o arquivo cd_catalogo.xml no Browser, o resultado deverá ser o seguinte:

Transformação XML para HTML A tag xsl:stylesheet define o início do XSL. A tag xsl:template define o início da descrição do formato (template). O atributo match=”/” associa o formato à raiz (/) do documento XML fonte. O resto do documento descreve o formato, exceto as últimas duas linhas que definem o fim do formato e o fim do XSL.

Transformação XML para HTML O elemento é usado para selecionar elementos XML para a saída da transformação XSL. O elemento XSL é usado para selecionar todos os elementos para a saída da transformação XSL. O elemento xsl:for-each localiza elementos no documento XML e repete uma parte do formato para cada um.

Transformação XML para HTML O atributo order-by: Pode-se usar o atributo order-by junto ao elemento for-each para ordenar a saída. (+) ou (-) definem se a ordenação será ascendente ou descendente. Exemplo:

Transformação XML para HTML Filtro com XSL: Para filtrar o arquivo XML, é preciso adicionar um filtro no elemento for-each no arquivo XSL. Exemplo: Operadores válidos para o filtro são: = (igual) != (diferente) < (menor que) > (maior que)

Transformação XML para HTML Condição IF em XSL basta adicionar um elemento xsl:if no arquivo XSL. Exemplo:

Transformação XML para HTML Condição CHOOSE em XSL Serve para testar o conteúdo do XML. Adiciona-se xsl:choose, xsl:when e xsl:otherwise no arquivo XSL. Formato da condição choose:......

Transformação XML para HTML Trecho do arquivo XSL (tabela) com condição choose: Titulo Artista

Transformação XML para HTML O resultado do exemplo anterior no browser será:

Elementos XSLT ElementoDescrição xsl:apply-importsAplica um template para uma folha de estilo importada. xsl:apply-templatesAplica um template ao elemento atual e aos seus filhos. xsl:attributeAdiciona um atributo ao elemento mais próximo. xsl:attribute-setDefine um conjunto de atributos. xsl:call-templateManeira de chamar um template já definido. xsl:chooseManeira de escolher entre um número de alternativas baseadas em condições. xsl:commentCria um comentário XML. xsl:copyCopia para a saída o elemento atual sem seus sub-elementos e atributos. xsl:copy-ofCopia para a saída o elemento atual com seus sub-elementos e atributos.

Elementos XSLT (Continuação) ElementoDescrição xsl:decimal-formatDefine conversão decimal-string xsl:elementAdiciona um novo elemento à saída. xsl:fallbackAlternativa para instruções não implementadas. xsl:for-eachCria um loop no documento de saída. xsl:ifManeira de criar estrutura condicional. xsl:importImporta uma folha de estilo. xsl:includeInclui uma folha de estilo. xsl:keyFornece maneira de definir uma chave. xsl:messageEscreve uma mensagem na saída. xsl:namespace-aliasMapeia um namespace para outro namespace. xsl:numberEscreve um número formatado na saída.

Elementos XSLT (Continuação) ElementoDescrição xsl:otherwiseIndica o que deve ocorrer se nenhuma das condições de for satisfeita na condição. xsl:outputManeira de controlar a saída transformada. xsl:paramManeira de definir parâmetros. xsl:preserve-spaceDefinir e manipular espaços em branco. xsl:processing-instructionEscreve uma instrução de processamento na saída. xsl:sortManeira de definir ordenação. xsl:stylesheetDefine o elemento raiz da folha de estilo. xsl:templateDefine um template para a saída. xsl:textEscreve texto na saída. xsl:value-ofInsere um valor na saída.

Elementos XSLT (Continuação) ElementoDescrição xsl:variableManeira de declarar variáveis. xsl:whenDefine uma condição a ser testada e executa uma ação se a condição for verdadeira. É um elemento filho de. xsl:with-paramManeira de passar parâmetros para templates.

Ferramentas Para processar um documento XML utilizando XSL, é preciso um parser XML com uma XSL engine. Processadores XSLT XT (James Clark em Java) Oracle's XML Parser for Java v2 Apache Xalan-Java Browsers com suporte a XSLT Netscape 6 (Recomendação W3C) IE 5.0 e 5.5 (versão Working Draft) IE 6.0 (Recomendação W3C) Firefox Apache Cocoon  processador que fica no lado servidor

Trabalho 6 Para o XML contendo os dados do Pet Shop (com vários clientes, produtos’, etc.!), desenvolver: Desenvolver folhas de estilos para gerar 3 visões (3.XSD) diferentes dos dados: Animais & Clientes (donos), Animais & Produtos (somente os produtos usados.comprados para cada animal) e Animais & Serviços (somente os serviços prestados a esse animal). Entregar via TIDIA, via escaninho, até a próxima aula.

Referências Bibliográficas Página oficial de XSL no site do W3C: XPath: