Arquivos do Autor: Thiago Borges Vieira

Profissional que desenvolve para área de web, formado em ciência da computação com pós em engenharia de software. Desenvolve produtos voltados para a internet, com intuito de facilitar a vida dos usuários.

WebServices: Conceitos e Práticas

Artigo academico feito em 2008 por mim e mais 3 integrantes. Nele comentamos como funciona um WebService e temos exemplo de duas aplicações consultando os dados desse WebService, uma desktop desenvolvida em java e a outro web desenvolvida em asp. Leia Mais »

Mudar cor de fundo das linhas de uma tabela com mouseover

Um efeito bem legal com jquery é você mudar a cor de fundo de uma linha da tabela quando o mouse passar por cima dela, o código é bem simples: Como pode ser visto toda vez que o mouse passar sobre o elemento tbody>tr ele vai adicionar a classe over que existe no CSS, assim ele vai manipular facilmente este evento, segue o exemplo completo em anexo. Leia Mais »

Crie efeitos para aparecer e ocultar elementos com jQuery

No exemplo vamos mostrar o uso simples das funções de efeitos de jQuery. Vamos implementar um simples efeito de ocultar e mostrar um elemento da página web. Com jQuery faremos que ao clicar os links se oculte e se mostre a camada, com as funções da biblioteca Effects. Para começar, este é o código HTML do exemplo, que compreende tanto a camada como os links. Isto é uma camada que nos servirá para fazer efeitos! Ocultar a camada | Mostrar a camada Agora vem a parte interessante, que é na que associamos eventos a estes dois links e codificamos as chamadas às funções de Effects, que farão com que se mostre e se oculte a camada. O código Javascript, que faz uso de jQuery seria o seguinte: $(document).ready(function(){ $("#ocultar").click(function(event){ event.preventDefault(); $("#camadaefeitos").hide("slow"); }); $("#mostrar").click(function(event){ event.preventDefault(); $("#camadaefeitos").show(3000); }); }); Como se pode ver, primeiro temos que definir o evento ready do objeto $(document), para fazer coisas quando o documento está preparado para receber ações. Logo, se define o evento click sobre cada um dos dois links. Para isso, invoco o método click sobre o link, que selecionamos com jQuery através do identificador da etiqueta A. $("#ocultar").click(function(event){ Com isto estou definindo o evento click sobre o elemento com id="ocultar". Dentro da função a executar quando se clica, se coloca a chamada à função dos efeitos. $("#camadaefeitos").hide("slow"); Isto faz com que nossa camada, a que havíamos visto o identificador (atributo id) "camadaefeitos", se oculte. Passamos o parâmetro "slow" porque queremos que o efeito seja lento. Agora vejamos a função dos efeitos com outra chamada: $("#camadaefeitos").show(3000); Isto faz com que se mostre o elemento com id "camadaefeitos", e que o processo de mostrar-se dure 3000 milésimos de segundos. Segue o código do exemplo completo. Leia Mais »

Efeitos de animação em menus com jQuery

O jQuery trouxe aos desenvolvedores diversas facilidades na hora de implementar interações client-side. Uma delas é a opção de criar animações, com uma simples função animate conseguimos obter belos efeitos visuais. Diria até que essa função é a melhor maneira de substituir o flash (pelo menos em menus). Pois menus em flash quebram o conceito de acessibilidade de qualquer site. O jquery acaba sendo a melhor opção de obter efeitos animados legais sem comprometer a acessibilidade. Essa é um efeito simples q movimenta o texto com a propriedade text-indent. XHTML: Inicio Portfolio Contato CSS: #animation-1 li{ width: 200px; } #animation-1 li a { display: block; padding: 10px 5px; width:190px; background-color: #ccc } jQuery: $(document).ready(function(){ $("#animation-1 li a").hover( function(){ $(this).animate({ textIndent: "30px" }, 500 ); },function(){ $(this).animate({ textIndent: "0px" }, 500 ); }); }); Como pode ver é bem simples, graças ao jQuery, abaixo temos o código completo com mais exemplos, segue em anexo também o codigo completo. Leia Mais »

Efeito Toggle para revelar e esconder usando JQuery

Um dos efeitos mais empregados em desenvolvimento com uso da biblioteca jQuery é aquele que proporciona ao usuário a escolha de revelar e esconder conteúdos. O efeito toggler consiste em mostrar e esconder elementos, o efeito carrega consigo implicitamente as seguintes facilidades: * é simples e fácil de ser projetado; * requer cuidados mínimos para ser “não obstrutivo”; * permite inserir muito conteúdo em pouco espaço; * facilita a visualização e entendimento dos conteúdos; * proporciona interação agradável com o usuário; * cria impacto visual interessante. Abaixo segue o código script que manipula o efeito, em anexo vai um exemplo de utilização do efeito toggle. Leia Mais »

Criando o efeito zebra em tabelas com JQuery

Chamamos de efeito zebra o ato de alternarmos as cores de plano de fundo das linhas de uma tabela. A estilização consiste em colorir as linhas pares de uma cor e as impares de outra cor. A principal vantagem além de alterar o visual da tabela, é facilitar a compreensão e a leitura da mesma. Conseguimos esse efeito facilmente com as folhas de estilos em cascata (CSS). Para isso basta atribuir uma classe nas linhas pares (ou impares) e estilizar a classe conforme sua necessidade. Uma grande desvantagem é fazer isso em tabelas grandes. Outra forma de se fazer isso é com uma linguagem de programação: PHP, ASP etc. Aqui vou mostrar utilizando a biblioteca jQuery. O código é bem simples, consiste em ter uma tabela com as tags thead e tbody, onde thead vai ser o cabeçalho da tabela e tbody o corpo da tabela, e no caso vamos ter 2 estilos, zebraUm e zebraDois que vão ser para variar os cores da linha. Para a utilização desse código faz-se necessário importar a biblioteca jquery. Para zebrar basta do script que está no código abaixo, em anexo vai o exemplo completo: Leia Mais »

Conexão remota a sites utilizando sockets em PHP

Abaixo um exemplo de utilização de socket em PHP para fazer uma conexão remota a um site, com esse código é possível ainda fazer a conexão a páginas seguras apenas passando os parâmetros de usuário e senha na variável $data. Eu utilizei isso para fazer a conexão a uma .dll que gera um html no site de um cliente, assim podendo colocar isso em qualquer parte do site independente do método que foi criado anteriormente. Fica ai a idéia, use a imaginação... Leia Mais »

Upload de imagens com redimensionamento e PHP

O código é bem simples e pode fazer o redimensionamento de imagens no formato gif, jpeg e png. Os nomes das fotos são gerados utilizando o uniqid e ainda são criptografados com o md5, assim criando o nome da imagem de forma que nunca se repita e fique criptografada. Abaixo tem a classe que faz o upload da imagem e redimensiona a mesma. Para a utilização basta instanciar a classe e chamar o método Redimensionar onde vão ser enviados os dados da imagem, a largura que se deseja que a imagem tenha e a pasta onde será salva a imagem. Leia Mais »