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.

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.

Formee – Um framework CSS para construção de formulários »

04mai 2010, às 10:00

Publicado em Framework | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Formee é um framework que facilita a produção de formulários cross-browser de maneira fácil e rápida.

Ele funciona com a mesma técnica fornecida pelo conhecido 960 Grid System para facilitar montagem do layout do formulário de um website com total flexibilidade.

Veja o exemplo.

Este framework se em caixa em qualquer projeto, uma vez que a estrutura tenha sido criada em torno de larguras disponíveis.

Formee foi construído com o menos número de marcações e gera formulários com boa semântica. Estilizar os forms não é complicado pois Formee dispõe de 2 arquivos um para estrutura e outro para o estilo. Para completar Formee conta com alguns elementos a parte como mensagens de erro, avisos e alertas de sucesso.

CSS Framework – 960 Grid System »

03mai 2010, às 07:48

Publicado em Framework HTML / CSS | Deixe o seu comentário (4) »

publicado por: Magno Valdetaro

Framework

Segundo a Wikipédia um framework se resume em uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Um framework pode atingir uma funcionalidade específica, por configuração, durante a programação de uma aplicação. Ao contrário das bibliotecas, é o framework quem dita o fluxo de controle da aplicação, chamado de Inversão de Controle.

Mas está definição é muito complicada prefiro está do imasters:

Frameworks são estruturas de códigos definidas onde um projeto de software, seja ele web ou não, pode ser criado e desenvolvido. Frameworks podem incluir programas de suporte, bibliotecas de código, linguagens de script ou qualquer outro tipo de software para auxiliar no desenvolvimento.

Eles foram projetados para auxiliar no desenvolvimento de softwares, auxiliando designers e programadores a gastar menos tempo com desenvolvimento.

Em CSS, frameworks geralmente são um conglomerado de arquivos css com coisas base para tipografia, estrutura de layout, menu. Sua utilização deve ser muito cuidadosa, pois utilizar frameworks em desenvolvimento XHTML e CSS pode não trazer a mesma produtividade do que se você estivesse usando um framework para PHP, JavaScript. É importante que o desenvolvedor saiba ler e compreender o código que ele está escrevendo.

Veja todo o artigo do Imasters sobre framework.

CSS Framework

A definição do termo na Wikipédia é a seguinte: “trata-se de uma biblioteca pré-configurada cujo objetivo é facilitar a criação de layouts o mais próximo possível dos padrões web”.

960 Grid System

Apesar de algumas pessoas acharem que grids limitam a criatividade, elas na verdade são muito úteis e funcionais e aceleram o processo de produção. Goste ou não, as páginas web essencialmente giram em torno de formas de caixas. Inevitavelmente, estes retângulos têm de se unir de alguma forma ou de outra para formar um desenho. Um sistema de grid é uma técnica adota para organizar conteúdo a muito tempo em páginas impressas e nos últimos anos vêem sendo utilizada em peso também para aplicações web.

960 Grid System é um framework com 960px de largura (por isto leva este nome), dividido em 24, 16 ou 12 colunas.

Veja a referencia visual das grids.

O pacote tem 180Kb, mas não se assuste este não é o tamanho do arquivo CSS, o pacote consiste de um arquivo para impressão onde você pode rascunhar seu layout ou desenhar seu wireframe manualmente, modelos para Fireworks, Photoshop, OmniGraffle e outros. O 960.css arquivo em si é apenas 3,6 KB quando comprimido.

Veja o tutorial em vídeo de como utilizar o 960 Grid system:

HTML5 Less Framework »

04mar 2010, às 09:12

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

publicado por: Magno Valdetaro

Um poderoso html5 framework para construção de layouts inteligentes para sites com diferentes larguras de telas, essa é a premissa do Less Framework desenvolvido por Joni Korpi e distribuído sobre Creative Commons.

Less Framework é um framework (dã) CSS para construção de layouts para web multi-flexível. Ele contém uma grid de oito colunas otimizado para um line-height de 24px, bem como um conjunto de presets para tipografia com base no número de ouro que se encaixam em ritmo vertical da grid.

Less Framework funciona perfeitamente no Chrome, Safari 3.0+, Firefox 3.0+ e Internet Explores 7+. E se ajusta inteligentemente em uma única coluna em navegadores de dispositivos com tela pequena.

xCSS - Framework CSS orientado a objeto »

15out 2009, às 10:42

Publicado em Framework HTML / CSS Recursos | Comentários desativados »

publicado por: Magno Valdetaro

xCSS é um framework CSS que permite que você trabalhe orientado a objetos e mantenha um fluxo de trabalho simples no desenvolvimento de CSS complexas. Usar o xCSS reduz significativamente o tempo de desenvolvimento e te oferece: uma visão intuitiva da estrutura global da CSS, utilização de variáveis, reutilização e diversos outros recursos uteis. xCSS é leve e se integra a qualquer fluxo de trabalho e mantém seu HTML semântico.

jQTouch - Crie sofisticadas aplicações móveis com HTML, CSS e jQuery! »

08set 2009, às 08:49

Publicado em Ferramentas jQuery | Comentários desativados »

publicado por: Magno Valdetaro

jQTouch é um plugin do framework jQuery de desenvolvimento web para dispositivos móveis (PDA, iphone, celular, tablet e por aí vai). Com este plugin você pode criar sofisticadas aplicações apenas utilizando HTML, CSS e JQuery.

Coloque um chat estilo Gmail no seu Site ou Blog »

05jun 2009, às 09:04

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

publicado por: Magno Valdetaro

Todo munda adora a aplicação de chat do Gmail, Orkut e do Facebook. Pois então apresento a você o Gmail/Facebook Style jQuery Chat, um módulo baseado no famoso framework Jquery, semelhante ao chat usado nestes ambientes.

Rolagem com jQuery Scrollable »

20abr 2009, às 11:19

Publicado em jQuery | Comentários desativados »

publicado por: Magno Valdetaro

Com jQuery Scrollable é possível criar rolagens modernas em suas páginas. Sempre que você quiser rolar seus elementos HTML de uma maneira visualmente atraente você deve utilizar esta ferramenta. A diferença com este framework, é a possibilidade de fazer rolagens mais sofisticadas não possíveis com a disponível como padrão do navegador.