Fala meu amigo e minha amiga! Tudo bem contigo? Espero que sim.

Eu recebi através do Facebook a seguinte mensagem de um amigo que por questões óbvias eu não vou revelar o nome:

“Grande, André… Olha, rapidinho. Não emito nota e isso nunca me atrapalhou, mas esse ano já perdi 3 trabalhos por não fazer isso. O MEI é impraticável (não tem nada relacionado e não queria emitir nada como “serviços de informática”, pois tenho medo q isso me prejudique no futuro) e não sei se vale a pena abrir uma empresa para isso. No teu caso como vc resolveu. Se puder me dar alguma dica (de novo…) agradeço muito. Forte abraço.”

Então vamos lá.

ABRIR OU NÃO UMA EMPRESA?

Existem diversas coisas que devemos pensar antes de abrir uma empresa aqui no país. Temos toda a questão tributária, a questão de que existem pessoas que não emitem notas e assim não pagam impostos. E dessa maneira, elas “conseguem” por vezes praticar preços que estão fora da realidade de mercado.

Tudo bem que eu vejo às vezes pessoas que praticam valores fora do mercado, mesmo com empresa aberta. Como esse prostituto aí abaixo:

Eu sei que não devo me preocupar com o cara, pois “coisa ruim” o mercado mesmo trata de engolir. Sendo assim, vamos pensar no nosso assunto aqui: se compensa ou não abrir uma empresa.

Quero deixar claro que EU nunca abri uma empresa. A empresa da qual faço parte foi pensada e aberta por minha esposa, e vendo a responsabilidade que isso acarreta, eu digo que “tiro o chapéu” sempre que precisar por ela. De verdade. Não é fácil manter uma empresa. De forma alguma.

ALGUMAS VANTAGENS QUE EU VEJO …

Ter um CNPJ abre um grande leque de possibilidades.

Você pode botar a boca no trombone e dizer que presta esse ou aquele serviço, que vende esse ou aquele produto, e pode baixar a fiscalização que eu tenho tudo com nota fiscal.

Pelo menos deveria.

Com o CNPJ você pode, dentre inúmeras possibilidades:

• Conseguir empréstimos no Banco do Povo a taxas baixas;
• Participar de concorrências públicas;
• Participar de concorrências em empresas;
• Abrir uma conta jurídica no banco e ter algumas vantagens que a pessoa física não tem;
• Ter um diferencial dentre os profissionais de sua área que não tem empresa aberta;
• O diferencial são alguns dos citados acima.

Se você, como no caso do meu amigo, perdeu algum serviço por não poder emitir uma nota fiscal, sabe que o diferencial pode e vai fazer diferença. Parece lógico, mas tem gente que ainda não entende a palavra ou definição de “diferencial”.

Pode-se participar de concorrências na prefeitura de sua cidade (aqui no site abordamos apenas a área de web design, que fique claro. Outras áreas podem participar de inúmeras licitações), e ter um ganho bem maior do que apenas fazer trabalhos esporádicos ou para aqueles profissionais que às vezes precisam de um site ou sistema, e, por às vezes apenas desejarem economizar, vai procurar algum “sobrinho” ou não que faça por um valor bem abaixo do que uma empresa faria.

Outro ponto positivo que vejo ao se ter um CNPJ é que o seu trabalho vai ser mais valorizado. Não, as pessoas não falarão que o seu trabalho é F-A-N-T-Á-S-T-I-C-O por ter CNPJ. Estou dizendo que o VALOR MONETÁRIO de seu trabalho será maior, porque isso acarreta uma carga de outras responsabilidades que precisam ser respeitadas e isso será embutido no seu valor. Sendo assim, você tem a “possibilidade” de ganhar mais. E melhor.

Com um CNPJ em mãos, você pode ter um CONTRATO DE PRESTAÇÃO DE SERVIÇOS e, no caso de levar um calote, você pode ter um respaldo judiciário na hora do recebimento. Sem CNPJ você também pode entrar na Justiça, mas é mais complicado.

Empresas terceiras podem fazer planos melhores de internet, telefonia ou qualquer outra coisa que seja voltada para seu empreendimento.

Pense assim: até para a compra de um automóvel, o CNPJ traz alguma vantagem. Pelo menos aqui na região onde moro, se você tem o CNPJ você tem até 18% (se não me engano) na compra de um veículo zero. Mas tem que comprar o carro por si só. Não adianta dar seu usado na negociação. Mas já uma vantagem.

Outra coisa: você começa a pagar um tal de “GPS”, que é a Guia da Previdência Social, que vai lhe garantir algumas “regalias”, como uma grana na hora da sua aposentadoria e suporte dos programas sociais do Governo.

ALGUMAS DESVANTAGENS QUE EU VEJO …

E não são poucas, infelizmente…

Que beleza! Você abriu sua empresa e realizou o sonho de ser empreendedor no Brasil! Parabéns meu caro! Seu pesadelo acabou de começar!

Não quero assustar ninguém, até porque essa não é minha intenção. Mas eu fico muito bravo quando temos uma visão sobre as coisas que, quando se tornar realidade, elas não são bem aquilo que aparentavam ser. Como meu plano de celular do “Navegue ilimitado”. Certa hora do dia recebo a mensagem informando que minha cota diária foi atingida. Ilimitado? A-ham…

Ao se abrir uma empresa, precisamos pensar que temos agora, mais uma pancada de responsabilidades na nossa costa. E não é apenas “pagar impostos” como muita gente pensa. Dentre algumas, posso citar as seguintes:

• Carga tributária pesada (tanto municipal, quanto estadual e federal);
• Você tem a impressão de “empreender” para o Governo e não para você mesmo;
• As contas chegam quer você lucre ou não;
• Usa software pirata? Isso acaba agora;
• Pessoas dependem de você;
• Você sabe separar o pessoal do profissional;
• Existem sim custos fixos que NÃO SÃO INVESTIMENTOS;
• Você começa a ter um nome a zelar;
• Dentre outras inúmeras coisas.

Primeiro custo fixo: escritório de contabilidade

Ao se abrir uma empresa, existe o custo para se realizar isso. Você precisa entrar em contato com um escritório de contabilidade, que vai cobrar o serviço de pesquisa disso, daquilo, de emissão de guias, de registro de sua empresa, etc.

Fora o custo para se abrir a empresa, que, por uma pesquisa rápida no Google, indica que hoje gira em torno de uns R$2.000,00.

Aí você tem o custo do escritório, que varia bastante de um para outro. E ainda se tratando de escritório de contabilidade, sim; ele cobra uma taxa mensal para realizar a contabilidade da sua empresa.

Segundo custo fixo, porém anual: taxas da prefeitura

Aí, você precisa pensar na prefeitura de sua cidade; o que eles pedem e lhe cobram. Precisam analisar o local onde você vai situar a sua empresa, se ela recebe ou não pessoas, qual a metragem do local, se no endereço escolhido é possível abrir ou não a empresa, alvará do bombeiro, dentre outras inúmeras condições que a mesma exige. E é claro, você tem um custo anual com a prefeitura. Existem cidades que, se você não oferecer entrada para pessoas deficientes, não libera o alvará. E isso se aplica inclusive, aos banheiros. Se você recebe homens e mulheres, deve ter um banheiro exclusivo para cada um. Ah e claro. Deve haver um banheiro adaptado aos portadores de necessidades especiais.

Aqui na cidade, cobra até uma taxa para afixar uma placa de identificação na rua.

Terceiro custo fixo: materiais para o seu escritório

Aí você vai fazer todo o material de sua empresa. Você vai fazer cartões de visita, material de papelaria, talões de notas fiscais; isso se a sua cidade já não obrigar a trabalhar com Nota Fiscal Eletrônica.

Quarto custo fixo: o pagamento de impostos

Pense nos impostos. A cada nota emitida, o Governo “morde” uma parte de seu lucro. E dependendo do tipo de empresa que tenha aberto, chega a 20% do valor da nota. Isso mesmo.

Se você faturar R$100.000,00, 20% disso vai para o Governo. Como diz um cliente que eu tenho… “O Governo é nosso maior sócio”.

Nem todas as empresas abertas têm essa carga absurda de impostos. Algumas têm mais do que isso. Isso é apenas o que é cobrado pelo fato de “emitir a nota”. Existem cidades que ainda cobram 2% do valor da nota como ISS (Imposto Sobre Serviços).

Então, antes de pensar no valor de sua proposta, pense no quanto você vai ter que repassar ao Governo. E lembre-se: você terá algo chamado “Pró-Labore”, e dependendo de quanto você decidir retirar como lucro, ainda você terá ainda que declarar o seu Imposto de Renda de sua Pessoa Física. Ah, e claro, tem também o Imposto de Renda da Pessoa Jurídica.

Quinto custo fixo: as contas mensais

É meu amigo. Ainda temos as contas fixas. Pense nelas sendo “apenas”:

• Luz
• Água
• Internet
• Telefone fixo (sim, para abrir uma empresa é necessário ter um número fixo)
• Celular
• Aluguel (se o ponto não for seu)
• Combustível (para ir até o local de trabalho e/ou visitar clientes)
• Alimentação (mesmo que você faça suas refeições no escritório, precisará comprar o que comer correto?)
• Café e tudo o mais que ele acompanha

Sexto custo: o pagamento de funcionários

E se você resolver contratar funcionários, normalmente, ele lhe custará o dobro. Pense assim: se você contrata um funcionário pelo salário de R$800,00, você pode considerar o custo de R$1.600,00 por mês. A carga tributária é tão alta que você paga por um o valor de dois, praticamente!

Contratar estagiários via CIEE é uma boa, mas também gera um custo porque a entidade cobra uma taxa. Menor do que registrar via CLT (Carteira de Trabalho), mas onera ainda mais as contas no final do mês para a empresa.

ALGUNS PONTOS QUE DEVEM SER DISCUTIDOS …

E o tal do MEI – Micro Empreendedor Individual

Claro que existem outros pontos a serem observados, mas de maneira grosseira, para nós que trabalhamos com Web Design, não rola. Pelo simples fato de não nos enquadrarmos no que eles pedem ou nas categorias que criaram.

Nosso trabalho é “intelectual”, e dessa maneira, não pode ser comercializado pelo MEI. Próximo!

Disciplina é fundamental

Acho que é aqui que a coisa fica mais séria ainda. É preciso ter disciplina para saber que a empresa, mesmo sendo sua, é uma empresa.

Como meu pai questionou a mim e minha esposa quando começamos a trabalhar juntos: “Vocês recebiam todo dia nas empresas que trabalharam anteriormente? Então porque recebem agora”?

Simples assim. Eu e Dona Patroa fechávamos um serviço, e se por exemplo, desse R$600,00, era “trezentão” para cada na hora do pagamento. E isso estava errado. O correto seria receber todo o valor, depositar durante o mês na conta jurídica e proceder mais ou menos assim: paga-se tudo o que é necessário (aqueles 5 ou 6 itens que eu citei lá em cima, fora alguns vários outros) e depois, separaríamos em 3 partes iguais. Uma para o caixa da empresa e nosso pagamento propriamente dito.

É mais ou menos assim que funciona. E ainda existe outra coisa.

Temos funcionários. E eles esperam receber o deles no final do mês. E se meu cliente não honra seus débitos, eles não podem responder por isso. Dessa maneira, a empresa tem que ter um caixa para poder se manter e manter seus funcionários a todo vapor.

Bom, sei que ficou extenso, mas acho que dá para se pensar um pouco mais na hora de se abrir uma empresa.

E você, o que tem a dizer?

Fonte: André Buzzo - Desenvolvimento HTML5 + CSS + jQuery Post original: ABRIR OU NÃO UMA EMPRESA? O QUE ISSO IMPLICA? Conteúdo originalmente criado por André Buzzo

Fala Pessoas!

Meu amigo João Augusto me fez lembrar hoje que eu realizei uma palestra no ano passado, e não compartilhei os arquivos aqui com vocês!

Trata-se de um conjunto de informações úteis para os publicitários e outros profissionais que desenvolvem sites.

Me desculpem a mancada, e sem mais delongas, clique aqui para fazer o download do material!

Abraços a todos!

Fonte: André Buzzo - Desenvolvimento HTML5 + CSS + jQuery Post original: Palestra – Desenvolvimento Web Conteúdo originalmente criado por André Buzzo

Obrigado e forte abraço!

Fonte: André Buzzo - Desenvolvimento HTML5 + CSS + jQuery Post original: Sistema de Login e Senha Criptografados Conteúdo originalmente criado por André Buzzo

Sem muita demora e delongas, aqui está a segunda parte do tutorial sobre o Sistema de Login e Senha Criptografados!

O que vamos fazer aqui?

Bom, uma das exigências do Cliente X era que, “caso o usuário perca seus dados, deve ser dada a opção e ferramentas para que o mesmo possa cadastrar novos dados, sempre que necessário” … Sendo assim, precisávamos inserir tais ferramentas no sistema para que nosso usuário, depois de cadastrado, pudesse voltar a ter acesso sem a necessidade de preencher o formulário novamente com seus dados.

Para isso, criamos um link no rodapé do arquivo “index” que está na pasta “exclusivo” do nosso sistema. Portanto o arquivo “recuperaDados.php” segue abaixo:

recuperaDados.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE HTML>

<html lang="br" class="no-js">

<head>

<meta charset="utf-8">
<title>Sistema de Login e Senha Criptografados</title>
<link href="../style.css" rel="stylesheet" />

</head>

<body>

<div id="conteudo">

<h1>Sistema de login e senha criptografados - Recuperação de Dados</h1>

<div class="borda"></div>

<div class="clear"></div>

<!-- Formulário para acesso -->
<p>Para recuperar seus dados, por favor, preencha o formulário abaixo!<p>

<!-- A lógica que empregaremos aqui é a seguinte: Vamos pedir o endereço de email e vamos conferir se o mesmo está cadastrado no sistema.
Se o endereço estiver cadastrado, enviaremos um e-mail para que ele possa acessar uma nova página e informar novamente seus dados para acessar o Conteúdo exclusivo dele! -->

<form method="post" action="enviaInformacoes.php" id="recuperaDados">
<fieldset>
<legend>Recuperação de Dados</legend>
<label for="nomeUsuario">Informe o e-mail:</label>
<input type="text" name="email" id="email" />
<div class="clear"></div>
<input type="submit" value="Recuperar Dados" />

</fieldset>
</form>

<div class="borda"></div>

</div>

</body>

</html>

Acho que o formulário se explica sozinho correto? Ok, então vamos ver o que o arquivo “enviaInformacoes.php” tem a nos mostrar logo abaixo:

enviaInformacoes.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

<!DOCTYPE HTML>

<html lang="br" class="no-js">

<head>

<meta charset="utf-8">
<title>Sistema de Login e Senha Criptografados</title>
<link href="../style.css" rel="stylesheet" />

</head>

<body>

<div id="conteudo">

<h1>Sistema de login e senha criptografados - Verificando Informações</h1>

<div class="borda"></div>

<!-- Recebendo e gravando os dados -->
<?php

include "conexao.php";
//Praticamente faço as mesmas validações que fizemos para o cadastrado do usuário no banco de dados.
//Recebendo os dados e tratando os mesmos para inserção no banco
$recebeEmail = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
$confereEmail = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_MAGIC_QUOTES);

//Nesse if, faço uma conferência em relação ao e-mail informado. Se não for informado nenhum, retorno a mensagem para que o usuário informe corretamente
if ($recebeEmail == NULL ) {
echo "<p>O endereço de e-mail precisa ser informado!";
echo "<p><a href='javascript:history.back();'>Voltar</a></p>";
return false;
}

//Aqui faço a segunda parte da verificação: vejo se no endereço de e-mail foi utilizado algum caractere especial
//Isso serve para evitar uma possível invasão sql no banco de dados, possibilitando assim a proteção e integridade dos dados
//Nesse caso, eu comparo os nomes. Se forem iguais, após passarem pelos filtros, eu inicio a criptografia. Se não forem, peço que volte à página anterior
else if ($recebeEmail != $confereEmail) {
echo "<p>Você informou o seguinte endereço de e-mail: <strong>$confereEmail</strong> .</p>";
echo "<p>Por favor, não utilize caracteres especiais (tais como aspas simples ou duplas e/ou barras!) no campo <strong>Informe o E-mail</strong>.</p>";
echo "<p><a href='javascript:history.back();'>Volte</a> para a página anterior e tente novamente! Obrigado!</p>";
return false;

} else {

/*
Agora vamos consultar no banco de dados para ver se existe realmente esse cadastro
Vamos verificar ambos os dados: E-mail e ainda se o campo "ATIVO" está setado como SIM
*/

$consultaInformacoes = mysql_query("SELECT * FROM usuario WHERE email = '$confereEmail' AND ativo = 'sim'") or die (mysql_error());
$verificaInformacoes = mysql_num_rows($consultaInformacoes);

//Aqui vou verificar se houve resultado positivo na pesquisa
if($verificaInformacoes == 1){

echo "<p>O e-mail informado (<strong><em>$confereEmail</em></strong>) consta de nossa base de dados.</p>
<p>Acesse sua caixa de entrada. Se a mensagem não for encontrada, verifique se não está na caixa de spam!</p>";

//Aqui vou enviar o e-mail com os dados para que o cliente faça o acesso à página
//O e-mail será enviado utilizando o PHPMailer
//Para executar essa função, é necessário que o sistema esteja hospedado em algum servidor web | SERVIDORES LOCAIS NÃO ENVIAM E-MAIL
include ("phpmailer/class.phpmailer.php");

$headers = "Content-type:text/html; charset=utf-8";
$headers = "From: seuEmail@seuDominio.com.br";

$destino = $recebeEmail;
$de = utf8_decode("Contato - André Buzzo");
$assunto = "..:: Recuperação de dados ::..";
$html = utf8_decode('
<hr />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Recuperação de Dados</title>
<style type="text/css">
<!--
.style1 {
font-family: "Trebuchet MS", Arial;
font-size: 16px;
color: #FFFFFF;
}
.style4 {
font-family: "Trebuchet MS", Arial;
font-size: 12px;
color: #333333;
font-weight: bold;
}
-->
</style></head>

<body>
<form method="post" action="http://seuDominio.com.br/exclusivo/atualizaInformacoes.php">
<fieldset>
<legend>Recuperação de Dados de Acesso</legend>
<label for="informacao">Para recuperar seus dados, clique no botão "Atualizar Meus Dados"!</label>
<input type="hidden" name="confereEmail" value="'.$confereEmail.'" /><br />
<input type="submit" value="Atualizar Meus Dados" />
</fieldset>
</form>
</body>
</html>

<hr />');

$mail = new PHPMailer(); // criando a nova classe - instnciando

$mail->IsSMTP = ("smtp");
$mail->Mailer = ("mail");
$mail->SMTPSecure = "ssl";
$mail->SMTPAuth = true;
//$mail->CharSet = 'utf-8';
$mail->Username = ("seuEmail@seuDominio.com.br");
$mail->Password = ("suaSenha");
$mail->Sender = ("seuEmail@seuDominio.com.br");
$mail->From = ("seuEmail@seuDominio.com.br");
$mail->FromName = $de;
$mail->AddAddress ($destino);
//$mail->Addbcc ($para);
$mail->AddReplyTo("$email","$nome");
$mail->Wordwrap = 50;
$mail->Subject = ($assunto);
$mail->IsHTML = (true);
$texto = "body";

$mail->Body = $html;
$mail->AltBody =$texto;

if($mail->Send($destino, "Recuperação de dados!", $html, $headers)){
echo "<p>Mensagem enviada com sucesso! Obrigado!";
} else {echo "Houve um problema";}

} else {
//Se nenhuma das confirmações acima foram efetuadas, mais uma vez, retorno uma mensagem de erro ao usuário.
echo "<p>Endereço de e-mail informado não consta em nossa base de dados. Por favor, <a href='javascript:history.back();'>volte</a> e tente novamente!</p>";

}

}
?>

</div>

</body>

</html>

O arquivo acima está comentado para que seu entendimento seja pleno. A classe PHPMailer pode ser baixada nesse endereço!

Quando o usuário acessar a caixa de e-mail dele, ele verá uma mensagem que o informará da necessidade se clicar em um link. Ao clicar nele, ele será enviado para uma página chamada “atualizaInformacoes.php”, na qual será realizada uma consulta novamente para saber se o e-mail que está sendo informado realmente consta em nossa base de dados.

Vamos fazer outra consulta e validação, pois precisamos garantir o mínimo de segurança do nosso sistema. A página segue abaixo:

atualizaInformacoes.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

<!DOCTYPE HTML>

<html lang="br" class="no-js">

<head>

<meta charset="utf-8">
<title>Sistema de Login e Senha Criptografados</title>
<link href="../style.css" rel="stylesheet" />

</head>

<body>

<div id="conteudo">

<h1>Sistema de login e senha criptografados - Verificando Informações</h1>

<div class="borda"></div>

<!-- Recebendo e gravando os dados -->
<?php

include "conexao.php";
//Praticamente faço as mesmas validações que fizemos para o cadastrado do usuário no banco de dados.
//Recebendo os dados e tratando os mesmos para inserção no banco
$recebeEmail = filter_input(INPUT_POST, 'confereEmail', FILTER_VALIDATE_EMAIL);
$confereEmail = filter_input(INPUT_POST, 'confereEmail', FILTER_SANITIZE_MAGIC_QUOTES);

//Nesse if, faço uma conferência em relação ao e-mail informado. Se não for informado nenhum, retorno a mensagem para que o usuário informe corretamente
if ($recebeEmail == NULL ) {
echo "<p>Nenhum endereço de e-mail foi informado!";
echo "<p><a href='javascript:history.back();'>Voltar</a></p>";
return false;
}

//Aqui faço a segunda parte da verificação: vejo se no endereço de e-mail foi utilizado algum caractere especial
//Isso serve para evitar uma possível invasão sql no banco de dados, possibilitando assim a proteção e integridade dos dados
//Nesse caso, eu comparo os nomes. Se forem iguais, após passarem pelos filtros, eu inicio a criptografia. Se não forem, peço que volte à página anterior
else if ($recebeEmail != $confereEmail) {
echo "<p>Você informou o seguinte endereço de e-mail: <strong>$confereEmail</strong> .</p>";
echo "<p>Por favor, não utilize caracteres especiais (tais como aspas simples ou duplas e/ou barras!) no campo <strong>Informe o E-mail</strong>.</p>";
echo "<p><a href='javascript:history.back();'>Volte</a> para a página anterior e tente novamente! Obrigado!</p>";
return false;

} else {

/*
Agora vamos consultar no banco de dados para ver se existe realmente esse cadastro
Vamos verificar ambos os dados: E-mail e ainda se o campo "ATIVO" está setado como SIM
*/

$consultaInformacoes = mysql_query("SELECT * FROM usuario WHERE email = '$confereEmail' AND ativo = 'sim'") or die (mysql_error());
$verificaInformacoes = mysql_num_rows($consultaInformacoes);

//Aqui vou verificar se houve resultado positivo na pesquisa
if($verificaInformacoes == 1){

echo "<p>O e-mail informado (<strong><em>$confereEmail</em></strong>) consta de nossa base de dados.</p>
<p>Preencha os dados abaixo para obter acesso ao <strong>Conteúdo Exclusivo!</strong></p>";

echo "
<form method='post' action='atualizaDados.php'>
<fieldset>
<legend>Preencha os dados para obter acesso ao Conteúdo Exclusivo!</legend>
<label for='nomeUsuario'>Nome de Usuário:</label>
<input type='text' name='nomeUsuario' id='nomeUsuario' />
<div class='clear'></div>
<label for='senha'>Informe a senha:</label>
<input type='password' name='senha' id='senha' />
<div class='clear'></div>
<input type='hidden' name='emailControle' value='".$confereEmail."' />
<input type='submit' value='Atualizar informações' />
</fieldset>
</form>";

}
}
?>

</div>

</body>

</html>

Se os dados informados baterem, exibimos outro formulário para que o usuário novamente faça o cadastro dos seus dados, e garanta assim, um novo acesso ao sistema. Simplesmente pedimos os dados novamente e atualizamos a tabela onde o e-mail cadastrado seja igual ao e-mail que acessou o sistema.

E é lógico, faremos toda a validação, praticamente igual ao ato de cadastrar o usuário no banco.

atualizaDados.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<!DOCTYPE HTML>

<html lang="br" class="no-js">

<head>

<meta charset="utf-8">
<title>Sistema de Login e Senha Criptografados</title>
<link href="../style.css" rel="stylesheet" />

</head>

<body>

<div id="conteudo">

<h1>Sistema de login e senha criptografados</h1>

<div class="borda"></div>

<!-- Recebendo e gravando os dados -->
<?php

include "conexao.php";

//URL para a qual o usuário será enviado após ter preenchido todos os campos corretamente
$urlAcesso = "index.php";

//Recebendo os dados e tratando os mesmos para inserção no banco
$recebeNomeUsuario = filter_input(INPUT_POST, 'nomeUsuario', FILTER_SANITIZE_SPECIAL_CHARS);
$confereNomeUsuario = filter_input(INPUT_POST, 'nomeUsuario', FILTER_SANITIZE_MAGIC_QUOTES);
$recebeEmail = filter_input(INPUT_POST, 'emailControle', FILTER_VALIDATE_EMAIL);
$recebeSenha = filter_input(INPUT_POST, 'senha', FILTER_SANITIZE_SPECIAL_CHARS);

//Nesse if, faço uma conferência em relação ao e-mail informado; se não for um e-mail validado pelo filtro, ele retornará a mensagem abaixo.
//Se o email for válido, ele passa para a segunda parte da verificação
if ($recebeEmail == NULL ) {
echo "<p>Retorne e digite um e-mail válido por favor!";
echo "<p><a href='javascript:history.back();'>Voltar</a></p>";
return false;
}

//Nesse if, faço uma conferência em relação à senha informada. Se não for informada nenhuma, retorno a mensagem para que o usuário informe algo!
if ($recebeSenha == NULL ) {
echo "<p>Retorne e informe uma senha por favor!";
echo "<p><a href='javascript:history.back();'>Voltar</a></p>";
return false;
}

//Aqui faço a segunda parte da verificação: vejo se no nome de usuário foi utilizado algum caractere especial
//Isso serve para evitar uma possível invasão sql no banco de dados, possibilitando assim a proteção e integridade dos dados
//Nesse caso, eu comparo os nomes. Se forem iguais, após passarem pelos filtros, eu inicio a criptografia. Se não forem, peço que volte à página anterior
else if ($confereNomeUsuario != $recebeNomeUsuario) {
echo "<p>Você informou o seguinte Nome de Usuário: <strong>$recebeNomeUsuario</strong> .</p>";
echo "<p>Por favor, não utilize caracteres especiais (tais como aspas simples ou duplas, assim como barras!) no campo <strong>Nome de Usuário</strong>.</p>";
echo "<p><a href='javascript:history.back();'>Volte</a> para a página anterior e tente novamente! Obrigado!</p>";
return false;

} else {

//Aqui vou agora, criptografar as informações antes de enviá-las ao banco de dados
echo "<h3>Atualizando informações em nosso banco de dados</h3>";

//Aqui vamos criar a função que vai criptografar os dados.
//Serão necessários criptografar apenas o endereço de e-mail e a senha informada

//Função para criptografar a senha
function criptoSenha($criptoSenha){
return sha1(md5($criptoSenha));
}
//Função para criptografar o e-mail
function criptoNomeUsuario($criptoNomeUsuario){
return sha1(md5($criptoNomeUsuario));
}
//Aqui realizo a criptografia do endereço de e-mail
$criptoNomeUsuario = criptoNomeUsuario(filter_input(INPUT_POST, 'nomeUsuario', FILTER_SANITIZE_MAGIC_QUOTES));
//Aqui realizo a criptografia da senha informada do usuário
$criptoSenha = criptoSenha(filter_input(INPUT_POST, 'senha', FILTER_SANITIZE_SPECIAL_CHARS));

//Agora vamos atualizar os dados no banco
$atualizaDados = mysql_query("UPDATE usuario SET userlogin = '$criptoNomeUsuario', passlogin = 'criptoSenha' WHERE email = '$recebeEmail'") or die (mysql_error());

echo "<p>Seu cadastro foi atualizado com sucesso!</p>";
echo "<p>Aguarde enquanto lhe encaminhamos para a página de acesso ao <strong>Conteúdo Exclusivo</strong>!";
echo "<meta http-equiv=\"refresh\" content=\"5;URL=".$urlAcesso."\">";
}

?>

</div>

</body>

</html>

Bom, espero que o sistema tenha agradado a todos, e que possam fazer bom uso dele. Espero também ter dado novos horizontes sobre o que é possível se fazer com esse script.

Bons estudos e até a próxima!

Abraços!

Fonte: André Buzzo - Desenvolvimento HTML5 + CSS + jQuery Post original: Sistema de Login e Senha Criptografados – Parte 02 Conteúdo originalmente criado por André Buzzo

Hoje eu queria começar 2013 de uma maneira diferente: ao invés de gravar uma vídeo aula explicando determinado assunto, eu decidi ESCREVER para fazer isso. Há tempos eu penso em fazer algo mais “complexo” aqui no site, para atender também a algumas dúvidas de usuários mais avançados.

Ou não.

Porém, por falta de tempo (não que hoje esteja sobrando, que fique bem claro isso!) eu não conseguia gravar a vídeo aula, então, eu resolvi criar os scripts e comentá-lo. Isso mesmo. Farei alguns comentários ao inserir aqui os códigos, mas o script em si está bem comentado, visando não dar margem para dúvidas futuras.

Mas, como eu sempre costumo dizer, eu gosto quando as pessoas dão “aquela viajada” e, por si só, fazem aquele comentário interno “Nossa! Eu poderia usar isso para fazer aquilo! Só preciso adaptar isso aqui e ali” …

Se alguém quiser me deixar feliz, é só fazer isso!

Apresentando: O PROBLEMA!

O cliente X me pediu para que eu criasse um sistema, onde seria necessário seguir as seguintes diretrizes:

• O usuário deverá fazer seu cadastro, que deverá, por sua vez, conter os campos: Seu Nome, Nome de Usuário, E-mail e Senha;
• Haverá no sistema um setor de “Conteúdo Exclusivo“, que o usuário só poderá acessar após fazer o seu cadastro completo;
• Poderá ser cadastrado apenas UM endereço de e-mail; se for cadastrado em duplicidade, o usuário deve ser avisado desse problema;
• Esse conteúdo, não poderá, em hipótese alguma, ser acessado por quem não efetuou o cadastro;
• Preciso da segurança: se por um acaso o sistema for invadido, não quero que o invasor tenha acesso ao NOME DE USUÁRIO e a SENHA cadastrada. Precisam ser criptografados;
• Caso o usuário perca seus dados, deve ser dada a opção e ferramentas para que o mesmo possa cadastrar novos dados, sempre que necessário;

Com esse “mini briefing” em mãos, podemos pensar e fazer uma comparação da seguinte maneira: eu preciso guardar dados dentro do banco, e depois, de alguma maneira, preciso recuperá-los. É o mesmo que eu jogar as coisas dentro de um baú com um cadeado, e depois, usando uma senha, eu consiga recuperar esses dados guardados lá… bico! rs

Então vamos começar a desenvolver esse nosso sistema: o primeiro arquivo que precisaremos ter em mãos é o de “conexão ao banco de dados”. O mesmo segue abaixo:

conexao.php

1
2
3
4
5
6
7
8
9
10
11

<?php

$host = "localhost";
$loga = "seuUsuario";
$senhaLoga = "suaSenha";
$baseDados = "seuBancoDeDados";

$conecta = mysql_connect($host, $loga, $senhaLoga, $baseDados);
$conectaBanco = mysql_select_db($baseDados);

?>

E de quebra, vou passar para vocês o código do banco que eu vou utilizar para nesse tutorial. Na realidade, ele é bem simples, tendo apenas uma tabela no total!

bancoDados.sql

1
2
3
4
5
6
7
8
9

CREATE TABLE IF NOT EXISTS `usuario` (
`id_usuario` int(111) NOT NULL AUTO_INCREMENT,
`nome` varchar(150) NOT NULL,
`email` varchar(150) NOT NULL,
`userlogin` longtext NOT NULL,
`passlogin` longtext NOT NULL,
`ativo` varchar(3) NOT NULL DEFAULT 'sim',
PRIMARY KEY (`id_usuario`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

Fazendo uma breve explicação sobre os campos dessa tabela:

id_usuario -> É o ID do usuário, que é campo único e se incrementa automaticamente;
nome -> Tá mais do que na cara;
e-mail -> Idem à de cima! rs;
userlogin -> Aqui fica interessante! O campo está como “longText”, pois é nele que será inserido o primeiro dado criptografado desse tutorial, que será o nome de usuário;
passlogin -> Aqui será inserida a senha do usuário, também criptografada;
ativo -> O campo terá como valor padrão (default) o “SIM“. Não pretendo deixar que sejam DELETADOS dados do banco. Simplesmente, ou eu ATIVO ou DESATIVO determinado usuário. Porém, nunca o apago. Evita problemas futuros!

Após termos criado o banco e testado a conexão com o mesmo, vamos analisar o primeiro arquivo ao qual nosso usuário terá acesso!

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<!DOCTYPE HTML>

<html lang="br" class="no-js">

<head>

<meta charset="utf-8">
<title>Sistema de Login e Senha Criptografados</title>
<link href="style.css" rel="stylesheet" />

</head>

<body>

<div id="conteudo">

<h1>Sistema de login e senha criptografados - Cadastro de usuário</h1>

<div class="borda"></div>

<!-- Formulário para acesso -->
<p>Para ter acesso ao conteúdo exclusivo, por favor, cadastre-se utilizando o formulário abaixo!</p>

<form method="post" action="cadastraUsuario.php" id="validaAcesso">
<fieldset>
<legend>Faça seu cadastro abaixo!</legend>
<label for="nome">Seu nome:</label>
<input type="text" name="nome" id="nome" />
<div class="clear"></div>
<label for="nome">Nome de usuário:</label>
<input type="text" name="nomeUsuario" id="nomeUsuario" />
<div class="clear"></div>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email" />
<div class="clear"></div>
<label for="senha">Senha:</label>
<input type="password" name="senha" id="senha" />
<div class="clear"></div>
<input type="submit" value="Efetuar cadastro" />

</fieldset>
</form>

<p>Se você já possui cadastro, <a href="exclusivo/">clique aqui</a> para acessar o Conteúdo Exclusivo!</p>

</div>

</body>

</html>

E seu arquivo de “folha de estilos”, o

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

* body {
margin:0;
padding:0;

background-color:#f2f2f2;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:medium;
color:#000;
line-height:150%;
}

h1 {
color:#039;
font-size:120%;
}

h3 {
color:#900;
font-size:100%;
}

p {
font-size:80%;
}

#conteudo {
width:984px;
height:auto;
display:table;
margin:10px auto;
border-top:1px solid #e1e1e1;
}

#conteudo form {
font-size:80%;
}

#conteudo form legend {
padding:5px;
border:1px solid #036;
border-radius:5px;
background-color:#e2e2e2;
}
#conteudo fieldset {
border:1px dotted #036;
}

#conteudo form label {
width:120px;
float:left;
font-weight:bold;
margin:5px 0;
}

#conteudo form input[type="text"], #conteudo form input[type="password"] {
float:left;
background-color:#e2e2e2;
text-indent:10px;
width:150px;
height:25px;
border:1px solid #036;
border-radius:5px;
margin:5px 0;
}

#conteudo form input[type="text"]:hover, #conteudo form input[type="password"]:hover {
background-color:#ccc;
}

#conteudo form input[type="text"]:focus, #conteudo form input[type="password"]:focus {
background-color:#fff;
}

#conteudo form input[type="submit"]{
background-color:#036;
color:#fff;
width:150px;
text-align:center;
padding:5px;
border-radius:5px;
float:left;
margin:0 50px;
}

#conteudo form input[type="submit"]:hover{
background-color:#000;
color:#fff;
}

.clear {
clear:both;
}
.borda {
border-top:1px solid #e1e1e1;
margin:10px auto;
}

.destaca {
color:#f90;
}

.logout {
float:right;
border:1px solid #900;
background-color:#ccc;
padding:5px;
width:250px;
height:25px;
text-align:center;
margin:10px 0 0;
}

.sairSistema {
font-size:70%;
color:#036;
margin:0 auto;
}

Como podem observar, nada mais é do que um formulário que pede os dados requisitados pelo nosso cliente X. Nele, constam todos os campos que o mini-briefing nos pediu, e, sim, ele tem o cabeçalho em HTML5.

Tem também um link para que, se o usuário já estiver cadastrado no sistema, ter acesso ao seu “Conteúdo Exclusivo”.

O formulário, assim que o usuário o tiver preenchido e clicado no botão “Efetuar Cadastro”, será enviado ao arquivo

cadastraUsuario.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

<!DOCTYPE HTML>

<html lang="br" class="no-js">

<head>

<meta charset="utf-8">
<title>Sistema de Login e Senha Criptografados</title>
<link href="style.css" rel="stylesheet" />

</head>

<body>

<div id="conteudo">

<h1>Sistema de login e senha criptografados</h1>

<div class="borda"></div>

<!-- Recebendo e gravando os dados -->
<?php

include "conexao.php";

//URL para a qual o usuário será enviado após ter preenchido todos os campos corretamente
$urlAcesso = "exclusivo/index.php";

//Recebendo os dados e tratando os mesmos para inserção no banco
$recebeSeuNome = filter_input(INPUT_POST, 'nome', FILTER_SANITIZE_SPECIAL_CHARS);
$confereSeuNome = filter_input(INPUT_POST, 'nome', FILTER_SANITIZE_MAGIC_QUOTES);
$recebeNomeUsuario = filter_input(INPUT_POST, 'nomeUsuario', FILTER_SANITIZE_SPECIAL_CHARS);
$confereNomeUsuario = filter_input(INPUT_POST, 'nomeUsuario', FILTER_SANITIZE_MAGIC_QUOTES);
$recebeEmail = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
$recebeSenha = filter_input(INPUT_POST, 'senha', FILTER_SANITIZE_SPECIAL_CHARS);

//Nesse if, faço uma conferência em relação ao e-mail informado; se não for um e-mail validado pelo filtro, ele retornará a mensagem abaixo.
//Se o email for válido, ele passa para a segunda parte da verificação
if ($recebeEmail == NULL ) {
echo "<p>Retorne e digite um e-mail válido por favor!";
echo "<p><a href='javascript:history.back();'>Voltar</a></p>";
return false;
}

//Nesse if, faço uma conferência em relação à senha informada. Se não for informada nenhuma, retorno a mensagem para que o usuário informe algo!
if ($recebeSenha == NULL ) {
echo "<p>Retorne e informe uma senha por favor!";
echo "<p><a href='javascript:history.back();'>Voltar</a></p>";
return false;
}

//Aqui faço a segunda parte da verificação: vejo se no nome de usuário foi utilizado algum caractere especial
//Isso serve para evitar uma possível invasão sql no banco de dados, possibilitando assim a proteção e integridade dos dados
//Nesse caso, eu comparo os nomes. Se forem iguais, após passarem pelos filtros, eu inicio a criptografia. Se não forem, peço que volte à página anterior
else if ($confereNomeUsuario != $recebeNomeUsuario) {
echo "<p>Você informou o seguinte Nome de Usuário: <strong>$recebeNomeUsuario</strong> .</p>";
echo "<p>Por favor, não utilize caracteres especiais (tais como aspas simples ou duplas, assim como barras!) no campo <strong>Nome de Usuário</strong>.</p>";
echo "<p><a href='javascript:history.back();'>Volte</a> para a página anterior e tente novamente! Obrigado!</p>";
return false;

}
else if ($confereSeuNome != $recebeSeuNome) {
echo "<p>Você informou o Seu Nome como: <strong>$confereSeuNome</strong> .</p>";
echo "<p>Por favor, não utilize caracteres especiais (tais como aspas simples ou duplas, assim como barras!) no campo <strong>Seu Nome</strong>.</p>";
echo "<p><a href='javascript:history.back();'>Volte</a> para a página anterior e tente novamente! Obrigado!</p>";
return false;
}

else {

//Aqui vou agora, criptografar as informações antes de enviá-las ao banco de dados
echo "<h3>Cadastrando informações em nosso banco de dados</h3>";

//Aqui vamos criar a função que vai criptografar os dados.
//Serão necessários criptografar apenas o endereço de e-mail e a senha informada

//Função para criptografar a senha
function criptoSenha($criptoSenha){
return sha1(md5($criptoSenha));
}
//Função para criptografar o e-mail
function criptoNomeUsuario($criptoNomeUsuario){
return sha1(md5($criptoNomeUsuario));
}
//Aqui realizo a criptografia do endereço de e-mail
$criptoNomeUsuario = criptoNomeUsuario(filter_input(INPUT_POST, 'nomeUsuario', FILTER_SANITIZE_MAGIC_QUOTES));
//Aqui realizo a criptografia da senha informada do usuário
$criptoSenha = criptoSenha(filter_input(INPUT_POST, 'senha', FILTER_SANITIZE_SPECIAL_CHARS));

//Aqui eu vou realizar minha PRIMEIRA VERIFICAÇÃO DE CRIPTOGRAFIA no banco de dados
//Se o endereço de e-mail for válido, eu preciso verificar se o e-mail cadastrado já consta na base de dados.
//Como desejo que o e-mail seja um campo único, preciso verificar se o mesmo já foi ou não cadastrado no banco.
//A consulta segue abaixo:
$consultaBanco = mysql_query("SELECT * FROM usuario WHERE email = '$recebeEmail'") or die (mysql_error());
$verificaBanco = mysql_num_rows($consultaBanco);

if($verificaBanco == 1){

echo "<p>Prezado(a) <strong>$confereSeuNome</strong>, o endereço de e-mail informado (<strong><em>$recebeEmail</em></strong>) já consta em nossa base de dados!</p>";
echo "<p><a href='javascript:history.back();'>Volte</a> para a página anterior e informe um novo endereço! Obrigado!</p>";
return false;
}

//Agora vamos inserir os dados no banco
$insereDados = mysql_query("INSERT INTO usuario (id_usuario, nome, email, userlogin, passlogin, ativo) VALUES ('NULL', '$confereSeuNome', '$recebeEmail', '$criptoNomeUsuario', '$criptoSenha', 'sim')") or die (mysql_error());

echo "<p>Seu cadastro foi efetuado com sucesso!</p>";
echo "<p>Aguarde enquanto lhe encaminhamos para a página de acesso ao <strong>Conteúdo Exclusivo</strong>!";
echo "<meta http-equiv=\"refresh\" content=\"5;URL=".$urlAcesso."\">";
}

?>

</div>

</body>

</html>

E pronto! Se o usuário preencheu corretamente todas as informações requisitadas, ele será enviado para uma outra “index”, que estará dentro de uma pasta. No meu caso, nomeei essa pasta de “exclusivo”, e lá consta esse primeiro arquivo, o qual fará, novamente, requisições de dados para garantir o acesso do usuário ao “Conteúdo Exclusivo”.

Portanto, vamos trabalhar agora dentro de uma pasta chamada “exclusivo“. O primeiro arquivo que teremos acesso é o

exclusivo/index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<?php

ob_start();

include 'conexao.php';

//Essa variável $msg será explanada e apresentada no decorrer do tutorial

$msg = $_REQUEST["msg"];
?>
<!DOCTYPE HTML>

<html lang="br" class="no-js">

<head>

<meta charset="utf-8">
<title>Sistema de Login e Senha Criptografados</title>
<link href="../style.css" rel="stylesheet" />

</head>

<body>

<div id="conteudo">

<h1>Sistema de login e senha criptografados - Acesso ao Conteúdo Exclusivo</h1>

<div class="borda"></div>

<!-- Formulário para acesso -->
<p>Para ter acesso ao <strong>Conteúdo Exclusivo</strong>, por favor, logue-se utilizando o formulário abaixo!</p>

<form method="post" action="validaAcesso.php" id="validaAcesso">
<fieldset>
<legend>Login</legend>
<label for="nomeUsuario">Nome de Usuário:</label>
<input type="text" name="nomeUsuario" id="nomeUsuario" />
<div class="clear"></div>
<label for="senha">Senha:</label>
<input type="password" name="senha" id="senha" />
<div class="clear"></div>
<input type="submit" value="Acessar o sistema" />

</fieldset>
</form>

<p><small>Esqueceu seus dados? <a href="recuperaDados.php">Clique aqui!</a></small></p>

</div>

</body>

</html>

Na segunda parte desse tutorial, vamos trabalhar com a recuperação de dados, o qual se encontra linkado bem ao final do script acima. Por enquanto, vamos pensar que temos mais um arquivo de conexão dentro dessa pasta (exclusivo) que nos dá acesso ao banco de dados, e que não difere em nada do que já temos salvo. Vamos então, dar aquela analisada no arquivo

exclusivo/validaAcesso.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

<?php
ob_start();
include 'conexao.php';
$msg = $_REQUEST["msg"];
/*
Por questões de segurança, deixo eu aqui uma breve explicação e direcionamento.

Quando fores utilizar esse sistema em uma hospedagem web, recomendo que crie "usuários diferenciados" para acesso às informações no banco de dados.
Por exemplo: Se eu estiver pensando em criar duas áreas distintas, onde uma será a do administrador e outra será do usuário, seria interessante,
para efeitos de segurança e integridade do banco, criar um usuário com alguns privilégios dentro do banco, e outro com esses privilégios reduzido.

Administrador -> Poderia, dentro de seu ambiente, deletar informações do banco.

Usuário -> Deveria, em seu ambiente, apenas alterar informações, e nunca deletar sequer uma linha ou tabela ou base de dados.

Nesse caso, seria necessário trabalhar com dois arquivos de conexão, um para cada tipo de usuário.

#ficaDica

*/
?>
<!DOCTYPE HTML>

<html lang="br" class="no-js">

<head>

<meta charset="utf-8">
<title>Sistema de Login e Senha Criptografados</title>
<link href="../style.css" rel="stylesheet" />

</head>

<body>

<div id="conteudo">

<h1>Sistema de login e senha criptografados - Verificando Informações</h1>

<div class="borda"></div>

<!-- Recebendo e gravando os dados -->
<?php

include "conexao.php";
//Praticamente faço as mesmas validações que fizemos para o cadastrado do usuário no banco de dados.
//Recebendo os dados e tratando os mesmos para inserção no banco
$recebeNomeUsuario = filter_input(INPUT_POST, 'nomeUsuario', FILTER_SANITIZE_SPECIAL_CHARS);
$confereNomeUsuario = filter_input(INPUT_POST, 'nomeUsuario', FILTER_SANITIZE_MAGIC_QUOTES);
$recebeSenha = filter_input(INPUT_POST, 'senha', FILTER_SANITIZE_SPECIAL_CHARS);

//Nesse if, faço uma conferência em relação à senha informada. Se não for informada nenhuma, retorno a mensagem para que o usuário informe algo!
if ($recebeSenha == NULL ) {
echo "<p>A senha precisa ser informada!";
echo "<p><a href='javascript:history.back();'>Voltar</a></p>";
return false;
}

//Aqui faço a segunda parte da verificação: vejo se no nome de usuário foi utilizado algum caractere especial
//Isso serve para evitar uma possível invasão sql no banco de dados, possibilitando assim a proteção e integridade dos dados
//Nesse caso, eu comparo os nomes. Se forem iguais, após passarem pelos filtros, eu inicio a criptografia. Se não forem, peço que volte à página anterior
else if ($confereNomeUsuario != $recebeNomeUsuario) {
echo "<p>Você informou o seguinte Nome de Usuário: <strong>$recebeNomeUsuario</strong> .</p>";
echo "<p>Por favor, não utilize caracteres especiais (tais como aspas simples ou duplas, assim como barras!) no campo <strong>Nome de Usuário</strong>.</p>";
echo "<p><a href='javascript:history.back();'>Volte</a> para a página anterior e tente novamente! Obrigado!</p>";
return false;

} else {

//Aqui vamos criar a função que vai criptografar os dados.
//Serão necessários criptografar apenas o endereço de e-mail e a senha informada

//Função para criptografar a senha
function criptoSenha($criptoSenha){
return sha1(md5($criptoSenha));
}

//Função para criptografar o e-mail
function criptoNomeUsuario($criptoNomeUsuario){
return sha1(md5($criptoNomeUsuario));
}

//Aqui realizo a criptografia do nome de usuário
$criptoNomeUsuario = criptoNomeUsuario(filter_input(INPUT_POST, 'nomeUsuario', FILTER_SANITIZE_MAGIC_QUOTES));

//Aqui realizo a criptografia da senha informada do usuário
$criptoSenha = criptoSenha(filter_input(INPUT_POST, 'senha', FILTER_SANITIZE_SPECIAL_CHARS));

/*
Agora vamos consultar no banco de dados para ver se existe realmente esse cadastro
Vamos verificar ambos os dados: Nome de Usuário e Senha e ainda se o campo "ATIVO" está setado como SIM
Penso eu que, ao invés de simplesmente DELETAR um USUÁRIO ou DELETAR QUALQUER INFORMAÇÃO GRAVADA NO BANCO é tiro no pé.
Vez ou outra, pode ser que seja necessária rever a informação ou a ação, e se tivermos apagado os dados, não temos muito o que fazer.
Lembre-se sempre: o usuário quer uma coisa agora, e outra daqui a 10 minutos. Então, preserve-se da melhor maneira possível.
Prefiro sempre trabalhar com a hipótese de ATIVO, EXIBIR, LIBERAR algo, para poder mudar simplesmente de SIM P/ NÃO e vice-versa, do que deletar a informação.
Posso até IMPRIMIR no botão "Deseja deletar a informação"? mas nunca, realmente nunca, apagar determinada linha ou informação do banco.
*/

$consultaInformacoes = mysql_query("SELECT * FROM usuario WHERE userlogin = '$criptoNomeUsuario' AND passlogin = '$criptoSenha' AND ativo = 'sim'") or die (mysql_error());
$verificaInformacoes = mysql_num_rows($consultaInformacoes);

//Aqui vou verificar se houve resultado positivo na pesquisa
if($verificaInformacoes == 1){

//Aqui eu vou setar os cookies para gravar os dados de acesso do usuário
setcookie ("login", $criptoNomeUsuario, (time()+60*60*24*30 ));
setcookie ("senha", $criptoSenha, (time()+60*60*24*30 ));
setcookie ("nomeUsuario", $confereNomeUsuario, (time()+60*60*24*30 ));
//header ("Location: conteudoExclusivo.php");

echo "<p>Os dados informados estão corretos!</p>
<p>Por favor, aguarde alguns segundos. Estamos processando a sua entrada!</p>
<p>Obrigado!</p>";

$conteudoExclusivo = "conteudoExclusivo.php";
echo "<meta http-equiv=\"refresh\" content=\"3;URL=".$conteudoExclusivo."\">";

} else {
echo "<p>Nome de Usuário ou Senha informada não confere. Por favor, <a href='javascript:history.back();'>volte</a> e tente novamente!</p>";
}

}

?>

</div>

</body>

</html>

Se todos os dados baterem, a gente vai acessar  o “Conteúdo Exclusivo” em si. Primeiramente, precisamos criar um arquivo que “confere”, por assim dizer, se os dados setados no cookie realmente batem com os dados cadastrados no banco.

Essa é a “grande sacada” em se criar um sistema de login e senha! Eu preciso verificar TODAS AS PÁGINAS do sistema se o usuário e senha informados realmente são cadastrados no banco de dados! Segue abaixo, o arquivo

exclusivo/acessoUsuario.php

1
2
3
4
5
6
7
8
9
10
11
12

<?php

include 'conexao.php';

$criptoNomeUsuario = $_COOKIE["login"];
$criptoSenha = $_COOKIE["senha"];
$nomeUsuario = $_COOKIE["nomeUsuario"];

$confirmacao = mysql_query("SELECT * FROM usuario WHERE userlogin = '$criptoNomeUsuario' and passlogin = '$criptoSenha' and ativo = 'sim'") or die (mysql_error());

$verificaInformacoes = mysql_num_rows($confirmacao);
?>

Esse código que faz menção àquela variável chamada

1

$msg

que temos no cabeçalho de nosso arquivo. Se eu tentar acessar o conteúdo sem ter feito o login, é ela que será apresentada ao usuário!

Sendo assim, já podemos então, ter acesso ao

exclusivo/conteudoExclusivo.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<?php
ob_start();

include 'conexao.php';
include 'acessoUsuario.php'; //Aqui verifico se os dados gravados em cookies são reais

if ( $verificaInformacoes == 1 ) {

?>
<?php
$criptoNomeUsuario = $_COOKIE["login"];
$resultado = "SELECT * FROM usuario WHERE userlogin = '$criptoNomeUsuario' AND ativo = 'sim'";
$listaCliente = mysql_query($resultado) or die (mysql_error());
while ($listagem = mysql_fetch_array($listaCliente)){
$nomeUsuario = $listagem ["nome"];
}
mysql_close();
?>
<?php
$msg = $_REQUEST["msg"];
?>
<!DOCTYPE HTML>

<html lang="br" class="no-js">

<head>

<meta charset="utf-8">
<title>Sistema de Login e Senha Criptografados</title>
<link href="../style.css" rel="stylesheet" />

</head>

<body>

<div id="conteudo">

<h1><span class="destaca"><?php echo $nomeUsuario; ?></span>, seja bem-vindo ao Conteúdo Exclusivo</h1>

<div class="borda"></div>

<div class="logout">
<p class="sairSistema"><a href="logout.php">Clique aqui</a> para sair do sistema</p>
</div>

<div class="clear"></div>

<h3>Conteúdo exclusivo 01</h3>

<p>Penatibus pellentesque tincidunt in in porta aenean adipiscing nisi porttitor? Lacus tincidunt cursus habitasse cursus adipiscing. Et porta nunc penatibus velit vel? Sociis ac porta natoque arcu integer? Odio. Ultricies purus pid dis habitasse magna etiam, sociis magna ut ut a, turpis odio habitasse et? Rhoncus proin lorem. Montes augue enim magna dignissim auctor tincidunt dapibus natoque quis dignissim mus rhoncus in lorem! Quis magna, amet, nunc vut auctor in, nec odio? Magna magnis magna, ultricies elementum porta, purus. Cras! Turpis turpis cum cras! Velit lacus eu porttitor, nec magna nisi et pellentesque hac ultrices dis, tempor velit, arcu etiam, lacus magna vut nisi mus! Ac dignissim pid? Aliquet hac, mid lacus cras ac? Dignissim pid, montes cursus porta, in.</p>

<p>Urna sit dignissim, lorem purus a arcu platea rhoncus natoque et ac scelerisque vel. Ac. Adipiscing augue! Auctor cursus ac! Ultrices, auctor sed etiam cum adipiscing adipiscing? Porttitor dignissim, sed dignissim cras? Elementum. Quis! Dignissim. Turpis proin est aliquam lundium in! Arcu elementum augue scelerisque, purus in auctor facilisis etiam aliquam enim nunc rhoncus ac. Dapibus pulvinar turpis et. Dapibus platea? Lectus turpis, integer platea auctor nisi enim augue placerat dolor nec enim rhoncus augue augue enim augue augue? Massa! Porta dapibus placerat, sed ultricies arcu tristique! Scelerisque vel aliquet egestas sit elit? Sociis a! Et sagittis scelerisque mus in porta auctor pulvinar, turpis magna, elementum mus montes augue in, odio, nascetur elementum adipiscing, placerat facilisis, nunc egestas dis.</p>

<h3>Conteúdo Exclusivo 02</h3>

<p>Platea est scelerisque, nascetur in, vel? Tortor elementum cras. Lectus tristique purus ut aliquam est aliquet augue! Augue eros scelerisque placerat placerat ut lacus porttitor dapibus elementum in rhoncus dignissim sed ut in habitasse massa, dolor pellentesque augue dictumst! In velit ridiculus sagittis, non. Dignissim amet, amet. Porta! Nisi, pulvinar tincidunt, rhoncus, dis egestas hac nunc, proin dictumst integer amet integer facilisis vel? Et aliquam purus, nascetur turpis. Augue. Augue tristique sit nec in turpis magna enim nascetur facilisis? Elementum ultricies adipiscing rhoncus elementum, ac elementum purus eros eros sit pellentesque integer augue sed et in velit ac phasellus scelerisque, tortor tempor, purus! Integer, tincidunt tristique habitasse dignissim. Mid auctor sagittis! Vel dolor integer lectus risus, ultrices, mauris, magna.</p>

<h3>Conteúdo Exclusivo 03</h3>

<p>Nec dis, penatibus, magnis ac odio dictumst ultrices elit. Habitasse eros pulvinar duis porta ac pulvinar in, porta, in ut proin integer adipiscing. Lundium phasellus tincidunt est cum, magna, porta in, ut elit, ut mattis! Sociis amet ac velit, cum pid, aenean odio dis pulvinar! Adipiscing, sed. Lundium ac, vut ac massa augue, turpis et nisi a velit cum? Porttitor dis adipiscing pulvinar augue cum? Urna augue! Porttitor, pellentesque lorem cursus proin turpis amet scelerisque duis odio vut. Tincidunt mus! Cursus purus magna, urna in ac aenean! Vut nec, non aliquet risus proin, turpis habitasse placerat enim tristique! Diam cras in? Magna? Turpis, habitasse risus habitasse dis nisi risus parturient et, natoque pid habitasse! Sociis, sed odio mid rhoncus.</p>

<div class="borda"></div>

</div>

</body>

</html>

<?php
}
else {
$urlAcesso = "index.php";
echo "
<script type='text/javascript'>
alert('Proibido o acesso por esse meio. Volte e informe os dados corretamente. Obrigado e aguarde o redirecionamento para a tela inicial!');
</script>";
echo "<meta http-equiv=\"refresh\" content=\"1;URL=".$urlAcesso."\">";
}
?>

E para finalizar essa primeira parte, segue abaixo o arquivo que vai efetuar nossa “saída”, o

exclusivo/logout.php

1
2
3
4
5
6
7
8
9

<?php

// Configura a data de expiração para uma hora

setcookie ("login", "", time() - 3600);
setcookie ("senha", "", time() - 3600, 1);
header("Location: index.php?msg=Você saiu do sistema!");

?>

É isso aí!

Na segunda parte desse tutorial, vamos dar um jeito de fazer com que nosso usuário possa recuperar, ou melhor, gerar novos dados para cadastrar no sistema.

Vamos, de maneira resumida, enviar um e-mail para o mesmo, utilizando a classe PHPMailer, para que acesse uma página de nosso sistema que possibilite, após comprovar que o e-mail realmente já se encontra em nossa base de dados, a inserção de novos dados de usário e senha para acesso.

Espero que seja de grande valia a todos e que possa ajuda e bastante em seus estudos!

Forte abraço e até a segunda parte!

OBS: Só para constar, experimente acessar a página “conteudoExclusivo.php” sem fazer o login. Se ele acessar a página, algo deu errado.

Fonte: André Buzzo - Desenvolvimento HTML5 + CSS + jQuery Post original: Sistema de Login e Senha Criptografados – Parte 01 Conteúdo originalmente criado por André Buzzo

Para lhe auxiliar na escolha da tipografia mais adequada para seu projeto, nós colocamos juntas algumas dicas e conceitos que você deveria considerar quando decidir qual tipografia deseja utilizar. E por falar nisso, veja o artigo anterior do autor sobre “tipografia no design responsivo (http://speckyboy.com/2012/11/12/typography-responsive-web-design/)”.

1º Passo – Legibilidade

O que define o conceito de “boa legibilidade”? Naturalmente, uma fonte que respeita e dê assistência, e até mesmo inspire o usuário a lê-la. Uma fonte é inútil se ele prejudica a leitura ou faz o nosso visitante exercer um esforço descomunal para tentar decifrar o que está escrito lá. Então, na hora em que for escolher uma tipografia, você primordialmente deve concentrar-se na legibilidade antes de qualquer outro aspecto!

As regras para definir a legibilidade não são difíceis: evite fontes cheias de detalhes, fique longe de cores que agridem os olhos dos seus leitores, e por aí vai. Entretanto, se o seu projeto demanda o uso de fontes especiais ou uma fonte “detalhada”, obviamente terá de utilizá-la. Porém, use com parcimônia e se puder, em locais que não afetem a leitura ou entendimento. Assim como, procure não promover um esforço absurdo para que o leitor entenda o que ali está escrito.

Talvez o melhor exemplo de legibilidade na tela é testemunhado na fonte Open Sans. Afinal, o WordPress não iria favorecê-la sem motivo, certo? Se quiser, faça um teste de legibilidade, utilizando a fonte Arial/Helvetica e a Open Sans para um mesmo texto. Veja diferença entre ambas e dê sua própria opinião sobre o assunto!

Se você estiver utilizando um monitor gigantesco, você poderá dizer que não vê problemas em utilizar a família Arial/Helvetica em seus projetos. Mas experimente ler o mesmo texto utilizando um dispositivo móvel, como um celular com tela de 480px de resolução. A Open Sans permite uma legibilidade superior em dispositivos menores.

2º passo – Cores

Cores são um dos aspectos mais discutidos no design e devem ser cuidadosamente escolhidas. E elas merecem mesmo uma atenção especial; afinal de contas, nós definimos o que enxergamos utilizando a teoria das cores.

Em se falando de tipografia, você deve escolher uma cor que não atrapalhe a leitura de seu usuário, e ao mesmo, ela precisa se destacar e complementar o design.

Agora, nesse ponto, você precisa exercitar um pouco de sua precaução: sua escolha de cor deve ser inteligente o bastante para ser notada, mas sóbria o bastante para que não passe aquele apelo de “olha, estou aqui! Me leia!”. Em outras palavras, um bom conjunto de cores vai apenas somar à sua tipografia, e deixe que a fonte e o conteúdo façam a comunicação. As cores são um aspecto importante no design, mas nunca devem ser apenas o mais importante.

3º passo – Tamanho, espaçamento e posicionamento

O tamanho do texto é algo que você não pode ficar experimentando em demasia. Claro, você pode inserir um título que seja imenso, e se estiver criando um site pessoal ou de portfólio, você pode empregar as fontes de maneira mais liberal. Entretanto, se estiver criando um site do tipo “Portal de Notícias”, seu texto precisa deve ter um tamanho de fonte legível; não imenso ou ínfimo.

Dê uma olhada no site da Denise Chandler´s (http://www.denisechandler.com/). A fonte escolhida pôde ser uma cheia de detalhes, pois obviamente se trata de um portfólio e não de um site de assistencialismo. Porém, o posicionamento e espaçamento do texto (visível se você rolar a página um pouco pra baixo) cheira a escolha inteligente. As linhas precisam ter um espaçamento adequado: se for grande demais, você corre o risco de deixa-las “longe uma das outras”; se pequena demais,  corre-se o risco de deixar um amontado de texto que dificultaria a leitura.

4º passo – Espaço para inovação

Como designers e artistas criativos que somos, precisamos ter um espaço próprio para inovar, certo? Exatamente, eu concordo, absolutamente!

Agora, obviamente, eu não posso “dizer” à você como inovar ou experimentar, mas aqui estão alguns pontos e normas que você deveria observar e ter em mente quando criar um conjunto de tipografia.

1. Tenha sempre em mente que o propósito básico da tipografia é auxiliar na leitura. Experiências tipográficas devem ser conduzidas no intuito de auxiliar a tarefa da leitura, e apenas para isso!
2. Tenha seu público-alvo em mente. Se for um site de notícias, utilize fontes que exalem profissionalismo. Se o projeto for voltado a uma danceteria, utilize uma fonte menos sisuda para a mesma.
3. Se você pensa na inovação com seriedade, tente deixar os estereótipos para trás. Um site de notícias deve obrigatoriamente ter uma fonte profissional, mas sem precisar ter uma fonte Old Text para o logo ou um Times New Roman para o texto principal.
4. Tenha certeza que as cores selecionadas façam um conjunto harmonioso com o design em si, mas que não atrapalhe a boa leitura de seu conteúdo! Você deve escolher suas cores baseando-se no design principal, e nunca o contrário.
5. Nem preciso dizer, mas vamos lá: fique longe da Comic Sans. Ah, um notinha sobre outras fontes que devem ser evitadas estão aqui: http://www.cracked.com/funny-5647-fonts/

5º passo – A mensagem

Qualquer coisa associada com criatividade deve transmitir uma mensagem. Uma novela transmite a ideia do autor para seus telespectadores, uma pintura expressa os sentimentos do pintor; até mesmo um panfleto ou um pôster contém uma informação para seus leitores. Naturalmente, web design não foge disso.

Agora, a fim de fazer suas decisões tipográficas se misturar bem com a mensagem principal do site, você deve se questionar repetidamente: “qual é o principal objetivo do site e qual a mensagem que ele deve transmitir?”.  Se estiver criando um site para levantar fundos para alguma ação social, a tipografia deve ser impactante e passar essa ideia; não deve se comportar como um site de esportes, por exemplo.

Deixe-nos considerar, por exemplo, o site The Peach Design. Desde que o website seja de um artista criativo que pretende exibir projetos web, a tipografia deveria passar o aspecto criativo de uma maneira que represente essa qualidade. Em outras palavras, utilizar uma fonte “mundana” ou muito engessada é uma má escolha aqui.

A legenda enorme retrata a criatividade e visão de design do artista; assim, quando visitar o site, você descobre que está lidando com uma pessoa disposta a oferecer-lhe sites e ilustrações, e a opção de fontes que vão abaixo dos elogios da passam essa impressão também.

Conclusão

Chegamos ao final desse artigo que trouxe 5 passos para melhorar suas escolhas tipográficas. Espero que lhe ajude bastante. Para finalizar, eu gostaria de dizer que, independentemente da escolha tipográfica que fizer, tenha certeza de que ela se adequará ao seu projeto e que respeite o seu público-alvo. Os aspectos estéticos de web design são melhores retratados em seleções de tipografia e, portanto, você nunca deve esquecê-lo.

Quais são seus pensamentos sobre tipografia? Por favor, compartilhe-os conosco nos comentários abaixo!

Traduzido do original: Worried About Typography? Check Out This Five-Step Guide!

Fonte: André Buzzo - Desenvolvimento HTML5 + CSS + jQuery Post original: Preocupado com Tipografia? Veja esse pequeno guia em 5 passos! Conteúdo originalmente criado por André Buzzo

Seu questionamento me fez pensar que existem diversos sites que oferecem o mesmo serviço; bancas de jornal vendem discos com templates prontos em CSS, prontos para serem implementados (eu mesmo já comprei vários discos desses para estudo!); “profissionais” prostituem o mercado vendendo projetos a preços ridículos; até o Governo, por meio do SEBRAE, dita que os comércios podem e devem estar na internet (nisso eu concordo plenamente!) e que podem ter seu site de maneira gratuita por intermédio dos mesmos (nisso eu discordo totalmente, porém, antes de dizer isso ou aquilo, vou confirmar até onde o esquema é gratuito mesmo!).

Dessa maneira, eu me peguei pensando: “OK, se um cliente meu acabar me confrontando, em uma negociação, sobre os serviços oferecidos gratuitamente pela Wix, o que eu posso argumentar para provar que meus serviços atendem de melhor maneira suas necessidades, sem eu ao menos ter uma noção do que o Wix oferece”?

Fui atrás de fazer um cadastro e tentar mexer na plataforma oferecida, e minhas impressões seguem abaixo, assim como minha análise sobre como argumentar com o cliente sobre o serviço em questão, e para não ficar cansativo e muito longo o artigo, esse, como de costume, será dividido em algumas partes. Vamos lá então:

1º – Alguém está se dando bem, teoricamente falando.

Como não sabia mexer com o tal do Wix, fui logo digitando [www].wix.[com].[br] e eis que caí em uma página. Confesso que comecei a navegar no site, e por um breve momento, fiquei contente em ver que existe lá um “Plano Básico” para que o cliente assine. Aí então eu percebi que na realidade, não é a Wix que oferece serviços gratuitos e sim, uma agência aqui do Brasil que tem o mesmo nome. Até onde isso vai dar enrosco, o problema é deles. Mas o que eles devem faturar com isso é brincadeira!

Minha análise: “Primeiramente, eu estou vindo até o Sr. e não o Sr. indo até a minha empresa ou pessoa. Meu atendimento é personalizado e pessoal”.

2º – O Wix é um concorrente e tanto. Admita.

Ao acessar a página correta do sistema, fazer um cadastro bem simples, onde se pede apenas e-mail e uma senha, nem confirmação, até essa etapa é solicitada, é um sinal de que “Quero te ganhar o mais rápido possível” e olha, confesso que é algo bem interessante.

Você como usuário, conseguir chegar ao seu objetivo em três ou quatro passos é algo glorioso. Ainda mais quando se trata de assunto sobre tecnologia, onde para a maior parte dos seres humanos isso é uma tarefa muito intimidadora, é digno de se tirar o chapéu. Serve, inclusive, como estudo para que nós possamos melhorar nossa usabilidade em futuros projetos.

Se fosse ruim eu falaria. Mas não é; portanto merece respeito e comentários positivos. Infelizmente.

Ele oferece uma gama bem grande de “categorias” para a criação de uma página, que vai desde um  eCommerce (modalidade paga) até sites empresariais, para prestadores de serviços, músicos, educadores, webdesigners (sim, webdesigner que utiliza ferramenta gratuita para fazer um site é de lascar!), para varejo, moda, dentre outras. E já oferecem, de acordo com a categoria selecionada, vários templates prontos para que escolha um e comece a editá-lo a seu gosto. E é exatamente aí que aparece um excelente, mas um excelente gancho para argumentar com seu cliente.

Minha análise: “Se meu cliente falar horrores de coisas boas sobre a ferramenta, eu vou concordar. Sim, ela merece elogios realmente! Porém”…

3º – Obstáculo 01 – Os templates estão todos em inglês

Embora todo o site esteja traduzido em português (incluindo-se aí os menus para a edição!), tudo no site oferecido está em inglês. Ou seu cliente entende a língua ou vai apanhar para editar textos, nomes de links, títulos, dentre outras informações previamente inseridas no template.

Será que nosso cliente sabe que “TEAM” é uma página sobre a EQUIPE DE TRABALHO de sua empresa? Pode até ser que o mesmo deduza, pois na página existem informações sobre algumas pessoas, que podemos realmente, chegar À conclusão de que são os funcionários dele.

Minha análise: “Todos os textos do site estão em inglês, assim como as descrições de links, fotos, títulos e demais informações que existem no template oferecido. O senhor conhece a língua inglesa para editar cada um deles? E mesmo que não seja necessário entender o inglês, o senhor sabe que determinada área está apta a receber determinado texto ou descrição”?

4º – Obstáculo 02 – Há de se ter um mediano conhecimento em desenvolvimento web

Sim, se faz necessário ter certo conhecimento. Experimentando editar um dos templates oferecidos (Categoria Consultoria e Treinamento; Template: Strategic Consulting), me deparei com as seguintes informações:

Seta Vermelha: é nela que eu altero o nome da página e por pura magia, o link;
Seta Magenta: aí eu mudo o nome do arquivo HTML. Se o cliente não possui conhecimento da linguagem, vai titubear na hora de alterar ou não.
Seta Azul: é nesse ícone que eu abro a janela da direita. Confesso: apanhei para descobrir que aí era o lugar onde eu deveria entrar para alterar de HOME para PÁGINA INICIAL no menu.
Seta Laranja: WTF é Cross Fade? Nós que trabalhamos com web sabemos. E o cliente?

Além de todas as informações acima listadas (existem inúmeras outras não mencionadas, mas que podem ser observadas na imagem acima) existe a confusão visual e textual da mesma.  Você entra em Páginas e quando descobre que precisa clicar no ícone assinalado com a Seta Azul, abre uma sub-aba com o título Configurações e SEO, que talvez o cliente também não domine. E além do mais, logo que clicamos em páginas, todas são elencadas em inglês.

O texto explicativo em português e os menus, em inglês…

Minha análise: “O painel de configuração não é tão intuitivo assim. O senhor precisa de um conhecimento mediano em linguagem de programação para conseguir fazer as alterações que necessita. E não quero colocar medo ou dizer que o site não funciona. Porém, devo alertar que pode se confundir e causar uma má impressão ao seu cliente/usuário”.

5º – Obstáculo 03 – CSS – “Vou alterar tudo? Como assim”?

Ainda batendo na tecla de que nosso cliente precisaria de um bom conhecimento em linguagem de marcação, ele também necessita entender como funcionam as folhas de estilo. Por exemplo: ao clicar no “slideshow” para fazer a configuração do mesmo, podemos chegar à situação apresentada pela imagem abaixo:

Dentre inúmeras possibilidades que a ferramenta oferece uma em particular me chamou a atenção: a alteração do CSS do site. E o que mais me intrigou foi tal mensagem apresentada quando selecionamos o “Editar Estilo” que nos é apresentado:

“NOTE: ALTERAÇÕES REALIZADAS AQUI AFETARÃO TODOS OS ELEMENTOS DO SITE QUE USEM ESSE ESTILO. QUER SABER MAIS”?

Já até sabemos a resposta não é? É claro que não!

Vou alterar tudo o que?  O que são elementos? O que é estilo? O que vai ser alterado? Meu Deus, eu vou ter que fazer tudo de novo?

Se não era intenção causar tal tempestade de questionamentos na cabeça do cliente/usuário, não oferecesse tal possibilidade.

É isso aí meu amigo e minha amiga. Por hoje é só.

Na próxima parte, irei abordar alguns outros aspectos da ferramenta, e o que podemos fazer para burlar tal oferta na web e oferecermos um serviço digno de nosso cliente. Se ele procura preço, que vá de Wix. Se procurar qualidade, que venha atrás do seu nome.

Forte abraço e até a próxima. Fiquem com Deus!

Fonte: André Buzzo - Desenvolvimento HTML5 + CSS + jQuery Post original: Desenvolvedores versus Wix – Uma luta injusta? Conteúdo originalmente criado por André Buzzo

Fala pessoas!

Ontem eu pude vivenciar a minha primeira experiência como palestrante, e achei algo muito legal! Foi interessante ter a oportunidade de transmitir o pouco que conheço para pessoas que eu não conheço.

Conversamos sobre “Colaborativismo & Networking”, e pude passar para as quase 40 pessoas que se encontravam na sala um pouco da minha atuação em Fóruns e um pouco do que vivo aqui no site.

Quis mostrar a todos que transmitir conhecimento é algo muito legal, é bom e não nos custa nada, além de um pouco de nosso tempo. Pude demonstrar que ajudando outras pessoas podemos crescer, como profissionais e seres humanos.

Foi a oportunidade de compartilhar um pouco dos “causos” que acontecem na KR Comunicação, assim como no site. Pedidos absurdos, dúvidas coerentes, pedidos desafiadores e muito, mas muito bom humor nos exemplos.

Quero agradecer a todos que lá compareceram e aos que entraram em contato pelo Facebook querendo participar (o evento foi fechado para os alunos do Centro Universitário), e queria agradecer e muito, à minha ex-professora Adriana Morais e ao Ceunsp pela oportunidade a mim concedida!

Queria agradecer também aos professores Carlos e Clementino, que me deram um “empurrãozinho”, dizendo que eu precisaria urgentemente fazer uma Pós-Graduação e iniciar uma vida academia, pois me disseram que eu “levo jeito para dar aulas”.

Ontem, dia 08/10/2012, foi uma noite muito especial. Estive na companhia também de uma das pessoas mais importantes em minha vida, minha esposa Karina, me oferecendo suporte e prestando atenção no que eu falava. E segundo ela, conseguiu aprender, pois achava que eu só ia falar sobre programação e que não entenderia nada!

Enfim. Um muito obrigado a todos que confiaram em minha capacidade para chegar até onde cheguei. E espero que esse seja apenas o início de uma nova jornada, repleta de desafios e de conquistas. E de algumas derrotas também, que sei que “faz parte” do processo.

O material, assim como as fotos podem ser vistos no site da KR Comunicação Integrada, no endereço www.krcomunicacao.com.br/ceunsp

Fonte: André Buzzo - Desenvolvimento HTML5 + CSS + jQuery Post original: Palestra – Colaborativismo & NetWorking – Ceunsp Conteúdo originalmente criado por André Buzzo

Vou tentar explicar o porquê isso acontece, e gostaria que ninguém se sentisse ofendido ou chateado com minhas palavras, que na realidade, não visam maltratar ou até mesmo, deixar as pessoas com um “pé atrás” na hora de postar suas dúvidas!

Podemos usar como gancho, para esse artigo, o título e a última palavra da frase acima:

COLABORATIVISMO e DÚVIDAS!

A gente aprende, no decorrer do tempo (Tenho exatas 1085 mensagens no Fórum!), que muitas pessoas postam suas dúvidas, enquanto outras, pedem soluções para o seus problemas. Isso mesmo. Pedem códigos, pedem sistemas prontos, pedem para alguém desenvolva um trabalho para ela. Pior ainda, quando dizem “Pelo amor de Deus, preciso entregar esse sistema em uma semana, e não fiz nada do site! Alguém ajuuuuuuuuuuuuuuuda…”

Sinto muito, mas não posso me comprometer a ajudar, ou salvar a pele de alguém descomprometido…

Se formos elencar as razões, para que determinados tópicos sejam respondidos, ou não, o artigo se tornaria uma revista. Portanto, vamos aos principais:

1º – Participamos do Fórum por puro prazer. Se alguém acha que estamos ganhando algo, financeiramente falando, estão redondamente enganados. Ganhamos  sim, conhecimento e aprendizado. E de boa… não há dinheiro que pague isso! Ajudar, independentemente do que seja, é sempre gratificante e prazeroso.

2º – Nós, moderadores e administradores do site/fórum, trabalhamos o dia todo. As vezes, é o dia todo literalmente. Eu fico das 7h da manhã às 22h, quase todo dia na frente do computador, desenvolvendo website, atualizando, criando algum sistema que facilite a minha vida, e nas horinhas vagas, respondo no Fórum e em outras oportunidades, crio Vídeo Aulas para os sites. Então, outra situação recorrente, é a “Desculpe pela demora na resposta (olha, sem querer ser grosso, mas pedir desculpa pra que? Quem está com dúvida e acessou o Fórum foi você, e não eu! rs), mas é que eu trabalho o dia todo e não tenho tempo de ficar olhando o Fórum” … Trabalha o dia todo? Bem-vindo ao clube!

3º – Fórum é lugar de se resolverem dúvidas, e não para pedir códigos/sistemas prontos

Quanto ao 1º item, já que COLABORAMOS com os usuários, sentimos (pelo menos eu! rs) um enorme prazer em poder resolver problemas que nos trazem. Mas problemas que sejam dignos de resposta, tais como:

“Se eu colocar um background-color e um background, terei o mesmo resultado. Qual a diferença entre eles?” … isso sim, ao meu ver, é uma questão pertinente, que atinge a idéia do Fórum, e me sinto na “obrigação” de postar uma mensagem e esclarecer a dúvida.

Diferente de “Quero colocar determinada parte de um site no meu site, e não sei como fazer!” … eu costumo, como sempre, ver o link que é postado, entrar no código fonte, e ver no código do mesmo se há como ser “copiado/estudado” tal aplicativo/programação e digo ao usuário… “Compadre, pegue o código fonte, vá no CSS e veja que lá, tem tudo o que você precisa!” … Normalmente, nem retorno esse usuário dá, ou, em alguns casos, quando o há, é da seguinte maneira…”Não conheço nada de código. Tem como montar ele pra mim?”

Sinceramente, se vai partir para esse lado, eu já penso em duas coisas: Primeiramente, “que cara folgado”… e em segundo, “mude de profissão” …

Eu também não sabia nada. Mas corri atrás e aprendi. E hoje, procuro colaborar com todos que acessam o Fórum e postam suas dúvidas. Mas, nos altos das minhas 1085 mensagens, a gente percebe quem quer as coisas de mão beijada e quem procura fazer, tenta, erra, tenta e erra novamente, e acaba por pedir ajuda, deixando o seu código aberto para quem quiser visualizá-lo, estudá-lo ou aplicá-lo, o tenha em mãos.

Isso sim é COLABORATIVO. Isso sim, é pertencer à uma comunidade que não visa lucros, e sim, a troca de experiência e sabedoria, que nos trará lucros!

A gente consegue sacar quando alguém tem dúvidas, assim como eu mesmo, que comecei a postar dúvidas no Fórum, e recebi ajuda de muitas pessoas…e resolvi fazer o mesmo, até o dia que abri meu e-mail e recebi um convite do David CHC para ser moderador do Fórum, pois eu estava ajudando vários usuários! Fiquei muito feliz pela oportunidade, e imensamente agradecido!

Da mesma maneira, conseguimos sacar aqueles que não querem nada com nada, a não ser jogar um pedido, e quem sabe, alguma boa alma responda e entregue tudo de mão beijada ao próximo. Que esse, com certeza, nem um “Obrigado” vai voltar e postar no Fórum…

Fonte: André Buzzo - Desenvolvimento HTML5 + CSS + jQuery Post original: Colaborativismo em fóruns e sites Conteúdo originalmente criado por André Buzzo

Estou envolvido em diversos projetos até o final de setembro, e o tempo está realmente curto para a criação de vídeo aulas e até mesmo para escrever alguma coisa para você ler.

Mas vou tentar atender ao máximo de pessoas com um único artigo, voltado a dúvidas recorrentes dos usuários do site. Constantemente eu recebo e-mails de pessoas que, ao ter o primeiro contato com “web”, se apaixonam. E assim como todo amor, após o “se apaixonar”, vem o sentimento de “estou perdido e o que eu faço?”. Em matéria “web” posso até aconselhar; em matéria de “coração”, já é outra história!

O último, quem me enviou foi o Sandro Berto, e assim como vários outros, normalmente, as mensagens estão mais ou menos assim:

“André, tudo bem? Sou estudante de Análise de Sistemas/Redes/Jornalismo/ Publicidade  e Propaganda/Desenvolvimento de Softwares/Sistemas para internet, e tive um pequeno contato com webdesign e me apaixonei!

Estudamos um pouco de HTML e CSS, demos uma passada em PHP e agora estou totalmente perdido, pois quero aprender a montar layouts e não sei quais ferramentas utilizar. Aprendi de maneira bem rápida Dreamweaver, Fireworks, Photoshop e Flash, até mexi com WordPress/Joomla e agora eu não sei o que fazer para criar layouts.

Poderia dizer qual ferramenta eu devo usar para criar layouts?”.

Se eu dissesse para você que a ferramenta é o menos importante, você acreditaria? Então pode acreditar. Não importa se você vai usar o Gimp, o Fireworks ou o Photoshop; você precisa mesmo são de outras ferramentas, que listo abaixo, em grau de importância, sob MEU PONTO DE VISTA ok?

Teoria das Cores

Basicamente, você irá trabalhar com um leque grande cores. Não necessariamente em um único projeto, e sim, em diversos.

Ter uma boa percepção de cores e suas melhores combinações se fazem cruciais para o desenvolvimento de um bom layout ou design. Não podemos sobrecarregar o usuário final de informações que as cores fornecem e sim, tornar agradável a permanência do mesmo dentro de nosso site.

Ter um bom discernimento sobre quais cores e seus mais variados tons poderão/deverão ser utilizados, em conjunto com uma identidade visual já pronta de seu cliente, tornam o seu trabalho um pouco mais fácil; agradar o seu cliente, uma tarefa mais agradável e menos penosa; pensar no usuário final é o grande lance para um layout matador.

Veja algumas informações sobre o Significado das Cores

Formas Geométricas

Assim como as cores, as formas geométricas também passam “emoções” à quem as observa.

Um círculo, ou elipse, por exemplo, pode dar a impressão de que algo é infinito. Assim como um quadrado, algo que seja conservador. Não saber o que as formas passam para quem as vê, às vezes complica um pouco o trabalho ou, na pior das hipóteses, afasta seu usuário daquilo que você tanto gostaria que ele apreciasse.

A boa utilização de espaços em branco, para dar “respiro” aos olhos do usuário, são primordiais, e um dos erros mais comumente encontrados em layouts. Você precisa aprender que aquele espaço que sobrou no seu layout, pode sim, ser interessante ficar em branco.

Controle sua vontade de preencher todo o layout com informações; sejam elas por meio de formas, cores, vetores ou desenhos. Espaço em branco é seu amigo. E não inimigo.

Algumas informações podem ser obtidas nos seguintes endereços:

http://entreclics.blogspot.com.br/2010/03/o-significado-das-figuras-geometricas.html
http://entreclics.blogspot.com.br/2012/05/significado-de-formas-geometricas.html
http://abrasil-designgrafico.blogspot.com.br/2010/02/significado-das-formas-geometricas.html

Usabilidade

Esse é o ponto mais importante na hora de criar um projeto web. Não basta criarmos um layout pensado em cores, em formas, em apresentação, se não pensarmos em quem vai utilizá-lo. Nada é mais importante do que o usuário final. Não é a opinião do seu contratante que deve pesar mais na hora do desenvolvimento, muito menos seu gosto pessoal; na verdade, deve-se pensar em como seu usuário final vai interagir com seu produto. Aqui não é o visual que vai mandar mais. E sim, se ele conseguiu o não chegar onde queria!

Costumo dizer que tenho “bronca de publicitários”, pois eles sabem muito, mas muito bem, em como VENDER produtos/serviços/ideias. Mas quando se trata de site, o trabalho vai um pouco além do visual. Ele vai de encontro à maneira como uma pessoa vai navegar, e ainda, não existe navegação automática com os olhos. Não basta apenas olhar; o internauta precisa encontrar a informação que deseja. E para isso, a beleza não é fator primordial. Primordial é ser funcional.

Trabalhar em conjunto com um profissional de marketing é sempre excelente, mas saber opinar e dizer que “meu amigo, isso não deveria ser feito assim”, e ter argumentos para expor, e ele estar aberto a esse tipo de comentário, é algo praticamente utópico, mas não é impossível quando conversamos de profissional para profissional!

Respeito sim, os profissionais de marketing, mas os usuários seriam mais felizes se os mesmos apenas nos fornecessem a ideia visual e deixasse o trabalho do site para um profissional especializado em webdesign. Que isso fique bem claro. Trabalhos profissionais envolvendo profissionais.

Acessibilidade

No conjunto de uma obra, a acessibilidade é tão ou mais importante que a usabilidade em si.

Sua base prega que um site deve ser acessível por qualquer pessoa, com qualquer tipo de dificuldade, seja motora, seja visual ou auditiva, utilizando-se qualquer aparelho/dispositivo, se formos mais além. Essas pessoas não devem, em hipótese nenhuma, serem privadas de acessar um conteúdo pelo simples fato do “profissional” não ter pensado nelas antes de criar o layout.

Daí eu posso dizer que provém minha bronca com o Flash; ele é um modo de “segregar” usuários.

Precisamos pensar, na hora da criação de um layout, onde cada coisa será alocada e se aquela área escolhida é realmente a melhor no caso de um acesso por um leitor de tela. O botão “página inicial” está facilmente colocado em uma posição onde, independentemente do dispositivo utilizado para acessar o site, facilita o acesso de todos? Se eu uso o mouse, ou o “tab” do teclado, ou meu smartphone touchscreen eu consigo chegar onde quero? Seu javascript der um “pau” no navegador, eu consigo acessar as informações?

Nada melhor do que estar na pele da pessoa: baixe um leitor de tela, acesse seu site preferido, feche os olhos e tente navegar para ver se consegue. Ou se é tarefa fácil. E não pense você que pessoas com deficiências estão exclusas da internet. Você terá uma grande surpresa. E infelizmente, ela não será nem um pouco agradável.

Eu costumo dizer que nosso trabalho como webdesigners vai além da “página inicial” ou do layout matador que pretendemos oferecer ao nosso cliente. Precisamos pensar em como as pessoas vão utilizá-los, e para isso, não há ferramenta melhor do que um bom planejamento e uma boa base de conhecimento teórico para realizar a tarefa.

Noções de Design

Existem diversas regras de design que se fazem necessárias na hora da criação de um layout. E elas não são poucas, e tampouco, devem ser deixadas de lado.

Regras como Proximidade, Alinhamento, dentre outras, são fundamentais para mostrar que você é profissional e sabe o que está fazendo. Então, não basta você ter um programa excelente de edição de imagens para criar seus projetos se você não sabe a mensagem que está passando ao seu usuário.

Combinação de fontes, seus tamanhos e estilos, fazem parte de um bom design. Saber que a fonte serifada é melhor do que uma sem serifa é fácil de aplicar em um projeto web. Podemos quebrar a regra e utilizar uma fonte com serifa em uma página web? Sim, mas temos que, antes de quebrar uma regra, conhecê-la a fundo!

O layout proposto ficou harmonioso com a fonte escolhida? Se sim, por quê? Se não, por quê também? O tamanho e grafia “conversam” com os outros elementos desse projeto? A cor escolhida, realmente, passa mensagem que deve ser transmitida?

E o espaço em branco, está sendo respeitado?

Coloque-se no lugar do usuário: você aguentaria navegar em um site que oferece um fundo verde-limão onde a fonte está com cor branca, para FACILITAR a leitura?

CSS

Toda a estruturação “estética” de um site DEVE passar pelo CSS. Sem ele, seu site pode ficar muito pesado.

E ainda, se você não tem nenhum programa legal para editar imagens, saiba que, dentre as formas mais básicas, você poderia utilizar apenas o CSS para criar o design do seu site.

Existem suas limitações? Sim, é claro que existem. Assim como existem limitações também para os editores de imagens hoje disponíveis no mercado.

Porém, na era do CSS3, nós podemos utilizar degrades, podemos utilizar lineares, radiais, podemos criar formas geométricas, até gráficos conseguimos utilizando a programação. Precisamos apenas aprender e entender a lógica da programação para tirarmos 100% de proveito do que nos é oferecido.

Assim como eu, você pode não ser um exímio desenhista. No meu caso, sou péssimo mesmo. Não consigo usar um compasso para fazer um círculo perfeito. Você não sabe o que é um compasso? Veja nesse link: http://pt.wikipedia.org/wiki/Compasso_(geometria)

Criatividade

Claro que é um quesito indispensável e sem mais comentários. Acho que ele já se define só por seu nome. A única dificuldade é que não podemos “cobrar” a criatividade de ninguém. Uns a possuem, outros não. Simples assim.

Conclusão

Dessa maneira, não importa qual ferramenta você deseja um “direcionamento”. Ela nada poderá fazer se você não souber, antecipadamente, como a utilizar.

Abrir um novo documento, saber onde está sua paleta de cores, como criar um “quadrado”, uma elipse, não significa nada. Você precisa saber qual mensagem deseja passar, utilizando-se das cores corretas, com as formas geométricas condizentes, bem dispostas no plano de trabalho, assessorando seu usuário a atingir seu objetivo, sem privá-lo da informação só porque você acha que ele é uma besta por insistir em usar o INTERNET EXPLORER é um desafio que muitos acham “simples” e que qualquer “profissional” (entenda-se “SOBRINHO!”) está apto a exercer.

E não é bem por aí. Nunca foi e nunca será. Reflita sobre isso. E durma com esse barulho, como diria meu amigo Edson Brunhara.

Fonte: André Buzzo - Desenvolvimento HTML5 + CSS + jQuery Post original: Ferramentas para a criação de layouts Conteúdo originalmente criado por André Buzzo