Prog Cli Sist web rav2 e 3

Prévia do material em texto

Nome: Prof. Jorge Ferreira
Titulação : Especialista em Análise e Gerência de Projetos.
Revisão das aulas 6 , 7 , 8 , 9 e 10.
XML;
Tableless 
WebService
“Hoje a quantidade de informação disponível na Internet é praticamente incalculável. A maioria está em HTML, um formato de apresentação, mas o XML assumiu seu lugar, ao lado do HTML.
O XML se tornou um método bastante popular para o armazenamento de dados e para transmissão de dados.”
		Kevin Howard Goldberg
XML – O que é? É uma série de regra para se criar linguagem de marcação personalizada
XML, ou eXtensible Markup Language, é uma especificação para armazenar informações e descrever a estrutura delas.
Não possui tags próprias.
As tags deverão seguir a especificação XML
<?xml version="1.0"?>
<my_children>
<child>
 <name>Julia</name>
 <gender>Female</gender>
 <age>2</age> 
</child>
</my_children> 
XML – O que é?
É uma série de regras para se criar linguagens de marcação personalizadas.
XML – Por que usar?
Armazenar e transmitir dados
Facilidade de extensão e adaptação
Compartilhar dados entre sistemas e organizações
Pode ser usado gratuitamente
XML – Extensão
Como as tags XML são criadas por nós, não há como um navegador saber como exibir as tags. 
Fica pra nós a especificação de como um documento XML deve ser exibido.
XML é composto de três linguagens:
XSLT ( para transformar documentos XML)
Xpath (para identificar partes diferentes em um documento)
XSL-FO (para formatar um domento XML)
XML – Exemplo
<?XML VERSION = “1.0” ?> <!-- versão --> 
<raiz> <!-- elemento raiz -->
 <name>FULANO<name> <!-- filho-->
 <location>SICLANO</location<
 <height units= “feet”>107</height> <!-- atributo--> 
</raiz> > <!-- elemento raiz --> 
XML – Regras de Programação XML
Um elemento raiz é obrigatório
Tags de fechamento são obrigatórias
Devem-se aninhar os elementos
Case sensitive 
Valores devem conter aspas 
XML – Início
Deve-se iniciar cada arquivo XML com uma declaração que indique a versão XML usada.
No início do documento , digite: <?xml 
Depois, digite: version=“1.0”
Digite: ?> 
XML – Elemento raiz
Todo arquivo XML deve ter um, e apenas um, elemento que contenha todos os outros.
<raiz>
</raiz>
XML – Exemplo
<?XML VERSION = “1.0” ?> <!-- versão -->
<raiz> <!-- elemento raiz -->
 
 </raiz> > <!-- elemento raiz --> 
XML – Elementos filho
Após a criação do elemento raiz, podemos criar qualquer elemento filho.
<nome>conteudo</nome>
XML – Elementos aninhados
São elementos filhos de elementos filhos.
<?XML VERSION = “1.0” ?>
<raiz>
	<raiz_interna> 
 <name>FULANO<name> <!-- filho-->
 <location>SICLANO</location<
 <height units= “feet”>107</height>
</raiz_interna>
</raiz> > <!-- elemento raiz --> 
XML – Atributos
São elementos filhos de elementos filhos.
<?XML VERSION = “1.0” ?>
<raiz>
	<raiz_interna> 
 <name>FULANO<name> 
 <location>SICLANO</location<
 <height units= “feet”>107</height> <!-- atributo-> 
</raiz_interna>
</raiz> >
XML – Elementos vazios
São elementos que não têm conteúdo próprio. Ele possuem atributos.
<main_image filename=”bola.jpg” w=“30” h=“20” />
Ou
<source section=“10” newspaperid=“21”></source>
XML – Comentários
Os comentários são usados para por usamos um determinado elemento.
O que significa certa rotina, etc.
<!– este é um comentário -->
WebStandards 
Muitos desenvolvedores já adotaram os Webstandards, mas seguem apenas os padrões que beneficiam a produção das páginas. Existem técnicas de codificação que podem aumentar a acessibilidade, a usabilidade e a beleza das páginas, mas elas não estão muito difundidas.
W3C
Os Webstandards, em última análise, devem beneficiar o usuário 
Separação entre conteúdo, apresentação e comportamento.
W3C
Teremos um código mais organizado, mais fácil de manter com
diferentes arquivos de CSS para diferentes mídias: monitor, PDA, impressora, áudio.
Indexabilidade 
Melhor indexabilidade em buscadores como o Google.
Tableless -> Devemos evitar usar tabelas para marcar layout.
Tableless -> Originalmente as tabelas foram criadas para exibirem dados tabulados. Elas começaram a ser usadas para marcar layout porque não havia alternativa melhor na época.
Para substituir as tabelas na marcação do layout, é recomendável a utilização da tag DIV.
Folhas de Estilo
Para formatar as página html, usávamos formatar na própria página.
Com isso as páginas html ficavam com o código das tags (body, h1, p, etc) e também com o código da formatação. Acarretando uma página pesada.
Resolveram então separar o código html do código da formatação criando assim as FOLHAS DE ESTILO EM CASCATA (STYLESHEET).
Temos três tipos de folha de estilo:
externa, incorporada e inline.
CSS IMPORTADO (EXTERNO)
 As regras CSS são importadas quando estão declaradas em um documento à parte do documento HTML. A folha de estilo CSS é então um arquivo separado do arquivo .html e que tem a extensão .css. 
 Esse tipo de procedimento serve para aplicar regras CSS a várias páginas de um website.
 Utilizando uma folha de estilo externa, podemos mudar a aparência de um
site inteiro modificando apenas um único arquivo. (.css importado).
CSS IMPORTADO (EXTERNO)
 O arquivo .css da folha de estilo externa deverá ser vinculado ao documento HTML, dentro da tag <head>.
Sintaxe:
<head>
 . . .
 <link rel = “stylesheet” type = “text/css” href= “exemplo.css”>
 . . .
</head>
 O navegador interpretará as regras de estilo do arquivo exemplo.css e formatará o documento de acordo com elas.
CSS INCORPORADO (INTERNO)
É possível incorporar regras CSS declarando-as no próprio documento HTML. 
Esse tipo de procedimento serve para aplicar regras CSS a uma única página. 
Com a folha de estilo incorporada ou interna, podemos mudar a aparência somente de um documento, aquele no qual a folha de estilo está incorporada.
As regras CSS internas deverão ser declaradas na seção <head> do documento com a tag de estilo <style>.
CSS INCORPORADO (INTERNO)
Ex:
 <head>
 . . .
 <style type = “text/css”>
 
 body {background-color : #EE0000;}
 h2 { color : #00CC00;}
 p { margin-right : 10px;}
 </style>
 . . .
 </head>
CSS INCORPORADO (INTERNO)
O navegador interpretará as regras CSS na própria página e formatará o documento de acordo com elas.
Normalmente o navegador ignora tags desconhecidas, mas o conteúdo da tag poderá ser mostrado na tela.
Para ocultar o conteúdo das tags em navegadores que não suportam estilos, utilizamos a marcação de comentário do
HTML: <!—(abre comentário) e - - > (fecha comentário).
CSS INLINE
São regras CSS declaradas dentro da tag do elemento HTML (aplica regras a apenas um elemento).
Ao utilizar esse procedimento são perdidas muitas vantagens da CSS, pois o conteúdo é misturado com a apresentação.
O método deve ser usado apenas para aplicar um estilo a uma única ocorrência de um elemento na página Web.
CSS INLINE
<p style = “color:#CC9900; font-size: 14px;”>
Aqui um parágrafo com a cor marrom e com letras tamanho 14
</p>
Estamos aplicando formatação da cor da fonte e do tamanho da fonte diretamente no parágrafo da página.
PRIORIDADES
-estilo inline (dentro de um elemento HTML);
-estilo incorporado (definido na seção head do documento);
-estilo externo (importado ou lincado).
A CSS INLINE PREVALECE SOBRE AS OUTRAS DUAS E A CSS INCORPORADA PREVALECE SOBRE A EXTERNA PARA A MESMA
FORMATAÇÃO.
PRIORIDADES 
EX. 
Se uma cor do parágrafo formatada na css externa como vermelho e na incorporada como verde, aparecerá formatação em VERDE.
E se o mesmo parágrafo for formatado INLINE como AZUL, aparecerá o
parágrafo em AZUL.
REGRAS DE FOLHA DE ESTILO (CSS)
eletor {propriedade : valor;}
Propriedade – É o atributo do elemento HTML ao qual será aplicada a regra.
Valor – É a característica a ser assumida pela propriedade.Ex: fundo preto, letra verdana.
Comentário – É utilizado para documentar trechos de código.
/* este é um comentário */Ex:
p {font-size : 10px; /* este é outro comentário */
 font-family : verdana, Serif;
}
REGRAS DE FOLHA DE ESTILO (CSS
- Vários Seletores 
Podemos agrupar, os seletores separando-os com uma vírgula.
SELETOR DE TAG
Um seletor de tag pode ser: body, p, h1, h2, etc.
<html>
 <head>
 <title>SELETOR DE TAG</title>
 <style type="text/css">
 body{background : #00ff00;}
 </style>
 </head>
 <body>
<h1>Esta é uma página com cor VERDE</h1>
 </body>
</html>
CLASSES DE SELETORES
É possível criar classes de seletores com qualquer nome, definindo as regras
CSS.
Sintaxe: elementoHTML.nomedaclasse {propriedade : valor;}
ex:
p.vermelho {color : #FF0000;}
p.verde {color : #00FF00;}
Ou
.vermelho {color : #FF0000;}
.verde {color : #00FF00;}
CLASSES DE SELETORES
APLICAÇÃO:
<p class = “vermelho”> Este parágrafo terá fonte vermelha</p>
<p class = “verde”> Este parágrafo terá fonte verde</p>
Exemplo de classe
<html
 <head>
 <title> Exemplo de classe </title>
 <style type="text/css">
 .vermelho {color : #FF0000;}
 .verde {color : #00FF00;}
 </style>
 </head>
<body>
 <p class = "vermelho"> Este parágrafo terá fonte vermelha</p>
 <p class = "verde"> Este parágrafo terá fonte verde</p>
</body>
</html>
SELETOR ID
O seletor ID é único, podendo ser aplicado a somente um elemento HTML
dentro do documento.
Podemos criar qualquer nome e com este criar uma ID.
A sintaxe básica para o seletor ID é composta por um nome qualquer precedido de tralha.
ex:
#qualquerID {propriedade : valor;}
Exemplo de classe
<html>
 <head>
 <title>seletor id</title>
 <style type="text/css">
 #vermelho {color : #FF0000;}
 #verde {color : #00FF00;}
 #azul {color : #0000FF;}
 </style>
 </head>
<body>
<p id = "vermelho"> Este parágrafo terá fonte vermelha e 22px</p>
<p id = "verde"> Este parágrafo terá fonte verde e 26px</p>
<p id = "azul"> Este parágrafo terá fonte azul e 30px</p>
</body>
</html>
<DOCTYPE html PUBLIC “.//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Sites internos da OI.
 
https://portalvpn.oi.net.br/VP/webforms/acesso/solicitaracesso.aspx - site para receber token – da net scaler
 
 
https://oivpn.oi.net.br/vpn/index.html - Net Scaler 
 
 
https://login.intranet/nidp/idff/sso?id=1&sid=0&option=credential&sid=0 – Portal GA
 
 
	http://10.121.148.36:8080/# --- 
	Welcome to Acme Packet Net-Net Central 7.1
 
http://10.111.4.45:8080/spectrum/
 
http://10.121.241.10/bcsegoss/ - site seg acesso oss
 
 
http://interativa/
 
http://portaldo/portal/index.php - Portal DO
 
 
http://10.121.241.97/BDU/login.asp -- BDU
 
http://10.121.240.178/portal/ -- Portal OSS
 
http://10.121.240.178/portal/administrator/ - Joomla de OSS