Processamento Estruturado de Documentos 2005 By jcr

Documentos relacionados
XML: uma introdução prática X100. Helder da Rocha

IFSC/Florianópolis - Prof. Herval Daminelli. De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links

08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão

Sintaxe Básica da Linguagem CSS

CSS (Cascading Style Sheet)

CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira

Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]

TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão

Comandos Extras Formatações no CSS

Aula 3 - Parte Final HTML e CSS

HTML, CSS e JavaScript

HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo

Aula 8 Formatando o texto (propriedades)

Cascading Style Sheets

F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07

PROGRAMAÇÃO EM AMBIENTE WEB I

<head> <title> Uso de Imagem </title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso " /> </head>

Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano

06/02/2016 PROGRAMAÇÃO EM AMBIENTE WEB I CSS UM POUCO DE HISTÓRIA

CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I

Modelo de Artigo para as Actas do 8.º Encontro de Tipografia:

Cascading Style Sheets CSS

HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext)

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML

Estilo em Aplicações Hipermídia na Web

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CSS INTRODUÇÃO E MANIPULANDO FONTES

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

Desenvolvimento Web. Professor: Bruno E. G. Gomes

Documentos MS Word acessíveis

Treinamento em CSS. Índice

Processador de Texto WinWord (Regras)

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto

TECNOLOGIA WEB. XHTML Aula 5. Profa. Rosemary Melo

Obedecendo essa estrutura definida para a linguagem, podemos dividir a sua definição em duas partes: os elementos da linguagem e as suas regras.

AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos

Desenvolvimento Web. CSS Conceitos básicos parte I. Professor: Bruno Gomes

Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho

XML: uma introdução prática X100. Helder da Rocha

DOSSIER DA DISCIPLINA

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.)

HTML Página 36. Índice

08/08/2011 TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS

Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho

Web Design - CSS. Conteúdo. - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS

XSL - extemsible Stylesheet Language. Prof. Antonio Almeida de Barros Jr.

CSS CASCADING STYLE SHEET

Recursos Complementares (Tabelas e Formulários)

Web Design Aula 16: Modelo de Caixa e propriedades de Imagem

CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto

HTML (HyperText. Markup Language)

Introdução a XML X100

#Trabalhando com Texto

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

Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva

modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha

Notas sobre XSLT. O modo correcto para declarar um documento xsl é:

PROGRAMAÇÃO PARA INTERNET. Prof.: Jean Carlo Mendes

Web Design Aula 15: Propriedades CSS

HTML: TEXTOS SUMÁRIO. Cabeçalhos para títulos e sub-títulos Parágrafos

3. Construção de páginas web Introdução ao HTML

Criando estilos. Css. Cada estilo que você cria é definido como uma regra CSS. Cada regra deve-se utilizar a seguinte sintaxe:

Paradigmas de Programação React Native

CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML

Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS.

Introdução ao HTML e às folhas de estilo (CSS)

Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html

Projeto e Implementação do Sistema SciPo

HTML: Recursos Básicos e Especiais

XSLT. Sub-linguagens. Processamento Estruturado de Documentos 2003 By jcr XSL XSLFO XSLT. XPath. 11 de Setembro de 2003 jcr - ped2003-1

Síntese da aula anterior

Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano

Projeto e Computação Gráfica. Pedro Mitsuo Shiroma

Modelo de formateo visual em CSS

HTML AULA 2 Microlins - Web e Design Capítulo 2 Rondonópolis 14 de Maio de Mayza de

Tabelas. table <table>...</table>

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I

HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011

Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança,

Revisando os conteúdos. Introdução ao CSS

Desenvolvimento Web. HTML 5 Parte I. Prof. Vicente Paulo de Camargo

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

Programação para Internet

Caderno de Exercícios

PROGRAMADOR WEB. PROF. Esp. Andrew H. G. Rodrigues

SIMULADOS & TUTORIAIS

2.5 Barra de Status Seleção Padrão. Modifica o modo de seleção entre Seleção padrão, Estender seleção, Adicionar seleção e Seleção em bloco.

Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral

CSS. Karen Frigo Busolin

Informática Básica. Aula 2.9 Formatação no Writer. Prof. Dr. Bruno Moreno

CSS Cascading Style Sheets (Folhas de Estilo em Cascata)

E-Portefólio da especificação ao processamento digital

COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS

DIV 1 DIV 2 DIV 3 DIV 4 DIV 5

INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO

HyperText Markup Language HTML. Tabela

Introdução ao AutoCAD Capitulo VI: Adicionar texto

Transcrição:

XSL or XSLFO Processamento Estruturado de Documentos 2005 By jcr O que é? Uma linguagem de anotação para descrever conteúdos paginados. Suporte conceitos como: página, cabeçalho, rodapé,... jcr -ped2005 2 de 30 1

Geração de PDF Doc. XML XSLFO PDF XSLT Proc. XSL Motor de Formatação jcr -ped2005 3 de 30 Hello World <?xml version="1.0" encoding="utf-8"?> <fo:root xmlns:fo="http://www.w3.org/1999/xsl/format" > <fo:layout-master-set> <fo:simple-page-master master-name="letterpage" pagewidth="8.5in" page-height="11in" > <fo:region-body region-name="pagebody" margin="0.7in"/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence O elemento master-reference="letterpage"> root é sempre o elemento <fo:flow principal. flow-name="pagebody"> <fo:block>hello World</fo:block> </fo:flow> No elemento layout-master-set definem-se as </fo:page-sequence> </fo:root> PDF gerado várias geometrias de página. O conteúdo é colocado numa sequência de páginas. jcr -ped2005 4 de 30 2

Estrutura de um documento FO O modelo de formatação do XSL define um conjunto de áreas rectangulares (caixas) onde é colocado o conteúdo. O conteúdo (texto, imagens, etc.) é formatado nestas caixas e depois convertido no formato de saída desejado. Um documento FO está organizado nas seguintes áreas: Pages - páginas Regions - regiões Block areas - blocos Line areas - linhas Inline areas pedaços de texto numa linha jcr -ped2005 5 de 30 jcr -ped2005 6 de 30 3

Parágrafos <fo:page-sequence master-reference="letterpage"> <fo:flow flow-name="pagebody" font-family="arial" fontsize="12pt"> <fo:block text-align="justify" space-after="0.5cm" border="0.5pt solid green">este é o primeiro parágrafo com texto justificado. Repare como o texto preenche todo o espaço disponível. A linha de contorno tem 0.5 pt de largura, é sólida, e de cor verde. Este parágrafo cria um espaço vertical a seguir de 0.5 cm.</fo:block> Notas: <fo:block text-align="justify" space-before="2cm" border="0.5pt dotted red">este é o segundo parágrafo de texto justificado. 1. As características Desta vez a da linha fonte de são controno especificadas é vermelha no elemento e ponteada. Este parágrado deixa um espaço vertical para o pai (flow); são depois herdadas pelos 2 parágrafos. objecto anterior de 2 cm.</fo:block> </fo:flow> </fo:page-sequence> PDF Gerado 2. A distância entre parágrafos não é aditiva; o maior valor é o que prevalece. jcr -ped2005 7 de 30 Alinhamento de Texto O alinhamento horizontal do texto é controlado por dois atributos: text-align: que define o alinhamento de todas as linhas excepto a última; text-align-last: que define o alinhamento da última linha. Os valores possíveis para estes atributos são: left, right, center, e justify. jcr -ped2005 8 de 30 4

Fontes Há 6 propriedades que permitem controlar o aspecto do texto: font-family, font-style, font-variant, font-weight, font-size, line-height. jcr -ped2005 9 de 30 font-family O atributo font-family permite especificar o tipo de letra a usar para o texto. Exemplo: font-family = Arial Se fôr especificada mais do que uma fonte, o sistema escolherá a primeira da lista que ele tenha disponível. As fontes devem ser especificadas da mais específica para a mais genérica. Exemplo: font-family = Arial, Helvetica jcr -ped2005 10 de 30 5

font-weight A tonalidade de um tipo de letra (mais leve ou mais carregada) é especificada com o atributo font-weight. O seu valor pode ser absoluto: bold ou normal. Ou relativo à tonalidade do elemento pai: bolder ou lighter. jcr -ped2005 11 de 30 font-size O atributo font-size permite especificar o tamanho da letra. O tamanho pode ser fixo: 1cm, 0.5in, 10pt,... Ou uma percentagem do tamanho de letra do elemento pai: 0.5, 50% jcr -ped2005 12 de 30 6

line-height Esta propriedade especifica a altura mínima de uma linha num elemento block. O valor por omissão para line-height é 120%. A linha terá mais 20% de altura que o texto. Por exemplo, se o texto tiver 10pt, a altura da linha será de 12pt. O texto é centrado na linha, a 1pt do topo, e a 1pt do pé. Se uma linha contiver uma imagem com 100pt de altura, a altura dessa linha será de 102pt. jcr -ped2005 13 de 30 line-height <fo:flow flow-name="pagebody"> <fo:block font-family="arial" font-size="12pt" lineheight="200%" border="1px outset blue"> Para este parágrafo, a altura da linha foi especificada com 200%. Uma vez que a fonte é de 12pt, a altura da linha terá 24pt. O contorno também foi especificado com outros parâmetros.</fo:block> </fo:flow> PDF gerado jcr -ped2005 14 de 30 7

flow O conteúdo de um documento irá ser distribuído por várias páginas pertencentes a uma sequência: o elemento flow encarregase disso. Normalmente, o conteúdo de um elemento flow é estruturado em blocos: block. Um elemento do tipo block corresponde a um parágrafo, lista ou tabela. jcr -ped2005 15 de 30 block Há várias propriedades que controlam a colocação de texto nos elementos block: Quebra de página antes ou depois de um block: break-before, break-after. Manter todo o elemento na mesma página: keep-together. Manter blocos relacionados na mesma página: keep-with-next, keep-with-previous. jcr -ped2005 16 de 30 8

Formatações parciais: fontes e cor <fo:block font="12pt Arial"> Eis <fo:inline font-weight="bold" color="red">algum texto</fo:inline> parcialmente formatado. </fo:block> Exemplos de mudança de cor: <fo:inline color="red">teste de cor</fo:inline> <fo:inline color="rgb(255,0,0)">teste de cor</fo:inline> jcr -ped2005 17 de 30 FP: Superscrips e Subscripts <fo:block> Texto <fo:inline baseline-shift="sub" > em subscript</fo:inline> texto <fo:inline baseline-shift="super" >em superscript</fo:inline> texto. </fo:block> <fo:block> Texto <fo:inline baseline-shift="-50%" >-50%</fo:inline> texto <fo:inline baseline-shift="50%" >+50%</fo:inline> texto. </fo:block> <fo:block> Texto <fo:inline baseline-shift="-5pt" >-5pt</fo:inline> texto <fo:inline baseline-shift="5pt" >5pt</fo:inline> texto. </fo:block> jcr -ped2005 18 de 30 9

Imagens <fo:block> <fo:external-graphic src="url(../graphics/xml_feather.gif)"/> </fo:block> jcr -ped2005 19 de 30 Geometria de uma página Uma página tem 5 áreas: region-body: onde é colocado o conteúdo, ou seja, o conteúdo de flow. region-before: onde é colocado o cabeçalho. region-after, onde é colocado o rodapé. region-start e region-end, áreas laterais, raramente utilizadas. jcr -ped2005 20 de 30 10

Elementos de Topo root Elemento principal Onde devem ser colocados os atributos comuns layout-master-set Definição das várias geometrias que serão aplicadas às diferentes páginas page-sequence No mínimo um elemento deste tipo Filho: flow O flow tem filhos do tipo block: table, list-block, block,... jcr -ped2005 21 de 30 Processadores de FlowObjects FOP: http://apache.telepac.pt/xml/fop/binaries/ jcr -ped2005 22 de 30 11