Olá!Smile

Neste tutorial vou estar ensiando como fazer um recurso visto no site do MSN que permite mudar a cor de fundo. É bem simples. Primeiro vou mostrar como fazer usando o PHP num outro tutorial utilizando o Javascript.
Para poder acompanhar e recomendado ter conhecimentos de CSS, (X)HTML e PHP.

Primeiramente vamos montar a estrutura em XHTML:

<div class="cor-css">
   <ul>
    <li><a class="cor-preta" href=""></a></li>
    <li><a class="cor-branca" href=""></a></li>
    <li><a class="cor-amarelo" href=""></a></li>
    <li><a class="cor-azul" href=""></a></li>
    <li><a class="cor-verde" href=""></a></li>
   </ul>
</div>

A estrutura é basicamente isso, ainda falta colocar dentro do atributo href um código que irá fazer a "mágica".

?pag=<?php echo $_GET['pag']; ?>&css=verde

Explicando:

?pag=<?php echo $_GET['pag']; ?> Esté codigo irá ler na URL se há algum link que já tenha sido clicado antes do usuário alterar a cor. Por exemplo: Digamos que o usuário tenha visitado a página Artigos e resolveu trocar a cor. Sem esse código, ao clicar para mudar a cor, ele sairia da página que estava.

&css=verde  Após o sinal de fechamento do php utilizamos o & que é usado para declarar uma nova váriavel na url. Demos o nome de css que será usado pelo php para aplicar a cor clicada, depois do sinal de igual(=) damos o nome da cor.

Entre as tags <a> e </a> coloque o nome da cor ou a imagem respectiva.

A estrutura final do menu ficara assim:

<div class="cor-css">
   <ul>
    <li><a class="cor-preta" href="?pag=<?php echo $_GET['pag']; ?>&css=preto">Preto</a></li>
    <li><a class="cor-branca" href="?pag=<?php echo $_GET['pag']; ?>&css=branco">Branco</a></li>
    <li><a class="cor-amarelo" href="?pag=<?php echo $_GET['pag']; ?>&css=amarelo">Amarelo</a></li>
    <li><a class="cor-azul" href="?pag=<?php echo $_GET['pag']; ?>&css=azul">Azul</a></li>
    <li><a class="cor-verde" href="?pag=<?php echo $_GET['pag']; ?>&css=verde">Verde</a></li>
   </ul>
</div>

Agora vamos ao PHP criar o código que irá ler na url a váriavel que foi clicada.

<?php
$css = $_GET['css'];
switch ($css)
{
 case 'preto':  echo "@import url('css/cor_preto.css');";   break;
 case 'branco':  echo "@import url('css/cor_branco.css');";   break;
 case 'amarelo':  echo "@import url('css/cor_amarelo.css');";  break;
 case 'azul':  echo "@import url('css/cor_azul.css');";   break;
 case 'verde':  echo "@import url('css/cor_verde.css');";   break;
 default:   echo "@import url('css/cor_branco.css');";   break;

?>

Na primeira linha após a abertura da tag do php, declarei uma variavel que irá receber o que estiver na url.
Na segunda linha, iniciei com a estrutura condicional switch que irá buscar dentro do escopo do código o valor correspondente ao da url, quando encontrada escreverá dentro das tags <style> e </style> o codigo para importar o css.
Na ultima linha antes do fechamento das chaves, declarei a palavra-chave default que irá escrever o css padrão caso nenhum seja encontrado, ou seja, quando o usuario entrar no site pela primeita vez.

O código completo ficará assim:

<style type="text/css" media="screen">
<!--
<?php
$css = $_GET['css'];
switch ($css)
{
 case 'preto':  echo "@import url('css/cor_preto.css');";   break;
 case 'branco':  echo "@import url('css/cor_branco.css');";   break;
 case 'amarelo':  echo "@import url('css/cor_amarelo.css');";  break;
 case 'azul':  echo "@import url('css/cor_azul.css');";   break;
 case 'verde':  echo "@import url('css/cor_verde.css');";   break;
 default:   echo "@import url('css/cor_branco.css');";   break;

?>
-->
</style>

<div class="cor-css">
   <ul>
    <li><a class="cor-preta" href="?pag=<?php echo $_GET['pag']; ?>&css=preto">Preto</a></li>
    <li><a class="cor-branca" href="?pag=<?php echo $_GET['pag']; ?>&css=branco">Branco</a></li>
    <li><a class="cor-amarelo" href="?pag=<?php echo $_GET['pag']; ?>&css=amarelo">Amarelo</a></li>
    <li><a class="cor-azul" href="?pag=<?php echo $_GET['pag']; ?>&css=azul">Azul</a></li>
    <li><a class="cor-verde" href="?pag=<?php echo $_GET['pag']; ?>&css=verde">Verde</a></li>
   </ul>
</div>

O css não e misterio, dentro de cada folha de estilo que você criar para a cor expecifica, deverá conter a padronização para aquela cor. Se o fundo vai ser preto, então as cores terão de ser claras.

Bem simples! No proximo mostrarei como fazer com Javascript. Antes que vocês se faça a pergunta, "Por que não fazer logo com JavaScript?". Resposta: Bom! Podem usar junto com banco de dados, e permitindo que o seu cliente adione novas cores ataves da área adminisrativa. Ou por qualquer outro motivo! Como maior segurança!!! Laughing

É isso ai, espro que gostem!

Até++

Ninguém avaliou. Dê sua nota!

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

A Google lança na terça-feira(02/09) seu primeiro browser(navegador) chamdo Chrome, que traz muitas novidades. Instalei e testei este navegador e é muito bom! Vou falar um pouco dessas novidades que este browser oferece, além de trazer junto o famoso sistema de abas.

 

A barra de abas neste navegador foi inserida no lugar da barra de menus e a barra de titulos foi mesclada junto a barra de abas, ficando tudo em uma mesma barra, os titulos de um web site aparece escrito na aba correspondente. Com isso os web sites ganharam um area de visualização maior. Abaixo das abas fica localizado a barra de endereços, que pode ser usado tanto para digitar a URL de um site quanto palavras-chaves para realizar buscas de acordo com o mecanismo padrão. Ao digitar na barra de endereços será listado os sites já visitados e outros termos que podem ser usados para uma pesquisa, o que lembra o Opera ou Firefox.

 

Quem usa o Opera e utiliza o Speed Dial, verá que o Chrome possui recursos parecidos que lembram muito, mas a diferença é que você não adiocina os sites, ele apenas exibe os  sites mais visitados. Ao lado desse "Speed Dial" foram inseridas as opções de pesquisa, favoritos recentes e guias recentemente fechadas.

 

Um recuros interessante inserido a esse navegador e poder fazer que um site seja aberto como se fosse um aplicativo. Como assim?. Você cria um atalho no desktop, menu inicar ou barra de inicialização rápida, e ao abrir esse site, será aberto um unica janela contendo o site dentro dela, como se fosse um aplicativo.
 
O Google Chromes tem tudo para dar certo e competir com seus concorrente diretos como o IE, Firefox e o Opera. Ele tem muito que ser melhorado por se tratar de uma versão beta(de testes), um dos pontos que alguns usuários podem achar negativo e o fato de não poder personalizar, mas acredito que o Google ou alguem crie esse recursos, por se tratar de um navegador de código-aberto, ou seja, qualquer pessoa que tenha conhecimento de programação poderá modificar ou acrescentar recursos e distribuir livremente. Este navegador possui muitos recursos que lembram seus concorrentes, podemos dizer que e a fusão desses outros em um só navegador, só com um cara diferente do que se vê por ai. Ter tirado a barra de menus e titulo, acho que foi uma otima iniciativa, já que a maior parte dos usuarios nunca chega a usa-los. O Chrome foi desenvolvido utilizando um webkit da Apple e possui um motor chamado de V8, o que torna o navegador muito bom. A Google também acrescentou a este navegador um recurso que achei muito interessante, ele conta com um gerenciador de abas, o que vem a ser isso, se uma aba não se comportar adequadamente, fazendo o computador travar ou ficar lento, você tem o controle de encerrar somente a aba problemática, sem ter que fechar o navegador fazendo com que você feche todas as outras.
 
Ainda traz um estátistica para os nerds, que mostra o consumo de memoria utilizada por cada aba.
Concerteza e um navegador bem diferente e vale a pena ter instalado em seu PC, já tornei meu Gmail e outros sites aplicativos. Baixe e teste este navegador, concerterza não vai se arrepender.
 
Link para Downlaod do Google Chrome

Ninguém avaliou. Dê sua nota!

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Web Master Jean Carlos CBR

minhas ideias, meus conhecimentos...