Project

General

Profile

Feature #5637

Personal wall in social network

Added by Yannick Warnier about 7 years ago. Updated about 5 years ago.

Status:
Feature implemented
Priority:
Normal
Assignee:
Category:
Social
Target version:
Start date:
15/10/2012
Due date:
% Done:

100%

Estimated time:
5.00 h
Spent time:
Complexity:
Normal
SCRUM pts - complexity:
?

Description

Tentatively setting it to 1.9.4, but can be moved to later if necessary.

Many people are asking if it would be possible to have messages show as "wall messages" in Facebook (or the same stuff on Google+).

The idea is to add a new message type in message.msg_status (is that a message type or a message status, in the end?) which would represent "public" messages that would show as the latest thing the user wants to show on his wall. This further develops the requirements:

#. Have a personal wall to which a user can write (give it a msg_status of "7" for "wall message" and user_sender_id and user_receiver_id are (both) the ID of the user writing it)
#. The wall of a user can only be seen in his/her "Extended profile", which only makes it possible for friends to see it
#. Have the possibility for friends (and friends only) to answer a message (the picture and username of the friend should appear in thumbnail)
#. Messages should only show up to 10 original posts from the user. Past that, there should be a "See 10 more messages" link "a la Facebook" to load previous posts

I think overall it would not be very complicated to do, and it would definitely give a nice "social network" addition to Chamilo 1.9.

Don't forget the classical things like filtering for spam. It should be possible to add a link, and Chamilo should automatically place a

<a href="" target="_blank">...</a>
tag around it.


Files

2014-09-22-191056_868x790_scrot.png (122 KB) 2014-09-22-191056_868x790_scrot.png anibal copitan, 23/09/2014 02:11
Perfil-Social-Chamilo.pdf (141 KB) Perfil-Social-Chamilo.pdf Alex Aragon, 25/09/2014 00:39
2014-09-26-124246_904x821_scrot.png (143 KB) 2014-09-26-124246_904x821_scrot.png anibal copitan, 26/09/2014 20:12

Related issues

Related to Chamilo LMS - Feature #7301: Improvements to social network interface (v2)New29/09/2014

Actions
Related to Chamilo LMS - Feature #7344: Mejorar el filtrado de usuarios y grupos en la red socialFeature implemented24/10/2014

Actions

Associated revisions

Revision 9f627e9d (diff)
Added by Yannick Warnier about 5 years ago

Split social_left_content in blocks at tpl level - refs #5637

Revision c30e1c95 (diff)
Added by Yannick Warnier about 5 years ago

Minor - code style review - refs #5637

Revision 61caa00b (diff)
Added by Yannick Warnier about 5 years ago

Split social_left_content in blocks at tpl level in messaging tool - refs #5637

Revision 4129c54c (diff)
Added by Imanol Losada about 5 years ago

Modify course's list and add session's list in 'My shared profile' - refs #5637

Revision b3100a63
Added by Imanol Losada about 5 years ago

Solve conflicts when merging - refs #5637

Revision 03a607f7 (diff)
Added by Imanol Losada about 5 years ago

[Fix] Social wall HTML and CSS style - refs #5637

Revision d02a73ed (diff)
Added by Imanol Losada about 5 years ago

Enable Opengraph - refs #5637

Revision 4a8997ed (diff)
Added by Imanol Losada about 5 years ago

Moved delete link below photograph. This is the best place when the window is so narrow - refs #5637

Revision 897fba48 (diff)
Added by Imanol Losada about 5 years ago

Minor - Code style - refs #5637

Revision bdd0c981 (diff)
Added by Imanol Losada about 5 years ago

Modify div display CSS property - refs #5637

Revision 1f2cec2f (diff)
Added by Imanol Losada about 5 years ago

Add image-only upload constraint - refs #5637

Revision 8b8fca29 (diff)
Added by Imanol Losada about 5 years ago

Fix image position issue. Justify text. Modify div display property - refs #5637

Revision 1c099628 (diff)
Added by Imanol Losada about 5 years ago

Minor - Function name changes for convention reasons - refs #5637

Revision bc006edd (diff)
Added by Imanol Losada about 5 years ago

[Fix] Align post button to right - refs #5637

Revision 4bf1db37 (diff)
Added by Imanol Losada about 5 years ago

Add OpenGraph library - refs #5637

Revision 7f9ed801 (diff)
Added by Imanol Losada about 5 years ago

Add AutoExtend feature. Doesn't load post responses. Doesn't show delete button. - refs #5637

Revision 59675abc (diff)
Added by Imanol Losada about 5 years ago

Fix post response loading issue. Add delete button in ajax posts - refs #5637

Revision 06eda4bd (diff)
Added by Imanol Losada about 5 years ago

Fix image upload. Fix social homepage layout - refs #5637

Revision ea56afd5 (diff)
Added by Imanol Losada about 5 years ago

Replace sql insert with Database::insert() method - refs #5637

Revision 21c66bf8 (diff)
Added by Imanol Losada about 5 years ago

Add .svg, .webp and .webm image formats - refs #5637

Revision 1d68a04a (diff)
Added by Imanol Losada about 5 years ago

Add missing variable name and variable description - refs #5637

Revision d1c0790b (diff)
Added by Imanol Losada about 5 years ago

Replace with - refs #5637

Revision 73f28150 (diff)
Added by Imanol Losada about 5 years ago

Add missing descriptions - refs #5637

Revision ccc70e2c (diff)
Added by Imanol Losada about 5 years ago

Replace api_get_path(WEB_PATH).'main/social/profile.php?u='.; with api_get_path(WEB_CODE_PATH).'social/profile.php?u='.; - refs #5637

Revision 62b65728 (diff)
Added by Imanol Losada about 5 years ago

Fix different receive variables - refs #5637

Revision 9bccb8a1 (diff)
Added by Imanol Losada about 5 years ago

Add PHPDoc's @return in readContentWithOpenGraph() function- refs #5637

Revision 68e7f8b1 (diff)
Added by Imanol Losada about 5 years ago

Replace getImage() with getImagePath() function name. Modify function description - refs #5637

Revision 23f1c8db (diff)
Added by Imanol Losada about 5 years ago

Modify function description with 'Get full image path from a path and a size' - refs #5637

Revision 54198903 (diff)
Added by Imanol Losada about 5 years ago

Add space after switch - refs #5637

Revision ed3b9dfb (diff)
Added by Imanol Losada about 5 years ago

Add Security::remove_XSS() to array - refs #5637

Revision f73d452e (diff)
Added by Imanol Losada about 5 years ago

Little replace to avoid useless processing - refs #5637

Revision 406a02a6 (diff)
Added by Imanol Losada about 5 years ago

Delete webm video format from getSupportedImageExtensions() function - refs #5637

Revision 4840ccdf (diff)
Added by Imanol Losada about 5 years ago

Add PHP version_compare constraint for webp format image - refs #5637

Revision 4ae58eee (diff)
Added by Imanol Losada about 5 years ago

Fix some 'notice' and 'strict' issues. Add PHPDoc to headerMessagePost function in social.lib.php. Replace getSupportedImageExtensions function name with api_get_supported_image_extensions in main_api.lib.php - refs #5637

Revision 525d8919 (diff)
Added by Imanol Losada about 5 years ago

Make static getHtmlByLink function to remove a 'strict' issue. Now OpenGraph works a little better but it is still too slow so I keep it disabled (line 1515) - refs #5637

History

#1

Updated by Yannick Warnier about 7 years ago

The messages area should appear just below the contact box with the name and other info about the user.

#2

Updated by Julio Montoya about 7 years ago

  • Status changed from Assigned to Needs more info
  • Assignee deleted (Julio Montoya)

I propose to move this to 1.10

#3

Updated by Yannick Warnier almost 7 years ago

  • Target version changed from 1.9.4 to 2.0

Agreed

#4

Updated by Yannick Warnier over 5 years ago

This would require at least the following language variables:

$SocialWall = "Wall";
$SocialWallWhatAreYouThinkingAbout = "What are you thinking about?";
$PostMessage = "Post message";
$SentOnXByY = "Sent on %s by %s";

#5

Updated by Yannick Warnier over 5 years ago

  • % Done changed from 0 to 10

I added some minor work on this in https://github.com/ywarnier/chamilo-lms/commit/229e67be23848d8736a6f1dbe20d9872d70242b7
It's only allowing you to post on your own wall at the moment, without hierarchy, and with a limit of 10 messages shown, but it's a start to try out how well this would behave in a truly social fashion.
This doesn't require any database change (although I tricked the message "status" field to allow for a "type" of message) but it requires language variables to be added (as mentioned above) in order to show the origin of each message.

Still missing:
  • allow for the inclusion of images or links
  • allow for "responding" to another's message on his own wall
  • checking notifications
  • rebranding the general appearance
  • probably move the normal information blocks from the profile on the sides
  • add the form on the profile page of others (now it is only on main/social/home.php)
#6

Updated by Yannick Warnier about 5 years ago

  • Status changed from Needs more info to Assigned
  • Assignee set to anibal copitan
#7

Updated by anibal copitan about 5 years ago

  • % Done changed from 10 to 30

Actualizando,
- reestructurar html css (con apoyo de alex)
- mover amigos a la izquierda,
- adaptar muro de publicaciones: mostrar publicaciones del usuario ref FB ( con comentarios de sus amigos).
- En este muro se podra insertar imagen con solo url o subir imagen (revisar API : openGraph) || read </og:image>

sección publicaciones : link : My share profile.

rama creada : https://github.com/enlacee/chamilo-lms/tree/5637
en desarrollo.

#8

Updated by anibal copitan about 5 years ago

subiendos los cambios,

logica de muro: limitado por 10 post.

post -> comment -> comment -> comment
post -> comment

#9

Updated by Alex Aragon about 5 years ago

Estaba revisando el diseño de la presentación de la red social, y con esta nueva funcionalidad, falta colocar las distribuciones de cada elemento adecuadamente, elabore un wireframe de esta sección.

Verificar si los elementos estan correctos, hice según el comportamiento de chamilo para los dispositivos moviles.

Según converse con yanncik la sección de mis producciones estara oculta mientras no se active esta opción para mostrarlo en el perfil.

Adjunto visualizaciones de los wireframes para comentarios.

#10

Updated by anibal copitan about 5 years ago

Actualizacion: publicar en muro (con tus amigos)

Rama : actualizada : https://github.com/enlacee/chamilo-lms/tree/5637

Implementacion pendiente:
- script para visualizar la el tiempo en (segundos, minutos, horas, dias, meses, años)
- subir imagenes (integracion de upload de documentos {espacio verde})

#11

Updated by Noa Orizales Iglesias about 5 years ago

Mis comentarios:

1) ¿El muro qué mostraría? ¿Todo lo que publiquen en sus respectivos muros las personas que tengo en mi lista de amigos o también actualizaciones de los grupos a los que pertenezco en la red social?

2) En el pdf se ve a la derecha un apartado que muestra el listado de cursos. Yo personalmente lo quitaría porque añade ruido a la interfaz y no aportada nada al alumno. Estamos en la red social y no creo que mostra los cursos ahí tenga utilidad.

3) El apartado de "Mis producciones" que aparece a la derecha en el pdf tampoco le veo mucho sentido que vaya ahí.

4) ¿Habeis previsto algo para el control de ese muro? Imagino que los profesores que lo usen en centros escolares con menores querrán poder controlar algunos parámetros. Por ejemplo que no puedan compartir fotos para evitar el tan desagradable tema de las fotos robadas en la escuela. Le pregunto a mi padre y le pido que nos de su opinión desde el punto de vista de docente de secundaria. Seguro que se le ocurre algo.

MI relfexión final es también que no deberíamos dedicar mucho tiempo a esta herramienta ya que, por lo que veo en las tareas, los docentes no han pedido muchas mejroas en ella y de lo que he visto en entornos profesionales tampoco es una herramienta muy usada.

#12

Updated by Alex Aragon about 5 years ago

Si bien Chamilo usa twig para la generación de plantillas, hasta el momento se esta llevando una mala practica, cuando se este desarrollando una nueva funcionalidad o trabajando en un bloque que se llama a traves de funciones PHP, debemos tener en cuenta los siguiente.

No usar elemento de Grid Systems de bootstrap incluidos dentro de código php, ejemplos:


<div class=row>

</div>
<div class=”span4”>

</div>

Tampoco esta permitido usar las clases span, offset2, row-fluid, container, col-md, well
Si un caso desea añadir una clase de bootstrap por ejemplo para un boton. Primero en la clase debara definir la classe de bootstrap seguido de una clase de identificado único colocada por usted para su botón.

Ejemplo:

<button class="btn btn-large  miclasse" type="button">Large button</button>

En el caso de llamados de listas mediante un bucle. Si necesitan llamar una lista <li>, los registros iran solo en <li> y no empezaran con <ul>.

Ejemplo:

<ul> //el ul se declara en el tpl, ya que aca podemos declarar class de css que deseamos para las listas.
    //el bucle realizado en php empezara por las etiquetas <li>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    //fin de bucle
</ul>


Si se desea mostrar información igualmente hacerlo fuera de un span

<span class="badge badge-success">{{ dato_obtenido_php }}</span>

Los mismo para los mensajes de ayuda o alerta.

<div class="alert alert-block">  

{{ dato_obtenido_php }}

</div>

Esto permitirá trabajar las plantillas a través de bloques par que un maquetador pueda mover las llamadas de twig mediante {{ muestra_bloque }} por su estructura html que desea, mejorara a largo plazo la utilización y elaboración de plantillas en Chamilo LMS

#13

Updated by anibal copitan about 5 years ago

Se Implemento: imagenes para el muro
las imagenes para la red social por usuario se encuentran en:

Ejem:
main/upload/users/1/1/message_attachments/social

Se disponde de tres tamaños las cuales son:

IMAGE_WALL_SMALL : 200px
IMAGE_WALL_MEDIUM : 500px
IMAGE_WALL_BIG : original

Nota: cambios en la rama:5637

#14

Updated by Julio Montoya about 5 years ago

Estos cambios estan muy atados a la estructura de chamolo 1.9.x. Creo que lo mejor seria dejarlo en 1.9.x

#15

Updated by Alex Aragon about 5 years ago

Exacto, pero estamos hablano solo de cambios pequeños para la 1.9.x, las referencias que hago es para que apliquen desde ahora algo de modificación al menos para el template de 1.9.x en en la sección Social... de hecho que la 1.10 será al casi 100%...

#16

Updated by Yannick Warnier about 5 years ago

  • Target version changed from 2.0 to 1.9.10

Je, no me había dado cuenta que todavía estaba en v10

#17

Updated by anibal copitan about 5 years ago

Al utilizar OpenGraph: https://github.com/scottmac/opengraph
Esquema OpenGraph : http://ogp.me/
para obtener contenidos basicos de otras paginas

$graph = OpenGraph::fetch('https://github.com');

// ---- resutl
url => https://github.com
site_name => GitHub
title => Build software better, together
description => GitHub is the best place to build software together. Over 4 million people use GitHub to share code.
image => https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png
image:type => image/png
image:width => 1200
image:height => 620

Estos datos son muy costosos de obtener al realizar la consulta dentro del proceso php:
Lo ideal seria elaborar un javascript para que lea según el avance se visualicen en la pagina.

El tiempo que demora con OpenGraph es de 2.5 segundos extra para cargar una pagina.
Eh comentado esta funcionalidad por el momento.

#20

Updated by Julio Montoya about 5 years ago

Algunos comentarios:

- En el PDF se muestra una seccion "Mis cursos"... pero si la lista es muy grande? Supongo que falta un link "Ver mas".
- Qué sucede con las Secciones o los grupos?
- Qué sucede si estoy en 1 solo curso inscrito y no tengo ninguna "producción", la columna de la derecha no serviria de mucho no?

#21

Updated by Yannick Warnier about 5 years ago

Julio Montoya wrote:

Algunos comentarios:

- En el PDF se muestra una seccion "Mis cursos"... pero si la lista es muy grande? Supongo que falta un link "Ver mas".

En efecto, aunque ahora es así y la idea es mejorar (o reducir) lo que tenemos sin emprender desarrollos enormes (mayormente estilo) (a parte del Social Wall que esto la gente sigue pidiéndolo desde hacen 6 versiones).

- Qué sucede con las Secciones o los grupos?

Grupos de cursos o grupos sociales?
Los grupos sociales tienen su propia entrada en el menú. Los grupos de cursos no se muestran por ahora, pero también existe una entrada de menú "Mis clases" si es que esta funcionalidad está acitvada (y visible para los usuarios).

- Qué sucede si estoy en 1 solo curso inscrito y no tengo ninguna "producción", la columna de la derecha no serviria de mucho no?

Bueeeeno.... esto mejoraremos poco a poco también.
De hecho, la caja de "producciones" debería irse hasta que tengamos un parámetro de visibilidad para ella (bueno... para cada una de las dichas producciones).

Me parece que podríamos tener una tarea específica con estas notas para mejoras dentro de la v10, porque todas son cuestiones de contenido -> #7301

#22

Updated by Yannick Warnier about 5 years ago

  • Assignee changed from anibal copitan to Angel Quiroz
#23

Updated by Yannick Warnier about 5 years ago

  • Assignee changed from Angel Quiroz to Daniel Barreto
#24

Updated by Daniel Barreto about 5 years ago

Done
  • Check things done here
  • Delete a duplicated social-menu div
To do:
  • Check previous work on commits
#25

Updated by Yannick Warnier about 5 years ago

  • % Done changed from 30 to 50

This task has extended far beyond the initial request with the addition of the OpenGraph integration, so it is taking a little longer than expected.

#26

Updated by Imanol Losada about 5 years ago

  • Assignee changed from Daniel Barreto to Yannick Warnier
#27

Updated by Daniel Barreto about 5 years ago

Review code style

#28

Updated by Daniel Barreto about 5 years ago

Done:
Fix auto extend
Fix date (now show time ago like)
Fix social.ajax.php
Fix to allow upload a picture without message

#29

Updated by Yannick Warnier about 5 years ago

  • Status changed from Assigned to Feature implemented
  • Assignee changed from Yannick Warnier to Imanol Losada
  • % Done changed from 50 to 100

This can be closed for now. There are still little issues with OpenGraph, but this can be fixed in another task. Well done, guys!

Also available in: Atom PDF