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.

AngularJS/ HTML5 / CSS3/ Javascript/ JQuery

Criando um scroll Infinito com o AngularJS e JQuery

scrollinfinito-jquery

Esse post é o início de uma série de posts relacionados ao AngularJS, se você não conhece, é bom conhecer, muito de seu comportamento é semelhante ao que tinhamos no Flex, por exemplo Databind e a idéia de componentizar. E o mais legal de tudo é que ele é compatível com qualquer biblioteca que manipule o DOM, por exemplo Zepto e JQuery, ou até mesmo o Twitter Bootstrap.

O AngularJS facilita e muito certas tarefas e mantem o DRY bem vivo. Por exemplo, esse post eu quero falar sobre o scroll infinito, igual o comportamento que o Twitter possui ou o LinkedIn possui quando você vai rolando a página e dados vão pipocando em sua frente. Pois bem, como eu faria isso em puro Javascript e usando o seletor do DOM jQuery?

O scroll é um mal necessário, é o que a Microsoft tenta adotar na nova interface do Windows 8 e o que o Flex tentou quando lançou a versão 4.0. Porém é necessário trazer informações à medida que elas vão acontecendo ou carregar só o necessário e à medida que o usuário for investigando elas forem brotando.

scrollinfinito-jquery

Scroll Infinito com Javascript e JQuery.

O HTML é bem simples:

	<div id="conteudo">
    <ul id="lista"></ul>
</div
var contador = 1;
 
$(document).ready(function () {
    carregar();
    $(this).on('scroll', function () {
        if ($(window).scrollTop() + $(window).height() >= $(this).height()) {
            carregar();
        }
    });
});
 
function carregar() {
    for (var i = 0; i < 10; i++) {
        $("#lista").append('<li><img src="http://placehold.it/100x100"/><div><h4>' + contador + ' Item</h4><p>Descrição do item '+contador+'</p></div></li>');
        contador++;
    }
}

A medida que a soma da posição da barra mais a altura da janela superar o tamanho da altura do documento, ele executa a função carregar, jogando mais itens na lista.

O truque também está na maneira como você declara o CSS, margin faz um estrago danado quando não aplicada de forma correta, nesse exemplo eu coloquei uma aparência de uma lista de smartphone, igual no Android.

body, ul,li,img,h4,p{
    margin:auto;
    font-family:'Droid Sans';
}
ul {
	margin-left: -40px;
	list-style:none;
}
li {
    color:#111;
    height: 100px;
    border-bottom:1px solid #fff;
    padding:10px;
}
li h4 {
    font-weight:400;
    font-size:20px;
    padding:0;
}
li img {
    padding-right:10px;
    float:left;
    display:block;
    vertical-align:text-top;
}
li div {
    display:inline;
}
li p {
    font-weight:300;
    font-size:12px;
}
#conteudo {
    width:100%;
    background:rgba(0,0,0,0.1);
    overflow:auto;
}

E aqui está o exemplo rodando, eu usei o jsFiddle para demonstrar melhor.

Você pode ver sendo executado diretamente no jsFiddle

Criando agora uma lista infinita com o AngularJS

O AngularJS possui vários truques na manga para deixar sua vida mais fácil, módulos, tags personalizados, data-bind, repetidores, diretivas, controllers, esses são alguns de seus recursos. A melhor parte dele como mencionei acima é que é compatível com outras bibliotecas.

Para fazer esse exemplo você vai fazer uma pequena alteração no html e substituir o Javascript, os estilos que é o visual continuam o mesmo.

Logo de cara para identificar como um App, você precisa alterar o html e fazer da seguinte forma:

<!doctype html>
<html ng-app="Rolagem">
<head>

Isso define que o módulo Rolagem será seu App nesse arquivo de html, então na parte de repetir os itens você faz da seguinte forma.

<body ng-controller="Main">
	<div id="conteudo" fazer-rolagem="carregar()">
    <ul id="lista">
         <li ng-repeat="i in items">
            <img src="http://placehold.it/100x100"/>
            <div><h4>{{i.id}} Item</h4>
            </div>
        </li>
    </ul>
</div
</body>

Como o AngularJS abstrai bastante o escopo do javascript para com o HTML, é notável algumas propriedades como o ng-controller, fazer-rolagem que são primariamente customizáveis, a presença do ng-repeat indica que o arquivo vai ser repetido N vezes, conforme vamos adicionando novos itens à lista.

E a parte fundamental desse processo é o Javascript:

function Main($scope) {
    $scope.items = [];
 
    var counter = 1;
    $scope.carregar = function() {
        for (var i = 0; i < 10; i++) {
            $scope.items.push({id: counter});
            counter += 1;
        }
    };
 
    $scope.carregar();
}
 
angular.module('Rolagem', []).directive('fazerRolagem', function() {
         return function(scope, elm, attr) {
        elm = $(document);
 
        elm.bind('scroll', function() {
             if ($(window).scrollTop() + $(window).height() >= $(this).height()) {
                 scope.$apply(attr.fazerRolagem);
             }
        });
    };
});

Agora você já sabe como criar uma diretiva, fazer um módulo e carregar os itens conforme forem feitos os scrolls, no JQuery quando você quer escutar um evento você geralmente usa o $on(), no AngularJS é necessário usar o bind, ele que vai escutar pelo evento.

Maneiras diferentes de aplicar a mesma técnica, para um resultado igual, Eu gostei mais do AngularJS, escrevi menos código e atingir o mesmo resultado.

Ah! lembrando que esses códigos estão disponíveis no Github.

HTML 5/ HTML5 / CSS3/ JQuery

Criando apresentações de slides fantásticas com HTML5/CSS3/Javascript

igor

Terminando de aprontar os slides das minhas palestras no Campus Party 6 de São Paulo e eu queria usar uma forma diferente de apresentar, eu coleciono vários ppts de outras palestras, publiquei algumas no slideShare. Mais minha natureza inquieta pede que eu siga em frente e mude para outras alternativas mais abertas.

Pesquisando na internet logo vi que o HTML, CSS3 e Javascript tem muito à oferecer para quem é curioso, e descobri dentre várias opções essas 3 bibliotecas que vai lhe surpreender com o resultado final.

O grande inspirador foi o http://slides.html5rocks.com, e ai nasceram essas ótimas alternativas

RevealJS

Esssa foi minha escolha para as apresentações de slide no Campus Party 6, o RevealJS é feito apenas com HTML, CSS e Javascript, a grande diferença é que se utiliza novos artificios do CSS na versão 3 para animar em 3D e um pouco da ajuda do Javascript, o HTML é nato.

Um ponto positivo do RevealJS para quem é desenvolvedor, é que quando você está em uma apresentação e quer mostrar trechos de códigos, um ppt é um saco nesse quesito, o RevealJS tem uma dependência chamada highlight.js que ajuda nesse quesito.

E não se limite apenas à isso, quando você imprime a apresentação ela vem em um elegante formato PDF(apenas no Google Chrome) com os slides no mesmo formato que você ver, alinhados verticalmente.

ImpressJS

Quem lembra do Prezi? A idéia é justamente essa, só que não feito em Flash/as3, mas em puro CSS3 com efeitos de 3D e com a ajuda do Javascript.

DeckJS

É um pouco mais tímido em relação a efeitos hollywoodianos, mas atende o propósito de rodar em vários navegadores, inclusive no IE, coisa que o ImpressJS e o RevealJS não fazem, já que depende de efeitos 3D e no IE9 para baixo isso é complicado. Embora eles tenham um fallback, perde toda a graça sem os efeitos.

 

Dê adeus ao velho formato ppt em suas apresentações, de hoje em diante comece a usar html. E quem tiver notícias de outras bibliotecas como essas, só deixar o link nos comentários.

frameworks/ HTML 5/ HTML5 / CSS3/ JQuery/ Mobile/ Phonegap/ Web 2.0

Os mitos do desenvolvimento Front-end com HTML, CSS e Javascript

openweb

Eu já havia comentado em outro post aqui no blog sobre os 10 mitos de que tecnologias web não eram tão boas para fazer sistemas. Hoje me deparei com os slides de uma apresentação do Zeno Rocha que traduz tudo aquilo que eu escrevi em texto em imagens e razões para você acreditar que a semântica web está forte e cheia de recursos, navegue pelos slides e veja a variedade de possibilidades.

Sem mencionar que nos slides faltou só as soluções da empresa Sencha e o SDK da Blackberry para dispositivos móveis o Webworks.

Os sdks e bibliotecas para desenvolvimento Web amadureceram tão rápido em pouco mais de 2 anos que eu nem imagino o que estará por vir daqui a 2 anos à frente.

HTML 5/ ios/ JQuery/ JQuery Mobile/ Phonegap

Phonegap só resolve 50% do problema, o resto é contigo

cordova_logo_problem

Ok, eu já falei das vantagens e desvantagens do phonegap em comparação ao Adobe AIR, e eu acho que faltou um post mais completo sobre a maior dificuldade que se tem em criar uma solução mobile completa fora da caixa de areia do SDK nativo.

Phonegap resolve parte do problema em suportar Apps escritos em HTML5/JS/CSS, depois que você cria seu primeiro Hello World, você se pergunta, “Ok, e agora o que eu faço?”.

É ai, onde seus problemas começam, definir uma interface fluída, que funcione em diversos dispositivos é tarefa ultra complicada, já que temos dispositivos de diferentes densidades.

Resolver esses problemas sem o SDK nativo é um baita desafio, em especial quando se tem em mente que grande parte de Apps móveis, são customizáveis, já que você vai enfrentar isso, é bom se preparar, eis algumas ferramentas e frameworks para JS que ajudam a encurtar esse caminho.
Se você é do tipo que gosta de frameworks, com tudo prontinho, essa é a lista que eu sugiro para você.

Sencha Touch – O melhor entre todos

JQuery Mobile – Funciona para apps nativas também, só que não é tão bom para diferentes telas.

LungoJS – Biblioteca bem interessante e completa que imita um pouco do jQuery Mobile, mas trabalha com a idéia de componentização.

KendoUI – Igual ao JQueryMobile, poucos componentes.

Agora se você está em um nível que prefere fazer tudo do zero já que sua App demanda isso, devido seu nível de complicação e elementos gráficos, então aqui vai algumas dicas bem interessantes.

Zepto.js – Biblioteca igual ao jQuery, só que mais leve e compatível com o Phonegap, muito rápida por sinal na hora do loop para montagem de listas.

Foundation da ZURB – Eu uso os media-queries do framework Foundation em meu CSS próprio, já que eu não quero gastar tempo calculando o tamanho exato da fluidez das coisas, eles são os melhores e coloca o Twitter bootstrap no bolso nessa questão.

Abuse e reuse bastante de Media queries, aqui vai uma maneira de como eu resolvi meus problemas nessa questão.

 

Separando cada CSS com suas particularidades e aplicando o estilo quando for necessário em cada tela. Dica Javascript Desabilite o Touch Move no body do documento, ou você vai ter problemas de redimensionamento com o conteúdo sambando para um lado e para outro, caso o usuário toque e arraste na tela.

 document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);

Precisa controlar melhor os gestos que são usados em sua aplicação? Você pode usar os padrões ‘touchmove’,’touchTap’,’swipeLeft’,’swipeRight’, mas você está acostumado com a sintaxe do JQuery ou ZeptoJS, por que não continuar com isso?

O HammerJS é uma biblioteca para isso, muito útil nas dificuldades de implementar gestos em containers que possuem gestos internos já existentes.

O que o phonegap se propoe é lhe ajudar a acessar recursos nativos do aparelho, e isso ele faz com louvor. O que ele não faz é te dar de mão beijada a interface ou componentes que serão usados para criar uma app móvel. É nessa parte que você se pergunta o por que.

Então, da próxima vez que você for criar Apps móveis com tecnologia HTML, leia esse post ou indique à um amigo. Vai salvar alguns dias em seu calendário apertado de entregas.

 

AIR Mobile/ Android/ Apache Cordova/ ios/ iPad/ Iphone/ JQuery Mobile/ Phonegap/ Tablets

Apache Cordova vs Adobe AIR para dispositivos móveis

cordova_logo

É bom ter competitividade na esfera web, assim nasce projetos fantásticos que ajudam o desenvolvedor a criar soluções práticas e rápidas.
Este é o caso do Apache Cordova aka “Phonegap”, o Cordova tem surpreendido diversos desenvolvedores móveis, pela sua praticidade em acessar recursos nativos do aparelho para diferentes plataformas móveis, assim como o Adobe AIR o Apache Cordova te ajuda de uma maneira fácil acessar calendário, contato, notificações, alertas, vibrar, geolocalização, compasso e uma diversidade de novas funções built-in que vem no seu celular.

Depois de gastar um bom tempo estudando seu modelo, seu comportamento e como ele trabalha, decidi escrever um post sobre ele e compara-lo ao Adobe AIR, o que nesse caso eu tenho mais intimidade.

Assim como em qualquer tecnologia, você tem os pros e cons, acho que com isso você já tem uma noção maior do que usar e o que não usar, colocando em mente que cada caso é obrigatório analisar primeiro antes de decidir.

Apache Cordova

Pros:

  • Atinge 6 plataformas com uma só API
  • 90% de sua API já é built-in ( Vibration, BatteryLevel, Menu, Alertas, Calendário, Contatos)
  • Possibilita você criar suas extensões próprias com facilidade
  • Larga comunidade e alta frequência de builds.
  • Curva de aprendizagem muito rápida
  • Arquivo de instalação leve máx (4mb)
  • Performance de execução do App e efeitos de transição beira o nativo.
  • Interface pode ser feita em HTML/CSS/JS o que muito designer pode criar suas próprias Apps facilmente.
  • Componentes são criados e desacoplados em tempo de execução
  • Interfae é interpretada por um navegador interno WebKit

Cons:

  • Diversos frameworks para UI, faz você se perder em qual usar para seu projeto
  • Não tem suporte a HTTPS
  • Não suporta gestos por padrão, você tem que usar biblioteca externa para isso.
  • Ainda para dispositivos ios você tem que colocar o velho POG em ação para aceleração de hardware
  • Documentação é pobre de exemplos
  • Sem suporte a SQlite por padrão
  • Não suporta encriptação do sqlite
  • Suporta transferencia de dados em XML/JSON

 

Adobe AIR  3.5 para mobile

Pros:

  • Atinge apenas (Android 2.3.3+, ios 3.1+ e Blackberry Playbook)
  • Ciclo de vida de componentes baseado em eventos
  • Suporte a gestos por padrão
  • Suporta transferencia de arquivos em AMF/AMF3/JSON/XML
  • Suporta HTTPS/ SQLite/ Webcam/Audio e Video
  • Live stream de videos
  • Componentes já pré-fabricados usando o Flex Framework
  • Performance de 60fps quando usadas as classes Stage3D
  • Documentação extensa

Cons:

  • Arquivo de instalação ~10mb o que é grande para se transmitir via 3G
  • Interface é compilada e rendenizada
  • Suporta recursos nativos apenas se você extender com o ANE
  • Rendenização de texto é um pesadelo
  • Layout fluido para diversas telas diferentes é um POG gigantesco
  • Performance lenta quando se tem mais de 5 views
  • Ciclo de 24fps deixa qualquer celular com Android 2.3.3 lento
  • Não melhora o gerenciamento da bateria.

 

Claro que tem outros pros e cons de cada tecnologia, só que essas são as mais corriqueiras que você vai ver em grande parte dos casos quando for escolher.

E qual devo usar? Essa deve ser sua pergunta agora depois de ter lido os pros e cons. Minha resposta é vai depender de seu caso e o que você precisa fazer.

Um exemplo é, se você vai fazer jogos, eu lhe aconselho usar o Adobe AIR, já que a performance é melhor e muito mais fácil para criar jogos, agora se você vai fazer uma App para empresa que ela coleta informações de inventário, informações de cliente ou um App para registro de compras, o Apache Cordova é seu melhor parceiro.

Depois de duzias de Apps escritos, eu estou considerando o Apache Cordova como primeira opção e logo em seguida o Adobe AIR para boa parte dos Apps que escrevo diariamente.

Pergunto a você quais foram seus maiores problemas entre as duas plataformas?

Android/ Blackberry/ Flex/ Flex Mobile Framework/ HTML 5/ HTML5 / CSS3/ JQuery/ JQuery Mobile

Criando uma lista de scroll infinito para seu próximo projeto Mobile

scroll_inifinito_1

Coisa boa na vida é ter desafios, puxa daqui e puxa dali, e acabamos com uma idéia nova em um novo projeto não é verdade? Outra coisa melhor é você ter alunos onde você dá suporte o tempo todo, é o que acabou motivando a criação desse artigo.

Independente de qual é seu próximo projeto, você vai acabar querendo implementar isso uma vez na vida no seu próximo projeto mobile.

Sorte sua se seu próximo projeto for escrito em Flex Mobile ou JQuery Mobile.

Como funciona o Scroll Inifinito?

Independente do tamanho da tela de seu dispositivo, você pode calcular a altura da tela disponível no aparelho vs. altura que o conteúdo produziu para ser disponibilizado, sendo que você pode pegar a posição atual da barra de rolagem “scroller” quando ela atingir a altura  total do conteúdo ou seja, quando ela não tiver mais para onde deslizar até o final.

É ai onde entra o scroll inifinito, você pegando essas variáveis e fazendo o calculo direito, você pode fazer um Append ou incrementar os elementos de uma lista existente, seja Array, Lista, Datalist não importa, você pode implementar isso de maneira fácil usando o seguinte calculo.

 

posicaoAtualDoScroll == ( tamanhoAtualDaLista – tamanhoDisponivelNaTela)

 

Assim, você pode ir incrementando a lista se a barra de rolagem atinge o tamanho máximo disponível na tela e com isso vai paginando os resultados, tanto localmente quanto via chamada de processo remoto RESTful,RTMP,Ajax.

 

Versão Flex Mobile

Para fazer no Flex Mobile, você precisa conhecer bem a arquitetura Spark, uma vez que é desacoplada, a interface do componente, você pode começar investigando o Skin atual do componente <s:List/> até chegar duas propriedades importante do Skin que fazem menção ao componente em sí, dataGroup e scroller , ambos são peça fundamental para começar a implementar tal tarefa.

O dataGroup é onde os dados são guardados na lista e scroller é o componente que faz a barra de rolagem, é com ele que observamos a mudança acontecendo da posicaoAtualDoScroll e assim fazer o uso da formula  de condição e carregar mais itens.
Já que eu observo a mudança de posição do Scroller, eu tenho que chegar até o componente e escutar via EventListener qual é a propriedade que está sendo modificada, para isso o framework do Flex tem o evento PropertyChangeEvent, ele me dá o novo valor que a propriedade sofreu.

As propriedades em questão do scroller que eu quero saber são “verticalScrollPosition” para posição vertical e “horizontalScrollPosition” para posição horizontal.

Então sabendo qual é as propriedades que eu tenho que olhar eu procuro alinhar a formula usando o novo valor menos o tamanho atual da lista sobre o tamanho da tela.

Acabei criando o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayList;
			import mx.events.FlexEvent;
			import mx.events.PropertyChangeEvent;
 
 
			[Bindable]private var dados:ArrayList = new ArrayList();
			private var proxima_pagina:int = 20; // numero de itens para carregar
 
			protected function loadItens(event:FlexEvent):void
			{
				for (var i:int = 0; i <19; i++) 
				{
					var item:Object = new Object();
					item.label = "Item "+i;
					dados.addItem(item);
				}
				lista.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,getPosicao);
 
			}
 
			private var posicao_anterior:int;
 
			protected function getPosicao(event:PropertyChangeEvent	):void
			{	
 
				if(event.property == "verticalScrollPosition"){
 
					if(event.newValue == (event.currentTarget.measuredHeight - event.currentTarget.height)){
							carregarMaisItens();
					}
				}
			}
 
			private function carregarMaisItens():void
			{
				var indice:int = dados.length;
 
				for (var i:int=0;i<=proxima_pagina;i++) 
				{
					var item:Object = new Object();
					item.label = "Item Carregado "+(i+indice);
					dados.addItem(item);
					trace(item['label']);
				}
 
 
			}
 
		]]>
	</fx:Script>
	<s:List id="lista" dataProvider="{dados}" creationComplete="loadItens(event)" width="100%" height="100%">
 
	</s:List>
</s:View>

 

Veja que além do scroller me dá as propriedades de posição do verticalScrollPosition e horizontalScrollPosition, você precisa usar a propriedade reservada dele para pegar essas mudanças acontecendo, é como se fosse uma caixa onde a barra de rolagem vai indo porém é pre-definido um espaço onde isso pode acontecer, que é o caso da variável viewport.

 

Versão JQuery Mobile

Para fazer em JQuery mobile, é também a mesma técnica, porém uma ressalva, o componente de lista do JQuery Mobile requer que você dê um refresh no listView, é uma espécie de renderização dos itens para aplicar os estilos padrões de CSS.

A diferença entre Flex Mobile e JQuery Mobile é que no Flex eu adiciono direto ao componente, já que o pai View não é passível de ter o Scroller, já no caso do JQuery Mobile como tudo é HTML e o DOM é manipulado diretamente no documento, eu escuto as mudanças do $(window) que é a janela ou tamanho da tela disponível, assim comparo através da mesma fórmula o scrollTop que basicamente é equivalente a verticalScrollPosition e diminuo do tamanho da lista menos o tamanho disponível da tela.

O código acabou ficando assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function($) {
 
 
 
 
 
	carregarItens(20); // 20 itens 
 
 
 
 
	$(window).scroll(function()
	{
	    if($(window).scrollTop() == $(document).height() - $(window).height())
	    {
	    	  carregarItens(20); // carrega sempre 20 itens
	    }
	        
	    	
	});
 
 
 
 
});
 
 
 
 
function carregarItens(pagina){
	var tamanhoLista = $("#lista li").length; // tamanho atual da lista
	for (var i = 1; i < pagina; i++) {
		var indice = i + tamanhoLista;
		$("#lista").append('<li data-theme="c"><a href="#page1" data-transition="slide"> Item '+indice+'</a></li>');
		$("#lista").listview('refresh');
	};
}
</script>
<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="d" data-role="header" data-position="fixed">
        <h3>
            Exemplo Lista
        </h3>
    </div>
    <div data-role="content" style="padding: 15px">
        <ul id="lista" data-role="listview" data-divider-theme="d" data-inset="false">
            <li data-theme="c">
                <a href="#page1" data-transition="slide">
                    Item
                </a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

Da próxima vez que você ver no Twitter ou no Dzone uma lista de scroll infinito, você já saberá como implementa-la.

 

HTML 5/ HTML5 / CSS3/ JQuery/ Web 2.0

Melhor IDE para desenvolvimento Web com JQuery,CSS,HTML5

Vez ou outra eu recebo um e-mail dos leitores do blog sobre a melhor IDE para desenvolvimento Web com padrões web (HTML5,JQuery,CSS).

Então decidi escrever esse post para tentar ajudar os atuais ou futuros que vierem perguntar.

Geralmente a resposta é mais ou menos assim.

Não existe MELHOR IDE, existe a IDE que lhe deixa confortável em programar e que respeite os padrões da equipe onde você está alocado ou trabalhando.

IDE’s dependem do projeto que você está fazendo e qual tecnologia está usando, quer ver um exemplo? Você está em um projeto que trabalha com ASP.Net e/ou C#, logo 99% dos casos você vai ver gente usando o Visual Studio(e/ou Visual Studio Express), ai eu pergunto, vale a pena sair de uma IDE que já é completa para você? Claro que não.

E assim, é a continuação, independente de seus gostos, a tecnologia que você vai adotar, interfere na IDE que você usa, então como os padrões Web são canteiro de obras para diversas empresas, as opções não faltam.

Sugiro você olhar entre cada uma dessas abaixo, a que melhor se encaixa em seu perfil, do projeto e da natureza do projeto, assim você não foca seu entusiasmo na ferramenta e sim no produto.

Adobe Dreamweaver CS5.5 – Até agora tem sido a melhor IDE para quem tem 4Gb de memória para cima, abaixo disso, você irá odiá-la.

IDE’s da Jetbrains (Webstorm,PHPStorm) – São bem baratas e bem eficientes para quem ja é da área há certo tempo, possui diversos recursos de auto complete e macros para quem não quer repetir as tarefas do dia-a-dia.

Eclipse + WTP – É gratis e quem está acostumado com o Eclipse e integra seus serviços com Java por exemplo, o Eclipse com o plug-in WTP sem dúvida é a melhor opção dessa área.

Eclipse + Aptana – Também é gratis e quem usa Ruby on Rails ou PHP e padrões Web, essa é uma excelente IDE, ajuda você a automatizar certos processos, inclusive com uma janela de terminal estilo linux, menos no windows.

Tem outra IDE que não é bem uma IDE completa, mais uma ferramenta de edição que tem me deixado perplexo pelo seu incrível suporte a HTML5, CSS3 e Javascript apenas, tirando o fato de ser super barata e leve, por exemplo, quem tem 1Gb de memória RAM, rodará ela facilmente.

O sublimeText, é mais voltado para quem já tem anos de exeperiência e já conhece muita coisa das linguagens (CSS3,JS e HTML).

Até breve!

HTML 5/ JQuery

Comandos de voz e a sua app Web

Eu não sei você, mais o mundo da tecnologia encurtou seu paradigma de mudança de 5 anos para 6 meses. E quem melhor se adaptar a isso, conseguirá tirar o máximo de proveito das oportunidades que forem surgindo.
Até um tempo atrás, eu e você tinhamos apenas 2 maneiras de interagir com sua aplicação web, via Teclado e Mouse. Nem só via Web App, mais também aplicações desktop.
Passou e muito o tempo que isso era artigo de luxo, Apple lançando o Magic Mouse, Microsoft e seus maravilhosos teclados série 5000. Hoje temos Tablets, smartphones, smart tvs, Kinect e por ai vai.

Quando você pagou aquela matéria absurda e idiota chamada Interação Homem máquina na faculdade, você mal podia saber que isso seria realidade, caso contrário você seria um Steve Jobs. Pois é, saímos dos 2 dispositivos e entramos no jogo corporal, onde o Dedo interage com a interface e gestos realizam comandos.

Só que existe por outro lado uma revolução acontecendo silenciosamente, essa sim, é uma verdadeira maneira de como interagir com a tecnologia. Acidentalmente ou via mensagem subliminar Hollywood tem nos inspirado a interagir dessa maneira. Ou vai dizer que você nunca assistiu o Homem de ferro falando com o JAVIRS?

Já tem até gente criando algo semelhante, só que no mundo real.

O que eu estou falando é da revolução de comunicar com seu computador via comandos de voz. Quem tem por exemplo um Kinect e um XBOX Slim comprado de Nov/2010 para cá, pode interagir com seu XBOX via comando de voz , ao mesmo tempo que você usa o sistema, você ajuda os engenheiros da Microsoft a criarem um verdadeiro JAVIRS para sua vida pessoal.

E o SIRI da Apple heim? Esqueçeu dele? Pois é, chega de ficar engordurando o teclado, a sua tela, o jeito e a maneira mais legal de se interagir com seu sistema é realmente via comando de voz e quando isso passar a ser um diálogo como o Watsom da IBM, a coisa vai mudar de cenário.

Talvez quando eu e você tiver 40 anos, daqui 1 década, isso vai ser tão comum, como comprar um pendrive de 16GB na esquina. Não é KurzWeil.

Em fim, eu terei que esperar tanto tempo assim para que essa revolução seja real, para que eu tenha um assistente do tipo JAVIRS ou coisa parecida, bom, só o senhor do tempo dirá, mais hoje você pode testar no SIRI se tiver um iphone, XBox, ou usar as tecnologias da NUANCE. Que na verdade, é a única empresa no mundo que tem expertise no assunto e que está por trás do SIRI e do XBOX Kinect voice commands.

Alias, tanto blá blá blá, eu posso usar isso em uma aplicação real? Bom Poder pode, desde que seu cliente ou você use o navegador Google Chrome ou qualquer navegador web que tenha o engine Webkit para mobile. Assim você pode usar comandos de voz para fazer uma pesquisa, criar novos itens e por ai vai.

Um fato importante mencionar é que, como 99% dos navegadores Mobile usam o Webkit, então provavelmente será fácil, fazer funcionar os comandos de voz pelo lado mobile também.

O Google como sempre saiu na frente, e lançou até uma especificação no W3C sobre o assunto. Onde eu acredito fortemente que a semântica da Web terá muito mais dinamismo, já que o futuro de plug-ins em navegadores é incerto.

Na especificação menciona que se você usar o código:

 
x-webkit-speech

Em seu tag de Input, você dará habilidades de apresentar o seguinte resultado abaixo:



O resultado acima, foi feito apenas com o seguinte código.

<form>
      <fieldset>
                   <label>Fale:</label>
                   <input x-webkit-speech type="text" lang="pt_BR"/>
      </fieldset>
</form>

Clique no ícone do microfone e você pode falar em português mesmo do Brasil e ele vai preencher o campo de input com o que ele entendeu de sua fala.

Ai me veio umas idéias, eu poderia fazer esse mesmo experimento usando alguns eventos do Speech e também usando jQuery para realizar algumas mashups.

A primeira delas é uma App simples de TO-DO-LIST, teste a App abaixo, basta clicar no ícone do microfone e falar.

O código da App acima você pode pegar aqui abaixo:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>TO-DO-LIST com comando de voz</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
 
	form,div {width:400px; margin:0 auto;}
	ul { list-style:none;}
</style>
 
<!-- Código do JQuery para o TO-DO-LIST VIA COMANDO DE VOZ -->
<script type="text/javascript">
	$(document).ready(function(e) {
 
		// escuto a mudança do texto quando for preenchido
		// o campo e executo uma função
        $("#nova_tarefa").live('webkitspeechchange','',function(e){
 
				addTarefa($(this).val());
		});
 
		// limpar todas as tarefas adicionadas
		$("#btnLimpar").click(function(e) {
            	$("#tarefas").html('');
        });
    });
 
		function addTarefa(value){
				$("#tarefas").append('<li><input type="checkbox"/>'+value+'</li>');
				$("#nova_tarefa").val('');
		}
</script>
 
 
</head>
 
<body>
	<form>
    	<fieldset>
        <label>Nova tarefa:</label>
        <input id="nova_tarefa" x-webkit-grammar="builtin:search" lang="pt-BR" type="text" speech x-webkit-speech/>
		 <a href="#" id="btnLimpar">Limpar lista</a>
    	</fieldset>
    </form>
    <div>
    		<ul id="tarefas">
            </ul>
    </div>
</body>
</html>

Para funcionar eu usei uma série de atributos que estão habilitados e não documentos pelo Google, porém se você for analisar o código acima, bem especificadamente nos atributos, verá que tem um built-in search, eu uso o que o Google já possui, um dicionário baseado em SGRL, como especificado no Próprio navegador e seu dicionário de termos.

x-webkit-grammar="builtin:search" lang="pt" type="text" speech x-webkit-speech/

Tudo é possível através do x-webkit-speech, que reconhece todo o trabalho a ser realizado, consultando o serviço do Google, sintetizando a voz, e o retorno disso é um JSON com o termo que ele entendeu baseado no que foi falado, você até pode consultar o código fonte do Chrome aqui.

Ai eu pensei, bom, por que não fazer uma mashup legal, do tipo, pesquisar termos do Twitter, ou postar alguma coisa no twitter falando ao invés de escrevendo.

O código do aplicativo ai acima é esse aqui:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Web e comandos por voz</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<style type="text/css">
	body{font-family:Verdana, Geneva, sans-serif; font-size:16px;}
	form,div {width:400px; margin:0 auto;}
 
</style>
 
<script type="text/javascript">
    $(document).ready(function(e) {
 
        var URL_SUFIX = "&result_type=mixed";
 
 
        $("#tweettermo").live('webkitspeechchange','',function(e){
             $.getJSON("http://search.twitter.com/search.json?q="+$("#tweettermo").val(),"&callback=?",function(data){
				 $("#resultado").html('');// limpar a cada nova busca
                $.each(data.results, function(i,tweet){
                     // this is where we do what we want with the tweet
                     $("#resultado").append('<p><img src="'+tweet.profile_image_url+'" align="left" />'+tweet.text+'</p><br/>');
                });
             });
 
 
        });
   });
</script>
</head>
 
<body>
<div><img src="twitter_logo.png"/></div>
<form>
<input id="tweettermo"  size="41" autocomplete="off" dir="ltr"
 spellcheck="false" x-webkit-grammar="builtin:search" lang="pt"
 type="text" speech x-webkit-speech>
 </form>
 	<div id="resultado">
 
    </div>
</body>
</html>

Legal não é? Isso abre uma porta absurda para novas implementações, interações com o usuário e você pode até criar seu assistente pessoal JAVIRS combinando strings e comandos.

Até a próxima

HTML 5/ HTML5 / CSS3/ JQuery

Criando tags do HTML 5 nos navegadores IE 9

Se você desenvolve em HTML e está migrando para HTML 5, provavelmente você pode ter atribuido algum tag que não seja suportado no IE 9, que a Microsoft insiste em não dá suporte padrão.

Porém nada está perdido, você pode forçar o navegador a aceitar os novos tags, basta escrever os elementos caso seja necessário.

Aqui vai um snippet salvador nessas horas.

<!--[if lt IE 9]>
<script type="text/javascript">
	var e = ("abbr,article,aside,audio,canvas,datalist,details,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video").split(',');
	for (var i = 0; i < e.length; i++) {
		document.createElement(e[i]);
	}
</script>
<![endif]-->

Fácil não? O DOM model do IE permite escrever o que os gênios da Microsoft não fazem por padrão.