Boteco Digital

Javascript JQuery

Em muitos sistemas/páginas precisamos criar máscara em campos de entrada de informações para garantir que estas estejam no formato esperado. Para facilitar esta atividade podemos utilizar o plugin jQuery Mask Plugin que facilita bastante. Primeiramente, para utilizamos o plugin devemos baixa-lo, e para isto podemos baixar o zip pelo link fornecido pela página do plugin, ou clonar o repositório. Depois precisaremos inserir o arquivo do plugin na nossa página, este se encontra no diretório dist do arquivo baixado, e adicionar […]

mais
Javascript Web

Um recurso que está sendo utilizado principalmente em sites de notícias e redes sociais é a Notifications API que é bastante fácil de utilizar. Vamos logo para o exemplo: Veja o Exemplo Na linha 2 simplesmente configuramos um intervalo(a cada minuto) para nossas notificações sejam lançadas pelo método notificar. Colocamos em um intervalo para exemplo, mas ela seria lançada por algum evento em sua página. Na linha 7 verificamos se o recurso de Notification está presente no navegador. Na linha […]

mais
Javascript Web

Com os dispositivos móveis tomando conta do mercado, se faz necessário para vários tipos de aplicações saberem qual a posição do usuário para fornecer informações mais personalizadas e relevante. Com o HTML5 foi introduzido a possibilidade de pegar a posição GPS do usuário que pode ser feito de maneira muito fácil. Veja exemplo simples de Geolocalização Na linha 3 simplesmente pegamos um elemento HTML para realizar a saída para o usuário. Na linha 4 realizamos um teste para saber se […]

mais
Javascript JQuery

Um recurso muito interessante que pode agilizar o carregamento da página é somente carregar do servidor as imagens quando o usuário as visualizar. Esta técnica é conhecida como Lazy Load e o existe um plugin jQuery para fazer isso Lazy Load Plugin for jQuery que é bastante simples. Primeiramente inclua as bibliotecas jQuery e Lazy Load Plugin for jQuery: A ideia é que quando a página for carregada as imagens do site irão carregar uma imagem pequena na marcação img […]

mais
Javascript Web

A tag canvas foi introduzida no html 5 como uma das maiores novidades, introduzindo uma área onde podemos desenhar elementos específicos, formas geométricas e imagens através de javascript substituindo em certos aspectos o uso do flash. Então vamos ao primeiro exemplo: Retângulo Para desenhar dentro da área de canvas devemos primeiro pegar o elemento canvas e pegar o contexto 2D. Na linha 1 adicionamos uma função para ser executada após a página ser totalmente carregada, que executará nosso código para […]

mais
Javascript Web

Se você está por fora, o HTML5 trouxe elementos para exibição de áudio e video sem ter que utilizar um player em flash, basta que você coloque o elemento audio ou video que o navegador irá reproduzir exibindo os controles se quisermos. Vamos a um exemplo. Utilizamos o elemento audio e colocamos o atributo controls que irá exibir os controles play/pause, dentro deste elemento inserimos elementos source para fornecer os arquivos de áudio para serem tocados, o elemento source recebe […]

mais
Javascript JQuery

Um efeito interessante é o slideshow, imagens trocando em um intervalo de tempo com um efeito de transição, e já vimos como fazer um com elementos de imagem ou até outros elementos mas para fazer as imagens de fundo do site(o background do elemento body) ter um slideshow devemos fazer de outra forna, para isso podemos utilizar um plugin jQuery chamado supersized que resolve nosso problema. Então para começarmos baixe o plugin supersized e insira na sua página. Após isso […]

mais
Javascript JQuery

Devido ao pedido do amigo Thiago Finardi vou fazer um post sobre o plugin do jQuery Cycle, mais para apresentar do que para explicar como ele funciona, pois como veremos ele é muito simples e prático. Então o Cycle é um plugin para jQuery para utilizar o efeito de slideshow fornecendo uma série bem interessante de efeitos de troca. Parando com a enrolação vamos aos exemplos. Primeiramente não se esqueça de inserir o arquivo javascript da jQuery e da Cycle […]

mais
JQuery Web

Web Storage ou LocalStorage é uma nova especificação do HTML5 que visa fornecer um mecanismo para armazenar dados via chave/valor localmente no navegador do cliente. Esta especificação se difere do modelo clássico de cookies, primeiro por não possuir data de expiração e segundo por não enviar nenhum dado para o servidor a cada requisição poupando assim um pouco de banda. Basicamente existem dois tipos de armazenamento local: sessionStorage: armazena os valores somente enquanto a janela/aba estiver aberta. Então se fechar […]

mais
JQuery Web

Um dos plugins mais interessantes do jQuery é o jQuery UI, na verdade é um conjunto de plugins de interface combinado com Temas CSS que deixa seus sistemas web bem mais interessantes. Um dos “módulos” que mais gosto deste plugin é o datepicker, que para quem não sabe é aquele “calendariozinho” que aparece abaixo de um campo de formulário para selecionarmos uma data. Para utilizar o plugin você baixá-lo e para isso deve selecionar quais módulos do UI deseja utilizar. […]

mais