Ambientes de DesenvolvimentoXML-XHTML

Paulo Sousa

ISEP/IPP

Portugal

XML-XHTML 2

Conteúdo

Tecnologias XML

XML

DTD

XHTML

XML-XHTML 3

Tecnologias XML

Um conjunto de tecnologias para representação e manipulação de dados (essencialmente) para sistemas desenvolvidos sobre a Internet

Quase na totalidade normas W3C

XML

XSL-T

XSL-FO

XSDDTD

SOAP

.NET

XLink

XPointer

XHTML

SAX

XML-XHTML 4

URL

XML-XHTML 5

XML

XML = eXtensible Markup Language Baseada em SGML Elementos + atributos Case-sensitive Atributos entre aspas ou pelicas Bem formada

“Língua Franca” para a representação de dados (estruturados)

XML-XHTML 6

XML (2)

Firewall Firewall

Internet

Server Server

Workstation

PC

Laptop

Workstation

iMac

PDAPDA

.xml

XML-XHTML 7

<?xml version="1.0"?><pessoas>

<pessoa id='1'><nome>Manuel</nome><data-nascimento>

<dia>2</dia><mes>5</mes><ano>1922</ano>

</data-nascimento><telefone rede='TMN' num='964123456' />

</pessoa> </pessoas>

XML (3)

Exemplo documento XML

Indicação XML

Raiz do documento

Elemento com atributo

Elemento sem dados

Demo

Demo

XML-XHTML 8

XML (4)

pessoas

Data-nascimentonome telefone

pessoapessoa pessoa

mesdia ano

... ...

XML-XHTML 9

XML (5)

Exercício Criar um documento XML para CDs e visualizar no

browser

Dicas Caracteres portugueses

<?xml version="1.0" encoding="ISO-8859-1" ?>

XML-XHTML 10

XML (6)

Solução possível

<?xml version="1.0"?><CDs>

<cd titulo=“All that you can’t leave behind”><artista>U2</artista><data-lancamento formato=‘Ma’>Outubro 2000</data-lancamento><editora>Polygram Records</editora><faixas quant=‘11’ duracao=’44:47’>

<faixa num=‘1’ titulo=‘Beautiful Day’ duracao=‘4:08’><letra>Bono</letra><musica></musica>

</faixa>...

</faixas></cd> ...

</CDs>

“lista” de faixas

Atributo dá significado/interpretação

ao conteúdo

Demo

Demo

XML-XHTML 11

XML (7)

Problema...

Cada pessoa fez a sua solução Nome dos elementos Nome dos atributos Ordem e agrupamento dos elementos Ordem e agrupamento dos atributos Significado dos elementos Significado dos atributos

XML-XHTML 12

DTD

DTD = Document Type Definition

Regras de validação da sintaxe de documentos XML

Embutido no documento ou externo

Utilizado por editores de XML para garantir a conformidade de um documento

XML-XHTML 13

<!ELEMENT pessoas (pessoa*)><!ELEMENT pessoa (nome, data-nascimento?, telemovel?)><!ATTLIST pessoa id CDATA #REQUIRED><!ELEMENT nome (#PCDATA)><!ELEMENT data-nascimento (dia, mes, ano)><!ELEMENT dia (#PCDATA)><!ELEMENT mes (#PCDATA)><!ELEMENT ano (#PCDATA)><!ELEMENT telefone EMPTY><!ATTLIST telefone rede CDATA #IMPLIED><!ATTLIST telefone num CDATA #REQUIRED>

DTD (2)

Exemplo de DTDElemento composto por

repetições de outro elemento

Elemento opcional

Lista de atributos de um elemento (facultativos e

obrigatórios)

Elemento sem dados

CodeCode

XML-XHTML 14

DTD (3)

Sintaxe Elementos:

!ELEMENT nome-elemento composição

Atributos: !ATTLIST nome-elemento nome-atributo tipo-dados tipo-valor

Agrupamentos & Cardinalidade: () , | * ? +

Tipo de dados: #PCDATA ou CDATA ou EMPTY ou ANY

Tipo de valor: #REQUIRED ou #IMPLIED ou #FIXED

XML-XHTML 15

<?xml version="1.0"?><!DOCTYPE pessoas [<!ELEMENT pessoas (pessoa*)><!ELEMENT pessoa (nome, data-nascimento?, telemovel?)><!ATTLIST pessoa id CDATA #REQUIRED><!ELEMENT nome (#PCDATA)><!ELEMENT data-nascimento (dia, mes, ano)><!ELEMENT dia (#PCDATA)><!ELEMENT mes (#PCDATA)><!ELEMENT ano (#PCDATA)><!ELEMENT telefone EMPTY><!ATTLIST telefone rede CDATA #IMPLIED><!ATTLIST telefone num CDATA #REQUIRED>

]><pessoas>

...</pessoas>

DTD (4)

DTD embutido num documento XML

Inicio DTD

Fim do DTD embutido

Conteúdo XML

Conteúdo DTD

CodeCode

XML-XHTML 16

<?xml version="1.0"?><!DOCTYPE pessoas SYSTEM “pessoas.dtd”><pessoas>

<pessoa id='1'><nome>Manuel</nome><data-nascimento><dia>2</dia><mes>5</mes><ano>1922</ano></data-nascimento><telefone rede='TMN' num='964123456' />

</pessoa>...

</pessoas>

DTD (5)

DTD externo ao documento XML

Indicação DTD externo e localização (URL)

Ficheiro pessoas.dtd tem o conteúdo DTD

XML-XHTML 17

DTD (6)

Exercícios Criar um DTD externo para documento XML de

exercício anterior: CDs

Utilizando um editor XML (por ex. XML Writer) validar o documento XML de acordo com DTD elaborado

Solução CodeCode

XML-XHTML 18

XHTML

XHTML = eXtensible HTML HTML = HyperText Markup Language Etiquetas que especificam formatação de páginas

web Estende o HTML usando as regras do XML e

“forçando” o HTML a ser um dialecto XML Especificação W3C

http://www.w3.org/TR/xhtml1/ http://www.w3.org/TR/html401/

XML-XHTML 19

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Virtual Library</title> </head> <body> <p>Moved to <a href="http://vlib.org/">vlib.org</a>.</p> </body></html>

XHTML (2)

Exemplo documento XHTML

Indicação XML

Especificação DTD

Raiz do documento

cabeçalho

Demo

Demo

Corpo do documento

XML-XHTML 20

XHTML (3)

1º) indicação de documento XML e codificação dos caracteres. <?xml version="1.0" encoding="UTF-8"?> UTF-16 ou ISO-8859-1 para caracteres em Português

2º) indicação do DTD para XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN“ "DTD/xhtml1-strict.dtd">

3º) conteúdo do documento <html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">

XML-XHTML 21

XHTML (4)

4º) cabeçalho <head> ... </head>

Conteúdo possível: Título do documento <title>texto</title> Meta-dados <meta name=‘nome’ content=‘conteúdo’ />

XML-XHTML 22

XHTML (5)

5º) corpo do documento <body>conteúdo</body>

Alguns atributos Cor de fundo para o documento bgcolor=‘cor’ Imagem de fundo para o documento background=‘URL’

XML-XHTML 23

XHTML (6)

Conteúdo possível Parágrafos <p>texto</p> Mudanças de linha <br /> Separadores horizontais <hr /> Caracteres especiais &amp; &lt; &gt; &atilde; &aacute; &agrave; &acirc;

&euro; &nbsp; &ccedil;

XML-XHTML 24

XHTML (7)

Conteúdo possível (cont.) headings <h1>texto</h1> até <h9>texto</h9> Enfatizar ou itálico <em>texto</em> ou <i>texto</i> Realçar ou negrito <strong>texto</strong> ou <b>texto</b> Sublinhar <u>texto</u>

XML-XHTML 25

XHTML (8)

Conteúdo possível (cont.) Formatação de código fonte <code>texto</code> Texto pré-formatado <pre>texto</pre> Hiperligações <a href=‘URL’>texto</a> Imagens <img alt=‘texto’ src=‘URL’ />

XML-XHTML 26

XHTML (9)

Conteúdo possível (cont.) Listas ordenadas <ol>itens</ol> Listas de pontos <ul>itens</ul> Item de uma lista <li>texto</li>

Demo

Demo

XML-XHTML 27

XHTML (10)

Conteúdo possível (cont.) Tabelas <table>tabela</table> Linhas de uma tabela <tr>itens</tr> Uma célula como cabeçalho de uma tabela <th>itens</th> Célula normal de uma linha de tabela <td>texto</td> Dem

oDem

o

XML-XHTML 28

XHTML (11)

Conteúdo possível (cont.) Alguns atributos para os elementos de tabelas border=‘grossura’ aplica-se: table width=‘comprimento’ aplica-se: table tr th td height=‘altura’ aplica-se: table tr th td celpadding=‘pix’ aplica-se: table celspacing=‘pix’ aplica-se: table colspan=‘pix’ aplica-se: th td rowspan=‘pix’ aplica-se: tr Dem

oDem

o

XML-XHTML 29

XHTML (12)

Exercício Elabore uma pequena página pessoal ou acerca de um

assunto de seu interesse usando as diferentes etiquetas apresentadas.