Boteco Digital

CSS Web

Animate.css é uma biblioteca CSS de pequenas animações com vários efeitos interessante para dar destaques em elementos da nossa página. Você pode conferir os efeitos na própria página do projeto. Vamos ao da biblioteca então, primeiramente devemos incluir a biblioteca no nossos head>o que pode ser feito direto pelo CDN: Baixando pelo bower: ou ainda baixando direto do Git do projeto Após a biblioteca estar carregada, para executar uma animação basta adicionar ao elemento desejado, via javascript, as classes “animated” […]

mais
CSS Web

Em muitos casos é necessário criar um input radio ou checkbox com aparecia diferente do padrão, normalmente utilizando uma imagem como botão. Este objetivo pode ser alcançado através de CSS. Então vamos aos exemplos. Para começar vamos ao clássico input radio de seleção de sexo, como visto abaixo: Começamos com o HTML, devemos colocar tanto o input radio quanto a imagem dentro do elemento label. Este label deve estar associado ao input através da propriedade “for”, propriedade que deve conter […]

mais
Java Web

Para começar vamos entender o que é um serviço REST: Representational State Transfer é um estilo arquitetural para aplicações cliente-servidor distribuídas e descentralizadas sobre a estrutura da Web. Este estilo tem como diferencial a utilização da infraestrutura web existente, como servidores, bibliotecas de clientes, entre outros, permitindo uma maneira simples de organizar as interações entre sistemas independentes. Ao ser criado, o REST reuniu um conjunto de restrições arquiteturais descritas abaixo: Cliente/Servidor: As responsabilidades devem ser separadas entre o cliente e […]

mais
Javascript JQuery Web

O efeito de Parallax tem se tornado uma moda hoje em dia, sendo um efeito muito interessante se não abusado. O Parallax de forma simples consiste em mover o plano de fundo, ou as diversas camadas que o compõe em velocidades diferentes, com isso enganando o cérebro e criando uma ilusão de profundidade. Vamos a um exemplo de um site de página única. Para começar o HTML: No conteúdo apresentado, os divs com a classe parallax são os elementos que […]

mais
CSS Web

As animações via CSS são uma forma simples de criar pequenos efeitos na página de forma rápida e simples e que não necessitam de conhecimento de Javascript. Uma animação CSS consiste em animar a transição de estilo CSS para outro, como a posição de uma imagem de fundo, a rotação de uma imagem, etc. Uma animação consiste de dois componentes: um estilo descrevendo a animação e um set de keyframes que descrevem o estado inicial e final do estilo CSS […]

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