Utilizando um menu Fisheye (olho de peixe)
Olá,
Cansado daquele velho menu que muda a cor do texto ao passar o mouse?
Que tal um menu olho de peixe, simples e bonito ?
FishEye
O menu é “animado” por Jscript que a “grosso modo” consiste de 2 imagens para cada item do menu, por ex. para cada item existem 2 imagens, neste caso, 1 imagem com 90 x 90 e outra 128 x 128… O Jscript, como já disse, cria a transição da menor para a maior criando o efeito que conhecemos como “olho de peixe” …
Existe apenas 3 pontos na configuração que acho interessante mexer no Jscript se for necessário, são:
startSize : 90,
endSize : 128,
imgType : “.gif”,
Bem, no arquivo fisheye.js logo à partir da 2º linha existem essas informações acima.
startSize : Tamanho inicial da imagem, bom que seja o tamanho da imagem menor.
endSize : Tamanho final da imagem, bom que seja o tamanho da imagem maior.
imgType : Extensão do arquivo de imagem
Ah, se você não gostou dos ícones que estão no exemplo segue um link que utilizo muito para “caçar” meus ícones.
Esse cara aí acima possui ícones/imagens de ótima qualidade que podem ser utilizadas em menus para web. No geral você procura pelo nome da imagem, por ex: se você está procurando uma lixeira, digite trash, recycled, etc..
Links:
- Visualizar Exemplo Funcionando
- Download do pacote rar
- Procurar Icons
Obs: as imagens não precisam ser do mesmo tamanho que usamos no exemplo, basta que você altere no Jscript como explicado acima, para não ficar distorcida deixe o startSize e endSize de acordo com as dimensões das imagens que você escolher…
Outra coisa, no iconfinder para cada imagem que você visualizar e for baixar, perceba que a mesma imagem pode possuir lá tamanhos diferentes, ou seja, você não precisa redimencionar as imagens para ter uma pequena e uma maior, basta escolher a imagem no iconfinder baixar os 2 tamanhos dela.
Abraços,
Rafael Clares,
Mais uma Galeria de Fotos Perfeita e simples de implementar
Opa,
vamos criar uma galeria estática à principio, a partir disso vocês podem implementar uma galeria dinâmica com php thumbs e lightbox.
Na minha opnião é a mais bonita galeria em CSS que tenho visto, muito simples de implementa-la também.
A galeria consiste em efeitos criados por classes CSS e JS.
Print da tela
A idéia é o seguinte:
Percebam que cada foto tem um estilo difrente, esses são os estilos suportados pelo script,
Um trecho do código html que é assim:
<!– cabeçalho [head,script,css...] –>
<div class=”photo sample1“>
<a href=”#”><span></span><img src=”images/9.jpg” alt=”image” /></a>
</div>
<div class=”photo sample2“>
<a href=”#”><span></span><img src=”images/13.jpg” alt=”image” /></a>
</div>
Como podem perceber para cada efeito dos que são apresentados existe uma classe CSS, elas vão de sample1 até sample14, cada div recebe 2 classes CSS, uma padrão que é classe photo e a sample de sua escolha.
Uma Div para cada foto, a idéia de apresentar uma galeria com todos os efeitos é para que vocês possam escolher a sua sample favorita e aplicar em todas as div’s ou não… depende dos padrões que adotarem, além disso podem criar uma galeria com cada efeito…
Não vou me aprofundar nas questões do CSS porque vocês irão ver que nada mais é que o posicionamento das imagens que servem de moldura para as fotos, cada classe sample possui uma imagem diferente como moldura(background da sua foto).
Segue o link do exemplo:
Vai lá filho, clique aqui e divirta-se
Vão querer o download do pacote né?
Tudo pronto aqui, como sempre.
Obs: Utilizem o Post Criar Thumb(miniatura) com PHP e o Galeria com LightBox para criar sua galeria dinâmica.
Outra coisa, alguns amigos tem colocado os links do trabalhos depois de implementados, acho bacana a iniciativa, assim pode acabar ajudando alguém… fico muito grato,
Abraços,
Efetuando uma busca em um arquivo XML utilizando PHP5
Vimos em um outro post como ler um arquivo XML utilizando o SimpleXML, agora veremos como efetuar uma busca dentro de um arquivo XML.
Gerar, ler e transportar dados através em XML se tornou algo padrão em qualquer software seja on-line ou não. A partir disso podemos pensar:
- Antes de enviar dados em XML nós selecionamos adequadamente o que ele irá transportar.
Legal, é assim mesmo, nós selecionamos os dados do BD, geramos o XML e enviamos ou disponibilizamos para outro software.
Ok, mas e o software que vai receber esses dados? Ele não sabe o que está recebendo, não é?
Então pensando nisso nós escreveremos agora o código em PHP que terá o objetivo de ler o conteúdo do XML e selecionar apenas o que lhe interessa, assim como acontece na geração do arquivo.
A idéia a princípio e como todas as demais contidas nesse bloguinho é muito simples e servirá para que vocês possam a partir disso desenvolver linhas de raciocínios melhores ;)
Bem, a idéia é parecida com a do outro post, por isso aconselho dar uma lida nele antes.
Considerando que você acabou de ler o post sobre SimpleXML vamos começar o arquivo XML.
chamamos o arquivo de estante.xml
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<livros>
<livro>
<cod>01</cod>
<titulo>PHP para iniciantes</titulo>
<descricao>Desenvolvendo Aplicações web</descricao>
<autor>Manuel da Silva</autor>
<paginas>200</paginas>
<preco>50.00</preco>
</livro>
<livro>
<cod>02</cod>
<titulo>XML</titulo>
<descricao>Usando XML com PHP </descricao>
<autor>José das Couves</autor>
<paginas>100</paginas>
<preco>150.00</preco>
</livro>
<livro>
<cod>03</cod>
<titulo>Javascript</titulo>
<descricao>O Poder do javascript</descricao>
<autor>Billy Borny</autor>
<paginas>80</paginas>
<preco>90.90</preco>
</livro>
</livros>
Como pode perceber o conteúdo do XML são livros e suas propriedades, então
Na tag “livros” possui 3 tags “livro” ou seja “livros” é a raiz e “livros” são o que chamamos de “nós“,
para cada tag livro existe o cod, titulo, descricao, autor, paginas e preco, o último é justamente o que iremos utilizar em nosso exemplo, iremos selecionar livros do XML de acordo com o preço que especificarmos.
Para isso precisamos ler o XML e fazer a seleção de acordo com os parâmetros que escolheremos.
o arquivo principal chamei-o de index.php mas você pode chamar de pamela.php se quiser.
<?php
# Carrega e armazena o XML na variavel $xml
$xml = simplexml_load_file(“estante.xml”);
# laço dentro da tag livro para cada tag livro que encontrar
foreach($xml->xpath(‘//livro‘) as $livro)
{
# armazena na var $registro o conteudo de uma tag livro
$registro = simplexml_load_string($livro->asXML());
# executa uma consulta XPath e armazena em $busca
$busca = $registro->xpath(‘//preco[.>55.00]‘);
# verificando se houve alguma busca com sucesso
if($busca){
# exibindo os resultados encontrados
echo $livro->titulo . “<br>”;
echo $livro->descricao . “<br>”;
echo $livro->preco . “<br><br>”;
}
}
?>
Acho que tem pouco para explicar sobre o PHP devido os comentários do código.
Mas, básicamente o que ocorre é que nós após carregarmos o arquivo XML efetuamos na linha
$busca = $registro->xpath(‘//preco[.>55.00]‘);
a seguinte verificação:
- procure dentro das tags livro onde o preco seja maior que 55.00, se reparar no arquivo XML irá perceber que somente 2 livros (nós) atendem à nossa condição e são eles que são exibidos como resultado. Neste caso estamos exibindo somente o título, descrição e preço, claro que podemos exibir todo o conteúdo do livro.
Muito díficil não é? Pois é …
Acredito que vale a pena se aprofundar nessa idéia de transporte de dados com XML, além de ser muito prático permite que dados de uma aplicação seja fácilmente integrados à qualquer outro sistema e esse parece ser o futuro do software, quando se fala em integração de sistemas não dá para pensar em outra coisa que não seja XML.
seguem alguns links:
- Post | Criando XML com PHP
- Post | Lendo XML com PHP
- Docs | SimpleXML | Consultas Xpath
- Exemplo | busca em xml
- Download | busca em xml – fontes
Aproveite para responder essa…
Àté a próxima,
abraços
Rafael Clares,
