Mostrando postagens com marcador Design. Mostrar todas as postagens
Mostrando postagens com marcador Design. Mostrar todas as postagens

sábado, 3 de março de 2012

WebDesign - Técnicas de Layout de mídia digital

Você sabia que as mesmas técnicas que utilizamos na criação de um layout impresso é também utilizado na criação de sites e outros tipos de mídia digital? Pois é queridos amigos leitores, as técnicas de design são universais e se aplicam também na web.
Alan Ramires, leitor assíduo deste blog, enviou para mim um conjunto de slides coincidentemente feito por um dos meus professores preferidos que me deu aulas de mídia digital nos tempos  de faculdade, o sábio e excelente professor Melo Jr, do Instituto UFC Virtual.

Nesses slides, Melo Jr compilou conceitos importantes do Design e da Web retirados dos livros Design para Não-Designers, Web Design para Não-Web Designers, Não me faça pensar e Design on the Rocks. O resultado foi um guia visual muito interessante de diversas técnicas de layout que podem ser aplicadas tranquilamente a qualquer criação web.
Este tema é abordado com mais profundidade no curso de Design Web, fundamental para qualquer web designer que deseja aprimorar e melhorar sua forma de criar layouts.
Divirtam-se!


sexta-feira, 2 de março de 2012

Flash - Formulário de Contato + PHP

Olá pessoal, neste post, vou mostrar como montar um Formulário de contato usando o Flash e enviando os dados ao PHP. Espero que seja útil.Então vamos trabalhar…A minha organização das camadas ficou da seguinte maneira:


camadas
Você pode manter a organização que quizer ok?
Agora vamos montar o nosso formulário, eu usei os seguintes campos: Nome, E-mail, Endereço, DDD, Telefone, Mensagem e os instânciei como: nome_txt, email_txt, endereco_txt, ddd_txt, telefone_txt, mensagem_txt, resposta_txt e pra finalizar instânciei o botão Enviar como enviar_btn.
 
O meu formulário ficou com a seguinte aparência:
formularioObs: O meu botão 
enviar é um MoveiClip, com três frames, nos quais criei a minha animação, como mostra a imagem abaixo:
fasesbotao

Agora vamos codificar nosso formulário, tratando os campos e validando os mesmos.
Para começar criei um arquivo de actionScript externo, tenho costume de sempre trabalhar dessa forma, mas fica a critério de cada um ok?! No meu arquivo de actionScript criei uma função que iniciar todos os campos em branco.
// Iniciando o formulário com todos
// os campos limpos.
function iniciar() {
nome_txt.text = “”;
email_txt.text = “”;
endereco_txt.text = “”;
ddd_txt.text = “”;
telefone_txt.text = “”;
mensagem_txt.text = “”;
};


Depois criei a function enviaDados, que tem a função de coletar os dados do Flash e enviar ao PHP:

// Função que coleta os dados no Flash e enviar
// para o PHP.
function enviaDados() {
resposta_txt.text = “”;
if (nome_txt.text eq “”) {
resposta_txt.text = “*Preencha o campo ‘Nome’”;
Selection.setFocus(“nome_txt”);
} else if (email_txt.text eq “”) {
resposta_txt.text = “*Preencha o campo ‘E-mail’”;
Selection.setFocus(“email_txt”);
} else if (email_txt.text.indexOf(“@”, 0) <= 0 || email_txt.text.indexOf(“.”, 0) <= 2) {
resposta.text = “*O e-mail informado é inválido”;
Selection.setFocus(“email_txt”);
} else if (mensagem_txt.text eq “”) {
resposta_txt.text = “*Digite uma mensagem para nós…”);
Selection.setFocus(“mensagem_txt”);
} else {
var objEnvia = new LoadVars();
objEnvia.nome = nome_txt.text;
objEnvia.email = email_txt.text;
objEnvia.endereco = endereco_txt.text;
objEnvia.ddd = ddd_txt.text;
objEnvia.telefone = telefone_txt.text;
objEnvia.mensagem = mensagem_txt.text;
var objRecebe = new LoadVars();
objRecebe.onLoad = function() {
if (objRecebe.myData == “true”) {
resposta_txt.text = “”;
resposta_txt.text = “E-mail enviado!!!”;
nome_txt.text = “”;
email_txt.text = “”;
endereco_txt.text = “”;
ddd_txt.text = “”;
telefone_txt.text = “”;
mensagem_txt.text = “”;
} else {
resposta_txt.text = “Erro ao enviar!!!”;
}// end else if
};
objEnvia.sendAndLoad(“enviaEmail.php”,objRecebe,“POST”);
}// end else if
};
// Codificando o botão enviar
enviar_btn.onRelease = function() {
enviaDados();
}

Para importar o arquivo de actionScriopt para o formulário basta inseir o seguinte código no frame ações:
#include “acoes/formulario.as”
 
// Chamando a função iniciar que limpa todos os campos
iniciar();
Testando a aplicação:
testeformulaio1

Agora que confirmamos que o flash esta funcionando vamos criar o arquivo PHP que irá receber os dados e enviá-los ao email.
enviaEmail.php

<?php
// Declarando as variaveis e formatando com utf-8
$nome = utf8_decode(@$_POST['nome']);
$email = utf8_decode(@$_POST['email']);
$endereco = utf8_decode(@$_POST['endereco']);
$ddd = utf8_decode(@$_POST['ddd']);
$telefone = utf8_decode(@$_POST['telefone']);
$mensagem = utf8_decode(@$_POST['mensagem']);
// Montando o e-mail
$para = “emaildodestinatario@email.com.br”;
$assunto = “Formulario de contato”;
$corpo .= “Nome = $nome .\n”;
$corpo .= “E-mail = $email .\n”;
$corpo .= “Endereço = $endereco .\n”;
$corpo .= “DDD = $ddd .\n”;
$corpo .= “Telefone = $telefone .\n\n”;
$corpo .= “\n\n=====================================\n”;
$corpo .= “Esse formulário foi enviado atráves do Site www.seusite.com.br .\n”;
$corpo .= “========================================”; // Mensagem resposta
echo (“&resultado=true!&”);
mail(“$para”,“$assunto”,“$corpo”,“$headers”);
?>

HTML - Barra de navegação HTML simples

Neste artigo de HTML vamos desenvolver uma barra de navegação de uma maneira muito simples, na qual utilizaremos uma imagem para dar um pequeno efeito para fazer uma das bordas da tabela oblíqua.


A imagem 
Utiliza-se uma imagem para apresentar uma parte da célula onde se colocam os links com um lado oblíquo. A imagem tem uma parte transparente e outra parte com o fundo branco, que tem que ser o mesmo fundo da página. Colocaremos a imagem sobre uma célula da mesma cor da barra. Então, a parte branca criará o setor oblíquo e a parte transparente deixará ver a parte da célula com a cor que tenha a barra criada. Cor que se pode variar facilmente com estilos ou com o atributo bgcolor das células.

A tabela


O truque para fazer a barra se baseia em intercalar as células com os links e as células com a imagem. Será criada uma tabela com uma só fila e com tantas colunas como forem necessárias para localizar as opções. Na verdade, como se pode supor, serão criadas o dobro de células que de opções. Para cada opção, colocaremos primeiro uma célula com a imagem e logo outra com o link.


O código será algo como isto:


<table border=0 cellpadding="0" cellspacing="0">
<tr>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Opcao   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Opcao 2   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Mais opcoes   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> O que seja   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Mais coisas   </td>
       <td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
       <td class=op> Secao enésima   </td>
</tr>
</table>

Detalhes para estar atento:


Foi utilizado uma classe de estilos CSS para definir o formato das células. Na classe se define um estilo, que inclui a cor de fundo, tamanho de letra, tipografia, etc.

Nota: Uma classe não é mais que um estilo definido, que podemos aplicar a diversos elementos do HTML. Definem-se com um código como este no cabeçalho do documento HTML:

<style type="text/css">
.op{ font-size:10pt;font-family:verdana,arial;background-color:#ff8800;}
</style>

Assim estamos definindo que os elementos dessa classe tenham tamanho de letra 10, fonte verdana, ou em seu padrão, arial, e fundo de cor alaranjado.

Também cabe destacar que para que o exemplo funcione corretamente é necessário colocar os atributos da tabela para que não tenha bordas nem margens, com border=0, cellspacing=0 e cellpadding=0. Por isso, para criar uma pequena margem antes do link, utilizam-se caracteres especiais  , que servem para colocar espaços em branco.

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Eagle Belt Buckles