Rede de desenvolvimento do Sonico

Links OpenSocial

Links rápidos

Anatomia de um aplicativo | Canais virais | Experiência do Usuário | Armado do XML

Vistas implementadas

Nome	Descrição
Vista de perfil	O aplicativo quando é mostrada na seção "Aplicativos" de perfil do usuário. Esta é a vista default Ao adicionar o usuário este aplicativo.
Vista de tela	O aplicativo mostrado na página completa. Se permite capitalizar esta vista.
Vista prévia	Página na qual o usuário decide se deseja adicionar o aplicativo e configure as opções de privacidade.
Vista de início	O aplicativo mostrado no perfil principal do usuário. O usuário pode decidir mostrar até 5 aplicativos nesta vista.

Canais virais

Classe	Descrição
Convites de amigos requestShareApp	Enviado por um usuário a um amigo convidando-o a instalar o aplicativo.
Atividades requestCreateActivity	As atividades geradas pelo aplicativo aparecerão no perfil do usuário e podem aparecer no newsfeed dos seus amigos.
Notificações requestSendMessage	Estas mensagens são enviadas aos usuários notificando-os sobre algum evento.
Correios Eletrônicos
Mensagens Privadas

O ajuste dos canais virais dependerá da reputação do aplicativo.

Anatomia de um aplicativo

Diretório de aplicativos

Aqui será listada seu aplicativo e os usuários poderão refinar a busca através dos filtros localizados à direita. Os aplicativos patrocinados serão mostradas em um quadro especial sobre os outros.

Nesta vista está incluído o thumbnail da seu aplicativo, acompanhado pela descrição oferecida no mesmo XML. O thumbnail deve medir 120x60px.

Vista prévia

A vista de preview é utilizada com dois objetivos diferentes. Em primeiro lugar, é onde se mostrao aplicativo aos usuários que desejam adicioná-lo. Por outro lado, é utilizada também quando um usuário que já possui o aplicativo deseja modificar a configuração do mesmo. É possível diferenciar em qual das duas instâncias se encontra verificando quando contar com acesso ao owner e ao viewer.

Se verá a informação do seu aplicativo, a imagem de mostra e as opiniões realizadas.

Não é permitida a capitalização dentro desta vista.

O preview tem uma medida default de 500x300px.

Vista de perfil

Assim será vista o seu aplicativo dentro da seção Aplicativos do usuário. Poderá mover os diferentes módulos para ordená-los como desejar assim como acessar à tela de configuração (preview) e eliminá-la.

A informação mostrada nesta vista devería ser a mesma tanto para o dono do aplicativo como para um terceiro, somente alterando as ações que possam realizar.

Não é permitido o uso da reprodução automática do vídeo nem áudio nesta vista.

Não é permitida a capitalização dentro desta vista.

O profile conta com uma medida default de 500x200px.

Vista de início

Se o usuário decide adicionar seu aplicativo ao seu perfil se verá como um módulo na barra localizada à direita.

A informação mostrada dentro desta página deve ser o mais estática possível.

Não é permitido o uso da reprodução automática do vídeo nem áudio nesta vista.

Não é permitida a capitalização dentro desta vista.

La home tiene una medida default de 290x210px.

Vista de tela

O usuário poderá acessar à vista completa do seu aplicativo através da seção Aplicativos, perfil ou os acessos diretos na barra de navegação.

Apenas o dono do aplicativo pode acessar esta vista.

Nesta vista está permitida a capitalização.

A tela tem uma medida default de 800x600px.

Canais virais

Convites de amigos

O aplicativo pode ser solicitada se é compartilhada com amigos do viewer. Mesmo assim, o usuário poderá confirmar ou cancelar esta ação.

Nenhum aplicativo deveria exigir a um usuário que convide seus amigos para habilitar conteúdo.

O campo reason ao compartilhar um aplicativo é ignorado pelo Sonico. É considerado apenas os destinatários.

Atividades

As atividades geradas pelos aplicativos se mostrarão no perfil do usuário e podem aparecer também no newsfeed de amigos.

É permitido apenas gerar atividades para o dono do aplicativo.

Notificações

As notificações geradas por aplicativos se mostrarão na página de notificações do usuário destinatário.

As notificações são as únicas mensagem que se permitem enviar aos amigos do dono do aplicativo ou do usuário interagindo com a mesma.

Mensagens privadas

As mensagens privadas se adicionarão às mensagens recebidas pelo usuário.

Elementos de mural (mensajes públicos & actividades)

As mensagens públicas e atividades são mostradas no mural do usuário, assim como na página de início de seus amigos. Para garantir flexibilidade aos realizadores, permitimos o uso de etiquetas HTML como <img>, não obstante, para poder manter a estética, solicitamos aos realizadores que cumpram com um simples jogo de regras:

A mensagem pode conter até 5 imagens no formato GIF, PNG ou JPEG format, cada uma de 70x70 píxeis e um peso máximo de 10KB cada uma.
Se a mensagem tem zero ou uma imagem, pode incluir uma mensagem de até 400 caracteres.
Se a mensagem mais de uma imagem, pode incluir uma mensagem de até 100 caracteres.
O texto pode conter links para a instancia do aplicativo instalado pelo usuário, mas somente a sua vista de perfil. Links a outras vistas estão proibidos.
Qualquer menção ao nome de um usuário deve ser dentro de um link ao perfil do usuário, e nunca ao aplicativo.

Estes são exemplos válidos com seu correspondente resultado:

var params = {
	'title' : 'added pictures to his photo collage'
};
var activity = opensocial.newActivity(params);
opensocial.requestCreateActivity(activity,opensocial.CreateActivityPriority.HIGH);

Juan Sotuyo added pictures to his list photo collage (via Photo Collage) - Faz 5 mins

var params = {
	'title' : 'added pictures to his list photo collage',
	'body' : '<a href="#" class="thumb space2r"><img width="70"
src="http://pic12.ak.sonico.com/photos/9/AJ/AD/968078384/974130/md_8067260.jpg" class="va-middle"/>
</a><a href="#" class="thumb space2r"><img width="70"
src="http://albums.pics3.ak.sonico.com/photos/16/AE/CK/3384976/1355103/md_11407403.jpg"
class="va-middle"/></a><a href="#" class="thumb space2r"><img width="70"
src="http://albums.pics3.ak.sonico.com/photos/16/AE/CK/3384976/1355103/md_11407412.jpg"
class="va-middle"/></a><a href="#" class="thumb space2r"><img width="70"
src="http://albums.pics3.ak.sonico.com/photos/16/AE/CK/3384976/1355103/md_11407407.jpg"
class="va-middle"/></a><a href="#" class="thumb space2r"><img width="70"
src="http://pic20.ak.sonico.com/photos/18/AE/CK/3384976/362356/md_11510008.jpg"
class="va-middle"/></a>'
};
var activity = opensocial.newActivity(params);
opensocial.requestCreateActivity(activity,opensocial.CreateActivityPriority.HIGH);

Juan Sotuyo added pictures to his photo collage (via Photo Collage) - Faz 5 mins

var params = {
	'title' : 'added pictures to his photo collage',
	'body' : '<dl class="f-wrap"><dt class="f-left"><a class="thumb" href="#">
<img width="70" src="http://pic10.ak.sonico.com/photos/7/AF/BG/1000008/964951/md_8031899.jpg"/>
</a></dt><dd class="f-right col-w400px"><p class="note">Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Pellentesque euismod sem id enim vehicula a
tristique enim tempor. Morbi lacus dolor, porta ut eleifend ac, sollicitudin ac velit.
Proin varius nisi quis tortor venenatis id blandit nisl porttitor. Aenean sed vehicula elit.
Aliquam a est nisi. Duis ipsum sapien, eleifend id placerat vel, aliquam eu ligula.
Curabitur lobortis orci eget metus.</p></dd></dl>'
};
var activity = opensocial.newActivity(params);
opensocial.requestCreateActivity(activity,opensocial.CreateActivityPriority.HIGH);

Juan Sotuyo added pictures to his photo collage (via Photo Collage) - Faz 5 mins

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod sem id enim vehicula a tristique enim tempor. Morbi lacus dolor, porta ut eleifend ac, sollicitudin ac velit. Proin varius nisi quis tortor venenatis id blandit nisl porttitor. Aenean sed vehicula elit. Aliquam a est nisi. Duis ipsum sapien, eleifend id placerat vel, aliquam eu ligula. Curabitur lobortis orci eget metus.

Os links provavelmente deberiam apontar à vista de perfil do aplicativo.

O uso das classes CSS mostradas nos exemplos é obrigatório. As mesmas são definidas pelo Sonico.

Notificações:

Mensagens do tipo Notificação são mostradas na página de notificações junto a outras notificações do site. Para garantir a flexibiliade aos realizadores, permitimos o uso de tags HTML como <img>, não obstante, para poder manter a estética, solicitamos que os realizadores cumpram com as seguintes regras:

As notificações devem incluir uma imagem de 50x50 píxeis do usuário que enviou a notificação ou bem uma imagem relacionada com o aplicativo (imagens maiores serão redimensionadas).
O corpo da notificação deve começar com o nome do usuário que a criou, com um link ao seu perfil, e o conteúdo em si não deve superar os 256 caracteres.

O Sonico determinará o título da notificação por si mesma, não obstante, o campo title deveria ser utilizado para especificar a url da imagem de 50x50 píxeis a ser mostrada.

Estes são exemplos válidos com seu correspondente resultado:

var body = 'Juan Sotuyo answered the question "Who is your best friend?" and you were picked!';
var params = {
	'title': 'http://static.ak.sonico.com/img/user-pic-md-01.jpg',
	'type': opensocial.Message.Type.NOTIFICATION
};
var message = opensocial.newMessage(body, params);
opensocial.newRequestSendMessageRequest(userId, message);

Super Quiz!

Juan Sotuyo answered the question "Who is your best friend?" and you were picked!

Go to the application or Ignore

Experiência do usuário

Você deve lembrar:

Sempre que for modifcado o conteúdo de uma vista deverá utilizar adjustHeight para evitar espaços em branco ou a aparição de barras de deslocamento.
É proibido abrir através de um aplicativo qualquer tipo de janela ou mensagem de confirmação bloqueante, com o uso de funções como alert, confirm, prompt, open ou similar.
A vista de home deve fazer uso da funcionalidade skin para poder adequar o aplicativo ao perfil do usuário.

Armado do XML

É indispensável que sempre fique definido os siguientes atributos de ModulePrefs antes de adicionar seu aplicativo ao sandbox:

title
description
author
author_email
thumbnail
icon

Lembre-se de utilizar sempre um fundo transparente em ícones e thumbnails, porque pode ser possível que estes sejam mostrados sobre fundos de cores.

É importante que o author_email coincida com o e-mail com o qual foi registrado o usuário que adiciona o aplicativo. Caso contrário será rejeitado automaticamente.