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, autoWidth)
 * 
 * # 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("<div id="" + modalName + ""></div>")
		}
		divModal = $("#"+modalName);
		divModal.addClass("modal");
		var content = divModal.html();
		divModal.html("");
		divModal.prepend("<div class="modal_top"><a href="#" title="Fechar esta janela" id="" + modalName +"_close">Fechar</a></div><div class="modal_content"></div>");
		$("#"+modalName +" .modal_content").html(content);
		
		//Mask
		if(mask){
			if ($("#divMask").size() < 1) {
				divMask = "<div id="divMask" style="height:" + $(document).height() + "px;"></div>";
				$(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("<img src=""+content+"" />");
			}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.

<a href="#" rel="modal">Open modal</a><br />
<a href="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" rel="modal">Open external image</a><br />
<a href="#content" rel="modal">Open div#content content</a><br />
<a href="http://www.andafter.org/" rel="modal">Open external page</a><br />

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.

 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?!

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:

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

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.

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.

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)

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:

•  19 ilustração de Hadam Haynes
• Entrevista com Fabio Rex
• Trabalhos do Bruno 9li
• Ilustrano em cima de fotografia

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!

:D

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/

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.

 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!

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:

Comparação entre a jQuery e a Prototype

Usando a Prototype - passo 4 - upload de arquivo sem post na tela

Usando a prototype - passo 8 - seletores CSS

Usando a Prototype - passo 3 - arrays e a classe Enumerable

Criar classes em javascript - usando a Prototype

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

Compartilhe sua opinião nos comentários ;)

Que Tetris é clássico ninguém discute, todo mundo já jogou pelo menos uma vez.Muito por isso que o designer Gabriel Cañas teve a idéia da cadeira abaixo, é muito diferente e estilosa.

E com certeza todo gamer vai querer ter uma, eu sou um deles! :D

Para quem gosta de cores

E aos que não gostam de cores

Queria o preto o branco, pior que não tem previsão de comercialização de tal item, mas achei muito bacana.Tetris é Old School! o/

Via (Clicrbs)

Quase todos usamos um bloquinho (post-it) para anotar recados, aqueles rápidos e eficientes. Geralmente eu perco os papéis facilmente pois minha organização não é das melhores.

Esse porta recados me ajudaria e muito a não perder os papéis, além de ser muito legal! Eu Compraria fácil!

Eu olho para isso e dou risada :D

É um belo item de decoração também

Tu já vomitou hoje? #fail

Como eu sempre digo, passar mal faz bem!

Onde? UrbanOutFitters

Quanto? $18.00 (converter em reais)

Curti o item, design legal e funcional! o/

Não sou artista, não sei desenhar nada alem de bonecos humanos com rabiscos, mas curti a arte do Andy Awesome.

Vários desenhos de coisas e personagens famosos, todos em fomato redondo. Confiram!

COWABANGA!

Geração de hoje nem sabe o que é isso!

Batman! (capaz?)

Lado negro da força!

He-Man! É Clássico!

Clássico²

Bad People! Medo!

Vírus! Doenças! UPA!

JAPANESE! Não brinca?

Heróis mimimi

O que seria isso? Animais? oO

Charlie e?

Clássico³

Manos! Curintiá! Brincadeirinha :P

Dá Haduken Ryu!

Clássico Gummy!

#MJ

Du"h?

FUTURAMA!

No Andy Awesome tem como adquirir os desenhos como Wallpaper para desktop, iphone, em acrílico além de camisetas com estampas dos desenhos.

Eu curti!

:D

Eu adoro objetos de papelaria... lembro que quando era pequena a felicidade de começo e meio de ano era ir em lojas comprar caderno, lápis de cor, tesoura, cola, pasta etc.

Certamente se tivesse que comprar essas coisas hoje em dia, muitas delas seriam mais no estilo das coisas nerds que colocamos no Eu Compraria!, como essas borrachas de teclas...

 Keyboard Eraser Set

O set vem com 2 borrachas (que ainda não sei se dá para escolher), mas certamente a borracha Delete é a mais legal!

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

Entre escada rolante e a tradicional, qual tua usa? A gordice de hoje em dia é um fato, e a maioria certamente iria na escada rolante.Mas o pessoal do The Fun Theory, que é uma iniciativa da Volkswagen mostra que não é bem assim. Que o mais "prático" pode não ser a melhor opção, e sim o que é mais divertido.

No vídeo abaixo mostra bem isso, uma escada normal ao lado de uma rolante, escada normal transformada em Piano, emitindo sons, qual das duas você escolheria?Veja a porcentagem do que a galera escolheu! o/

Eu certamente ia no piano, pelo menos uma vez! :P

Via (The Awesomer)

Curto copos, canecas e afins, ainda mais se forem diferentes. Postei o Shotgun Glasses a algum tempo, e agora vai outro que Eu Compraria fácil!

Parecem copos empilhados né?

Na verdade são 3 copos de tamanhos diferentes

Duas cores e vários tamanhos o/

Tá compreendida a idéia?

Onde? ThinkOfThe

Quanto? $30 USD (Três tamanhos) / $20 USD (Dois tamanhos) / $10 USD (um tamanho) (converter em reais)

Mil anos depois volto a fazer post o/

Se você, como eu, gosta de um ambiente mais natureza, mais green, mais natural, já mostramos por aqui o tapete Grass Mat - tapete de grama e flores...
 

Grass Mat - tapete de grama e flores
 

Para completar o seu cantinho verde artificial, trazer aquele clima de picnic para seu apartamento no 19º andar ou seu escritório com luzes brancas e artificiais, esses porta copos podem te ajudar:

Outside In Grass Coasters
 

O kit vem com 4 porta copos e as graminhas medem mais de 2 centímetros! Eu Compraria!

Onde? Lazzybone
Quanto? £4.99 (converter em reais)

Via Nerd Approved

Declarações de amor clichês não são legais, legal mesmo é quando a declaração tem a ver com as duas partes envolvidas na relação. Se as duas partes gostarem de uma #gordice como presunto, bife, carne de porco ou a vida bacon, esses bottons podem ser a declaração ideal!

I Love You More than Meat Button/Badge/Pin
 

Eu Compraria fácil o "I love you more than bacon" em homenagem ao @gserrano! *óun*

Onde? Sweet Meats
Quanto? $1.75 (converter em reais) cada ou $5.99 (converter em reais) os 4

Esse método já me salvou a vida algumas vezes - com ele é possível disparar um evento de um (ou mais) elementos sem que haja a interacão do usuário.

Por exemplo, imagine o seguinte html:

<select id="meu_select">
   <option value="SP">São Paulo</option>
   <option value="RJ">Rio de Janeiro</option>
   <option value="RS">Rio Grande do Sul</option>
</select>

Com a seguinte implementação javascript (usando jQuery):

$("select#meu_select").change(function() {
   //faz alguma coisa aqui, como uma requisição assíncrona por exemplo
});

Simples, não? Sempre que houver uma mudança no select, será chamadop o bloco de código dentro do change()
Agora, e se você quiser a qualquer ponto do fluxo chamar esse change(), ou simular que o usuário fez uma seleção? Por exemplo, quando a página carrega, você já quer chamar esse bloco para que algo aconteça.
Existe um método no jQuery, trigger, com o qual você pode resolver isso. Simples assim:

$("select#meu_select").trigger("change");

Nesse caso, o método change do elemento select#meu_select é disparado, sem precisar de outras interferências.

Para mais detalhessobre o método e outras formas de usá-lo, visite a documentação oficial.

Canecas são sempre muito bem vindas no Eu Compraria!

Essas, além de bonitas, trazem uma menssagem zen e fazem uma brincadeirinha com a pronuncia do final das palavras nelas impressas. Creativi-tea, tranquili-tea, simplici-tea, sinceri-tea, sereni-tea e prosperi-tea estão do lado de fora, e o que cada uma significa do lado de dentro.

Creativi-tea: Having more creative ability while drinking tea
Tranquili-tea: A state of peace while drinking tea.
Simplici-tea: The appreciation of life’s little moments while drinking tea.
Sinceri-tea: The quality of being open and truthful while drinking tea.
Serena-tea: The absence of stress while drinking tea.
Prosperi-tea: The condition of having good fortune while drinking tea.

E a embalagem ainda lembra um saquinho de chá. Sensacional né?

São 6 canecas com cores diferentes e lindas. Eu Compraria! uma de cada *-*

Onde? Lincoln Stationers
Quanto? $11.95 (converter em reais)

Via Fubiz

Navegando e aprendendo coisas novas, enquanto estudava seletores customizáveis com jQuery encontrei posts interessantes também para a criação de QR Code com jajavasript, e a criação de um "plugin" (se assim se pode chamar, devida a simplicidade) do jQuery para criação do QR Code.

O que é QR Code?

Se você já sabe o que é QR Code pule essa parte, é apenas uma explicação simples para entender o conceito:

O QR Code (ou Código de Barras em 2D), é uma matriz ou código de barras bi-dimensional, criado pela empresa Japonesa Denso-Wave, em 1994. O QR vem de Quick Response, pois o código pode ser interpretado rapidamente, mesmo com imagens de baixa resolução, feitas por cameras digitais em formato VGA, como as de celulares. O QR Code é muito usado no Japão.

Wikipedia pt

O QR Code permite que você fotografe com um celular um código e acesse automaticamente uma URL, por exemplo. O funcionamento é idêntico ao do código de barras, mas até onde sei código de barras é traduzido apenbas em números, enquanto o QR Code permite passar urls completas :D

Como gerar QR Code com javascript?

Na verdade não vamos codificar uma URL em imagem QR Code, vamos utilizar geradores prontos e utilizar o javascript como ferramenta para solicitar a geração do QR Code e exibir essa imagem em nosso site ou aplicativo web.

$(document).ready(function(){

        // Vamos criar um plugin do jquery chamado qrcode

        (function ($) { 

          $.fn.qrcode = function(url,size) { 

                return "http://chart.apis.google.com/chart?cht=qr&chl=" + urk +"&chs=" + size +"x" + size

          }

        })(jQuery);

        $("body").append("<img src=""+$().qrcode("http://www.andafter.org", "100")+"">");

});

No exemplo acima utilizamos o google para criar o QR Code e é possível escolher o tamanho da imagem (variável size da função).

Mais serviços que criam QR Codes e podem ser utilizados no plugin:

http://go.bath.ac.uk/qr/download?DATA=http://www.andafter.org

http://qrcode.kaywa.com/img.php?s=100&d=http://www.andafter.org

É isso, espero ter ajudado! :)

Leia mais

• QR Code - Wikipédia
• Custom drupal
  

 O Sonar (Cakewalk by Roland) é um software para edição, mixagem, composição e gravação de músicas. è uma estação de trabalho de áudio digital que te oferece em uma única ferramenta uma plataforma para você criar suas músicas.

A última versão do software vem com kits de baterias, pianos e diversos outros acessórios para você criar o seu som.

Se você toca guitarra/baixo ele vem com um set de amplificadores e presets para você iniciar sua gravação.

É um programa dificil de se trabalhar para quem não conhece um pouco de mixagem e gravação, mas se você gosta de aventuras é um dos melhores programas para isso.

O Sonar junta as funções de gravação de áudio e MIDI com uma grande quantidade de ferramentas de criação e edição de loops: mudanças de tempos e de afinações (pitch) em tempo real; uma janela tipo Explorer para acesso direto aos arquivos de áudio; compatibilidade com o ACID, com os loops tocando no andamento do projeto; agilidade na visualização de loops com o Loop Explorer, combinação de infinitos loops numa mesma pista; edição de tempos individuais dos loops para criação de um groove ou suingue individual; importação e criação de loops do tipo Power FX.

Os novos programas sintetizadores DXi são baseados na tecnologia DirectX, da Microsoft. Desenvolvidos por diversos fabricantes, recriam e, segundo a Cakewalk, melhoram os sons de velhos sintetizadores e permitem a programação de novos sons com versatilidade e integração ao sistema de áudio e MIDI

Uma miscelânea de programas de usos diversos enriquece ainda mais a versátil coleção de penduricalhos que acompanham o Sonar. O ReValver, da Alien Connections, é um simulador de amplificadores de guitarra. O premiado Tassman 2.0 DXi, da Applied Acoustics Systems, permite a construção de novos sintetizadores virtuais. Temos ainda várias coleções de loops para sampler, de muitos estilos, desenvolvidos por diversos fabricantes. E o Sonar é compatível com o VEGAS, da Sonic Foundry, o preferido dos programas de loops

Operating System* Windows XP SP3, Windows Vista SP2 (32 and 64-bit), or Windows 7 (32 and 64-bit)

Processor Speed Minimum: Intel Pentium 4 2.8 GHz [EMT64] or AMD Athlon XP 2800+ or higher Recommended: Intel Core 2 Quad Core Q8400 Yorkfield 2.66GHz or AMD Phenom Quad Core 9750 2.4GHz or higher

RAM Minimum: 1 GB Recommended: 4 GB

Graphics Minimum: 1024 x 768, 16-bit color Recommended: 1280 x 960, 24-bit color or higher

Hard Disk Space Minimum: 200 MB (Minimal Installation) or higher Recommended: 50 GB (Full Installation) or higher

Hard Disk Type

Minimum: Any Recommended: EIDE / Ultra DMA (7200 RPM) or SATA

MIDI Interface** Windows-compatible

Audio Interface*** Windows-compatible

Media Drive**** Dual Layer DVD-ROM, DVD+/- R, OR DVD+/-RW for installation/ CD-R OR CD-RW capability required for CD audio disc burning

Web Server Access***** Minumum: Any Recommended: Available web server space with FTP access privileges

Sexta-feira, alegria alegria e correria em qualquer agência pra fechar as tarefas da semana...  para relaxar, dar uma pausa no trampo e curtir umas ilustrações sensacionais, o Friday Video de hoje foi twittado esta semana pelo @narcosduda.

Ilustração e dobraduras resultando em uma fantástica animação, "meio" stop motion.

VIDEOGIOCO by Donato Sansone from Enrico Ascoli - Sound Design on Vimeo.

Ótimo!

Informações sobre o vídeo:

VIDEOGIOCO
animation and concept by Donato Sansone myspace.com/milkyeyes
sound design by Enrico Ascoli enricoascoli.com

Para a #gordice de plantão, a melhor opção de travesseiro que poderia existir na Terra. Um travesseiro de bacon!

Shapin" Bacon Plush Toy & Pillow

imagem via Blog de Brinquedo

Segundo o site, foram feitos somente 1000 desses travesseiros, que são feitos de lã 100% reciclada e feltro vermelho. Uma #gordice do bem que mede aproximadamente 38 cm por 13 cm x)~

Eu Compraria e daria vários de presente!

Onde? Sweet Meats
Quanto? $17.99 (converter em reais)
 

Dica da Ligia > via Blog de Brinquedo

O Chris certa vez publicou aqui um guia inicial de Velocity que ensina os conceitos básicos dessa linguagem para desenvolvimento de templates com objetos Java.

Quando li o post não entendi patavinas, hoje trabalhando com o Chris aqui na MMCafé estou um pouco mais familiarizado com o Velocity, por isso resolvi publicar aqui algumas soluções que estão facilitando minha vida! :D

Como fazer um loop no velocity com array

Primeiro o básico, listar os itens de um array:

#set ($arr= ["flush", "straight", "full house"])
#foreach($item in $arr)
  Mão no poker: $item
#end

Como fazer um loop no velocity com limite numérico

Agora o que achei que seria mais simples, mas demorei um pouco mais para encontrar em posts e documentações pela interwebs, como fazer um loop de N até 3N por exemplo:

#foreach($i in [3..9])
   <li>$i</li>
#end

Pronto, simples assim! Espero ter ajudado quem está começando com o Velocity!

Em tempo, vejam essa programação mágica (POG de primeira) que o Chris publicou lá no blog dele.

Nossa vida é composta por inúmeros ciclos. Muitas vezes nem percebemos quando se encerra um e se inicia outro, tamanho é nosso nível de identificação com o formato mecanicista a qual estamos emulsionados.

O Danilo fez ontem um post no blog dele sobre como implementar uma solução com jQuery para fazer aquele famoso "marcar todos" onde um checkbox, ao ser clicado, marca ou desmarca todos os checkboxes d eum certo grupo. Bem bacana!

Ai, resolvi aproveitar o gancho e mostrar como pode ser feito isso sem o uso de qualquer biblioteca javascript - ou seja, na mão. O código, claro, é mais extenso do que se tivesse sido feito com alguma biblioteca, mas acho que vale no mínimo como referência!

Segue, abaixo, a implementação com os devidos comentários!

<html>
<head>
<title>Manipulação de checkboxes</title>
<script type="text/javascript">
    window.onload = function() {
        //listener para click do checkbox que marca/desmarca todos
        document.getElementById("checkAll").onclick = function() {
            var form = document.getElementById("myForm"); //formulário
            //percorre todos os checkboxes e seta se está ou não checado, conforme o valor do check mandatório
            var checks = form.getElementsByTagName("input");
            for(var i=0; i<checks.length; i++) {
                var chk = checks[i];
                if(chk.name == "dados[]")
                    chk.checked = this.checked;
            }
        }    
    }
</script>
</head>
<body>
<h1>Meu form</h1>
<form action="#" id="myForm">
    <fieldset>
    <input type="checkbox" name="dados[]" />check 1<br />
    <input type="checkbox" name="dados[]" />check 2<br />
    <input type="checkbox" name="dados[]" />check 3<br />
    <input type="checkbox" name="dados[]" />check 4<br />
    <input type="checkbox" name="dados[]" />check 5<br />
    </fieldset>
    marcar todos: <input type="checkbox" id="checkAll" />
</form>
</body>
</html>

"What are you doing?" não está com nada... para seu mousepad o que importa é "Where are you pointing?". #euri quando vi esse mousepad:

Twitter Mousepad
 

O legal é o "What to do:" ali do lado onde ficam as dicas de aplicativos, que nesse diz "Just point and have fun". Achei a idéia demais!

Eu Compraria!

Onde? Meninos
Quanto? $11.99 (converter em reais)

Continuando a série de Friday Video, o de hoje é o CCTV Ink TV Commercial.

O que mais me surpreendeu nesse comercial é que ele foi feito para divulgar o canal chinês CCTV pelo que consta, achei toda a produção muito legal, os efeitos e a música não parecem um comercial de auto-promoção dos canais como vemos por aqui...

Achei que fosse uma propaganda de tintas antes de saber que era para o canal chinês.

CCTV Ink TV Commercial - Directed by Niko Tziopanos from Troublemakers.tv on Vimeo.

 Fiquei curiosa em saber como fizeram o comercial, seriam só efeitos especiais mesmo?

Algumas informações sobre o vídeo:

Title: Ink
Client: CCTV - Central China Television
Agency: MMIA
Creative Director: Zhou Jiahong
Art Director: Wu Hao
Production Company: Troublemakers.tv & weareflink.com
Director: Niko Tziopanos

Via Likecool