HTML5 / CSS3/ Polymer/ Web Components

Gravação Componentizando a Web com Polymer

Welcome - Polymer

No último sábado aconteceu outro Hangout da série tecnologias Google para desenvolvimento Web.

Eu particularmente estou adorando a receptividade do público que está fomento por tanto conteúdo.

Nesse hangout eu mostrei um pouco sobre componentes Web, arquitetura do Polymer e como ele pode resolver alguns problemas já existentes.

Quem quiser assistir, está on-line a gravação no youtube.

Código fontes e slides são disponíveis pela licença Creative Commons, significa que você pode modificar e mencionar a fonte original, com isso você pode fazer a mesma apresentação no seu grupo de usuários, estudos etc.

Slides: Baixar Slides

Exemplos criados no Hangout:
Fork no Github

Aproveito e faço o convite para os próximos que sempre acontecem na última semana de cada mês.

Quem perdeu também o hangout sobre AngularJS, pode assistir aqui.

HTML 5/ HTML5 / CSS3/ Javascript/ Polymer/ Web Components

Hangout – Componentizando a Web com Polymer

Welcome - Polymer

No próximo sábado (25/10) 01/Novembro , vamos nos reunir on-line e apresentar para vocês toda essa idéia de componentização da Web com o framework Polymer.

Assim como no mês passado, foi um sucesso mesmo com a minha baita bronquigripe acabou saindo algo bom e que o pessoal curtiu para caramba.

Dessa vez eu consegui caprichar mais e com toda certeza vai ser melhor que o último hangout.

Convide seus amigos, compartilhe nas redes sociais, é grátis e dura em média 2 ou 3 horas.

Remarcamos para uma melhor experiência.

AngularJS/ Bower/ HTML5 / CSS3/ Javascript

Gravação do hangout criando Web Apps com AngularJS

angular-hangout

Agradeço aos mais de 167 participantes de assistiram ao vivo o Hangout e aos mais de 760 que já assistiram a gravação até o momento da escrita desse post.

Quem perdeu, pode assistir no youtube a gravação.

Mesmo com uma forte gripe que me arrastou para uma bronquite aguda, consegui explicar em um estilo de aula, como você pode se tornar produtivo com o AngularJS, assim como, usando o Bower, Yeoman e Grunt para automatizar as tarefas.

AngularJS/ HTML5 / CSS3/ Javascript

Convite para participar do Hangout Web Apps com AngularJS

angular-hangout

Chegou a hora de compartilhar o que aprendi nos últimos 12 meses.

Convido todos vocês leitores a aprender um pouco sobre como criar Web Apps com AngularJS nesse Hangout on-line e grátis.

Será no próximo sábado as 09:30 da manhã horário de Brasilia, e com uma duração máxima de 3 horas.

Nesse hangout como é de costume, vou comentar sobre as semelhanças do Flex com o Angular, arquitetura de uma Web App e consumindo serviços REST de forma mais fácil.

A transmissão também será gravada e disponibilizada no Youtube.

AngularJS/ HTML5 / CSS3/ Javascript

Angular 1.2.x One-Way data-binding

angular_header

A grande vantagem do AngularJS é o two-way data-binding. Embora isso seja uma excelente função, em excesso acaba causando problemas, dentre eles performance para renderizar valores.

E isso impacta diretamente na questão de Grids de dados, internacionalização, gráficos e por ai adiante.

Boa parte de aplicações usa apenas one-way data-binding, já que é parte pertinente só renderizar dados, quando se exige um certo nível de aceitação para intergir, consumir um websocket ou atualizações constantes o two-way é a solução perfeita para isso.

A atual versão do angular 1.2.24 só possui suporte ao two-way data-binding. Qual a solução para o problema? Criar uma diretiva que permita o uso apenas de uma maneira.

Entendendo o problema

Sempre que você assina o two-way com {{ }} em suas views de HTML, o angular cria uma raiz de eventos para observar se o valor vai mudar ou não, consequentemente atualizar a view.

 
     <p>Olá {{USER_NAME}}</p>

O $watch faz esse papel, criando isso em pequenas aplicações é até aceitável, já que o nível de controle é sustentável e não existe tantas variáveis sendo mudada.

Criando a diretiva One-way

var app = angular.module("OneWayApp",[]);
 
app.directive('oneWay', function() {
    return {
        scope: true,
        link: function($scope,$elm) {
            setTimeout(function() {
                $scope.$destroy();
                $elm.removeClass('ng-binding ng-scope');
            }, 0);
        }
    }
});

O que eu faço é só destruir o $watcher depois que o valor for renderizado na view, assim evito ficar olhando por mudanças que não são necessárias.

Veja um exemplo sendo executado abaixo.

One-way App

Performaticamente falando, consigo renderizar 10 mil itens na tela sem precisa olhar todos eles, tire o atributo one-way e seu Brower pode quebrar e fechar. Até a barra de rolagem fica mais suave com tantos itens sem precisa observar suas mudanças.Igor Costa

Futuro do Angular JS

Essa função vai vim built-in na próxima versão do AngularJS 1.3.

Sua anotação será da seguinte forma:

 
<p>{{::user.name}}</p>

Colocando só os ::, essa função quem quiser se arriscar na RC-1, pode usar em seus projetos futuros, embora quem ainda dependa muito de funções especificas do 1.2.x, pode usar essa diretiva.

AngularJS/ Bower/ HTML5 / CSS3/ Javascript

A quebra do build automático e o Bower no meio do caminho

bower_header

Quem usa algum esquema de integração contínua como o Jenkins por exemplo, sabe que é horrível ter a foto do Chuck Norris e saber que foi você quem quebrou o build.

O Bower geralmente é o culpado, acontece isso sempre e tem acontecido comigo nos últimos 9 builds gerados em um dos softwares que estamos fazendo.

Qual a principal causa disso?

Bom, acontece quando nós usamos diversas bibliotecas, componentes de terceiros e vem com diferentes versões do software principal que você está usando, por exemplo: Angular, JQuery e faz o Jenkins quebrar, já que o bower fica sem saber qual versão instalar.

+ bower install --silent
bower                        ECONFLICT Unable to find suitable version for angular
Build step 'Execute shell' marked build as failure
Finished: FAILURE

Mesmo eu tentando colocar via –silent, ele ignora e continua quebrando o build.

Entendendo o caso:

O Bower tem uma configuração para lá de prática e acabei descobrindo isso na quebra do build, ele possui uma conversão chamada “resolutions”, onde força você à usar a versão que você realmente quer.

{
  "name": "Seu Produto",
  "version": "0.0.1",
  "dependencies": {
    "angular": "1.2.16",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "jquery": "~2.1.1",
    "jQuery-Mask-Plugin": "1.6.4",
    "jquery-ui": "~1.10.4",
    "bootstrap": "~3.1.1",
    "angular-resource": "1.2.16",
    "angular-cookies": "1.2.16",
    "angular-sanitize": "1.2.16",
    "angular-route": "1.2.16",
    "angular-animate": "~1.2.16",
    "angular-collection": "~0.5.0",
    "angular-bootstrap": "0.11.0",
    "angular-strap": "~2.0.2",
    "momentjs": "~2.6.0",
    "ng-grid": "~2.0.11",
    "textAngular": "~1.2.1",
    "fontawesome": "~4.1.0",
    "angular-ui-utils": "~0.1.1",
    "cpf_cnpj": "~0.0.3",
    "angular-intro.js": "~1.1.2"
  },
  "devDependencies": {
    "angular-mocks": "1.2.16",
    "angular-scenario": "1.2.16",
    "angular-ui-utils": "~0.1.1",
    "jquery-ui": "~1.10.4"
  },
  "resolutions":{ "angular": "1.2.16" }
}

O “resolutions” acaba configurando implicitamente a versão do software que você quer e isso por final evita a quebra do build e o Chuck no telão na sala de desenvolvimento.

Canvas/ HTML 5/ HTML5 / CSS3/ Javascript/ JQuery

Criando gráficos do zero com Canvas e Javascript

flud-charts
[quote style=”1″]Acabei de refazer os fiddles, o Johannes Lochter trouxe o problema à tona onde não estava aparecendo Chrome e IE, era uma limitação do Fiddle e ajustei. Se alguém tiver problemas em não visualizar o conteúdo me avisem pelos comentários.[/quote]

A parte boa de vim do Flash/Flex é que em Javascript você tem toda a liberdade possível usando o canvas como instrumento de desenho, igual o Stage branco do flash e uma API semelhante para fazer formas geometricas, dignas de 8 anos atrás.

Apesar de ser um rascunho Canvas, é um elemento amplamente adotado no novo padrão HTML5, sem ele basicamente o HTML5 seria ainda HTML 4.1, ele é o máximo das novidades que eu coloco em pauta.

Definindo gráfico

[quote style=”1″]Suponha que você precise mostrar esses resultados de forma mais convincente do que a tradicional forma em números. É ai onde entra o gráfico, ele representa o desenho daqueles números que você possui disponível, é uma forma de atalho para mostrar que A+B = C.[/quote]

Sem mais delongas, gráficos são excelentes, enche os olhos de qualquer pessoa que os vê. Eles não só representam uma forma geométrica, representam métricas de dados reais e isso reflete e muito na tomada de decisão que uma pessoa faz ao usa-los.

Nessa série de posts, eu vou comentar um pouco sobre os gráficos mais comuns e existentes no mercado criando-os em javascript com Canvas do HTML5 e CSS3.
Existem N bibliotecas para criar gráficos usando esse recurso, a idéia é você aprender o que está por trás dessas bibliotecas, quais técnicas, quais calculos de trigonometria você precisa ficar por dentro e assim, só assim você pode entender como gráficos são feitos.

Eu sempre quis fazer algo semelhante sem precisar usar bibliotecas de terceiros, quando você chega nesse grau de curiosidade só assim você consegue enxergar o campo todo e aperfeiçoar bibliotecas existentes, colaborar com projetos já existentes ou até mesmo criar as suas.

A lista de gráficos que vou comentar é essa:

  • Gráfico de Area
  • Gráfico de Barras
  • Gráfico de Colunas
  • Gráfico de Gauge
  • Gráfico de Linhas
  • Gráfico de Pizza

Embora esses não sejam os únicos gráficos existentes. Existe uma boa chance, 90% dos casos onde você vai se deparar com eles. Se você quer criar gráficos sem se preocupar em como fazê-los, pode parar de ler por aqui e adotar essas bibliotecas abaixo:

É biblioteca o bastante para fomentar qualquer um por gráfico, elas são excepcionais e faz o trabalho de maneira perfeita. Melhor ainda é aprender como gráficos são feitos.

O primeiro que decidi fazer nessa série é o gráfico de Gauge, mais conhecido como velocimetro, gauge de agulha. Bastante usado em automóveis, medição de stress, pressão e por ai vai.

gauges
Créditos da foto : http://500px.com/photo/4573670

Matemática por trás da medição

É trigonometria na sua mais pura forma, seno, coseno e tangente, para saber o angulo, arco você tem que usar ambos os calculos, embora possa parecer difícil, criar isso é ridicularmente simples, especialmente quando o Canvas do HTML já vem com o calculo pronto para você, basta você passar os valores necessários e pimba! Gráfico está feito.

Desenhando um arco simples

O interessante da API do canvas é justamente essa facilidade, não é o desenho de um arco perfeito, dá para o gasto para o propósito final que queremos.

A mesma lógica por trás do desenho do Gauge é o desenho do gráfico de pizza, tudo parte do principio do ponto atual, o angulo que começa o gráfico e onde ele termina para começar o próximo.

Vejamos como você pode mitigar isso da seguinte forma.

Desenhando um gráfico de Pizza ou Torta(pie) como dizem pelas gringas

Desenhando um gráfico de Barras

Outro gráfico bastante usado em dashboards é o gráfico de Barras, ele basicamente é um indicador de quando cresceu ou diminuiu determinado valor em um intervalo de tempo ou de número. Eu já comentei aqui como criar um desses usando puramente JQuery e CSS, dessa vez usando o elemento Canvas.

O único método é o rect (desenha um retangulo), bem conhecido pelos desenvolvedores de Actionscritpt 2.0.

Ou Até animado.

Desenhando um gráfico de Colunas

O mesmo gráfico só que com o eixo invertido, ao invés de incrementar apenas o eixo X, incremento o Y e ele vai sendo exponencialmente incrementado conforme a ordem que foi criada do dataProvider.

Desenhando um gráfico de Linha

É bastante comum usar o gráfico de linha, é basicamente um indicativo de onde você chegou e onde você etá, é o preferido do mercado de ações da bolsa. O gráfico de linha sempre é acompanhado do primeiro elemento e a única série que muda é a série vertical, os pontos horizontais de um gráfico de linhas sempre são baseados na constante (largura disponível / número de registros) vezes o valor de cada registro.

Já a posição Y que sempre está variando para que a linha mude “lineTo()”, seja constante, exemplo pegue o último valor registrado e começe daquele ponto, sempre é feita pela constante. ( altura disponível / valor máximo encontrado) vezes o valor que se tem nos dados.

A mesma lógica do gráfico de linhas pode ser aplicada ao gráfico de Area, afinal a diferença é que você pode mostrar uma área (path), acompanhando os pontos da linha.

Trigonometria é a essência dos gráficos, fique livre para fazer um fork, alterar e hackear, por exemplo implementar a exibição dos eixos X,Y, implementar o click em determinado item do Gráfico, criar um plugin para JQuery ou até mesmo para criar eles animados. Nesse ponto eu prefiro fazer os gráficos não usando imagem simples do Canvas, mais sim um elemento avançado como o SVG, fica muito mais fácil fazer tais interações e integrar com uma biblioteca de afinamento de efeito ‘easing’.

Até o próximo post.

Dev. Software/ Dicas/ Google/ HTML 5/ HTML5 / CSS3

Web Tracing framework do Google ajuda você se livrar do código porco

wft3

O Google acabou de lançar o Web Tracing framework, uma espécie de Adobe Scout, só que para coisas feitas em Javascript, que usem qualquer manipulação de conteúdo seja Canvas, WebGL, de tudo ele consegue capturar aquilo que está rodando a 60fps no navegador.

Eu testei a ferramenta e aqui vai a dica: USEM, ajuda de verdade.

Como fazer?

Primeiro Passo: Faça o Download da extensão para o Google Chrome.

Segundo passo: Clique no botão WTF (What the fuck), traduzindo (Que merda é essa) e vai aparecer o depurador para você fazer o enabled.

wtf

Terceiro passo: Comece a capturar, para isso isso a extensão cria um controle inferior direito para você começar a fazer a captura de dados, veja abaixo:

wtf2

Eu acho que é uma grande vantagem para quem criar coisas em Javascript, não é novidade para quem já conhece linguagens compiladas, basicamente é um depurador avançado para você conhecer mais de perto o que tanto afeta a performance de sua App, Jogo, enfim, tudo que você quer se livrar de porcaria que pode impedir da melhor performance.

Ferramenta MUST HAVE para quem cria jogos em Javascript.

Eventos/ HTML 5/ HTML5 / CSS3/ Notícias

Video da palestra desenvolvimento de ferramentas com html5 em esteroides na Campus Party Recife 2

campus-logo

Quem perdeu a chance de participar do Campus Party Recife 2, pode assistir as gravações de todas as palestras em todos os palcos. A minha é essa ai abaixo.

Como curador da área de desenvolvimento junto com o Eduardo Freire, fizemos um excelente parceria e criamos uma das melhores área do evento com palestras sempre lotadas na média de 100 à 200 pessoas por palestra.

Outras palestras de desenvolvimento que você pode conferir são essas:

CPRE2 – Firefox OS. Web é a plataforma

CPRE2 – Aplicações móveis multi-plataforma com Titanium Mobile

CPRE2 – Diversão de bolso com iOS

CPRE2 – Produtividade na criação de websites com ASP.NET MVC

CPRE2 – Desenvolvimento de softwares em startups

CPRE2 – HTML5 CSS3

A lista completa de palestras de todo o evento pode ser encontrada aqui no youtube.

Um forte agradecimento aos meus escudeiros voluntários Dayvisson e Camila por fazerem a área brilhar mais.

HTML5 / CSS3/ ios/ iPad

CSS3 específico para iPad Retina

css3

Existem aproximadamente 30 milhões de iPads retinas no mercado, e 9 andam visitando esse site. Esse post vai mais para quem cria soluções em CSS3, Javascript,etc. E a turma do design responsivo.

Enquanto você procura uma maneira ideal para distribuir seus gráficos para N densidades, o CSS3 pode te ajudar a recuar essa busca e transformar seu projeto em uma forma mais agradável.

@media only screen and (-webkit-min-device-pixel-ratio : 2), 
only screen and (min-device-pixel-ratio : 2) 
{ 
   #class_imagem{ background-image: url('../images/background-retina.png');
 }

Use media-queries especificando o pixel ratio do dispositivo, para telas retinas use 2, para Android Tablets use 1.5 e o Galaxy S3/4 use o fator 1.3

Gostou da dica? Faça sugestões com outras soluções que vocês tem encontrado por ai.