Artigos
205 visualizações

WebServices: Conceitos e Práticas

Thiago Borges Vieira - 30 de março de 2012

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.

Códigos
300 visualizações

Desabilitar a tecla ENTER para enviar formulário

Thiago Borges Vieira - 10 de janeiro de 2012

Através da biblioteca do jquery e com o código abaixo é possível travar o envio de formulário através do uso acidental da tecla ENTER.

Códigos
256 visualizações

Mudar cor de fundo das linhas de uma tabela com mouseover

Thiago Borges Vieira - 23 de dezembro de 2011

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.

Códigos
531 visualizações8

Crie efeitos para aparecer e ocultar elementos com jQuery

Thiago Borges Vieira - 27 de maio de 2010

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.

Códigos
388 visualizações

Efeitos de animação em menus com jQuery

Thiago Borges Vieira - 26 de maio de 2010

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.

Códigos
327 visualizações

Criando efeito de MouseOver e MouseOut no JQuery

Thiago Borges Vieira - 6 de maio de 2010

Este efeito é simples no exemplo e demosntraro como utilizar o jQuery para colocar o efeito onmouseout e onmouseover. Abaixo temos o código de exemplo.

Códigos
308 visualizações1

Efeito Toggle para revelar e esconder usando JQuery

Thiago Borges Vieira - 13 de abril de 2010

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.

Códigos
221 visualizações

Criando o efeito zebra em tabelas com JQuery

Thiago Borges Vieira - 6 de abril de 2010

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:

Códigos
195 visualizações

Conexão remota a sites utilizando sockets em PHP

Thiago Borges Vieira - 5 de março de 2010

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...

Códigos
331 visualizações8

Upload de imagens com redimensionamento e PHP

Thiago Borges Vieira - 21 de janeiro de 2010

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.