Postagens

Mostrando postagens de 2014

Efeito natalino de flocos de neve com canvas

Hou hou hou galera, natal está logo ai, e queria desejar tudo de bom para todos e desejar um 2015 melhor que 2014.

Estava precisando fazer alguma coisa no portal da empresa e achei esse efeito bem legal


Basta somente adicionar o canvas depois do body

<canvas id="snowball"></canvas>
O criar no onload da pagina a seguinte chamada

window.onload = function(){ //canvas init var canvas = document.getElementById("snowball"); var ctx = canvas.getContext("2d"); //canvas dimensions var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canvas.height = H; //snowflake particles var mp = 25; //max particles var particles = []; for(var i = 0; i < mp; i++){ particles.push({ x: Math.random()*W, //x-coordinate y: Math.random()*H, //y-coordinate r: Math.random()*4+1, //radius …

Controlando as pageviews do Google Analytics com Angularjs

Eae pessoal, estava com problema que não conseguia mais controlar as pageviews do meu novo site com o uso do angular, já que ele não redireciona quando alteramos uma rota, simplesmente ele altera todo o conteúdo de um determinado contêiner, deste modo esta procurando como fazer isso, e na verdade a solução é bem fácil.

$scope.$on('$routeChangeSuccess', function(next, current){ ga('send', 'pageview', {page: $location.path()}); });
Só de olhar já dar de ter uma noção, mas vamos explicar né? Criamos primeiro um listener com o $scope.on no evento $routeChangeSuccess, que é o evento quando é terminado a alteração da route e neste evento chamamos um método da api do Analytics, que manda o dado da pageview com a url atual, que é o que o $location.path() faz.

É isso ai galera, cometem compartilhem, qualquer dica ou sugestão de alguma coisa que gostariam de saber é só deixar ai nos comentários ;)

Fonte: https://blog.nraboy.com/2014/11/tracki…

Menu off-screen somento com CSS

Fala galera, estava qui vendo desenvolvendo um menu off-screen somente com o CSS e descobri 2 artigos bem legais para compartilhar, o primeiro que me demonstrou a ideia foi o do Austin Wulf.


Que de forma bem simples podemos fazer um menu bem legal e o melhor de tudo, sem usar o javascript.

A grade sacada no menu é a utilização de um input checkbox com a propriedade "checked", e a utilização de uma label com o atributo 'for', basicamente a label com o atributo "for" quando clicada ela altera o checkbox para "checked" e com isso ele faz a transição do elemento que ele quiser que estiver posterior a um checkbox  "checked" utilizando o selector "~" ou "+" do CSS, bem simples não?

Tem também outro artigo da ZURB University, que demonstra vários outros tipos.

Por hoje é só pessoal!

Parallax somente com CSS

Fala galera, irei postar também agora dicas de artigos que vi e achei legal, iria fazer o exemplo mas o mesmo está bem explicado e tem o demo e tudo, então é isso ai segue o link:

http://keithclark.co.uk/articles/pure-css-parallax-websites/

Criando tema em CSS com currentColor, background e opacity

Imagem
Fala galera, encontrei uma palestra que fala sobre currentColor(http://simurai.com/blog/2014/05/04/cssconf/) e aconselho muito assistir a palestra, que ele faz um esquema de dimensionar os elementos utilizando a medida rem.



Já a propriedade currentColor depende da cor do elemento pai ou a está corrente atualmente no elemento. Por exemplo podemos criar uma classe que se chama 'cor-padrao' e dai onde queremos que essa cor possa influenciar colocamos o valor de currentColor.

<button class="cor-padrao"></button> .cor-padrao{ color: red; } button{ color: currentColor; border: 1px solid currentColor; }
Com isso ao alterarmos o valor da classe 'cor-padrao' alteramos toda a cor da aplicação, como no exemplo abaixo.


É isso ai galera, abração.

Slides da palestra do Day Software IFRO

Fala galera segue em anexo os slides da apresentação da palestra do IFRO.

HTML5 Application Cache

Bom dia galera, hoje estava aqui pesquisando de como fazer o cache das páginas do site e descobri sobre o HTML5 Application Cache. Mas como que ele funciona?

Simples, na sua TAG HTML você coloca o atributo manifest

<html manifest="site.appcache">
O exemplo acima se ele estiver na mesma pasta do arquivo HTML ou pode ser também requisitado para uma URL, mas este segundo precisa que a URL seja do mesmo domínio.

<html manifest="http://www.example.com/example.mf">
Sendo a sua estrutura da seguinte forma.

CACHE MANIFEST

Primeirva linha obrigatória, que indica que o arquivo é um manifesto

CACHE:

É a seção padrão para entradas. Os arquivos listados sob esse cabeçalho (ou imediatamente após CACHE MANIFEST) serão explicitamente armazenados em cache após o primeiro download.

NETWORK:

Os arquivos listados nessa seção são recursos seguros que necessitam de conexão com o servidor. Todas as solicitações para esses recursos ignoram o cache, mesmo que o usuário estej…

II Day Software do IFRO

Imagem
Ola pessoal, no dia 18/10/2014 terá o  II Day Software do IFRO, com palestras e mini-cursos, neste dia irei dar uma palestra e mini-curso sobre "Otimize sua página Web e Web components", creio que será uma boa oportunidade para trocar experiencias e obter novos conhecimentos, se tiver tempo da uma passadinha la.



Teclas de atalho(accesskey) no HTML5

Fala galera, descobri um recurso que pode ser útil para algumas pessoas, dando uma funcionalidade a mais para as aplicações WEB, que é o atributo accesskey em qualquer tag do html5 , com ele conseguimos fazer as aplicações terem teclas de atalho, o único problema é que existe uma diferença da tecla, pressionada com com a letra que queremos, para ficar mais claro segue o exemplo abaixo.

<!DOCTYPE HTML> <html lang='pt-br'> <head> <title>Accesskey</title> <meta name="author" content="AccessKey"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> </head> <body> <ul> <li>IE, Chrome, Safari, Opera 15+: [ALT] + <em>accesskey</em></li> <li…

DRY - Don't repeat yourself

Boa tarde galera, desculpa ai pelo o tempo sem postar algo, final da minha especialização ai já viram né?, então, um principio básico da programação e que mesmo assim eu não conhecia e que independente do paradigma que utilize, é a filosofia do DRY(Don't repeat yourself), isso mesmo, não deixar alguma parte do seu código escrita igual em dois lugares ao mesmo tempo no seu código, porque quando começamos é bem mais fácil fazer um Ctrl+C e Ctrl+V, mas essa pequena dica assim apesar de já existir no princípio também do SOLID, é de grande ajuda, para exemplificar isso irei dar o meu próprio exemplo e que vocês irão entender a ideia.

Eu utilizava o biblioteca jquery e com isso vazia muito a mesma requisição, mesmo o método sendo muito pequeno como este:

var urlPadrao = api.seusite.com/ $.ajax({ url: urlPadra + 'getParametros', success: function(retorno){ console.log(retorno) }, error: function(retorno){ ErroPadrao(); } }

DevTools alterar formato da cor

Imagem
Fala pessoal, estava precisando saber quanto valia uma cor em rgb em hexadecimal ou em hsl, e sabia que tinha como alterar, mas não sabia como, deste modo pesquisando pela a internet descobri a solução a baixo.


Quando clica em cima da cor, abre o colorpicker para poder trocar a cor, se clicar em cima da com com o Shift, o Chrome altera em as opções de rgb, hexadecimal e hsl.

Foi muito útil para mim, espero que tenha sido para vocês ou pelo o menos fica a dica, se algum dia precisar já sabem que existe, mesmo que seja só para converter o formato.

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.