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, 359 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