Nos dias de hoje, o Facebook é claramente uma rede social, ou se preferirem uma plataforma incontornável, dada a sua presença e sobretudo adopção massiva.

O tema deste artigo não é este, mas só para terem uma ideia, de acordo com os números mais recentes, só em Portugal existem actualmente mais de 3 milhões e 600 mil pessoas com conta no Facebook.

Ora uma acção cada vez mais comum no Facebook  é a partilha de conteúdos, a partilha de links de artigos que consideramos interessantes.

Como já devem ter reparado o Facebook tem um script que scana a página que pretendemos partilhar, de forma a apresenta-nos algumas hipóteses para o thumbnail (imagem miniatura) que irá acompanhar o link e ainda um parágrafo introdutório. Infelizmente, por vezes entre as hipóteses para a imagem thumbnail não aparece a imagem que pretendemos.

Se tiverem um blog ou site em WordPress, existe uma solução muito simples para ultrapassar este problema, basta seguirem estes passos:

1. Antes de mais, devem criar uma imagem quadrada para as situações em que os vossos posts/artigos não contenham qualquer imagem;

2. De seguida devem fazer upload desta imagem para o vosso servidor e guardar o endereço da mesma;

3. Editem o ficheiro header.php do vosso tema e antes da tag </head> coloquem o código seguinte, substituindo o endereço da imagem – “endereço-da-imagem”, pelo endereço que copiaram no passo anterior.

<?php
	if(has_post_thumbnail()) {
		echo '<link rel="image_src" href="' . wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) .'" />';
	} else {
		echo '<link rel="image_src" href="endereço-da-imagem" />';
	}
	?>

4. Por último, se ainda não o fazem, têm de passar a incluir nos vossos posts/artigos uma imagem na “Imagem de destaque” ou “Featured image“, na coluna direita do ecrã de publicação de um novo post.

Nota: Caso na coluna direita do ecrã não tenha a funcionalidade “Imagem de destaque” ou “Featured image” terão de editar o ficheiro “functions.php” acrescentando a seguinte linha:

add_theme_support( 'post-thumbnails' );

Caso esta alteração não produza efeitos imediatos não se assustem. Pela nossa experiência pessoal, o Facebook leva algumas horas a assumir esta alteração no nosso blog / site do WordPress.

autor: justinsomnia

Ontem [12/01/2011] foi anunciado pela Google o fim do suporte ao codec H.264 em novas versões do seu browser Chrome. Apostando no projecto WebM procura assim trazer para o HTML a standardização de um codec open source e, acima de tudo, sem custos associados.

Onde está o problema

À primeira vista, em lado nenhum. Faz todo o sentido apostar numa tecnologia aberta ao invés de usar um codec fechado (e pago) como standard nas especificações do ainda menino HTML5.

No projecto WebM estão envolvidos todos os big players da web como a Mozilla, Opera, Google Chrome, Adobe, entre outros. Mas sim, está a faltar aqui um nome.
E esse nome é Apple.

O problema é que o codec de eleição do Safari é exactamente o H.264 e a Apple não quer prescindir disso, mais uma vez alheando-se de toda a industria e, de certa forma, contradizendo-se com o que disse na “guerra” Flash/Apple. Se por um lado criticam o uso de Flash por ser uma plataforma fechada (o que por certo não é verdade – existem inúmeros projectos open source), por outro tentam impor um codec de vídeo esse sim fechado e caro. Muito caro, como podem ver aqui e aqui.

O porquê de ser prematuro

Só quem já desenvolveu algo em video  html5 sabe como é trabalhoso chegar a uma conclusão que preencha todas as possibilidades. Para além de termos de exportar o vídeo para 3 formatos diferentes, há a questão da compatibilidade com browsers mais antigos, como o Internet Explorer 7 e 8.

Na Active Media terminámos recentemente um projecto que envolve vídeo html5. Quisemos construir uma solução que fosse “à prova de bala”, o que digamos que não foi uma situação fácil… (Assim que o projecto estiver disponível online, publicarei a solução encontrada).

Isto tudo para dizer que o público geral ainda não está preparado para receber o video html5. O Internet Explorer ainda está presente em muitos computadores pessoais e, pasme-se, é necessário recorrer ao Flash para uma verdadeira solução cross browser.

Conclusão

Dependendo do target, a Active Media está a dar o seu contributo para que o HTML5 seja implementado o mais rapidamente possível. Nos projectos mais recentes temos usado sempre tags de HTML5 e explorámos possibilidades novas, como o projecto acima mencionado.

Mas como empresa de New Media temos de saber qual a melhor ferramenta para o trabalho e não sermos “cegos” defensores de algo só porque sim. E, goste-se ou não, o Flash é neste momento a ferramenta mais eficaz e fácil de trabalhar para distribuirmos conteúdo de vídeo na internet.

Devo dizer que foi uma experiência bastante interessante e que estou disponível para futuros convites

Comigo esteve um conjunto de pessoas e profissionais fabulosos. Sempre um bom ambiente, o que caractareriza os encontros do AUG-PT, e uma plateia participativa e de várias àreas.

Sobre o evento

Paulo Moreira falou sobre interacção com devices touch e das diferenças entre o público europeu e asiático. Rui Madeira que mostrou as potencialidades da nova câmara da Microsoft – Kinect – e como as coisas funcionam por detrás da cortina. João Fernandes trouxe-nos o AIR na Tv e mostrou-nos como um vídeo full-hd corre a partir de uma pen sem qualquer tipo de lag. Ricardo Castelhano falou-nos sobre o Processing dando-nos ao seu bom estilo um apanhado geral do que é e para que serve. Por fim Cláudia Pernencar contou-nos as peripécias dos seus últimos trabalhos na área de interacção.

Amigos ou amantes?

Com a minha apresentação quis mostrar que por vezes diferentes tecnologias podem comunicar entre si de uma forma simples e fácil. Associar a versatilidade do WordPress ao poder do Flash é possível e pode-nos facilitar muito a vida, seja em RIAS ou em sites. Deixo-vos os slides da minha apresentação juntamente com as minhas notas.

A lógica

A forma mais simples de comunicarmos entre Actionscript e WordPress é a de usar a framework do WordPress e retornar o resultado da consulta de dados em formato xml. Não é necessário criar ficheiros físicos com a extensão *.xml, apenas temos de fazer com que o ficheiro PHP que “trabalha” o lado do WordPress faça um output do resultado numa estrutura xml.

Para isso podemos usar um ficheiro de apoio que será colocado dentro da pasta do theme activo. Poderíamos construir um plugin, mas não compliquemos…

Esse ficheiro, que no meu exemplo se chama wordpress-to-flash.php,  poderá receber variáveis (por GET ou POST) do Flash para assim podermos filtrar a consulta dos dados. Um exemplo prático seria o de o Flash enviar o ID da categoria (ex.: notícias) para o PHP e este fornecer os artigos apenas dessa categoria. Assim com apenas um ficheiro fazemos a festa toda

O lado do WordPress

Imaginado que queremos saber o título e o texto dos artigos de portfolio da Active Media, o código do ficheiro wordpress-to-flash.php é bastante simples:

<?php

// Ligação à Base de Dados
require_once( '../../../wp-config.php' );

// Inicia variável que gaurdará todos os dados
$xml_output = "";

// ---------------------------------------------------------------------------------
// QUERY POSTS

// Queremos apenas artigos da categoria com o ID de 1
$query = 'cat=1';
$queryObject = new WP_Query($query);

// Verifica se existem artigos
if ($queryObject->have_posts())
{
	// Inicia loop
	while ($queryObject->have_posts())
	{
		// Objecto geral
		$queryObject->the_post();

		// Id do artigo
		$post_id = get_the_ID();

		// Agrega dados à variável em formato xml
		$xml_output .= "\n\t<artigo>";
		$xml_output .= "\n\t\t<titulo>" . get_the_title() . "</titulo>";
		$xml_output .= "\n\t</artigo>";
	}
}

// ---------------------------------------------------------------------------------
// OUTPUT dos dados numa estrutura xml

$xml = "<xml version='1.0' encoding='UTF-8'>";
$xml .= "\n<artigos>\n";
$xml .= $xml_output;
$xml .= "\n</artigos>";
$xml .= "\n</xml>";

echo $xml;

?>

O resultado desta consulta, se olharem para o source-code da página, é uma estrutura em formato xml. É isso que o Flash vai ler.

O lado do Flash/Actionscript

Se o processo anterior era simples, este consegue superar. A única coisa que necessitamos de Actionscript é de um request ao xml.

// Inicia Vars
var myXML:XML;
var myXMLList:XMLList;
var nArtigos:int;

// Load XML
display_txt.text = "A carregar...";

var myLoader:URLLoader = new URLLoader();
myLoader.load(new URLRequest("http://www.omeusite.com/wp-content/themes/omeutema/wordpress-to-flash.php"));
myLoader.addEventListener(Event.COMPLETE, onLoadXML);

// On Load XML
function onLoadXML(e:Event):void
{
	// dados
	myXML = new XML(e.target.data);
	myXMLList = myXML.artigos.children();
	nArtigos = myXMLList.length();

	// reset texto
	display_txt.text = "";

	// loop
	for(var i:int = 0; i<nArtigos; ++i)
	{
		display_txt.appendText(myXMLList[i].titulo.toUpperCase());
		display_txt.appendText("\n\n");
	}
}

Exemplo de integração

Vamos então consultar quais os últimos artigos na categria de “Portfólio” da Active Media:

Alternativa com plugin

Dentro da mesma lógica de programação existem plugins para o WordPress que têm já mecanismos próprios.

Um exemplo é o Press2Flash. Com este plugin só nos temos de preocupar com a parte de Actionscript já que o plugin trata sozinho de todas as comunicações com o WordPress. Um bom resumo do que é está aqui: How to Get started with Press2Flash in 8 Steps.

Vantagens:

• Tira partido da framework do WordPress
• Óptimo para Flash Developers
• Concentra o código apenas numa linguagem

Desvantagens:

• Carregamento de um xml  extenso pode-se tornar lento
• Não temos controlo sobre a comunicação com o WordPress e que dados retornamos. Isto torna-se ainda mais acentuado quando temos o Gestor de Conteúdos completamente personalizado

Apesar destas possíveis desvantagens, o Press2Flash é sem dúvida uma muito boa alternativa a ter que fazer tudo de raíz.

Alternativa com acesso directo à base de dados

Numa linha completamente diferente, podemos também tirar partido do amfphp e consultar directamente a base de dados.

Vantagens:

• O processamento é mais rápido

Desvantagens:

• De vez em quando o WordPress mexe na estrutura da base de dados ao fazer novas actualizações. Se já tivermos consultas à BD personalizadas, isso é a última coisa que queremos…
• Ao não tirar partido da framework do WordPress perdemos uma série de potencialidades que facilmente se traduzem em dados

Para finalizar…

No encontro falei também de um plugin “mágico” que nos permite com extrema facilidade personalizar os campos de edição dos artigos no WordPress. Acrescentar chekboxes, zonas de imagens que podem ser duplicadas, campos de texto, tudo isto é possível com a acção de dois ou três clicks. Esse plugin chama-se Magic Fields. O nome diz tudo

Download

Como prometido, aqui estão os ficheiros que utilizei para este exemplo.

Dúvidas, comentários ou sugestões?

(there’s an english version of this article in my personal blog)

Depois do sucesso do post “Como promover a sua marca/empresa no Facebook“, resolvemos criar um screencast com a explicação dos principais passos para a criação no Facebook de uma página para uma marca, produto/serviço ou empresa, por vezes chamada de “fan page“.

Como podem ver no screencast os passos necessários para a criação de uma “fan page” são relativamente simples, no entanto essa é a tarefa mais fácil. Após a criação da página é necessário promover continuamente a conversa, escutando os seguidores da página e interagindo com estes.

Se necessitarem de ajuda para a criação da página ou para gestão da vossa comunidade podem solicitar-nos uma proposta de serviços na área da “Social Web“.

Como criar uma página no Facebook from Active Media on Vimeo.

Como o Jorge mostrou no artigo de boas vindas, foi um processo longo. Muito longo… As possibilidades eram tantas que muitas vezes se tornava difícil colocar um travão na hora de chegar a decisões. Só dependiamos de nós, o que por vezes complica as coisas. Mas é nessas alturas que é necessário sermos auto-disciplinados e sabermos reconhecer quando chegamos a uma solução que nos preencha.

E chegámos

O Conceito

O conceito ficou muito bem definido desde o início do processo: conteúdo.

Todo o site teria de ter em atenção a melhor forma de o fazer – pragmática e sem grandes adereços. Tudo isso fez com que toda a estratégia de comunicação fosse delineada desde o início e a arquitectura de informação fosse pensada até à exaustão. Design sem conteúdo é apenas a decoração.

O Design

A importância dada à tipografia no design é o principal elemento a destacar. A combinação de fontes serifadas e não serifadas transmitiu o “ar” editorial pretendido e contribui também para a melhor leitura e percepção do conteúdo.

No Portfolio optámos por usar alguma interacção na forma como mostramos o nosso trabalho. Cada barra representa a cor associada ao projecto, sendo ela sempre a cor do cliente.

Em termos estruturais mantivemos as coisa relativamente simples. A intenção foi que os nossos visitantes não se distraissem do elemento principal do site.

HTML5

No seguimento da nossa primeira Active Session, definimos que teríamos de ser a montra daquilo que queremos dar aos nossos clientes. O HTML5 representa o futuro em termos de markup language e com as novas tags estruturais pudémos desenvolver uma sintaxe mais clarificada e organizada. Mas havia um problema: Internet Explorer. O IE, com exepção da sua nova versão (9), não suporta HTML5. Procurámos então algo que fizesse a conversão para HTML4 das tags utilizadas. E encontrámos algo que faz exactamente isso: o HTML5 Starter Pack.

Não suporte de Internet Explorer 6

Quem trabalha como developer sabe o que é sofrer nas mão do Internet Explorer 6… Pois bem, deixámos de suportar o desenvolvimento para este antigo e ultrapassado browser. O tempo gasto para fazer as coisas mal de modo a funcionarem no IE6 não compensa o investimento. É também um posicionamento da Active Media ter um papel activo no que diz respeito à melhoria do uso da internet. E sem dúvida que o fim do IE6 será uma melhoria substancial… Para os mais cépticos em relação a esta tomada de posição, também o Google optou pelas mesmas medidas.

O que aconteceu ao flash?

Não, não deixámos de trabalhar com Flash. Continua a ser a nossa ferramenta de eleição para as mais variadíssimas coisas, desde mecanismos de gestão de business channels a sites. Nos últimos tempos tem-se discutido muito se o HTML5 irá acabar com o Flash. A nossa posição é óbvia: não. Neste artigo apresentamos alguns argumentos, mas muitos mais haverão. A nossa filosofia como empresa é a de utilizar as ferramentas que melhor se adequam ao projecto e, no caso deste site, o Flash não era necessário.

Javascript – jQuery

Como framework de javascript utilizámos o jQuery. As possibilidades que nos dá para trabalharmos e interargirmos com elementos HTML são extensas. Muito extensas… Em conjugação com a framework trabalhámos também com Javacript “puro” em alguns mecanismos do site.

WordPress

Todo o site está assente na plataforma WordPress e a escolha justifica-se de uma forma simples: o WordPress é a solução mais eficaz e polivalente para a gestão de conteúdos web. Esta framework está pensada na expansibilidade da instalação e facilmente é integrada com código de PHP “puro” e outras linguagens de programação.

No gestor de conteúdos do site da Active fizemos uma total adaptação às nossas necessidades. Para isso contámos com a ajuda preciosa do plugin “MagicFields“, um plugin para o WordPress que permite personalizar o tipo de artigos a serem editados um pouco à semelhança da nova funcionalidade do WordPress 3.0, os Custom Post Types, mas com uma facilidade de integração ainda maior e com um leque de possibilidades mais facilmente alargado.

Construimos também um mecanismo de templates que nos permitem no futuro criar novas áreas com um design completamente diferente e facilmente integralas na estrutura do site. Desta forma eliminamos a morosidade que muitas vezes é criar algo de novo e diferente num site.

Um outro ponto a favor desta plataforma é a sua extensa comunidade, representada em Portugal por wp-portugal.com.

Detalhes

O espírito de partilha de soluções e conhecimento é um valor que a Active Media preza. Acreditamos nesta espécie de “open source do conhecimento” capaz de criar mais valor, em vez de ter medo de o dar a conhecer. Por isso utilizaremos esta área do nosso site para partilhar muitas das soluções criadas para construir alguns elementos presentes no site. Fiquem atentos aos próximos artigos.

Curiosidades?

Se quiserem entretanto perguntar algo em relação à concepção e construção do site teremos todo o gosto em responder

Quem começa?

• Ingredientes
• 1 taça adequada a micro-ondas
• 2 ovos
• salsichas ou qualquer tipo de enchido ou fiambre ou queijo…
• manteiga

Partem-se os ovos para a taça, acrescenta-se uma noz de manteiga e mexem-se bem mexidos.

Juntam-se os complementos (salsichas, fiambra, etc), mexe-se mais um bocado só para os misturar, e leva-se ao micro-ondas cerca de 1 minuto por cada ovo incluído.

Atenção que como vai crescer, convêm que a taça seja algo alta.

E é só.