Ambientes de Desenvolvimento XML-XHTML

1. Ambientes de DesenvolvimentoXML-XHTML Paulo Sousa ISEP/IPP Portugal

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-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) XML-XHTML

7. XML (3) • Exemplo documento XML Indicação XML <?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> Raiz do documento Elemento com atributo Elemento sem dados Demo XML-XHTML

8. XML (4) 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> Atributo dá significado/interpretação ao conteúdo “lista” de faixas 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. DTD (2) • Exemplo de DTD Elemento composto por repetições de outro elemento <!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> Elemento opcional Elemento sem dados Lista de atributos de um elemento (facultativos e obrigatórios) Code XML-XHTML

14. DTD (3) • Sintaxe • Elementos: • !ELEMENTnome-elementocomposição • Atributos: • !ATTLIST nome-elemento nome-atributotipo-dadostipo-valor • Agrupamentos & Cardinalidade: • () , | * ? + • Tipo de dados: • #PCDATA ou CDATA ou EMPTY ou ANY • Tipo de valor: • #REQUIRED ou #IMPLIED ou #FIXED XML-XHTML

15. DTD (4) • DTD embutido num documento XML Inicio DTD <?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> Conteúdo DTD Fim do DTD embutido Code Conteúdo XML XML-XHTML

16. DTD (5) • DTD externo ao documento XML <?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> 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 Code 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. XHTML (2) • Exemplo documento XHTML Indicação XML <?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> Especificação DTD Raiz do documento cabeçalho Corpo do documento Demo 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 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> Demo 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 Demo 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. XML-XHTML