Month: August 2007

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

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

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/

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;
}