Posts da Categoria ‘Tutoriais’

Testado e aprovado no Firefox e I.E

Banners em DIVs flutuantes são ótimos em substituir os finados pop-ups. Um bom exemplo pode ser visto em portais como Uol e outros de tenham muita publicidade, são muito usados…

Pra fazer o que tinha em mente eu precisava de três informações:

1- Como colocar uma DIV por cima do conteúdo da página.
2- Em casos de Flash, como deixar o fundo transparente.
3- Como fechar a DIV após a exibição, utilizando um link/botão.

Continuar lendo »

Gerador de Formulário PHP

novembro 14th, 2008

Essa foi a minha melhor descoberta do ano!!! É bastante chato pra um webdesigner fazer formulário, acredite, text input, text area, submit, select, etc, nossa… e fazer funcionar é pior ainda. Eu pelo menos como não sei PHP, ficava pedindo pra programadores amigos fazerem pra mim, só que como serviço de graça vai pro final da fila, esses formulários nunca saiam.

Daí que um belo dia navegando na web eu descobri esse site pForm e na mesma semana eu recebi pelos feeds do blog do Bruno Ávila esse outro phpFormMail. São sites que geram formulários PHP “funcionando” e ainda disponibiliza área de Admin pra configurar o formulário e oferece opção de download. Não acredita?? Eu também não acreditei!! Tudo é feito seguindo no máximo 3 passos, preenchendo as informações que vc quer que tenha. Claro que pra conseguir gerar o formulário o designer tem que conhecer pelo menos as tags de formulário do HTML mas se não souber ainda bem que existe o W3School pra ajudar. :D

Como fazer Links de Âncora

novembro 5th, 2008

Essa é velha, mas tão velha que eu vou postar só pra garantir que eu não vou esquecer (de novo) como se faz. :P

Links de âncora servem pra auxiliar na navegação de páginas longas, faz com que um link redirecione direto à um ponto específico, posicionando-o no topo da página, pode ser usado dentro da mesma página ou em outra. É muito útil para quem se preocupa com a Usabilidade e Acessibilidade dos sites.

Como fazer?

LINK PARA DENTRO DA MESMA PÁGINA:

No link coloca-se o seguinte:

<a href="#ancora"> ... </a>

P.S: #ancora é o nome da sua âncora, é para onde o link vai levar.

No local pra onde vc quer que o link vá, coloque:

<a name="ancora"> ... </a>

Ainda não entendeu? Veja o exemplo:

<a href="#ancora">LOCAL DO LINK</a> <p>texto de exemplo</p> <p>texto de exemplo</p> <p>texto de exemplo</p> <p>texto de exemplo</p> <p>texto de exemplo</p> <p>texto de exemplo</p> <a name="ancora">Você vai parar aqui!</a>

LINK PARA OUTRA PÁGINA:

Também dá pra fazer um link de âncora para uma outra página. Exemplo:

<a href="endereco.php#ancora"> ... </a>

P.S:
- endereco.php é o nome do arquivo;
- #ancora é o nome da sua âncora, é para onde o link vai levar.

Boa sorte!! :)

Tá, vc vai me dizer que isso é uma bobagem pra ter direito a um post, mas quando se leva em consideração a minha memória, esse post torna-se extremamente necessário.

Esse script tem praticamente a mesma função que o “botão voltar” dos navegadores, então eu poderia nem usá-lo. Mas eu uso sabe porque? Por que tem algumas pessoas, usuários primários, que não conseguem pensar no botão de voltar do navegador ou até mesmo nem sabem que ele tem essa função. E também por causa das pessoas que navegam usando o teclado, como deficientes visuais por exemplo.

Então a nível de lembrete:

<a onclick=”javascript:history.back();”>Voltar</a>

Ao clicar no link, a página retorna á página anterior. Pronto, bem simples.

Uma dica: Esse link funciona, pode testar, mas você vai ver também que ao colocar o mouse em cima, o cursor não vira “mãozinha”. Se isso te incomodar como me incomoda, vc pode aplicar uma “class” a esse link e colocar no CSS: cursor:pointer; Funciona em todos os navegadores.

:)

Efeito Cutout com Photoshop

janeiro 16th, 2008

Curtam essa vídeo-aula que eu fiz, espero que aprendam! ;)

    follow me on Twitter