4

fev

Lightbox 2 – Como usar

Postado por Andreo Costa  Publicado em Dicas e Tutoriais

Muuuita gente quer saber, e traduzindo do site do projeto explico como usar o famoso Lightbox ja na versão 2.04, para que quando clicarmos na imagem deixar o fundo escuro e dar o devido destaque a imagem ampliada.

1 – Baixar o pacote:

Você precisa baixar o pacote com arquivos que farão o efeito.
CLIQUE AQUI para baixar.

Baixado, descompacte os arquivos para a pasta que está o seu site, e vamos aprender como usar:

2 – Como Usar:

Primeiro, você precisa incluir os arquivos JS  baixados no site, Inclua estas linhas dentro do Cabeçalho <head> do seu HTML:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Cuide o caminho… a pasta js neste caso está na raiz da pasta do site.

Inclua também o arquivo CSS:

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

Verifique a CSS e certifique-se o prev.gif referenciado e arquivos next.gif estão no local certo. Além disso, certifique-se o loading.gif e close.gif,  arquivos referenciados no topo do arquivo lightbox.js estão no local certo.

Agora ativamos o script:

Adicionar um rel=”lightbox” a qualquer link para ativar a tag lightbox. Por exemplo:

 <a href="images/image-1.jpg" rel="lightbox" title="titulo aqui">image #1</a>

Se você tem um grupo de imagens relacionadas e quer que apareça em grupo,siga este código abaixo (note que tem parâmetro a mais entre colchetes):

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Não tem limites para o número de conjuntos de imagens por página ou quantas imagens são permitidos em cada conjunto.

8 comentários

1

fev

Criando botão invisível no Flash

Postado por Andreo Costa  Publicado em Dicas e Tutoriais

Pessoal, as vezes precisamos ter em um banner ou um topo de site, um botão, mas que não se encaixa em nenhum objeto do palco.

Para isto, podemos criar um botão invisível, posicioná-lo onde queremos, e fazer o link para onde for.

No exemplo a seguir, vou usar nesta imagem no flash, e criar em uma camada acima do logo da Parque Internet :

Crie uma camada acima do desenho, chame-a de botaoinvisivel, e nesta desenhe um retângulo sem bordas (qualquer cor) do tamanho que você deseja ter o botão.

Após, selecione-o e tecle F8 para transformar em um símbolo de botão:

Agora, dê um duplo clique no botão recém criado, e no frame Hit pressione F6 para copiar o frame UP:

Agora que tens uma cópia do mesmo retângulo no Frame HIT, clique no Frame UP e delete (DEL no Teclado) ficando com frame preenchido apenas no hit:

Volte para Scene 1, e você verá um retangulo azul claro, que na verdade é apenas para mostrar que alí tens um botão invisível.

Agora, depende de qual Action Script você está usando, o 2 ou o 3:

Vamos separar agora o tutorial, siga pelo seu Action Script

SE USANDO AC2:

1 – Clique uma vez no botão invisível, e após aperte F9 para entrar no painel action

2 – Cole o código abaixo, alterando apenas o link que desejas dar:

on(release){
getURL("http://www.parque.net.br");
}

ou se preferir abrir em uma nova janela, use este código:

on(release){
getURL("http://www.parque.net.br", "_blank");
}

SE USANDO AC3:

1 – Clique no botão invisível, e de um nome de instância para ele, por exemplo:

2 – Crie uma camada nova chamada Acao

3 – Clique nesta camada, aperte F9 para abrir o painel action e cole o código abaixo:

botao1.addEventListener(MouseEvent.CLICK, destino);
function destino(event:MouseEvent):void{
navigateToURL(new URLRequest("http://www.parque.net.br"), "_blank");
}

4 – Se você não quer que abra em uma nova janela ao clicar, apenas retire o que está em vermelho no código, do contrário não mude nada.

PRONTO!!! PODE PUBLICAR que é pra funcionar!

Tags: ,

2 comentários

1

fev

Foto vira desenho do Photoshop

Postado por Andreo Costa  Publicado em Dicas e Tutoriais

Para transformar sua fotografia num desenho “feito a lápisâ€, no Photoshop, bastam dois comandos para fazer isso. Com a foto aberta, aplique o filtro Find Edges, acionado por meio do menu Filters > Stylize > Find Edges. A borda de todos os elementos da imagem será demarcada. Para converter o resultado em tons de cinza, acione Image > Adjustments > Desaturate. Pronto, sua foto agora parece que foi desenhada a lápis.

Tags:

sem comentários

29

jan

Photoshop travando? Tá pesado? Vamos a uma dica que pode resolver!

Postado por Andreo Costa  Publicado em Dicas e Tutoriais

Ao lançar novas versões do pacote CS muitos nem pensam nas suas máquinas e saem logo instalando versões atualizadas, mas se deparam com programas pesados e que constantemente travam.

Conversando com meu amigo e colega Cristiano Ribeiro, professor certificado do pacote Adobe, veio uma dica que vale muito colocar aqui no blog e compartilhar com vocês:

Aqueles que tem menos que 2GB de memória RAM e querem usar o Photoshop CS4, mas estão tendo problemas com travamento constante ou lentidão no software, segue o passo a passo para tentar solucionar este problema:

Entre no menu: EDIT - depois em PREFERENCES – depois em PERFORMANCE…

Aparecerá a seguinte tela:

Nesta tela, faça as seguintes alterações:

1 - Reduza a quantidade de memória que o Photoshop irá usar:

2 - Na caixa History & Cache, altera o quantidade máxima de estados do histórico e de cache que o Photoshop deve guardar.

3 – E na caixa Scratch Disks, indica os partições que queres usar como se fossem uma memória temporária.

Pronto, assim terás um Photoshop mais… comportado eu diria!

Até a próxima.

Tags:

1 comentário

27

jan

Centralizar o site na vertical e na horizontal via CSS

Postado por Andreo Costa  Publicado em Dicas e Tutoriais

Depois do post sobre como centralizar na horizontal o site, alguma pessoas me perguntaram como centralizar tanto na vertical quanto na horizontal. então, lá vai:

É possível centralizar todo um site através de posicionamento absoluto. Para tanto, vamos utilizar a div de id “geral†como exemplo, ou seja: A div id=geral receberá todas as divs, e servirá como base para centralizar.


#geral {
left:50%;
top:50%;
margin-left:-375px; /* metade da largura que você usar, negativa */
margin-top:-300px; /* metade da altura que você usar, negativo */
position:absolute;
width:750px;
heigth:600px;
}

Essas margens negativas (-), estão jogando nosso bloco 150px para esquerda, e 100 para direita! Compensando assim o top: 50% e left: 50%!

Se você não quer usar pelo código, mas pelo Dreamweaver, acesse assim:

Quando alguma div tem posicionamento absoluto, ela se baseia em seu elemento pai para se posicionar. No caso, como ela não tem elemento pai, então vai se basear na página, em si – body.

Particularmente, eu prefiro assim, pois com metodos relativos já tive problemas de o preenchimento e margem da div “geral†não aparecer (pra variar o IE).

Valeu pessoal.

sem comentários

27

jan

Criando formúlário de e-mail e enviando via PHP

Postado por Andreo Costa  Publicado em Dicas e Tutoriais

Vamos então para um tutorial beeem útil para os webdesigners que não são assim, muito ligados em programação, mas também não querem deixar de fazer um formulário de contatos no seu site.

CRIANDO FORMULÃRIO DE E-MAILS E ENVIADO VIA PHP

Primeiramente teremos que criar o formulario em <html>

São dois arquivos envolvidos

contato.html (ou outro nome com extensão html) – Arquivo do formulário
contato.php – arquivo de envio

Repare: extensão PHP no segundo arquivo.
Você pode manter o layout que já criou para o seu formulário, e inserir dentro da DIV que tem o conteudo os dados.
ISTO VAI NO ARQUIVO HTML QUE TERÃ O FORMULÃRIO DE CONTATO:

<form name="contato" id="contato" action="contato.php" method="post">
<table border="0" align="center">
<tr>
   <td>Nome*</td>
   <td><input type="text" name="nome" id="nome" size="45"></td>
</tr>
<tr>
  <td>E-mail</td>
  <td><input type="text" name="email" id="email" size="30"></td>
</tr>
<tr>
  <td>Mensagem</td>
  <td><textarea name="mensagem" id="mensagem" cols="45" rows="5"></textarea></td>
</tr>
<tr>
   <td colspan="2" align="center"><input type="submit" value="Enviar"></td>
</tr>
</table>
</form>

ISTO VAI EM UM NOVO ARQUIVO (contato.php), COM A MESMA ESTRUTURA DE LAYOUT, E SERÃ O ARQUIVO RESPONSÃVEL PELO ENVIO DO E-MAIL E POR AVISAR O USUÃRIO QUE A MENSAGEM FOI ENVIADA.

Insira na div de conteúdo:

<?php
$cabecalho_email="Mensagem via site:\n\n";
$cabecalho_email.="Nome: " . $_POST["nome"] . "\n"; /* reparem que $_POST -> está assim, pois o metodo do formulario para envio de dados está post!! relembrando.. <form method="post"> */
$cabecalho_email.="email: " . $_POST["email"] . "\n"; /* igual para o nome, lembrando que dentro do [""] vai o nome do campo , em html!*/
$cabecalho_email.="Mensagem: " . $_POST["mensagem"] . "\n";
$de = $email;
$return = "emailquereceberaresposta@provedor.com.br";
$headers = "MIME-Version: 1.0\r\n";
$headers.= "From: " . $de . " \n"; /* esta variavel esta recebendo o seu e-mail la em cima, só renomear */
$headers.= "Return-path: <" . $return . "> \r\n"; /* variavel que será armazenado o e-mail para resposta do e-mail */
 mail("andreopc@gmail.com","mensagem via site",$cabecalho_email,"$headers","-f andreopc@gmail.com")
 or die("Erro ao Enviar Email!");
    echo "E-mail Enviado com Sucesso!";
/* lembrando que . MAIL("email que sera enviado o formulario","Assunto do e-mail","Conteudo do e-mail, que é seu formulario em PHP que nós criamos, podendo ser adicionados quantos campos quiser desde que seja adicionado na variavel $cabecalho_email.= campo novo " . $_POST["campo_novo"] .", $headers -> parametros adicionais, para mostrar de quem está sendo enviado o e-mail, e o ultimo -f é para se der erro no envio do e-mail, retornar para este e-mail que está escrito ali.*/
   ?>

Tags:

sem comentários

27

jan

Saiba como Alterar o menu do botão direito do Flash

Postado por Andreo Costa  Publicado em Dicas e Tutoriais

Esta é uma dúvida que se vê muuuito pelos fóruns…

Ao clicar com o botão direito do mouse sobre o Flash, queremos sempre retirar aquilo tudo  que está neste menu.

Segue o código – Action Script 2:

function changemenu (){
getURL(‘http://eternia.com.br’);
}
var troca_menu:ContextMenu = new ContextMenu();
troca_menu.hideBuiltInItems();
var new_menu:ContextMenuItem = new ContextMenuItem(‘http://eternia.com.br’, rightclick);
troca_menu.customItems.push(new_menu);
_root.menu = troca_menu;

E é só basta copiar e colar no primeiro frame do seu flash, de preferência na camada “Ação” (para ficar organizado) e ta resolvido o problema!

Tags: ,

1 comentário

23

jan

Esquema de cores para desenvolver layouts

Postado por Andreo Costa  Publicado em Dicas e Tutoriais

Com a colaboração da minha aluna Karen, que achou este ótimo link na internet, segue a dica de um site para escolha de cores similares, complementares, gerando os códigos hexadecimais para auxiliar no desenvolvimento

Trata-se do Color Scheme Designer

http://colorschemedesigner.com/

Até breve!

Tags: ,

sem comentários

22

jan

Flash com fundo transparente no site

Postado por Andreo Costa  Publicado em Dicas e Tutoriais

Não é tão difícil quando parece

Para colocar o Flash (arquivo SWF) no site com fundo transparente, sga estes passos:

Usando Dreamweaver CS3:

 

1.Insira o Flash no arquivo HTML pelo Dreamweaver
2. Clique uma vez no objeto em flash para selecioná-lo
3. Nas propriedades, clique no botão Parameters…
4. Aparecerá a seguinte tela:

Digite exatamente como está na imagem acima.

Usando Dreamweaver CS4:

 

Com o CS4 é mais simples:

1.Insira o Flash no arquivo HTML pelo Dreamweaver
2. Clique uma vez no objeto em flash para selecioná-lo
3. Nas propriedades, troque a opção Wmode para transparent:

Usando só código:

 

Dentro da tag <object> insira:
<param name="wmode" value="transparent" />

Desta forma, o arquivo em flash não apresentará sua cor de fundo. Se você tem alguma camada no arquivo em flash que cobre todo o palco, não funcionará, mas se a cor de fundo padrão aparecia antes, agora ficará transparente.

Até a próxima

Tags:

1 comentário

21

jan

R̩gua para medir a tela РFirefox ajudando na constrṳ̣o

Postado por Andreo Costa  Publicado em Dicas e Tutoriais

Para descobrir uma determinada área de um site, aconselho a instalação da Régua (em pixels) como complemento do Firefox: MeasureIt

Para instalar, entre no link: https://addons.mozilla.org/pt-BR/firefox/addon/539 e após em Add to Firefox. Instalado o complemento, você o verá no canto inferior esquerdo uma régua. Clique nesta e saia medindo a tela toda.

Tags:

1 comentário
« Página anterior — Próxima Página »