10 caixas de diálogo – jQuery Modal »

12fev 2011, às 11:01

Publicado em Recursos jQuery | Deixe o seu comentário (3) »

publicado por: Magno Valdetaro

Uma ótima maneira de mostrar informações rápidas para o usuário é o uso de caixas de diálogo modals ou janelas, como preferir. As caixas de diálogo também podem ser usadas para alerta-los para avisos, erros, para exibir formulários e muito mais. Apresento a vocês 10 opções deste ótimo recurso em jQuery, aproveite!

1. Exit Modal Box

Exibe um modal com uma mensagem específica antes que o usuário deixe seu site.

2. Smooth Popup Box

Tutorial de criação de popup utilizando jQuey (em inglês)

3. ThickBox

Este é uma caixa de diálogo escrita com jQuery para exibir uma ou múltiplas imagens, de conteúdo internos, em um iframe ou por meio de AJAX.

4. Boxy

É uma modal estilo Facebook escrito em jQuery com opção de arrastar e redimensionar.

5. Simple jQuery Modal

Cria um simples modal com jQuery

6. ColorBox

Elegante modal aos moldes do lightbox, fácil de customizar e leve.

7. Upload in Modal Window

Um modal para upload semelhante ao do Wordpress.

8. UI Dialog

Ui Dialog faz parte da biblioteca de interface de usuário para jQuery, flexível em seu uso, porém trabalho na customização.

9. Ajax Contact Form

Um excelente formulário de contato usando AJAX e jQuery.

10. Impromptu

Permite a criação de formulários com caixas de diálogo.

Highcharts–Gráficos interativos com JavaScript »

13jan 2011, às 09:59

Publicado em Ajax/Javascript/Jquery | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Uma excelente solução para gerar gráficos crossbrowser com JavaScript.

Highcharts é uma biblioteca de gráficos escritos em JavaScript puro, oferecendo uma maneira fácil de adicionar gráficos interativos para seu site ou aplicação web. Highcharts atualmente suporta uma série dos mais utilizados tipos de gráficos como: Line, spline, barra, pizza entre diversas outras variações como pode ser visto nesta página de demonstração.

Compatibilidade

Sabe o melhor?A biblioteca Highcharts funciona em todos os browsers moderno, incluindo o iPhone/iPad (chupa Google Analytics!) e no Internet Explorer a partir da versão 6 (Morra!) utilizando VML, já em outros navegadores utilizam SVG para a renderização dos gráficos.

Recursos

Ao utilizar a biblioteca é dispensando o uso de plugins do lado do cliente, como Flash ou Java. è de simples implementação e permite escolher entre Jquery ou MooTools para trabalhar junto ao núcleo do Highcharts.

É open source, permitindo qualquer alteração em seu código o que ajuda na flexibilidade e personalização. Oferece inúmeros tipos de gráficos como citados acima, sintaxe de configuração simples, permite exibir gráficos dinâmicos através de uma api em combinação com jQuery o MooTools recebendo valores a partir do servidor. Múltiplos eixos para que você possa comparar variáveis. Tooltip para exibir informações de pontos específicos do gráfico. Recursos de zoom, exportação e impressão.

Licença

Highcharts é grátis para fins não lucrativos. Então se você quiser utilizar em seu site, trabalhos internos entre outros, fique à vontade. Se for usar para fins comercias visite a página de licenças e preços. Os preços variam de $80 a $2000.

Faça do seu navegador o seu arcade com Akihabara »

14out 2010, às 11:59

Publicado em Ajax/Javascript/Jquery HTML5 | Comentários desativados »

publicado por: Magno Valdetaro

Akihabara é uma área famosa de Tóquio, onde se concentra um dos maiores complexos de tecnologia do mundo, lotados de computadores, eletrônicos, animes e tudo o que há de bom no mundo.

Mas este não é um blog de viagens, Akihabara que quero apresentar à você é um conjunto de bibliotecas, ferramentas e presets para criar jogos no estilo da era 8/16bit em javascript que rodam no seu navegador, sem qualquer plugin. Akiahabara faz uso de um pequeno subconjunto de características do HTML5 que já estão disponíveis na maioria dos navegadores atuais.

Os jogos desenvolvidos entregam resultados agradáveis  e executam da mesma maneira em todos os navegadores e em todas as plataformas suportadas incluindo plataformas moveis e com interface touchscreen e multitouch, como iphone, ipad, e alguns dispositivos com Android.

Se você deseja fazer o download do pacote completo, com todos os demos e áudio, você pode encontrar a versão de desenvolvimento (e colaboração) no Github. (este software é GPL2/MIT licenciado)

Uma simples e elegante galeria de imagens com jQuery »

12out 2010, às 09:42

Publicado em Ajax/Javascript/Jquery Recursos jQuery | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Sideways é uma simples, mas elegante galeria de imagens desenvolvida em HTML, CSS e do já conhecido framework jQuery. Esta galeria faz uso de alguns plugins, estes são:  jQuery UI (jQuery User Interface), jQuery Easing desenvolvido por George Smith McGinley, somando e completando o time de plugins, Sideways também faz uso do plugin Mousewheel jQuery de Aaron Brandon.

Você pode usar Sideways tanto em projetos pessoais como comerciais (victory!), sendo assim esta galeria é toda sua você desenvolvê-la ou apenas torná-la melhor.

Demo: http://manos.malihu.gr/sideways-jquery-fullscreen ...

Download: Sideways download

Easy front-end Framework »

06set 2010, às 08:00

Publicado em Ajax/Javascript/Jquery Framework HTML / CSS | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Conheça Easy framework e acelere a produção das três camadas do front-end (estrutura, estilo e de interação).

Projetado por Alen Grakalic criador do blog CSS Globe para tornar sua vida um pouco mais fácil como ele mesmo cita, o Easy front-end Framework começou como um projeto pessoal e, em seguida, como um monstro de frankenstein, se transformou em algo maior. A ideia por trás dele é reduzir a quantidade de tempo gasto na criação da base do HTML através da reutilização de técnicas de codificação, sem se preocupar com questões sobre renderização do navegador, junto com inúmeros plugins javaScript para executar tarefas simples e também com convenções de nomenclatura da CSS.

Mas, por que usar o Easy front-end framework?

Por ser um framework tudo-em-um com uma biblioteca javaScript produzida com o velho conhecido jQuery, este que já facilita muito as funções interativas, ele também inclui uma biblioteca pré-formatada e codificada de CSS e HTML com blocos de conteúdo que você pode simplesmente copiar e colar em seu modelo html.

Uma verdadeira solução para front-end que você poderá facilmente usar como foi concebida ou personalizar para atender às suas necessidades

Experimente, não vai doer.

Como toda novidade é necessário um tempo de adaptação. Só então podesse falar se algo é bom ou ruim, útil ou não, sugiro que assista ao screencast abaixo, veja a documentação (em inglês) e dê uma espiada no demonstrativo.

Download do Easy front-end framework

jConfirmAction: Um plugin jQuery para caixa de confirmação »

10mai 2010, às 10:23

Publicado em Ajax/Javascript/Jquery jQuery | Comentários desativados »

publicado por: Magno Valdetaro

jConfirmAction é mais um plugin jQuery que visa substituir a caixa de confirmação padrão por basicamente um elemento DIV flutuante que surge e desaparece em um fading suave e contém as informações e opções de confirmação.

Para utilizar este recurso, basta incluir o plugin jConfirmAction a sua página, crie um link, de um nome a uma class e chame a função jConfirmAction, e assim você terá uma caixa de confirmação muito mais simpática e bonita.

Não se esqueça que é necessário também a aplicação do framework jQuery em sua página.

Veja o demonstrativo do jConfirmAction.

Slider de Imagens jQuery com 9 efeitos e transições »

15abr 2010, às 08:04

Publicado em Ajax/Javascript/Jquery Recursos jQuery | Comentários desativados »

publicado por: Magno Valdetaro

Björn Crüger (já sei, nome esquisito) após conhecer o CU3ER desenvolvido por Stefan Kovac ficou fascinado pelo seus efeitos de corte de uma imagem em pedaços e vê-la se transformando em outra, resolveu criar seu próprio slider o Nivo Slider.

Diferente do CU3ER que foi desenvolvido em flash, Nivo Slider é um novo slider em jQuery com 9 efeitos de transição. Simples e leve tem controle direcional e de navegação. Funciona no Internet Explorer 7+, Firefox 3+, Google Chrome e Safari 4. E não posso esquecer de dizer que requer o jQuery Framework e é de uso livre, então aproveite.

Lista de ferramentas muito úteis para desenvolvedores CSS3 »

13abr 2010, às 09:38

Publicado em Ajax/Javascript/Jquery CSS3 Ferramentas HTML / CSS | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

De um modo geral, CSS é muito fácil de se entender e aprender. Mas quando os fabricantes de navegadores começaram a implementar recursos da CSS3, as coisas tornaram-se pouco complicadas. Devido principalmente por dois motivos: primeiro, muitas das novas propriedades CSS3 (por exemplo, a transition, gradient e transform) não são tão simples, e por este motivo, temos de usar extensões específicas de cada navegador.

Até o momento nossos melhores amigo são os geradores de CSS3, as cheat sheets, os guias de referência e as soluções em Java script.

Veja agora a lista de ferramentas úteis para desenvolvedores CSS3:

Geradores

CSS3 Please!

A primeira da lista é a CSS Please ferramenta usada para gerar de regras CSS3, suporta: border-radius, caixa-sombra, o gradiente linear), cores RGBA (, de transformação (rotação), a transição e @ font-face.

CSS3 Generator

Já comentado aqui no blog CSS3 Generator, suporta: border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing and outline.

CSS3 Sandbox

Mais um gerador CSS3 para Linear Gradientes ,Gradientes radiais , Texto Shadows , Box Shadows , Transforma eStroke texto.

@ Font-face Generator

Quer utilizar fontes não padrão no seu website, o @Font-face Generator te ajuda na tarefa de gerar regra da propriedade @font-face.

CSS3 Gradiente Generator

Gere gradientes linear com CSS3 com ajuda do CSS3 Gradiente Generator

CSS Border Radius

Gera a propriedade borde-radius para o Mozilla, Webkit e a sintaxe padrão.

Webkit CSS3 Generator

Simples gerador CSS que ajuda você a entender as capacidades da CSS3 introduzidas pelo WebKit.

CSS3 Learning Tool

Ferramenta dinâmica que verificar se a propriedade é suportada pelo navegador em uso e aplica o prefixo para este.

Soluções em JavaScript

Modernizr

Uma excelente biblioteca Java script que detecta a disponibilidade de funcionalidades nativas HTML5/CSS3 e oferece uma maneira de manter o controle sobre seu site, independente das capacidades do navegador. Se gostar do mootools, você pode usar o MooModernizr.

CSS3 pseudo-class Selector Emulation

Permite o uso de pseudo-classe no internet explores. Basta incluir o script em suas páginas e começar a utilizar esses seletores em sua folha de estilo.

CSS3 support for Internet Explorer 6, 7, and 8

IE-CSS3 é um script que oferece suporte a CSS3 para os navegadores Internet Explorer, vários dos estilos populares estão disponíveis.

ie7-js

Mais uma biblioteca para fazer o Internet explorer se comportar como um browser compatível com as normas.

Sizzle - Seletor JavaScript Library

Sizzle suporte praticamente todos os seletores CSS3  -  isso inclui até mesmo alguns raramente usados.

Se achou este post útil não deixe de comentar ou repassar para amigos.

JQuery MultiSelect Plugin »

03fev 2010, às 08:24

Publicado em Ajax/Javascript/Jquery Recursos jQuery | Comentários desativados »

publicado por: Magno Valdetaro

Eric Hynds do erichhynds.com ´gastou algumas horas dos seus últimos meses desenvolvendo um plugin para jQuery que transforma o controle SELECT do HTML comum em uma elegante lista de múltipla escolha.

Agora que o plugin está o suficientemente estável e com boa velocidade de resposta Eric o disponibilizou para download em seu blog e ainda incluindo suporte a temas!

Confira as imagens:

Alguns recursos:

• Suporte a temas
• Suporte a Optgroup
• Cabeçalho opcional com opção de marcar  todos / desmarcar todos
• Alteração fácil de velocidade do fade, altura do recipiente de rolagem, texto, links.
• Apenas 5.3Kb (minified)

Veja o demonstrativo

Download source (9,5 Kb) ou minified (5.3Kb)

jParse – jQuery XML plugin »

10nov 2009, às 08:13

Publicado em jQuery | Comentários desativados »

publicado por: Magno Valdetaro

 jParse é um plugin jQuery que permite exibir facilmente um arquivo XML através de uma solicitação ajax. jParse lhe dá opções de customização, quantidade e contagem de itens a serem exibidos e possibilita executar funções antes e depois do jParse ter sido executado. jParse tem um código leve e rápido e foi testado com Firefox 2+, IE 6+, Safari 3 + e Opera 9+.

O método ajax do jQuery não permite realizar pedidos de um outro domínio, logo o arquivo XML deve estar no mesmo domínio qual você está trabalhando (FAIL). Mas usando o jParse é bem simples puxar um valor de um nó, o valor de um atributo de um nó, ou o de um  do documento XML.

Desenvolvido por Kyle Rush; jParse – jQuery XML Parse Plugin está disponível para download sob licença MIT. Mais informações, demos e download no site jParse.

O que achou desta dica?