Alterar cor da ilustração com o KineticJS

Continuando o estudo do KineticJS criei um novo teste. Consegui uma ilustração free de um Pato em SVG. Extrai os dados do Path de cada uma das partes utilizando o Inkskape e recriei o desenho utilizando o objeto Path do KineticJS. O resultado é um desenho para colorir bastante interessante.


Este é o link do http://kineticjs.com/ com a ajuda deste plugin foi bastante fácil. Utilizei o Color Picker, chamado de Rudimentary jQuery color picker, o demo dele está aqui.

Veja qual o resultado deste teste:

• Ver exemplo em tela cheia.

• Veja aqui o código fonte completo.

HTML5 Canvas, alterar a cor ao clicar

Conforme o título desta postagem o meu objetivo será alterar a cor de um objeto desenhado em um Canvas do HTML5 após realizar um click sobre ele. Para isso irei utilizar o HTML5 Canvas, javascript/jquery e algum plugin do tipo Color Picker em Jquery que irei escolher nos próximos dias. Como ponto de partida encontrei este site http://www.pageresource.com/html5/canvas-interactive-tutorial/ ele ensina os fundamentos necessários sobre o CANVAS.

Para melhorar ainda mais a brincadeira encontrei uma biblioteca fantástica chamada kineticjs. Este é o link http://kineticjs.com/ com a ajuda deste plugin foi bastante fácil. Consegui criar um Canva com um círculo e coloquei também um Color Picker, chamado de Rudimentary jQuery color picker, o demo dele está aqui. O teste funciona exatamente como eu queria. Clique em uma cor para selecioná-la e depois clique no circulo que ele irá mudar para a cor selecionada.

Veja qual o resultado do meu teste:

• Ver exemplo em tela cheia.

• Veja aqui o código conte completo.

Como usar a API do Grooveshark

A API do Grooveshark oferece dois tipos de acesso:

• Acesso enxuto
• Acesso completo

O acesso enxuto é muito fácil de conseguir e é instantâneo, basta cadastrar seu email que a chave é enviada.

Em um email assim:

"Your new Tinysong API Key.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

É este que irei utilizar.Para ter o acesso completo, segundo informação contida no site é necessário enviar uma mensagem para a equipe do Grooveshark explicando os objetivos e funcionalidades do seu aplicativo.

Vamos chamar o acesso enxuto, com o mesmo nome dado pela equipe Grooveshark: Tinysong API Key

É muito simples. Possui 3 métodos: a, b e s

O endereço para solicitar a API Key é http://tinysong.com/api

Neste mesmo endereço se encontra a documentação dos três métodos.

Segue o modelo geral para acionar os métodos
http://tinysong.com/method/query?format=json&key=APIKey

/a/

Este método retorna um único link. O Tinysong executa uma busca de música e artista concatenados e retorna o primeiro resultado encontrado.

Exemplo
http://tinysong.com/a/Fernandinho+Vento+Impetuoso?format=json&key=APIKey
Retorno
"http:\/\/tinysong.com\/17i3E"
Se não encontrar a música, retorna um set vazio, [] deste jeito será retornado

/b/
Este método faz a mesma busca do /a/ porém retorna informações adicionais sobre o link.

Exemplo
http://tinysong.com/b/Fernandinho+Vento+Impetuoso?format=json&key=APIKey
Retorno
{
"Url":"http:\/\/tinysong.com\/17i3E",
"SongID":36921568,
"SongName":"Vento Impetuoso",
"ArtistID":655665,
"ArtistName":"Fernandinho",
"AlbumID":8261801,
"AlbumName":"Teus Sonhos"
}

/s/
Este método faz o que os outros métodos fazem, porem exibe resultados multiplos com saída similar ao /b/. Se você deseja limitar o número de resultados, pasta adicionar o parametro 'limit' na url. Valor mínimo um e máximo trinta e dois. O Default é cinco.

Exemplo
http://tinysong.com/s/Beethoven?format=json&limit=3&key=APIKey

Retorno
[

{"Url":"http:\/\/tinysong.com\/17mCG",
"SongID":36921712,
"SongName":"Um Dia Em Tua Casa",
"ArtistID":655665,
"ArtistName":"Fernandinho",
"AlbumID":8261801,
"AlbumName":"Teus Sonhos"},

{"Url":"http:\/\/tinysong.com\/17iy2",
"SongID":36921686,
"SongName":"Mil Cairao",
"ArtistID":655665,
"ArtistName":"Fernandinho",
"AlbumID":8261801,
"AlbumName":"Teus Sonhos"},

{"Url":"http:\/\/tinysong.com\/17mB2",
"SongID":36921658,
"SongName":"Agindo Deus",
"ArtistID":655665,
"ArtistName":"Fernandinho",
"AlbumID":8261801,
"AlbumName":"Teus Sonhos"},

{"Url":"http:\/\/tinysong.com\/17gU2",
"SongID":36921629,
"SongName":"O Hino",
"ArtistID":655665,
"ArtistName":"Fernandinho",
"AlbumID":8261801,
"AlbumName":"Teus Sonhos"}
]

Como observado ó retorno é no formato JSON. É possível utilizar um widget flash para exibir o player em sua aplicação. Em breve colocarei o exemplo.

PostgreSQL com suporte a JSON: primeira versão estável liberada

Esta é a primeira postagem do meu blog, nele vou estudar tecnologias diversas voltadas ao desenvolvimento de software, devido a minha atuação atual a ênfase será no desenvolvimento web. Como acabo de saber que foi lançada hoje a versão 9.2 do sistema gerenciador de banco de dados PostgreSQL. E esta é a primeira versão do sistema com suporte nativo a JSON. Inicio aqui o estudo de como isto pode influenciar a forma de desenvolver para web. Para começo de análise fiz a tradução para o portugues da documentação do JSON oficial na referida versão.

8.14. JSON Tipo

O tipo de dados json pode ser utilizado para armazenar dados JSON (Anotação de Objeto JavaScript), como especificado no RFC 4627. Tal dado pode ser armazenado como text, mas o tipo de dados json possui a vantagem de checagem que cada valor armazenado é um valor JSON válido. Além disto estão disponíveis outras funções; veja a seguir a Seção 9.15.

PostgreSQL permite apenas uma codificação de servidor por banco de dados. Sendo assim não é possível para o JSON se adequar a rígida especificação a menos que a codificação do servidor seja UTF-8. Tentar incluir diretamente caracteres que não podem ser representados pela codificação do servidor irão falhar; ao contrário, caracteres que podem ser representados pela codificação do servidor mas não pelo UTF-8 serão permitidos. Os escapes \uXXXX são permitidos sem levar em consideração a codificação do servidor, e são checados apenas para correção sintática.

Leia a versão original no site oficial da documentação do PostgreSQL

9.15. Funções JSON

Função	Descrição	Exemplo	Resultado do Exemplo
array_to_json(anyarray [, pretty_bool])	Retorna o array como JSON. Um array multidimensional do PostgreSQL transformado em um array de arrays JSON. As linhas alimentadas serão adicionadas entre os elementos da dimensão um se pretty_bool for true.	array_to_json('{{1,5},{99,100}}'::int[])	[[1,5],[99,100]]
row_to_json(record [, pretty_bool])	Retorna uma linha como JSON. Returns the row as JSON. As linhas alimentadas serão adicionadas entre os elementos da dimensão um se pretty_bool for true.	row_to_json(row(1,'foo'))	{"f1":1,"f2":"foo"}

O objetivo é além de registrar meus estudos, compartilhar e trocar informações sobre as tecnologias estudadas. Sendo assim, sinta-se, obviamente, totalmente livre para enviar sugestões e opiniões sobre os temas abordados e sobre a forma como as postagens estão aqui expostas.