html_xhtml_e_xml [araujo]

Essa página está em modo somente de leitura. Você pode visualizar a fonte, mas não alterá-la. Informe-se com o administrador do Wiki, caso você ache que isso está incorreto.
~~SLIDESHOW~~

====== 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 =====
  * **<html>**: Define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML. <
  * **<head>**: Define o cabeçalho de um documento HTML. Este cabeçalho traz informações sobre o documento que está sendo aberto. <
  * **<body>**: Define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, entre outras formatações. <

===== Cabeçalho =====
Dentro do cabeçalho (tag "<head>") podemos encontrar:
  * <title>: Define o título da página, que é exibido na barra de título dos browsers. <
  * <style>: Define formatação em CSS. <
  * <script>: Define programação de certas funções em página com scripts, e pode colocar funções de JavaScript. <
  * <link>: Define ligações da página com outros arquivos como feeds, CSS, scripts, etc. <
  * <meta>: Define propriedades da página, como codificação de caracteres, descrição da página, autor, etc. <

===== Exemplo (Página da Geomática) =====
<code html>
<!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>

</code>

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

  * <h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. <
  * <p>: novo parágrafo. <
  * <br>: quebra de linha. <
  * <table>:cria uma tabela (linhas são criadas com <tr> e novas células com <td>). <
  * <div>: determina uma divisão na página. <
  * <img>: imagem. <
  * <a>: hiperlink para uma página, ou para um endereço de E-mail. <

===== Problemas de HTML =====
  * **Linguagem limitada**: tags são pré-definidas. Não há como criar tags novas que o navegador possa entender.
  * Não existe separação entre conteúdo e formatação. A tag define o formato.
  * As pessoas começaram a usar o recurso de tabelas para definir o layout de uma página.
  * Praticamente impossível de manter (ou alterar) a unidade visual de um site de várias páginas. <

===== CSS =====
  * Cascading Style Sheets ou CSS são estilos para páginas web.
  * Possibilitam a mudança da aparência simultânea de todas as páginas relacionadas com o mesmo estilo.
  * <link href="estilosnew.css" rel="stylesheet" type="text/css">. <

===== Exemplo =====
<code css>
h1  { font-family:"century gothic",serif; 
        font-size:24pt; 
        color:#4D9FFF; 
        font-weight:normal; 
        margin-bottom:2pt;
} 
</code>

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

===== XML =====
  * **XML (eXtensible Markup Language)** é uma recomendação da W3C para gerar linguagens de marcação para necessidades especiais.
  * **XML** é um subtipo de **SGML** (Standard Generalized Markup Language - Linguagem Padronizada de Marcação Genérica).
  * Combina a flexibilidade de **SGML** com a simplicidade de **HTML.** <

===== Objetivos =====
  * Separação do conteúdo e da formatação,
  * legibilidade tanto por humanos quanto por máquinas,
  * possibilidade de criação de tags sem limitação,
  * criação de arquivos para validação de estrutura,
  * com seu uso pode-se interligar bancos de dados distintos,
  * Simplicidade,
  * XML concentra-se na estrutura da informação e não na sua aparência. <

===== Exemplo =====
<code xml>
<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>
</code>

===== Derivações de XML =====
XML serve para definir outras linguagens de marcação, por exemplo:
  * XHTML: O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML.
  * GML: Geography Markup Language é uma sintaxe XML desenvolvida pela OGC para descrever feições geográficas.
  * DOCBOOK: uma linguagem de marcação para autoria de documentos. <

===== 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 =====
<code xml>
<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>
</code>

===== 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 =====
<code xml>
<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>
</code>

===== XHTML =====
  * O **XHTML**, ou **eXtensible Hypertext Markup Language**, é uma reformulação da linguagem de marcação HTML baseada em XML. Combina as tag's de marcação **HTML** com regras da **XML** (mais rígidas)
  * Enquanto HTML é uma aplicação da SGML, XHTML é uma aplicação da XML.
  * XHTML não é a “versão atual” de HTML. Enquanto HTML está na versão 4.01, XHTML está na versão 1.1 (com a 2.0 em draft). <

===== 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> =====
  * **ACTION** - Especifica o URL do script ao qual serão enviados os dados do formulário. No nosso caso action="/cgi-bin/mapserv"
  * **METHOD** - Seleciona um método para acessar o URL de ação. <

===== Métodos de <form> =====
Os métodos de form transferem dados do cliente para o sevidor. Podem ser:
  * **POST** - os dados entrados fazem parte do corpo da mensagem enviada para o servidor - transfere grande quantidade de dados.
  * **GET** - os dados entrados fazem parte do URL (endereço) associado à consulta enviada para o servidor - suporta até 128 caracteres.

===== <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.
  * Campo de dados texto: <INPUT TYPE=TEXT...
  * Campo de dados senha: <INPUT TYPE=PASSWORD...
  * Múltipla escolha: <INPUT TYPE=CHECKBOX...
  * Escolha única: <INPUT TYPE=RADIO...
  * Botões de ação: <INPUT TYPE=SUBMIT>
  * Reset: <INPUT TYPE=RESET>
  * hidden: <INPUT TYPE=HIDDEN>

===== Type=Text =====
Insere espaço para digitação de texto.

Nome: **<INPUT TYPE=TEXT NAME="Nome">**

Produz:

{{:sigweb:input_text.gif|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:

{{:sigweb:input_passwd.gif|Input passwd}}

{{:sigweb:select.gif|}}===== Type=CHECKBOX =====
Insere um botão para escolha de opções

<code html>
<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
</code>

===== CHECKBOX Produz =====
{{:sigweb:input_checkbox.gif|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"

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

===== RADIO =====
Determina que somente pode ser escolhida uma opção:
<code html>
<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
</code>

===== Radio Produz =====
{{:sigweb:input_text.gif|Input radio}}

===== SUBMIT =====
Mostra um botão que permite o envio de dados para o servidor:
<code html>
<INPUT TYPE=SUBMIT VALUE="Enviar">
</code>

Produz:

{{:sigweb:input_enviar.gif|Input enviar}}

===== Reset =====
**RESET** restaura os valores iniciais das entradas de dados.  
<code html>
<INPUT TYPE=RESET VALUE="Valores Iniciais">
</code>
Produz:

{{:sigweb:input_reset.gif|Input reset}}

===== Hidden =====
Permite colocar entradas que não mostradas, mas que são enviadas ao servidor  
<code html>
<INPUT TYPE=hidden name="layer" value="countries">
</code>

===== Além do campo INPUT =====
Também temos a nossa disposição o **SELECT** e o **TEXTAREA**.

===== SELECT =====
Também podemos pré-selecionar:
<code html>
<SELECT name="feicao">
   <OPTION>Aeroporto</OPTION>
   <OPTION SELECTED>Municípios</OPTION>
   <OPTION>Rios</OPTION>
</SELECT>
</code>

===== SELECT Produz =====
{{:sigweb:select.gif|Select}}

===== SELECT com SIZE =====
Com o atributo **SIZE**, escolhe-se quantos itens da lista serão mostrados
<code html>
<SELECT name="feicao" SIZE=2>
   <OPTION>Aeroporto</OPTION>
   <OPTION>Municípios</OPTION>
   <OPTION>Rios</OPTION>
</SELECT>
</code>

===== Produz =====
{{:sigweb:select_com_size.gif|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.
<code html>
<TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário </TEXTAREA>
</code>

===== Produz =====
{{:sigweb:textarea.gif|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 =====