SandroSilva - Portfólio

Art Director, Front-end Developer and SEO Specialist.
SC Internacional and ECNH fan.
working at peopleway.com.br
São Paulo
Recent Tweets @sandrilho

Códigos para USO da API para Gráficos do jqPlot

Encontrar uma BOA api de charts é sempre muito complicado, algumas são incompletas e as masi completas não são free, ou no caso, também, não são liberadas para uso comercial. No meio de todas estas temos uma excelente que, além de ter muitas opções, também é open source.

Abaixo temos um exemplo de código de uso da API de Gráficos do jqPlot. No exemplo a seguir temos uma consulta feita a um JSON simulando a uma leitura de acessos de um site ou app.

Além dos dois tipos de gráficos exemplificados nos exemplos abaixo, a documentação e o próprio download de exemplo deixa o usuário bem à vontade para o desenolvimento de outros tipos de gráficos.

A documentação da API você pode encontrar aqui: http://www.jqplot.com/docs/files/usage-txt.html

Link do projeto:
https://github.com/sandroSilva/ApiCharts

Códigos para USO da API para consulta à Wikipédia

Abaixo temos um exemplo de código de uso da API da Wikipédia que após a consulta de uma palavra em português, retorna a primeira parte de uma consulta feita na Wikipédia.

O modo como você faz a consulta poderá ser testado na própria sandbox da Wikipédia:
http://en.wikipedia.org/wiki/Special:ApiSandbox

O código abaixo é para o retorno em XML com uma consulta feito pelo PHP, cujo resultado é impresso pelo Javascript, que recupera o XML gerado pelo PHP.

A documentação da API você pode encontrar aqui: http://www.mediawiki.org/wiki/API:Main_page

Link do projeto:
https://github.com/sandroSilva/apiWiki

Abaixo temos um exemplo de código de uso da API do Dicionário Aberto que após a consulta de uma palavra em português, retorna o seu significado.

O retorno da API pode ser tanto em JSON quanto em XML.
A diferença de cada uma está no link de consulta:
Para JSON:
http://dicionario-aberto.net/search-json/palavra

Para XML:
http://dicionario-aberto.net/search-xml/palavra

Além de disponibilizar a API para consulta online também é possível baixar o banco de dados para você ter o próprio dicionário dentro de seu banco de dados, a base de dados tem em torno de 80mb.
Apesar de ser um pouco incompleto, e de ser de um dicionário do português de Portugal, é uma boa opção para quem não quer vincular sua consulta a uma editora.

O exemplo do código abaixo é para XML.

A documentação da API você pode encontrar aqui: http://dicionario-aberto.net/estaticos/api.html

Link do projeto:
https://github.com/sandroSilva/Apidictionary

Códigos para tradução online de palavras ou textos completos.

Abaixo temos um exemplo de código de uso da API da MyMemory para traduzir textos e palavras, utilizando o retorno em REST.

O retorno dela é de uma, ou mais, traduções por alguns serviços de tradução como Wikipedia, Google Translate e de usuários.
Geralmente a primeira é a que possui a melhor qualidade e o exemplo a baixo apenas seleciona o primeiro resultado.
Para usuários anônimos é possível fazer até 100 requests por dia.

A documentação da API você pode encontrar aqui: http://mymemory.translated.net/doc/spec.php

Link do projeto:
https://github.com/sandroSilva/ApiTranslate

Desenvolvimento para Moveweb.com.br como freelancer.

http://www.sandrosilva.com.br/move/sinosclub/

Desenvolvimento para Moveweb.com.br como freelancer.

http://www.sandrosilva.com.br/move/oilur/

Desenvolvimento para Moveweb.com.br como freelancer.

http://www.sandrosilva.com.br/move/templatem/

Website Server Informática - http://www.serverinfo.com.br

Desenvolvido em HTML, CSS, Javascript e PHP.

Website feito como FreeLancer.

Aniamação desenvolvida para rodar em formato de vídeo.

Desenvolvimento em AS3.

Website feito enquanto profissional da Plan  - http://www.planmkt.com.br/ 
 

Quiz para ser executado em telão com touch screen.
Desenvolvimento em AS3.


Website feito enquanto profissional da Plan  - http://www.planmkt.com.br/  

O exemplo abaixo é de uso da API Urlshortener do Google: Google URL Shortener API

A aplicação é para entrada de um link original, por input, e o retorno é dado pro um link encurtado do Google URL Shortener com um link semelhante ao http://goo.gl/.

Foi testado e funciona corretamente em todos os últimos navegadores.

Link do projeto:
https://github.com/sandroSilva/Urlshortener

Hotsite Concurso Cultural Escritores da Imaginação.
http://www.xalingo.com.br/escritoresdaimaginacao/

Desenvolvimento em HTML5/CSS3, Javascript e jQuery

Website feito enquanto profissional da Plan  - http://www.planmkt.com.br/  

Abaixo temos um exemplo de um banner dinâmico em HTML5, onde eu uso a formatação e animação em CSS3, o desenvolvimento foi feito em Javascript com a framework jQuery e os dados, que podem ser diâmicos, utlizando um arquivo JSON.

A aplicação tem um modo simples e tranquilo para ser implantado em qualquer código, desde que o desenvolvedor tenha um mínimo de consciência do que esteja fazendo.

Todos os dados estão dentro do arquivo json/banner.json, como os links e as imagens de cada banner, o dado “_hash” é somente necessário se você precisa captar algo da url para alguma marcação em javascript. Poderemos colocar tantas imagens quanto queremos, pois o javascript tratará esta quatidade e organizará as mesmas.

Recebemos os dados através do arquivo js/banner.js, onde através da facilidade do jQuery, fazemos o load dos dados e aplicamos as imagens, links, e também a paginação das imagens, além do timer para o tempo de exbição de cada imagem no navegador.

Os dados são formatados com CSS3 no arquivo css/style.css onde aplicamos filters, transitions e border-radius em alguns elementos.

No arquivo index.html temos temos somente a linkagem de todos os arquivos acima e a marcação dos elementos em DIV.

Foi testado e funciona corretamente em todos os últimos navegadores (inclusive o Internet Explorer 10)

Link do projeto:
https://github.com/sandroSilva/banner-HTML5

Abaixo temos dois exemplos de trabalho com webcam a partir da API getUserMedia que está começando a ser implantada nos browsers, no entanto ainda somente o Google Chrome consegue suportar ela. Já outros navegadores estão começando a implantar esta nova API que permite o trabalho com webcam, desde trabalho com fotos e videos.

Captando e salvando uma imagem da webcam.

No link do código postado abaixo temos o exemplo de uma aplicação desenvolvida em HTML5 e Javascript, utilizamdo jQuery. Com ela, utilizamos a webcam do usuário para captar uma imagem, desenhar ela em CANVAS, depois poderemos salvar ela no sistema do usuário.

Esta aplicação funciona corretamente no Google Chrome e no Opera.

Link do projeto:
https://github.com/sandroSilva/SnapShot

Captando e salvando um vídeo da webcam.

No link abaixo temos o exemplo de captação da imagem da webcam, encodando o video para WebM e permitindo que o usuário salve o video produzido em seu computador.

Utilizei a classe Whammy que é um WebM Encoder em Javascript (http://antimatter15.com/wp/2012/08/whammy-a-real-time-javascript-webm-encoder/).

Esta aplicação funciona corretamente somente no Google Chrome.

Link do projeto:
https://github.com/sandroSilva/SalvaVideo