0

Como perder peso no Browser

supermanComo perder peso no Browser

Consultado algumas boas práticas de uso de Javascript e CSS em projetos esbarrei com o site http://browserdiet.com/pt/ que é uma iniciativa de grandes profissionais que criaram um  guia de referências com as boas práticas na hora de expor seu conteúdo na web. O site conta com grandes profissionais do mundo web. Vale a pena conferir!

Iniciativa dos profissionais:

Briza Bueno (Americanas.com),  Davidson Fellipe (Globo.com),  Giovanni Keppelen (ex-Peixe Urbano)Jaydson Gomes (Terra)Marcel Duran (Twitter)Mike Taylor (Opera)Renato Mangini (Google) e Sérgio Lopes (Caelum) .

0

DataTables JQuery com PHP

imgresImplementando o plugin DataTables do JQuery com PHP.

Nesta postagem segue um exemplo de implementação do plugin DataTable do JQuery integrado com o PHP. O plugin DataTable é uma ótima solução na hora de exibir uma lista de informações, a mesma possibilita ao usuário uma melhor navegação e organização dos dados. Segue a implementação de uma forma simples de uso deste plugin.

Javascript

No fonte acima realizo o import do plugin dataTable e do jquery e configuro o meu dataTable para ser associado a um elemento com o id “#example”, passando para o mesmo os seguintes parâmetros: aaSorting (ordem da lista), bPaginate (exibe a paginação), bFilter (exibe o filtro), sType (idioma do plugin), aoColumns(tipo das colunas da table, neste item devem ser definidas todas as colunas).

PHP

Por fim segue a tabela com os dados paginados.

dataTable

Baixe o plugin no site oficial: https://datatables.net/

0

Máscaras em Campos com JQuery

imgresMáscaras em Campos com JQuery

Em continuação do a postagem anterior, segue um exemplo de criação de máscaras de entrada para campos com o uso do JQuery. Segue alguns exemplos criados para ilustrar o uso da biblioteca maskedinput. Lembrando que está biblioteca está ligada a criação de máscara para validar usamos a validate como no exemplo da postagem anterior. Segue um exemplo de uso da biblioteca:

 Com simples uso da função mask() atribuída a um determinado campo do formulário podemos criar um padrão de máscara de entrada para o mesmo. Segue uma aplicação prática do fonte:

Confira como ficou:

mascaras

 

0

Validação de Campos com JQuery

imgresValidação de Campos com JQuery

Nesta postagem segue um exemplo de validação de campos de um formulário html com o uso do Jquery. Primeiramente vamos ao escopo do nosso formulário, tentei montar um formulários com campos bem distintos que cabem a validação de seu preenchimento.

Como podemos ver no formulário acima podemos validar: preenchimento de campos, tipos de dados como data e inteiro, url, telefone, celular e email. Neste exemplo faço uso da versão 1.3 do JQuery e do JQueryValidate disponível no site oficial do framework. (http://www.jquery.com).

Na hora de implementar as validações faço uso do param rules para definir as regras e do param messages para definir os alertas de validação. Segue o script de validação:

 Na versão usada do JQuery não existe um padrão de telefones para o Brasil e para atender ao padrão de números de telefone e celulares inseri o script a seguir no final do arquivo jquery.validate.js. Segue a implementação da validação de telefones do Brasil.

Ao fim a implementação teremos um formulário semelhante a este:

 

formulario_exemploClique Aqui, para fazer download dos fontes deste tutorial.

Jquery Validacao Wcf (27.4 KiB, 376 downloads)

0

Ocultando e Exibindo Objetos com Javascript

jsOcultando e Exibindo Objetos com Javascript

O javascript nos possibilita fazer muita coisa em client-side e sempre tem uma maneira de manipular elementos de uma página html com o uso de javascript, nesta postagem segue uma implementação de como ocultar e exibir elementos em uma página, através do atributos “id” de uma div ou de um elemento qualquer podemos ocultar ou mostrar os mesmos.

Implementação:

 

0

Validação de Campos com JavaScript

jsValidação de Campos com JavaScript

Nesta postagem segue uma forma simples mais funcional de como validar campos de um formulário com o velho e puro javascript. Tentei ilustrar as validações de ckeckbox, radios, selects e campos text da forma mais simples possível.  Para realizar as validações montei o seguinte formulário.

formsvalida

Implementação do Formulário HTML

Note que nas linhas 4 e 5 incorporo ao formulário uma folha de estilo e um arquivo com o script respectivamente. Os arquivos devem estar no mesmo diretório do formulário caso coloque em diretório diferente não se esqueça de fazer referência ao mesmo.

Folha de Estilo do Formulário

A folha de estilo é a mesma utilizada no post “Formulários sem Tabelas com CSS“, ao final salve o um arquivo com a implementação css com o nome estilo.css, segue a sua implementação.

Validação Javascript

Por fim implementaremos a validação dos campos do formulário,  o script abaixo contém as validações de preenchimento de campos obrigatórios além de uma simples validação para campos de e-mail, ao fim salve o script com o nome validacoes.js, segue a implementação:

 

0

Galeria de Imagens com Javascript

jsGaleria de Imagens com Javascript

Nesta postagem segue um exemplo básico de como criar uma galeria de imagens com auxilio do javascript.

Segue o exemplo:

galeria

Crie um diretório para armazenar  a página da galeria e as sua imagens, no meu exemplo criei um diretório chamado galeria e um subdiretório chamado imgs com as imagens usadas no exemplo.

dirgaleria

Uma boa prática é utilizar as imagens com as mesmas proporções e de mesma extensão.

Segue a Implementação com devidos comentários:

0

Gráficos e Tabelas com Google Visualization API

Google Developers rectangleGráficos e Tabelas com Google Visualization API

A google disponibiliza para nós desenvolvedores uma API de componentes em javascript para a criação de gráficos, tabelas, mapas e alguns outros recursos. Estes recursos estão disponíveis na página do google developer. Todos os recursão são de fácil implementação além de deixar seu sistema mas rico em recursos e aparência.

Segue um exemplo do poder da API Google Visualization

  • Gráfico em Colunas

charBars

  • DataTable

dataTable

  • Geo Gráfico

geoChart

Todos os exemplos são do Google Developers. Vale a pena conferir clicando no link da figura abaixo.

GDlogo2

 

0

Formulário com Frames Dinâmicos em JavaScript

jsFormulário com Frames Dinâmicos em JavaScript

Nesta postagem exemplifico um exemplo simples de como criar um formulário dividido em frames sanfonados. Ao clicar em suas labels podemos ocultar ou deixar visível o conteúdo do formulário.

formAccordion

Para obter o efeito sanfonado no seu formulário basta seguir  a implementação a seguir:

  • 1º Passo: Criar a Folha de Estilo, salve com o nome style.css.

  • 2º Passo: Criar o Javascript, salve com o nome jscript.js.

 

 

Na primeira função a ser carregada pelo navegador capturamos os elementos e os labels presentes em nossa página html, já na função  showBlock() definimos o evento de clique do mouse para esconder e mostrar a label clicada pelo usuário.

3º Passo: Criar o Formulário HTML e incorporar na página a folha de estilo e javascript.

 

Mantenha todos os arquivos criados no mesmo diretório, ou não se esqueça de ajustar a chamada de cada arquivo caso queria manter em diretórios diferentes.