Postagens da categoria: html

Categoria voltada para a linguagem de marcação de texto HTML; com dicas, curso e códigos.

Banner lateral fixo e com Web Storage

banner fixo na lateralHoje vamos aprender como criar um banner que ficará posicionado de maneira fixa na lateral do blog ou site e quando o usuário clicar no botão para fecha-lo, ele não voltará a aparecer enquanto o usuário estiver navegando na mesma aba, porém se abrir o blog novamente em outra aba ou janela ele voltará a aparecer, nas mesmas condições.

Para se ganhar mais dinheiro com programa de afiliados antes de mais nada é necessário que o programa de afiliados tenha íntima relação com o tema do blog, isso já é algo bastante falado, mas acontece que também é necessário que o usuário perceba o banner e se interesse em clicar.

Continue lendo »

Quebra cabeças drag and drop com html5

Quebra-cabeças drag and drop html5Nesse tutorial vamos criar um pequeno quebra-cabeças em HTML5 que irá simular aquele tipo de quebra-cabeças de bolso onde fica sempre um lugar vazio e através do deslizamento das peças trocando de lugar com essa área vazia é possível colocar as peça no devido lugar.

No caso do nosso exemplo, por se tratar de um quebra cabeças virtual, será possível trocar qualquer peça e não apenas as que estão ao redor da área vazia.

Nos usaremos duas caracterĂ­sticas nativas do HTML5 que sĂŁo “drag” e “drop” que traduzindo para o portuguĂŞs seria mais ou menos “agarrar” e “soltar” que Ă© parte padrĂŁo do HTML5 e qualquer elemento pode ser agarrado e solto de um lugar para o outro.

Continue lendo »

VĂ­deo HTML 5

Como criar um player de vídeo em HTML5Esse pequeno tutorial vai lhe ensinar como exibir um vídeo em HTML5 usando a tag vídeo. Algumas funções como: tocar, pausar, aumentar e diminuir o tamanho do vídeo serão controladas usando DOM.

Esse exemplo usará o padrĂŁo de arquivo de vĂ­deo “video/ogg” com extensĂŁo “ogv” e funcionará no Chrome e FireFox, mas nĂŁo funciona no IE.

As funções será controladas por links configurados em CSS3 para que pareçam botões.

Continue lendo »

Trabalhando com Web Storage do HTML 5

Web Storage html 5 - localStorage e sessionStorage - dicas de htmlO HTML 5 traz boas surpresas, entre elas a Web Storage. Uma forma mais eficiente de gravar dados localmente.

A Web Storage do HTML5 veio para substituir o uso de Cookies, com a vantagem de ser mais seguro e também mais rápido.

Os dados são usados apenas quando solicitados não sendo necessário o seu carregamento a cada requisição no servidor.

É possível armazenar grande quantidade de dados sem no entanto afetar o desempenho do site.

Continue lendo »