View page as slide show

HTML, XHTML e XML

Noções Básicas para uso com Mapserver

João Araujo Ribeiro

Pós-Graduação em Engenharia de Computação - Geomática

Para ver esta apresentação em slides, clique no ícone acima à direita da página

O que é HTML

HTML (HyperText Markup Language) é uma linguagem de marcação usada para apresentar informação na Web usando o protocolo http.

O que é uma linguagem de marcação

Uma linguagem de marcação é um conjunto de códigos aplicados a um texto ou a dados, com o fim de adicionar informações particulares sobre esse texto ou dado, ou sobre trechos específicos.

Tags

O HTML utiliza etiquetas, marcações que são conhecidas como Tags, que consistem em breves instruções tendo uma marca de início e outra de fim.

Estas tags determinam a formatação do texto, imagens e demais elementos que compõem uma página HTML.

Em HTML as tags iniciam com símbolo < e terminam com o símbolo >

Tags Básicas

Cabeçalho

Dentro do cabeçalho (tag ”<head>”) podemos encontrar:

Exemplo (Página da Geomática)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel="shortcut icon" href="favicon2.ico"> 
    <meta  http-equiv="Content-Type" Content="text/html; charset=ISO-8859-1">
    <meta name="author" content="Joao Araujo">
    <title>Mestrado em Geomatica</title>
    <link href="estilosnew.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="mestrado.js" language="JavaScript">
    </script>
  </head>
<body>
...
</body>
</html>

Corpo

Dentro do corpo (tag ”<body>”) podemos encontrar outras várias tags, como por exemplo:

Problemas de HTML

CSS

Exemplo

h1  { font-family:"century gothic",serif; 
        font-size:24pt; 
        color:#4D9FFF; 
        font-weight:normal; 
        margin-bottom:2pt;
}

Mas...

Mesmo com CSS, o HTML ainda mantinha um pouco da formatação inserida junto com a informação.

XML

Objetivos

Exemplo

<aluno id="adrianaa">
    <nome>Adriana dos Santos Aparício</nome>
    <anoingresso>2001</anoingresso>
    <dissertacao>Ontologias, Uma Alternativa para Integração de Bases de Dados Heterogêneas.</dissertacao>
    <dataseminario>2004-10-27</dataseminario>
    <orientador>Oscar Luiz Monteiro de Farias, D.Sc., UERJ</orientador>
    <coorientador>Neide dos Santos, D.Sc., UERJ</coorientador>
    <apresentouseminario>sim</apresentouseminario>
  </aluno>

Derivações de XML

XML serve para definir outras linguagens de marcação, por exemplo:

Sopa de letrinhas

XSD: XML Schema Definition (XSD) . Define um tipo de documento XML de acordo com certas restrições sobre quais elementos e atributos podem aparecer, suas relações, os tipos de dados que podem conter. Também pode ser usado para validar um arquivo XML.

Exemplo

<xs:element name="aluno">
 <xs:complexType>
  <xs:sequence>
    <xs:element ref="nome"/>
    <xs:element ref="anoingresso"/>
    <xs:element ref="situacao"/>
    <xs:element minOccurs="0" ref="dissertacao"/>
    <xs:element minOccurs="0" ref="endereco"/>
    <xs:element minOccurs="0" ref="dataseminario"/>
    <xs:element minOccurs="0" ref="datadefesa"/>
    <xs:element minOccurs="0" ref="orientador"/>
    <xs:element minOccurs="0" ref="coorientador"/>
    <xs:element minOccurs="0" maxOccurs="10" ref="banca"/>
    <xs:element minOccurs="0"  ref="apresentouseminario"/> <xs:element minOccurs="0" maxOccurs="unbounded" ref="paragraforesumo"/>
   </xs:sequence>
   <xs:attribute name="id" use="required"/>
 </xs:complexType>

XSL

XSL (eXtensible Stylesheet Language) é uma família de linguagens do W3C definindo transformações em documentos XML. A que nos interessa é a XSLT - Extensible Stylesheet Language Transformations.

Exemplo

<xsl:for-each select="aluno">
   <xsl:sort select="dataseminario" order="descending"/>
   <xsl:variable name="novadata">
       <xsl:value-of select="dataseminario"/>
   </xsl:variable>
   <xsl:if test="substring($novadata, 1, 4)=&apos;2005&apos;">
   <xsl:choose>

XHTML

HTML e Mapserver

No curso vamos usar o HTML versão 4.01.

Com algumas poucas tags podemos apresentar um mapa na Web.

Tags HTML para Mapserver

Precisamos de formulários para enviar os pedidos para o cgi do mapserver.

<FORM ACTION=“URL_de_script” METHOD=método>…</FORM>

Atributos de <form>

Métodos de <form>

Os métodos de form transferem dados do cliente para o sevidor. Podem ser:

<form>

Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários.

Para entrada de dados podemos usar 3 campos:

<INPUT>, <SELECT> e <TEXTAREA>

Campo Input

O campo <INPUT> tem um atributo TYPE, ao qual atribuímos seis valores diferentes para gerar tipos diferentes de entrada de dados.

Type=Text

Insere espaço para digitação de texto.

Nome: <INPUT TYPE=TEXT NAME=“Nome”>

Produz:

Input text

Type=Password

Insere espaço para digitar password portegida por asteriscos
Login: <INPUT TYPE=TEXT NAME=login><br>
Password: <INPUT TYPE=PASSWORD NAME=“senha”>

Produz:

Input passwd

Type=CHECKBOX

Insere um botão para escolha de opções

<p>Qual a camada?</p>
<INPUT TYPE=CHECKBOX NAME="feicao" VALUE="aeroportos">Aeroportos <br>
<INPUT TYPE=CHECKBOX NAME="feicao" VALUE="municipios">Municípios <br>
<INPUT TYPE=CHECKBOX NAME="feicao" VALUE="rios">rios

CHECKBOX Produz

Input Checkbox

Também podemos pré-selecionar:

Uma diretiva CHECKED marca uma escolha inicial, isto é, se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa “pré-escolhida”

<INPUT TYPE=CHECKBOX NAME="feicao" VALUE="municipios" CHECKED>Municípios <br>

RADIO

Determina que somente pode ser escolhida uma opção:

<INPUT TYPE=RADIO NAME="feicao" VALUE="aeroportos">Aeroportos <br>
<INPUT TYPE=RADIO NAME="feicao" VALUE="municipios" CHECKED Municípios <br>
<INPUT TYPE=RADIO NAME="feicao" VALUE="rios">rios

Radio Produz

Input radio

SUBMIT

Mostra um botão que permite o envio de dados para o servidor:

<INPUT TYPE=SUBMIT VALUE="Enviar">

Produz:

Input enviar

Reset

RESET restaura os valores iniciais das entradas de dados.

<INPUT TYPE=RESET VALUE="Valores Iniciais">

Produz:

Input reset

Hidden

Permite colocar entradas que não mostradas, mas que são enviadas ao servidor

<INPUT TYPE=hidden name="layer" value="countries">

Além do campo INPUT

Também temos a nossa disposição o SELECT e o TEXTAREA.

SELECT

Também podemos pré-selecionar:

<SELECT name="feicao">
   <OPTION>Aeroporto</OPTION>
   <OPTION SELECTED>Municípios</OPTION>
   <OPTION>Rios</OPTION>
</SELECT>

SELECT Produz

Select

SELECT com SIZE

Com o atributo SIZE, escolhe-se quantos itens da lista serão mostrados

<SELECT name="feicao" SIZE=2>
   <OPTION>Aeroporto</OPTION>
   <OPTION>Municípios</OPTION>
   <OPTION>Rios</OPTION>
</SELECT>

Produz

Select com size

TEXTAREA

Abre uma área para entrada de texto, de acordo com atributos para número de colunas, linhas, e - se for o caso - um valor inicial.

<TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário </TEXTAREA>

Produz

Textarea

CGI

CGI, ou Common Gateway Interface, é uma interface definida de maneira a possibilitar a execução de programas - “gateways” - sob um servidor HTTP

Neste contexto, os “gateways” são programas ou scripts (também chamados “cgi-bin”) que recebem requisições de informação, retornando um documento com os resultados correspondentes.

Fim