Ao término deste tutorial, todos os demais dispositivos da sua rede em casa que possuam suporte ao IPv6 conseguirão conectar-se à internet via IPv6.

Após seguir o tutorial da Parte 1 você já deve  possuir umas das duas configurações abaixo:

• Com roteador doméstico + NAT:

• Computador direto na internet com IPv4 público Global Unicast:

Sub rede com ips válidos na internet IPv6

Até alguns meses atrás, após conseguir o túnel pelo site do projeto SIXXS, era necessário manter o túnel ativo por uma semana para conseguir realizar o pedido de alocação de subrede . Porém hoje, todos os usuários que possuem um túnel já possuem também um prefixo de subrede /64 alocado.
Faça o seguinte:

1. Entre no site do projeto SIXXS no endereço www.sixxs.net e faça o login no link Login for Existing Users.
2. Na tela de configurações onde são exibidos os dados do usuário e os túneis haverá também uma tabela com as subredes. Verifique se o prefixo de subrede está ativado, caso contrário, clique no ID da subrede e ative o mesmo.

Pronto. Agora o PoP anuncia a rota na Internet IPv6 dizendo que a sua subrede, por exemplo, 2001:1291:200:8123::/64 é acessível pelo roteador cujo IP é o IPv6 do túnel: 2001:1291:200:123::2.

Anote o Subnet Prefix da sua subrede pois será necessário na configuração do computador como roteador.

Detalhes do IPv6

Antes de configurar o Windows para funcionar como um roteador IPv6 é interessante conhecer uma parte do funcionamento do IPv6.

O IPv6 não implementa broadcast, logo não existe no IPv6 o equivalente a mandar um pacote para o endereço 192.168.1.255 sendo que todos os computadores da sub rede 192.168.1.xxx irão receber o pacote. No IPv6 a funcionalidade do broadcast é feita com multicast.

Mas, para o multicast funcionar as placas de rede devem possuir um endereço IP já atribuído e realizar o join no IP do grupo multicast. Sendo assim como funciona, por exemplo, o DHCPv6 já que não existe broadcast? E o ARP? Para responder isto basta você verificar que todas as suas placas de rede, mesmo antes de começar o tutorial na Parte 1, já possuíam um endereço IP começando com fe80::.

O IPv6 define que os 64 bits mais significativos são usados para definir as redes e os 64 bits menos significativos sejam usados para definir os hosts. Isto mesmo, a recomendação é que para cada usuário final seja fornecido um prefixo IP com 64 bits sobrando para usar nos dispositivos em casa, logo na sua casa você poderá ter 2^64 dispositivos com IPs diferentes todos com IPs reais da internet.

Endereços Link-Local

Todo dispositivo IPv6 possui um endereço IP automaticamente gerado assim que o driver IPv6 é ativado na interface e este endereço IP sempre pertence à rede fe80::/10.
A geração automática dos 64 bits menos significativos é feita automaticamente. Mas como garantir que não haja conflito? A resposta é se basear em algo que já esteja garantido em não conflitar. Se você pensou no endereço da camada de enlace você acertou. O MAC-Address é utilizado na geração automática dos 64 bits menos significativos dos IPs automáticos das placas de rede, porém o MAC-Address possui apenas 48 bits e para gerar 64 bits a partir dele segue-se a receita do padrão EUI-64 que insere os 16 bits 0xFFFE no meio dos 48 bits e inverte o 7º bit mais significativo do valor final.

IPv6 Link-Local gerado automaticamente

Alguns SOs não seguem o padrão EUI-64 para evitar que possa inferido facilmente o MAC Address da interface.

Assim, se você possui outros dispositivos IPv6 na sua rede local e se já compartilhava arquivos pelos compartilhamento do Windows, você já estava usando IPv6.:

Ping de resposta de um computador na rede do Windows

Grupo multicast all-nodes

Agora com todas as placas de rede com endereços IPv6 automaticamente gerados todas elas automaticamente assim que são ativadas realizam o join no grupo multicast all-nodes que representa “todos os dispositivos da camada de enlace”. A implementação do IPv6 definiu este grupo multicast com o endereço ff02::1. Assim, para realizar o equivalente ao broadcast do IPv4 basta enviar um pacote para o grupo multicast ff02::1.

Porém todos estes endereços IPv6 da subrede fe80::/10 são apenas endereços locais que servem para comunicação na rede local e não são endereços válidos na internet . Para os computadores acessarem a internet é necessário um roteador e que as placas de redes todas possuam um endereço válido. A implementação do IPv6 inclui um mecanismo feito para facilitar a configuração de redes IPv6 simples como é o cenário doméstico e que não utiliza necessariamente o bom e velho DHCP.

Router Advertisements

Após ingressar no grupo multicast os dispositivos enviam um pacote ICMPv6 do tipo Router Solicitation para o grupo multicast all-routers, ff02::2, e os roteadores que estiverem configurados respodem com o pacote Router Advertisement que informa o seu endereço IPv6 e qual o prefixo dos 64 bits superiores que a placa de rede deve usar para a autoconfiguração. Este funcionamento difere do DHCP pois não há a necessidade de configurar no roteador um intervalo de IPs.

Com o 64 bits superiores  a placa de rede gera os 64 bits inferiores usando o padrão EUI-64 e registra o endereço IPv6 do roteador que respondeu com o Router Advertisement como gateway para a internet. Assim a placa de rede conterá dois IPs. Um endereço link-local e um endereço real.

IPv6 após a resposta do gateway com Router Advertisement

O mecanismo acima descrito é chamado de Stateless Address Autoconfiguration em contraste com o uso do DHCPv6 para alocação de endereços IPv6 que é chamado de Stateful Configuration.

Se você quiser aprender mais sobre o IPv6 principalmente com relação ao serviços que usam o grupo multicast Link-Local recomendo o mini curso de IPv6 em flash do site www.ipv6.br. É extremamante didático e o capítulo Serviços Básicos do IPv6 foca nos pacotes ICMPv6 usados, por exemplo, no Router Advertisement e Router Solicitation.

Configurando o Windows 7/Vista para funcionar como um gateway IPv6

Basta agora configurar o Windows para encaminhar pacotes e respoder à pacotes Router Solicitation. Tenha em mãos o seu Subnet Prefix e o nome da conexão local usada para comunicar com os outros computadores da rede interna, por exemplo, “Conexão Local 1″ ou “Local Connection 2″.  Abra o Prompt de Comando como Administrador e digite :

1) netsh interface ipv6 add route [Seu Subnet Prefix]/64 [Nome da conexão local] publish=yes

Isto irá definir um endereço IPv6 real com o seu prefixo alocado pelo PoP  à sua placa de rede.

2) netsh interface ipv6 set interface [Adaptador virtual do túnel] forwarding=enabled

Isto irá ativar o encaminhamento de pacotes no adaptador de rede virtual do túnel 6in4.

3) netsh interface ipv6 set interface [Nome da conexão local] forwarding=enabled advertise=enabled
Irá ativar o envio de Router Advertisements na rede local.

Exemplo com os dados do início do post:

1) netsh interface ipv6 add route 2001:1291:200:8123::/64 “Conexão local 1″ publish=yes

2) netsh interface ipv6 set interface “sixxs” forwarding=enabled

3) netsh interface ipv6 set interface “Conexão local 1″ forwarding=enabled advertise=enabled

Pronto. Agora todos os dispositivos da sua rede doméstica terão endereços IPv6 reais da internet. Vá em outro computador e tente rodar o comando

ping ipv6.google.com

ou usando o seu celular via wi-fi na sua rede local navege para o site test-ipv6.com. Os celulares com Android já possuem suporte ao IPv6 via wi-fi.

Isso ocorre porque, apesar do seu Mac ter as duas coisas necessárias funcionando, o PHP está desativado no Apache (o que me faz questionar o sentido da vida). Reverter isso, porém, é muito simples, basta seguir esses poucos passos.

Editando o httpd.conf

O arquivo httpd.conf é o arquivo com as configurações do Apache, todos os tipos de serviço que ele roda e, “até” a configuração de ativar o PHP.

Abra o Terminal (pelo Spotligh ou similar, ou pelo caminho /Applications/Utilities/Terminal.app) e digite (você pode substituir o nano pelo seu editor preferido, como o TextMate) :

sudo nano /etc/apache2/httpd.conf

Com o arquivo aberto, procure pela seguinte linha (é a 111 se você nunca tocou nesse arquivo e está no Lion):

111

#LoadModule php5_module libexec/apache2/libphp5.so

Tudo que você precisa fazer agora é “descomentá-la”, removendo a cerquilha (#) e salvando o arquivo.

Reiniciando o Apache

Você pode iniciar/reiniciar o Apache indo nas Preferências e, em Compartilhamento, e ativando Compart. Web.

Se estiver ativado, desative e ative de novo!

Testando

Para ver se está tudo ok, crie o arquivo “index.php” e coloque-o na pasta Sites do seu usuário.

Neste arquivo, insira o seguinte texto:

1

<?php phpinfo() ?>

O resultado deve ser uma página gigante, com todas as informações da sua instalação PHP, similar à da imagem abaixo.

"Pouca" informação…

Fiz uma rápida pesquisa e acabei instalando dois para testar. Um deles achei decente, com configurações dentro do próprio painel dos Widgets, o outro, não pois as configurações ficavam em um outro lugar e ele criava um novo item no já gigante painel de administração do WordPress. Não bom!

Não preciso de mais um painel principal!

Decidi então ficar com o primeiro, já que ele me parecia mais dentro dos padrões de uso que estou acostumado.

Testando o Plugin de base

Configurei o Plugin, fui ver como estava ficando e encontrei o primeiro problema, o título. O comportamento padrão dos Widgets é não mostrar nada se você escolher não colocar um título. Não foi o caso desse Plugin. Ao não por um título, ele simplesmente veio em branco, mas a barra de título do tema estava lá, estragando tudo.

Pra completar, não conseguia trocar a cor da borda e, pra piorar, como a versão pequena do logo do Universo tem a forma de gota e o Facebook não curte PNG, o fundinho azul deixava o logo com aquela marca branca maldita!

Foi então que comecei a colocar a mão no código, apenas com o objetivo de corrigir esses probleminhas.

Deixando bonito

Depois de estudar um pouco o código original, percebi que ele estava usando uma API antiga do Facebook e que, com ela, eu não ia conseguir deixar do jeito que eu queria.

Barrinha maldita! Bordinha maldita! Fundinho azul maldito!

Comecei a cavocar e alterar o código, fiz um monte de POG pra ir vendo como ficava e acabei tendo o resultado que eu esperava, com bordinha arredondada, colado num dos cantos, fundo branco etc.

Isso sim é encaixe!

Aí, chegou o momento da verdade. O Diabinho gritando: “Tá ótimo, parte pra próxima!”. O Anjinho gritando: “Tá tosco, meu filho! Funciona, mas ninguém nunca mais vai conseguir arrumar isso de maneira fácil. Faz direito!”. Sim, o Anjinho é prolixo.

Transformando o POG em Plugin

Resolvi ouvir o Anjinho e percebi que a coisa era relativamente simples. Um Plugin de WP se resume a basicamente a formulário, Widget e registro junto ao WordPress.

O Widget já estava funcionando via POG, bastava transformar tudo que estava hard coded em utilização de parâmetros.

O registro do Plugin junto ao WordPress já tinha vindo junto do código original… não havia muito a ser feito.

O formulário é que deu um pouco mais de trabalho, já que resolvi que ia usar um outro componente (text area) que não existia no formulário orginal (nele, só tinha text box e check box).

Já que resolvi escrever um post sobre o assunto, vou comentar tudo que foi feito, com um pouquinho de código pra vocês… seus geeks! O código fonte completo pode ser baixado na própria página do Plugin “Styled Facebook Like Box”.

Metendo a mão no código

Parâmetros

A primeira coisa que comecei a alterar, já que a API nova do Facebook era um pouco diferente, foi a lista de parâmetros utilizados no form.

13
14
15
16
17
18
19
20
21
22

$styled_facebook_like_box_options['widget_fields']['title'] = array('label'=>'Widget title:', 'type'=>'text', 'default'=>'Facebook', 'class'=>'widefat', 'size'=>'', 'help'=>'The title before your widget');
$styled_facebook_like_box_options['widget_fields']['profile_url'] = array('label'=>'FanPage URL:', 'type'=>'text', 'default'=>'http://facebook.com/universo.mobi', 'class'=>'widefat', 'size'=>'', 'help'=>'Your Facebook Fan Page URL');
$styled_facebook_like_box_options['widget_fields']['width'] = array('label'=>'Width:', 'type'=>'text', 'default'=>'300', 'class'=>'', 'size'=>'3', 'help'=>'(Value in px)');
$styled_facebook_like_box_options['widget_fields']['height'] = array('label'=>'Height:', 'type'=>'text', 'default'=>'550', 'class'=>'', 'size'=>'3', 'help'=>'(Value in px)');
$styled_facebook_like_box_options['widget_fields']['border_color'] = array('label'=>'Border color:', 'type'=>'text', 'default'=>'#000', 'class'=>'', 'size'=>'', 'help'=>'(#E1E4E6, white)');
$styled_facebook_like_box_options['widget_fields']['background_color'] = array('label'=>'Background color:', 'type'=>'text', 'default'=>'#FFF', 'class'=>'', 'size'=>'', 'help'=>'(#E123F0, blue)');
$styled_facebook_like_box_options['widget_fields']['faces'] = array('label'=>'Show faces:', 'type'=>'checkbox', 'default'=>true, 'class'=>'', 'size'=>'', 'help'=>'Show profile photos');
$styled_facebook_like_box_options['widget_fields']['stream'] = array('label'=>'Show stream:', 'type'=>'checkbox', 'default'=>false, 'class'=>'', 'size'=>'', 'help'=>'Show profile stream');
$styled_facebook_like_box_options['widget_fields']['header'] = array('label'=>'Show header:', 'type'=>'checkbox', 'default'=>false, 'class'=>'', 'size'=>'', 'help'=>'Show default Facebook header');
$styled_facebook_like_box_options['widget_fields']['style_code'] = array('label'=>'Style code:', 'type'=>'textarea', 'default'=>'-moz-border-radius: 10px; border-radius: 10px; -webkit-border-radius:10px;', 'class'=>'', 'rows'=>'6', 'cols'=>'31', 'help'=>'margin-left: -40px; border-radius: 10px;');

Não sei se essa é uma forma normal de declarar os parâmetros de Widgets, mas achei bem interessante relativamente fácil de manejar. Tudo que tive que fazer foi alterar os arrays para os parâmetros que ia usar, acrescentar um novo tipo (textarea, na linha 22) e colocar uns helps decentes.

O Widget propriamente dito

O Widget propriamente dito foi o que realmente fez a diferença, já que antes eu não tinha controle de como o ele ficava na tela.

24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// Output the widget in the sidebar
function styled_facebook_like_box($title, $profile_url, $width, $height, $faces, $border_color, $background_color, $stream, $header, $style_code){
	//Insert Facebook default JavaScript
 	echo "<div id='fb-root'></div>
		<script>(function(d, s, id) {
 		var js, fjs = d.getElementsByTagName(s)[0];
 		if (d.getElementById(id)) return;
 		js = d.createElement(s); js.id = id;
 		js.src = '//connect.facebook.net/pt_BR/all.js#xfbml=1';
		fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));</script>";
	//Insert the styled Like Box
	echo "<div class='fb-like-box' data-href='$profile_url' data-width='$width' data-height='$height' data-show-faces='$faces' data-border-color='$border_color' data-stream='$stream' data-header='$header' style='background-color:$background_color;";
	if ($style_code)
		echo $style_code;
	echo "'></div>";
}

Dessa forma, na linha 27 eu joguei o JavaScript da página de desenvolvimento do Facebook (que eles recomendam que eu jogue no início do Body do HTML, mas eu não tinha ideia de como fazer isso via plugin) e na linha 37 a DIV que será preenchida pelo Facebook.

Repare que na linha 38 eu coloco um campo como opcional, que é exatamente a textarea do formulário. So nada for colocado nela, esse trecho é desconsiderado.

O código do  Plugin tem uma funçãozona com outras dentro. Entre elas, a do formulário e a que chama essa função (styled_facebook_like_box) que mostrei acima.

Aqui, segue o início dela:

43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

function widget_styled_facebook_like_box_init(){
	if (!function_exists('register_sidebar_widget'))
		return;
	$check_options = get_option('widget_styled_facebook_like_box');
 
	// Show the Widget in the sidebar
	function widget_styled_facebook_like_box($args){
 
		global $styled_facebook_like_box_options;
		extract($args);
		$options = get_option('widget_styled_facebook_like_box');
 
		// Fill options with default values if value is not set
		$item = $options;
		foreach($styled_facebook_like_box_options['widget_fields'] as $key => $field){
			if (! isset($item[$key])){
				$item[$key] = $field['default'];
			}
		} 
 
		$title = $item['title'];
		$profile_url = $item['profile_url'];
		$width = $item['width'];
		$height = $item['height'];
		$faces = $item['faces'] ? "true" : "false";
		$border_color = $item['border_color'];
		$background_color = $item['background_color'];
		$stream = ($item['stream']) ? "true" : "false";
		$header = ($item['header']) ? "true" : "false";
		$style_code = $item['style_code'];
 
		//Remove the Wordpress Title if none was set
		if ($title)
			echo $before_widget . $before_title . $title;
 
		echo $after_title; 
 
 	styled_facebook_like_box($title, $profile_url, $width, $height, $faces, $border_color, $background_color, $stream, $header, $style_code);
 	echo $after_widget;
	}

A função widget_styled_facebook_like_box pega todos os parâmetros preenchidos no formulário e, com eles, chama a styled_facebook_like_box. Tudo que fiz aqui foi alterar os parâmetros que eram usados.

O formulário

Esse foi o pedaço que mais deu trabalho, exatamente porque tive a brilhante ideia de usar a textarea. Diferente de tudo que já era usado no formulário que funciona como “<input type=’algum tipo…”, a text area tem uma tag que abre com ela mesma e não com um tipo, assim “<textarea…>alguma coisa</textarea>. Então sofri um pouco para conseguir colocá-la na tela.

Achei a maneira de colocar criar o formulário do código que usei de base muito elegante, já que fazia tudo dentro de um loop, em vez de fazer na unha, então resolvi manter, apesar da dificuldade maior.

84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

	// Output the widget form
	function widget_styled_facebook_like_box_control(){
 
		global $styled_facebook_like_box_options;
 
		$options = get_option('widget_styled_facebook_like_box');
		if (isset($_POST['styled_facebook_like_box-submit'])){
 
			foreach($styled_facebook_like_box_options['widget_fields'] as $key => $field){
				$options[$key] = $field['default'];
				$field_name = sprintf('%s', $key);
				if ($field['type'] == 'text' || $field['type'] == 'textarea'){
					$options[$key] = strip_tags(stripslashes($_POST[$field_name]));
				}
				elseif ($field['type'] == 'checkbox'){
					$options[$key] = isset($_POST[$field_name]);
				}
			}
 
			update_option('widget_styled_facebook_like_box', $options);
		}
 
		foreach($styled_facebook_like_box_options['widget_fields'] as $key => $field){
			// print_r($field);
			$field_name = sprintf('%s', $key);
			$field_checked = '';
			if ($field['type'] == 'text' || $field['type'] == 'textarea'){
				$field_value = (isset($options[$key])) ? htmlspecialchars($options[$key], ENT_QUOTES) : htmlspecialchars($field['default'], ENT_QUOTES);
			} elseif ($field['type'] == 'checkbox'){
				$field_value = (isset($options[$key])) ? $options[$key] :$field['default'];
				if ($field_value == 1){
					$field_checked = 'checked="checked"';
				}
			}
			$jump = ($field['type'] != 'checkbox') ? '<br />' : ' ';
			$field_class = $field['class'];
			$field_size = ($field['class'] != '') ? '' : 'size="'.$field['size'].'"';
			$field_help = ($field['help'] == '') ? '' : '<small>'.$field['help'].'</small>';
			//Exclusive for textarea
			$field_rows = ($field['rows'] == '') ? '' : 'rows="'.$field['rows'].'"';
			$field_cols = ($field['cols'] == '') ? '' : 'cols="'.$field['cols'].'"';
			if ($field['type'] != 'textarea'){
				printf("<p class='styled_facebook_like_box_field'>".
						"<label for='$field_name'>" . __($field['label']) . "</label>$jump".
						"<input id='$field_name' name='$field_name' type='" . $field['type'] . "' value='$field_value' class='$field_class' $field_size $field_checked />".
						"$field_help</p>");
			}
			else{
				printf("<p class='styled_facebook_like_box_field'>".
						"<label for='$field_name'>" . __($field['label']) . "</label>$jump".
						"<textarea id='$field_name' name='$field_name' value='$field_value' class='$field_class' $field_rows $field_cols>$field_value</textarea>".
						"$field_help</p>");
			}
		}
		echo '<input type="hidden" id="styled_facebook_like_box-submit" name="styled_facebook_like_box-submit" value="1" />';
	}

Basicamente, tive que acrescentar as linhas 122, 123 e 124, já que são parâmetros de linhas e colunas exclusivos de um textarea (foram definidos lá no começo, na linha 22) e o trecho que inicia na linha 131.

Com isso, o form do widget ficou assim:

Form final do "Styled Facebook Like Box"

Ficou exatamente como eu queria, com os campos padrão do Widget do Facebook, mas a textarea com um campo para colocar formatações CSS.

Registrando junto ao WP

Finalmente, entra o código para registrar o Plugin junto ao WordPress. Esse código é o que permite que o Plugin seja reconhecido como um Widget.

141
142
143
144
145
146
147
148
149

	// Register the widget with WordPress
	function widget_styled_facebook_like_box_register(){
		$title = 'Styled Facebook Like Box';
		// Register widget for use
		register_sidebar_widget($title, 'widget_styled_facebook_like_box');
		// Register settings for use, 300x100 pixel form
		register_widget_control($title, 'widget_styled_facebook_like_box_control');
	}
	widget_styled_facebook_like_box_register();

As únicas coisas alteradas aqui forams o nome do Plugin e os nomes das funções chamadas.

Mandando tudo para o wordpress.org

Depois de ter feito tudo isso e testado bastante, resolvi que esse plugin merecia mais do que ficar preso ao blog do Universo. Dei uma pesquisada e vi que era muito fácil submetê-lo à lista de Plugins do WordPress.

Basta entrar no site do WordPress (o .org, não o .com) criar um cadastro, preencher o formulário de submissão e fazer upload de um .zip com seu plugin. Seu plugin deve ter alguns comentários que o descrevem, um TXT e ainda é possível colocar screenshots. Isso tudo é usado para a página do seu Plugin e esse texto é apresentado quando seu Plugin é instalado no WordPress.

Após algumas horas, recebi um email dizendo que o Plugin tinha sido aprovado e que eu já podia enviá-lo por SVN.

Subi os arquivos e, quase que instantaneamente, lá ele estava. Depois de algum tempo de teste, resolvi corrigir algumas coisas, mudei a versão e subi novamente. O processo de atualização foi totalmente automático e não tive que fazer nada pra que ele mudasse da 1.0 para 1.1 e depois para a 1.2.

Finalmentes

Acei todo o processo bastante simples, desde o desenvolvimento (Ok, usei um outro plugin como base, mas, mesmo assim, não é nada de outro mundo)até a submissão.

Foi divertido e empolgante ver o plugin no ar (em 1 dia, já teve 288 instalações) e sendo usado! Me empolguei tanto, que instalei aqui no Bit a Bit!

Um dos motivos que me fez demorar de abandonar o FireFox era um pluginzinho (FaviconizeTab) que dava um “pin” em abas que eu determinava conforme uma Expressão Regular de URL. Dessa forma, deixava as coisas que acesso o dia todo fixas num canto, ocupando menos espaço que uma aba normal.

Procurei muito por isso no Chrome e, enfim, achei!!!

A extensão se chama URL Pinner e funciona praticamente da mesma forma que minha velha conhecida. Basta escolher qual RegEx você quer “Auto Pinar”, salvar e pronto!

Configurações do URL Pinner

Feito isso, basta acessar as URLs especificadas, que elas vão para o cantinho delas! Você pode até dizer a ordem que quer que elas fiquem (não tinha isso no que eu usava no FF) e elas se arranjam!

URL Pinner em ação

As teclas de atalho não funcionaram no Mac, mas, como o que mais me importava era realmente a função de automatizar o processo, nem me importei!

Para utilizá-la é simples: o usuário só precisa usar óculos 3D, comandos de voz e as mãos para manipular os objetos. Além disso, todo o sistema usa apenas dispositivos de baixo custo, como o Kinect, e não requer o uso de monitores especiais para a exibição da imagem 3D, ficando ao alcance de todos.

Aplicações

O Fusion4D foi desenvolvido como opção de manipulação direta para o atlas anatômico VIDA, do Laboratório de Tecnologias Interativas da Escola Politécnica (Interlab). Este atlas é destinado a aulas de anatomia que usam uma grande quantidade de modelos e órgãos reais, o que torna difícil e caro manter os laboratórios. O projeto representa uma alternativa para complementar o estudo através de peças anatômicas e livros dereferência. Existe ainda o potencial para seu uso fora do ambiente do laboratório, permitindo aos estudantes a visualização dos modelos 3D em casa ou em outras situações de ensino a distância.

Além da aplicação no projeto VIDA para ensino da medicina, o Fusion4D poderá ser usado para outras aplicações médicas e educacionais, bem como em jogos, publicidade, engenharia, navegação em ambientes virtuais ou telepresença, entre outras áreas.

Como funciona?

O Fusion4D utiliza imagens 3D anaglifas e um dispositivo Kinect para detecção do esqueleto e captura de voz do usuário.  O usuário interage com o sistema usando comandos de voz em inglês. Tais comandos permitem que se selecione o objeto a ser manipulado e a maneira de interagir com ele.

Comandos

O comando “grab” seleciona um objeto e permite movimentar, rotacionar ou ampliar o objeto com as mãos até que o objeto seja solto pelo comando “release“.

O comando “explode” permite observar o objeto 3D em detalhes; o comando “show label“ mostra uma etiqueta descritiva do objeto manipulado, e o comando “change model“ permite escolher outros modelos disponíveis no sistema.

Finalmente, o comando “time” permite ver como o objeto seria no passado e no futuro movimentando a linha do tempo com uma das mãos. Se o usuário precisar de ajuda sobre o sistema, o comando “help” mostra uma lista de comandos de voz.

Este projeto foi desenvolvido como trabalho de formatura pelos alunos Keila Keiko Matsumura e Roberto Sonnino, formandos da turma de 2011 do Curso Cooperativo de Engenharia de Computação, e orientado pelos professores Dr. Romero Tori (orientador) e Dr. Ricardo Nakamura (coorientador), membros do Laboratório de Tecnologias Interativas da Escola Politécnica (Interlab).

Para mais informações do projeto e dos resultados obtidos e trabalhos futuros, acesse o site do Fusion4D.

Você já ouviu falar de sistema de recomendação? Já teve a curiosidade de saber como funciona? Pois, então, prossiga na leitura. Em especial, abordarei o tema utilizando terminologias e dados da rede social Facebook.

Introdução

Você já ouviu falar de sistema de recomendação? Já teve a curiosidade de saber como funciona? Pois, então, prossiga na leitura. Em especial, abordarei o tema utilizando terminologias e dados da rede social Facebook.

Por quê? O Facebook é uma rede social gigantesca e, provavelmente, quase todos os seus amigos possuem uma conta lá.

Alguns sistemas, por exemplo o GiveEmThis.com, propõem a utilização dos dados dos seus amigos para auxiliar a tarefa da compra de presentes. Podemos também citar a Amazon, a qual possui iniciativa que utiliza dados sociais do Facebook para personalização de recomendações (notícia no mashable). Hoje em dia, fala-se muito sobre sistemas de recomendação e, acredito, que você não deva passar um dia sem receber algum tipo de informação de algum sistema do gênero.

No decorrer do artigo, apresentarei, de maneira geral, os conceitos e formas para o entendimento e desenvolvimento de um simples sistema de recomendação de páginas (likes) utilizando os dados dos seus amigos do Facebook. Por simples, quero dizer não serão abordadas formas de como lidar com o fato de os dados serem esparsos; nem com o fato de estarmos mexendo com um grafo, por exemplo, podemos coletar dados do amigo do amigo do amigo; nem mesmo com fato de estarmos em um contexto social (laços de amizade). Nos restringiremos, assim, aos nossos amigos imediatos, ok? Se você entendeu pouco ou nada deste último parágrafo, não tem problema. Se tiver curiosidade, mande um e-mail. Além do mais, neste primeiro artigo, não entrarei em detalhes de como coletar os dados.

Recomendação de páginas (no exemplo, página da banda AC/DC) utilizando likes de amigos

Para quem não conhece a mecânica do Facebook: através dele é possível gostar de páginas, por exemplo, um usuário pode gostar (like) da página de uma banda de rock. Porém, não há a opção negativa, ou seja, não gostar de alguma página explicitamente (dislike). Estes likes criam links entre os usuários e as páginas e podem ser utilizados para tarefas interessantes (além da tratada aqui), por exemplo, para segmentação de mercado. Na nova versão do OpenGraph (que atualmente está em Beta) do Facebook , é possível executar “ações” que ligam usuários às páginas (e outros objetos), por exemplo, a Ana comprou o CD do ACDC. Mas isso é tema para artigo futuro.

Filtragem Colaborativa

Imagine, agora, uma situação em que você esteja conversando com um amigo. Você sabe que ele gosta de seriados, filmes e bandas com as quais você também se identifica, ou seja, os seus gostos são similares. Nesta conversa, ele recomenda um filme que ele gosta, mas que você não conhece. Assim, por conhecer os gostos dele, você fica curioso em assistir ao filme. Este processo se repete diariamente em nossas vidas. Agora imagine o caso em que, ao invés de um amigo, estamos lidando com um grupo de amigos, cujos gostos são conhecidos, alguns mais similares e outros menos. Como poderemos filtrar recomendações destes amigos?

De maneira geral, para um simples sistema de recomendação que lide com objetos e usuários, os laços de amizade não importam. Neste artigo, também iremos ignorar os laços de amizade. Mas adianto que podemos desenvolver sistemas que exploram estes laços para obtenção de melhores recomendações personalizadas.

Podemos abordar o problema com uma técnica que é conhecida, na literatura, por filtragem colaborativa baseada em usuários (tradução livre do inglês user-based collaborative filtering). O termo ilustra o fato de vários usuários estarem colaborando para que o sistema filtre uma recomendação para você. Neste caso, para filtrar recomendações, o sistema explora a similaridade entre usuários utilizando as ligações entre estes e os objetos. Existe, também, o caso em que a filtragem é baseada nos objetos (item-based collaborative filtering), no qual, o sistema explora a similaridade entre os objetos utilizando as ligações entre usuários e objetos. Detalhes, vantagens e desvantagens das duas abordagens podem ser explorados em outro artigo.

Definição do problema e modelagem dos dados

Na definição do problema, temos como objetivo desenvolver um recomendador de gostos (possíveis novas ligações entre você e uma página recomendada) baseado em gostos de outros usuários (ligações já existentes). A partir do Facebook, podemos obter dados dos usuários (você e amigos), das páginas e das ligações entre eles.

Esses dados podem ser representados em uma matriz, na qual as linhas representam os usuários e as colunas representam os objetos. Nas células da matriz, 1 indica que o usuário (linha) desta célula gosta do objeto (coluna), e 0 indica que o usuário não conhece o objeto ou que não gosta deste (discutiremos isto novamente).

Matriz de Dados - exemplo com 5 usuários e 5 páginas, os testes foram feitos com 5 usuários e 250 páginas

Cálculo de similaridades

Agora, o recomendador deve quantificar as similaridades entre você e seus amigos. Por exemplo, imagine que você goste de 5 páginas, sua amiga Ana goste de 10, que vocês gostem de 3 em comum (interseção) e que, juntando todas as páginas que você e Ana gostem, temos 12 páginas (união). Podemos expressar a similaridade entre vocês dois pela razão entre o total de páginas em comum pelo total de páginas juntas, ou seja, a quantificação da similaridade seria de 3/12 (0.25). Se você conhece notação de conjuntos, fica como exercício traduzir o para ela.

Existem diversas formas de calcular a similaridade entre duas entidades. No caso, o coeficiente descrito é conhecido por coeficiente de similaridade de Jaccard. Podemos, por exemplo, calcular esse coeficiente utilizando distância euclidiana, correlação de Pearson, entre outras formas.

Gerando recomendações

Agora que temos uma maneira de quantificar as similaridades entre você e os seus amigos. Podemos, por curiosidade, obter uma lista dos amigos do usuário Alvo (usuário de testes) ordenada pelo coeficiente de similaridade utilizado. O usuário criado para os testes deste artigo possui 4 amigos (visualizar matriz de dados).

Lista de amigos ordenados pelo coeficiente de similaridade (neste caso, coeficiente de Jaccard)

Observe os valores dos coeficientes. O valor final está no invervalo [0,1]. Os valores são baixos pois o total de elementos do conjunto de gostos derivados da união de duas pessoas é muito grande. O total de páginas que gostamos pode ser pouco comparado ao total existente (a matriz resultante da representação dos dados é esparsa). Por exemplo, Bob pode gostar de 206 páginas, enquanto você gosta de apenas 6, todas em comum com Bob. Então, o valor da similaridade calculado será baixo, mas como estamos calculando os valores em relação a você, o valor será alto para você. Para Bob, talvez este valor seja baixo mesmo, ou seja, talvez exista uma amiga Carla que goste de 30 objetos em comum com Bob, enquanto você gosta de apenas 6 (repare que o apenas é relativo). O zero do coeficiente indica que não há gostos em comum.

Podemos, de imediato, dar uma olhada nos gostos do amigo que ficou em primeiro lugar e escolher aleatoriamente algo que não conhecemos. Mas, o recomendador pode fazer melhor. O resultado final pode ser obtido utilizando-se uma média ponderada das páginas que ainda não conhecemos utilizando os coeficientes de similaridade dos nossos amigos como pesos. Os valores obtidos podem ser interpretados como a probabilidade de nós gostarmos do objeto em questão.

Exemplo de cálculo da média ponderada para o usuário Alvo e página JovemNerd. Notações: sim(W,Z) representa o coeficiente de similaridade entre W e Z; Like(X, Y), expressa se X gosta da página Y.

Para efetuar a média ponderada, utilizaremos tantos os 0s quanto os 1s associados a uma página. No like do Facebook, a escala encontrada é limitada, 0 ou 1, e nela, o valor de 0 não significa o contrário do valor 1, ou seja, 1 significa que gostamos, mas 0 pode significar que não conhecemos ou que não gostamos da página. Mesmo assim, o recomendador pode utilizar os 0s para amortizar a recomendação final.

Imagine que sua amiga Ana goste de uma página, que a similaridade entre vocês seja 0,1, que seu amigo Bob não goste desta página e que a similaridade entre vocês seja 0,8. Se não levarmos em consideração o 0 do Bob na média ponderada, o recomendador retornará 1 para a página em questão. Na verdade, o recomendador retornará 1 para todas as página que algum amigo seu goste e que você não conheça, pense um pouco. Se levarmos em consideração o 0 do Bob, que é muito similar a você, o recomendador amortizará o valor e retornará 0,1/0,9, aproximadamente 0,11, um valor baixo que expressa o fato de que se a Ana gosta e vocês não são tão similares, talvez você não goste mesmo.

Para a conta final, o recomendador calcula os coeficientes de similaridade entre você e seus amigos e armazena os valores. Então, para todos os 0s da sua linha na matriz (páginas que você não conheça), o recomendador realiza a média ponderada dos seus amigos: soma as similaridades dos amigos que gostam da página, divide pela soma total das similaridades e armazena onde encontrou o 0. Ao final, teremos valores inferidos pelo recomendador que expressam, baseando-se nos dados dos seus amigos, a probabilidade de vocês gostar das páginas que estavam com 0s.

As 5 primeiras páginas recomendadas.

Cálculo para a página JovemNerd

Considerações

A abordagem que utilizamos é simples o bastante para que possamos entender os conceitos envolvidos e o que acontece por debaixo dos panos. Por ser simples, não recomendo a implementação desta abordagem em produção. Ela possui alguns problemas.

A abordagem não é escalável. Imagine que o seu sistema possua 100 usuários com 300 amigos cada, assim, o recomendador terá que fazer as contas explicadas usuário por usuário e terá que fazer novamente assim que houver alguma mudança.

O recomendador pode ser alvo fácil de ataques. Imagine que criemos um usuário David, fazemos amizade com o usuário que queremos atacar e fazemos com que David goste de todas as páginas que o nosso usuário alvo goste, assim, o coeficiente de similaridade será alto. Em seguida, David é programado para gostar de uma página que temos interesse que o usuário alvo goste. Pronto, o recomendador colocará esta página em uma posição alta na lista dada a similaridade entre os dois usuários.

O que acontece com usuários que não gostaram de nada ainda? Todos os coeficientes de similaridades serão nulos pois não possuem gostos em comum com ninguém. Na literatura, este problema é conhecido como the cold start problem.

Além do mais, o recomendador em questão possui baixa serendipidade (do inglês serendipity), talvez até nula, e, assim, caminharíamos aos poucos para um monoculturalismo. Nos próximos artigos poderemos entrar em detalhes de soluções que lidem com esses problemas.

Introdução

Logo do Sistema

Conceitos:

• Business Process Management (BPM)

BPM é uma prática de desenvolvimento, execução, análise de desempenho e simulação de Processos de Negócios para trabalhar no na continua otimização e ciclos de vida desses processos.

• Service-Oriented Architecture (SOA)

Uma prática de desenvolvimento de software que emprega disciplinas e linguagens de modelagem para fornecer soluções táticas e estratégicas aos problemas das empresas. Ela defende uma visão total da analise, desenho e arquitetura de todas as entidades organizacionais do software, concebendo-as como recursos de serviços-orientados, isto é, serviços.

Exemplo de Processos Aliados a Serviços

• Processo de Lançamento de Celulares:

Metodologia

• Estudo do Processo

Exemplo de Processo Modelado em Linguagem EPC

• Concepção do Projeto de Software

• Implementação do Projeto

Implementação com a ferramenta webMethods

• Testes e Análise de Performance

• Monitoramento e Manutenção do Processo

Dashboard de Monitoramento do Processo

Resultados Esperados

Parcerias

Parceiros

O cenário vislumbrado para a aplicação publicitária é o de uma vitrine de shopping, na qual as reações expressas pelas características faciais dos passantes são registradas e avaliadas. A partir desta análise, é possível verificar como o design da vitrine e a maneira de exposição das mercadorias afetam as reações dos consumidores, tanto positivamente como negativamente. Constituindo assim uma maneira de se avaliar e comparar os impactos alcançados com diferentes estratégias.

O sistema realiza a aquisição e processamento de uma sequência de imagens obtidas através de uma webcam e possibilita, através da produção de gráficos, a exibição de informações relevantes a um usuário da área de publicidade e propaganda que deseje medir a eficácia de uma campanha publicitária.

Apesar de a ideia do nosso projeto ser bastante simples, o título do projeto ser um pouco obscuro para quem não está familiarizado com estes termos. Vamos começar explicando o título e as coisas ficarão mais claras.

O que é…

… Veículo aéreo não-tripulado?

Um Veículo Aéreo Não-Tripulado, também conhecido pela abreviação VANT, é qualquer tipo de aeronave (como aviões, balões, helicópteros) que não precise de um piloto para ser guiada. No nosso projeto, utilizamos um dirigível cheio de gás hélio para representar o VANT.

… Mensagem CPDLC?

O CPDLC (Controller Pilot Data Link Communications) é uma aplicação utilizada para a comunicação entre os controladores de voo, localizados nas torres de comando, e os pilotos, localizados na aeronave tripulada. Uma mensagem CPDLC é uma mensagem de texto que segue o formato definido na especificação da Organização Internacional de Aviação Civil (ICAO – International Civil Aviation Organization). O piloto recebe e envia mensagens CPDLC utilizando um dispositivo denominado MCDU.

… Controle?

No contexto do nosso projeto, controle significa o envio de comandos, que poderão ser aceitos ou recusados pela aeronave.

O projeto

Agora sim: o nosso projeto trata de controlar um balão a partir do envio de comandos, como virar à direita, subir ou descer e alterar a velocidade, utilizando um protocolo de comunicação já existente e já utilizado na Aeronáutica hoje. Comportando-se como um VANT autônomo, o balão deve tomar decisões sobre estes comandos recebidos, decidindo se pode ou não executá-los, com base em variáveis medidas de um conjunto de sensores embarcados.

Motivação

A ideia do nosso projeto é que ele sirva como uma prova de conceito, ou seja, que ele mostre que é possível, controlar um VANT à distância, apenas através da troca de mensagens CPDLC e que, ainda assim, o voo realizado seja tão ou mais seguro quanto ele seria se existisse um piloto a bordo.

Um dos motivos para isso é que existem diversas situações em que a presença do piloto restringe a duração do voo. Um exemplo disso são voos de monitoramento de áreas de fronteira. Estes voos normalmente são utilizados para coleta de imagens, e não existe uma carga sendo transportada ou um destino específico. É interessante, portanto, não depender de um piloto, que pode ficar exaurido fisica e psicologicamente em um voo muito longo.

Outro motivo é que existem muitos acidentes aéreos causados por falha humana. Um piloto, por ser um ser humano, naturalmente está sujeito a cometer erros, mais ainda se não tiver um treinamento adequado. Se for possível substituí-lo por um sistema computacional devidamente projetado, implementado e testado, o número de acidentes será reduzido, tornando o espaço aéreo um lugar mais seguro.

Implementação

O sistema pode ser dividido em três módulos, mostrados na figura abaixo:

Diagrama de blocos do sistema de controle implementado

ACARS

O ACARS (Aircraft Communications Addressing and Reporting System) é um simulador de código aberto que foi utilizado no projeto, nós fizemos apenas pequenas alterações no código-fonte. O simulador completo que foi utilizado é composto por dois submódulos. O primeiro é o servidor ATC, cuja função é centralizar a comunicação entre o controlador e o piloto, registrando aeronaves e transmitindo para o destinatário (controlador ou piloto) as mensagens que são recebidas. O segundo submódulo possui, entre outras coisas, uma interface, mostrada abaixo, que permite o envio de mensagens CPDLC para as aeronaves – no nosso caso, o balão.

Interface para criação de mensagens no padrão CPDLC

Módulo Python

Idealmente, as mensagens CPDLC seriam enviadas diretamente do servidor do ACARS para o balão. Contudo, o microcontrolador utilizado no projeto (Atmega128 usado no Arduino Uno) possui severas restrições de processamento, tendo apenas 32KB disponíveis para o código-fonte e 1KB para a área de dados. Assim, foi introduzido um módulo que representa parte do sistema que normalmente ficaria na aeronave, mas que roda em um computador em terra. Este subsistema é responsável por receber mensagens CPDLC, traduzi-las para mensagens MBCP (My Blimp Control Protocol) e então transmiti-las ao balão. O MBCP é um protocolo bastante simples desenvolvido especificamente para o projeto.

Abaixo é mostrada a interface que foi desenvolvida para este módulo: ela imita a aparência de um MCDU, mostrando mensagens recebidas pela aeronave (denominadas de uplink, em laranja) e enviadas (de downlink, em verde).

Interface do módulo Python, emulando um MCDU

Módulo embarcado

Finalmente, temos o módulo embarcado. Este é composto pelo programa que roda no Arduino assim como pelos circuitos eletrônicos auxiliares que permitem a leitura dos sensores, o controle dos motores e o envio/recebimento de mensagens MBCP via rádio. Utilizando as leituras dos sensores, o balão consegue inferir qual o seu estado com relação ao ambiente em que se encontra, tomando decisões sobre a possibilidade de execução de um comando, e rejeitando aqueles que puderem colocá-lo em uma situação de risco.

A figura abaixo mostra a gôndola que é presa ao balão, com os três motores à mostra, assim como os três sensores infravermelhos, utilizados para detectar a distância de obstáculos frontais e laterais.

Gôndola que é presa ao balão, com sensores e motores visíveis

Dentro desta gôndola ficam os circuitos descritos acima, e mostrados na figura abaixo. Da esquerda para a direita, temos:

• Arduino: contém o microcontrolador que permite a execução da lógica de controle do balão.
• Placa de cirtuito impresso: projetada e desenvolvida especialmente para o projeto. As três placas menores (duas vermelhas e uma verde) são sensores inerciais – uma IMU (Inertial Movement Unit), um acelerômetro e uma bússola digital.
• Transceptor: permite envio e recebimento de mensagens de rádio.

Circuitos eletrônicos embarcados no balão

Esta foi uma brevíssima descrição do projeto. Quem estiver interessado em conhecer os detalhes pode entrar em contato ou fazer o download da monografia, que em breve estará disponível.

E não percam a demonstração prática, que acontecerá no dia 14 de dezembro, no Galpão da Administração da Poli!

Dennis Ritchie é um pouco (ha-ha) menos conhecido que o Steve Jobs, mas merece uma página de destaque tão grande quanto Steve.

Ritchie é reconhecido por duas grandes criações, que vivem até hoje e revolucionaram a computação. A linguagem de programação C e o sistema operacional UNIX.

Vencedor do prêmio Turing em 1983 pelo seu trabalho com o UNIX. Sistema esse que continua sendo base para uma parte dos sistemas operacionais utilizados nos dias de hoje ( incluindo o MacOS do outro homenageado do mês ).

Tudo que posso dizer é que ele mudou a computação e agradecer por deixar um legado tão importante!

Valeu Ritchie! Break;