 |
|
||||
 Código-Fonte Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
|||||
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Animação, Animações, Técnicas de Animação |
Como criar animações em HTML5 + JavaScript usando o método requestAnimationFrame() do objeto windowQuantidade de visualizações: 1958 vezes |
|
O método requestAnimationFrame() foi introduzido pela W3C (World Wide Web Consortium) há alguns anos, como forma de padronizar as alternativas que os navegadores mais populares tinham encontrado para tornar as animações mais suaves e sincronizadas com as taxas de redesenho de seus elementos gráficos, evitando o efeito "pisca-pisca" provocado pelos métodos setTimeout() e setInterval() do objeto window. Antes da padronização, porém, o navegador Firefox criou o método window.mozRequestAnimationFrame, o navegador Google Chrome criou o método window.webkitRequestAnimationFrame() e, para tornar as coisas mais complicadas ainda, o Internet Explorer (IE) veio e criou o método msRequestAnimationFrame(). Nem é preciso ser um gênio para imaginar a dor de cabeça que isso gerou, e a quantidade de código necessário para tratar cada navegador individualmente. No momento que escrevo esta dica, todos os navegadores dão suporte ao método window.requestAnimationFrame() da W3C. Dessa forma, a menos que esteja trabalhando com navegadores muito antigos, você não precisará se preocupar com as implementações proprietárias de cada um. Antes da chegada do método requestAnimationFrame(), tínhamos que fazer animações em JavaScript usando os métodos setTimeout() e setInterval(), definindo um tempo em milisegundos para a chamada de alguma função. Isso gerava um efeito desagradável aos olhos, pois nem sempre o tempo de atualização de nossas animações combinava com o momento de redesenho proporcionado pelo navegador. Por isso era comum o efeito "pisca-pisca". Ao usarmos o método requestAnimationFrame() nós obtemos duas vantagens: 1) A atualizações dos elementos de nossas animações é feita em sincronia com o redesenho proporcionado pelo navegador, a saber, 60 frames por segundo; 2) A função de callback definida em nossos códigos não é chamada quando a aba na qual a animação está contida estiver invisível, o que ajuda a poupar recursos e processamento. Então, depois dessa introdução teórica, vamos ver um exemplo. Veja a seguir um trecho de código que mistura e exibe as palavras de uma frase (que na verdade é apenas nomes de linguagens de programação) a cada vez que a função de callback é chamada pelo método requestAnimationFrame():
<!doctype html>
<html>
<head>
<title>Desenvolvimento de Games usando HTML5 e JavaScript</title>
</head>
<body>
<Canvas id="canvas" width="400" height="200"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// serve para controlarmos o redesenho do canvas
var contador = -1;
// função personalizada que permite embaralhar a
// ordem dos elementos de um array
function embaralhar(vetor) {
vetor.sort(() => Math.random() - 0.5);
}
// função que faz a animação
function animar(){
// é a primeira chamada ou já se passaram 50 frames
if((contador == -1) || (contador > 50)){
// a frase cujas palavras serão exibidas
var frase = "HTML5 Java Python Delphi C/C++ CSS";
......Abra esta página HTML no seu navegador e veja o resultado. Você perceberá que as palavras da frase são embaralhadas e animadas de forma suave, sem o efeito "pisca-pisca" que mencionei anteriormente. Observe também que coloquei um contador para diminuir a velocidade da animação. Esse é um recurso que usamos com muita frequência na programação de jogos usando HTML5 e JavaScript. Mas há mais coisas sobre o método requestAnimationFrame(). Não deixe de acompanhar as dicas dessa seção para aprender mais. |
 Link para compartilhar na Internet ou com seus amigos: |
HTML5 ::: HTML5 + JavaScript ::: Geolocation API |
Como usar a API Geolocation do HTML5Quantidade de visualizações: 1781 vezes |
|
A API Geolocation foi uma das adições mais importantes ao HTML5. Por meio desta API, os usuários podem compartilhar sua localização com seus sites favoritos. Um código JavaScript pode, por exemplo, capturar sua latitude e longitude, enviar para o backend de um servidor web e permitir que algumas aplicações façam coisas tais como encontrar lojas e locais mais próximos de você ou até mesmo mostrar sua localização em um mapa. Nos dias atuais (março de 2020), a maioria dos navegadores web e dispositivos móveis (celulares, computadores de bordo de veículos, etc) dão suporte à API Geolocation. É claro que, antes de usá-la, temos que estar atentos à algumas considerações: 1) A localização mais precisa é aquela fornecida por um GPS, e este geralmente não está presente em laptops ou desktop. No entanto, alguns sistemas operacionais possuem a capacidade de obter tal localização se você estiver usando posicionamento de WI-FI e também por meio do seu endereço IP (Internet Protocol). 2) O usuário poderá se recusar a fornecer sua localização. Assim, fique atento a este fato e teste sempre a existência da API Geolocation e também a concordância do usuário antes de efetuar alguma ação crucial nas suas aplicações. 3) Alguns navegadores web restringem o acesso à API Geolocation somente em ambiente HTTPs. Fique atento a este detalhe também. Vamos agora ver um trecho de código JavaScript que verifica a existência da API Geolocation no navegador:
<html>
<head>
<title>Testando a existência da API Geolocation</title>
</head>
<body>
<script type="text/javascript">
if(window.navigator.geolocation) {
window.alert("A API Geolocation foi encontrada.");
......Notem que o novo objeto geolocation foi adicionado ao objeto navigator, já existente nos navegadores desde suas primeiras versões, e tudo que fizemos foi testar a existência de tal objeto. Pronto! Agora que já sabemos para que serve a API Geolocation e como verificar a existência do objeto geolocation, o passo seguinte é aprender como detectar a latitude e longitude do usuário. Nesta seção você encontrará mais dicas relacionadas a isso. |
HTML5 ::: Referência Tags/Elementos HTML5 ::: Tag/Elemento <Video> |
Como usar a tag/elemento <video> do HTML5 em suas aplicações webQuantidade de visualizações: 1637 vezes |
|
A tag/elemento <video> do HTML5 é usada quando queremos incorporar um vídeo em nossos documentos HTML sem incluir plugs adicionais, tais como o Flash Player. Contudo, o suporte a este elemento pode variar de navegador para navegador (faça testes com seus navegadores alvos antes). Em geral, navegadores que dão suporte ao elemento <video> suportam os seguintes formatos de vídeo: MP4, Ogg e WebM. Veja um documento HTML que carrega um vídeo MP4: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Como usar a tag video do HTML5</title> </head> ...... Quando você abrir esta página HTML, você verá um vídeo na tela já com os controles para iniciar, pausar, e parar a execução (contanto que você tenha informado um endereço válido para o vídeo). Note que não especificamos o tamanho do vídeo na página, o que fará com que o elemento <video> tenha as dimensões do vídeo que foi carregado. |
HTML5 ::: HTML5 + JavaScript ::: Geolocation API |
Como retornar a localização do usuário usando o método getCurrentPosition() da API Geolocation do HTML5Quantidade de visualizações: 2480 vezes |
O método getCurrentPosition() da API Geolocation do HTML5 nos permite obter tanto a latitude quanto a longitude do usuário que está acessando nossas páginas web. A forma mais simples deste método requer apenas uma função JavaScript que receberá o objeto de coordenadas. Veja o trecho de código a seguir:
<html>
<head>
<title>Obtendo a latitude e longitude usando a API
Geolocation</title>
</head>
<body>
<script type="text/javascript">
function mostrarPosicao(posicao) {
document.writeln("<h1>Latitude: " + posicao.coords.latitude +
"; Longitude: " + posicao.coords.longitude + "</h1>");
}
// não se esqueça de testar se o navegador web suporta a API
......Ao executar este trecho de código, a primeira coisa que você verá é uma mensagem do navegador avisando que o site a partir do qual o código está sendo executado quer saber sua localização. A mensagem exibirá os botões Permitir ou Bloquear. Se você clicar no botão Permitir, a latitude e longitude serão escritas no navegador: Latitude: -16.7143838; Longitude: -49.2327622 ...... É claro que, se você estiver executando o código em um laptop ou desktop, o resultado será muito diferente daquele mostrado no seu celular. O motivo é que, em geral, um GPS não está disponível nos laptops e desktops. Por essa razão, o navegador vai obter sua localização usando posicionamento de WI-FI e também por meio do seu endereço IP (Internet Protocol). |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
