Criar Gráficos com AJAX, CSS e JavaScript

Esta cada vez mais simples criar gráficos utilizando javascript, css e XHTML.

Guarde essa lista de sites que oferecem scripts e códigos para criar todo tipo de gráfico: barra, linha, pizza, gráficos em 3d, que com certeza você vai precisar em algum projeto um dia.

  1. http://bitelia.com/2014/07/librerias-javascript-para-graficos
  2. dhtmlxChart: Quick and Easy-to-Use JavaScript Charts
  3. http://ajaxian.com/archives/dojo-charting-engine-released
  4. http://www.liquidx.net/plotkit/
  5. http://solutoire.com/plotr/
  6. http://dragan.yourtree.org/blog/en/2007/03/31/ajax-mgraph/
  7. http://www.terrill.ca/design/vertical_bar_graphs/
  8. http://meyerweb.com/eric/css/edge/bargraph/demo.html/
  9. http://petewilliamsagency.com/css/examples/pie/
  10. http://www.khmerang.com/index.php?p=118
  11. http://timepedia.org/#introdemo%28O-694306739000%2CD1835481600000%29
  12. http://www.reach1to1.com/sandbox/jquery/jqchart/
  13. http://www.dynamicdrive.com/dynamicindex11/piegraph.htm
  14. http://www.dynamicdrive.com/dynamicindex11/linegraph.htm
  15. http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55
  16. http://www.liquidx.net/canvasgraphjs/
  17. http://www.splintered.co.uk/experiments/archives/css_bar_graphs/
  18. http://www.maxdesign.com.au/presentation/percentage/
  19. http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
  20. http://www.standards-schmandards.com/exhibits/barchart/
  21. http://www.khanate.co.uk/graph/
  22. http://dragan.yourtree.org/blog/en/2007/08/05/canvas-3d-graph/
  23. http://www.cssplay.co.uk/menu/barchart.html
  24. http://webfx.eae.net/dhtml/chart/demo.html
  25. http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55
  26. http://nces.ed.gov/nceskids/createagraph/default.aspx
  27. http://fooplot.com/
  28. http://www.flowchart.com/
  29. http://lorelle.wordpress.com/2006/01/05/css-bar-graphs-and-charts/
  30. http://www.ejschart.com/
  31. http://www.amcharts.com/pie/
  32. http://www.thinkvitamin.com/features/design/create-cross-browser-vector-graphics

Fonte: http://neosite.ilogic.com.br

dhtmlxChart: Quick and Easy-to-Use JavaScript Charts

Livro: Learning JQuery: Better Interaction Design and Web Development with Simple Javascript Techniques

O primeiro livro exclusivo sobre Jquery, não é um tutorial é um livro completo, com toda a parte teórica e muita prática.

Veja o que  pode ser feito com essa biblioteca:

A biblioteca jQuery oferece uma camada de abstração de finalidades gerais para scripts comuns na internet, e logo é útil em cada situação de script. Sua natureza extensível significa que nós nunca poderíamos cobrir todos os usuários possíveis e funções em um livro só, como plugins são constantemente desenvolvidos para adicionar novas funcionalidades. As características de núcleo dirigem-se as seguintes necessidades:

Acessa partes da pagina: Sem uma biblioteca JavaScript, muitas linhas de código devem ser feitas para acessar a arvore do Document Object Model (DOM) e localizar partições especificas de um estrutura do documento HMTL. jQuery oferece um robusto e eficiente seletor para pegar o pedaço de um documento que é para ser inspecionado ou manipulado.

Modifica a aparência da pagina. CSS oferece um poderoso método que influência a maneira que o documento é renderizado, mas ele falha quando os browsers não suportam todos os mesmos padrões. jQuery pode fazer uma ponte sobre esta abertura, oferecendo os mesmos padrões de suporte para todos os browsers. Além disso, jQuery pode mudar as classes ou propriedades de estilo individual aplicado para um pedaço do documento mesmo depois que a pagina foi renderizada.

Altere o conteúdo de uma página. Sem limites para meras alterações cosméticas, jQuery pode modificar o conteúdo de um documento ele próprio com poucos dígitos. Textos podem ser alterados, imagens podem ser inseridas ou trocadas, listas podem ser reordenadas, ou a estrutura inteira do HTLM pode ser reescrita e entendida – tudo com um simples easy-to-use API

Responda a uma interação do usuário com uma página. Mesmo os mais elaborados e poderosos comportamentos não são úteis se nós não pudermos controlar quando eles ocorrem. A biblioteca jQuery oferece uma elegante maneira de interceptar uma grande variedade de eventos, tais como um click de um link, sem a necessidade de desordenar o código HTML dele próprio com o manipulador de eventos. No mesmo tempo, sua API de manipulação de evento remove as inconsistências de browsers que frequentemente enche o saco dos desenvolvedores.

Adiciona animação à página. Para implementar efetivamente como comportamento interativo, um designer deve também oferecer feedback visual para seus usuários. A biblioteca jQuery facilita isto oferecendo um quantidade de efeitos como fades e wipes.
Recupere informações de um servidor sem recarregar a pagina. Este padrão de código tornou-se conhecido como AJAX, e ajuda desenvolvedores web a criarem sites ricos. jQuery remove as complicações específicas deste processo, permitindo que desenvolvedores foquem nas funcionalidades do servidor.

Simplificando tarefas triviais em JavaScript. Além de toda as essas características do jQuery, o biblioteca oferece realce para as construções básicas do JavaScript, como interação e manipulação de array.

Download: DEPOSITfiles | RapidShare | MegaUpload – (5.5M)

Buscadores de Códigos

Não reinventar a roda na hora de desenvolver, é algo fundamental, economizando tempo e recursos. É comum reutilizarmos códigos que já trabalhamos, porém muitas outras vezes, precisamos ir pesquisar, algum exemplo do que estamos querendo (porque sempre vai haver algo)… e neste caso nada melhor que os buscadores de código especializados.

Já falamos aqui do Krugle, que é um projeto OpenSource de busca de códigos, porém além dele, existem outros, vejamos:

  • Koders.com: é o melhor de todos. Fácil de usar, e além de encontrar códigos, permite encontrar novos projetos open source.
  • O’Really Labs Code Search: uma base de dados, com 123.000 exemplos e mais de 2 milhões de linhas de código.
  • Google Code Search: parte do projeto Google Labs, permite usar operadores para refinar a busca, como por exemplo lang: o file:.
  • Codase: oferece um os melhores resultados entre os buscadores..
  • JExamples: buscador de códigos Java.
  • JSourcery: busca em APIs Java open source.
  • Merobase: permite encontrar, compartilhar e reutilizar componentes de software.
  • All The Code: buscador de códigos preferencialmente em java, porém novas linguagens estão sendo acrescentadas.
  • CSourceSearch
  • EMC Dev Network: Busca em mais de 300.000 linhas de código.

Fonte: Top 10 dos buscadores de código

Best Practice: Select lentas, rápidas e super-rápidas.

Infelizmente nos dedicamos tanto na hora de desenvolver, que não nos aprofundamos nas características que oferecem cada ferramenta.

E as melhores práticas entram exatamente ai. Neste primeiro post desta categoria, vamos comentar sobre o uso do comando Select em uma base de dados Mysql, que com algumas otimizações podemos ter resultados bem mais rápidos.

Busca de Palavras

/* Muito rápida */
SELECT * FROM tabela WHERE MATCH (`campo`) AGAINST (‘palavra’)

/* Rápida */
SELECT * FROM tabela WHERE MATCH (`campo`) AGAINST (‘+palavra’ IN BOOLEAN MODE)

/* Lentas */
SELECT * FROM tabela WHERE RLIKE ‘(^| +)palavra($| +)’

/* Super lenta */
SELECT * FROM tabela WHERE RLIKE ‘([[:space:]]|[[:<:]])palavra([[:space:]]|[[:>:]])’

Busca de Conteúdo

/* Muito rápida */
SELECT * FROM tabela WHERE MATCH (`campo`) AGAINST (‘palavra*’ IN BOOLEAN MODE)

/* Rápida */
SELECT * FROM tabela WHERE FIELD LIKE ‘palavra%’

/* Lentas */
SELECT * FROM tabela WHERE MATCH (`campo`) AGAINST (‘*palavra*’ IN BOOLEAN MODE)

/* Super lenta */
SELECT * FROM tabela WHERE campo LIKE ‘%palavra%’

Número de registros

/* Muito rápida */
SELECT SQL_CALC_FOUND_ROWS * FROM tabla WHERE condición LIMIT 0, 10
SELECT FOUND_ROWS()

/* Rápida */
SELECT * FROM tabela WHERE condicao LIMIT 0, 10
SELECT COUNT(chave) FROM TABELA WHERE condicao

Fonte: PHP Mysql tips

Anotações sobre projetos de web sites e portais

Avellar & Duarte, é uma empresa de design e consultoria do Rio de Janeiro. Criaram em seu site institucional um glossário e técnicas para quem deseja trabalhar com desenvolvimento web.

No portal é possível aprender muito sobre qual metodologia adotar na hora de começar a desenvolver um projeto, tudo passo-a-passo:

  • Contextos de projeto (web)
  • Iniciação e planejamento
  • Conceituação
  • Elaboração da estrutura
  • Interface
  • Características do conteúdo
  • Recursos, técnicas
  • Produção
  • Lançamento
  • Encerramento, manutenção
  • Dispositivos móveis

Sem dúvida uma fonte excelente de consulta e aprimoramento.

Link: http://www.avellareduarte.com.br/

Link para arquivos com imagem de acordo com o tipo

Sei que parece meio estranho o tema deste post, mas o assunto é simples.

Sabe quando você precisa fazer um link em sua página para um documento .doc, .pdf, .xls e outros? Pois é, como indicar para o usuário que aquele link é um documento tipo DOC ou um documento PDF?

Alguns usam duas colunas, onde colocam o ícone do tipo de documento de um lado e o link do outro, até funciona, mas não é nada prático. O ideal seria identificar o tipo de documento automaticamente, e assim já inserir o ícone apropriado.

Tendo como referência o artigo CSS 2.1 Selectors, e os mini-ícones do site famfamfam, é possível criar umas classes CSS para fazer isso, vejamos:

a[href$=’.pdf’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(Images/PDF.gif) center left no-repeat;
}

Também é possível criar links com ícones personalizados para os tipos comuns:

a[href^=”http:”] {
display:inline-block;
padding-right:14px;
background:transparent url(/Images/link.gif) center right no-repeat;
}

a[href^=”mailto:”] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/email.gif) center left no-repeat;
}

a[href$=’.pdf’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/pdf.gif) center left no-repeat;
}

a[href$=’.swf’], a[href$=’.fla’], a[href$=’.swd’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/flash.gif) center left no-repeat;
}

a[href$=’.xls’], a[href$=’.csv’], a[href$=’.xlt’], a[href$=’.xlw’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/excel.gif) center left no-repeat;
}

a[href$=’.ppt’], a[href$=’.pps’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/PowerPointIcon.gif) center left no-repeat;
}

a[href$=’.doc’], a[href$=’.rtf’], a[href$=’.txt’], a[href$=’.wps’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/WordDocIcon.gif) center left no-repeat;
}

a[href$=’.zip’], a[href$=’.gzip’], a[href$=’.rar’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/ZIPIcon.gif) center left no-repeat;
}

phpCodeGenerator: Códigos para seu BD automático

Depois falam que PHP não presta.

phpCodeGenerator é uma biblioteca para gerar sites inteiros através de um banco de dados.

Permite ler o banco de dados e gerar uma página web que permita criar, listar, editar, modificar e deletar os registros.

Funciona com qualquer banco de dados compatível com ADODB, como MySQL, Microsoft Access, PostgreSQL e outros.

A informação que contém um banco de dados: esquema, tabelas, campos e propriedades, é suficiente para criar algumas classes que permita criar, editar, atualizar e deletar registros. Formando assim uma base para que o desenvolvedor logo possa realizar sua aplicação web mais facilmente.

O framework phpCG permite construir aplicações PHP orientadas a objetos que são extensíveis, portáveis e escaláveis.

Link: phpCodeGenerator

Fonte: International PHP Magazine

MySQL Proxy – Otimizador de Banco de Dados

MySQL Proxy é uma aplicação, em fase inicial, que você instala entre sua aplicação e o MySQL.

Permite monitorar, analizar e transformar as comunicações. Sua flexibilidade permite um número ilimitado de usuários, balanceamento de carga, teste de falha, análise de querys, filtros e modificações de querys e muito mais.

Disponível para Linux, Mac OSX, FreeBSD, IBM AIX e Sun Solaris, isso mesmo, para Windows ainda não esta disponível por ter problemas com uma biblioteca libevent, porém em breve estará disponível também

Link: MySQL Proxy