Postagens

Mostrando postagens de Julho, 2014

Import no html

Fala pessoal, está agora na fase de working draft o html import, mas agora com a versão atual do Chrome e do Opera já é possível utilizar este recurso, podendo ser conferido no site caniuse. Isso ajuda muito o conceito de Web Components que está começando a ser produzindo atualmente, com esse novo recurso, podemos fragmentar o código e reaproveita-lo novamente em outras páginas.

Então vamos ai o exemplo, primeiro criamos o index.html

<!DOCTYPE HTML> <html lang='pt-br'> <head> <title>André Betiolo</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <link rel="import" href="views/header.html"> </head> <body> <section class="main"></section> …

Compressor de imagem e javascript

Esta fazendo teste com o Page Speed do Google, para aumentar a performasse do site em que trabalho, pois verificando em na maioria destes tipos de sites, o problema estava nos tamanhos das imagens e do scripts, com isso achei duas ferramentas muito boas para ajudar a diminuir o tamanho o primeiro é o Compressor.io que comprime imagens, fiz o teste e alterou quase nada a qualidade das imagens e sempre diminuindo o tamanho no minimo reduzindo a 18% e chegando a 90% em algumas imagens e segundo é o de javascript que é o JavascriptCompressor, que ajudou bastante.

É isso ai galera!, da um plus ai, e compartilhem ;)

Domínio grátis TK

Estava procurando se tinha algum domínio grátis que poderia usar e que não fosse tão feio que nem alguns que encontrei, então procurando entre os free, achei o domínio TK, onde o fica onomedoseudominio.tk, achei um domínio legal e gostaria de compartilhar com vocês.

Vibrando o dispositivo com HTML e JS

A W3C com ajuda da Google e do Mozilla estão trazendo vários features de dispositivos nativos, que podem ser acessadas por API através do HTML5 e JS, como a geolocalização e utilização do microfone dos aparelhos, e dentre essas novas funcionalidades também se encontra a de vibração de dispositivos que é a API Vibration, podendo ter várias utilidades, principalmente para a galera que está fazendo jogos, pode ser utilizada também para notificações.

Para fazer os dispositivo vibrar é só fazer a seguinte chama:

navigator.vibrate(1000);
Este "1000" corresponde a um segundo pois o tempo é medido milissegundos. Se quiser intercalar é só colocar dentro de um intervalo de um array.

navigator.vibrate([500, 1000, 1500]);
E se quiser parar de vibrar é só atribuir o valor 0;

navigator.vibrate(0);
Um exemplo completo já com botoes para baixar e testar localhost é encontrado la no meu GitHub.


Emulação Mobile utilizando o Chrome devtools

Imagem
Debugando um código depois de descobrir que o Chrome tem debug só clicando no número da linha, me aventurando por ele, ao clicar em cima do ícone que nem na imagem abaixo(O Chrome devtools apareci apertando F12 do teclado).

Ai vi a aba de "Emulation", e coloquei os dados e deu certo, para quem quiser testas, coloquei em ordem numérica os passos para serem seguidos para testar



É isso ai galera, por hoje é só ;)


Tooltip feito só com CSS

Imagem
Hoje irei demonstrar como fazer aparecer uma tooltip aparecer como um complemento de explicação quando alguém coloca o mouse em cima de um form.


Pra fazer este efeito primeiro criamos o form utilizando um data atributo com o nome "data-tooltip" e colocamos a classe "tooltip" para servir como identificador.

<form autocomplete="on" data-tooltip="Digite seus dados para acessar o sistema" class="tooltip"> <h3>Login</h3> <input type="text" name="nome" placeholder="Nome"><br> <input type="password" name="senha" placeholder="Senha"><br> <button MostarTooltip>Cadastar</button> </form>
E depois implementamos a classe.

.tooltip{ position: relative; } .tooltip:hover:after{ padding: 5px 15px; border-radius:…

Efeito de zebra na tag TR de uma tabela utilizando somente CSS

Um efeito que precisei achar que é bem fácil de ser feito e que pode dar uma melhorada da UI de uma aplicação é o efeito de "zebra" em uma TR utilizando somente CSS.



Para fazer este efeito na sua tabela, basta colocar o código abaixo e alterar o valor de background para o valor que desejar.

tr:nth-child(even){ background: #CFCDCD; };
Que faz o efeito demonstrado na figura ou também pode baixar o exemplo completo la no meu GitHub ou acessando diretamente http://andrebetiolo.github.io/demos/efeitoZebraTr/.

Fonte: w3schools

Utilizando o PHP para criar variáveis no CSS

Fala galera,

Achei uma forma bem útil de criar variável em CSS utilizando o PHP para isso, pode não ser a melhor solução já que se pode utilizar o LESS para isso, mas para alguém que já programa com PHP fica muito mais fácil de fazer, fora que não precisa ficar dando build toda vez antes de usar, mas vamos ao exemplo.

Primeiro criamos a página a index.php

<!DOCTYPE HTML> <html lang='pt-br'> <head> <title>Variavél em CSS utilizando PHP</title> <meta name="description" content="Teste utilizando o PHP para criar váriaveis no CSS"> <meta name="keywords" content="CSS,PHP"> <meta name="author" content="André Betiolo"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> …

Primeiro Post, olá mundo!

Fala galera, desculpe aos os companheiros da área pelo o trocadilho do título, mas é mais isso mesmo, este blog é destinado para eu mostrar algo que acho interessante sobre algo sobre desenvolvimento ou alguma coisa que acho que pode ser revelante para ser disseminado, tentando sempre transmitir de forma mais prática o possível.