Marcar/Desmarcar todos checkboxes com JQuery

Se tivermos muitos checkboxes para o usuário marcar podemos considerar incluir a opção marcar/desmarcar todos para facilitar a vida do usuário e melhorar a usabilidade do sistema.

Abaixo segue como fazer isso:

Crie a função:

Javascript:

function marcardesmarcar(){
   if ($("#todos").attr("checked")){
      $('.marcar').each(
         function(){
            $(this).attr("checked", true);
         }
      );
   }else{
      $('.marcar').each(
         function(){
            $(this).attr("checked", false);
         }
      );
   }
}


HTML:

<input type="checkbox" name="todos" id="todos" value="todos" onclick="marcardesmarcar();" /> Marcar/Desmarcar todos<br/>
<input type="checkbox" class="marcar" name="1"  value="1" />Valor 1<br/>
<input type="checkbox" class="marcar" name="2"  value="2" />Valor 2<br/>
<input type="checkbox" class="marcar" name="3"  value="3" />Valor 3<br/>

Testando:


Marcar/Desmarcar todos
Valor 1
Valor 2
Valor 3

Certifique-se de usar o evento onclick. Usando onchange não funcionou no Internet Explorer.

Att,
Gustavo Marques.

Performance no Frontend de sua aplicação web

Existem várias coisas que podemos fazer para melhorar a performance de nossas aplicações web. Vamos destacar aqui 2 coisas básicas que devemos implementar no frontend para obter uma melhora na rapidez da aplicação.

1- Não reduza as imagens no HTML
Imagine o cenário: você tem uma imagem em alta de 5 megas com 1000px de altura por 1000px de largura. Mas no seu layout html o espaço reservado para essa imagem é de apenas 200X200. O que você faz?

<img src="imagem.png" width="200" height="200" />

Não faça isso! Eu sei que isso é tentador, mas você estará obrigando o usuario baixar 5 megas sem necessidade.
O correto seria abrir a imagem e um software gráfico e reduzir o tamanho dela. Poderá usar o GIMP para isso. Abra a imagem e no menu Image selecione scale image, então informe o tamanho desejado. Se não possuir transparêcia você poderá ainda exportar para JPG e diminuir a qualidade final para que o tamanho fique menor ainda.

2- Utilize os seletores CSS
Usando bem os seletores css você evita muito código desnecessário, e quanto mais código, mais kbs para baixar. Deve-se evitar código CSS inline nos elementos HTML

Veja um exemplo:


<div style="background-color:#d1d2d4;font-family:Arial, Helvetica, sans-serif;font-size:12px;">
Menu 1
</div>
<div style="background-color:#d1d2d4;font-family:Arial, Helvetica, sans-serif;font-size:12px;">
Menu 2
</div>
<div style="background-color:#d1d2d4;font-family:Arial, Helvetica, sans-serif;font-size:12px;">
Menu 3
</div>

Tudo isso poderia ser evitado usando:


<style>
.menu{
background-color:#d1d2d4;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

}
</style>
<div class="menu">Menu 1</div>
<div class="menu">Menu 2</div>
<div class="menu">Menu 3</div>


É também interessante que o código CSS ou javascript fiquem em um arquivo externo e referenciado como link no html:

<link rel="stylesheet" type="text/css" href="seu_arquivo.css" />

Isso permitirá que o navegador guarde em cache esse arquivo, minimizando solicitações ao servidor e o tempo necessário para baixar.

Aplicando essas duas dicas, a performance irá melhorar.

Gustavo Marques.

CRUD no Banco de Dados com Java e JDBC - parte 1

A maioria das aplicações web precisam guardar seus dados em um banco de dados. Se você está iniciando em java, esse tutorial vai explicar como realizar um CRUD (Create Read Update Delete) através de uma aplicação web de exemplo. Utilizaremos nesse exemplo alguns padrões de projeto como MVC, DAO e Front Controller. Explicarei o que cada um destes significa e os beneficios resultantes de adotá-los. Neste exemplo além de mostrar como realizar operações no banco mostrarei também como estruturar seu código corretamente para a realização de transações (uma transação são várias consultas executadas para um determinado objetivo. Se uma consulta falhar, a transação garante que as outras sejam canceladas/desfeitas).

Espera-se que você já possua algum conhecimento em java e orientação a objetos, bem como html e servlets/jsp.

Resumo da aplicação:
Esta aplicação exemplo será um sistema de estoque, onde poderemos cadastrar, listar, atualizar e deletar um produto.

Este tutorial está dividido em duas partes: a primeira é a criação do código que acessará o banco de dados, e a segunda parte será o código que utilizará a classe criada na primeira parte.

Primeiro passo: Criação do banco de dados.
Abra seu cliente sql favorito para o seu banco de dados e crie a tabela de produtos. Supondo que você esteja usando o mysql pode ser assim o scritp:


CREATE TABLE `produto` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `nome` text NOT NULL,
  `descricao` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB


Segundo Passo: Criando sua classe que represente essa tabela.
Voce precisa de uma Classe-Entidade para seu sistema, a fim de desfrutar dos benefícios da orientação a objetos.

public class Produto{
private int id;
private String nome;
private String descricao;

//getters e setters
public void setId(int id){
   this.id = id;
}

public int getId()
   return this.id;
}

public void setNome(String nome){
   this.nome = nome;
}

public String getNome(){
   return this.nome
}

public void setDescricao(String  descricao ){
   this. descricao =  descricao ;
}

public String getDescricao(){
   return this.descricao;
}

}//fim da classe Produto

Terceiro Passo: Criando seu DAO

DAO (Data Access Object) se refere a classe que irá fazer a comunicação de seu sistema com o banco de dados. Esse padrão é muito importante. Ele promove a reutilização de código, também promove a boa manutenção do código pois ele não deixa que o código de acesso ao banco de dados fique misturado com outras partes da aplicação que possuem outros objetivos.



import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Connection;
import java.util.List;
import java.util.ArrayList;


public class ProdutoDAO{

private Connection con;//objeto connection que será usado nos métodos abaixo

/*
* Construtor que recebe como parametro uma conexao com o banco de dado. 
*/
public ProdutoDAO(Connection con){
   this.con = con;
}

public void cadastrar(Produto produto) throws Exception {
   PreparedStatement p =
   con.prepareStatement("insert into produto (nome, descricao) values (?,?)");
   p.setString(1, produto.getNome());
   p.setString(2, produto.getDescricao());
   p.executeUpdate();
   p.close();
}

public void deletar(Produto produto) throws Exception {
   PreparedStatement p = con.prepareStatement("delete from produto where id = ?");
   p.setInt(1, produto.getId());
   p.executeUpdate();
   p.close();
}

public void update(Produto produto) throws Exception {
   PreparedStatement p = 
   con.prepareStatement("update produto set nome = ?, descricao = ? where id = ?");
   p.setString(1, produto.getNome());
   p.setString(2, produto.getDescricao());
   p.setInt(3, produto.getId());
   p.executeUpdate();
   p.close();
}

public List<Produto> listarTodos() throws Exception{
   List<Produto> produtos = new ArrayList<Produto>();
   PreparedStatement p = con.prepareStatement("select * from produto");
   ResultSet rs = p.executeQuery();
   while(rs.next()){
      Produto produto = new Produto();
      produto.setId(rs.getInt("id"));
      produto.setNome(rs.getString("nome"));
      produto.setDescricao(rs.getString("descricao"));
      produtos.add(produto);
   }
   rs.close();
   p.close();
   return produtos;
}

}//fim da classe ProdutoDAO

Ok, está pronta toda nossa comunicação com o banco de dados.

Na próxima parte deste tutorial explicarei como criar um Servlet cliente de nosso DAO
Quando eu digo cliente, quero dizer quem vai utilizar os serviços (métodos) providos pela classe ProdutoDAO. Esse cliente pode ser uma aplicação web ou desktop/swing. Vamos fazer um cliente web através de servlets e jsp com jstl.

Att
Gustavo Marques.

Efeitos com JQuery

A biblioteca jquery possui alguns efeitos visuais prontos que certamente irão melhorar a experiência dos usuários com o seu sistema web.

Para usar a jquery você pode fazer o download diretamente de jquery.com ou carregar o arquivo .js que o google disponibiliza:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>

Vejamos alguns exemplos:

Esconder/Mostrar uma div (ou qualquer outro elemento do DOM):


$('#id_do_elemento').hide();//esconde imediatamente

$('#id_do_elemento').hide('slow');//escode aos poucos

$('#id_do_elemento').show();//mostra imediatamente

$('#id_do_elemento').hide('slow');//mostra aos poucos

Existe ainda o toggle para ficar alternando entre os dois estados

Teste aqui :

$('#id_do_elemento').toggle();

$('#id_do_elemento').toggle('slow');

Existe ainda:
$('#id_do_elemento').slideToggle();//pode acrescentar 'slow' como parametro

Teste aqui:
$('#id_do_elemento').slideToggle('slow');

A biblioteca jquery certamente facilita muito a vida do desenvolvedor.

Gustavo Marques.

Sombra e cantos arredondados com CSS3

Olá caros leitores,

Vamos falar um pouco de css3, mais especificamente duas coisas que usamos bastante:
sombras e cantos arredondados.

Mas antes de explicar como se faz isso com css3 é bom lembrar da época em que fazer isso era difícil (isso nos ajuda a ter apreço pelas coisas novas que foram feitas para simplificar)

Não tinha jeito, para fazer sombra (de qualidade) com cantos arredondados precisávamos de um software gráfico de apoio. Os cantos e partes da sombra eram imagens que, com a propriedade de background-image, fazia-se uma gambiarra para fazer uma div com cantos arredondados.

Mas isso é coisa do passado.
Vamos às novidades:

Uma div com sombra:

div{
width:200px;
height:200px;
box-shadow: -5px 5px 6px gray;
-webkit-box-shadow: -5px 5px 6px gray;
-moz-box-shadow: -5px 5px 6px gray;
-o-box-shadow: -5px 5px 6px gray;
-ms-box-shadow: -5px 5px 6px gray;
}


renderizando fica assim (Espero que seu browser tenha suporte!):

Agora vamos adicionar os cantos arredondados:

div{
width:200px;
height:200px;
box-shadow: -5px 5px 6px gray;
-webkit-box-shadow: -5px 5px 6px gray;
-moz-box-shadow: -5px 5px 6px gray;
border-radius:7px;
-ms-border-radius:7px;
-o-border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}


Renderizando:

Talvez você tenha notado os prefixos: -o, -webkit, -moz, -ms
Isso se refere ao tipo de browser

-webkit (browsers baseados em webkit)
-o (opera)
-ms (Microsoft IE)
-moz (mozilla)

É que nem todos interpretarão se você colocar apenas: box-shadow ou border-radius

Bem melhor do que antigamente,
Fica a dica

Gustavo Marques

Modelo de arquitetura para projetos em PHP

Sem sombra de dúvida damos total preferencia a orientação a objetos com mvc no desenvolvimento de sistemas web. Porém esses dias baixei o PHPBB, um sistema de fóruns feito em php. Analisando o código notei um MVC simplificado. (para quem não sabe o que é MVC significa model - view - controller, isso significa divisão de responsabilidades, o código que trata da visualização não pode estar misturado com o código que armazena os dados por exemplo. Isso aumenta a manutenção do softwre).

O modelo que observei foi este: 

- /pasta raiz 

      - /pasta functions 

      - /pasta views 

      - listar_usuarios.php 

      - deletar_usuario.php

Existe uma pasta para as funções, outra para as views e os controlles com as actions ficam na pasta raiz.

Por exemplo, a action listar_usuarios.php seria implementada assim:

Arquivo usuarioDao.php na pasta functions:

<?
function listar(){
   //busca no banco
   return $usuarios;
}
?>

Agora o arquivo da listagem.php na pasta view:

<html>
   <body>
      <table>
         <tr><td>Nome</td></tr>
         <? for ($index = 0; $index < count($usuarios); $index++) { ?>
            <tr>
               <td><?echo $usuarios[$index]['nome'];?></td>
            </tr>
         <?}?>
      </table>
   </body>
</html>

E finalmente o controller, arquivo listar_usuarios.php na pasta raiz:

<?
require_once 'functions/usuarioDao .php';
$usuarios = listar();
require_once 'views/listagem.php';
?>

Para acessar a action basta acessar o arquivo listar_usuarios.php

Embora não tenhamos orientação a objetos temos aqui o MVC. Modificações no html não irão afetar o codigo do banco de dados e vice-versa. É claro que pode-se melhorar com outros padrões, como o front controller, mas para iniciantes em php ou para sistemas pequenos, fica aí a dica de como estruturar seu código.

Nesse outro post eu apresento uma maneira mais elaborada de estrutura de projeto, levando em consideração os padrões de projeto Front Controller  e Command, bem como orientação a objetos.

Atenciosamente,

Gustavo Marques.

Resolvendo o problema de caracteres acentuados com PHP

Talvez voc? j? tenha visto uma frase assim no html que resulta do seu c?digo PHP.

Os caracteres acentuados não são exibidos como desejado, sendo substituídos por interrogações ou símbolos.

Veja abaixo um mode simples de resolver isso:

<?php header("Content-Type: text/html; charset=ISO-8859-1", true) ?>
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
   </head>
   <body>
      Teste acentuação á é í ó ú
   </body>
</html>


Vale ressaltar que até para ajax que retorna partes de html, é preciso incluir <?php header("Content-Type: text/html; charset=ISO-8859-1", true) ?> antes do código para não ter problemas

Vai a dica
Gustavo Marques.

Criando um jogo de corrida 3D no blender

Olá pessoal,

Neste post explicarei de forma resumida como foi o processo de criação de um jogo que eu fiz no blender.
Confira abaixo alguns screenshots do jogo rodando:

Espera-se que o leitor já possua algum conhecimento no blender, vou postar alguns tutoriais de blender básico para ajudar aqueles que não possuem fluência na ferramenta.
Para fazer um jogo como esse, abra o blender e:

Terreno:

- Delete o cubo que vem por padrão e adicione um plano, esse será o terreno
- Adicione um material a esse plano, tal como a cor marrom ou verde
- Adicione outro plano sobre o anterior, afaste os dois no eixo Z
- Novamente adicione subdivisões a este outro plano, porém adicione até a largura das faces ficar da largura  que você deseja para a sua pista.
- Vá excluindo as faces do meio de modo a desenhar uma pista
- Adicione um material cinza nas faces que sobraram
- Os buracos que você fez nesse plano irão revelar o plano de baixo que é o terreno, assim dê algumas extrusões no plano de baixo entre esses espaços para criar relevo no terreno.
- Agora vá adicionando em ambos os planos o modificador Subdivision Surface para suavisar as faces.
- Dê também alguns Grab no eixo Z em alguns edges da pista para criar alguns quebra-molas.

Veja abaixo como deve ficar:

Na guia de física configure os dois como static para que a gravidade não os faça cair no infinito.

Carro:

- Adicione um cubo e vá modelando seu carro com extrusões.
- Colore seu carro adicionando materiais diferentes nas faces do parabrisa e da lataria.
- Na fisica dele, marque-o como dinamico e ator, para que as forças da fisica atuem no carro
- Posicione a camera atras do carro e faça-a segui-lo no atuador tipo Camera dela.

Veja:

Esse plano amarelo que vocês estão vendo na frente do carro eu coloquei para controlar a linha de largada.
Coloquei ele como invisivel ao rodar o jogo, porém adicionei um sensor do tipo colisão com o carro, para saber quando o carro cruzou a linha de largada.


Comandos:

Agora basta configurar na janela o game logic os comandos do carro

- Adicione sensores do tipo keyboard e nos atuadores desloque o objeto carro nos eixos X ou Y para ir para frente e para trás, e o rotacione no eixo Z para virar para os lados.
- Coloquei também um atuador do tipo sound ao teclar o acelerador e adicionei um som de aceleração para ficar mais realista.

Meu painel de game logic ficou assim:

Pronto, só rodar a game engine e se ficar bom, exporte o jogo para .exe para que rode fora do blender.

Até um próximo post

Gustavo Marques.