DICAS WEB MAIS: junho 2016

segunda-feira, 27 de junho de 2016

Primeiro e ultimo elemento com css

Hoje vou ensinar uma maneira de acessar o primeiro e o último elemento de uma lista em html, isso é muito importante, quando precisamos aplicar uma configuração específica a estes elementos, por exemplo, sempre iniciar o primeiro link de um menu com uma cor de destaque, ou retirar a margem do último elemento, você pode precisar em diversas situações.

Bom o primeiro elemento é acessado por first-child e o ultimo por last-child

vamos criar uma lista em html onde vamos alterar a cor do primeiro e último elemento

<ul>
<li> parte 1 </li>
<li> parte 2 </li>
<li> parte 3 </li>
<li> parte 4 </li>
<li> parte 5 </li>
<li> parte 6 </li>
</ul>

No css eu acesso os primeiro e ultimo elemento

<style>
ul {border:1px #ccc solid; padding:20px; list-style-type:none;}
ul li:first-child {background-color:#c30;}
ul li:last-child {background-color:#f00;}
ul li {background-color:#ddd; padding:5px; font-size:20px; font-weight:bold; margin-bottom:2px;}
</style>

Sugiro que você continue acompanhando o blog, pois teremos varios tutoriais e eu pretendo utilizar este exemplo em um código que vai nos ajudar bastante, lembre do first-child e last-child.

Desta vez não vou deixar um link para download do código, mas deixo abaixo o código completo, para você testar aí.

abs

<style>
ul {border:1px #ccc solid; padding:20px; list-style-type:none;}
ul li:first-child {background-color:#c30;}
ul li:last-child {background-color:#f00;}
ul li {background-color:#ddd; padding:5px; font-size:20px; font-weight:bold; margin-bottom:2px;}
</style>
<ul>
<li> parte 1 </li>
<li> parte 2 </li>
<li> parte 3 </li>
<li> parte 4 </li>
<li> parte 5 </li>
<li> parte 6 </li>
</ul>

sábado, 25 de junho de 2016

Posicionar objetos com jquery - drag and drop

Olá, hoje postarei um código com jquery e php para posiciobar objetos com drag and drop do jquery ui, neste exemplo podemos ver os elementos subindo ou descendo e atualizando em tempo real no nosso banco de dados, assim se o usuario tiver algum problema na hora com a internet ou o pc desligar, rss tudo é possível, mas ao menos terá as posições dos objetos salvas.
Podemos imaginar inúmeras possibilidades de utilizarmos esta aplicação, um menu personalizado, uma galeria de imagens, um jogo de quebra cabeça, um programa online de criação de sites.
Para nosso exemplo vou criar uma ul, com as letras a,b e c, nesta ordem, mas podemos mudar esta posição apenas clicando e arrastando as letras,
Para começar vamos chamar o jquery e o jquery ui

Os arquivos do jquery ui odem ser baixados na própria página do jquery ui: https://jqueryui.com/

Bom precisamos criar uma tabela no banco de dados com a seguinte estrutura:

CREATE TABLE posicoes (
id int(11) NOT NULL auto_increment,
nome varchar(200) NOT NULL default '',
posicao int(2) NOT NULL default '0',
PRIMARY KEY (id)
) TYPE=MyISAM;

Vamos inserir alguns valores:

INSERT INTO posicoes VALUES (5, 'a', 1);
INSERT INTO posicoes VALUES (6, 'b', 2);
INSERT INTO posicoes VALUES (7, 'c', 3);

Agora dentro da ul vamos listar todos os campos, detalhe, teremos sempre as posições normais dos objetos no html, portanto 1,2,3,4,5,6 ... não importando como esteja no banco
Por isso criamos um laço dentro do nosso código que irá impriir as devidas poriçoes dos objetos na página:

<?php
$busca = mysql_query("select * from posicoes order by posicao asc");
while($linha = mysql_fetch_array($busca)) {
$array[] = $linha['nome'];
}
?>
<?php
for ($i=0; $i<=count($array); $i++) {
if ($array[$i] != "") {
?>
<li id="<?php echo $i; ?>"> <a href="<?php echo $array[$i]; ?>" id="<?php echo $array[$i]; ?>" class="drag"> <?php echo $array[$i]; ?> </a> </li>
<?php } } ?>
</ul>

Aqui está o código jquery que vai enviar o nome e a posição do objeto:

$(document).ready(function() {

$(".drag").css("cursor", "move");
$(".drag").draggable();

$("li").droppable({
drop: function (evento, ui) {
var nome = ui.draggable.attr("href");
var posicao = $(this).attr("id");
$.get("adicionar.php",{nome:nome, posicao:posicao}, function (resposta) {
$("#retorno").html(resposta);
location.href = "index.php";
});

}
});
});

Você pode incluir um elemento para receber algum aviso, tipo "posições atualizadas", opcional.
Perceba que montamos um array com os nomes da tabela posições, e a partir dele listamos os objetos na página, isso poruque precisamos pegar os objetos em ordem pelo campo posicao.
Vamos partir para a parte mais complicada, nossa página php que vai atualizar as posições no banco
Primeiro recebemos o nome do objeto e a posição do objeto na página

$chave = $_GET['nome'];
$posicao = $_GET['posicao'];

Vamos montar novamente o array com os nomes ou melhor letras:

$busca = mysql_query("select nome from posicoes");
while($linha = mysql_fetch_array($busca)) {
$array[] = $linha['nome'];
}

Para evitar erros inclua também este código:

Lembre-se desye código em aplicações, é muito útil
$key = array_search($chave, $array);
if($key!==false){
unset($array[$key]);
}
Para evitar possíveis elementos vazios no seu array

Agora vamos para a parte interessante do nosso código

array_splice($array,$posicao,0,array($chave));

Esta função array_slice faz uma substituição nas posições do arra y, ainda bem que ela existe rsss, pois caso contrário iriamos quebrar nossa cabeça para criar um algoritmo bemmmmmmmm extenso.
bom no caso vamos substituimos na posição enviada pela nova posição.
bom para concluir só falta atualizar no banco, neste caso vamos utilizar um laço, pois vamos redefinir as posições, portanto percorreremos todo o array com esta posiçoes que foram atualizadas:

for ($i=0; $i<=count($array);$i++) {

if ($array[$i] != "") {
$num = $i;
$num++;

$atualizar = mysql_query("update posicoes set nome = '".utf8_decode($array[$i])."' where posicao = '".$num."'") or die(mysql_error());
}
}

Lembra do campo opcional? aquele que vai mostrar as informações? no meu caso vou colocar uma mensagem dizendo que as informações foram atualizadas:

if ($atualizar) {
echo utf8_encode("Posições atualizadas");
} else {
echo "Falha ao atulizar";
}

Você chegou até aqui e não entendeu NADA? não se preocupe vou deixar o exemplo para download

E se você precisa de algum código no seu site ou alguma nova funcionalidade fale comigo meu email joceilton.g@gmail.com

Para baixar o seu script CLIQUE AQUI

quarta-feira, 22 de junho de 2016

Baixar MP3 de vídeos do youtube com Jquery

Hoje venho apresentar a vocês um ótima API para baixar vídeos do yotube, utilizaremos jquery para adaptar nosso código e dar uma boa expereiência aos usuários, se trata de baixar o vídeo do youtube em MP3, apenas o aúdio, nosso código apenas vai trabalhar a montagem do link para que a API faça exatamente o download que o usuario indicou.

Teremos um campo de texto para o usuario inserir a url do vídeo, também receberemos um json da API para mostrar informações do vídeo.

Este será um exemplo simples, mas funcional, espero qaue acompanhem os posts deste blog, pois melhorarei este código para exibir a imagem do vídeo e algumas implementações para baixar vídeos vindos de outros aplicativos, como o app do youtube entre outros.

Vamos criar um campo de texto:

<input type="text" name="url" id="url"> <input type="button" name="download" id="download" value="Baixar">

Agora vamos a parte interessante:

A Api que utilizaremos está neste endereço: https://www.youtubeinmp3.com/api/

Sinta-se a vontade para ler e estudar a documentação, claro nada demais, apenas uma breve explicação, a parte que interessa é esta:

HTML:
<a href='//www.youtubeinmp3.com/fetch/?video=https://www.youtube.com/watch?v=i62Zjga8JOM' style='text-decoration:none;color:#03a730;'>

<img src='//www.youtubeinmp3.com/icon/download.png' style='vertical-align:middle;'> <strong>Download MP3</strong>

</a>

Utilizaremos para criar um link de download do vídeo

E esta parte:

JSON

You can also receive the data in JSON by setting the "format" parameter to "JSON".

www.youtubeinmp3.com/fetch/?format=JSON&video=http://www.youtube.com/watch?v=i62Zjga8JOM

Example Output

{

"title":"Happy Forever Alone Day (Forever Alone Song)",

"length":"125",

"link":"http:\/\/youtubeinmp3.com\/download\/get\/?i=k1MakL%2FYlh6KUtEHqyQlg9XwtUUWO"

}

Utilizizaremos para solicitar um arquivo Json contendo as informações do vídeo.

Para isso utilizaremos uma função do Jqauery getJSON$.getJSON("https://www.youtubeinmp3.com/fetch/?format=JSON&video="+link, function(resposta) {
a variável link deve conter o que o usuário informou como sendo o link do vídeo
Teremos um espaço para exibir estas informações na página, eu optei por uma listaE no rewtorno teremos:

$(".dados").html(
"<li> Titulo:"+resposta.title +"</li>" +
"<li> Duração:"+resposta.length +"</li>" +
"<li> Link:"+resposta.link +"</li>"
);

Para gerar o link de download:

$(".dwn").attr("href","//www.youtubeinmp3.com/fetch/?video="+link);

Vou deixar o código completo:

<!DOCTYPE html>
<head>
<meta charset="utf8">
<title> baixar youtube </title>
<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$(".dwn").hide();
$("#download").click(function () {
var link = $("#url").val();
if (link != "") {
$.getJSON("https://www.youtubeinmp3.com/fetch/?format=JSON&video="+link, function(resposta) {
$(".dwn").show();
$(".dwn").attr("href","//www.youtubeinmp3.com/fetch/?video="+link);
$(".dados").html(
"<li> Titulo:"+resposta.title +"</li>" +
"<li> Duração:"+resposta.length +"</li>" +
"<li> Link:"+resposta.link +"</li>"
);
});
}
});
});
</script>
</head>
<body>
<div id="baixar">
<input type="text" name="url" id="url"> <input type="button" name="download" id="download" value="Baixar">
</div>
<a class="dwn" href=""> Baixar MP3 </a>
<ul class="dados">
</ul>
</body>
</html>

Como sempre deixo o link para download do arquivo : YOUTUBE MP3 JQUERY

Obrigado por acompanhar o blog !!!

quinta-feira, 16 de junho de 2016

Função para enviar qualquer formulário html

Bom dia pessoal, hoje eu estava pensando, como sou webdesigner e sempre preciso criar vários sites, tem projetos que sempre tem um formulário diferente, como é chato você criar aquele esquema para todos os formulários do site, claro se seu site só tem aquele formulário de envio de email simples, mas se tem vários tipos de formulário com campos diferentes, você pode utilizar a função serialize do jquery, a qual já pega todos os dados do seu formulário e monta uma string, esta string é recebida pelo php ou outra linguagem do servidor que esteja a utilizar.

Daí você pergunta: e a validação do lado cliente não vai ficar mais complicada?

Bom faz muito tempo que não precisamos fazer a validação do lado cliente, você pode perceber como é rápida a resposta do servidor, a não ser que seu site seja muito acessado, porém, não fica dificil não, você pode fazer a validação tranquilamente do lado cliente, se for o caso eu posso até fazer um outro tutorial ensinando como fazer esta validação, mas hoje o foco é esta função para enviar todo e qualquer tipo de formulário html.

Para começar nossa função precisamos recuperar os dados do nosso formulário, suponha que o mesmo tenha o id form

//setamos a variavel como o formulario

var form = $("#form");

//recuperamos atributo url

var url = form.attr("action");

//finalmente recuperamos todos os dados do formulario

var formdata = form.serialize();

Perceba que até agora só o que fizemos foi pegar todos os dados do formulário, após isso a variavel formdata será mais ou menos assim:

campo1=valor1&campo2=valor2 ...

Assim vai até pegar todos os campos do formulário
Bom agora só o que falta é enviar estes dados para uma url, esta url será a mesma do formulario no atributo action.

$.ajax({

type: "POST",

url: url,

data: formdata,

success: function(resposta){

$("p.retorno").show();

$("p.retorno").text(resposta);

}

});

Já deu pra perceber não é? este código funciona para qualquer formulário, e sempre que você fizer uma alteração tipo colocar mais um campo ou excluir outro campo, pelo menos no jquery não precisa alterar nada.
você vai precisar de um campo tipo um paragrafo com a class retorno e ocultar ele com css e/ou com jquery para que o mesmo só apareça com a mensagem após receber a resposta do servidor.

vou deixar o código completo abaixo

JQUERY

$("#Enviar").click(function () {

var form = $("#form");

var url = form.attr("action");

var formdata = form.serialize();

$.ajax({

type: "POST",

url: url,

data: formdata,

success: function(resposta){

$("p.retorno").show();

$("p.retorno").text(resposta);

}

});

HTML

<form name="form" id="form" method="post" action="functions/gravar.php">

<h1 class="titulo"> Recomendados </h1>

<p> <span> Nome </span> <input type="text" name="nome" id="nome"> </p>

<p> <span> email </span> <input type="email" name="email" id="email"> </p>

<p> <input type="button" name="Enviar" id="Enviar" value="Adicionar"> </p>

<p class="retorno"></p>

</form>

Quer mais praticidade? poderiamos ainda do lado servidor criar um mecanismo que recebesse todos os campos vindos do formulario sem a necessidade de fazer um a um desta forma:

$nome = $_POST['nome'];

$email = $_POS['email'];

Imagine que seu formulário tenha uns 30 campos para preenchimento! :o
Uau !!! é tão chato preencher formulários, mais chato ainda validar eles no servidor.
Bom vou criar muitos outros tutoriais ensinando a como tornar a vida do programador e do usuário mais fácil, e logo você terá um banco de códigos que vai poder utilizar para acelerar os seus projetos, eu espero poder ajudar de alguma forma.

Se você curtiu o blog e deseja um tutorial específico, manda aí a dica nos comentários.
como sempre, deixo o download do arquivo, desta vez apenas o código Jquery

envia_form.js

sábado, 11 de junho de 2016

Mostrar e Ocultar Senha com Jquery

Você já viu aqueles formulários de login em sites, onde você pode visualizar a senha que digitou? isso evita que ocorra erros de digitação e o usuario venha a ter que redigitar a senha e também evita bloqueio da senha se seu sistema tiver esta funcionalidade.

Utilizaremos a versão 2.0.2 do jquery, nosso formulário vai mostrar a senha e ocultar quando o usuário desejar, bastando clicar em uma imagem de um olho ao lado do campo de digitação da senha. Obiviamente existe a maneira de exibir a senha também quando o usuário segura o botão do mouse, porém particularmente eu prefiro desta forma.

Vamos começar?

Primerio precisamos de um formulário html

<form>

<p> Login </p>

<p> <label> Login </label> <input type="text" name="login" id="login"> </p>

<p> <label> Senha </label> <input type="password" name="senha" id="senha"> <img id="olho" src="img/olho.png"/></p>

</form>

Nada demais, um formulário simples com dois campos, e um botão para submeter o formulário

Agora vamos ao código Jquery:

$(document).ready(function () {

var senha = $("#senha");

$("#olho").click(function() {

var tipo = senha.attr("type");

if (tipo == "password") {

senha.attr("type", "text");

} else {

senha.attr("type", "password");

}

});

</script>

Basicamente apenas alteramos o atributo attr do campo

abaixo deixarei o link para download do exemplo completo

http://adf.ly/10705965/mostrar-e-ocultar-senha

Gostaria de pedir sua ajuda, eu quero criar um ambiente virtual para ensinar programação para iniciantes, para isso preciso de uma boa estrutura, veja estou usando o blogger rsss, bom sinta-se a vontade, continuarei postando aqui nos momentos livres, e podem deixar dicas para proximos posts.

se você gostou do blog, quer me ajudar deixo um link para doação, não é obrigatório, desejos a todos um bom sábado !!!