Navegação > Home / Arquivado em 'Programação web'

Menu dinâmico com XML + XSL e Javascript

9 de fevereiro de 2009 por Reinaldo Nascimento  
Arquivado em Javascript

Comente

Esse fim de semana tive que fazer uma navegação dinâmica em uma página html que precisa rodar dentro de um CD-Rom. Partindo desse princípio, defini que usaria Javascript e XML para a parte de chamada aos dados e XSL para formatar os resultados.

Até aí tudo bem, mas como se trata de um script dinâmico para rodar em meio local, ou seja, fora do ambiente de servidor, o desafio foi mais interessante.

Preparei alguns scripts para mostrar como cheguei ao resultado que eu queria.

Estrutura do arquivo XML

<?xml version="1.0" encoding="utf-8" ?>
<MENU>
 
<Item id="1" title="Link Superior" url_top="#">
<SubItem seq="1" url="http://www.terra.com.br">Sublink 1</SubItem>
<SubItem seq="2" url="http://www.globo.com">Sublink 2</SubItem>
<SubItem seq="3" url="http://www.uol.com.br">Sublink 3</SubItem>
</Item>
 
<Item id="2" title="Link Superior 2" url_top="#">
<SubItem seq="4" url="http://www.ig.com.br">Sublink 4</SubItem>
<SubItem seq="5" url="http://www.google.com.br">Sublink 5</SubItem>
<SubItem seq="6" url="http://www.altavista.com.br">Sublink 6</SubItem>
</Item>
 
<Item id="3" title="Link Superior 3" url_top="qualquer_pagina.php">
<SubItem seq="7" url="http://www.microsoft.com">Sublink 7</SubItem>
<SubItem seq="8" url="http://www.apple.com">Sublink 8</SubItem>
<SubItem seq="9" url="http://www.uai.com.br">Sublink 9</SubItem>
</Item>
 
</MENU>

Salve o arquivo com o nome “menu.xml”.

Agora vou mostrar a estrutura do arquivo XSL

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:asp="http://www.microsoft.com">
<xsl:output method="html" indent="yes" encoding="iso-8859-1"/>
<!-- O parâmetro abaixo solicita ao parser que ignore os espaços em branco do resulta
isso faz com que resultados vazios sejam ignorados -->
<xsl:strip-space elements="*"></xsl:strip-space>
 
<!--Aqui começa o template do menu-->
<xsl:template match="MENU/*">
 
<!--Criamos uma variável com o nome do Node-->
<xsl:variable name="NodeName">
<xsl:value-of select="name(current())"/>
</xsl:variable>
 
<!--Carrega o primeiro nível do menu e sua url (url_top)-->
<li><a href="{@url_top}"><xsl:value-of select="@title"/></a>
<ul>
<!--Aqui fazemos um loop para pegar todos os filhos do item superior (pai)-->
<xsl:for-each select="node()">
 
<!--Criamos uma variavel com o nome do node filho -->
<xsl:variable name="ChildNodeName">
<xsl:value-of select="./child::node()"/>
</xsl:variable>
 
<!--Agora montamos o link-->
<li><a href="{@url}"><xsl:value-of select="$ChildNodeName"/></a></li>
 
</xsl:for-each>
</ul>
</li>
 
</xsl:template>
</xsl:stylesheet>

Salve o arquivo com o nome “menu.xsl”.

Finalmente o Javascript que possibilita a “mágica” :) 

function xslMenu( vXml, vXsl, vEl )
{
if ( document.implementation &amp;&amp; document.implementation.createDocument ){
// *** Mozilla
var xsltProcessor = new XSLTProcessor();
 
// *** carrega o arquivo XSL
var myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", vXsl, false);
myXMLHTTPRequest.send(null);
 
// *** importa o xsl como Stylesheet
xslStylesheet = myXMLHTTPRequest.responseXML;
xsltProcessor.importStylesheet(xslStylesheet);
 
// *** carrega o arquivo XML
myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", vXml, false);
myXMLHTTPRequest.send(null);
var xmlSource = myXMLHTTPRequest.responseXML;
 
// *** Formata o XML com o método transform e imprime o
// *** resultado em vEl (elemento onde será carregado o resultado)
var resultDocument = xsltProcessor.transformToFragment(xmlSource, document);
document.getElementById(""+ vEl +"").appendChild(resultDocument);
 
} else if (window.ActiveXObject){
// *** IE
// *** carrega o XML
xml = new ActiveXObject("MSXML2.DOMDocument");
xml.async = false
xml.load(vXml)
// *** carrega o XSL
xsl = new ActiveXObject("MSXML2.DOMDocument");
xsl.async = false
xsl.load(vXsl)
// *** Transforma
document.getElementById(""+ vEl +"").innerHTML=xml.transformNode(xsl);
} else {
// *** Navegador sem suporte
alert("O navegador não é suportado");
}
}

Agora salve o arquivo com o nome “script.js”.

Crie agora um arquivo html chamado, por exemplo, index.html com a seguinte estrutura:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fazendo Sites - Criando um menu dinâmico com XML + XSL e Javascript</title>
<script type="text/javascript" src="script.js"></script>
 
<script type="text/javascript">
<!--
    function carregaMenu()
    {
        xslMenu('menu.xml', 'menu.xsl', 'menu');
    }
    // aguarda 1 segundo antes de chamar a
    // a função que carrega o menu
    setTimeout(carregaMenu, 1000);
 
-->
</script>
 
</head>
 
<body>
<div id="base">
    <ul id="menu">
    <!--Aqui vem o menu-->
    </ul>
</div>
 
</body>
</html>

O resultado será o seguinte:

ul_sem_css

A base para o menu está ai. Foi criada uma estrutura de <UL><LI><A>, que possibilitará inúmeras formatações, efeitos e aplicações.

Em suma, os códigos acima são auto explicativos e os comentários lhe ajudarão a entender o funcionamento.

Até a próxima.

Tags: , , , , , ,

Linhas da tabela com cores alternadas

6 de fevereiro de 2009 por Reinaldo Nascimento  
Arquivado em PHP

2 Comentários

Essa é uma rotina muito simples, eu reconheço. Mas quem é que volta e meia não se depara com a necessidade de fazer tabelas com cores alternadas ou então alternar algum elemento entre dois estados ou qualquer coisa do tipo?

Pois é, para quem precisar, está aí uma forma bem simples de fazer cores alternadas em tabelas.

<?php
 
	// Dados a serem colocados na tabela
	$dados = array(
				   array('O gato de botas', 50, '11,90'),
				   array('Rapunzel', 50, '12,90'),
				   array('O três porquinhos', 50, '15,90'),
				   array('A bela e a fera', 50, '10,00'),
				   array('Chapeuzinho Vermelho', 50, '18,90'),
				   array('Hary Potter', 50, '23,00'),
				   array('A lenda de Peter Pan', 50, '9,60'),
				   array('A nova onda do Imperador', 50, '17,75')
				   );
	$cor1 = 'cor1'; // Nome da classe da cor 1
	$cor2 = 'cor2'; // Nome da classe da cor 2
 
	// Início da tabela
	$tabela = '<table>
			       <tr>
				       <th>Título</th>
					   <th>Quantidade</th>
					   <th>Preço</th>
				   </tr>';
 
	for ( $i=0; $i < count($dados); $i++ )
	{
		// O pulo do gato :)
		( $i % 2 == 0 ) ? $cor = $cor1 : $cor = $cor2;
 
		// alimenta a tabela com os dados
		$tabela .= '<tr class="'. $cor .'"><td>'. $dados[$i][0] .'</td><td>'. $dados[$i][1] .'</td><td>R$ '. $dados[$i][2] .'</td></tr>';
	}
 
	 // finaliza o html da tabela
	$tabela .= '</table>';
 
?>

Salve o arquivo como, por exemplo, tabela.php.

O próximo passo é imprimir o resultado na tela. Isso é simples, claro que você pode incluir o código acima em uma função e chamar o resultado em template, mas aqui, vamos apenas imprimir o resultado em uma página html simples.

Crie um arquivo html no modelo abaixo:

<?php include('tabela.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabela com cores alternadas</title>
 
 
 
<style type="text/css">
<!--
table {
	border: 1px solid #cfcfcf;	
}
 
th {
	font: 700 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #fff;
	background-color: #069;
	text-align: left;
	padding: 0 10px;
}
 
td {
	font: 11px Tahoma, Geneva, sans-serif;
	color: #505050;
	padding: 4px;
}
 
.cor1 {
	background-color: #efefef;
}
 
.cor2 {
	background-color: #ccc;
}
 
-->
</style>
</head>
 
<body>
 
	<?php print $tabela; ?>
 
</body>
</html>

O resultado:

tabela_cores

É isso aí, até a próxima!

Tags: , ,

Compactando o seu CSS com PHP

18 de janeiro de 2009 por Danival A. Souza  
Arquivado em Css, PHP, Programação web, Web Design

Comente

Compactar o arquivo CSS é uma das técnicas utilizadas para acelerar o processo de carregamento de um website. Algumas destas técnicas estão sendo amplamente utilizadas. Hoje, iremos descrever três maneiras diferente de compactar os arquivos CSS e enviar ao navegador do usuário, utilizando para isto o PHP.

O método de Paul Stamatiou

Este método já é utilizado por alguns desenvolvedores web a mais de um ano. Para fazer funcionar, você precisa primeiro renomear o seu arquivo NOME.css para NOME.css.php. (onde NOME é o nome do seu arquivo).

Então faça a modificação no HTML, utilizando o novo nome.

<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>

Após alterar o arquivo HTML, renomeie o css conforme informado, e então abra o arquivo para edição. Insira a seguinte linha de código no ínicio do arquivo:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

Então, adicione a próxima linha no final do arquivo. Salve, e feche o arquivo.

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Fim. Este método é bastante útil e eficiente.
Fonte: http://paulstamatiou.com/2007/03/18/how-to-optimize-your-css-even-more

O método Perishable Press

Este método é bem semelhante ao método descrito por Paul Stamatiou. Basicamente, você também precisa renomear seu arquivo .css para .css.php (ou .php somente), alterar a chamada a este arquivo no html para o novo nome, e então adicionar o seguinte bloco de código no início do seu arquivo CSS:

<?php
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>

Em seguida salve o arquivo e feche-o. Com este método, você não precisa alterar o final do arquivo. Basicamente, esta é a grande diferença sobre o método anterior apresentado.

Fonte: http://perishablepress.com/press/2006/10/23/compressed-css-compression/

O método Reinhold Weber

Este método foi escrito pelo desenvolvedor Alemão Reinhold Weber. Particulamente, prefiro este método aos outros. Explicaremos por que mais abaixo. Por hora, vamos ao método.

Primeiramente, crie um arquivo .php, e insira o código abaixo (e coloque todos os seus CSS de include no código):

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("rn", "r", "n", "t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
  /* your css files */
  include('master.css');
  include('typography.css');
  include('grid.css');
  include('print.css');
  include('handheld.css');
  ob_end_flush();
?>

Por que eu prefiro este método? Simples, com este método não é necessário renomear o arquivo .css para .php. Além do mais, este método comprime todos os arquivos CSS utilizados no site de uma única vez, e envia para o computador do usuário através de uma única requisição, o que acelera muito o processo para sites que tem multiplos css (como o exemplo acima).

fonte: http://reinholdweber.com/?p=37

Tags: