Flash Builder/ Flex

Flash Builder 4.7 Beta está aqui!

flashbuilder4_7

Quem estava anciosamente esperando pelo Flash Builder 4.7 ele está disponível para baixar, nessa versão beta, ele vem com várias novidades, dentre elas a mais esperada era o suporte ao compilador Falcon.

Cada novidade acompanha as implementações feitas do Flash Player 11.4 e Adobe AIR 3.4(beta).

O Flash Builder está muito mais leve, já que retiraram o modo design dessa atual versão, o que para muita gente novata pode ser um problema, já que estava acostumada a drag e drop de componentes, porém com essa remoção traz-se o melhor da IDE, velocidade e produtividade.

O novo compilador traz algumas vantagens em relação ao atual 4.6, já que foi escrito por completo do zero, adicionaram a ele novidades já existentes em plataformas de desenvolvimento como o Microsoft Visual Studio, dentre as novidades do Flash Builder 4.7 as mais importantes são:

  • Suporte ao Apache Flex 4.8 SDK
  • Novo compilador para projetos em Actionscript 3.0
  • Suporte na criação de Actionscript Workers
  • Suporte melhorado ao desenvolvimento de Apps para iOS direto via USB para iPad/iPhone/iPod e também simulator(apenas usuários mac)
  • Configurando múltiplos builds para plataformas diferentes (Mobile)
  • Melhorias no import automático de classes e dependências

Veja o release notes e saiba mais sobre as novidades do Flash Builder 4.7 Beta.

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.

 

Eventos/ Pessoal

TNW Latin América – Eu vou!

tnw

Preparados para o melhor evento de social age, startups, batalhas de Hackers? o TNW (The Next Web), vai acontecer agora dias 22 e 23 de Agosto em Sampa City.

Estarei lá com toda certeza para ver o CTO do Amazon Cloud Server em sua palestra mais que aguardada e cheio de perguntas, assim como participando da King Hack Battle, que é uma competição de 48 horas para quem conseguir criar algum App que use as API de parceiros e quem sabe saber usar seu potencial para explorar comercialmente sua idéia.

O Brasil está vivendo um grande momento, e eventos como esse da TNW, vem trazendo muita gente do mundo afora aqui dentro, é um local perfeito para você conhecer gente do bem e que tem o mesmo pensamento que o seu, Transformar o mundo através de código e mágica.

De acordo com os organizadores já passaram de 500 pessoas inscritas, veja as empresas que estão confirmada em participar.

Iconmobile, Meu Karaokê, Metro, Tecnoblog, Betha Sistemas, Panop, UNICAMP,Globo.com, Provisuale, Zenpo Software Innovations, BonusBox, The Next Web,Ogilvy & Mather, Hanse Ventures, Globo Comunicação e Participações, Conteúdo Nerd, Seedrs, Varejo Direto, Polo Marte, NBCUniversal, Bixti.com, Workana, Sky Media, Lateral View Technology, Gazeta do Povo, Neutronico, Visib, Viajanet de Venezuela, Blonde 2.0, Amazon, PressDoc, TechTudo, Estadão, BeYoung, CVOX Group, Startup Chile, NXTP, Invelab, Jurema, Rede Globo, VideoVivo, Tribo Interactive, Kenya Comercio, Envisioning Technology, Startupi, Apontador, Auxiliadora Predial, Mountain do Brasil, Appies.co, Spread.us, American Apparel, SuissaCorp, Livo, MobMob, Wieden + Kennedy, Legacy Links, TCM, ooif.me, GetNinjas, Bukeala, Tapnova, iG Conteudo e Publicidade, SMARTAPPS, A2 Comunicao, SiteApps, Fashion.me, Livre.fm, Kinncj.com.br, T-Art, Easy Taxi, PorQueNão?, Marketing to Web, Ledface, SendGrid, C-ventures, ContaAzul, Manuvo, TCM, Cocone, Passo Seguinte, Ogilvy, Wengo, Ogilvy, Caelum, Bougue, SaferTaxi, Minha Vida, Fortify.VC, 21212 Digital Accelerator, The Social Radio, Wormhole IT, Thinvoid, ResolveAí, Workana, Cinepapaya.com, MercadoTransporte, O-Globo, Zuggi, Idear Labs, Comenta.TV, Result Brasil, SoundShare, Codifique, SkinVision, Ilhasoft, RIACycle, The Basemail, Endeavor, TuDescuentan, Macmillan Digital Education, Buscapé, Meio Bit, Peixe UrbanoPacific InvestmentsKaszek Ventures, Davide.is, Wayra, Wayra Peru, Doubleleft, Style Coalition, Mozilla, AgentPiggy Chile, Certisign, Initial Capital, Atommica, Ilhasoft, Idea.me, Editora Zahar, Ubiquitous Innovation, Startup House, DMGT, Elefante Verde, Ideiasnet,Yahoo!, Circuito Startup, AppExtras, e-Core, Vulevu, Apontador, Easy Taxi, Trip2gether, Meu Karaoke, Doubleleft, The Social Radio, Seedrs, Sequaz, Scabu, Artplan, AG2 Publicis Modem, O2C Hiperme­dia, Specta, MetaCerta, Myband.is, Max Viagem, GetNinjas, Sequoia Capital, Editora Abril, Wormhole IT, Comenta TV, TFM Marketing Technology, Renata Honorato, Trademob, Smitten PR & Editing, Dwnet, 21212 Digital Accelerator, Bougue, Valor Economico, Poli-USP, Studio Avelino, Agenda Facil, OvermediaCast, Aceleradora, Latin Promo, In Press PNI, Mountain do Brasil, Socialle | Sorteie.me, Papaya Ventures, W7 Brazil, VEJA, Editora Trais, Editora Europa, R3C, Atomico, Parafernalia Interativa, Sky Media Digital, Dafiti, Empreendedora, Startup House, Adyen, StartupBlog, PlusNewMedia, Cocone SA, Nisu.pe, Groovin Ads, Scabu, American Express, VivaReal, Senzari, Up Points, Editora Globo, Invaders, Naked Monkey, Trindade Investments, ON Interactive, Trendsetters, MTrends, AgendaPet, Ingresso, Inversiones, Agenda Facil, Duplade3, Site Apps, Samba Tech, Wayra Brasil.

 

Gente para caramba, é muita empresa startup com várias idéias e todas buscando um lugar ao sol. Será uma energia tão positiva quanto foi os outros hackathons que participei como o do iMasters e da Campus Party.

 

Pessoal

Para que serve o twitter afinal? Se você é desenvolvedor de software

home-beta-logo

 

Já devem ter lhe perguntado ou você já se perguntou sobre isso. Né verdade?
Twitter tem sido uma grande mão na roda para artistas se aproximarem do público, colocar foto fazendo biquinho e coisa do tipo. Na boa! Se você é desenvolvedor de software você deve usa-lo de forma positiva.

Lembra do meu último post falando sobre 7 hábitos que vão te deixar produtivo? Se não lembra, então vai lá e dá uma rápida lida.

Não sei você mais eu fiquei apaixonado por um serviço interessante para nosso público, onde eu recebo as notícias fresquinhas de blogs, repositórios e só relacionado a desenvolvimento de software.

Se você é um desenvolvedor de software Brasileiro, você poderá facilmente acompanhar isso pelas hashtags : #soudev, #php #javascript #css #adobe #github, em uma rápida pesquina no Twitter, mesmo sem fazer esforço  em escrever uma App para o Twitter e sair coletando tweets que são interessantes para você.

É ai onde entra o serviço grátis e mais uma “pequena rede social sobre o teto do twitter”, o http://geekli.st/home é tudo isso que eu mencionei ai em cima de uma forma filtrada.

 

Se você é como eu que não gosta de ficar aplicando filtros para tudo quanto é tipo de tweet e usa o Twitter para um simples propósito de colecionar o que os outros falam, essa ferramenta vai lhe cativar.

O Geekli.st tem uma galera muito forte, desde caras da Nasa, até gente do próprio Github, é uma espécie de quem são os artistas do mundo do software e os novos que estão entrando.

Vale a pena ficar nos favoritos e fazer parte da leitura diária matinal. “Digamos que seja aquela conversa dos corredores”.

Dicas/ Dicas e truques/ Google/ HTML 5/ HTML5 / CSS3/ Web 2.0

Coloque seu site ou aplicativo web no modo turbo

rocket launch

Se você é fanático por performance e tem acesso shell/root ao seu servidor, vai aqui uma dica muito importante para optimizar todas as páginas que você serve para seus leitores/usuários.

Se seus serviços forem sob o teto do servidor Apache HTTP, então você precisa conhecer urgente o mod_pagespeed que acelera o processo de carregamento do aplicativo/sites a níveis de grandes sites como Google.com e facebook.com

Só para você ter uma idéia, meu site com todas as técnicas que abordei em meu arquivo .htaccess ele beirava os 6.5s para carregar por completo para você leitor. Depois que eu ativei o mod_pagespeed o tempo passou para 1.65s e o melhor de tudo isso, banda e processos foram economizados.

O que o mod_pagespeed faz na verdade?

Ele basicamente optimiza tudo que você deixou para depois e acabou esquecendo de fazer ou simplesmente não deu tempo devido a pressão sofrida no trabalho para liberar uma release.

Então através de filtros pré-definidos via String na sua configuração o mod_pagespeed cria diretivas de rápido acesso permitindo que você faça performance à baixo nível no servidor.

O mod_pagespeed é um santo remédio, porém você deve usa-lo com cautela, já que boa parte de seus filtros ainda são experimentos e nunca se sabe o que poderá causar de ruim para sua aplicação.

 

Pagespeed e derivados

Existem outros módulos no apache que é importante frizar bem para que você não continue achando que o pagespeed é o único salvador da pátria, outros módulos foram usados em meu problema, porém o pagespeed de fato teve um ganho muito mais considerado deixando ele agir sobre os arquivos estáticos.

Módulos que também usei e que são necessários para o pagespeed rodar.

Mod – rewrite

Mod – headers

Mod – deflate

 

Esses módulos podem ser instalados perfeitamente em seu servidor Apache usando os seguintes comandos.

 

Instalando o módulo rewrite.

a2enmod Nome_do_Modulo

 

O comando a2enmod, basicamente diz, Apache2 habilite modulo X, se você quiser ver todos os módulos habilitados em seu servidor Apache, basta ir em cd /etc/apache2/mods-enabled/

e dar um ls

 

Como instalar em um servidor Ubuntu/CentOS/Debian/Fedora

Baixe o módulo pagespeed diretamente aqui, links estão do lado direito.

Uma vez que você escolheu o pacote correto para sua distribuição linux, use o comando wget para baixar o pacote.

root@li437-29:~# wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_amd64.deb

 

Como eu tenho um sistema operacional Ubuntu 64 bits usei o pacote acima.

Uma vez que o download completou, basta executar os seguintes comandos se você estiver no Ubuntu.

dpkg -i mod-pagespeed-*.deb
apt-get -f install

Se estiver no CentOS ou Fedora, execute

yum install at  (if you do not already have 'at' installed)
rpm -U mod-pagespeed-*.rpm

 

Depois disso, só habilitar o pagespeed no Apache, usando o comando a2enmod

a2enmod pagespeed

Pronto, seu módulo pagespeed está habilitado e pronto para executar, agora basta configurar os filtros que vem nele para melhorar o desempenho.

Por padrão o módulo é desabilitado justamente por que você precisa configura-lo antes de sair usando, afinal o Google não quer que seu site saia fora do ar antes mesmo de você coloca-lo em modo turbo.

Para isso, abra o arquivo de configuração do pagespeed que fica na pasta /etc/apache2/mods-enabled e use um editor que você esteja confortável em usar, eu uso o Vim, tem gente que gosta de outros e por ai vai. Para abrir é simples, vi pagespeed.conf

O arquivo vem basicamente assim.

# Turn on mod_pagespeed. To completely disable mod_pagespeed, you
# can set this to "off".
ModPagespeed on
 
# Direct Apache to send all HTML output to the mod_pagespeed
# output handler.
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html
 
# If you want mod_pagespeed process XHTML as well, please uncomment this
# line.
# AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER application/xhtml+xml
 
# The ModPagespeedFileCachePath and
# ModPagespeedGeneratedFilePrefix directories must exist and be
# writable by the apache user (as specified by the User
# directive).
ModPagespeedFileCachePath "/var/mod_pagespeed/cache/"
ModPagespeedGeneratedFilePrefix "/var/mod_pagespeed/files/"
 
# Override the mod_pagespeed 'rewrite level'. The default level
# "CoreFilters" uses a set of rewrite filters that are generally
# safe for most web pages. Most sites should not need to change
# this value and can instead fine-tune the configuration using the
# ModPagespeedDisableFilters and ModPagespeedEnableFilters
# directives, below. Valid values for ModPagespeedRewriteLevel are
# PassThrough, CoreFilters and TestingCoreFilters.
#
# ModPagespeedRewriteLevel PassThrough
 
# Explicitly disables specific filters. This is useful in
# conjuction with ModPagespeedRewriteLevel. For instance, if one
# of the filters in the CoreFilters needs to be disabled for a
# site, that filter can be added to
# ModPagespeedDisableFilters. This directive contains a
# comma-separated list of filter names, and can be repeated.
#
# ModPagespeedDisableFilters rewrite_images
 
# Explicitly enables specific filters. This is useful in
# conjuction with ModPagespeedRewriteLevel. For instance, filters
# not included in the CoreFilters may be enabled using this
# directive. This directive contains a comma-separated list of
# filter names, and can be repeated.
#
ModPagespeedEnableFilters rewrite_javascript,rewrite_css
ModPagespeedEnableFilters collapse_whitespace,elide_attributes
 
# ModPagespeedDomain
# authorizes rewriting of JS, CSS, and Image files found in this
# domain. By default only resources with the same origin as the
# HTML file are rewritten. For example:
 
# ModPagespeedDomain cdn.myhost.com
#
# This will allow resources found on http://cdn.myhost.com to be
# rewritten in addition to those in the same domain as the HTML.
#
# Wildcards (* and ?) are allowed in the domain specification. Be
# careful when using them as if you rewrite domains that do not
# send you traffic, then the site receiving the traffic will not
# know how to serve the rewritten content.
 
# Other defaults (cache sizes and thresholds):
#
# ModPagespeedFileCacheSizeKb 102400
# ModPagespeedFileCacheCleanIntervalMs 3600000
# ModPagespeedLRUCacheKbPerProcess 1024
# ModPagespeedLRUCacheByteLimit 16384
# ModPagespeedCssInlineMaxBytes 2048
# ModPagespeedImageInlineMaxBytes 2048
# ModPagespeedCssImageInlineMaxBytes 2048
# ModPagespeedJsInlineMaxBytes 2048
# ModPagespeedCssOutlineMinBytes 3000
# ModPagespeedJsOutlineMinBytes 3000
 
# Bound the number of images that can be rewritten at any one time; this
# avoids overloading the CPU. Set this to 0 to remove the bound.
#
# ModPagespeedImageMaxRewritesAtOnce 8
 
# You can also customize the number of threads per Apache process
# mod_pagespeed will use to do resource optimization. Plain
# "rewrite threads" are used to do short, latency-sensitive work,
# while "expensive rewrite threads" are used for actual optimization
# work that's more computationally expensive. If you live these unset,
# or use values 
SetHandler mod_pagespeed_beacon
 
# Uncomment the following line if you want to disable statistics entirely.
#
# ModPagespeedStatistics off
 
# This page lets you view statistics about the mod_pagespeed module.
 
Order allow,deny
# You may insert other "Allow from" lines to add hosts you want to
# allow to look at generated statistics. Another possibility is
# to comment out the "Order" and "Allow" options from the config
# file, to allow any client that can reach your server to examine
# statistics. This might be appropriate in an experimental setup or
# if the Apache server is protected by a reverse proxy that will
# filter URLs in some fashion.
Allow from localhost
Allow from 127.0.0.1
SetHandler mod_pagespeed_statistics
 
# Page /mod_pagespeed_message lets you view the latest messages from
# mod_pagespeed, regardless of log-level in your httpd.conf
# ModPagespeedMessageBufferSize is the maximum number of bytes you would
# like to dump to your /mod_pagespeed_message page at one time,
# its default value is 100k bytes.
# Set it to 0 if you want to disable this feature.
ModPagespeedMessageBufferSize 100000
 
Allow from localhost
Allow from 127.0.0.1
SetHandler mod_pagespeed_message
 
Allow from localhost
Allow from 127.0.0.1
SetHandler mod_pagespeed_referer_statistics

O que você precisa habilitar primeiro é o módulo.

 ModPagespeed on

Depois configurar onde ele vai guardar os caches

  ModPagespeedFileCachePath            "/var/mod_pagespeed/cache/"
  ModPagespeedGeneratedFilePrefix      "/var/mod_pagespeed/files/"

Coloque em um diretório de sua preferência.

Com apenas isso, você já vai notar uma significante mudança no carregamento de seu site ou App em 50%. Tem muita configuração para você fazer através de filtros.

Os filtros que utilzei foram esses.

 ModPagespeedEnableFilters combine_css

O filtro combine_css já diz, tudo ele combina tudo que você tem de CSS em um único arquivo.

Outro filtro que usei foi o minificador de Javascript.

ModPagespeedEnableFilters rewrite_javascript

Em caso de você esquecer de minificar seu código javascript, ele faz automático para você.

Outro bastante importante é a configuração das imagens, elas tem um peso absurdo quando o negócio é carregamento.

Eu usei os seguintes filtros.

 ModPagespeedEnableFilters inline_images,recompress_images,resize_images

Peço para carregar todas as imagens em inline, tudo junto, comprima elas e faça um resize caso necessário.

 

Claro que os filtros que eu usei são específicos para meu caso, embora ele vá servir também para vocês na maioria dos casos, recomendo ler os pro e contras de qualquer filtro que você habilite na documentação do Google pageSpeed, que por sinal é bem completa.

E depois disso tudo? Como faço para testar?

Existem diversas ferramentas on-line que analisam o conteúdo do site para você e diz onde está errando, inclusive no próprio site do Page speed, o Google disponibiliza o Page speed Insights, detalhando tudo que você precisa saber para corrigir os erros e melhorar a performance do site.

O mais legal do Pagespeed Insights é a possibilidade de você testar o carregamento em Desktop e Mobile.

Outra ferramenta que fiz bastante uso em meu problema, foi o Full Page Test da Pingdom, para ver se realmente o Pagespeed tinha afetado a performance do site.
No Google Page Speed Insights meu site carregou em 680ms quase 1 segundo. No Pingdom os resultados foram mais reais digamos assim. Carregados em 1.65s.

Sem tudo isso do Pagespeed meu site estaria sendo carregado em meros 5 ou 6 segundos, isso por que boa parte de seu conteúdo é texto.

É isso, escrevei outro post de como eu consegui reduzir o consumo de memória do servidor servindos 50 visitas /segundo nesse blog depois que mudei para servidores novos.
Foi uma grande aventura configurar o Apache e o MySQL para reduzir o consumo de memória.

Dev. Software/ Dicas

7 maneiras de se tornar produtivo no desenvolvimento de software

produtividade

Ante-ontem dei uma rápida palestra para uma equipe de desenvolvedores de software via Connect e a palestra era mais motivacional do que propriamente dita “técnica”.

Papo vai e papo vem, como uma boa conversa com aquele amigo que você não ver a anos, querendo ou não você aprende mais com quem esta lhe escutando do que em livros ou em pesquisa. E acabei juntando essa soma de idéias em uma compilação de 7 maneiras de se tornar mais produtivo, mais divertido trabalhar com software. Ao contrário de muitos artigos ou “delatores de regras”, essa lista de 7 coisas vai fazer você tirar muito mais proveito de sua vida profissional como profissional de TI do que em qualquer outra área que você venha a conhecer.

 

1 – Desligue-se de mensagens instantâneas 

É quase impossível nos dias de hoje, mais o mito de que Facebook, MSN, Gtalk, IRC, ser super importante para o processo evolutivo de um produto é quase um Tabú. E mexer nesse assunto é o mesmo que mexer em um vespeiro! Vai sair gente com tudo que é tipo de articulação para defender o uso.

Eu diria ao contrário, relacione-se mais com seu colega de equipe, apesar de tudo ele está quase próximo de você e uma conversa pessoal ou até mesmo a pausa para o café é importante para sua socialização ou personificação de um perfil profissional.

Há quem diga que passar alguns dias fora desses mensageiros instantaneos você acaba virando novidade quando encontra seus amigos de rede social;Tendo muito mais assuntos para conversar e também marcar o shopp do final de semana.

Não seja amigo de seu colega de trabalho apenas no expediente, nunca se sabe o que você ou ele será no futuro. Amizade e Networking começa nesses pequenos atos.

2 – Desafie seus limites

Não acomode-se por que você é fera em um assunto e domina apenas tecnologia X, seja poliglota, eu acredito que nas próximas 2 décadas, saber escrever um programa ou  “falar um idioma de bytes”, será quase importante quanto saber o inglês nos dias de hoje. A programação está se tornando uma linguagem universal e quem não souber programar em um único idioma de bytes, está sujeito a fadar na lista negra de analfabetos bytianos.

É importante que você seja o Expert prático naquela linguagem X e não um Expert Didático, saber definir bem esses dois pontos é super importante, tirando proveito dessa articulação e repassando o que você sabe para seus colegas da mesma área. Ser um expert prático vai lhe garantir referências, destaque, porém com o passar do tempo você ficará conhecido apenas por aquele rótulo “Zé da Borracharia”, “João Pintor”. Desapegue-se apenas de uma tecnologia.

Assim como o mundo tem diversas escolhas sexuais, espirituais, políticas, etc. O mundo de desenvolvimento também tem diversas opções, então seja culto, aprenda outras também que vão de seu perfil, quando digo aprenda outras, não quero dizer que saia e vá estudar tudo que é linguagem que existe por ai. Quero que você tenha sintonia no que você está querendo aprender, todos querem aprender a tocar violão porém outros se identificam melhor com a guitarra. Assim é a vida, adapte-se com aquilo que é dado e não julgue pelo que não é.

3 – Corrija seus erros

Sempre surge aquele boato “Fiquei sabendo que fulano…”. Quando ouvir isso saia correndo e/ou interrompa quem estiver começando a dizer isso.

Conversas fiadas atrapalham sua vida profissional, alheie-se apenas no que diz respeito a coisas positivas que tenham uma construção melhor em sua carreira, a vida é cheia de tropeços e quem erra tem o direito de consertar o que errou, não adianta, agente achar que nunca acontecerá conosco, vai acontecer sempre, é um inifity loop.

Minha esposa sempre me diz “A vida é um pé de manga, hoje eu mango de tu, amanhã você manga de mim”. Então pare de se importar com erros dos outros e não aprenda a errar como eles, aprenda com os seus.

Seus erros são muito mais importantes de serem corrigidos do que os erros dos outros. Você aprenderá mais com os seus, tendo mais chances de não repeti-los.

Viva positivamente, se você acreditar que enxerga dessa maneira a vida, ela vai lhe surpreender todos os dias.

 

4 – Seja organizado

Saiu sem pentear os cabelos, nem tirou a poeira do sapato? Ainda está com a calça jeans da semana passada sem lavar? Come on!

Organização não é apenas um código limpo, bem polido, poucas rotinas, organização começa no se arrumar para ir trabalhar, agente anda relaxado de vez em quando até pode, o que não pode é o sempre. Pega mal e você nunca será encarado como um bom profissional e sim um quebra galho.

Sei que alguns discordam, mais não tente ser um metro sexual ou coisa do tipo, apenas mais limpinho, a limpeza do corpo é a limpeza da alma, uma organização pessoal é fundamental para você se sentir bem e produzir com muito mais animo a sua arte de escrever código.

Organize suas idéias seja em papel ou digitalmente, mais nunca deixe de organiza-las, não importa o método que você escolha, mais nunca deixe suas idéias confundir o seu dia, no final você vai acabar acreditando que não fez nada, e não fez mesmo!

Use um bom gerenciador de versões, mesmo para documentos como word, excel e powerpoint, agente faz  “merda” toda hora e é bom dá um CTRL+Z de vez em quando, imagine que é importante controlar aquilo que você faz, uma idéia vem e vai toda hora do dia, você pode se arrepender ou não, pode avançar ou voltar. Controlar o que você está fazendo só mesmo em nossa área.

 

5 – Gaste menos

Economize tempo em coisas que não são interessantes para sua vida e profissão. Saber gastar e administrar o tempo em horário de trabalho é a maneira mais equilibrada de ser produtiva.

Ter uma regra ou ciência exata para isso, vai depender de cada caso, uma fórmula para essa equação só mesmo na prática, gastando seu tempo em coisas que são pertinentes ao projeto e ao seu dia-a-dia.

Deixe para ler notícias de caminhão virado na Marginal para depois, seu time de futebol fez gols no final de semana? Aproveite as pausas e não faça disso um mantra para puxar assunto todo santo dia. Tem coisa mais chata do que gente sem assunto que só fala de trabalho e de seu time?

Gaste mais tempo conduzindo as soluções de problemas existentes na sua vida, na sua carreira, quer ver uma maneira radical? Jogue a TV fora!  “Brincadeira”. Mais pense bem ao gastar seu tempo com coisas que realmente são irrelevantes.

Já deve ter escutado “Pense fora da caixa”, mais como se eu vivo fora dela? Então você já vive fora da caixa, basta agora alinhas seu tempo com suas atividades.

Voltar para casa e saber que seu dia foi hiper produtivo, vai lhe dá uma sensação ótima.

 

6 –  Vá para festas

Não aquela festa de ritmo batido e que faz todos enjoarem; Quando eu digo vá para festas, eu digo Eventos.

Eventos são a melhor forma de você matar  10 coelhos com uma paulada só. Em um só evento você ver “Seus desafetos, suas ambições, faz networking, conhece gente nova, distribui seu cartão de visita, come, pega panfletos sem sentido algum, assiste palestras sem cunho prático, faz perguntas que nunca irá usar e por último vai pagar caro para fazer tudo isso.

Agora se você vai em eventos para se divertir, ver como os outros estão trabalhando, como se apresentam, comer, beber, jogar conversa fora com aquele pessoal que você não ver em pessoa faz tempo, participar das palestras e fazer anotações sobre pontos importantes para depois pesquisar no google. Ótimo, você realmente foi para festas.

Aproveite esses eventos faça networking e todo o resto, porém nunca esqueça de se divertir, divertindo-se de forma saudável, você vai encontrar um balanço sentimental sobre sua área e começar a enxergar pela tangente da coisa, se arriscando na perfeição de sua arte.

Divirta-se.

 

7 –  Comente construtivamente

Sempre que você ver um material, artigo, tweet, outro comentário ou código seja construtivo. A humanidade sempre aprendeu que destruir para depois construir é o atalho mais sensato da existência da vida humana. Seja um pouco fora desse planeta, como eu comentei no item 3, seja construtivo nos argumentos, ajude quem ao seu ver está errando, comentando e deixando sua opinião.

O tal de “Fi de beck aka:. feedback”, é importante para quem se propõe a fazer algo diferente do que você está acostumado a ver todo santo dia. Construir um pensamento em conjunto é muito mais divertido do que dividi-los e separar por grupo. Eu sei que ninguém é igual a ninguém, mais não custa nada você colocar seu  IMHO para o colega de área de maneira construtiva, até um mísero comentário em um código é de grande ajuda.

Construa comentários, seja paciente com as diferenças no mundo.

 

Essas são dicas fundamentais para você ser um bom desenvolvedor que vive atarefado e desmotivado.

Até a próxima.

Flex

Compilador Falcon, próximo de ser doado para fundação Apache

apache_flex_logo

Você já deve ter ouvido falar do novo compilador que a Adobe estava trabalhando para criar apps Flex mais robusta e consumindo muito menos memória.

Como faz parte do RoadMap não só doar o compilador Falcon para fundação Apache, a Adobe também irá doar o FalconJS que faz a trans-compilação de MXML e Actionscript para padrões Web (HTML,CSS e Javascript).

 

O FalconJS ainda não tem planos para chegar ao repositório da fundação, porém o Falcon já está liberado para doação, até sexta-feira ele deve entrar no Trunk do projeto e pode ser baixado para sua máquina.

 

Vale lembrar que ele ainda está em fase pre-alpha e será evoluido por nós e a comando dos committers da Apache. Tem muita coisa para ser feita, porém é um grande avanço.

 

Leia o histórico do compilador na wiki do Apache Flex.

Flex

Flex agora é uma marca registrada da Fundação Apache

apache_flex_logo

É uma grande vitória da comunidade que tenta colocar o Flex novamente no eixo sob o comando da comunidade, agora várias outras empresas podem criar soluções que complementem o SDK do Flex sem se preocupar com citações nos tribunais.

A Adobe hoje assinou o documento que legaliza o uso da marca para fundação Apache, porém poderá explorar comercialmente o nome “Adobe Flex” para os próximos 3 anos.

Flex

Apache Flex 4.8 disponível para download

apache_flex_logo

Desde que a tecnologia Flex foi doada para fundação Apache o projeto em sí é um sucesso, em pouco tempo conseguimos concluir a primeira etapa de incubação que foi boa parte feita pela equipe de transição da Adobe, onde foram doados os frameworks e bibliotecas necessárias, documentação e exoneração de direitos autorais da Adobe para com o Flex SDK, e transitando bibliotecas proprietárias para alternativas open-source.

Puxa daqui, deleta acolá, finalmente conseguimos criar a primeira release sob o teto da fundação Apache. A comunidade continua amplamente ativa, visto o fato que o Flex ainda é um sucesso entre as 500 maiores empresas segundo a Fortune, já que é comercialmente viável, muita contribuição ao projeto é dada.

A participação brasileira ainda é tímida, porém presente, eu sendo o único Flex committer brasileiro no time, sinto que precisamos colaborar muito mais, por que potencial e uso nós temos de sobra para a tecnologia.

Mudando um pouco de assunto, sobre o SDK, boa parte do release é correções de bugs da versão anterior a 4.6, onde muita coisa foi ajeitada, aproximadamente 60 bugs corrigidos e direitos autorais removidos da Adobe por parte do projeto, onde representa um marco da tecnologia vinda de uma companhia apenas e caindo na graça e uso da comunidade de software livre.

A grande e maior novidade está por vir que é a possibilidade de compilar actionscript e mxml e resultar em HTML/CSS/Javascript. o compilador Falcon está quase pronto para ser doado pela Adobe para fundação ainda esse trimestre Q3, que faz parte do road map  “Flex White paper” que a Adobe lançou no inicio desse ano para acalmar os usuários da tecnologia que investiram abersa.

Quem quiser baixar o SDK basta visitar o endereço. http://incubator.apache.org/flex/

Prometo que o próximo post é falando como baixar, configurar e utilizar o SDK no seu atual Flash Builder,FDT manualmente ou usando um aplicativo feito por um dos committer Om, que fica bem fácil de utilizar o novo SDK no seu Flash Builder.

 

 

 

 

Pessoal

Estamos de volta

estamos-de-volta

Demorou mais do que o previsto, mas estamos de volta!

Com um novo layout, nova hospedagem própria no cloud e com muito assunto interessante para discutir por aqui.

Quero agradecer a todos que vieram até o twitter perguntando quando o blog de fato voltaria ao ar, agradeço pela preocupação de todos vocês e a fidelidade em sempre estar presente lendo os posts que escrevemos por aqui.

Como deixei claro no último post, vamos mudando e amadurecendo com o tempo e a necessidade de se mover é imperante dentro de nós, então mova-se e faça diferente.

Já está pronto para sair mais alguns posts novinhos para vocês complementarem as suas leituras.

 

Dentre as novidades agora que temos, gostaria de listar aqui elas para vocês.

 

  • Estamos hospedado no Linode Cloud
  • Usando a última versão do wordpress “sempre”
  • Plugins que usamos, estarei publicando detalhes deles em breve
  • Integração com as principais redes sociais de nosso circulo “Facebook, Twitter e LinkedIn”.
  • URL mais amigáveis, finalmente nos livramos de nossas url numéricas
  • Novo layout, porém fidelizando o branco, verde e preto, cores que gosto.
  • Blog agora é mais amigo dos dispositivos móveis, com design responsivo, chega de ficar esfregando o dedo para lá e para cá para ler os posts.

 

Até breve!