And After

Friday Video - Visualizing Empires Decline

And After - Cristian Farias — Fri, 20 Nov 2009 13:50:50 -0300

Antigamente haviam grandes impérios, e com o tempo eles foram acabando ~~teóricamente~~. O vídeo abaixo é bem simples, mostra os últimos 4 impérios existentes Espanhol, Português, Francês e Inglês (não tem nada de romanos, são imperios mais modernos) e como foram perdendo espaço (países).

Visualizing empires decline from Pedro M Cruz on Vimeo.

Achei interessante, espero que gostem o/

Via (The Awesomer)

RIP CUP - Copos "Ecologicamente Corretos"

And After - Cristian Farias — Fri, 20 Nov 2009 9:40:57 -0300

Todos sabemos que o papel tem como matéria prima as árvores, e que cada vez mais estão a procura de algo ou jeito ~~(reciclagem)~~ para diminuir o impacto no meio ambiente. Vindo neste pensamento achei interessante a idéia dos designers Yoo-Jin Kim & Hyesun Lee.

A idéia consiste em copos de papel reutilizáveis. Acha nojento? Então veja como funciona.

Copos que não seriam usados uma vez, e sim três!

Tira a borda e pronto.

A natureza agradece

Ilustrar os copos é uma opção válida!

Talvez não pareça ser a idéia mais higiênica do mundo, mas a intenção é muito boa.

Via (Yanko Design)

�lbum em PHP utilizando a API do Picasa, JQuery e FancyBox

And After - F. Furst — Thu, 19 Nov 2009 17:58:0 -0300

Esses dias surgiu a oportunidade de um trabalho, o cliente precisava reformular o site, melhorar o processo de publicação de conteúdo, entre outros... Ao acessar o site para dar uma olhada no tipo de conteúdo, me deparo com o link álbum, cliquei pra conferir e fui parar no picasa, no álbum do cara.

Muito empolgado com as funções de XML do PHP resolvi aproveitar a API do picasa para implementar um álbum com a cara do site do meu cliente mas com a infraestrutura do picasa :D .

O código é bem simples, coloquei comentários onde pudesse gerar dúvidas.

Segue:




    
    Álbum usando a API do Picasa + JQuery + FancyBox

    

    

    
    
    


";

        for($i = 0; $i < count($xml->{"entry"}); $i++) {
            $gphoto = $xml->{"entry"}[$i]->children("http://schemas.google.com/photos/2007"); // pega os nodos filhos do namespace http://schemas.google.com/photos/2007
            $media = $xml->{"entry"}[$i]->children("http://search.yahoo.com/mrss/"); // semelhante à linha acima

            echo "{"group"}->{"thumbnail"}->attributes()->url."" alt="" />";
        }

        echo "";
    } 
    else {
        $tt = file_get_contents("http://picasaweb.google.com/data/feed/api/user/{$picasaUser}/albumid/{$id}"); // busca as fotos de um determinado álbum passado por parâmetro
        $xml = simplexml_load_string($tt);

        echo utf8_decode($xml->{"title"})."
".utf8_decode($xml->{"subtitle"})."
"; 
        echo "";

        for($i = 0; $i < count($xml->{"entry"}); $i++) {
            $media = $xml->{"entry"}[$i]->children("http://search.yahoo.com/mrss/"); // esse cara aqui vc já conhece ...

            echo "{"group"}->{"description"})."" href="".$media->{"group"}->{"content"}->attributes()->url."">{"group"}->{"thumbnail"}[1]->attributes()->url."" alt="" />";
        }

        echo ""; 
    }
?>

O bom disso tudo é que você organiza tuas fotos em uma aplicação específica para esta função, não consome tempo desenvolvendo, não consome espaço no servidor e mantém a identidade visual do site.

Claro, há o que melhorar, mas o básico tá aí. Até...

Links de APIs e bibliotecas utilizados:
http://code.google.com/intl/pt-BR/apis/picasaweb/overview.html
http://br.php.net/manual/en/book.simplexml.php
http://fancybox.net/

Twitter Avatars

And After - Cristian Farias — Thu, 19 Nov 2009 13:14:33 -0300

Twitter faz muito sucesso hoje em dia e isso não é novidade, seu símbolo, o pássaro azul também esta famoso, talvez nem tanto como a Fail Whale :P

Abaixo mostrei ilustrações feitas por Adam koford, cartunista americano que criou as ilustrações baseado no formato do pássaro azul do Twitter.

Achei muito legais e criativas as ilustrações o/

Via (The Awesomer)

Bacon sunrise - propaganda do Bacon Oscar Mayer

And After - Guilherme Serrano — Wed, 18 Nov 2009 13:26:12 -0300

Quem conhece os colaboradores do And After, ou pelo menos nos acompanha pelo Twitter sabe duas coisas sobre nós: somos nerds e adoramos bacon.

E hoje fui presentado pelos meus feeds com uma mídia impressa, propaganda do Bacon Oscar Mayer

Paisagem maravilhosa!

Eu pegaria essa esrada FÁCIL

O Chris mostrou uma lista sensacional de como utilizar o Bacon para tornar a sua vida maravilhosa e Fantástica, segue a imagem:

Sem dúvidas essas dicas são MUITO úteis, não?

Vi a publicidade no Gizmodo.

Sorteio no Twitter com PHP

And After - Guilherme Serrano — Wed, 18 Nov 2009 0:51:51 -0300

Semana passada ganhei cinco seriais do Mind Meister Premium (um aplicativo web para construção de mapas mentais) para distribuir e dois deles resolvi distribuir no Twitter.

Questionado pelo @fefurst sobre os próximos prêmios, falei que não sabia como iria fazer o sorteio e ele, monstrinho programador que é, prontamente respondeu que "ia dar uma olhadinha na API do Twitter".

Dito e feito, na mesma manhã ele me envia a primeira versão de um script em PHP (já viu as novidades do PHP 5.3?)que utiliza a API Serch do Twitter procurando por uma mensagem específica (a da promoção, que você pode setar no script) para sortear entre os participantes...

Features

Configuração da frase a ser buscada
Pode sortear vários participantes
Lista todos os tweets que estão participando
Não sorteia o responsável pela promoção
Não sorteia mais de uma vez um usuário
Elimina RT´s duplicados
Permite filtrar a data inicial e final dos tweets que participarão do sorteio

O código

Agora está na versão 0.3, tudo na agilidade do Furst para publicar um código bonitinho e corrigir alguns bugs. O código está como deve ser: enxuto e fácil de entender, não ousei nem adicionar mais comentários, pois está bastante legível.

 0) {
	$temp = explode(" ", $rt_string);
	foreach($temp as $t) {
		$search_str.="+{$t}";
	}
}

$page=1;
$sorteio = Array();
echo "Sorteio de {$num_premios} prêmios.

";
echo "Twittadas:
";
while(true) {
	$twtr_search = "http://search.twitter.com/search.atom?q={$search_str}&rpp=100&page={$page}"; // busca todos os registros possíveis ...
	$str_xml = file_get_contents($twtr_search);
	$xml = new SimpleXMLElement($str_xml);
	
	$page++;
	
	if($page > 1500) // a api do twitter só retorna 1500 páginas
		break;
	
	if(count($xml->{"entry"}) > 0) {
		
		foreach($xml->{"entry"} as $e) {
			if(strtotime($e->{"published"}) <= $data_fim && strtotime($e->{"published"}) >= $data_inicio) { // tem que estar dentro da data do sorteio
				if(array_search(utf8_decode($e->{"author"}->{"name"}), $sorteio) === false) { // verifica se o cara retwittou mais de uma vez para não aumentar a chance de vitória
					echo date("m.d.y H:i:s", strtotime($e->{"published"})). " - ";
					echo utf8_decode($e->{"author"}->{"name"}).": ".str_replace(Array("", ""), "", utf8_decode($e->{"content"}))."
";
				
					if(strrpos($e->{"author"}->{"name"}, $login) === false) { // não sorteia quem proporciona o sorteio
						$sorteio[] = utf8_decode($e->{"author"}->{"name"});
					}
				}
			}
		}
	}
	else {
		break;
	}
}

if(!empty($sorteio)) {
	echo "

Sorteado(s):";
	for($i=0; $i<$num_premios; $i++) {
		
		if(empty($sorteio)) {
			echo "

sobraram ".($num_premios-$i)." prêmios.";
			break;
		}
	
		srand(strtotime("now"));
		$randval = rand(0, count($sorteio)-1);
		echo "
O vencedor do prêmio número ".($i+1)." é: {$sorteio[$randval]}";
		unset($sorteio[$randval]); // não sortei o cara mais de uma vez ...
		$sorteio = array_values($sorteio); // refaz o vetor eliminando a posição nula do maluco removido 
	}
}
else {
	echo "

Não houve twittadas para o sorteio.";
}

Testei ele aqui e está funcionando perfeitamente. Com essa base dá para implenetar mais coisas, como um reply automático para os vencedores, adicionar periodicamente os concorrentes em um BD para gerar uma "lista" de quem está participando da promoção (caso ela dure vários dias, por exemplo)... criatividade, programadores deste mundo!

A base está aí, valeu @fefurst!

Adesivos para MacBook

And After - Cristian Farias — Tue, 17 Nov 2009 22:11:42 -0300

Não, eu não tenho um MacBook ~~(ainda)~~, mas terei um dia (eu sei que vocês também querem). Não sou de colocar muitos adesivos no meu notebook, no meu tem 3 (simbolo do Grêmio, Rolling Stones e Ubuntu), mas acho interessante ter algum adesivo, dar um toque pessoal ao que é seu.

Esses abaixo são especificos para MacBook, se eu tivesse um é certo que Eu Compraria.

Para fãs de Lego

Onde? Etsy

Quanto? $14.00 (converter em reais)

Para fãs de Mario Bros

Onde? Etsy

Quanto? $14.00 (converter em reais)

Jogo da velha o/

Onde? Etsy

Quanto? $12.00 (converter em reais)

Bom e velho Pac-man o/

Onde? Etsy

Quanto? $14.00 (converter em reais)

Não sou macmaníaco nem perto disso, mas curto tecnologia e terei um! Espero que gostem de algum desses adesivos.

Via (Hype Desire)

Formata��o de datas - Java

And After - Guilherme Serrano — Tue, 17 Nov 2009 16:37:3 -0300

Ontem eu estava apanhando para fazer formatação de data no Velocity (leia o que é Velocity?) para um template e antes de implementar uma POG com vários elseif´s, pedi uma ajuda para o Chris para saber se já existia alguma classe ou função disponível para formatação de datas em texto (em número já estava funcionando).

Danger!

Antecipo que qualquer coisa relacionada a Java ainda é uma novidade para mim, escrevi este post baseado na documentação da Sun (de uma classe) mas mesmo assim caso tenha alguma bobagem no conteúdo comentem, a internet está aí para possibilidades de correção e melhoria do conteúdo! ;)

O Chris me enviou um ótimo link de referência sobre a classe SimpleDateFormat do Java (me corrijam se estiver errado), que como o nome diz é para formatação de datas.

Não acho necessário a tradução da tabela, o funcionamento é simples: ao chamar a função para formatar data você segue os padrões indicado pela primeira coluna, que irá retornar o elemento indicado pela segunda coluna.

Letter	Date or Time Component	Examples
`G`	Era designator	`AD`
`y`	Year	`1996`; `96`
`M`	Month in year	`July`; `Jul`; `07`
`w`	Week in year	`27`
`W`	Week in month	`2`
`D`	Day in year	`189`
`d`	Day in month	`10`
`F`	Day of week in month	`2`
`E`	Day in week	`Tuesday`; `Tue`
`a`	Am/pm marker	`PM`
`H`	Hour in day (0-23)	`0`
`k`	Hour in day (1-24)	`24`
`K`	Hour in am/pm (0-11)	`0`
`h`	Hour in am/pm (1-12)	`12`
`m`	Minute in hour	`30`
`s`	Second in minute	`55`
`S`	Millisecond	`978`
`z`	Time zone	`Pacific Standard Time`; `PST`; `GMT-08:00`
`Z`	Time zone	`-0800`

Tabela da classe SimpleDateFormat (site da Sun)

Dicas para formatação e exibição das datas

Ainda existe algumas dicas para selecionar como será exibido o resultado, por extenso, número ou texto. Segue uma explicação rápida e algumas dicas para formatar e exibir a data:

Texto

Para formatar o texto, se a letra do padrão se repetir 4 vezes ou mais, a forma completa é utilizada, caso contrário a forma abreviada é exibida (se existir).

Número

Para a formatação, o número de repetição da letra padrão (primeira coluna da tabela) indica o número mínimo de dígitos do número, as casas que "faltaram" são preenchidas com zeros.

Year (ano)

Para a formatação, 2 repetições da letra truncam o ano para 2 dígitos.

Mês

Se a letra repetir por 3 vezes ou mais é exibido como texto, caso contrário como número.

Exemplos

Acho que a formatação de data é complicada de explicar, mas com exemplos -> resultados prontos fica masi fácil, então segue uma tabelinha que utiliza os padrões SimpleDateFormat.

Date and Time Pattern	Result
`"yyyy.MM.dd G "at" HH:mm:ss z"`	`2001.07.04 AD at 12:08:56 PDT`
`"EEE, MMM d, ""yy"`	`Wed, Jul 4, "01`
`"h:mm a"`	`12:08 PM`
`"hh "o""clock" a, zzzz"`	`12 o"clock PM, Pacific Daylight Time`
`"K:mm a, z"`	`0:08 PM, PDT`
`"yyyyy.MMMMM.dd GGG hh:mm aaa"`	`02001.July.04 AD 12:08 PM`
`"EEE, d MMM yyyy HH:mm:ss Z"`	`Wed, 4 Jul 2001 12:08:56 -0700`
`"yyMMddHHmmssZ"`	`010704120856-0700`

Tabela da classe SimpleDateFormat (site da Sun)

É isso, espero ter ajudado! Para mais informações sobre formatação de data no Java leia a documentação completa da classe citada neste post.

NetBook - vale a compra?

And After - El Panaton — Mon, 16 Nov 2009 13:24:34 -0300

Eu tinha um notebook dos grandes (digo de 14" :) ), mas estava insatisfeito, pois o tamanho dele era muito grande para sair de casa e me conectar onde fosse necessário, além do peso.

Começei a pensar nos Netbooks, pois a minha necessidade é apenas navegar na internet, ver filmes em viagens, bate-papo e escrever para o #andafter e outros blogs (comedordexis, eucomi, eubebi, ratemytattoo, infoq...)

Começei a analisar os netbooks do mercado. existem alguns modelos simples ao mais completo, de diversas marcas (Asus, Acer, Dell, HP)

Olhei os da Asus e não gostei nem um pouco, claro fui olhar os da Dell e os modelos são bem interessantes.

Acabei comprando de um ex-colega da Dell o Mini9 ele trouxe direto de US e gostei. Eu estava querendo o Mini10, mas não deu, fica para a próxima, mas o mini9 nao me deixou na mão em nada, tem tudo.

Instalei o Ubuntu 9.10 e o bicho é muito rapido.

Bom, mas a pergunta é, vale a pena?

A resposta, depende qual é o seu uso, se você quer programar ou desenhar a resposta é NÂO! pois ele não possui recursos de memória ou HD suficiente para estas tarefas.

Mas se você quer usar para navegar onde quiser, escrever seus blogs, livros etc. Ver filme e outras tarefas não tão Super-User, vale muito a pena, pois o netbook é pequeno e bem leve.

Alguns modelos acompanham modem 3G integrado, o que facilita se você não acha nenhuma rede wireless aberta.

E falando mais especificamente do mini9 da Dell, ele é totalmente hackeável, tem como fazer vários Mods nele para tornar a tela touchscreen e outras coisas maneiras.

Então para fechar, vale a pena somente, se for para uso de internet, filmes e escrita, para coisas geek e nerds não é muito recomendado. (na minha opinião)

Segmentando o AdSense por sites

And After - Guilherme Serrano — Mon, 16 Nov 2009 10:58:33 -0300

Na sexta adicionei AdSense em um blog e precisava segmentar os ganhos pela URL daquele blog, para contabilizar os ganhos específicos daquele site.

Já faço isso com outros sites e tinha esquecido que não era automático, então resolvi publicar um passo a passo para quem não sabe da existência dos critérios de URL.

Ativando e utilizando os critérios de URL

Os critérios de URLfuncionam como os outros critérios para segmentação do AdSense, a diferença é que para utilizar os critérios personalizados você precisa inserir manualmente o critério no bloco de anúncio desejado, já os critérios de URL automaticamente identificam as visualizações e cliques para a URL específica.

Para criar um critério de URL, siga os seguintes passos:

Clique na aba Configurações do AdSense
Clique no sub-menu Critérios
Clique em Critérios por URL

Seguindo estas etapas você poderá gerenciar os critérios por URL já existentes ou adicionar novos. Ao adicionar um critério de URL todos os blocos de anúncio que forem exibidos naquela URL (independente dos critérios personalizados daquele bloco) irão utilizar o critério de URL, facilitando a segmentação dos ganhos por sites.

Visualizando os relatórios segmentados por URL

Para visualizar os relatórios separados por sites siga os passos:

Clique na aba Relatórios
Clique no submenu Relatórios Avançados
Selecione o período do relatório
Em "Exibir" selecione Dados por critérios
Escolha a forma de agrupamento por critério
Clique em Exibir Relatório

Pronto, agora é só clicar em Exibir Relatório para visualizar os dados segmentados e saber exatamente quanto cada um de seus sites rendeu no período selecionado.

Agora que você já sabe como segmentar seus sites por URL´s, aprenda cinco maneiras de aumentar suas visitas sem gastar nada e assista o vídeo oficial do Google sobre como melhorar os ganhos com AdSense.

Adesivos de parede Window e Descolado

And After - Bianca Brancaleone — Fri, 13 Nov 2009 17:53:27 -0300

Procurando um adesivo de parede um pouco fora dos clichês que vemos por aí? Pois bem, encontrei dois ótimos na loja brasileira Chico Rei.

Se você curte uma coisa mais geek, o adesivo com os botões minimizar, restaurar e fechar seriam providenciais em cima de uma JANELA de verdade!

Window

Mandaria um #euri se eu visse um lugar assim...

Onde? Chico Rei
Quanto? a partir de R$59,00

O outro modelo não tem nenhuma ligação a coisas nerds, mas é igualmente "descolado" ~~turupish~~!

Descolado

Onde? Chico Rei
Quanto? a partir de R$59,00

Existem 3 tamanhos diferentes e você pode escolher as cores que quiser.

Eu MUITO Compraria! O primeiro principalmente :D

Friday Video: Kasabian Football Hero

And After - Bianca Brancaleone — Fri, 13 Nov 2009 14:18:4 -0300

Desde que meu irmão (aka @gratti) baixou um tal de Frets on Fire, minha vida nunca mais foi a mesma - não sou pró no game, mas me divirto muito jogando no teclado quando estou no computador (meu dedinho dói de jogar na guitarra, haha).

Mas agora foram além de todas adaptações que já vi do game, e o resultado você vê no Friday Vídeo.

e o que aconteceu...

Kasabian Football Hero

Pelo que entendi, essa foi uma ação do Kasabian para divulgação de uma nova música. Mais algumas informações sobre o vídeo:

Get the album at Amazon - http://bit.ly/2b4Pcy
An experiment to create a giant (three stories high!) guitar game controlled with footballs. Football Hero is played by a team of insanely gifted young freestyle footballers. The game is programmed with the Kasabian track Underdog. Download Underdog from iTunes - http://bit.ly/3HH4Cq

The freestyle footballers are: Paul Wood, Paul Klein, Darryl Stewart, Tom Pett, Lewis Foster & Harry Adcroft - see http://bit.ly/3fxLoK for more info.
Youtube

Se foi uma ação mesmo, achei bem legal, mais pelo resultado em si de uma ova jogabilidade do Frets on Fire x)

Dica do @gratti

Ordenando dados JSON em javascript

And After - Chris Benseler — Thu, 12 Nov 2009 9:39:59 -0300

Trabalho com javascript há mais de 5 anos, e nunca tive que usar o método sort() da classe Array.
Porque? Em todos projetos que participei os dados já vinham ordenados pelo backend.

Ai, essa semana apareceu uma demanda para fazer a ordenação de dados que vêm através de uma requisição assíncrona no formato JSON. Pensei em alterar o backend, mas ia ter impacto em outros lugares e não daria tempo de validar se iria quebrar em outros pontos... então, procurei uma forma de como fazer isso, e encontrei, usando o método sort(). É possível usá-lo, passando uma função como parâmetro e nela criando a lógica para ordenar por uma determinada chave (lembrando que dados JSON são uma sequencia de chaves/valores).

Parece complexo, mas não é. Por exemplo, tendo dados nesse formato:

var featureData = [{name:"chris",description:"description 1}, {name:"guilherme",description:"description 2"},{name:"bianca",descrip tion:"description 3"}];

Digamos que você queira organizar esses dados pela cahe name, em ordem alfabética. Simples:

featureData.sort(function (obj1, obj2) {
return obj1.name < obj2.name ? -1 :
(obj1.name > obj2.name ? 1 : 0);
});

Referência: http://www.highdots.com/forums/javascript/re-sorting-json-data-270187.html

Ilustra��es de Viet-My Bui

And After - Bianca Brancaleone — Wed, 11 Nov 2009 10:50:0 -0300

Não que eu saiba desenhar bem, mas ás vezes me arrisco num desenho de observação (como tenho a cara de pau de colocar no meu Posterous) e, definitivamente, desenhos orgânicos são muito difíceis de se fazer.

Vez ou outra tento desenhar umas silhuetas femininas, acho legal as proporções, as curvas, e adoro quem sabe explorar isso muito bem, como é o caso da vietnamita que, pelo que entendi, usa o nome de Viet-My Bui e o DeviantART ravenskar.

Viet-My Bui

E alguns dos desenhos dela, os que mais gostei na verdade, porque ela tem muitos no DeviantART. Clique nas imagens para ampliar e fiz meu TOP 5 de desenhos preferidos!

E meu TOP 5:

Meu atual wallpaper (que será revezado com as 2 imagens acima)

Um dia aprendo a desenhar bem... e pelo que o The Trendy Girl diz, ela é estudante de comércio. Curioso, não?! x)

Via The Trendy Girl

Plush Sushi: comida japonesa para n�o comer

And After - Bianca Brancaleone — Tue, 10 Nov 2009 12:46:47 -0300

Tenho um ditado próprio em que digo "existem 3 coisas na vida que se aprende a gostar: chimarrão, cerveja e comida japonesa".

Pois bem, já aprendi a apreciar os três e, pra mostrar minha afeição pelas comidas japonesas, umas pelúcias de sushis que são demais!

Plush Sushi

ovas de salmão, atum, camarão, wasabi e gengibre

E eles ainda são bem grandinhos como se pode ver na foto! Eu Compraria!

Aliás, eles fariam uma ótima combinação com as almofadas de comidas japonesas :D

Onde? ThinkGeek
Quanto? $9,99 (converter em reais)

Scanwiches - Sandu�ches Escaneados

And After - Cristian Farias — Tue, 10 Nov 2009 10:55:5 -0300

Um designer americano fã de sanduíches resolve escanear todos que ele come, é estranho mas é muito legal. O nome da figura ~~(designer)~~ é Jon Chonko e reside em Nova Iorque, são gordice pura essas imagens.

CUIDADO!

As imagens abaixo dão FOME!

Cafe Habana: Peixe, salsa, cebola roxa, alface, tomate, maionese picante

Urban Rustic: Presunto, beterraba, rúcula, tomate, azeitonas, mostarda

Urban Rustic: Tahawus, chicken salad, bacon, alface, tomate, pimenta, cheddar branco

Yola"s: Carne de gado, carne de porco picante, feijão, queijo, salsa verde, jalapenos

Urban Rustic: Peito de frango defumado, mussarela e alface

Nha Toi: Carne assada, cenouras, pepino, coentro em uma baguete tostada

Home Made: Amendoins crocantes, geléia de morango em um pão branco

Papa Lima Sandwich: "BLT Perfecto" bacon, alface, tomate, manjericão, maionese em pão de centeio torrado

Home Made: "As Dagwood" Pastrami, Rosbife, pimenta turca, mortadela bolonhesa, salame, provolone, queijo americano, queijo whiz, queijo suiço, pimenta, cheddar, brotos de alfafa, picles, repolho vermelho, beterrabas, maionese, mostarda, tomates secos, tomates frescos, alface, alface bebê, cenoura, cebola roxa, bacon, sobre um rolo de cebola, pão branco e batata.

Urban Rustic: Guacamole BLT, Bacon, guacamole, alface, tomate, pão branco tostado

Yola"s: Bifes, feijão, queijo, salsa verde

Urban Rustic: Pimenta assada, frango grelhado, queijo suíço, alface no pão branco

Homemade: Presunto, provolone, maionese, sal, vinagre, batata frita com pão integral

Urban Rustic: Prosciutto(???), abacate, manjericão, pesto, mussarela em uma Baguette

Tem mais sanduíches aqui no Scanwiches.

Foi sofrido para mim fazer este post, a gordice toma conta de mim no momento. IREI FAZER UM SANDUÍCHE!

Via (Hype Desire)

Parab�ns Firefox!

And After - Guilherme Serrano — Mon, 9 Nov 2009 13:49:21 -0300

Em 2004 surgia o browser que virou fiel companheiro de muitos desenvolvedores e hoje, dia 9 de novembro o Firefox comples 5 anos de existência.

A fundação Mozilla não quis deixar a data passar em branco e convida a todos para celebrar os 5 anos "melhorando a internet" que o Firefox completa junto ao seus usuários.

Clique na imagem para ir para o site Spread Firefox e assistir o vídeo comemorativo

Como desenvolvedor de interface me sinto na obrigação de comemorar e torcer para que venham mais cinco anos de inovação e plugins úteis pela frente.

Que mais usuários passem a utilizar um browser decente, seja ele o Firefox ou não!

Calculadoras reais com cara de Windows e Mac

And After - Bianca Brancaleone — Sun, 8 Nov 2009 22:34:15 -0300

Mais um objeto virtual passando para o real, assim como a Pasta Pendrive, a Borracha Delete, o bloco de notas Icon Notepad e a pasta Meus Documentos... Um conceito da empresa coreana Mintpass:

Mint Calculator #04 - The OS Calculator

Tudo bem, Mac OS é Mac OS, mas a calculadora do Windows tá demais! Mais detalhes no site do Mintpass.

E o mais legal é que já postei aqui no And After um HD no formato de picolé da mesma empresa. Não faz muito sentido para você? Mas tudo tem uma explicação:

Para nós não faz muito sentido um HD de picolé - apesar de ser bem bonito - mas na Coréia uma coisa tem tudo a ver com a outra: pelo que o site diz, eles usam a palavra HARD tanto para hard disk quando para picolé :P
Picolé ou HD?

No mínimo muito criativa essa empresa ;)

Calculadora via noquedanblogs

Como pegar dimens�es da janela e da barra de rolagem por javascript

And After - Chris Benseler — Sun, 8 Nov 2009 14:39:14 -0300

Isso seria efetivamente fácil, se todos os browsers seguissem o padrão da ECMA… mas não é assim que funciona, e ontem um dos meninos que trabalha aqui comigo estava tentando implementar um código javascript que utiliza tanto a altura útil da tela, como a altura visível da janela (window) e a posição das scrollbars.

Papo vai, papo vem, procura na API da Prototype aqui, da jQuery ali, abre o Google acolá… e me deparo com uma página muito completa, que lista os browsers (inclusive por sistema operacional) e qual é o objeto e atributo que está disponível nele.

browser	platform	mode	window.innerWidth window.innerHeight window.pageXOffset window.pageYOffset	document.documentElement.clientWidth document.documentElement.clientHeight document.documentElement.scrollLeft document.documentElement.scrollTop	document.body.clientWidth document.body.clientHeight document.body.scrollLeft document.body.scrollTop
IE	Win32	w. DTD	undef undef undef undef	ok ok ok ok	doc. width doc. height 0 0
IE	Win32	w/o. DTD	undef undef undef undef	0 0 0 0	ok ok ok ok
IE	Mac	all	undef undef undef undef	undef undef undef undef	ok ok ok ok
Firefox	Win32/Mac	w. DTD	+scroller +scroller ok ok	ok ok ok ok	ok doc. height. ok ok
Firefox	Win32/Mac	w/o. DTD	+ scroller +scroller ok ok	doc.width doc.height 0 0	ok ok ok ok
Netscape	Win32	w. DTD	+ scroller +scroller ok ok	ok ok ok ok	ok doc. height. ok ok
Netscape	Win32	w/o. DTD	+ scroller +scroller ok ok	0 0 0 0	ok ok ok ok
Opera	Win32/Mac	all	+ scroller +scroller ok ok	ok doc.height ok ok	ok ok ok ok
Safari	Mac	all	ok ok ok ok	ok doc.height 0 0	ok doc.height ok ok

Ou seja, não existe um método que funcione para todos os browser…

Mas, o autor criou uma implementação cross-browser que funciona para calcular todos esses atributos (altura e largura da janela, posição da scrollbar horizontal e vertical). Fica a dica!

function f_clientWidth() {
	return f_filterResults (
		window.innerWidth ? window.innerWidth : 0,
		document.documentElement ? document.documentElement.clientWidth : 0,
		document.body ? document.body.clientWidth : 0
	);
}
function f_clientHeight() {
	return f_filterResults (
		window.innerHeight ? window.innerHeight : 0,
		document.documentElement ? document.documentElement.clientHeight : 0,
		document.body ? document.body.clientHeight : 0
	);
}
function f_scrollLeft() {
	return f_filterResults (
		window.pageXOffset ? window.pageXOffset : 0,
		document.documentElement ? document.documentElement.scrollLeft : 0,
		document.body ? document.body.scrollLeft : 0
	);
}
function f_scrollTop() {
	return f_filterResults (
		window.pageYOffset ? window.pageYOffset : 0,
		document.documentElement ? document.documentElement.scrollTop : 0,
		document.body ? document.body.scrollTop : 0
	);
}
function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

Segue o link da página, para referência: http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

jQuery - Criando uma classe para Modal

And After - Guilherme Serrano — Fri, 6 Nov 2009 16:36:48 -0300

Estava estudando algumas coisas de jQuery em um tempo livre no trampo e comecei a desenvolver uma classe de modal para jQuery. Sei que já existem várias, lightbox, facebox, e outras, mas fiz para estudar mesmo.

Nunca havia feito um modal do zero - sei que usei uma biblioteca, então não foi do zero mesmo mesmo - mas achei a experiência bem satisfatória e menos traumática do que eu pensava.

Vou explicar primeiro o que a classe se propõem a fazer

Requisitos

Biblioteca jQuery

Funcionalidades

Pode criar diversos modais (iniciando a classe mais de uma vez)
Carrega imagens (jpg,jpeg,gif,png) e ajusta o modal no tamanho da imagem
Carrega elementos de objetos html da página no modal
Carrega html externo (ajax) no modal
Gera as funções para todos os links utilizando o atributo "rel"

Bugs conhecidos

Não redimensiona a altura do modal para um tamanho menor do atual (no IE)

Devem existir mais, pelo que lembro até tinha relatado mais alguns, mas esqueci de anotar e aí... :P

Testei o modal em Firefox, Internet Explorer 8, Internet Explorer 7 (emulado), Internet Explorer 6 (emulado). Tenho algumas idéias que gostaria de implementar mas nem testei ainda, segue a lista para quem quiser se arriscar:

Navegação entre os contents ou imagens do modal
Melhorar o sistema de resize
Melhorar o layout
Implementar exibição de vídeos do Youtube diretamente do link

O código

O código estava bem simples até eu começar a fazer alguns ajustes para o IE.. mas enfim, como é típico do jQuery, acredito que o código está bem "legível", segue a classe:

/* ### Modal Class ###
 * Author: Guilherme Serrano
 * Using jQuery
 * 
 * ### How to ###
 * var name = new Modal(name, mask)
 * 
 * # Arguments #
 * name = id único
 * mask (true/false) = using mask
 * 
 * All links with rel="name" will open modal box
 *  
 */
function Modal(modalName,mask){
	//Vars
	maxHeight = 450;
	maxWidth = 650;
	
	thisClass = this;	

	//Initialize modal
	this.initialize = function(){
		//Create elements & vars
		if($("#"+modalName).size() < 1){
			$("body").append("")
		}
		divModal = $("#"+modalName);
		divModal.addClass("modal");
		var content = divModal.html();
		divModal.html("");
		divModal.prepend("Fechar
");
		$("#"+modalName +" .modal_content").html(content);
		
		//Mask
		if(mask){
			if ($("#divMask").size() < 1) {
				divMask = "";
				$(divMask).appendTo("body");
			}
		}
		
		//Close button
		$("#"+modalName +"_close").click(function(){
			thisClass.close();
		});
		divContent = $("#"+modalName +" .modal_content");
		
		//Centralize on resize window
		$(window).bind("resize", function() {
			thisClass.centralize();
		});
		
		//Open buttons
		$("a[rel=""+modalName+""]").click(function(){
			href = $(this).attr("href")
			if(href == null || href == "" || href == "undefined" || href == "#"){
				thisClass.open();
			}else{
				thisClass.open(href)
			}
			return false;
		})
	}
	
	//Open
	this.open = function(content){
		thisClass.setContent(content);
		if (mask) {
			thisClass.showElement("#divMask");
		}
		thisClass.showElement("#"+modalName);
		thisClass.setMeasures();
	}
	
	//Close
	this.close = function(){
		if(mask){
			thisClass.hideElement("#divMask");
		}
		thisClass.hideElement("#"+modalName);
	}

	//Load content
	this.setContent = function(content){
		if(content != undefined && content != null && content != ""){
			if(content.match(/.gif/) || content.match(/.jpg/) || content.match(/.jpeg/) || content.match(/.png/)){
				divContent.html("");
			}else if(content.match(/http:///) || content.match(/https:///) || content.match(/file:///)){
				divContent.load(content, null, thisClass.setMeasures);
			}else{
				divContent.html($(content).html());
			}
		}
	}
	
	//Show
	this.showElement = function(e){
		$(e).show();
	}
	
	//Hide
	this.hideElement = function(e){
		$(e).hide();
	}
	
	//Centralize
	this.centralize = function(){
		var posTop = (($(window).height()/2) - (divModal.height()/2))
		var posLeft = (($(window).width()/2) - (divModal.width()/2))
		divModal.css({
			"top" : posTop + "px",
			"left" : posLeft + "px"
		});
	}
	
	this.setMeasures = function(){
		thisClass.setWidth();
		thisClass.setHeight();
		thisClass.centralize();
	}
	
	
	// Set height
	this.setHeight = function(){
		h = divContent.height()
		if(h > maxHeight){
			divContent.css({
				"height": maxHeight+"px"
			})
			divModal.css({
				"height": (maxHeight+50)+"px"
			})
		}else{
			divModal.css({
				"height": "auto"
			})
		}
	}

	this.setWidth = function(){
		w = divContent.width()
		if(w > maxWidth){
			divModal.css({
				"width": (maxWidth+20)+"px"
			})
		}else{
			divModal.css({
				"width": "auto"
			})
			if(divContent.width() > maxWidth){
				//alert("Deixou auto, ficou maior, reduziu!")
				divModal.css({
					"width": (maxWidth+20)+"px"
				})
			}
		}
	}
}

E o CSS

.modal {
	position: absolute;
	z-index: 99999;
	display: none;
	background: #fff;
	border: 2px solid #777;
}
.modal_content{
	border: 1px solid #333;
	margin: 5px;
	padding: 5px;
	overflow: auto;
	_height: expression(this.height > 450 ? 450: true);
	max-height: 450px;
}
.modal_content div{
	border: 2px solid blue;
	height: auto;
}
#divMask {
	background-color:#000;
	width: 100%;
	left:0px;
	margin:0px;
	padding:0px;
	position:absolute;
	top:0px;
	z-index:1000;
	opacity:0.8;
	filter:alpha(opacity=80);
	display: none;
}

Como fiz a classe para estudos não utilizei nenhuma imagem e estou publicando sem formatar bonitinho o header do modal (botão para fechar).

Como utilizar

O uso ficou bastante simples, é só iniciar o modal e criar os links que devem abrir. Segue um exemplo da criação de um modal chamado "modal":

$(document).ready(function(){
	var modal = new Modal("modal",true)
	modal.initialize();
});

O código acima acessa a função "initialize" da classe, o primeiro parâmetro (modal) é o nome do seu modal, que pode ser qualquer um. O segundo parâmetro (true) é um boolean, e define se será utilizado a mask para escurecer o fundo do site e destacar apenas o modal ou não.

Os links devem ter o atributo rel igual ao nome do modal que você iniciou (no exemplo de cima, rel="modal") e o atributo href indica qual o conteúdo será exibido no modal (pode ser link externo, link para imagem ou o id de algum elemnto da página atual.

Open modal

Open external image

Open div#content content

Open external page

Conclusão

Gostei da brincadeira, o tempo de desenvolvimento não fui muito longo, comecei no trabalho e terminei em casa, depois fiz alguns ajustes. A biblioteca jQuery é realmente mágica, o código estava bastante curto, pouquíssimas linhas e um modal funcionando.

O código aumentou na medida que comecei a adiconar funcionalidade (identificar o tipo de conteúdo, criar automaticamente as actions para os links com o atributo rel, redimensionar e reposicionar o modal quando a janela é aberta, etc...)

No IE ainda ficou a pendência de fazer o modal diminuir a altura.

Wi-fi no McDonalds? Wi-fries!

And After - Bianca Brancaleone — Fri, 6 Nov 2009 15:14:3 -0300

Não tem muito o que dizer dessa peça que divulga as lojas do McDonald"s com wi-fi: simples e direta, mostrando o serviço e o produto.

Uma propaganda boa é assim, completamente compreensível pelo público alvo da maneira mais simples possível.

Segundo o site Fubiz, a agência responsável pela propaganda foi a DDB Sydney. Essa campanha me lemboru uma outra ótima que gostei, as propagandas das massinhas Play-Doh! :)

E quem não gosta de Wi-Fi gráris, hein?!

Friday Video - The Google Story

And After - Bianca Brancaleone — Fri, 6 Nov 2009 10:6:11 -0300

Infelizmente na última sexta-feira não pudemos postar o Friday Video, mas essa semana não vamos deixar passar. O vídeo de hoje é uma pequena história da evolução da empresa que faz parte de nossas vidas todos os dias há muito tempo (pelo menos se você trabalha com computadores): o Google!

E o vídeo:

Pelo que parece, o vídeo foi criado pelo canal GoogleChannelUK do Youtube. Gostei bastante de toda a computação gráfica do vídeo!

Algumas informações sobre o vídeo:

A (very) quick look back at the Google story over the last 11 years. From Stanford to Mountain View and around the world, featuring many different products, starting with BackRub (Search) up to Google Wave, StreetView and Chrome.
Youtube

Via @interney

E no final:

Ilustra��es Po�ticas

And After - Ligia Mara Ferraz dos Santos — Fri, 6 Nov 2009 9:57:32 -0300

O trabalho que a ilustradora francesa Rebecca Dautremer desenvolve pode ser definido como a poesia das formas e das cores.

Rebecca formou-se em edição gráfica em 1995, e depois de alguns anos passou a desenvolver trabalhos para as editoras infantis Milan-Presse e Fleurus-Presse, além de livros escolares e publicidade. Seus traços geométricos banhados a delicadeza e o uso expressivo das cores quentes tornaram o seu trabalho uma referencia.

Suas ilustrações renderam um convite da para que ela assinasse uma das linhas de perfumes da Kenzo, o Flower.

Particularmente, desconheço designers, ilustradores e mãe que não gostem dos trabalhos de Rebecca.

Mais da artista: www.rebeccadautremer.com/

O site ainda está em construção

Novidades do PHP 5.3

And After - Guilherme Serrano — Thu, 5 Nov 2009 10:48:38 -0300

A pouco tempo renovei diversos feeds da minha aba "Desenvolvimento", adicionei alguns muito bons focados em interface, eliminei alguns blogs estagnados e ao pouco estou acompanhando a galerinha do PHP desde que deixei o ASP de lado e voltei a brincar com o PHP.

Infelizmente estou estudando PHP bem menos que gostaria (em compensação meu estudo com Javascript e jQuery vai à pampa!*), mas aos poucos estou aprendendo e nada melhor do que acompanhar a galera que manja para isso!

Já peguei algumas aulas com o Chris que também está fazendo testes com o framework Code Igniter (que comecei a utilizar por dica do Furst), mas sei que deveria estudar sintaxe antes de brincar com frameworks. Mas quem desenvolve sabe, a afobação é inevitável e ver as coisas funcionando é muito mais legal! :D

Novidades do PHP 5.3

Apresentação do Felipe Ribeiro no PHP - Paraíba.

PHP 5.3 - What"s new?

View more documents from Felipe Ribeiro.

Apesar de não saber (ainda) como funcionavam (ou se existiam) algumas coisas nas versões anteriores, fiquei feliz com algumas coisas que li, como os slides "lambdas e closures", que lembraram bastante algumas coisas do javascript.

E aos que desenvolvem em PHP fica minha recomendação do blog do Felipe.

* à pampa - satisfeito, ótimo, bom demais.

Toalha "Reservado"

And After - Bianca Brancaleone — Wed, 4 Nov 2009 14:28:4 -0300

Verão chegando e todo mundo pensa em calor, praia, clube... e é sempre a mesma coisa, toalhas, chinelos e bolsas são deixadas a deus dará enquanto todo mundo se refresca na água.

Para garantir que ninguém chegue e roube o seu lugar na areia da praia ou espreguiçadeira na beira da piscina, uma toalha que já mostre que aquele espaço está reservado pode ser a solução:

Reserved Towel

A toalha é bem grande, mede 153 x 80cm e é 100% feita em algodão.

E se você curtiu essa toalha, pode gostar também da Dead Body Towel - Uma toalha para chamar a atenção :P

Onde? Lazybone
Quanto? £9.99 (converter em reais)

Simon Andersen - top 20 ilustra��es

And After - Guilherme Serrano — Tue, 3 Nov 2009 23:42:0 -0300

Desde a minha mudança para São Paulo tive também algumas mudanças de hábitos, passei a escrever menos e a programar e desenhar (meu posterous) mais. Desenhando mais, passei a visitar mais meus feeds de ilustração.

Uma experiência minha no Painter, ainda inacabada :)

E nos cliques por meus feeds descobri o trabalho de Simon Andersen, que vale a pena conferir.

Simon Adersen

Um dos trabalhos do Andersen já foi publicado pela Bia aqui, nos Desenhos do Mario & Luigi.

Clique para ver 45 desenhos estilizados de Matio e Luigi

Antes de começar a despejar os trabalhos sensacionais do cara, vamos a algumas curiosidades sobre o cara, que "stalkiei" lá no Devian Art do artista

Interests: Drawing, Video games (though mostly nintendo), drawing, travelling, drawing ... and drawing.
Favourite genre of music: Good music in general
Favourite artist: The ones I get inspiration from.
Favourite poet or writer: Douglas Adams
Favourite game: The Legend of Zelda
Favourite gaming platform: Nintendo! (Viva la Wii)
Personal Quote: The world is a fault in a perfect nothing.
Tools of the Trade: Pencil, pen, brush, Wacom, patience...

lustrações

O cara varia bastante seus traços, existem alguns desenhos bem cartoons, outros bastante realistas, malucos, reais, pinturas, desenhos... vale muito a pena, babei pelo trabalho do cara!

Clique nas imagens para ampliar.

Cartoonzão, cara de desenho animado, lembrei do desenho
do Jackie Chan...

Que iluminação é essa? Hu! :D

Antes...

E depois.

It"s me, Mario!

Nem da para perceber que ele é nintendista, né?

Adoro PB, sombras e... monstros.

Cara de old, adorei as cores!

Um dos meus favoritos, adorei a simplicidade e o "inacabado"

E aí, o que achou das obras? Comente!

E se gostou, tem muito masi no Deviant do Simon Andersen

E se você curte ilustração pode gostar de ver também:

Fotos de Digitais

And After - Cristian Farias — Mon, 2 Nov 2009 23:25:58 -0300

Quando vi as fotos de Kevin Van Aelst na hora pensei em fazer um post. As fotos são muito legais e criativas, colocarei primeiro as impressçoes digitais representadas com vários itens, muito legal!

Achei muito legal essas fotos, abaixo colocarei algumas aleatórias que eu curti :P

Mundo em uma maçã!

Sistema circulatório

Sistema digestivo

Céu estrelado no moleton

Coração de moletons

Pelo que entendi seria o mapa do Hawaii :P

Visitem a página desse cara, tem mais fotos legais que talvez vocês curtam! o/

A propaganda que te acompanha 24h

And After - Ligia Mara Ferraz dos Santos — Mon, 2 Nov 2009 12:37:46 -0300

Por: Ligia Mara Ferraz dos Santos

Existe um lugar cada dia mais desejado pelas marcas: estar presente na vida do consumidor. E como é dificil conquistar esse local, não é um tema que se tem todas as respostas, assim como tudo que envolve a propaganda. O que funciona para um, pode não funcionar para outro.

Vender o seu produto pode até ser uma tarefa razoavelmente facil, mas gerar no consumidor apreço através da identificação com a marca, de modo que ele a introduza em sua vida, não é uma tarefa tão simples assim. Esse é um trabalho difícil, complexo e de extremo valor. Empresas de grande porte tem apostado em mídia interativa, e a conquista do desktop (computador ou celular) tem ganho cada vez mais espaço dentre os investimentos publicitários.

Colocar uma marca no desktop do consumidor através do uso de um aplicativo representa um grande trabalho de comunicação e planejamento feito com muita criatividade, identificação e relevância. Afinal, deve-se instigar o consumidor a querer aquele aplicativo, não é algo que obrigatoriamente deverá estar ali, como um comercial televisivo, uma propaganda em revista ou um banner em um site.

Com isso a marca é levada a outro plano, ela não quer simplesmente vender, ela deseja fazer parte da vida de seu consumidor. Fazer com que ele disponha de tempo e vontade para fazer o download e instale o aplicativo, o game, o programa mais do que a conquista do "top of mind" do consumidor, representa o acesso ao coração do consumidor, é a marca que faz parte da vida dele.

Nos ultimos anos houve um consideravel aumento no número de empresas que disponibilizam games para downloads, jogos online de marcas, wallpaper, ícones, etc. E como o objetivo é estar sempre presente na vida de seus consumidores, os aplicativos para celulares tem ganhado muita força, já que o aparelho acompanha esse consumidor a qualquer hora e local, estarão juntos 24h, independente da idade e da classes sociais. Isso fez com que os aplicativos para celulares ganhassem destaque.

Obviamente, marcas consagradas levam vantagem nessa hora. A Apple, por exemplo, primeiramente trabalhou o produto e a identidade visual da marca, para que fosse visualizada e, posteriormente passou a trabalhar a identificação a do público com a marca. O trabalho que a empresa desenvolveu junto ao seu consumidor, formou uma legião de fãs que buscam mais produtos que remetam à empresa e seus produtos. Essas ações aproximaram o consumidor à marca que ele admira e quanto mais relevante o produto oferecido ou quanto mais provocar algum tipo de identificação, maior a chance de conquistar um espaço na vida desse consumidor e consequentemente em seu desktop.

O aplicativo desenvolvido pode ser algo relevante, como notícias, ou inútil, como um aplicativo que imita os sons de acordo com os movimentos dos sabres de luz de Star Wars. Mas isso não impede que pequenas empresas possam desenvolver aplicativos, porém é aconselhavel que seja um aplicativo quetenham maior relevancia e grau de utilização perante aquele consumidor.

Independente da área de atuação, conhecer os desejos e as necessidades do consumidor , atender suas necessidades e buscar superar suas expectativas, é a chave para conquistar e participar da vida desse consumidor.

Mais de 10 produtos para decorar seu Halloween

And After - Bianca Brancaleone — Fri, 30 Oct 2009 12:10:23 -0300

Clique nos títulos para mais informações e divirta-se!

Gostosuras ou travessuras?

Dead Fred

Splat Stan Drink Coaster

Dead Mark Bookmark

Descanso de cabeça mórbido

Castiçal, gancho para roupa e porta incenso. Macabros!

Bloco de notas assassinado!

Uma toalha para chamar a atenção - Dead Body Towel

Knife Block Voodoo

Almofadas The Godfather - Cabeça de Cavalo

Transformando seu banheiro na cena clássica de Psicose

Zombie Mario

Divirta-se!

Primeira experi�ncia com Prototype

And After - Guilherme Serrano — Fri, 30 Oct 2009 11:4:58 -0300

Eu conhecia a biblioteca de javascript Prototype apenas por documentação e leitura dos posts que o Chris fez por aqui (um passo a passo bem bacana para iniciar o uso da biblioteca), mas até esta semana nunca utilizado ela de verdade.

Comecei a colocar a mão (ui) em um projeto aqui da MMCafé que utiliza a biblioteca, portanto precisei aprender alguma cois, e resolvi documentar minha experiência inicial.

Primeiras impressões sobre Prototype

A biblioteca é bacana, mas aparentemente bem mais complexa que jQuery. Segundo o Chris jQuery tem muitas "funções mágicas", o que pode levar ele a ser menos performático. Não sei, não posso opinar, mas admito que tais funções mágicas facilitam a vida em muitos casos! :D

Ah, essa complexidade pode ser apenas um medo inicial (sair da zona de conforto, né?), então não quero assustar ninguém. Achei a documentação bem boa, mas senti um pouco de falta de alguns exemplos na documentação - nada que uma googleada e alguns blogs não resolvessem.

Seletores

Não vou explicar o funcionamento dos seletores, o post é para expor minha opinião apenas. Para quem conhece jQuery, os seletores funcionam de forma parecida com o jQuery , então achei bastante fácil.

Elements, observe, objects

Sofri! Demorei bem mais tempo do que eu esperava para fazer algumas coisas simples, como setar ações onclick em elementos de determinada classe.

Nesta curta experiência o que me fez sofrer mesmo foi a forma como o Prototype trabalha com os eventos. Aos leitores desenvolvedores (ou apenas curiosos e entusiastas) tenho um post saindodo forno que explica e exemplifica meu problema e minha solução para setar a ação em uma classe inteira de links.

Resumo da obra

Ainda sou mais jQuery pois já estou familiarizado com seus seletores, manipulação de elementos, etc. Também gosto pelo fato da documentação e os diversos blogs com plugins e exemplos de códigos (mas isso não posso comparar pois não procurei blogs específicos sobre Prototype, eles devem existir).

A Prototype não é o bixo de sete cabeças que eu temia, achei a documentação boa, e acredito que a produtividade poder ser equivalente a do jQuery - para quem já conhece o funcionamento da biblioteca e não precisa ficar consultando a documentação a cada 5 minutos, claro.

Continuo achando jQuery mais interessante, mas depois dessa curta experiência estou vendo a Prototype com melhores olhos. :)

Recomendo a leitura

Aí vai uma seleção de posts sobre Prototype já publicados por aqui, quase todos do Chris:

E você, o que prefere?
Prototype, jQuery ou outra biblioteca? Quais os motivos?

Compartilhe sua opinião nos comentários ;)

And After

Friday Video - Visualizing Empires Decline

RIP CUP - Copos "Ecologicamente Corretos"

�lbum em PHP utilizando a API do Picasa, JQuery e FancyBox

Twitter Avatars

Bacon sunrise - propaganda do Bacon Oscar Mayer

Sorteio no Twitter com PHP

Features

O código

Adesivos para MacBook

Formata��o de datas - Java

Dicas para formatação e exibição das datas

Texto

Número

Year (ano)

Mês

Exemplos

NetBook - vale a compra?

Segmentando o AdSense por sites

Ativando e utilizando os critérios de URL

Visualizando os relatórios segmentados por URL

Adesivos de parede Window e Descolado

Window

Descolado

Friday Video: Kasabian Football Hero

Kasabian Football Hero

Ordenando dados JSON em javascript

Ilustra��es de Viet-My Bui

Plush Sushi: comida japonesa para n�o comer

Plush Sushi

Scanwiches - Sandu�ches Escaneados

Parab�ns Firefox!

Calculadoras reais com cara de Windows e Mac

Mint Calculator #04 - The OS Calculator

Como pegar dimens�es da janela e da barra de rolagem por javascript

jQuery - Criando uma classe para Modal

Requisitos

Funcionalidades

Bugs conhecidos

O código

Como utilizar

Conclusão

Wi-fi no McDonalds? Wi-fries!

Friday Video - The Google Story

Ilustra��es Po�ticas

Novidades do PHP 5.3

Novidades do PHP 5.3

Toalha "Reservado"

Reserved Towel

Simon Andersen - top 20 ilustra��es

Simon Adersen

lustrações

Fotos de Digitais

A propaganda que te acompanha 24h

Mais de 10 produtos para decorar seu Halloween

Gostosuras ou travessuras?

Primeira experi�ncia com Prototype

Primeiras impressões sobre Prototype

Seletores

Elements, observe, objects

Resumo da obra

Recomendo a leitura

E você, o que prefere? Prototype, jQuery ou outra biblioteca? Quais os motivos?

E você, o que prefere?
Prototype, jQuery ou outra biblioteca? Quais os motivos?